diff --git a/.github/skills/xplat-docs-api-links/SKILL.md b/.github/skills/api-link/SKILL.md similarity index 74% rename from .github/skills/xplat-docs-api-links/SKILL.md rename to .github/skills/api-link/SKILL.md index 0bbd7d67e2..9769fb167e 100644 --- a/.github/skills/xplat-docs-api-links/SKILL.md +++ b/.github/skills/api-link/SKILL.md @@ -1,6 +1,6 @@ --- -name: xplat-docs-api-links -description: "Reference guide for adding and fixing ApiLink and ApiRef components in xplat MDX documentation files. Covers pkg, type, kind, member, prefixed, suffix, and label props; platform prefix mapping (Igr/Igx/Igc/Igb); kind values from TypeDoc JSON; utility class suffix rules; excel library special rules (prefixed={false}, IgniteUI.Blazor.Documents.Excel); dock manager slot members; and MDX parse error from JSX in comments. Use when an agent needs to add, fix, or audit ApiLink/ApiRef calls in MDX files." +name: api-link +description: "Reference guide for adding and fixing ApiLink and ApiRef components in MDX documentation files. Covers all platforms: Angular, React, WebComponents, Blazor (TypeDoc URLs) and jQuery (jQueryApiUrl). Covers pkg, type, kind, member, section, prefixed, suffix, and label props; platform prefix mapping (Igr/Igx/Igc/Igb); kind values from TypeDoc JSON; utility class suffix rules; excel library special rules; dock manager slot members; jQuery widget/class URL patterns; and MDX parse error from JSX in comments. Use when an agent needs to add, fix, or audit ApiLink/ApiRef calls in MDX files." user-invocable: true --- @@ -8,13 +8,18 @@ user-invocable: true ## Context -The MDX files in this folder are shared across four platforms: **Angular, React, WebComponents, Blazor**. The `` and `` components resolve to the correct platform-specific URL at build time from a single MDX source. +The `` and `` components resolve to the correct platform-specific API URL at build time. -> **Key insight:** The `type=`, `member=`, `pkg=`, and `kind=` attributes are **identical for all platforms**. Fixing an ApiLink fixes it for all four platforms simultaneously. Only the generated URL differs per platform. +- **Angular, React, WebComponents, Blazor** (`docs/angular`, `docs/xplat`) — TypeDoc URLs, resolved from hardcoded `docRoot` values in `platform-context.ts` (host swapped per environment: `staging.infragistics.com` for staging, `www.infragistics.com` for production). Steps 1–9 below apply to all four of these platforms. +- **jQuery** (`docs/jquery`) — URL resolved from `jQueryApiUrl` in `environment.json` at build time. Different URL structure — see the **jQuery API Links** section below. + +**Shared MDX files** (`docs/xplat`) are built for all four TypeDoc platforms from a single source. Fixing an `` there fixes it for Angular, React, WebComponents, and Blazor simultaneously. + +**Angular-specific MDX files** (`docs/angular`) are built only for Angular. The same `` props, `pkg` keys, and `kind` rules from Steps 1–9 apply — the only difference is that there is no multi-platform concern. --- -## Step 1 — Locate the API Source Data +## Step 1 — Locate the API Source Data (xplat platforms) The `api-docs` project (sibling to this docs repository) contains TypeDoc JSON files that are the **authoritative source** for which class owns which member. Find the project by its folder name `api-docs` — the exact path on disk depends on the machine. Alternatively get the source from this github repository - https://github.com/IgniteUI/api-docs @@ -60,7 +65,7 @@ Each JSON file is a TypeDoc reflection tree. Top-level `children` contains all e --- -## Step 2 — Understand the MDX ApiLink Syntax +## Step 2 — Understand the MDX ApiLink Syntax (xplat) ```mdx @@ -352,7 +357,96 @@ Fix: replace JSX numeric props with string values inside comments: --- -## Step 8 — Fix Pattern +## jQuery API Links + +jQuery docs live in `docs/jquery/` and use a completely different URL structure from the TypeDoc platforms. + +### How it works + +The jQuery build resolves `ApiLink` URLs from `jQueryApiUrl` in `docs/jquery/src/content/en/environment.json`: + +| Build mode | `jQueryApiUrl` | +|---|---| +| development | `https://www.infragistics.com/products/ignite-ui/docs/api/js` | +| staging | `https://staging.infragistics.com/products/ignite-ui/docs/api/js` | +| production | `https://www.infragistics.com/products/ignite-ui/docs/api/js` | + +Platform is identified via `docs/jquery/.platform.json` (`"platform": "jQuery"`). The build reads this file, resolves to the `jQuery` platform context, and `ApiLink.astro` uses `getEnvVars().jQueryApiUrl` as the base URL. + +### jQuery URL structure + +``` +{jQueryApiUrl}/{namespace}.{widgetName}[#{section}:{member}] +``` + +- **`namespace`**: `ui` for jQuery UI widgets (default), `ig` for standalone classes/datasources +- **`widgetName`**: the widget or class name as-is (e.g. `igCombo`, `igGrid`, `igBulletGraph`, `OlapXmlaDataSource`) +- **`section`**: `options`, `events`, or `methods` — only used when `member` is present +- **`member`**: the specific option/event/method name + +### jQuery `` props + +| Attribute | Notes | +|---|---| +| `type` | Widget or class name as it appears in the jQuery API URL (e.g. `"igCombo"`, `"igBulletGraph"`, `"OlapXmlaDataSource"`). No platform prefix — jQuery has none. | +| `pkg` | `"core"` (default) → `ui.` namespace. `"ig"` → `ig.` namespace. | +| `section` | `"options"` \| `"events"` \| `"methods"`. Required when `member` is set for the anchor to be appended. | +| `member` | The option, event, or method name. Combined with `section` to produce `#section:member`. | +| `label` | Override display text. Recommended — defaults to `type.member` which may not match the original link text. | +| `kind`, `prefixed`, `suffix` | Not applicable for jQuery. Ignored. | + +### Examples + +```mdx +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + + + + + + + + + + + + + + + + + + + + +``` + +### Replacing `{environment:jQueryApiUrl}` tokens + +Old raw link in MDX: +```mdx +[`itemTemplate`]({environment:jQueryApiUrl}/ui.igcombo#options:itemTemplate) +``` + +Replacement with ``: +```mdx + +``` + +Note: the old raw URLs often use all-lowercase widget names (e.g. `ui.igcombo`). The jQuery API site accepts both, but use the camelCase form in `ApiLink` `type=` for consistency (e.g. `"igCombo"` not `"igcombo"`). + +### Configuration files + +| File | Role | +|---|---| +| `docs/jquery/.platform.json` | Identifies the jQuery platform (`"platform": "jQuery"`) so `getPlatformContext()` returns the jQuery context | +| `docs/jquery/src/content/en/environment.json` | Contains `jQueryApiUrl` per build mode (development / staging / production) | +| `src/lib/platform-context.ts` | `jQuery` entry in `PLATFORMS` — `prefix: ''`, `apiPackages.core` (ui. namespace), `apiPackages.ig` (ig. namespace) | +| `src/components/mdx/ApiLink.astro` | jQuery branch: reads `getEnvVars().jQueryApiUrl`, builds `{baseUrl}/{ns}.{type}[#{section}:{member}]` | + +--- + +## Step 8 — Fix Pattern (xplat) ### Column-level fix @@ -412,9 +506,11 @@ Rules: | File | Role | |---|---| -| `src/components/mdx/ApiLink.astro` | ApiLink component — URL generation logic | +| `src/components/mdx/ApiLink.astro` | ApiLink component — URL generation logic (xplat TypeDoc + jQuery) | | `src/components/mdx/ApiRef.astro` | ApiRef component | -| `src/lib/platform-context.ts` | Platform config, `docRoot` URLs per platform, prefix mapping | +| `src/lib/platform-context.ts` | Platform config, `docRoot` URLs per platform, prefix mapping, jQuery placeholder packages | +| `docs/jquery/.platform.json` | jQuery platform identifier | +| `docs/jquery/src/content/en/environment.json` | jQuery environment URLs including `jQueryApiUrl` | | `api-docs/src/data/react/igniteui-react-grids.json` | TypeDoc JSON — React grids (primary reference) | | `api-docs/src/data/react/igniteui-react.json` | TypeDoc JSON — React core | | `api-docs/src/data/angular/igniteui-angular-21.0.x.json` | TypeDoc JSON — Angular | diff --git a/_imports/help-topics-ja/.gitignore b/_imports/help-topics-ja/.gitignore new file mode 100644 index 0000000000..310f33ea22 --- /dev/null +++ b/_imports/help-topics-ja/.gitignore @@ -0,0 +1,3 @@ +# Trados files # +*.sdlxliff +*.sdlproj \ No newline at end of file diff --git a/_imports/help-topics-ja/README.md b/_imports/help-topics-ja/README.md new file mode 100644 index 0000000000..bf10d0a849 --- /dev/null +++ b/_imports/help-topics-ja/README.md @@ -0,0 +1,37 @@ +# %%ProductName%% Help Topics - Japanese + +### Overview + +This is the repository for help topics associated with [%%ProductName%%](http://jp.igniteui.com). The help is available [online](http://jp.igniteui.com/help). + +The online repository is called [help-topics-ja](https://github.com/IgniteUI/help-topics-ja). You must login to GitHub to access this page. + +The topics here are translated versions of the markdown files from the [help-topics](https://github.com/IgniteUI/help-topics) repository. + +### Branches + +The English help-topics branching structure is as follows. + ++ 15.1 - The current branch. New branches will be added with versioned names upon completion of development. ++ 14.1 - The branch that contains a snapshot of the content that was released in 14.1. New topics from 14.2 are not merged into this branch. ++ 14.2 - The branch that contains a snapshot of the content that was released in 14.2. It contains topics new to 14.2, but not to 15.1. + +### Development Branch + +There is a new repository for new content called [help-topics-vnext](https://github.com/IgniteUI/help-topics-vnext). The exact methodology of working with it is still under review. However, this needs to exist so that new content for future releases can be created without it being public. The English [help-topics](https://github.com/IgniteUI/help-topics) repository will be going public upon the 15.1 release. As such, if any content was added there, it would be available for anyone to view, and that's not what we want for unreleased versions. + +### Tools + +It is recommended to use [GitHub for Windows](https://windows.github.com/). + +The files are stored in Git, not in TFS. + +The files are written in [Markdown](http://daringfireball.net/projects/markdown/). + +For more information about Git and GitHub, please see the [Git and GitHub wiki page](http://corp.infragistics.local/departments/engineering/LocalizationTeam/Localization%20Wiki/Git%20and%20GitHub.aspx). + +### Questions + +If you have any questions about the localization process, please ask within the team. + +For questions about the English project, markdown, Git, or GitHub, please contact Craig Shoemaker or Damyan Petev. \ No newline at end of file diff --git a/docs/angular/src/content/en/components/slider/slider.mdx b/docs/angular/src/content/en/components/slider/slider.mdx index 748f3b34eb..d8475231b7 100644 --- a/docs/angular/src/content/en/components/slider/slider.mdx +++ b/docs/angular/src/content/en/components/slider/slider.mdx @@ -392,8 +392,6 @@ This mirrors the visualization of the **ticks** and displays them above and belo -> [!NOTE] -> ### Orientation > When the is set to **Top** or **Mirror** and there are visible **tick labels** the **thumb label** is hidden intentionally. This prevents a bad user experience and overlapping between the two labels. diff --git a/docs/jquery/.platform.json b/docs/jquery/.platform.json new file mode 100644 index 0000000000..3d209f4007 --- /dev/null +++ b/docs/jquery/.platform.json @@ -0,0 +1,3 @@ +{ + "platform": "jQuery" +} diff --git a/docs/jquery/astro.config.ts b/docs/jquery/astro.config.ts new file mode 100644 index 0000000000..26c532a2bc --- /dev/null +++ b/docs/jquery/astro.config.ts @@ -0,0 +1,76 @@ +// @ts-check +import mdx from '@astrojs/mdx'; +import path from 'node:path'; +import { createDocsSite, type DocsMode } from 'docs-template/integration'; +import { IGDOCS_PLATFORMS, type NavLang } from 'docs-template/platform'; +import { normalizeMdxDir } from 'docs-template/normalize-mdx'; + +// ── Build mode and language ────────────────────────────────────────────────── +// DOCS_ENV: 'development' | 'staging' | 'production' (preferred, default: 'development') +// NODE_ENV: fallback — do NOT set to 'staging'; Vite derives import.meta.env.DEV from it. +// DOCS_LANG: 'en' | 'jp' (default: 'en') +const docsEnv = process.env.DOCS_ENV || process.env.NODE_ENV || 'development'; +const docsLang = (process.env.DOCS_LANG || 'en') as NavLang; + +if (docsEnv !== 'development' && docsEnv !== 'staging' && docsEnv !== 'production') { + throw new Error( + `[astro.config] Invalid DOCS_ENV "${docsEnv}". Expected one of: "development", "staging", "production".` + ); +} + +const mode: DocsMode = docsEnv; + +// ── Site URL — varies by build mode ───────────────────────────────────────── +const PROD_HOST = 'https://www.infragistics.com'; +const STAGING_HOST = 'https://staging.infragistics.com'; + +// jp.infragistics.com is the JP domain; the base path is the same as en. +const platformKey = docsLang === 'jp' ? 'jQueryJP' : 'jQuery'; +const { base } = IGDOCS_PLATFORMS[platformKey]; +const site = mode === 'production' ? `${PROD_HOST}${base}` + : mode === 'staging' ? `${STAGING_HOST}${base}` + : 'http://localhost:4335'; + +// ── Source paths ───────────────────────────────────────────────────────────── +// Japanese source files live in 'ja/' (ISO 639-1 code used by the migration +// pipeline), while the DOCS_LANG environment value is 'jp' (matching other +// platform conventions). All other languages use DOCS_LANG as the folder name. +const contentLangDir = docsLang === 'jp' ? 'ja' : docsLang; +const docsDir = path.resolve(`./src/content/${contentLangDir}/topics`); +const tocPath = docsLang === 'jp' + ? path.resolve('./src/content/toc.json') + : path.resolve('./toc.json'); + +// ── Pre-process: normalize legacy DocFX MDX files to Astro/Starlight format ── +normalizeMdxDir(docsDir); + +// https://astro.build/config +export default createDocsSite({ + site, + base: mode !== 'development' ? base : undefined, + title: 'Ignite UI for jQuery', + description: 'Component and API reference docs for Ignite UI for jQuery.', + platform: 'jquery', + navLang: docsLang, + mode, + productLinks: Object.values(IGDOCS_PLATFORMS) + .filter(p => p.lang === docsLang) + .map(({ label, key, base: b }) => ({ + label, + href: mode === 'production' ? `${PROD_HOST}${b}` : `${STAGING_HOST}${b}`, + platform: key, + })), + source: { + tocPath, + docsDir, + }, + starlight: {}, + image: { service: { entrypoint: 'astro/assets/services/noop' } }, + integrations: [mdx()], + // Expose @/ alias so MDX files can import components. + vite: { + resolve: { + alias: { '@': path.resolve('./src') }, + }, + }, +}); diff --git a/docs/jquery/package.json b/docs/jquery/package.json new file mode 100644 index 0000000000..8cc53dc01a --- /dev/null +++ b/docs/jquery/package.json @@ -0,0 +1,38 @@ +{ + "name": "jquery-docs", + "type": "module", + "version": "1.0.0", + "scripts": { + "dev": "astro dev --port 4335", + "dev:en": "cross-env DOCS_ENV=development DOCS_LANG=en astro dev --port 4335", + "dev:jp": "cross-env DOCS_ENV=development DOCS_LANG=jp astro dev --port 4335", + "build:en": "cross-env DOCS_ENV=production DOCS_LANG=en NODE_OPTIONS=--max-old-space-size=4096 astro build --outDir=../../dist/jquery", + "build:jp": "cross-env DOCS_ENV=production DOCS_LANG=jp NODE_OPTIONS=--max-old-space-size=4096 astro build --outDir=../../dist/jquery-jp", + "build": "cross-env NODE_OPTIONS=--max-old-space-size=4096 astro build", + "build-staging": "cross-env DOCS_ENV=staging NODE_ENV=production NODE_OPTIONS=--max-old-space-size=4096 astro build --outDir=../../dist/jquery", + "build-staging:en": "cross-env DOCS_ENV=staging NODE_ENV=production DOCS_LANG=en NODE_OPTIONS=--max-old-space-size=4096 astro build --outDir=../../dist/jquery", + "build-staging:jp": "cross-env DOCS_ENV=staging NODE_ENV=production DOCS_LANG=jp NODE_OPTIONS=--max-old-space-size=4096 astro build --outDir=../../dist/jquery-jp", + "build-production": "cross-env NODE_ENV=production NODE_OPTIONS=--max-old-space-size=4096 astro build --outDir=../../dist/jquery", + "build-production:en": "cross-env NODE_ENV=production DOCS_LANG=en NODE_OPTIONS=--max-old-space-size=4096 astro build --outDir=../../dist/jquery", + "build-production:jp": "cross-env NODE_ENV=production DOCS_LANG=jp NODE_OPTIONS=--max-old-space-size=4096 astro build --outDir=../../dist/jquery-jp", + "preview": "astro preview --outDir=../../dist/jquery --port 4335", + "preview:en": "cross-env DOCS_LANG=en astro preview --outDir=../../dist/jquery --port 4335", + "preview:jp": "cross-env DOCS_LANG=jp astro preview --outDir=../../dist/jquery-jp --port 4335", + "astro": "astro" + }, + "engines": { + "node": ">=22.12.0" + }, + "dependencies": { + "@astrojs/mdx": "^5.0.0", + "@astrojs/starlight": "^0.38.3", + "astro": "^6.1.6", + "docs-template": "file:../../", + "sharp": "^0.34.2" + }, + "devDependencies": { + "cross-env": "^7.0.3", + "js-yaml": "^4.1.1", + "sass-embedded": "^1.98.0" + } +} diff --git a/docs/jquery/public/web.config b/docs/jquery/public/web.config new file mode 100644 index 0000000000..a800fed85a --- /dev/null +++ b/docs/jquery/public/web.config @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/jquery/src/content.config.ts b/docs/jquery/src/content.config.ts new file mode 100644 index 0000000000..b485bb0557 --- /dev/null +++ b/docs/jquery/src/content.config.ts @@ -0,0 +1,6 @@ +// Zero-config content collection. +// createDocsSite() in astro.config.ts sets DOCS_SOURCE_PATH to the absolute +// path of src/content/en/topics before Astro starts, so the collection +// automatically resolves to the right directory. +import { collections } from 'docs-template/content'; +export { collections }; diff --git a/docs/jquery/src/content/en/environment.json b/docs/jquery/src/content/en/environment.json new file mode 100644 index 0000000000..0832e52de6 --- /dev/null +++ b/docs/jquery/src/content/en/environment.json @@ -0,0 +1,50 @@ +{ + "development": { + "ProductName": "Ignite UI for jQuery", + "ProductNameMVC": "Ignite UI for ASP.NET MVC", + "ProductNameASPNETCore": "Ignite UI for ASP.NET Core", + "ProductFamilyName": "Ignite UI", + "PlatformName": "jQuery", + "ProductVersion": "24.2", + "ProductVersionShort": "24.2", + "SamplesUrl": "https://www.infragistics.com/products/ignite-ui/dock-manager/docs/typescript/latest", + "SamplesEmbedUrl": "https://www.infragistics.com/products/ignite-ui/dock-manager/docs/typescript/latest", + "NewSamplesUrl": "https://www.infragistics.com/products/ignite-ui/dock-manager/docs/typescript/latest", + "jQueryApiUrl": "https://www.igniteui.com/help/api/2025.1", + "DesignerUrl": "TODO_DESIGNER_URL", + "InstallPath": "%%InstallPath%%", + "InstallPathMVC": "%%InstallPathMVC%%" + }, + "staging": { + "ProductName": "Ignite UI for jQuery", + "ProductNameMVC": "Ignite UI for ASP.NET MVC", + "ProductNameASPNETCore": "Ignite UI for ASP.NET Core", + "ProductFamilyName": "Ignite UI", + "PlatformName": "jQuery", + "ProductVersion": "24.2", + "ProductVersionShort": "24.2", + "SamplesUrl": "https://staging.infragistics.com/products/ignite-ui/dock-manager/docs/typescript/latest", + "SamplesEmbedUrl": "https://staging.infragistics.com/products/ignite-ui/dock-manager/docs/typescript/latest", + "NewSamplesUrl": "https://staging.infragistics.com/products/ignite-ui/dock-manager/docs/typescript/latest", + "jQueryApiUrl": "https://www.igniteui.com/help/api/2025.1", + "DesignerUrl": "TODO_DESIGNER_URL", + "InstallPath": "%%InstallPath%%", + "InstallPathMVC": "%%InstallPathMVC%%" + }, + "production": { + "ProductName": "Ignite UI for jQuery", + "ProductNameMVC": "Ignite UI for ASP.NET MVC", + "ProductNameASPNETCore": "Ignite UI for ASP.NET Core", + "ProductFamilyName": "Ignite UI", + "PlatformName": "jQuery", + "ProductVersion": "24.2", + "ProductVersionShort": "24.2", + "SamplesUrl": "https://www.infragistics.com/products/ignite-ui/dock-manager/docs/typescript/latest", + "SamplesEmbedUrl": "https://www.infragistics.com/products/ignite-ui/dock-manager/docs/typescript/latest", + "NewSamplesUrl": "https://www.infragistics.com/products/ignite-ui/dock-manager/docs/typescript/latest", + "jQueryApiUrl": "https://www.igniteui.com/help/api/2025.1", + "DesignerUrl": "TODO_DESIGNER_URL", + "InstallPath": "%%InstallPath%%", + "InstallPathMVC": "%%InstallPathMVC%%" + } +} diff --git a/docs/jquery/src/content/en/topics/angularjs-directives/angularjs-directives.mdx b/docs/jquery/src/content/en/topics/angularjs-directives/angularjs-directives.mdx new file mode 100644 index 0000000000..98ada355eb --- /dev/null +++ b/docs/jquery/src/content/en/topics/angularjs-directives/angularjs-directives.mdx @@ -0,0 +1,17 @@ +--- +title: "AngularJS Directives" +slug: angularjs-directives +--- + +# AngularJS Directives +## In This Group of Topics + +### Introduction + +The {environment:ProductName}® directives for AngularJS allow you to take advantage of the data binding and declarative view programming when using {environment:ProductName}® controls in Angular apps. In the [{environment:ProductName} GitHub repository](https://github.com/IgniteUI/igniteui-angularjs) you can always find the latest source and samples. + +### Topics + +- [Using {environment:ProductName} with AngularJS](/using-ignite-ui-with-angularjs.mdx) - This topic contains an overview using the {environment:ProductName} directives for AngularJS. +- [Conditional and Advanced Templating with AngularJS](/conditional-and-advanced-templating-with-angularjs.mdx) - This topic explains how to use conditional templates and use advanced templating methods to customize controls created with the {environment:ProductName} directives for AngularJS. +- [AngularJS Samples](/angularjs-samples.mdx) - This topic contains samples using the {environment:ProductName} directives for AngularJS. \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/angularjs-directives/angularjs-samples.mdx b/docs/jquery/src/content/en/topics/angularjs-directives/angularjs-samples.mdx new file mode 100644 index 0000000000..e15e668e21 --- /dev/null +++ b/docs/jquery/src/content/en/topics/angularjs-directives/angularjs-samples.mdx @@ -0,0 +1,155 @@ +--- +title: "AngularJS Samples" +slug: angularjs-samples +--- + +# AngularJS Samples + +## Topic Overview +This topic covers samples with {environment:ProductFamilyName} directives for AngularJS. + +### In this topic + +This topic contains the following sections: +- [Requirements](#requirements) +- [Grid Sample](#grid_sample) + - [Preview](#grid_sample_preview) + - [Details](#grid_sample_details) +- [Editors Sample](#editors_sample) + - [Preview](#editors_sample_preview) + - [Details](#editors_sample_details) +- [Tile Manager Sample](#tile_manager_sample) + - [Preview](#tile_manager_sample_preview) + - [Details](#tile_manager_sample_details) +- [Dialog Window Sample](#dialog_window_sample) + - [Preview](#dialog_window_sample_preview) + - [Details](#dialog_window_sample_details) +- [Tree Sample](#tree_sample) + - [Preview](#tree_sample_preview) + - [Details](#tree_sample_details) +- [Map Sample](#map_sample) + - [Preview](#map_sample_preview) + - [Details](#map_sample_details) +- [Layout Manager Sample](#lm_sample) + - [Preview](#lm_preview) + - [Details](#lm_details) +- [Data Chart Sample](#dchart_sample) + - [Preview](#dchart_preview) + - [Details](#dchart_details) +- [Related Content](#related_content) + +### Requirements +In order to run this sample, you need to have: +- The required {environment:ProductName} JavaScript and CSS files +- The {environment:ProductFamilyName} AngularJS directives + +### Grid Sample​ +This sample will demonstrate how we can use `igGrid` with AngularJS. + +#### Preview +The following is a preview of the final result. + +
+ [{environment:SamplesEmbedUrl}/grid/angular]({environment:SamplesEmbedUrl}/grid/angular) +
+ +#### Details +This sample demonstrates how AngularJS directives are used with the igGrid when `Updating`, `Paging` and `Sorting` features are activated. + +### Editors Sample​ +This sample will demonstrate how we can use `igEditors` with AngularJS. + +#### Preview +The following is a preview of the final result. + +
+ [{environment:SamplesEmbedUrl}/editors/angular]({environment:SamplesEmbedUrl}/editors/angular) +
+ +#### Details +This sample demonstrates how to create a number of different editors using AngularJS directives. + +### Tile Manager Sample​ +This sample will demonstrate how we can use `igTileManager` with AngularJS. + +#### Preview +The following is a preview of the final result. + +
+ [{environment:SamplesEmbedUrl}/tile-manager/angular]({environment:SamplesEmbedUrl}/tile-manager/angular) +
+ +#### Details +In this sample we use the `igTileManager` AngularJS directive. Firstly we introduce a `data` variable in our controller which holds the data source. Then we declare an `igTileManager` AngularJS directive and bind it to the `data` variable. + +### Dialog Window Sample +This sample will demonstrate how we can use `igDialog` with AngularJS. + +#### Preview +The following is a preview of the final result. + +
+ [{environment:SamplesEmbedUrl}/dialog-window/angular]({environment:SamplesEmbedUrl}/dialog-window/angular) +
+ +#### Details +In this sample we use the `igDialog` AngularJS directive. The Dialog Window is initialized with `headerText` and `height` options set. + +### Tree Sample +This sample will demonstrate how we can use `igTree` with AngularJS. + +#### Preview +The following is a preview of the final result. + +
+ [{environment:SamplesEmbedUrl}/tree-control/angular]({environment:SamplesEmbedUrl}/tree-control/angular) +
+ +#### Details +In this sample we use the `igTree` AngularJS directive. Firstly we introduce a `data` variable in our controller which holds the data source. Then we declare an `igTree` AngularJS directive and bind it to the `data` variable. + +### Map Sample +This sample will demonstrate how we can use `igMap` with AngularJS. + +#### Preview +The following is a preview of the final result. + +
+ [{environment:SamplesEmbedUrl}/map/angular]({environment:SamplesEmbedUrl}/map/angular) +
+ +#### Details +In the sample above we show how a zoomable map can be initialized using an AngularJS directive. + +### Layout Manager Sample +This sample demonstrates how `AngularJS` directives are used to instantiate `igLayoutManager`. + +#### Preview +The following is a preview of the final result. + +
+ [{environment:SamplesEmbedUrl}/layout-manager/angular]({environment:SamplesEmbedUrl}/layout-manager/angular) +
+ +#### Details +In this sample we use the `igLayoutManager` AngularJS directive. + +### Data Chart Sample​ +This sample demonstrates how `AngularJS` directives are used to instantiate `igDataChart`. + +#### Preview +The following is a preview of the final result. + +
+ [{environment:SamplesEmbedUrl}/data-chart/angular]({environment:SamplesEmbedUrl}/data-chart/angular) +
+ +#### Details +This sample demonstrates how to link together the Data Chart and Zoombar Controls using AngularJS directives. + + +### Related Content +The following topics provide additional information related to this one: + +- [Using {environment:ProductFamilyName} with AngularJS](/using-ignite-ui-with-angularjs.mdx) - This topic contains an overview using the {environment:ProductFamilyName} directives for AngularJS. +- [Conditional and Advanced Templating with AngularJS](/conditional-and-advanced-templating-with-angularjs.mdx) - This topic explains how to use conditional templates and use advanced templating methods to customize controls created with the {environment:ProductFamilyName} directives for AngularJS. \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/angularjs-directives/conditional-and-advanced-templating-with-angularjs.mdx b/docs/jquery/src/content/en/topics/angularjs-directives/conditional-and-advanced-templating-with-angularjs.mdx new file mode 100644 index 0000000000..9ccc986f54 --- /dev/null +++ b/docs/jquery/src/content/en/topics/angularjs-directives/conditional-and-advanced-templating-with-angularjs.mdx @@ -0,0 +1,219 @@ +--- +title: "Conditional and Advanced Templating with AngularJS" +slug: conditional-and-advanced-templating-with-angularjs +--- +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +#Conditional and Advanced Templating with AngularJS + +##Topic Overview + +This topic explains how to use conditional templates and use advanced templating methods to customize controls created with the {environment:ProductName} directives for AngularJS. + +### Required background + +The following lists the concepts, topics, and articles required as a prerequisite to understanding this topic. + +- Topics + - [Using {environment:ProductName} with AngularJS](/using-ignite-ui-with-angularjs.mdx) + - [Infragistics Templating Engine](../06_Infragistics-Templating-Engine/01_igTemplating Overview.mdx) + +- Concepts + - [Angular Expressions](https://docs.angularjs.org/guide/expression) + +### In this topic + +This topic contains the following sections: + +- [**Introduction**](#introduction) + - [Context and Scope](#context-and-scope) +- [**Declarative conditional and iterative templates**](#declarative-templates) + - [Templates within the directive](#templates-within-directive) + - [External templates](#external-templates) + - [Using a Scope Method](#scope-method) + - [Non-Bindable Directive](#non-bindable-directive) +- [**Using different templating engines**](#different-templating-engines) + - [jsRender with igGrid](#jsrender-grid) + - [Overriding the Templating Function](#overriding-templating) +- [**Related Content**](#related-content) + - [Topics](#topics) + - [Samples](#samples) + +## Introduction + +As {environment:ProductName} controls use [Infragistics Templating Engine](../06_Infragistics-Templating-Engine/01_igTemplating Overview.mdx) by default to handle templating, there are a few characteristics that must be taken into account when creating {environment:ProductName} controls in an Angular app, more specifically when doing so declaratively. The templating engine supports both common substitution using a `${property}` notation, as well as **conditional and iterative operations** that using double curly braces (e.g. `{{condition / loop}}` ). The latter is however in direct conflict with Angular’s [expression](https://docs.angularjs.org/guide/expression) evaluation as it uses the same syntax for bindings and therefore would recognize such templates and attempt to parse them. That is usually not a desired effect as it is likely to cause exceptions due to syntax and context differences. Even without errors, it might change the template’s markup that is otherwise intended for evaluation at within a control’s rendering process. This topic provides a few alternatives for using complex templates declaratively as well as methods to customize the entire templating handling with different engines. + +### Context and Scope + +Templates handled by the engine are also evaluated in the global `window` scope. Therefore, any global functions and objects such as `parseInt()` or `Math` can be used in addition to arithmetic operations within the condition clause. That, in turn, means `$scope` properties are not available for evaluation out of the box. + +Control templates are also often intended for a context different than the document or Angular’s scope. For example the `igGrid` column templates are to be evaluated in the context of the current data record being rendered and cannot be generally evaluated directly against the data source. Each control is responsible for matching data item with its intended template and passing them to the templating function. + +## Declarative Conditional and Iterative Templates + +While using any templating syntax to initialize controls with scope-defined options is acceptable, that is not always the case with declaratively defined templates. + +### Templates within the Directive + +There are differences in regard to where the template property is defined in the directive. Template on many controls are a top level option, for example the of the `igCombo`: + +**In HTML:** +```html + +ig-combo> +``` + +This configuration will cause Angular to try to parse the template and **throw an exception**! This is because even with custom tags, attributes from the parent (i.e. the ``) element are carried over after it is replaced with the actual valid HTML tag the control will use. However, for the `igDataChart` or on the `igGrid` **will work as expected**: + +**In HTML:** +```html + + + + + + + +``` + +![](images/Conditional_and_Advanced_Templating_with_AngularJS_1.png) + +**In HTML:** +```html + + + + External Templates + +The easiest way to avoid conflicts would be to define templates outside the `ng-app` directive but that would mean the template can no longer be part of the {environment:ProductName} directive options. Nonetheless, an external template can often have a desired effect. For example you can increase readability of your code or share templates between controls. Either way, the directives need to be able to find that template for control initialization and to do that you use a scope method. + +### Using a Scope Method + +A function defined in the angular scope can be used to provide the template value via option evaluation. It can perform both complex tasks for initialization or simply provide access to a template defined somewhere in the document. While some controls provide the choice to supply either the template itself or the id by which it can be found( e.g. the `igDataChart`), the {environment:ProductName} directives will register the `getHtml()` function in your scope for the rest: + +**In JavaScript:** +```js +function getHtml(selector){ + return $(selector).html(); +}; +``` + +All that it does is provide a jQuery selection proxy in the scope. The function will not override custom implementations if such already exist. Now with the option evaluation `getHtml()` can be used to supply HTML to any option, including templates: + +**In HTML:** +```html + + + + + +``` + +Where the element with an ID of “colTemplate” is the container of the template defined outside the angular app: + +**In HTML:** +```html + +``` +### Non-Bindable Directive + +When defining external templates that need to be within the Angular application scope, the option is to mark the template container with the [`ng-non-bindable`](https://docs.angularjs.org/api/ng/directive/ngNonBindable) directive, which instructs AngularJS to skip parsing and compiling the contents of the element: + +**In HTML:** +```html + + + +``` + +3. Include {environment:ProductName} and the directives module. Preferably use a custom download, but you can also [include {environment:ProductName} in any available way](/general-and-getting-started/deployment-guide-javascript-resources.mdx). + + **In HTML:** +```html + + + + +``` + +4. At this point you have all directives loaded in a module you can list it as a dependency in your own and define angular controllers, factories, providers and so on: + + **In JavaScript:** +```js + var app = angular.module('igniteui-sample', ['igniteui-directives']); + app.controller('sampleController', ['$scope', function($scope) { + $scope.header = 'Hello World!'; + }]); +``` +5. In your view you need to instruct Angular where your application runs and the controller to use. For example: + + **In HTML:** +```html + + + +``` + +6. And finally add the desired directive, for example an `igDialog`: + + **In HTML:** +```html + + + +``` + ![](images/Using_Ignite_UI_with_AngularJS_2.png) + +## Data Binding + + +Besides providing initialization integration, one of the main benefits of the {environment:ProductName} directives for AngularJS is data binding support. The directives automatically assign AngularJS watchers to the sources provided at initialization, so the only requirement to enable data binding is to set the `dataSource` option or `data-source` attribute to the desired property from the scope: + +**In HTML:** +```html + +``` + +Where data is injected in the scope using a [factory provider](https://docs.angularjs.org/guide/providers) and defined as: + +**In JavaScript:** + + app.controller('gridController', + ['$scope', 'northwind', + function ($scope, northwind) { + $scope.northwind = northwind.data; + }]); + +### Two-way Data Binding + +The most common case includes controls that can consume and manipulate data, for those type of controls two way data binding is supported. A two-way binding means data values inside the controls are updated if changes are made to the underlying data source. In addition, if changes are made in the view from the control the underlying data is also kept in sync. Controls that support two-way data binding include: + +- igGrid +- igCombo +- igEditors +- igTree + +>**Note:** For some controls two-way binding requires enabling additional features, such as the Updating feature on the `igGrid`. + +### One-way Data Binding + +The other main group are controls that cannot edit their information (mostly consisting of Data Visualization controls), but will still reflect any changes in the data source to which they are bound. In this case the directives create a one-way connection which propagates data changes to the widget in the view. Controls in this group include: + +- igHtmlEditor +- igDataChart +- igSparkline +- igFunnelChart + +## Templates + +Many {environment:ProductName} controls support templates that are by default handled by the [Infragistics Templating Engine](../06_Infragistics-Templating-Engine/01_igTemplating Overview.mdx). The {environment:ProductName}® Templating Engine is a JavaScript library used to apply a content template to a set of HTML elements. It supports conditional logic and nested templates. The engine uses a `${property}` notation for substitution of the corresponding property values in the data provided. For example, wrapping column values in additional markup for styling and formatting: + +**In HTML:** +```html + + + + + +``` + +![](images/Using_Ignite_UI_with_AngularJS_3.png) + +Or providing additional HTML markup to the cell, like an image column: + +**In JavaScript:** +```js +app.controller('gridController', + ['$scope', 'northwindEmployees', + function ($scope, northwindEmployees) { + $scope.gridOptions = { + dataSource: $scope.northwindEmployees.data, + columns: [ + //... + { headerText: "PhotoPath", + key: "PhotoPath", + dataType: "string", + template: '' + } + ], + // ... + }; + }]); +``` + +![](images/Using_Ignite_UI_with_AngularJS_4.png) + +### Setting Templates Declaratively + +The templating engine uses double curly braces for **conditional templates** (e.g. `{{if condition}}` ), which are also used by Angular for expression evaluation. Therefore, using such templates in declarative initialization **can cause conflicts**. For more information on how you can provide conditional templates declaratively or customize the templating process refer to the [Conditional and Advanced Templating with AngularJS](/conditional-and-advanced-templating-with-angularjs.mdx) topic. + +**Related:** [igGrid sample](http://igniteui.github.io/igniteui-angularjs/samples/igGrid.html) + +## Controls with HTML content + +In order to provide HTML content to a control (and prevent it from being parsed as an option), you must wrap any markup you don't want parsed in a `` element. The following example demonstrates how you may add additional markup to the `igDialog` control. + +**In HTML:** +```html + + +

+ +

+ + +``` + +![](images/Using_Ignite_UI_with_AngularJS_5.png) + +This approach to providing additional markup applies to controls such as the `igDialog`, `igLayoutManager` and the `igTileManager`. + +**Related:** [igDialog Angular sample](http://igniteui.github.io/igniteui-angularjs/samples/igDialog.html) + +## Related Content + +### Topics + +The following topics provide additional information related to this topic. + +- [Conditional and Advanced Templating with AngularJS](/conditional-and-advanced-templating-with-angularjs.mdx) + +### Samples + +The following samples provide additional information related to this topic. + +- [{environment:ProductName} directives for AngularJS samples](http://igniteui.github.io/igniteui-angularjs/) +- [All {environment:ProductName} control samples]({environment:SamplesUrl}) + + \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/03_MVC_API_Docs.stub b/docs/jquery/src/content/en/topics/asp-net-mvc/03_MVC_API_Docs.stub new file mode 100644 index 0000000000..e69de29bb2 diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/aspnet-mvc-landingpage.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/aspnet-mvc-landingpage.mdx new file mode 100644 index 0000000000..59575bb4e0 --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/aspnet-mvc-landingpage.mdx @@ -0,0 +1,22 @@ +--- +title: "{environment:ProductNameMVC}" +slug: asp.net-mvc-landingpage +--- + +# {environment:ProductNameMVC} + + +- [Infragistics Excel Engine](/excel-engine/win-infragistics-excel-engine.mdx) +- [Infragistics Document Engine](/document-engine/win-infragistics-document-engine.mdx) +- [Infragistics Word Library](/word-library/word-infragistics-word-library.mdx) +- [Infragistics.Web.Mvc Assembly](Infragistics.Web.Mvc.html) +- [Infragistics.Web.Documents.Excel Assembly](Infragistics.Web.Documents.Excel.html) +- [Infragistics.Web.Documents.IO Assembly](Infragistics.Web.Documents.IO.html) +- [Infragistics.Web.Documents.Reports Assembly](Infragistics.Web.Documents.Reports.html) +- [Infragistics.Web.Documents.Word Assembly](Infragistics.Web.Documents.Word.html) + + + + + + diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/api-overview.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/api-overview.mdx new file mode 100644 index 0000000000..f3a5a8eb66 --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/api-overview.mdx @@ -0,0 +1,183 @@ +--- +title: "API Overview" +slug: documentengine-api-overview +--- + +# API Overview +This section lists each namespace that is relevant to the code library. We also give you several key classes that you will be using while programming with this code library. The namespaces and classes on this page link directly into our API documentation. + +> **Note:** Unless otherwise noted, the unit for all properties in the Infragistics.Documents assembly is Points. + +Documents namespace: | Key Interfaces: +---------------------|---------------- +[Infragistics.Documents.Reports](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports_namespace.html "Link to the Web API Reference Guide to the Infragistics.Documents.Reports namespace.") | [ISealable](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.ISealable.html "Link to the Web API Reference Guide to the ISealable interface.") + + +| | | | +| --- | --- | --- | +| Graphics namespace: [Infragistics.Documents.Reports.Graphics](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics_namespace.html) | Key Classes: [Brush](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.Brush.html) [Brushes](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.Brushes.html) [Color](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.Color.html) [Colors](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.Colors.html) [DirectBrush](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.DirectBrush.html) [Font](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.Font.html) [Fonts](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.Fonts.html) [Graphics](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.Graphics.html) [Image](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.Image.html) [IndirectBrush](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.IndirectBrush.html) [Pen](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.Pen.html) [Pens](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.Pens.html) [Point](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.Point.html) [Rectangle](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.Rectangle.html) | Key Interfaces: [IGraphics](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.IGraphics.html) | + + + + +| | | +| --- | --- | +| HTML namespace: [Infragistics.Documents.Reports.HTML](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.HTML_namespace.html) | Key Classes: [Attribute](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.HTML.Attribute.html) [Comment](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.HTML.Comment.html) [Content](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.HTML.Content.html) [Element](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.HTML.Element.html) [Reader](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.HTML.Reader.html) [Scanner](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.HTML.Scanner.html) | + + + +| | | | +| --- | --- | --- | +| PDF namespace: [Infragistics.Documents.Reports.PDF](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.PDF_namespace.html) | Key Classes: [PdfDocument](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.PDF.PdfDocument.html) | Key Interfaces: [IBookmark](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.PDF.IBookmark.html) [IPdfInfo](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.PDF.IPdfInfo.html) [IPermissions](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.PDF.IPermissions.html) [IViewerPreferences](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.PDF.IViewerPreferences.html) | + + + +| | | | +| --- | --- | --- | +| Report namespace: [Infragistics.Documents.Reports.Report](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report_namespace.html) | Key Classes: [Background](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Background.html) [Borders](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Borders.html) [ContentAlignment](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.ContentAlignment.html) [Corners](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Corners.html) [Height](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Height.html) [Margins](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Margins.html) [Paddings](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Paddings.html) [PageMargins](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.PageMargins.html) [PageSize](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.PageSize.html) [Report](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Report.html) [TextAlignment](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.TextAlignment.html) [Width](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Width.html) | Key Interfaces: [ICanvas](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.ICanvas.html) [IChain](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.IChain.html) [ICondition](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.ICondition.html) [IContainer](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.IContainer.html) [IDrawing](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.IDrawing.html) [IGap](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.IGap.html) [IGroup](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.IGroup.html) [IImage](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.IImage.html) [IQuickImage](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.IQuickImage.html) [IRotator](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.IRotator.html) [IRule](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.IRule.html) [ISite](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.ISite.html) [IStretcher](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.IStretcher.html) | + + + +| | | +| --- | --- | +| Band namespace: [Infragistics.Documents.Reports.Report.Band](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Band_namespace.html) | Key Interfaces: [IBand](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Band.IBand.html) [IBandDivider](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Band.IBandDivider.html) [IBandFooter](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Band.IBandFooter.html) [IBandHeader](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Band.IBandHeader.html) | + + + +Bookmarks namespace: | Key Interfaces: +----------------------|----------------- +[Infragistics.Documents.Reports.Report.Bookmarks](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Bookmarks_namespace.html "Link to the Web API Reference Guide to the Infragistics.Documents.Reports.Report.Bookmarks namespace.") | [IBookmarkLevel](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Bookmarks.IBookmarkLevel.html "Link to the Web API Reference Guide to the IBookmarkLevel interface.") < br /> [IBookmarks](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Bookmarks.IBookmarks.html "Link to the Web API Reference Guide to the IBookmarks interface.") + + + +| | | | +| --- | --- | --- | +| Flow namespace: [Infragistics.Documents.Reports.Report.Flow](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Flow_namespace.html) | Key Classes: [ColumnPattern](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Flow.ColumnPattern.html) [FlowPattern](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Flow.FlowPattern.html) | Key Interfaces: [IFlow](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Flow.IFlow.html) [IFlowColumn](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Flow.IFlowColumn.html) | + + + +| | | | +| --- | --- | --- | +| Grid namespace: [Infragistics.Documents.Reports.Report.Grid](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Grid_namespace.html) | Key Classes [GridCellPattern](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Grid.GridCellPattern.html) [GridColumnPattern](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Grid.GridColumnPattern.html) [GridDividerPattern](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Grid.GridDividerPattern.html) [GridFooterPattern](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Grid.GridFooterPattern.html) [GridHeaderPattern](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Grid.GridHeaderPattern.html) [GridPattern](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Grid.GridPattern.html) [GridRowPattern](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Grid.GridRowPattern.html) | Key Interfaces: [IGrid](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Grid.IGrid.html) [IGridCell](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Grid.IGridCell.html) [IGridColumn](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Grid.IGridColumn.html) [IGridDivider](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Grid.IGridDivider.html) [IGridFooter](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Grid.IGridFooter.html) [IGridHeader](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Grid.IGridHeader.html) [IGridRow](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Grid.IGridRow.html) | + + + +| | | +| --- | --- | +| Index namespace: [Infragistics.Documents.Reports.Report.Index](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Index_namespace.html) | Key Interfaces: [IIndex](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Index.IIndex.html) [IIndexLevel](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Index.IIndexLevel.html) | + + + +| | | | +| --- | --- | --- | +| List namespace: [Infragistics.Documents.Reports.Report.List](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.List_namespace.html) | Key Classes: [Bullets](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.List.Bullets.html) [ListPattern](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.List.ListPattern.html) | Key Interfaces: [IList](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.List.IList.html) [IListItem](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.List.IListItem.html) | + + + +| | | +| --- | --- | +| Preferences namespace: [Infragistics.Documents.Reports.Report.Preferences](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Preferences_namespace.html) | Key Interfaces: [IPreferences](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Preferences.IPreferences.html) | + + + +| | | +| --- | --- | +| Preferences.PDF namespace: [Infragistics.Documents.Reports.Report.Preferences.PDF](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Preferences.PDF_namespace.html) | Key Interfaces: [IEncryptor](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Preferences.PDF.IEncryptor.html) [IPassword](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Preferences.PDF.IPassword.html) [IPdfInfo](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Preferences.PDF.IPdfInfo.html) [IPdfPreferences](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Preferences.PDF.IPdfPreferences.html) [IPermissions](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Preferences.PDF.IPermissions.html) [ISignature](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Preferences.PDF.ISignature.html) [IViewer](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Preferences.PDF.IViewer.html) | + + + +| | | +| --- | --- | +| Preferences.Printing namespace: [Infragistics.Documents.Reports.Report.Preferences.Printing](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Preferences.Printing_namespace.html) | Key Interfaces: [IPrintPreferences](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Preferences.Printing.IPrintPreferences.html) | + + + +| | | +| --- | --- | +| Preferences.XPS namespace: [Infragistics.Documents.Reports.Report.Preferences.XPS](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Preferences.XPS_namespace.html) | Key Interfaces: [IXpsInfo](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Preferences.XPS.IXpsInfo.html) [IXpsPreferences](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Preferences.XPS.IXpsPreferences.html) | + + + +| | | +| --- | --- | +| Projection namespace: [Infragistics.Documents.Reports.Report.Projection](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Projection_namespace.html) | Key Interfaces: [IProjectionPage](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Projection.IProjectionPage.html) [IProjectionPageCollection](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Projection.IProjectionPageCollection.html) | + + + +| | | +| --- | --- | +| QuickList namespace: [Infragistics.Documents.Reports.Report.QuickList](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.QuickList_namespace.html) | Key Interfaces: [IQuickList](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.QuickList.IQuickList.html) [IQuickListItem](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.QuickList.IQuickListItem.html) | + + + +| | | +| --- | --- | +| QuickTable namespace: [Infragistics.Documents.Reports.Report.QuickTable](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.QuickTable_namespace.html) | Key Interfaces: [IContainerCell](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.QuickTable.IContainerCell.html) [IImageCell](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.QuickTable.IImageCell.html) [IQuickTable](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.QuickTable.IQuickTable.html) [IQuickTableDivider](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.QuickTable.IQuickTableDivider.html) [IQuickTableFooter](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.QuickTable.IQuickTableFooter.html) [IQuickTableHeader](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.QuickTable.IQuickTableHeader.html) [IQuickTableRow](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.QuickTable.IQuickTableRow.html) [ITextCell](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.QuickTable.ITextCell.html) | + + + +| | | +| --- | --- | +| QuickText namespace: [Infragistics.Documents.Reports.Report.QuickText](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.QuickText_namespace.html) | Key Interfaces: [IQuickText](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.QuickText.IQuickText.html) | + + + +| | | | +| --- | --- | --- | +| Section namespace: [Infragistics.Documents.Reports.Report.Section](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Section_namespace.html) | Key Classes: [PageNumbering](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Section.PageNumbering.html) | Key Interfaces: [IDecoration](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Section.IDecoration.html) [ISection](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Section.ISection.html) [ISectionFooter](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Section.ISectionFooter.html) [ISectionHeader](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Section.ISectionHeader.html) [ISectionPage](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Section.ISectionPage.html) [IStationery](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Section.IStationery.html) | + + + +| | | +| --- | --- | +| Segment namespace: [Infragistics.Documents.Reports.Report.Segment](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Segment_namespace.html) | Key Interfaces: [ISegment](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Segment.ISegment.html) [ISegmentFooter](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Segment.ISegmentFooter.html) [ISegmentHeader](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Segment.ISegmentHeader.html) | + + + +| | | +| --- | --- | +| Shapes namespace: [Infragistics.Documents.Reports.Report.Shapes](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Shapes_namespace.html) | Key Interfaces: [IArc](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Shapes.IArc.html) [IEllipse](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Shapes.IEllipse.html) [ILabel](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Shapes.ILabel.html) [ILine](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Shapes.ILine.html) [IPath](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Shapes.IPath.html) [IPie](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Shapes.IPie.html) [IPolygon](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Shapes.IPolygon.html) [IPolyline](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Shapes.IPolyline.html) [IRectangle](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Shapes.IRectangle.html) [IShapes](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Shapes.IShapes.html) | + + + +| | | | +| --- | --- | --- | +| Table namespace: [Infragistics.Documents.Reports.Report.Table](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Table_namespace.html) | Key Classes: [TableCellPattern](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Table.TableCellPattern.html) [TableDividerPattern](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Table.TableDividerPattern.html) [TableFooterPatter](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Table.TableFooterPattern.html) [TableHeaderPattern](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Table.TableHeaderPattern.html) [TablePattern](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Table.TablePattern.html) [TableRowPattern](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Table.TableRowPattern.html) | Key Interfaces: [ITableRowPattern](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Table.ITable.html) [ITableCell](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Table.ITableCell.html) [ITableDivider](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Table.ITableDivider.html) [ITableFooter](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Table.ITableFooter.html) [ITableHeader](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Table.ITableHeader.html) [ITableRow](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Table.ITableRow.html) | + + + +| | | | +| --- | --- | --- | +| Text namespace: [Infragistics.Documents.Reports.Report.Text](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Text_namespace.html) | Key Classes: [Style](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Text.Style.html) [TextPattern](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Text.TextPattern.html) | Key Interfaces: [IText](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Text.IText.html) | + + + +| | | +| --- | --- | +| TOC namespace: [Infragistics.Documents.Reports.Report.TOC](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.TOC_namespace.html) | Key Interfaces: [ILevel](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.TOC.ILevel.html) [ITOC](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.TOC.ITOC.html) | + + + +| | | | +| --- | --- | --- | +| Tree namespace: [Infragistics.Documents.Reports.Report.Tree](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Tree_namespace.html) | Key Classes: [TreeCaptionPattern](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Tree.TreeCaptionPattern.html) [TreeNodePattern](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Tree.TreeNodePattern.html) [TreePattern](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Tree.TreePattern.html) | Key Interfaces: [ICaption](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Tree.ICaption.html) [INode](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Tree.INode.html) [ITree](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Tree.ITree.html) | + + + +| | | | +| --- | --- | --- | +| RTF namespace: [Infragistics.Documents.Reports.RTF](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.RTF_namespace.html) | Key Classes: [Character](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.RTF.Character.html) [Color](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.RTF.Color.html) [Document](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.RTF.Document.html) [Font](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.RTF.Font.html) [Info](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.RTF.Info.html) [Paragraph](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.RTF.Paragraph.html) [Reader](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.RTF.Reader.html) [Section](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.RTF.Section.html) | Key Interfaces: [ICallback](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.RTF.ICallback.html) | + + + +| | | | +| --- | --- | --- | +| Utils namespace: [Infragistics.Documents.Reports.Utils](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Utils_namespace.html) | Key Classes: [Converter](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Utils.Converter.html) [FileBuffer](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Utils.FileBuffer.html) | Key Interfaces: [IReader](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Utils.IReader.html) [IWriter](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Utils.IWriter.html) | + + + +| | | | +| --- | --- | --- | +| XPS namespace: [Infragistics.Documents.Reports.XPS](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.XPS_namespace.html) | Key Classes: [XpsDocument](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.XPS.XpsDocument.html) | Key Interfaces: [IBookmark](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.XPS.IBookmark.html) [IXpsInfo](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.XPS.IXpsInfo.html) [IXpsPage](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.XPS.IXpsPage.html) | + + diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/deploying-infragistics-document-engine.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/deploying-infragistics-document-engine.mdx new file mode 100644 index 0000000000..cb6094cca8 --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/deploying-infragistics-document-engine.mdx @@ -0,0 +1,25 @@ +--- +title: "Deploying Infragistics Document Engine" +slug: documentengine-deploying-infragistics-document-engine +--- + +# Deploying Infragistics Document Engine + +When deploying a .NET application, you must distribute certain files in addition to your executable. If your application contains one or more Infragistics elements, you will have to distribute or deploy one or more Infragistics assembly files as part of your application. This topic outlines the files that you must re-distribute. + +> **Note:** Any files not specifically covered by this topic should be considered non-redistributable. Files that are included with your Infragistics product but not listed here are not licensed for distribution, and should not be copied to, moved to or shared with any machine other than the one on which the licensed Infragistics product is installed. + +In order to deploy your application, you will have to re-distribute the following file. + + + Infragistics.Web.Documents.Reports.dll + +This is the .NET Assembly containing the Infragistics Document Engine™ code library. + + + + + + + + diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/getting-started-with-infragistics-document-engine.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/getting-started-with-infragistics-document-engine.mdx new file mode 100644 index 0000000000..f5eb091ec0 --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/getting-started-with-infragistics-document-engine.mdx @@ -0,0 +1,58 @@ +--- +title: "Getting Started with Infragistics Document Engine" +slug: documentengine-getting-started-with-infragistics-document-engine +--- + +# Getting Started with Infragistics Document Engine + + + +The Infragistics Document Engine™ is a large assembly containing multiple namespaces with several interfaces in each. If you are new to the Documents assembly, we can completely understand the potential to get a little overwhelmed at the sheer size of the assembly. For this reason, we've added a quick start topic that will guide you through the shortest route that you need to take in order to understand the Infragistics Document Engine and create a simple report of your own. + +Since report writing is a linear process, you can use the following road map to help you understand the Document Engine's Document Object Model. + + Report > Section > Layout Elements > Report Graphics > Pattern Content > Publishing + +## Report +The [`Report`](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Report.html "Link to the Web API Reference Guide to the Report member.") object contains all the objects, properties, and information needed to create a report. Your first step in creating a report is to instantiate this object. Once instantiated, you can add sections and report information, set report-specific properties, save your report, or load an existing report. You can access report bookmarks, as well as preferences, attached files, and embedded fonts. When you are ready to add content to your report, You can use the AddSection method to add a Section element. + +See [`Report`](DocumentEngine-Report.html "Discusses the Report object that's available in the Document Engine.") for more information. + +## Section +Once you have your Report object, you can't create any content until you've added an [`ISection`](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Section.ISection.html "Link to the Web API Reference Guide to the ISection interface.") object. The Section element is unique because it is the only layout element that you can add to the report itself. Every other layout element (e.g., Band, Chain, Flow, and Group) can be added to the Section element. Add as many Sections as needed to your report. You can add extra pages to sections, as well as add multiple headers and footers. You need a firm grasp on what layout elements and content the Section element can and cannot include. + +See [Section](DocumentEngine-Section.html "Discusses the section object that's avialable in the document engine.") for more information. + +## Layout Elements +There are 10 elements that will help you organize and lay out the content of your report. These elements can contain text, images, tables, trees, lists, and many more content elements. A good layout element to start out with is the Band element. The Band element, like the Section element, can contain most other layout elements and pattern content. The Band element also has a collection of repeatable headers, footers, and dividers. + +See the [DocumentEngine Report Layout](DocumentEngine-Report-Layout.html "Discusses the layout elements available to help generate reports.") section for more information; to quickly get started, see the [Band](DocumentEngine-Band.html "Explains the Document Engine's Band element.") topic for a layout element that can fit most your needs. + +## Report Graphics +Now that you've gone through the basics of report writing (i.e., creating a report, adding sections, and filling those sections with layout elements and content), you need to add a little liveliness to your report by using report graphics. Report graphics affords you color, gradient and solid fills, different style fonts, canvases containing rectangles of all shapes and sizes, and images (Images are worth a thousand words!). Add beauty to your report's layout with Brushes and Pens. You can use Brushes and Pens for Backgrounds and Borders respectively, and would be a great stop on your journey to a place where executive reports are fun to read! + +See the [Report Graphics](DocumentEngine-Report-Graphics.html "Explains the document engine's report graphics objects.") section for more information; to quickly get started, see the [`Brushes`](DocumentEngine-Brushes.html "Explains the document engine brushes.") and [`Pens`](DocumentEngine-Pens.html "Explains the document engines pens.") topics. + +## Pattern Content +Pattern content is the heart of your report. Any text that you wish to add will be done through the elements found in this group. You'll find a Text element here that allows you to add any text with any style. Use Grids, Lists, Trees, of data from a DataSet, use the [ITable](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Table.ITable.html "Link to the Web API Reference Guide to the ITable interface.") interface. Do you have a list of names or products important to your report? List them out using the [`IList`](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.List.IList.html "Link to the Web API Reference Guide to the IList interface.") interface. Each of these elements can be easily added to your layout elements through specific methods (i.e., AddTable for the ITable interface and AddList for the IList interface). These methods are found off most layout elements. + +See the [Pattern Content](DocumentEngine-Pattern-Content.html "Explains the pattern content that's available in the document engine.") section for more information; to quickly get started, see the [Text](DocumentEngine-Text.html "Explains the text element that's available in the document engine.") topic. + +## Publishing +When you're finished writing your report, you may need to share it with someone! How you publish your report depends on several factors. Let's go over the different ways of publishing. + +**Printing** -- The simplest method of publishing. Call the [Print](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Report~Print.html "Link to the Web API Reference Guide to the Print member.") method from the Report object and you'll be able to print your report directly to a local printer. + +**Publishing** -- The term “Publish” here refers to writing your report to a PDF or XPS file. This method is equivalent to printing a Microsoft® Word document using the Adobe Acrobat® PDF writer. + +**Saving as XML** -- You have the option of saving your entire report content to an XML file. This enables you to save the entire finished report and load it at a later time. This is useful if you know you will need to make additions or modifications to your report once it has been published. + +**Generate** -- This process of publishing is unique and a bit strange, but extremely useful. Using the [`Generate`](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Report~Generate.html "Link to the Web API Reference Guide to the Generate member.") method off the Report object creates graphic objects of a set amount of pages from your report. What you can do with these graphic objects is use them as thumbnail images of your report's pages. + +See [Publishing a Report](DocumentEngine-Publish-a-Report.html "Explains how to publish a report created by the document engine.") for more information. + + + + + + diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/welcome-to-infragistics-document-engine.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/welcome-to-infragistics-document-engine.mdx new file mode 100644 index 0000000000..a9cd95860f --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/welcome-to-infragistics-document-engine.mdx @@ -0,0 +1,30 @@ +--- +title: "Welcome to Infragistics Document Engine" +slug: documentengine-welcome-to-infragistics-document-engine +--- + +# Welcome to Infragistics Document Engine + + +The Infragistics Document Engine™ is a complete, self-contained code library, allowing you to generate exceptional reports in both Portable Document Format (PDF) and XML Paper Specification (XPS) format. Infragistics Document Engine's Document Object Model (DOM) is simple enough to get up and running quickly, yet complex enough to give you the customizability that Infragistics products are known for. Using the DOM, you can effectively create a report, add a section, add some text, and publish the report -- all in a mere four lines of code. + +## [Report Elements](DocumentEngine-Report-Elements.html "Discusses the Report elements available in the Infragistics Document Engine.") +Using report elements, you can create the report's body, manage the layout, add content, and even add navigation helpers such as a table of contents or an index. + +## [DocumentEngine Report Layout](DocumentEngine-Report-Layout.html "Discusses the report layout elements available in the Infragistics Document Engine.") +Control the flow of information and how the information is laid out on a page. Use Sections to define logical regions within a report, each being able to contain its own headers and footers. Add columns to your report with the Flow element. Take even more control of your report's layout with more advanced layout elements such as Chain, Rotator, and Stretcher Content elements provide you with a means to add repeatable content such as Tables, Lists, and Trees. These elements couple nicely with a data source. You can use the Table element to duplicate a Customers table from a DataSet, the List element to list all customers of a certain status, and the Tree element to display a simplified version of a hierarchical data source. + +## [Quick Content](DocumentEngine-Quick-Content.html "Discusses the quick content items that are available in the Infragistics Document Engine.") +When you need to quickly add text, images, a list, or table, these lightweight elements are perfect. Not as complex as their full-fledged counterparts, these elements get the job done with a minimal amount of hassle. + +## [Navigation Helpers](DocumentEngine-Navigation-Helpers.html "Discusses the Navigation Helpers that are available in the Infragistics Document Engine.") +There are certain elements that a 500-page report shouldn't be without. When your report is extremely lengthy, it helps to have a table of contents to quickly browse the content of the report and jump to a certain page. Or, when you need to find a specific word, an Index can help by listing all pages of a specific term. Bookmarks are also excellent navigation helpers as they keep track of important pages that you may want to return to later. + +## [Report Graphics](DocumentEngine-Report-Graphics.html "Discusses the report graphics that are available in the Infragistics Document Engine.") +Once the layout of your report has been determined, improve its appearance with several graphical elements. Use Brushes and Pens to fill elements with different Colors and control the look of element borders. Add Images of charts, logos, products, etc. Create complex polygonal Shapes using Points. Manage the numerous fonts of your report with the Fonts element. + + + + + + diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/win-infragistics-document-engine.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/win-infragistics-document-engine.mdx new file mode 100644 index 0000000000..f327262772 --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/win-infragistics-document-engine.mdx @@ -0,0 +1,17 @@ +--- +title: "Infragistics Document Engine" +slug: win-infragistics-document-engine +--- + +# Infragistics Document Engine + + +The Infragistics Document Engine is the purveyor of fine, business reports in both Portable Document Format (PDF) and XML Paper Specification (XPS) file formats. Use the complete Document Object Model (DOM) to handle any report scenario imaginable. The Infragistics Document Engine includes support for report information, preferences, and security. There is also an extensive Graphics object to add color and personality to your reports. + +Click the links below to access important information about the Infragistics Document Engine. + +- [Welcome to Infragistics Document Engine](DocumentEngine-Welcome-to-Infragistics-Document-Engine.html "welcome to infragistics document engine"): This topic gives you a very high-level overview of the Infragistics Document Engine. You'll be introduced to the numerous report elements that come together to build a professional report, as well as report graphics that add life and color to your report. +- [Getting Started with Infragistics Document Engine](DocumentEngine-Getting-Started-with-Infragistics-Document-Engine.html "getting started with infragistics document engine"): Once you have a basic understanding of the Infragistics Document Engine, this topic will help you start using the code library. This topic is a quick walkthrough of the objects you need to create in order to produce a full report. +- [Writing Reports](DocumentEngine-Writing-Reports.html "writing reports with document engine"): This section is the meat of the Infragistics Document Engine help. You will be shown the details of each report and graphic element. These topics are in the form of conceptual walkthroughs, as most elements are quite hefty and contain many features! +- [Deploying Infragistics Document Engine](DocumentEngine-Deploying-Infragistics-Document-Engine.html "deploying document engine"): If your application uses the Infragistics Document Engine, refer to this topic for a list of the Infragistics .NET assemblies that you need to redistribute as part of your application. +- [API Overview](DocumentEngine-API-Overview.html "api overview for document engine"): This topic lists the namespaces and classes that you will be working with while programming with the Infragistics Excel Engine. The namespaces and classes listed in this topic link conveniently into the "API Reference Guide" section of the {environment:ProductName} help. \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/known-issues.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/known-issues.mdx new file mode 100644 index 0000000000..9ea2bde5a8 --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/known-issues.mdx @@ -0,0 +1,37 @@ +--- +title: "Known Issues and Limitations (Infragistics Document Engine)" +slug: documentengine-known-issues +--- +g + +# Known Issues and Limitations (Infragistics Document Engine) + +## Known Issues and Limitations Summary +The following table summarizes the known issues and limitations for the Infragistics Document Engine component. + +**Legend:** + +![](../../../../images/images/positive.png) – Workaround available + +![](../../../../images/images/negative.png) – No known workaround + +![](../../../../images/images/plannedFix.png) – No known workaround, fix planned + +## Infragistics Document Engine +Issue | Description | Status +---|---|--- +Namespace conflict | Using the NetAdvantage® for ASP.NET and {environment:ProductName}™ documents’ assemblies together causes namespace conflict exceptions. | ![](../../../../images/images/positive.png) + + +## Known Issues and Limitations Details +Using the Infragistics ASP.NET and {environment:ProductName} documents’ assemblies together causes namespace conflict exceptions. + +### Workaround +Reference either the documents assemblies from Infragistics ASP.NET or the documents assemblies from {environment:ProductName} in your application. The documents’ libraries within these assemblies are the same and can be used to replace one another. + + + + + + + diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/advanced/chain.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/advanced/chain.mdx new file mode 100644 index 0000000000..bbed0068f5 --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/advanced/chain.mdx @@ -0,0 +1,143 @@ +--- +title: "Chain" +slug: documentengine-chain +--- + +# Chain + +The Chain element is very useful if you don't want content to be divided when there is not enough room to display it all on one page. Normally, when you use a Text element, if there is not enough room on the page to fit the content, it flows to the next page as displayed in the image below. + +![Shows how a Text element can split its content between two pages.](images/Chain_01.png) + +However, by using a Chain element, you can keep that content together. Instead of an element's content being split on page breaks, the entire element will carry over to the next page as shown in the screen shot below. + +![Shows how you can force the entire Text element to be forced to the second page.](images/Chain_02.png) + +This is useful if you want to keep a paragraph of text on one page, or maybe you want to keep an image and its text caption together on one page. The Chain element links all its content together in an unbreakable chain. The only exception is when there is more content in the Chain than can fit on one page. In this case, the Chain element would not be able to keep all its content together on one page and would therefore attempt to group content elements together. + +* * * * * + +Use the following code to add a [Chain](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.IChain.html "Link to the Web API Reference Guide to the IChain interface.") element to a Section element and add text to it. + +1. **Define a report and add a Section element.** + + **In Visual Basic:** + +```vb + ' + ' Create the report and add a Section element. + ' + Dim report As Infragistics.Documents.Reports.Report.Report = _ + New Infragistics.Documents.Reports.Report.Report() + + Dim section1 As Infragistics.Documents.Reports.Report.Section.ISection = _ + report.AddSection() + + section1.PageMargins = _ + New Infragistics.Documents.Reports.Report.Margins(50) +``` + + **In C#:** + +```csharp + // + // Create the report and add a section. + // + Infragistics.Documents.Reports.Report.Report report = + new Infragistics.Documents.Reports.Report.Report(); + + Infragistics.Documents.Reports.Report.Section.ISection section1 = + report.AddSection(); + + section1.PageMargins = + new Infragistics.Documents.Reports.Report.Margins(50); +``` + +2. **Add unbreakable content to the Section element.** + + Use the following text to set the the `string1` variable: + + > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec imperdiet mattis sem. Nunc ornare elit at justo. In quam nulla, lobortis non, commodo eu, eleifend in, elit. Nulla eleifend. Nulla convallis. Sed eleifend auctor purus. Donec velit diam, congue quis, eleifend et, pretium id, tortor. Nulla semper condimentum justo. Etiam interdum odio ut ligula. Vivamus egestas scelerisque est. Donec accumsan. In est urna, vehicula non, nonummy sed, malesuada nec, purus. Vestibulum erat. Vivamus lacus enim, rhoncus nec, ornare sed, scelerisque varius, felis. Nam eu libero vel massa lobortis accumsan. Vivamus id orci. Sed sed lacus sit amet nibh pretium sollicitudin. Morbi urna. + + **In Visual Basic:** + +```vb + ' + ' Add a Chain element and a Text element to the chain. + ' This content will be unbreakable. + ' + + Dim string1 As String = "Lorem ipsum..." + + For i As Integer = 0 To 7 + ' Add a Chain element to the Band element. + Dim chain1 As Infragistics.Documents.Reports.Report.IChain = _ + section1.AddChain() + + ' Add a Text element to the Chain element. + Dim chainText As Infragistics.Documents.Reports.Report.Text.IText = _ + chain1.AddText() + + ' Set some styles on the text so we can see where the + ' element begins and ends. This way, we can be sure + ' that the content is not being separated. + chainText.Background = _ + New Infragistics.Documents.Reports.Report.Background _ + (Infragistics.Documents.Reports.Graphics.Brushes.SteelBlue) + chainText.Borders = _ + New Infragistics.Documents.Reports.Report.Borders _ + (Infragistics.Documents.Reports.Graphics.Pens.Black) + chainText.Paddings = _ + New Infragistics.Documents.Reports.Report.Paddings(5) + chainText.Margins = _ + New Infragistics.Documents.Reports.Report.Margins(5) + + ' Add content to the Text element. + chainText.AddContent(string1) + chainText.AddLineBreak() + chainText.AddLineBreak() + chainText.AddContent(string1) + Next i +``` + + **In C#:** + +```csharp + // + // Add a Chain element and a Text element to the chain. + // This content will be unbreakable. + // + + string string1 = "Lorem ipsum..."; + + for (int i = 0; i < 8; i++) + { + // Add a Chain element to the Band element. + Infragistics.Documents.Reports.Report.IChain chain1 = + section1.AddChain(); + + // Add a Text element to the Chain element. + Infragistics.Documents.Reports.Report.Text.IText chainText = + chain1.AddText(); + + // Set some styles on the text so we can see where the + // element begins and ends. This way, we can be sure + // that the content is not being separated. + chainText.Background = + new Infragistics.Documents.Reports.Report.Background + (Infragistics.Documents.Reports.Graphics.Brushes.SteelBlue); + chainText.Borders = + new Infragistics.Documents.Reports.Report.Borders + (Infragistics.Documents.Reports.Graphics.Pens.Black); + chainText.Paddings = + new Infragistics.Documents.Reports.Report.Paddings(5); + chainText.Margins = + new Infragistics.Documents.Reports.Report.Margins(5); + + // Add content to the Text element. + chainText.AddContent(string1); + chainText.AddLineBreak(); + chainText.AddLineBreak(); + chainText.AddContent(string1); + } +``` \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/advanced/gap.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/advanced/gap.mdx new file mode 100644 index 0000000000..78dc86ebb7 --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/advanced/gap.mdx @@ -0,0 +1,70 @@ +--- +title: "Gap" +slug: documentengine-gap +--- + +# Gap + +The Gap element does exactly what its name implies -- adds gaps to your content. If you have different layout elements but want them vertically separated on the page by a specific amount of space, the Gap element is what you need to use. + +![](images/Gap.png) + +Use the code below to add three Text elements divided by two Gap elements similar to the image above. This topic assumes that you already have a [Report](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Report.html "Link to the Web API Reference Guide to the Report member.") element defined, as well as at least one [ISection](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Section.ISection.html "Link to the Web API Reference Guide to the ISection interface.") element called `section1`. + +The Gap element exposes only one property, the [`Height`](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.IGap~Height.html "Link to the Web API Reference Guide to the Height member.") property. Through the Height property, you can set how high the Gap will be either in a fixed amount of points, or in a percentage of available space remaining. + +## Fixed Height +When setting the height of a Gap element to a fixed height, you need to set the Height property to a new instance of the [`FixedHeight`](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.FixedHeight.html "Link to the Web API Reference Guide to the FixedHeight member.") class. Pass the amount of points you wish the gap to span to the constructor of the `FixedHeight` class. + +## Relative Height +Using a relative height for the Gap element involves setting the Height property to an instance of the [`RelativeHeight`](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.RelativeHeight.html "Link to the Web API Reference Guide to the RelativeHeight member.") class; this will allow you to specify the height of the gap in a percentage of available space remaining. Therefore, a Gap element added to the beginning of a page with the same value of a Gap element added towards the end of the page will end up being a much larger gap. The reason for this is that the first Gap element has much more of the page left after it, so the percentage ends up being a larger number. You can see this concept in action through the image to the right. The first Gap element is using 25% of the page at the point where it was added. The second Gap element is using 50% of the page at the point where it was added but is still about the same size as the first Gap element. + +**In Visual Basic:** + +```vb +Imports Infragistics.Documents.Reports.Report +... + +Dim gapText As Infragistics.Documents.Reports.Report.Text.IText = section1.AddText() +gapText.Background = New Background(Brushes.LightSteelBlue) +gapText.AddContent("Paragraph one text...") + +Dim gap As Infragistics.Documents.Reports.Report.IGap = section1.AddGap() +gap.Height = New RelativeHeight(25) + +gapText = section1.AddText() +gapText.Background = New Background(Brushes.LightSteelBlue) +gapText.AddContent("Paragraph two text...") + +gap = section1.AddGap() +gap.Height = New RelativeHeight(50) + +gapText = section1.AddText() +gapText.Background = New Background(Brushes.LightSteelBlue) +gapText.AddContent("Paragraph three text...") +``` + +**In C#:** + +```csharp +using Infragistics.Documents.Reports.Report; +... + +Infragistics.Documents.Reports.Report.Text.IText gapText = section1.AddText(); +gapText.Background = new Background(Brushes.LightSteelBlue); +gapText.AddContent("Paragraph one text..."); + +Infragistics.Documents.Reports.Report.IGap gap = section1.AddGap(); +gap.Height = new RelativeHeight(25); + +gapText = section1.AddText(); +gapText.Background = new Background(Brushes.LightSteelBlue); +gapText.AddContent("Paragraph two text..."); + +gap = section1.AddGap(); +gap.Height = new RelativeHeight(50); + +gapText = section1.AddText(); +gapText.Background = new Background(Brushes.LightSteelBlue); +gapText.AddContent("Paragraph three text..."); +``` \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/advanced/images/Chain_01.png b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/advanced/images/Chain_01.png new file mode 100644 index 0000000000..8fc97d0255 Binary files /dev/null and b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/advanced/images/Chain_01.png differ diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/advanced/images/Chain_02.png b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/advanced/images/Chain_02.png new file mode 100644 index 0000000000..ee576915d4 Binary files /dev/null and b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/advanced/images/Chain_02.png differ diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/advanced/images/Gap.png b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/advanced/images/Gap.png new file mode 100644 index 0000000000..3a429fbfbe Binary files /dev/null and b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/advanced/images/Gap.png differ diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/advanced/images/Rotator.png b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/advanced/images/Rotator.png new file mode 100644 index 0000000000..6b5e4a804c Binary files /dev/null and b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/advanced/images/Rotator.png differ diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/advanced/images/Rule.png b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/advanced/images/Rule.png new file mode 100644 index 0000000000..b6f4a1e506 Binary files /dev/null and b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/advanced/images/Rule.png differ diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/advanced/images/Site.png b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/advanced/images/Site.png new file mode 100644 index 0000000000..3b9dc8d667 Binary files /dev/null and b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/advanced/images/Site.png differ diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/advanced/images/Stretcher_01.png b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/advanced/images/Stretcher_01.png new file mode 100644 index 0000000000..88bab93071 Binary files /dev/null and b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/advanced/images/Stretcher_01.png differ diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/advanced/images/Stretcher_02.png b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/advanced/images/Stretcher_02.png new file mode 100644 index 0000000000..59b3b8457d Binary files /dev/null and b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/advanced/images/Stretcher_02.png differ diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/advanced/layout-elements.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/advanced/layout-elements.mdx new file mode 100644 index 0000000000..0348a16b11 --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/advanced/layout-elements.mdx @@ -0,0 +1,22 @@ +--- +title: "Advanced Layout Elements" +slug: documentengine-advanced-layout-elements +--- + +# Advanced Layout Elements +Advanced layout elements are elements that you don't necessarily need in order to write a complete report. These elements will help you accomplish specific tasks related to your report's layout. + +Click the links below to learn more about advanced layout elements. + +- [Chain](DocumentEngine-Chain.html "Explains the chain layout element.") +- [Gap](DocumentEngine-Gap.html "Explains the gap layout element.") +- [Rotator](DocumentEngine-Rotator.html "Explains the rotator layout element.") +- [Rule](DocumentEngine-Rule.html "Explains the rule layout element.") +- [Site](DocumentEngine-Site.html "Explains the site layout element.") +- [Stretcher](DocumentEngine-Stretcher.html "Explains the stretcher layout element.") + + + + + + diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/advanced/rotator.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/advanced/rotator.mdx new file mode 100644 index 0000000000..0ff6b2b686 --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/advanced/rotator.mdx @@ -0,0 +1,65 @@ +--- +title: "Rotator" +slug: documentengine-rotator +--- + +# Rotator + + +The Rotator element rotates its content either 90 degrees clockwise or 90 degrees counter-clockwise. Content is rotated counter-clockwise by default, but by setting the Backward property to True, you can rotate the content clockwise. The Rotator element should be used when all you need to do is simply rotate content at a 90 degree angle. If you need to rotate content at a 45 degree angle or any other angle, you need to use the Site element. For more information on the Site element, see Site. + +In the image to the right, you see two Text elements inside of Rotator elements. The first Rotator element rotates the text 90 degrees clockwise by setting the Backward property to True. A Stretcher element was also necessary as the text was left-aligned. The second Rotator element is the exact opposite of the first. + +![](images/Rotator.png) + +The following code creates a page in a report similar to the screen shot above. + +Use the following text to set the the `string1` variable: + +> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec imperdiet mattis sem. Nunc ornare elit at justo. In quam nulla, lobortis non, commodo eu, eleifend in, elit. Nulla eleifend. Nulla convallis. Sed eleifend auctor purus. Donec velit diam, congue quis, eleifend et, pretium id, tortor. Nulla semper condimentum justo. Etiam interdum odio ut ligula. Vivamus egestas scelerisque est. Donec accumsan. In est urna, vehicula non, nonummy sed, malesuada nec, purus. Vestibulum erat. Vivamus lacus enim, rhoncus nec, ornare sed, scelerisque varius, felis. Nam eu libero vel massa lobortis accumsan. Vivamus id orci. Sed sed lacus sit amet nibh pretium sollicitudin. Morbi urna. + +**In C#:** + +```csharp +using Infragistics.Documents.Reports.Report; +. +. +. +string string1 = "Lorem ipsum..."; + +// Define a Rotator element and add it to a section. +Infragistics.Documents.Reports.Report.IRotator rotator1 = section1.AddRotator(); + +// Define a Text element and add it to the rotator. +// Add content to the Text element. You may replace +// 'string1' with some text. +Infragistics.Documents.Reports.Report.Text.IText rotatorText1 = rotator1.AddText(); +rotatorText1.AddContent(string1); + +// Set standard properties to help us see the rotator +// better. The Backward property flips the content 180 +// degrees. The AddStretcher method stretches the content +// to the bottom (right side since it's rotated 90 degrees) +// of the content area. +rotator1.Backward = true; +rotator1.Background = new Background(Brushes.LightSteelBlue); +rotator1.Height = new RelativeHeight(50); +rotator1.Paddings.All = 10; +rotator1.Margins.All = 5; +rotator1.AddStretcher(); + +// Define another rotator, same as above. This time, the text +// will be rotated to the opposite direction and will be at the +// top (left side since it's rotated -90 degrees) of the content +// area. +Infragistics.Documents.Reports.Report.IRotator rotator2 = section1.AddRotator(); + +Infragistics.Documents.Reports.Report.Text.IText rotatorText2 = rotator2.AddText(); +rotatorText2.AddContent(string1); + +rotator2.Backward = false; +rotator2.Background = new Background(Brushes.LightSteelBlue); +rotator2.Height = new RelativeHeight(100); +rotator2.Paddings.All = 10; +rotator2.Margins.All = 5; +``` \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/advanced/rule.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/advanced/rule.mdx new file mode 100644 index 0000000000..fa7062bdba --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/advanced/rule.mdx @@ -0,0 +1,54 @@ +--- +title: "Rule" +slug: documentengine-rule +--- + +# Rule + +The Rule element is very similar to the Horizontal Rule tag in HTML both in design and purpose. The Rule element is a simple line that spans the width of its parent element with default settings such as solid, black, and 1 pixel wide. Although the Rule element doesn't have to be just a simple line, you can change several properties that can make it a powerful content dividing tool. + +The width of the Rule element, by definition, is not how far the line spans horizontally; the line will always span the entire width of its parent container. The width of the Rule element is how thick the line is, so it might be easier to think of the Width property as the element's height (since we normally consider height to be the vertical distance). + +![Shows a PDF that demonstrates the Rule element, and is the result of the code below.](images/Rule.png) + + +You can use the following code to create a page in a section that looks similar to the image above. The following code assumes you already have a [Report](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Report.html "Link to the Web API Reference Guide to the Report member.") element defined with at least one [ISection](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Section.ISection.html "Link to the Web API Reference Guide to the ISection interface.") element added and named section1. + +**In C#:** + +```csharp +using Infragistics.Documents.Reports.Report; +. +. +. +section1.AddQuickText("20 pixels of space above..."); + +// Define a Rule element and provide an extra 20 pixels +// of space above and 50 pixels of space below. +Infragistics.Documents.Reports.Report.IRule rule = section1.AddRule(); +rule.Margins.Top = 20; +rule.Margins.Bottom = 50; + +section1.AddQuickText("...and 50 pixels of space below..."); + +// The Gap element helps space content out. This gap +// is specifically set to provide 20 pixels of space. +Infragistics.Documents.Reports.Report.IGap ruleGap = section1.AddGap(); +ruleGap.Height = new FixedHeight(20); + +section1.AddQuickText("...and now three pixels wide, red, and dotted."); + +// Add another Rule element to the section. +rule = section1.AddRule(); +// The Rule's color will be Red. +rule.Pen = new Pen(new Color(255, 0, 0)); +// The Rule will be 3 pixels wide. +rule.Pen.Width = 3; +// The Rule will be a dotted line. +rule.Pen.Style = DashStyle.Dot; +// The Rule will have 20 pixels of space above it and +// 50 pixels of space below. +rule.Margins.Top = 20; +rule.Margins.Bottom = 50; +``` + diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/advanced/site.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/advanced/site.mdx new file mode 100644 index 0000000000..91c1c2e0cf --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/advanced/site.mdx @@ -0,0 +1,49 @@ +--- +title: "Site" +slug: documentengine-site +--- + +# Site +The Site element affords you the ultimate customizability in placing layout elements on a page. Using the Site element, you can place elements using their x- and y-coordinates, and even rotate them to any angle. + +The Site element doesn't have unique properties that make it different from other layout elements; instead, each method that adds content elements contains two overloads. These overloads allow you to place each layout element separately wherever you chose. + +The first overload of each layout element method accepts two floats, the distance from the left side of the Site element and the distance from the top of the Site element. The second overload accepts an additional float that controls the angle at which the layout element should be placed. + +![](images/Site.png) + +The following code adds a Site element to a Section element and then adds Text and Image elements to the Site element. The Text element is rotated 45 degrees and the Image element is rotated -45 degrees similar to the image above. This topic assumes that you already have a [Report](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Report.html "Link to the Web API Reference Guide to the Report member.") defined along with a [Section](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Section.ISection.html "Link to the Web API Reference Guide to the ISection interface.") element added. + +Use the following text to set the the `string1` variable: + +> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec imperdiet mattis sem. Nunc ornare elit at justo. In quam nulla, lobortis non, commodo eu, eleifend in, elit. Nulla eleifend. Nulla convallis. Sed eleifend auctor purus. Donec velit diam, congue quis, eleifend et, pretium id, tortor. Nulla semper condimentum justo. Etiam interdum odio ut ligula. Vivamus egestas scelerisque est. Donec accumsan. In est urna, vehicula non, nonummy sed, malesuada nec, purus. Vestibulum erat. Vivamus lacus enim, rhoncus nec, ornare sed, scelerisque varius, felis. Nam eu libero vel massa lobortis accumsan. Vivamus id orci. Sed sed lacus sit amet nibh pretium sollicitudin. Morbi urna. + +**In C#:** + +```csharp +using Infragistics.Documents.Reports.Report; +. +. +. +string string1 = "Lorem ipsum..."; + +// Define a new Site element and color its background. +Infragistics.Documents.Reports.Report.ISite site = section1.AddSite(); +site.Background = new Background(Brushes.LightSteelBlue); + +// Add a Text element to the Site element. The text element +// will be placed 250 pixels to the left and 100 pixels down +// and rotated 45 degrees clockwise. +Infragistics.Documents.Reports.Report.Text.IText siteText = site.AddText(250,100,45); +// Replace string1 with some text. +siteText.AddContent(string1); +// Color the Background of the Text element. +siteText.Background = new Background(Brushes.LightSlateGray); +// The Text element will only be half the width of the Site element. +siteText.Width = new RelativeWidth(50); + +// Add an Image element to the Site element. The Image element +// will be placed 200 pixels to the left and 100 pixels down +// and rotated 45 degrees counter-clockwise. +Infragistics.Documents.Reports.Report.IImage siteImage = site.AddImage(new Image(@"C:WindowsCoffee Bean.bmp"), 200, 400, -45); +``` \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/advanced/stretcher.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/advanced/stretcher.mdx new file mode 100644 index 0000000000..3334a995e7 --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/advanced/stretcher.mdx @@ -0,0 +1,11 @@ +--- +title: "Stretcher" +slug: documentengine-stretcher +--- + +# Stretcher +The `Stretcher` element is a non-visible layout element whose only purpose is to stretch content to the end of a page. Normally, a layout element will resize to fit the content it encapsulates. This may be an undesired effect if the layout element includes a background color or image. When you call the `AddStretcher` method off a layout element, that element will stretch to the end of the page, even if its content does not. The two images below show how an element with its background color set to `LightSteelBlue` would look like without and with a Stretcher element. + +Without Stretcher | With Stretcher +--- | --- +![](images/Stretcher_01.png) | ![](images/Stretcher_02.png) \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/band.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/band.mdx new file mode 100644 index 0000000000..8dd61f51c5 --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/band.mdx @@ -0,0 +1,415 @@ +--- +title: "Band" +slug: documentengine-band +--- + +# Band + +The Band element is a standard content section with both basic and advanced features that can handle any report scenario -- small or large. For a complete list of layout elements that you can add to the Band element, see Layout Element Comparison Table. + +The Band element is unique in its ability to have repeatable headers, footers, and dividers. These headers and footers decorate the band, not the page, so the headers and footers appear above and below the content of the band. You can also insert any number of pattern content, as well as set several additional settings. + +The following content layout sections are unique to the Band element: + +- **Header**: The Header element decorates the top of the content area beginning on each new page. Set the [`Header`](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Band.IBand~Header.html) property of the [`IBand`](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Band.IBand.html) object to a new [`IBandHeader`](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Band.IBandHeader.html) object in order to take advantage of this feature. Of course, if you do not need a header, you do not need to set the property. +- **Divider**: The [`Divider`](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Band.IBand~Divider.html) element displays at the bottom of the content area, before the footer on all pages but the last. This makes the element perfect for identifying that the section continues on to the next page. Set the Divider property of the IBand object to a new [`IBandDivider`](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Band.IBandDivider.html) object in order to take advantage of this feature. As with the Header, you do not need to set this property if you do not wish to use a Divider. +- **Footer**: The Footer element decorates the bottom of the content area. If the Band ends before the bottom of the page, the footer will display at the end of the band, not the page. However, you can set the [`Stretch`](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Band.IBand~Stretch.html) property of the Band object to True if you want the band to occupy the entire page (applies to each page, not only the last page). + +![Screenshot of generated PDF showing the band's header, footer, divider, and content.](images/Band.png) + +## Creating a PDF File that Has a Single Band + +The following steps will guide you through the process of creating a PDF file containing a single Band with headers, dividers, and footers. + +### What You Will Accomplish + +The code in this walkthrough will allow you to produce a PDF report very similar to the screenshot at the top of this topic. All that's left is to publish your report. For more information on publishing your report, see [Publish a Report](DocumentEngine-Publish-a-Report.html "Explains how to publish a generate report."). + +### Follow these steps + +1. **Create the report and add a section.** + + Each report you create begins as a Report object. Once instantiated, you can add as many sections to it as needed through the AddSection method. You can add only a section to the main Report. Once a section is created, you can add all of the other types of content to it. The following code creates a report, adds a section, and sets several page-specific properties for the section. + + **In Visual Basic:** + +```vb + ' + ' Create the report and add a section. + ' + Dim report As Infragistics.Documents.Reports.Report.Report = _ + New Infragistics.Documents.Reports.Report.Report() + + Dim section1 As Infragistics.Documents.Reports.Report.Section.ISection = _ + report.AddSection() + + section1.PagePaddings = _ + New Infragistics.Documents.Reports.Report.Paddings(50) +``` + + **In C#:** + +```csharp + // + // Create the report and add a section. + // + Infragistics.Documents.Reports.Report.Report report = + new Infragistics.Documents.Reports.Report.Report(); + + Infragistics.Documents.Reports.Report.Section.ISection section1 = + report.AddSection(); + + section1.PagePaddings = + new Infragistics.Documents.Reports.Report.Paddings(50); +``` + +2. **Add the band to the section.** + + Adding a band, or any content section, to the main section is accomplished by calling a method. In this case, you will call the AddBand method off the Section object. AddBand will return a reference to a new IBand object created from the section. Therefore, you need to assign that reference to a new IBand object. The following code creates a new IBand object and sets its Background to gray. + + **In Visual Basic:** + +```vb + ' + ' Add the band to the section. + ' + Dim band As Infragistics.Documents.Reports.Report.Band.IBand = _ + section1.AddBand() + + band.Background = _ + New Infragistics.Documents.Reports.Report.Background _ + (Infragistics.Documents.Reports.Graphics.Colors.LightGray) +``` + + **In C#:** + +```csharp + // + // Add the band to the section. + // + Infragistics.Documents.Reports.Report.Band.IBand band = + section1.AddBand(); + + band.Background = + new Infragistics.Documents.Reports.Report.Background + (Infragistics.Documents.Reports.Graphics.Colors.LightGray); +``` + +3. **Add a header to the band.** + + Adding the band to the section involved a method call, adding a header to the band is done a little differently. Headers, dividers, and footers for the band already exist; you are just retrieving a reference to them. Create a new Header and set it to the Header property off the Band object. Once you've retrieved this reference, you can modify its properties. The following code will get the Band's header, set several layout and visual properties, and add some content to the header. + + **In Visual Basic:** + +```vb + ' + ' Add a header to the band. + ' + + ' Retrieve a reference to the band's header + ' and assign it to the bandHeader object. + Dim bandHeader As Infragistics.Documents.Reports.Report.Band.IBandHeader = _ + band.Header + + ' Cause the header to repeat on every page. + bandHeader.Repeat = True + + ' The height of the header will be 5% of + ' the page's height. + bandHeader.Height = _ + New Infragistics.Documents.Reports.Report.FixedHeight(30) + + ' The header's background color will be light blue. + bandHeader.Background = _ + New Infragistics.Documents.Reports.Report.Background _ + (Infragistics.Documents.Reports.Graphics.Colors.SteelBlue) + + ' Set the horizontal and vertical alignment of the header. + bandHeader.Alignment = _ + New Infragistics.Documents.Reports.Report.ContentAlignment _ + ( _ + Infragistics.Documents.Reports.Report.Alignment.Left, _ + Infragistics.Documents.Reports.Report.Alignment.Middle _ + ) + + ' The bottom border of the band will be a + ' solid, dark blue line. + bandHeader.Borders.Bottom = _ + New Infragistics.Documents.Reports.Report.Border _ + (Infragistics.Documents.Reports.Graphics.Pens.DarkBlue) + + ' Add 5 pixels of padding around the left and right edges. + bandHeader.Paddings.Horizontal = 5 + + ' Add textual content to the header. + Dim bandHeaderText As Infragistics.Documents.Reports.Report.Text.IText = _ + bandHeader.AddText() + bandHeaderText.AddContent("IBandHeader") +``` + + **In C#:** + +```csharp + // + // Add a header to the band. + // + + // Retrieve a reference to the band's header + // and assign it to the bandHeader object. + Infragistics.Documents.Reports.Report.Band.IBandHeader bandHeader = + band.Header; + + // Cause the header to repeat on every page. + bandHeader.Repeat = true; + + // The height of the header will be 5% of + // the page's height. + bandHeader.Height = + new Infragistics.Documents.Reports.Report.FixedHeight(30); + + // The header's background color will be light blue. + bandHeader.Background = + new Infragistics.Documents.Reports.Report.Background + (Infragistics.Documents.Reports.Graphics.Colors.SteelBlue); + + // Set the horizontal and vertical alignment of the header. + bandHeader.Alignment = + new Infragistics.Documents.Reports.Report.ContentAlignment + ( + Infragistics.Documents.Reports.Report.Alignment.Left, + Infragistics.Documents.Reports.Report.Alignment.Middle + ); + + // The bottom border of the band will be a + // solid, dark blue line. + bandHeader.Borders.Bottom = + new Infragistics.Documents.Reports.Report.Border + (Infragistics.Documents.Reports.Graphics.Pens.DarkBlue); + + // Add 5 pixels of padding around the left and right edges. + bandHeader.Paddings.Horizontal = 5; + + // Add textual content to the header. + Infragistics.Documents.Reports.Report.Text.IText bandHeaderText = + bandHeader.AddText(); + bandHeaderText.AddContent("IBandHeader"); +``` + +4. **Add the band's divider.** + + You can use a divider for several purposes. Since the divider always shows at the end of a page, before the footer, you can use it to signify that the band continues on to the next page, or you can use it as a kind of page-numbering system to identify how many pages the actual band is (in addition to any page-numbering device you may have in the main footer of the page). Just as you had to retrieve a reference from the band's header, you need to do the same to the divider. The following code does just that, as well as modifies standard properties and adds content. + + **In Visual Basic:** + +```vb + ' + ' Add the band's divider. + ' + + ' Retrieve a reference to the band's Divider. + Dim bandDivider As Infragistics.Documents.Reports.Report.Band.IBandDivider = _ + band.Divider + + ' Set the height to 5% of the page's height. + bandDivider.Height = _ + New Infragistics.Documents.Reports.Report.FixedHeight(30) + + ' Align the content in the middle of the divider. + bandDivider.Alignment = _ + New Infragistics.Documents.Reports.Report.ContentAlignment _ + (Infragistics.Documents.Reports.Report.Alignment.Middle) + + ' Add text to the divider and center it on the page. + Dim bandDividerText As Infragistics.Documents.Reports.Report.Text.IText = _ + bandDivider.AddText() + bandDividerText.AddContent("Band Continued...") + bandDividerText.Alignment = _ + New Infragistics.Documents.Reports.Report.TextAlignment _ + (Infragistics.Documents.Reports.Report.Alignment.Center) +``` + + **In C#:** + +```csharp + // + // Add the band's divider. + // + + // Retrieve a reference to the band's Divider. + Infragistics.Documents.Reports.Report.Band.IBandDivider bandDivider = + band.Divider; + + // Set the height to 5% of the page's height. + bandDivider.Height = + new Infragistics.Documents.Reports.Report.FixedHeight(30); + + // Align the content in the middle of the divider. + bandDivider.Alignment = + new Infragistics.Documents.Reports.Report.ContentAlignment + (Infragistics.Documents.Reports.Report.Alignment.Middle); + + // Add text to the divider and center it on the page. + Infragistics.Documents.Reports.Report.Text.IText bandDividerText = + bandDivider.AddText(); + bandDividerText.AddContent("Band Continued..."); + bandDividerText.Alignment = + new Infragistics.Documents.Reports.Report.TextAlignment + (Infragistics.Documents.Reports.Report.Alignment.Center); +``` + +5. **Add the band's footer.** + + The band's footer behaves the same way as the header, except at the bottom of the page. As with the header, you can choose whether the footer will display on every page, or just the last page. + + **In Visual Basic:** + +```vb + ' + ' Add the band's footer. + ' + + ' Retrieve a reference to the band's footer. + Dim bandFooter As Infragistics.Documents.Reports.Report.Band.IBandFooter = _ + band.Footer + + ' The band will NOT repeat on every page; + ' it will only be seen on the last page. + bandFooter.Repeat = False + + ' The footer's background color will be light blue. + bandFooter.Background = _ + New Infragistics.Documents.Reports.Report.Background _ + (Infragistics.Documents.Reports.Graphics.Colors.LightSteelBlue) + + ' The footer's height will be 5% of the page's height. + bandFooter.Height = _ + New Infragistics.Documents.Reports.Report.FixedHeight(30) + + ' Align the footer's content horizontally and vertically. + bandFooter.Alignment = _ + New Infragistics.Documents.Reports.Report.ContentAlignment _ + ( _ + Infragistics.Documents.Reports.Report.Alignment.Left, _ + Infragistics.Documents.Reports.Report.Alignment.Middle _ + ) + + ' The top border of the footer will be a + ' solid, dark blue line. + bandFooter.Borders.Top = _ + New Infragistics.Documents.Reports.Report.Border _ + (Infragistics.Documents.Reports.Graphics.Pens.DarkBlue) + + ' Add 5 pixels of padding on the left and right. + bandFooter.Paddings.Horizontal = 5 + + ' Add textual content to the footer. + Dim bandFooterText As Infragistics.Documents.Reports.Report.Text.IText = _ + bandFooter.AddText() + bandFooterText.AddContent("IBandFooter") +``` + + **In C#:** + +```csharp + // + // Add the band's footer. + // + + // Retrieve a reference to the band's footer. + Infragistics.Documents.Reports.Report.Band.IBandFooter bandFooter = + band.Footer; + + // The band will NOT repeat on every page; + // it will only be seen on the last page. + bandFooter.Repeat = false; + + // The footer's background color will be light blue. + bandFooter.Background = + new Infragistics.Documents.Reports.Report.Background + (Infragistics.Documents.Reports.Graphics.Colors.LightSteelBlue); + + // The footer's height will be 5% of the page's height. + bandFooter.Height = + new Infragistics.Documents.Reports.Report.FixedHeight(30); + + // Align the footer's content horizontally and vertically. + bandFooter.Alignment = + new Infragistics.Documents.Reports.Report.ContentAlignment + ( + Infragistics.Documents.Reports.Report.Alignment.Left, + Infragistics.Documents.Reports.Report.Alignment.Middle + ); + + // The top border of the footer will be a + // solid, dark blue line. + bandFooter.Borders.Top = + new Infragistics.Documents.Reports.Report.Border + (Infragistics.Documents.Reports.Graphics.Pens.DarkBlue); + + // Add 5 pixels of padding on the left and right. + bandFooter.Paddings.Horizontal = 5; + + // Add textual content to the footer. + Infragistics.Documents.Reports.Report.Text.IText bandFooterText = + bandFooter.AddText(); + bandFooterText.AddContent("IBandFooter"); +``` + +6. **Add content to the band.** + + Now that you have the header, divider, and footer set, you'll need to add the actual content of the band. If all you need to add to the band is simple text, then using the AddText method off the Band object is what you need. For this example, we will use the following sample text: + + > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec + > imperdiet mattis sem. Nunc ornare elit at justo. In quam nulla, + > lobortis non, commodo eu, eleifend in, elit. Nulla eleifend. Nulla + > convallis. Sed eleifend auctor purus. Donec velit diam, congue + > quis, eleifend et, pretium id, tortor. Nulla semper condimentum + > justo. Etiam interdum odio ut ligula. Vivamus egestas scelerisque + > est. Donec accumsan. In est urna, vehicula non, nonummy sed, + > malesuada nec, purus. Vestibulum erat. Vivamus lacus enim, rhoncus + > nec, ornare sed, scelerisque varius, felis. Nam eu libero vel + > massa lobortis accumsan. Vivamus id orci. Sed sed lacus sit amet + > nibh pretium sollicitudin. Morbi urna. + + Create a new string and set its content to the text above. This will + make your code easier to read once you get into more complex + scenarios involving FOR loops. Create a new IText object but don't + set it yet. Set the IText object in a FOR loop, this way you will + keep reusing the same object rather than creating new objects at + each iteration through the loop. The FOR loop creates the same + paragraph of text 20 times, giving your band a full body. + + **In Visual Basic:** + +```vb + ' + ' Add content to the band. + ' + Dim string1 As String = "Lorem ipsum..." + + Dim bandText As Infragistics.Documents.Reports.Report.Text.IText + + For i As Integer = 0 To 19 + bandText = band.AddText() + bandText.AddContent(string1) + bandText.Paddings.All = 5 + Next i +``` + + **In C#:** + +```csharp + // + // Add content to the band. + // + string string1 = "Lorem ipsum..."; + + Infragistics.Documents.Reports.Report.Text.IText bandText; + + for (int i = 0; i < 20; i++) + { + bandText = band.AddText(); + bandText.AddContent(string1); + bandText.Paddings.All = 5; + } +``` diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/container-and-condition.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/container-and-condition.mdx new file mode 100644 index 0000000000..a0604e2a16 --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/container-and-condition.mdx @@ -0,0 +1,108 @@ +--- +title: "Container and Condition" +slug: documentengine-container-and-condition +--- + +# Container and Condition + +The Container element is an extremely important and unique element that is designed for two specific purposes: + +- The Container element can inject report content through XML. +- The Container element, when used with the Condition element, can conditionally display content based on whether or not all the content fits on the page. + +## Injecting XML +The Container element allows you to inject report content using XML. You can output report content to an XML file by calling the [Save](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Report~Save.html "Link to the Web API Reference Guide to the Save member.") method of the [Report](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Report.html "Link to the Web API Reference Guide to the Report member.") object. Once you have your XML file, you can use an [IContainer](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.IContainer.html "Link to the Web API Reference Guide to the IContainer interface.") interface's [Load](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.IContainer~Load.html "Link to the Web API Reference Guide to the Load member.") method to load the XML into the container; the content will look no different whether you create it with the document object model (DOM) or load it from an XML file. If you wanted to load report content from an XML file called Report.xml, you could use code similar to the following. + +**In Visual Basic:** + +```vb +' Load the content of the XML file directly into the container. +container.Load((Application.StartupPath + "..Report.xml")) +``` + +**In C#:** + +```csharp +// Load the content of the XML file directly into the container. +container.Load(Application.StartupPath + @"..Report.xml"); +``` + +## Conditionally Displaying Content +You can add Text elements and most other [layout elements](DocumentEngine-Report-Layout.html "Explains the layout elements available in the document engine.") to the Container element. This feature alone is not what makes the Container element unique; but, when used in conjunction with a Condition element, you can determine beforehand how to handle the content if it doesn't all fit on one page. + +The Condition element's constructer accepts two parameters: + +- the name of the container to apply the condition to +- a Boolean identifying what the Document Engine should do if all the content doesn't fit on one page + +A typical scenario would be to create a Container element and fill it with content. Once the Container element is created, create a Condition element and pass in the name of the container. There will, in fact, be two conditions that you'll be testing for (False: the content of the container doesn't fit on one page. True: the content of the container does fit on one page.) Passing False as the second parameter means that the Document Engine should show this Condition element if the Container doesn't fit. Therefore, you may wish to add some text to the Condition element stating that the text didn't fit or some other substitution content. You should then add another Condition element, which will pass True as the second parameter. Passing True as the second parameter means that the Document Engine was able to fit the content on one page, but will also show the content of this Condition element. You can either leave the Condition element empty and just show the Container element's content, or you can add your own custom content to the Condition element. + +Use the following code to create a Container element and then two Condition elements based on the Container element. The first condition will appear only if the container doesn't fit on the page. The second condition will appear only if the container does fit on the page. You can change the amount of iterations the FOR loop performs to increase or decrease the amount of content in the Container element. + +Use the following String for the content of the `Text` element: + +> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec imperdiet mattis sem. Nunc ornare elit at justo. In quam nulla, lobortis non, commodo eu, eleifend in, elit. Nulla eleifend. Nulla convallis. Sed eleifend auctor purus. Donec velit diam, congue quis, eleifend et, pretium id, tortor. Nulla semper condimentum justo. Etiam interdum odio ut ligula. Vivamus egestas scelerisque est. Donec accumsan. In est urna, vehicula non, nonummy sed, malesuada nec, purus. Vestibulum erat. Vivamus lacus enim, rhoncus nec, ornare sed, scelerisque varius, felis. Nam eu libero vel massa lobortis accumsan. Vivamus id orci. Sed sed lacus sit amet nibh pretium sollicitudin. Morbi urna. + +1. **Create the Container element and fill it with content.** + + **In Visual Basic:** + +```vb + Dim container As Infragistics.Documents.Reports.Report.IContainer = _ section1.AddContainer("Container1") + + ' Define a Text element for the container. + Dim containerText As Infragistics.Documents.Reports.Report.Text.IText = _ container.AddText() + + ' Add the same content 10 times. Lower this number to 5 + ' or less in order to fit the content on one page. + For i As Integer = 0 To 9 + containerText.AddContent("Lorem ipsum...") + containerText.AddLineBreak() + containerText.AddLineBreak() + Next i +``` + + **In C#:** + +```csharp + // Define a Container element. + Infragistics.Documents.Reports.Report.IContainer container = section1.AddContainer("Container1"); + + // Define a Text element for the container. + Infragistics.Documents.Reports.Report.Text.IText containerText = container.AddText(); + + // Add the same content 10 times. Lower this number to 5 + // or less in order to fit the content on one page. + for (int i = 0; i < 10; i++) + { + containerText.AddContent("Lorem ipsum..."); + containerText.AddLineBreak(); + containerText.AddLineBreak(); + } +``` + +2. **Create the Condition elements.** + + **In Visual Basic:** + +```vb + ' If the content doesn't fit, use this condition. + Dim condition As Infragistics.Documents.Reports.Report.ICondition = section1.AddCondition(container, False) + Dim conditionText As Infragistics.Documents.Reports.Report.Text.IText = condition.AddText() + conditionText.AddContent("Container doesn't fit") + + ' If the content fits, use this condition. + condition = section1.AddCondition(container, True) +``` + + **In C#:** + +```csharp + // If the content doesn't fit, use this condition. + Infragistics.Documents.Reports.Report.ICondition condition = section1.AddCondition(container, false); + Infragistics.Documents.Reports.Report.Text.IText conditionText = condition.AddText(); + conditionText.AddContent("Container doesn't fit"); + + // If the content fits, use this condition. + condition = section1.AddCondition(container, true); +``` \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/element-comparison-table.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/element-comparison-table.mdx new file mode 100644 index 0000000000..f52fde8d29 --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/element-comparison-table.mdx @@ -0,0 +1,822 @@ +--- +title: "Layout Element Comparison Table" +slug: documentengine-layout-element-comparison-table +--- + +# Layout Element Comparison Table + +Without the layout elements described in the Report Layout section, you would not be able to create a report at all. These elements contain other content, as well as other layout elements. Layout elements can even be nested, making for a completely unique and custom report. + +Because of the large number of layout elements, and the vast amount of possibilites each element enables, these tables should help you realize which layout element will fit your specific scenario. Across the top of each table, you will notice the layout elements discussed in detail in the Report Layout section of the help. layed out vertically along the left side of the table are the elements, contents, or additional settings that each layout element can take advantage of. You will notice that several of the layout elements can be added to themselves. For more information on either the layout elements or the content you can add to the layout elements, click the column and row headers, respectively. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Layout Elements
BandChainConditionContainerFlowGroupReportRotatorSectionSegmentSite
Band••••••••••
Chain•••••••
Condition••••••••
Container••••••••
Divider•
Flow••••••••••
Footer•••
Gap••••••••
Group••••••••••
Header•••
Measure••••
Page Break•••••••
Rotator•••••••
Rule••••••••••
Section•
Segment••
Site••••••••••
Stretcher••••••••
+ +--------------- + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Layout Elements
BandChainConditionContainerFlowGroupReportRotatorSectionSegmentSite
Grid••••••••••
List••••••••••
Table••••••••••
Text••••••••••
Tree••••••••••
+ +--------------- + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Layout Elements
BandChainConditionContainerFlowGroupReportRotatorSectionSegmentSite
Quick Image••••••••
Quick List••••••••
Quick Table••••••••
Quick Text••••••••
+ +--------------- + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Layout Elements
BandChainConditionContainerFlowGroupReportRotatorSectionSegmentSite
Bookmarks•
Index••••••••
Table of Contents••••••••
+ +--------------- + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Layout Elements
BandChainConditionContainerFlowGroupReportRotatorSectionSegmentSite
Canvas••••••••••
Image••••••••••
Metafile••••••••••
Shapes•
+ +--------------- + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Layout Elements
BandChainConditionContainerFlowGroupReportRotatorSectionSegmentSite
Alignment••••••
Background••••••••
Backward
Borders••••••••
Height•••••••
Keep Solid•••
Paddings••••••••
Margins••••••••
Stretch••
Width•••••••
\ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/flow.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/flow.mdx new file mode 100644 index 0000000000..60f378bf73 --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/flow.mdx @@ -0,0 +1,204 @@ +--- +title: "Flow" +slug: documentengine-flow +--- + +# Flow + +The Flow element is very useful for defining columns in your reports. There are two objects specific to the Flow element that help define columns: + +![](images/Flow.png) + +## IFlowColumn Interface +The [IFlowColumn](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Flow.IFlowColumn.html "Link to the Web API Reference Guide to the IFlowColumn interface.") interface defines a column in your flow. You can add as many columns as you want. Columns are added in the order that you create them. Each column does not represent a separate section itself; it simply represents how the Flow element's content should flow through the section. Therefore, you cannot add separate content to individual columns. However, you can control, to an extent, what content displays in which column with the [AddColumnBreak](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Flow.IFlow~AddColumnBreak.html "Link to the Web API Reference Guide to the AddColumnBreak member.") method. + +## AddColumnBreak Method +Calling this method off the [IFlow](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Flow.IFlow.html "Link to the Web API Reference Guide to the IFlow interface.") object will insert a column break at that specific location in the flow. Using this method, you can split different content types added to the flow. You can add some text, then a column break, then an image, another column break, and more text. This pattern would ensure that the image is always in the center column without text. + + +## Creating a Flow Element +This walkthrough guides you through creating a Flow element with two columns. The Flow element will contain five paragraphs of text, each added in a FOR loop. A column break will be added after the second paragraph (accomplished by an IF statement). The logic in this FOR loop and IF statement can be applied to your own report if you have several similar items in a collection, but you need to add a column break after specific items. + +## Follow these Steps +1. **Create the report and main section.** + + Every report starts off by instantiating a Report object. Once you have a Report element, you can add a Section element to it. The Section element will contain the Flow element. + + **In Visual Basic:** + +```vb + Imports Infragistics.Documents.Reports.Report + . + . + . + ' Create a new report. + Dim report As Infrgistics.Documents.Reports.Report.Report = New Report() + + ' Create the main Section and add 50 pixels + ' of padding on each edge. + Dim section1 As Infragistics.Documents.Reports.Report.Section.ISection = report.AddSection() + section1.PagePaddings.All = 50 +``` + + **In C#:** + +```csharp + using Infragistics.Documents.Reports.Report; + . + . + . + // Create a new report. + Infragistics.Documents.Reports.Report.Report report = new Report(); + + // Create the main Section and add 50 pixels + // of padding on each edge. + Infragistics.Documents.Reports.Report.Section.ISection section1 = report.AddSection(); + section1.PagePaddings.All = 50; +``` + +2. **Create the Flow element and columns.** + + Instantiate a Flow element by calling the AddFlow method off the Section object. The AddFlow method will return a new Flow object. Do the same for a Column element by calling the AddColumn method off the Flow object. This adds a new column to the Flow element. You will then create another column for a total of two columns. + + **In Visual Basic:** + +```vb + ' Add a Flow element to the main section + Dim flow As Infragistics.Documents.Reports.Report.Flow.IFlow = section1.AddFlow() + + ' Create a column in the Flow element. + Dim column As Infragistics.Documents.Reports.Report.Flow.IFlowColumn = flow.AddColumn() + ' The column's width will be 50% of + ' the page's width + column.Width = New RelativeWidth(50) + ' Add space to the right edge to simulate + ' a gutter. + column.Margins.Right = 10 + ' Color the background of the column gray. + column.Background = New Background(New Color(238, 238, 238)) + + ' Add another column to the Flow element. + column = flow.AddColumn() + ' The column's width will be 50% of + ' the page's width + column.Width = New RelativeWidth(50) + ' Add space to the left edge to simulate + ' a gutter. + column.Margins.Left = 10 + ' Color the background of the column gray. + column.Background = New Background(New Color(238, 238, 238)) +``` + + **In C#:** + +```csharp + // Add a Flow element to the main section + Infragistics.Documents.Reports.Report.Flow.IFlow flow = section1.AddFlow(); + + // Create a column in the Flow element. + Infragistics.Documents.Reports.Report.Flow.IFlowColumn column = flow.AddColumn(); + // The column's width will be 50% of the page's width. + column.Width = new RelativeWidth(50); + // Add space to the right edge to simulate a gutter. + column.Margins.Right = 10; + // Color the background of the column gray. + column.Background = new Background(new Color(238, 238, 238)); + + // Add another column to the Flow element. + column = flow.AddColumn(); + // The column's width will be 50% of the page's width. + column.Width = new RelativeWidth(50); + // Add space to the left edge to simulate a gutter. + column.Margins.Left = 10; + // Color the background of the column gray. + column.Background = new Background(new Color(238, 238, 238)); +``` + +3. **Add the content to the Flow element.** + + Now that there are two columns, add some text to the columns. You will add five paragraphs of text through a FOR loop. In the FOR loop, you will use an IF statement to insert a column break after the second paragraph. + + Use the following text to set the the `string1` variable: + + > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec + > imperdiet mattis sem. Nunc ornare elit at justo. In quam nulla, + > lobortis non, commodo eu, eleifend in, elit. Nulla eleifend. Nulla + > convallis. Sed eleifend auctor purus. Donec velit diam, congue + > quis, eleifend et, pretium id, tortor. Nulla semper condimentum + > justo. Etiam interdum odio ut ligula. Vivamus egestas scelerisque + > est. Donec accumsan. In est urna, vehicula non, nonummy sed, + > malesuada nec, purus. Vestibulum erat. Vivamus lacus enim, rhoncus + > nec, ornare sed, scelerisque varius, felis. Nam eu libero vel + > massa lobortis accumsan. Vivamus id orci. Sed sed lacus sit amet + > nibh pretium sollicitudin. Morbi urna. + + **In Visual Basic:** + +```vb + Dim string1 As String = "Lorem ipsum..." + + ' Create a Text element. + Dim [text] As Infragistics.Documents.Reports.Report.Text.IText + + ' Create a FOR loop that iterates five times. + For i As Integer = 0 To 4 + ' On the third iteration, add a column break. + If i = 2 Then + Dim columnBreak As Infragistics.Documents.Reports.Report.Text.IText = flow.AddText() + columnBreak.Alignment = _ + New TextAlignment(Alignment.Center, Alignment.Middle) + columnBreak.AddContent("***Column Break***") + flow.AddColumnBreak() + + [text] = flow.AddText() + [text].Paddings = New Paddings(5) + [text].AddContent(string1) + Else + [text] = flow.AddText() + [text].Paddings = New Paddings(5) + [text].AddContent(string1) + End If + Next i + + ' Stretch the Flow element (not the content) + ' to the bottom of the page. + flow.AddStretcher() +``` + + **In C#:** + +```csharp + string string1 = "Lorem ipsum..."; + + // Create a Text element. + Infragistics.Documents.Reports.Report.Text.IText text; + + // Create a FOR loop that iterates five times. + for (int i = 0; i < 5; i++) + { + // On the third iteration, add a column break. + if (i == 2) + { + Infragistics.Documents.Reports.Report.Text.IText columnBreak = + flow.AddText(); + columnBreak.Alignment = + new TextAlignment(Alignment.Center, Alignment.Middle); + columnBreak.AddContent("***Column Break***"); + flow.AddColumnBreak(); + + text = flow.AddText(); + text.Paddings = new Paddings(5); + text.AddContent(string1); + } + else + { + text = flow.AddText(); + text.Paddings = new Paddings(5); + text.AddContent(string1); + } + } + + // Stretch the Flow element (not the content) + // to the bottom of the page. + flow.AddStretcher(); +``` \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/group.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/group.mdx new file mode 100644 index 0000000000..398858d57c --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/group.mdx @@ -0,0 +1,110 @@ +--- +title: "Group" +slug: documentengine-group +--- + +# Group + +A Group element is a simple content section with no flourishes or frills. The Group element is quite similar to the Band element. The main difference between the two is that the Band element contains headers, dividers, and footers; the Group element does not. You can think of the Group element as nothing more than a section that groups multiple sections together. Place one or two bands inside a group, along with a couple images, a grid, table, or list; the main point is to keep other content elements together in a logical grouping. + +Creating a Group element is a simple task, as with most content elements; you do so by calling the AddGroup method off a Section element or other layout element. For a complete list of layout elements to which you can add a Group, see [Layout Element Comparison Table](DocumentEngine-Layout-Element-Comparison-Table.html "Explains how the elements available in the document engine work with the layout elements available in the document engine."). Once you've instantiated a Group, you can add almost any Infragistics Document Engine™ content to it. There are also several other standard properties that you can customize such as [`Background`](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.IGroup~Background.html "Link to the Web API Reference Guide to the Background member.") , [`Borders`](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.IGroup~Borders.html "Link to the Web API Reference Guide to the Borders member.") , [`Paddings`](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.IGroup~Paddings.html "Link to the Web API Reference Guide to the Paddings member.") , [`Margins`](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.IGroup~Margins.html "Link to the Web API Reference Guide to the Margins member.") , [`Height`](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.IGroup~Height.html "Link to the Web API Reference Guide to the Height member.") and [`Width`](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.IGroup~Width.html "Link to the Web API Reference Guide to the Width member.") , and more. + +* * * * * + +The following code adds a Group element to a Section element and then adds text, a horizontal rule, and an image to the group. + +Use the following text to set the the `string1` variable: + +> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec imperdiet mattis sem. Nunc ornare elit at justo. In quam nulla, lobortis non, commodo eu, eleifend in, elit. Nulla eleifend. Nulla convallis. Sed eleifend auctor purus. Donec velit diam, congue quis, eleifend et, pretium id, tortor. Nulla semper condimentum justo. Etiam interdum odio ut ligula. Vivamus egestas scelerisque est. Donec accumsan. In est urna, vehicula non, nonummy sed, malesuada nec, purus. Vestibulum erat. Vivamus lacus enim, rhoncus nec, ornare sed, scelerisque varius, felis. Nam eu libero vel massa lobortis accumsan. Vivamus id orci. Sed sed lacus sit amet nibh pretium sollicitudin. Morbi urna. + +**In Visual Basic:** + +```vb +Imports Infragistics.Documents.Reports.Report +Imports Infragistics.Documents.Reports.Graphics +. +. +. +' Add a Group element to the Section element named +' section1 and assign it to group1. Set the Background +' color of the group to light blue (so you can see the +' bounds of the group). +Dim group1 As Infragistics.Documents.Reports.Report.IGroup = section1.AddGroup() +group1.Background = New Background(New Color(180, 199, 228)) + +Dim groupHeading As IText = group1.AddText() +groupHeading.Style = mainStyle2 +groupHeading.AddContent("Group") + +' Create two paragraphs of text. Put 10 pixels of padding +' at all edges of the paragrph and separate the two +' paragraphs with line breaks. +Dim string1 As String = "Lorem ipsum..." + +Dim groupText As Infragistics.Documents.Reports.Report.Text.IText = group1.AddText() +groupText.Paddings.All = 10 +groupText.AddContent(string1) +groupText.AddLineBreak() +groupText.AddLineBreak() +groupText.AddContent(string1) + +' Add a horizontal rule (solid line) after the paragraphs. +' This rule will be black and have 20 pixels of space above +' and below it. +Dim groupRule As Infragistics.Documents.Reports.Report.IRule = group1.AddRule() +groupRule.Pen = Pens.Black +groupRule.Margins.All = 20 + +' Define an Image element with black borders and 10 pixels +' of padding on each edge. This code will use an image in +' the project folder called "Coffee Bean." You can find this +' image in the Windows folder. You can also use a string to +' point to any location on your machine. +Dim groupImage As Infragistics.Documents.Reports.Report.IImage = _ group1.AddImage(New Image(Application.StartupPath + "..Coffee Bean.bmp")) +groupImage.Borders.All = New Border(Pens.Black) +groupImage.Margins.All = 10 +``` + +**In C#:** + +```csharp +using Infragistics.Documents.Reports.Report; +using Infragistics.Documents.Reports.Graphics; +. +. +. +// Add a Group element to the Section element named +// section1 and assign it to group1. Set the Background +// color of the group to light blue (so you can see the +// bounds of the group). +Infragistics.Documents.Reports.Report.IGroup group1 = section1.AddGroup(); +group1.Background = new Background(new Color(180, 199, 228)); + +// Create two paragraphs of text. Put 10 pixels of padding +// at all edges of the paragrph and separate the two +// paragraphs with line breaks. +string string1 = "Lorem ipsum..."; + +Infragistics.Documents.Reports.Report.Text.IText groupText = group1.AddText(); +groupText.Paddings.All = 10; +groupText.AddContent(string1); +groupText.AddLineBreak(); +groupText.AddLineBreak(); +groupText.AddContent(string1); + +// Add a horizontal rule (solid line) after the paragraphs. +// This rule will be black and have 20 pixels of space above +// and below it. +Infragistics.Documents.Reports.Report.IRule groupRule = group1.AddRule(); +groupRule.Pen = Pens.Black; +groupRule.Margins.All = 20; + +// Define an Image element with black borders and 10 pixels +// of padding on each edge. This code will use an image in +// the project folder called "Coffee Bean". You can find this +// image in the Windows folder. You can also use a string to +// point to any location on your machine. +Infragistics.Documents.Reports.Report.IImage groupImage = group1.AddImage(new Image(Application.StartupPath + @"..Coffee Bean.bmp")); +groupImage.Borders.All = new Border(Pens.Black); +groupImage.Margins.All = 10; +``` \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/images/Band.png b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/images/Band.png new file mode 100644 index 0000000000..ca0da2594a Binary files /dev/null and b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/images/Band.png differ diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/images/DocumentEngine_Segment_01.png b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/images/DocumentEngine_Segment_01.png new file mode 100644 index 0000000000..64d3e8ecc6 Binary files /dev/null and b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/images/DocumentEngine_Segment_01.png differ diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/images/Flow.png b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/images/Flow.png new file mode 100644 index 0000000000..7583f8072d Binary files /dev/null and b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/images/Flow.png differ diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/page-break.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/page-break.mdx new file mode 100644 index 0000000000..dfb19c962b --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/page-break.mdx @@ -0,0 +1,22 @@ +--- +title: "Page Break" +slug: documentengine-page-break +--- + +# Page Break + +The Page Break element is a non-visual element that moves all remaining content in it's associated layout element to the next page. The Page Break element functions very similar to the page break in Microsoft® Word®. You can add a page break to the following elements by calling their associated `AddPageBreak` method. + +- [Band](/documentengine-band.mdx) +- [Condition](/documentengine-container-and-condition.mdx) +- [Container](/documentengine-container-and-condition.mdx) +- [Flow](/documentengine-flow.mdx) +- [Group](/documentengine-group.mdx) +- [Section](/section/documentengine-section.mdx) +- [Segment](/documentengine-segment.mdx) + + + + + + diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/report-layout.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/report-layout.mdx new file mode 100644 index 0000000000..e1a5e4f577 --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/report-layout.mdx @@ -0,0 +1,27 @@ +--- +title: "DocumentEngine Report Layout" +slug: documentengine-report-layout +--- + +# DocumentEngine Report Layout + +Report layout elements make it easier for you to add content. Each element has specific functions and features that make it unique. You can use the [Layout Element Comparison Table](DocumentEngine-Layout-Element-Comparison-Table.html "Explains how the elements available in the document engine work with the layout elements available in the document engine.") to figure out which layout element will fit your needs best. + +Click the links below to learn more about each layout element. + +- [Layout Element Comparison Table](DocumentEngine-Layout-Element-Comparison-Table.html "Explains how the elements available in the document engine work with the layout elements available in the document engine.") +- [Advanced Layout Elements](DocumentEngine-Advanced-Layout-Elements.html "Advance layout elements are not necessary to create a report, but can add extra emphasis to your reprot.") +- [Container and Condition](DocumentEngine-Container-and-Condition.html "Discusses the container and condition elements.") +- [Band](DocumentEngine-Band.html "Explains the band element.") +- [Flow](DocumentEngine-Flow.html "Explains the Flow element.") +- [Group](DocumentEngine-Group.html "Explains the group element.") +- [Page Break](DocumentEngine-Page-Break.html "Explains the Page break functionality available in the document engine.") +- [Report](DocumentEngine-Report.html "Explains the report portion of the document engine.") +- [Section](DocumentEngine-Section.html "Explains the section element in the document engine.") +- [Segment](DocumentEngine-Segment.html "Explains the segment element in the document engine.") + + + + + + diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/report/element.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/report/element.mdx new file mode 100644 index 0000000000..a6a5dc18bd --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/report/element.mdx @@ -0,0 +1,70 @@ +--- +title: "Report Element" +slug: documentengine-report-element +--- + +# Report Element + + + +The Report element is the top-level object that defines the entire report. You must add all content to a report by way of a Section element. Most layout elements use methods to create additional and nested layout elements; this is the same for the Report element, but you can add only one layout element type, the Section element, to the Report element. An easier way to understand this concept would be to visualize it as an object model diagram. For example, a report's layout can be as simple as the following tree: + +- Report + - Section + - Layout element (Group element for Title page) + - Section + - Navigation Helper (TOC element for table of contents) + - Section + - Layout element (Band element for report content) + - Layout element (Flow element for multiple columns) + - Section + - Pattern Content (Table element to show pertinent data) + - Section + - Navigation Helper (Index) + +You can see from the above tree that Sections are the only layout elements you can add to the Report element. Section elements can contain any content element aside from another Section element. Logically, if you can only add a Section element to a Report element, then you would need to be able to add everything to a Section element. + +The Report element also has several other properties and methods that are important for report writing. Below is a short list of report features you are likely to use frequently. + +- **Bookmarks** -- Use the [Bookmarks](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Report~Bookmarks.html "Link to the Web API Reference Guide to the Bookmarks member.") property to add bookmarks to your PDF document. +- **Information** -- You can add information about the report such as the Author, Company, Copyright, Title, Subject, and more. +- **Saving and Loading as XML** -- You can use the [Save](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Report~Save.html "Link to the Web API Reference Guide to the Save member.") method to save your full report as an XML file. At a later time, you can load the content of the report from the saved XML file with the [Load](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Report~Load.html "Link to the Web API Reference Guide to the Load member.") method. +- **Publishing your Report** -- When you've finished your report and are ready to create a PDF document from it, you will use the [Publish](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Report~Publish.html "Link to the Web API Reference Guide to the Publish member.") method to write a PDF, XPS, or plain text document. For more information on the Publish method, see [Publish a Report](DocumentEngine-Publish-a-Report.html "Explains how to publish a report created with document engine."). + +* * * * * + +The following code will produce a report with the same structure as the tree above. This example does not set any other properties, it only instantiates objects. For example code that shows more detail, see each individual element's help topic for additional information. + +**In C#:** + +```csharp +using Infragistics.Documents.Reports.Report; +using Infragistics.Documents.Reports.Report.Section; +using Infragistics.Documents.Reports.Report.TOC; +using Infragistics.Documents.Reports.Report.Index; +using Infragistics.Documents.Reports.Report.Band; +using Infragistics.Documents.Reports.Report.Flow; +using Infragistics.Documents.Reports.Report.Table; +. +. +. +Report report = new Report(); + +ISection section1 = report.AddSection(); +IGroup group1 = section1.AddGroup(); + +ISection section2 = report.AddSection(); +ITOC tableOfContents = section2.AddTOC(); + +ISection section3 = report.AddSection(); +IReportBand band1 = section3.AddBand(); +IFlow flow1 = band1.AddFlow(); + +ISection section4 = report.AddSection(); +ITable table1 = section4.AddTable(); + +ISection section5 = report.AddSection(); +IIndex index1 = section5.AddIndex(); +``` + + diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/report/publish-a-report.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/report/publish-a-report.mdx new file mode 100644 index 0000000000..6fa9199031 --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/report/publish-a-report.mdx @@ -0,0 +1,36 @@ +--- +title: "Publish a Report" +slug: documentengine-publish-a-report +--- + +# Publish a Report + +Publishing a report is synonymous with writing a PDF or XPS file. Once you've created and designed your report, you can publish it with the [Publish](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Report~Publish.html "Link to the Web API Reference Guide to the Publish member.") method off the [Report](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Report.html "Link to the Web API Reference Guide to the Report member.") object. There are two overloads for the Publish method: + +- The first parameter of the first overload accepts a string for the full path of the file name you will publish the report to. +- The first parameter of the second overload accepts a file stream. +- The second parameter of both overloads accepts the FileFormat you will publish the report as (PDF, XPS, plain text). + +The following code will publish a report (assuming your Report object is defined as "report") as a PDF file in the current user's My Documents folder. Once the report is published, you can then use the Process.Start method from the System.Diagnostics namespace to open the new PDF file. You can also call the Start method from a button, toolbar, menu, or any other clickable UI element. + +> **Note:** Be sure that the end user's system has the Adobe Acrobat Reader installed before you start the process. You might want to use a try/catch block to catch the exception if the Acrobat Reader is not installed. Also, the end user's system should have the .NET Framework 3.0 installed if they wish to view an XPS document. + +**In C#:** + +```csharp +// define a string that contains the path to +// the current user's My Documents folder. +string myDocuments = + System.Environment.GetFolderPath(System.Environment.SpecialFolder.MyDocuments); + +// Publish the report to the current user's +// My Documents folder with the name of Report.pdf. +// The FileFormat enum can be used to publish the report +// as an XPS or plain text file as well. Remember to +// change the file extension if you change the file format. +report.Publish(myDocuments + "Report.pdf", FileFormat.PDF); + +// The Process.Start method runs the specified file +// using the application registered to run that file. +System.Diagnostics.Process.Start(myDocuments + "Report.pdf"); +``` \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/report/report.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/report/report.mdx new file mode 100644 index 0000000000..18773d2919 --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/report/report.mdx @@ -0,0 +1,19 @@ +--- +title: "Report" +slug: documentengine-report +--- + +# Report + +The Report element is the main element of the Infragistics Document Engine™. All of your content is added through the report and is the primary means of publishing a report. + +Click the links below to find out more about the Report element. + +- [Publish a Report](DocumentEngine-Publish-a-Report.html "Explains how to publish a report generated by the document engine.") +- [Report Element](DocumentEngine-Report-Element.html "Explains the report element that is used by the document engine.") + + + + + + diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/report/setting-pageorientation-when-publishing-a-report.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/report/setting-pageorientation-when-publishing-a-report.mdx new file mode 100644 index 0000000000..7e58811c30 --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/report/setting-pageorientation-when-publishing-a-report.mdx @@ -0,0 +1,29 @@ +--- +title: "Setting PageOrientation when publishing a Report" +slug: documentengine-setting-pageorientation-when-publishing-a-report +--- + +# Setting PageOrientation when publishing a Report + +When publishing a PDF or XPS document, the Orientation of the page can be set by the [PageOrientation](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Section.ISection~PageOrientation.html "Link to the API Reference Guide to the value member.") property. When the [Report.Publish(](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Report~Publish.html "Link to the API Reference Guide to the Report.Publish member.")) method is used, the PageOrientation needs to be directly set on each Section [ISection()](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Section.ISection.html "Link to the API Reference Guide to the value member.") that you add to the Report. + +**In C#:** + +```csharp +Infragistics.Documents.Reports.Report.Report r = new Report(); + +//Adding a section to the Report +Infragistics.Documents.Reports.Report.Section.ISection s = r.AddSection(); + + s.PageOrientation = PageOrientation.Portrait; + + //Adding Text to the Section + Infragistics.Documents.Reports.Report.Text.IText t = s.AddText(); + + t.AddContent(”Test Text”); + + + string theFile = @”c:test.pdf”; + + r.Publish(theFile, FileFormat.PDF); +``` \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/section/add-page-numbering.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/section/add-page-numbering.mdx new file mode 100644 index 0000000000..42372edbf6 --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/section/add-page-numbering.mdx @@ -0,0 +1,96 @@ +--- +title: "Add Page Numbering" +slug: documentengine-add-page-numbering +--- + +# Add Page Numbering + +An excellent report element that helps your reader navigate a report is page numbering. Used in conjunction with a table of contents, your reader will be able to quickly scan the table of contents and decide which page the feature they want to read is on. Once the reader has the page number, it is a simple task to flip to that page (or enter the page number at the bottom of the Adobe Acrobat Reader's viewer). + +You'll find the mechanism for adding page numbers in the Section element of the document object model. For more information on the Section element, see the [`Section`](DocumentEngine-Section.html "Explains the section element of the document engine.") topic. There is a [`PageNumbering`](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Section.PageNumbering.html "Link to the Web API Reference Guide to the PageNumbering member.") object available through the [`PageNumbering`](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Section.ISection~PageNumbering.html "Link to the Web API Reference Guide to the PageNumbering member.") property of the [`ISection`](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Section.ISection.html "Link to the Web API Reference Guide to the ISection interface.") object which holds all the required settings to add page numbering to your report. + +The following code will add page numbering in the lower-right corner of the report. Pay special attention to the comments as they describe each property in greater detail. + +![](images/DocumentEngine_Add_Page_Numbering_01.png) + +**In Visual Basic:** + +```vb +' Get a reference to the section's PageNumbering object. +Dim pn As Infragistics.Documents.Reports.Report.Section.PageNumbering = _ section1.PageNumbering + +' Create a style for the page numbering font. +pn.Style = New Infragistics.Documents.Reports.Report.Text.Style(Fonts.Arial, Brushes.Black) + +' The Template property is the actual string that +' shows the page numbering. Use the [Page #] place- +' holder for the current page and the [TotalPages] +' place-holder for the total amount of pages in +' the entire document. +pn.Template = "Page [Page #] of [TotalPages]" + +' Setting SkipFirst to true does not place page +' numbering on the first page of the section. This +' is useful if the first page is a Title page. +pn.SkipFirst = False + +' The page numbering will be aligned with the +' right side of the page. Valid values off the +' Alignment enum include Left, Center, and Right. +pn.Alignment.Horizontal = Infragistics.Documents.Reports.Report.Alignment.Right + +' The page numbering will be located at the +' bottom of the page. Valid values off the +' Alignment enum include Top and Bottom. +pn.Alignment.Vertical = Infragistics.Documents.Reports.Report.Alignment.Bottom + +' The page numbering is at the extreme bottom +' of the page, so we need to change the Y Offset +' in order to bring it in line with the rest of +' the page footer text. +pn.OffsetY = -18 +``` + +**In C#:** + +```csharp +// Get a reference to the section's PageNumbering object. +Infragistics.Documents.Reports.Report.Section.PageNumbering pn = _ section1.PageNumbering; + +// Create a style for the page numbering font. +pn.Style = new Infragistics.Documents.Reports.Report.Text.Style(Fonts.Arial, Brushes.Black); + +// The Template property is the actual string that +// shows the page numbering. Use the [Page #] place- +// holder for the current page and the [TotalPages] +// place-holder for the total amount of pages in +// the entire document. +pn.Template = "Page [Page #] of [TotalPages]"; + +// Setting SkipFirst to true does not place page +// numbering on the first page of the section. This +// is useful if the first page is a Title page. +pn.SkipFirst = false; + +// The page numbering will be aligned with the +// right side of the page. Valid values off the +// Alignment enum include Left, Center, and Right. +pn.Alignment.Horizontal = Infragistics.Documents.Reports.Report.Alignment.Right; + +// The page numbering will be located at the +// bottom of the page. Valid values off the +// Alignment enum include Top and Bottom. +pn.Alignment.Vertical = Infragistics.Documents.Reports.Report.Alignment.Bottom; + +// The page numbering is at the extreme bottom +// of the page, so we need to change the Y Offset +// in order to bring it in line with the rest of +// the page footer text. +pn.OffsetY = -18; +``` + + + + + + diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/section/element.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/section/element.mdx new file mode 100644 index 0000000000..e31f0c2a64 --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/section/element.mdx @@ -0,0 +1,109 @@ +--- +title: "Section Element" +slug: documentengine-section-element +--- + +# Section Element + +The Section element is the only layout element that you can add to the Report element. This makes the Section element unique in several ways: + +- The Section element can contain every layout element (except another Section element). You can add individual pages to a report through the Section element + +- The Section element can contain Stationery and Decoration elements to use as watermarks and stamps. No other layout element can contain these two elements. + +- Through the Section element, you can add page numbering to your report. + +- These unique features of the Section element allow you to organize your report on a high level as well as apply several necessary settings to the report as a whole. + +The following code will define a [Report](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Report.html "Link to the Web API Reference Guide to the Report member.") and add a single [ISection](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Section.ISection.html "Link to the Web API Reference Guide to the ISection interface.") to it. The Section will include headers, footers, stationery, and decorations. + +1. **Define the Report and Section.** + + **In C#:** + +```csharp + using Infragistics.Documents.Reports.Report; + . + . + . + Infragistics.Documents.Reports.Report.Report report = new Report(); + + // Create the main Section and add 50 pixels of padding on each edge. + Infragistics.Documents.Reports.Report.Section.ISection section1 = + report.AddSection(); + section1.PagePaddings.Left = 50; + section1.PagePaddings.Right = 50; +``` + +2. **Add a Header element to the Section.** + + **In C#:** + +```csharp + Infragistics.Documents.Reports.Report.Section.ISectionHeader sectionHeader = section1.AddHeader(); + sectionHeader.Repeat = true; + sectionHeader.Height = 50; + + Infragistics.Documents.Reports.Report.Text.IText sectionHeaderText = sectionHeader.AddText(0, 0); + sectionHeaderText.Paddings.All = 10; + sectionHeaderText.Alignment = + new TextAlignment(Alignment.Left, Alignment.Middle); + sectionHeaderText.Height = new RelativeHeight(100); + sectionHeaderText.AddContent("Section Header"); +``` + +3. **Add a Stationery element to the Section.** + + **In C#:** + +```csharp + // Add a stationery element to the report. + // This element will read "DRAFT" in large + // letters at an angle beneath the content + // of the report. + Infragistics.Documents.Reports.Report.Section.IStationery stationery = section1.AddStationery(); + stationery.Repeat = true; + Infragistics.Documents.Reports.Report.Text.IText stationeryText = stationery.AddText(200, 400, -45); + stationeryText.Style = new Style(new Font("Verdana", 72), Brushes.Silver); + stationeryText.AddContent("DRAFT"); +``` + +4. **Add a Decoration element to the Section.** + + **In C#:** + +```csharp + // Add a decoration element to the report. + // This element will serve as a stamp that + // will say "REJECTED" in large letters + // over the content of the report. + Infragistics.Documents.Reports.Report.Section.IDecoration decoration = section1.AddDecoration(); + decoration.MasterRange = MasterRange.All; + decoration.Rear = false; + + Infragistics.Documents.Reports.Report.Text.IText decorationText = decoration.AddText(350, 650, -15); + decorationText.Style = new Style(new Font("Verdana", 40), Brushes.Red); + decorationText.Width = new RelativeWidth(35); + decorationText.Borders = + new Borders(new Pen(Colors.Red, 3, DashStyle.Solid), 10); + decorationText.AddContent("REJECTED"); +``` + +5. **Add a Footer element to the Section.** + + **In C#:** + +```csharp + Infragistics.Documents.Reports.Report.Section.ISectionFooter sectionFooter = section1.AddFooter(); + sectionFooter.Repeat = true; + sectionFooter.Height = 50; + + Infragistics.Documents.Reports.Report.Text.IText sectionFooterText = sectionFooter.AddText(0, 0); + sectionFooterText.Paddings.All = 10; + sectionFooterText.Alignment = + new TextAlignment(Alignment.Center, Alignment.Middle); + sectionFooterText.Height = new RelativeHeight(100); + sectionFooterText.Background = new Background(Brushes.Gainsboro); + sectionFooterText.AddContent("Copyright © 1996 - 2007 Infragistics, Inc." + + " All rights reserved."); +``` \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/section/images/DocumentEngine_Add_Page_Numbering_01.png b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/section/images/DocumentEngine_Add_Page_Numbering_01.png new file mode 100644 index 0000000000..46a910f88a Binary files /dev/null and b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/section/images/DocumentEngine_Add_Page_Numbering_01.png differ diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/section/section.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/section/section.mdx new file mode 100644 index 0000000000..c6a271f1f7 --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/section/section.mdx @@ -0,0 +1,18 @@ +--- +title: "Section" +slug: documentengine-section +--- + +# Section +The Section element is the only element that you can add to the Report element. Through the Section element, you can manipulate page numbering and your document's look and feel through stationery and decorations, among other things. + +Click the links below to find out more about the Section element. + +- [Add Page Numbering](DocumentEngine-Add-Page-Numbering.html "Explains how to add page numbering to your report.") +- [Section Element](DocumentEngine-Section-Element.html "Explains the section element used in the report.") + + + + + + diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/segment.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/segment.mdx new file mode 100644 index 0000000000..a35747c7ce --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/layout/segment.mdx @@ -0,0 +1,148 @@ +--- +title: "Segment" +slug: documentengine-segment +--- + +# Segment + + + +The Segment element is aptly named for the several complete segments (or pages) of content it can produce. Similar to the Section element, the Segment element can have different header/footer combinations for each individual page (as long as the number of pages does not exceed the number of headers/footers, see the Segment Headers and Footers section below for more information). But, unlike the Section element, you can't set a Segment's size; Segments depend on the size of their containing Section element. The Segment and Section elements both have an [AddStretcher](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Segment.ISegment~AddStretcher.html "Link to the Web API Reference Guide to the AddStretcher member.") method to stretch content on individual pages; however, the Segment element also has the [Stretch](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Segment.ISegment~Stretch.html "Link to the Web API Reference Guide to the Stretch member.") property to stretch all content on every page. + +The Segment element is very similar in function to the Section, Band, and Group elements. Refer to the table below for the main differences between these four elements. + +Feature | Segment | Section | Band | Group +---- | --- | --- |--- | --- | +Headers, Footers, and Dividers | No dividers. Repeatable collection of headers and footers. | No dividers. Separate headers and footers can be added for each individual page. | One set of headers, footers, and dividers for the entire Band. | None +Height and Width | Cannot be set. | Can be set. | Can be set. | Can be set. +Stretching Content | Each individual page can be stretched as well as the entire element as a whole. | Each individual page can be stretched. | Each individual page can be stretched as well as the entire element as a whole. | Each individual page can be stretched. + +## Segment Headers and Footers +The most prominent feature of the Segment element is how it uses headers and footers. You can add as many headers and footers to the Segment as needed. The collection of headers and footers will be used in a specific order, based on the order you add them. Each page in the segment will have a separate header and footer (if more than one header and footer are added to the segment). For example, if you add two Header elements to your segment, and then add two Footer elements, the first page will contain the first header/footer while the second page will contain the second header/footer. The third page, however, will contain the first header/footer while the fourth page contains the second header/footer. The pattern will continue for as many pages as are in the segment. The image below illustrates this concept. + +![Demonstrates the Segment element, and how it loops back on it self if more pages are generated than headers and footers are available.](images/DocumentEngine_Segment_01.png) + +* * * * * + +The following example code defines a Segment element with two different Header and Footer elements. There will be two page breaks, producing three separate pages. On the third page, the first header/footer is used because the header/footer collection loops back to the beginning when the number of pages exceeds the number of Header and Footer elements. + +1. **Define a Segment.** + + **In C#:** + +```csharp + using Infragistics.Documents.Reports.Report; + . + . + . + // Add a Segment to the Section. + Infragistics.Documents.Reports.Report.Segment.ISegment segment = section1.AddSegment(); + segment.Background = new Background(Brushes.WhiteSmoke); + segment.Stretch = true; +``` + +2. **Define two Segment Headers.** + + **In C#:** + +```csharp + // Add the first Header to the Segment. + Infragistics.Documents.Reports.Report.Segment.ISegmentHeader segmentHeader1 = segment.AddHeader(); + segmentHeader1.Background = new Background(Brushes.LightBlue); + segmentHeader1.Height = new FixedHeight(40); + segmentHeader1.Paddings = new Paddings(10); + + Infragistics.Documents.Reports.Report.Text.IText segmentHeaderText = segmentHeader1.AddText(); + segmentHeaderText.Style = mainStyle1; + + segmentHeaderText.AddContent("Header 1, Page #"); + segmentHeaderText.AddPageNumber(PageNumberFormat.Decimal); + + // Add the second Header to the Segment. + Infragistics.Documents.Reports.Report.Segment.ISegmentHeader segmentHeader2 = segment.AddHeader(); + segmentHeader2.Background = new Background(Brushes.LightGreen); + segmentHeader2.Height = new FixedHeight(40); + segmentHeader2.Paddings = new Paddings(10); + + segmentHeaderText = segmentHeader2.AddText(); + segmentHeaderText.Style = mainStyle1; + segmentHeaderText.AddContent("Header 2, Page #"); + segmentHeaderText.AddPageNumber(PageNumberFormat.Decimal); +``` + +3. **Define two Segment Footers.** + + **In C#:** + +```csharp + // Add the first Footer to the Segment. + Infragistics.Documents.Reports.Report.Segment.ISegmentFooter segmentFooter1 = segment.AddFooter(); + segmentFooter1.Background = new Background(Brushes.LightBlue); + segmentFooter1.Height = new FixedHeight(40); + segmentFooter1.Paddings = new Paddings(10); + + Infragistics.Documents.Reports.Report.Text.IText segmentFooterText = segmentFooter1.AddText(); + segmentFooterText.Style = mainStyle1; + + segmentFooterText.AddContent("Footer 1, Page #"); + segmentFooterText.AddPageNumber(PageNumberFormat.Decimal); + + // Add the second Footer to the Segment. + Infragistics.Documents.Reports.Report.Segment.ISegmentFooter segmentFooter2 = segment.AddFooter(); + segmentFooter2.Background = new Background(Brushes.LightGreen); + segmentFooter2.Height = new FixedHeight(40); + segmentFooter2.Paddings = new Paddings(10); + + segmentFooterText = segmentFooter2.AddText(); + segmentFooterText.Style = mainStyle1; + + segmentFooterText.AddContent("Footer 2, Page #"); + segmentFooterText.AddPageNumber(PageNumberFormat.Decimal); +``` + +4. **Add text to the first page and break to the next page.** + + Use the following text to set the the `string1` variable: + + > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec imperdiet mattis sem. Nunc ornare elit at justo. In quam nulla, lobortis non, commodo eu, eleifend in, elit. Nulla eleifend. Nulla convallis. Sed eleifend auctor purus. Donec velit diam, congue quis, eleifend et, pretium id, tortor. Nulla semper condimentum justo. Etiam interdum odio ut ligula. Vivamus egestas scelerisque est. Donec accumsan. In est urna, vehicula non, nonummy sed, malesuada nec, purus. Vestibulum erat. Vivamus lacus enim, rhoncus nec, ornare sed, scelerisque varius, felis. Nam eu libero vel massa lobortis accumsan. Vivamus id orci. Sed sed lacus sit amet nibh pretium sollicitudin. Morbi urna. + + **In C#:** + +```csharp + // Add text to the Segment. The first page of the + // Segment will use the first Header and Footer. + Infragistics.Documents.Reports.Report.Text.IText segmentText1 = segment.AddText(); + string string1 = "Lorem ipsum..."; + segmentText1.AddContent(string1); + segmentText1.Paddings.All = 5; + + // Break to the next page. + segment.AddPageBreak(); +``` + +5. **Add text to the second page and break to the next page.** + + **In C#:** + +```csharp + // Add more text to the Segment. The second page of + // the Segment will use the second Header and Footer. + segmentText1 = segment.AddText(); + segmentText1.AddContent(string2); + segmentText1.Paddings.All = 5; + + // Break to the third page. + segment.AddPageBreak(); +``` + +6. **Add text to the third page.** + + **In C#:** + +```csharp + // Add more text to the Segment. The third page of + // the Segment will use the first Header and Footer. + segmentText1 = segment.AddText(); + segmentText1.AddContent(string1); + segmentText1.Paddings.All = 5; +``` \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/navigation/bookmarks.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/navigation/bookmarks.mdx new file mode 100644 index 0000000000..aea66e5b80 --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/navigation/bookmarks.mdx @@ -0,0 +1,38 @@ +--- +title: "Bookmarks" +slug: documentengine-bookmarks +--- + +# Bookmarks + +Bookmarks are a feature of the Adobe® Acrobat® Reader and serve no purpose on printed media; however, they are extremely useful to your reader when viewing your report in Acrobat Reader. The Report element uses the [`TextHeading`](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.TextHeading.html) enumeration to help generate the bookmarks. The Text element exposes a [`Heading`](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Text.IText~Heading.html) property, which allows you to choose a heading based on the TextHeading enumeration. These headings are seen by the Report element as hierarchical. The Report element will gather all Text elements in your report that have their Heading property set and compile a list of bookmarks based on them. H1 headings will become first-level bookmarks while H2 headings will be included in their corresponding H1 bookmarks – this logic is applied all the way through the heading hierarchy to H9. For more information, see [Table of Contents](/documentengine-table-of-contents.mdx), as much of this logic is very similar. + +- [TextHeading](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.TextHeading.html): Link to the Web API Reference Guide to the TextHeading member. +- [Heading](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Text.IText~Heading.html): Link to the Web API Reference Guide to the Heading member. +- [Table of Contents](/documentengine-table-of-contents.mdx): Explains the table of contents navigation helper available in document engine. + + +![](images/DocumentEngine_Bookmarks_01.png) + + +Add the following code to the code in the Table of Contents topic and you will have bookmarks matching your headings similar to the screen shot above. + +**In Visual Basic:** + +```vb +' Assuming 'report' is your main Report element. +' Passing true as AddLevel's parameter displays +' the bookmark's second level, if it exists. +report.Bookmarks.AddLevel(True) +report.Bookmarks.AddLevel() +``` + +**In C#:** + +```csharp +// Assuming 'report' is your main Report element. +// Passing true as AddLevel's parameter displays +// the bookmark's second level, if it exists. +report.Bookmarks.AddLevel(true); +report.Bookmarks.AddLevel(); +``` diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/navigation/helpers.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/navigation/helpers.mdx new file mode 100644 index 0000000000..c2feee30ef --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/navigation/helpers.mdx @@ -0,0 +1,20 @@ +--- +title: "Navigation Helpers" +slug: documentengine-navigation-helpers +--- + +# Navigation Helpers + +Navigation helpers will help your readers find what they're looking for in your report. The table of contents gives an overview of the report's sections. The index can list every occurrence of a specific word. Bookmarks give your reader the option of quickly navigating to a specific page of interest. + +Click the links below to learn more about navigation helpers. + +- [Bookmarks](DocumentEngine-Bookmarks.html "Explains the bookmark functionality available in the document engine.") +- [Index](DocumentEngine-Index.html "Explains the index functionality available in the document engine.") +- [Table of Contents](DocumentEngine-Table-of-Contents.html "Explains the table of contents functionality available in the document engine.") + + + + + + diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/navigation/images/DocumentEngine_Bookmarks_01.png b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/navigation/images/DocumentEngine_Bookmarks_01.png new file mode 100644 index 0000000000..d97f9e669a Binary files /dev/null and b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/navigation/images/DocumentEngine_Bookmarks_01.png differ diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/navigation/images/DocumentEngine_Index_01.png b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/navigation/images/DocumentEngine_Index_01.png new file mode 100644 index 0000000000..542a949ed2 Binary files /dev/null and b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/navigation/images/DocumentEngine_Index_01.png differ diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/navigation/images/DocumentEngine_Table_of_Contents_01.png b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/navigation/images/DocumentEngine_Table_of_Contents_01.png new file mode 100644 index 0000000000..dcfcd6d7da Binary files /dev/null and b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/navigation/images/DocumentEngine_Table_of_Contents_01.png differ diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/navigation/index.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/navigation/index.mdx new file mode 100644 index 0000000000..c9e192f9e3 --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/navigation/index.mdx @@ -0,0 +1,184 @@ +--- +title: "Index" +slug: documentengine-index +--- + +# Index + +The Index element offers your readers a way to find specific words in your report. An index is a collection of words and phrases found inside the report that you gather alphabetically at the end of the report. Each word or phrase has a number associated with it; this number is the page in the report where your readers can find the word or phrase. If that word is found on multiple pages, multiple numbers representing those pages are associated with the word. + +![](images/DocumentEngine_Index_01.png) + +You can add a word to the index by calling the [`AddTarget`](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Text.IText~AddTarget.html "Link to the Web API Reference Guide to the AddTarget member.") method off the [`IText`](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Text.IText.html "Link to the Web API Reference Guide to the IText interface.") interface. There are two overloads for this method; one accepts a string as the name of the target, the other accepts two strings as the name of the target and caption. You can add as many targets as necessary to a Text element. In order for the index to see a word on multiple pages, you need to add that word as a target to each Text element that it belongs to. The Index element uses these targets to create the index; therefore, it won't recognize if a word is in multiple locations unless you explicitly add that word to the index through the AddTarget method. + +The Index element is very similar to the TOC element in that they are both created using levels. How many levels your index provides is completely up to you and the complexity of your report. Add a level to your index by calling the [`AddLevel`](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Index.IIndex~AddLevel.html "Link to the Web API Reference Guide to the AddLevel member.") method off the [`IIndex`](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Index.IIndex.html "Link to the Web API Reference Guide to the IIndex interface.") interface. The most common index configuration is two levels deep. This configuration allows for compound words or phrases to be grouped under the same category. For example, you need to add the following three compound words to the index: cargo container, cargo hold, and cargo ship. You would add them just as you would normally, giving each word a separate target name by calling `AddTarget` three times. The only difference would be in the caption of the target. You separate index levels in the caption by using a colon (:). Using this rule, the caption for "cargo hold" would be "cargo:hold". This would place the word "hold" underneath the word "cargo" in the index, making use of the second level as demonstrated in the screen shot above. How you wish to group words and phrases together is completely up to you. + +* * * * * + +The following code creates a `Text` element and adds several targets in order to populate the index. An index is then created with two levels. + +1. **Create two Style objects to use in the index.** + + **In Visual Basic:** + +```vb + Imports Infragistics.Documents.Reports.Report + . + . + . + Dim mainStyle1 As New _ + Infragistics.Documents.Reports.Report.Text.Style( _ + New Font("Verdana", 18), Brushes.Black) + Dim mainStyle2 As New _ + Infragistics.Documents.Reports.Report.Text.Style( _ + New Font("Arial", 24), Brushes.SteelBlue) +``` + + **In C#:** + +```csharp + using Infragistics.Documents.Reports.Report; + . + . + . + Infragistics.Documents.Reports.Report.Text.Style mainStyle1 = + new Infragistics.Documents.Reports.Report.Text.Style( + new Font("Verdana", 18), Brushes.Black); + Infragistics.Documents.Reports.Report.Text.Style mainStyle2 = + new Infragistics.Documents.Reports.Report.Text.Style( + new Font("Arial", 24), Brushes.SteelBlue); +``` + +2. **Create a new Section to place the index in.** + + **In Visual Basic:** + +```vb + Dim indexSection As Infragistics.Documents.Reports.Report.Section.ISection = _ report.AddSection() + indexSection.PageMargins = New Margins(50) +``` + + **In C#:** + +```csharp + Infragistics.Documents.Reports.Report.Section.ISection indexSection = report.AddSection(); + indexSection.PageMargins = new Margins(50); +``` + +3. **Create the Text element and add targets to it.** + + **In Visual Basic:** + +```vb + Dim indexText As Infragistics.Documents.Reports.Report.Text.IText = _ indexSection.AddText() + indexText.Style = mainStyle1 + + indexText.AddContent("Index targets are attached to this Text element.") + + indexText.AddTarget("Bear", "Animal:Bear") + indexText.AddTarget("Tiger", "Animal:Tiger") + indexText.AddTarget("Cat", "Animal:Cat") + indexText.AddTarget("Lion", "Animal:Lion") + indexText.AddTarget("cargo hold", "cargo:hold") + indexText.AddTarget("cargo container", "cargo:container") + indexText.AddTarget("cargo ship", "cargo:ship") + indexText.AddTarget("Coffee", "Coffee") + indexText.AddTarget("Espresso", "Espresso") + indexText.AddTarget("Capuccino", "Capuccino") + indexText.AddTarget("Energize", "Energize") +``` + + **In C#:** + +```csharp + Infragistics.Documents.Reports.Report.Text.IText indexText = indexSection.AddText(); + indexText.Style = mainStyle1; + + indexText.AddContent("Index targets are attached to this Text element."); + + indexText.AddTarget("Bear", "Animal:Bear"); + indexText.AddTarget("Tiger", "Animal:Tiger"); + indexText.AddTarget("Cat", "Animal:Cat"); + indexText.AddTarget("Lion", "Animal:Lion"); + indexText.AddTarget("cargo hold", "cargo:hold"); + indexText.AddTarget("cargo container", "cargo:container"); + indexText.AddTarget("cargo ship", "cargo:ship"); + indexText.AddTarget("Coffee", "Coffee"); + indexText.AddTarget("Espresso", "Espresso"); + indexText.AddTarget("Capuccino", "Capuccino"); + indexText.AddTarget("Energize", "Energize"); +``` + +4. **Create a Gap to add space between the Text element and the soon-to-be-created Index element.** + + **In Visual Basic:** + +```vb + Dim indexGap As Infragistics.Documents.Reports.Report.IGap = indexSection.AddGap() + indexGap.Height = New FixedHeight(50) +``` + + **In C#:** + +```csharp + Infragistics.Documents.Reports.Report.IGap indexGap = indexSection.AddGap(); + indexGap.Height = new FixedHeight(50); +``` + +5. **Create a heading for the index.** + + **In Visual Basic:** + +```vb + Dim indexHeading As Infragistics.Documents.Reports.Report.Text.IText = _ indexSection.AddText() + indexHeading.Style = mainStyle2 + indexHeading.AddContent("Index") +``` + + **In C#:** + +```csharp + Infragistics.Documents.Reports.Report.Text.IText indexHeading = indexSection.AddText(); + indexHeading.Style = mainStyle2; + indexHeading.AddContent("Index"); +``` + +6. **Define an Index element and add two levels.** + + **In Visual Basic:** + +```vb + Dim index As Infragistics.Documents.Reports.Report.Index.IIndex = _ indexSection.AddIndex() + index.Alphabet.Style = mainStyle2 + + Dim indexLevel As Infragistics.Documents.Reports.Report.Index.IIndexLevel = _ index.AddLevel() + indexLevel.Style = mainStyle1 + + indexLevel = index.AddLevel() + indexLevel.Style = mainStyle1 + indexLevel.Indents.Left = 30 + indexLevel.Style = _ + New Infragistics.Documents.Reports.Report.Text.Style( _ + New Font("Verdana", 14), Brushes.Black) +``` + + **In C#:** + +```csharp + Infragistics.Documents.Reports.Report.Index.IIndex index = indexSection.AddIndex(); + index.Alphabet.Style = mainStyle2; + + Infragistics.Documents.Reports.Report.Index.IIndexLevel indexLevel = index.AddLevel(); + indexLevel.Style = mainStyle1; + + indexLevel = index.AddLevel(); + indexLevel.Style = mainStyle1; + indexLevel.Indents.Left = 30; + indexLevel.Style = + new Infragistics.Documents.Reports.Report.Text.Style( + new Font("Verdana", 14), Brushes.Black); +``` + + + + diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/navigation/table-of-contents.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/navigation/table-of-contents.mdx new file mode 100644 index 0000000000..526069486c --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/navigation/table-of-contents.mdx @@ -0,0 +1,116 @@ +--- +title: "Table of Contents" +slug: documentengine-table-of-contents +--- + +# Table of Contents +Creating a table of contents (TOC) is much simpler than most would think. If you've already been writing reports with the Infragistics Document Engine™, you may already be halfway on the way to writing a table of contents. The TOC element creates a table of contents based on the structure of your report; so it is important that you build your report properly in order to take advantage of the TOC element. + +The Text element exposes a [Heading](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Text.IText~Heading.html "Link to the Web API Reference Guide to the Heading member.") property, which can be set to the [TextHeading](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.TextHeading.html "Link to the Web API Reference Guide to the TextHeading member.") enumeration. Some of the values of this enumeration are H1, H2, H3, and so on. When you set the heading of a Text element, you are letting the TOC element know how to generate the table of contents. The [ITOC](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.TOC.ITOC.html "Link to the Web API Reference Guide to the ITOC interface.") interface includes an [AddLevel](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.TOC.ITOC~AddLevel.html "Link to the Web API Reference Guide to the AddLevel member.") method, which you can use in conjunction with the different headings. The first level that you add to the table of contents corresponds to the first level of headings, or H1. Adding another level to the table of contents will correspond to H2, continuing on to the final heading, H9. Therefore, if you label your headings properly, you won't have to do much extra work to generate a table of contents. + +The [ILevel](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.TOC.ILevel.html "Link to the Web API Reference Guide to the ILevel interface.") interface exposes a few properties that are typical when dealing with a table of contents. + +* **Indents** -- You can control the indentation of the TOC level by setting vertical, horizontal, top, bottom, left, right, and all indents. This helps with readability by allowing you to specify different indents for different heading levels. +* **Style** -- Setting a Style object to this property will determine how the heading, leader, and page number look. +* **Leader** -- The leader line is the dotted line seen in most tables of contents. This line helps the reader associate the heading and the page number by following the line to the other side of the page. The [LeaderFormat](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.LeaderFormat.html "Link to the Web API Reference Guide to the LeaderFormat member.") enumeration allows you to set this line to be dashes, dots, lines, or spaces. + +![](images/DocumentEngine_Table_of_Contents_01.png) + +The following code generates a table of contents with four headings and two sub-headings beneath each heading. The headings are H1 and the sub-headings are H2. + +1. **Declare two Style objects for the heading and sub-heading styles.** + + **In C#:** + +```csharp + using Infragistics.Documents.Reports.Report; + . + . + . + Infragistics.Documents.Reports.Report.Text.Style mainStyle1 = + new Infragistics.Documents.Reports.Report.Text.Style( + new Font("Verdana", 18), Brushes.Black); + Infragistics.Documents.Reports.Report.Text.Style mainStyle2 = + new Infragistics.Documents.Reports.Report.Text.Style( + new Font("Arial", 24), Brushes.SteelBlue); +``` + +2. **Create a new section to place the TOC in.** + + + **In C#:** + +```csharp + // Create a new section and set the page size and margins. + Infragistics.Documents.Reports.Report.Section.ISection tocSection = report.AddSection(); + tocSection.PageSize = PageSizes.Letter; + tocSection.PageMargins.All = 35; +``` + +3. **Create the TOC and define its two levels.** + + **In C#:** + +```csharp + // Create a title for the TOC. + Infragistics.Documents.Reports.Report.Text.IText tocText = tocSection.AddText(); + tocText.Style = mainStyle2; + tocText.Margins.Top = 10; + tocText.Margins.Bottom = 15; + tocText.AddContent("Table of contents"); + + // Create a new TOC. + Infragistics.Documents.Reports.Report.TOC.ITOC toc = tocSection.AddTOC(); + + // Add a first level to the TOC + // (corresponding to H1) + Infragistics.Documents.Reports.Report.TOC.ILevel tocLevel = toc.AddLevel(); + tocLevel.Indents.Right = 20; + tocLevel.Indents.Bottom = 5; + tocLevel.Style = mainStyle1; + tocLevel.Leader = LeaderFormat.Dots; + + // Add a second level to the TOC + // (corresponding to H2) + tocLevel = toc.AddLevel(); + tocLevel.Indents.Left = 20; + tocLevel.Indents.Right = 40; + tocLevel.Indents.Bottom = 5; + tocLevel.Style = mainStyle1; + tocLevel.Leader = LeaderFormat.Dots; +``` + +4. **Add a Gap element to separate the table of contents from the contents.** + + **In C#:** +```csharp + Infragistics.Documents.Reports.Report.IGap tocGap = tocSection.AddGap(); + tocGap.Height = new FixedHeight(50); +``` + +5. **Add a few headings and sub-headings to see the table of contents generated.** + + **In C#:** + +```csharp + // Create headings to demonstrate TOC. + + Infragistics.Documents.Reports.Report.Text.IText sampleHeading; + Infragistics.Documents.Reports.Report.Text.IText sampleSubHeading; + + for (int i = 1; i < 5; i++) + { + sampleHeading = tocSection.AddText(); + sampleHeading.Heading = TextHeading.H1; + sampleHeading.Style = mainStyle2; + sampleHeading.AddContent("Heading " + i); + + for (int j = 1; j < 3; j++) + { + sampleSubHeading = tocSection.AddText(); + sampleSubHeading.Heading = TextHeading.H2; + sampleSubHeading.Style = mainStyle1; + sampleSubHeading.AddContent("Sub-Heading " + j); + } + } +``` \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/pattern/content.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/pattern/content.mdx new file mode 100644 index 0000000000..924fe76c57 --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/pattern/content.mdx @@ -0,0 +1,21 @@ +--- +title: "Pattern Content" +slug: documentengine-pattern-content +--- + +# Pattern Content +Pattern content includes elements that can all be styled through the use of patterns. These patterns apply styles to grids, tables, trees, etc. by creating pattern objects and then applying them to their associated element. These elements mostly rely on some source of data to fill them. + +Click the links below to learn about the pattern content that is available to you. + +- [Grids](DocumentEngine-Grids.html "Explains the grid pattern content item in the document engine.") +- [Lists](DocumentEngine-Lists.html "Explains the lists pattern content item in the document engine.") +- [Tables](DocumentEngine-Tables.html "Explains the tables pattern content item in the document engine.") +- [Text](DocumentEngine-Text.html "Explains the text pattern content item in the document engine.") +- [Trees](DocumentEngine-Trees.html "Explains the tree pattern content item in the document engine.") + + + + + + diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/pattern/grids.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/pattern/grids.mdx new file mode 100644 index 0000000000..58f2e40391 --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/pattern/grids.mdx @@ -0,0 +1,261 @@ +--- +title: "Grids" +slug: documentengine-grids +--- + +# Grids + +The Grid element displays content in a layout of columns and rows. Each cell in a grid is bound to a layout that is determined by how many columns and rows you add. For example, a cell's width is determined by the column's width, and its height is determined by the row's height. + +![](images/DocumentEngine_Grids_01.png) + +Each cell also has a [`ColSpan`](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Grid.IGridCell~ColSpan.html "Link to the Web API Reference Guide to the ColSpan member.") and [`RowSpan`](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Grid.IGridCell~RowSpan.html "Link to the Web API Reference Guide to the RowSpan member.") property, allowing the cell to span as many columns and rows as needed. Therefore, if you needed a heading for your grid, you would need to add the first cell in the row and set its ColSpan property to as many columns as are in your grid. + +The Grid element also contains Header, Footer, and Divider elements. These elements consist of only one row and the number of columns you add to your grid using the [`AddColumn`](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Grid.IGrid~AddColumn.html "Link to the Web API Reference Guide to the AddColumn member.") method off the IGrid interface. These elements also behave in the same manner as the Header, Footer, and Divider elements of the Band element. Headers display at the top of the grid on every page or only the first page, depending on the [`Repeat`](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Grid.IGridHeader~Repeat.html "Link to the Web API Reference Guide to the Repeat member.") property; the same goes for footers, but applying to the last page. Dividers display at the end of every page where the grid spills over to the next page. + +Being a member of the [pattern content](DocumentEngine-Pattern-Content.html "Explains the pattern content available in the document engine.") family, you can modify the style of different grid elements by applying patterns at different levels of the grid: + +* **Grid Pattern** -- Styles the grid as a whole and provides access to all other patterns except the cell pattern (the [GridPattern](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Grid.GridPattern.html "Link to the Web API Reference Guide to the GridPattern member.") class applies styles to the [IGrid](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Grid.IGrid.html "Link to the Web API Reference Guide to the IGrid interface.") interface). +* **Header Pattern** -- Styles the header element of your grid (the [GridHeaderPattern](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Grid.GridHeaderPattern.html "Link to the Web API Reference Guide to the GridHeaderPattern member.") class applies styles to the [IGridHeader](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Grid.IGridHeader.html "Link to the Web API Reference Guide to the IGridHeader interface.") interface). +* **Divider Pattern** -- Styles the divider element of your grid (the [GridDividerPattern](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Grid.GridDividerPattern.html "Link to the Web API Reference Guide to the GridDividerPattern member.") class applies styles to the  [IGridDivider](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Grid.IGridDivider.html "Link to the Web API Reference Guide to the IGridDivider interface.") interface). +* **Footer Pattern** -- Styles the footer element of your grid (the [GridFooterPattern](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Grid.GridFooterPattern.html "Link to the Web API Reference Guide to the GridFooterPattern member.") class applies styles to the  [IGridFooter](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Grid.IGridFooter.html "Link to the Web API Reference Guide to the IGridFooter interface.") interface). +* **Column Pattern** -- Styles each column in your grid (the [GridColumnPattern](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Grid.GridColumnPattern.html "Link to the Web API Reference Guide to the GridColumnPattern member.") class applies styles to the  [IGridColumn](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Grid.IGridColumn.html "Link to the Web API Reference Guide to the IGridColumn interface.") interface). +* **Row Pattern** -- Styles each row in your grid (the [GridRowPattern](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Grid.GridRowPattern.html "Link to the Web API Reference Guide to the GridRowPattern member.") class applies styles to the [IGridRow](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Grid.IGridRow.html "Link to the Web API Reference Guide to the IGridRow interface.") interface). +* **Cell Pattern** -- Styles each individual cell for granular detail (the [GridCellPattern](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Grid.GridCellPattern.html "Link to the Web API Reference Guide to the GridCellPattern member.") class applies styles to the  [IGridCell](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Grid.IGridCell.html "Link to the Web API Reference Guide to the IGridCell interface.") interface). + +**** + +The following code creates a grid that consists of five columns by five rows with a header and footer. Once the cell-creation loop encounters cell 2 x 2, it will span that cell by two columns; when the loop encounters cell 5 x 3, it will span that cell by three rows. + +1. **Create a pattern for the grid as a whole and then for each cell.** + + **In Visual Basic:** + +```vb + Imports Infragistics.Documents.Reports.Report + . + . + . + ' Create a new pattern for the grid as a whole. + Dim gridPattern As New Infragistics.Documents.Reports.Report.Grid.GridPattern() + gridPattern.Borders = New Borders(New Pen(New Color(0, 0, 0)), 5) + gridPattern.Background = New Background(Brushes.LightSteelBlue) + + ' Create a new pattern for each cell. + Dim cellPattern As New Infragistics.Documents.Reports.Report.Grid.GridCellPattern() + cellPattern.Paddings = New Paddings(5, 10) + cellPattern.Borders = New Borders(New Pen(New Color(0, 0, 0))) + 'cellPattern.Background = new Background(brush3); + cellPattern.Alignment = _ + New ContentAlignment(Alignment.Center, Alignment.Middle) +``` + + **In C#:** + +```csharp + using Infragistics.Documents.Reports.Report; + . + . + . + // Create a new pattern for the grid as a whole. + Infragistics.Documents.Reports.Report.Grid.GridPattern gridPattern = + new GridPattern(); + gridPattern.Borders = new Borders(new Pen(new Color(0, 0, 0)), 5); + + // Create a new pattern for each cell. + Infragistics.Documents.Reports.Report.Grid.GridCellPattern cellPattern = new GridCellPattern(); + cellPattern.Paddings = new Paddings(5, 10); + cellPattern.Borders = new Borders(new Pen(new Color(0, 0, 0))); + cellPattern.Background = new Background(Brushes.LightSteelBlue); + cellPattern.Alignment = + new ContentAlignment(Alignment.Center, Alignment.Middle); +``` + +2. **Create the grid and apply the grid pattern.** + + **In Visual Basic:** + +```vb + ' Create the grid and apply the GridPattern + Dim grid As Infragistics.Documents.Reports.Report.Grid.IGrid = section1.AddGrid() + grid.ApplyPattern(gridPattern) + + ' Declare a Row, and Cell object + ' for object creation. + Dim gridRow As Infragistics.Documents.Reports.Report.Grid.IGridRow + Dim gridCell As Infragistics.Documents.Reports.Report.Grid.IGridCell +``` + + **In C#:** + +```csharp + // Create the grid and apply the GridPattern + Infragistics.Documents.Reports.Report.Grid.IGrid grid = section1.AddGrid(); + grid.ApplyPattern(gridPattern); + + // Declare a Row, and Cell object + // for object creation. + Infragistics.Documents.Reports.Report.Grid.IGridRow gridRow; + Infragistics.Documents.Reports.Report.Grid.IGridCell gridCell; +``` + +3. **Define the columns.** + + **In Visual Basic:** + +```vb + ' Add five columns to the grid. + For i As Integer = 0 To 4 + grid.AddColumn() + Next i +``` + + **In C#:** + +```csharp + // Add five columns to the grid. + for (int i = 0; i < 5; i++) + { + grid.AddColumn(); + } +``` + +4. **Add the header and footer.** + + **In Visual Basic:** + +```vb + ' Add a header to the grid. + Dim gridHeader As Infragistics.Documents.Reports.Report.Grid.IGridHeader = grid.Header + Dim headerCell As Infragistics.Documents.Reports.Report.Grid.IGridCell = _ + gridHeader.AddCell() + headerCell.ColSpan = 5 + cellPattern.Apply(headerCell) + Dim headerCellText As IText = headerCell.AddText() + headerCellText.Alignment = _ + New TextAlignment(Alignment.Center, Alignment.Middle) + headerCellText.AddContent("Grid Header") + + ' Add a footer to the grid. + Dim gridFooter As Infragistics.Documents.Reports.Report.Grid.IGridFooter = grid.Footer + Dim footerCell As Infragistics.Documents.Reports.Report.Grid.IGridCell = _ + gridFooter.AddCell() + footerCell.ColSpan = 5 + cellPattern.Apply(footerCell) + Dim gridFooterText As Infragistics.Documents.Reports.Report.Text.IText = _ + footerCell.AddText() + gridFooterText.Alignment = _ + New TextAlignment(Alignment.Right, Alignment.Middle) + gridFooterText.AddContent("Grid Footer") +``` + + **In C#:** + +```csharp + // Add a header to the grid. + Infragistics.Documents.Reports.Report.Grid.IGridHeader gridHeader = grid.Header; + Infragistics.Documents.Reports.Report.Grid.IGridCell headerCell = + gridHeader.AddCell(); + headerCell.ColSpan = 5; + cellPattern.Apply(headerCell); + Infragistics.Documents.Reports.Report.Text.IText headerCellText = headerCell.AddText(); + headerCellText.Alignment = + new TextAlignment(Alignment.Center, Alignment.Middle); + headerCellText.AddContent("Grid Header"); + + // Add a footer to the grid. + Infragistics.Documents.Reports.Report.Grid.IGridFooter gridFooter = grid.Footer; + Infragistics.Documents.Reports.Report.Grid.IGridCell footerCell = + gridFooter.AddCell(); + footerCell.ColSpan = 5; + cellPattern.Apply(footerCell); + Infragistics.Documents.Reports.Report.Text.IText gridFooterText = + footerCell.AddText(); + gridFooterText.Alignment = + new TextAlignment(Alignment.Right, Alignment.Middle); + gridFooterText.AddContent("Grid Footer"); +``` + +5. **Add five rows and five cells to each row.** + + **In Visual Basic:** + +```vb + For i As Integer = 0 To 4 + gridRow = grid.AddRow() + + ' Add five cells to each row. + For j As Integer = 0 To 4 + + If i = 1 AndAlso j = 1 Then + gridCell = gridRow.AddCell() + cellPattern.Apply(gridCell) + gridCell.Background = _ + New Background(Brushes.LightSlateGray) + gridCell.AddQuickText("Column Span") + + gridCell.ColSpan = 2 + + j += 1 + ElseIf i = 2 AndAlso j = 4 Then + gridCell = gridRow.AddCell() + cellPattern.Apply(gridCell) + gridCell.Background = _ + New Background(Brushes.LightSlateGray) + gridCell.AddQuickText("Row Span") + + gridCell.RowSpan = 3 + Else + gridCell = gridRow.AddCell() + cellPattern.Apply(gridCell) + gridCell.AddQuickText( _ + ("row " + i.ToString() + ", col " + j.ToString())) + End If + Next j + Next i +``` + + **In C#:** + +```csharp + // Add five rows to the grid. + for (int i = 0; i < 5; i++) + { + gridRow = grid.AddRow(); + + // Add five cells to each row. + for (int j = 0; j < 5; j++) + { + + if (i == 1 && j == 1) + { + gridCell = gridRow.AddCell(); + cellPattern.Apply(gridCell); + gridCell.Background = + new Background(Brushes.LightSlateGray); + gridCell.AddQuickText("Column Span"); + + gridCell.ColSpan = 2; + + j++; + } + else if (i == 2 && j == 4) + { + gridCell = gridRow.AddCell(); + cellPattern.Apply(gridCell); + gridCell.Background = + new Background(Brushes.LightSlateGray); + gridCell.AddQuickText("Row Span"); + + gridCell.RowSpan = 3; + } + else + { + gridCell = gridRow.AddCell(); + cellPattern.Apply(gridCell); + gridCell.AddQuickText( + "row " + i + ", col " + j); + } + } + } +``` diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/pattern/images/DocumentEngine_Grids_01.png b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/pattern/images/DocumentEngine_Grids_01.png new file mode 100644 index 0000000000..17b6f16d4d Binary files /dev/null and b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/pattern/images/DocumentEngine_Grids_01.png differ diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/pattern/images/DocumentEngine_Lists_01.png b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/pattern/images/DocumentEngine_Lists_01.png new file mode 100644 index 0000000000..0f2d136f69 Binary files /dev/null and b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/pattern/images/DocumentEngine_Lists_01.png differ diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/pattern/images/DocumentEngine_Tables_01.png b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/pattern/images/DocumentEngine_Tables_01.png new file mode 100644 index 0000000000..8fd4f43bb9 Binary files /dev/null and b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/pattern/images/DocumentEngine_Tables_01.png differ diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/pattern/images/DocumentEngine_Text_01.png b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/pattern/images/DocumentEngine_Text_01.png new file mode 100644 index 0000000000..3bdfbe9cc1 Binary files /dev/null and b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/pattern/images/DocumentEngine_Text_01.png differ diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/pattern/images/DocumentEngine_Trees_01.png b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/pattern/images/DocumentEngine_Trees_01.png new file mode 100644 index 0000000000..1cb96b8f8c Binary files /dev/null and b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/pattern/images/DocumentEngine_Trees_01.png differ diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/pattern/lists.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/pattern/lists.mdx new file mode 100644 index 0000000000..1a9d04017b --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/pattern/lists.mdx @@ -0,0 +1,103 @@ +--- +title: "Lists" +slug: documentengine-lists +--- + +# Lists + +The List element is extremely useful when presenting a group of items either in numbered or bulleted format. Lists can be as simple or complex as you need them to be, depending on your report's flow. Your list can be a simple list of textual items, or it can be a complex array of separate layout elements ranging from Bands to Images to Quick Text. + +An interesting feature of the List element is its ability to apply patterns to lists. These patterns then apply style modifications to the list. You can apply several patterns to a single list. You can also override a pattern by setting a specific style property after you have applied the pattern. + +You can create a list by calling the AddList method off most layout elements. Once you've created a List, you can add items to the list by calling the AddItem method off the IList interface. You can then add most layout items to each individual list item through their respective Add methods, including another List element + +The following code is divided into four steps. The first step creates two list patterns that modify specific styles in a list. The second step creates a list and applies the first pattern. The third step creates another list and applies the second pattern. The final step demonstrates how you can override a pattern by setting a style property that has already been set by a list pattern. When you publish a report with code similar to the following, you will see a page that resembles the screen shot. + +![](images/DocumentEngine_Lists_01.png) + +1. **Create two list patterns.** + + **In C#:** + +```csharp + using Infragistics.Documents.Reports.Report; + . + . + . + // Create a list pattern. A list pattern is basically a style + // that you want to apply to a specific list. + Infragistics.Documents.Reports.Report.List.ListPattern listPattern1 = new ListPattern(); + listPattern1.Background = new Background(Brushes.LightSteelBlue); + listPattern1.Bullets = + new Infragistics.Documents.Reports.Report.List.Bullets(BulletType.WhiteCircle); + listPattern1.Borders = new Borders(new Pen(new Color(0, 0, 0))); + listPattern1.Paddings = new Paddings(5); + + // Create a second list pattern. + Infragistics.Documents.Reports.Report.List.ListPattern listPattern2 = new ListPattern(); + listPattern2.Background = new Background(Brushes.LightSlateGray); + listPattern2.Bullets = + new Infragistics.Documents.Reports.Report.List.Bullets(BulletType.BlackCircle); + listPattern2.Borders = new Borders(new Pen(new Color(0, 0, 0))); + listPattern2.Paddings = new Paddings(5); + listPattern2.Interval = 10; +``` + +2. **Create a list and apply the first pattern.** + + **In C#:** + +```csharp + // Create a list and apply the first pattern to it. + Infragistics.Documents.Reports.Report.List.IList sectionList1 = section1.AddList(); + sectionList1.ApplyPattern(listPattern1); + + // Create a list item. + Infragistics.Documents.Reports.Report.List.IListItem sectionListItem1; + + // For each name in the BulletType enum, add a new list item. + foreach (string s in Enum.GetNames(typeof(BulletType))) + { + sectionListItem1 = sectionList1.AddItem(); + sectionListItem1.AddQuickText(s); + } +``` + +3. **Create another list and apply the second pattern.** + + **In C#:** + +```csharp + Infragistics.Documents.Reports.Report.List.IList sectionList2 = section1.AddList(); + listPattern2.Apply(sectionList2); + + Infragistics.Documents.Reports.Report.List.IListItem sectionListItem2; + + foreach (string s in Enum.GetNames(typeof(Alignment))) + { + sectionListItem2 = sectionList2.AddItem(); + sectionListItem2.AddQuickText(s); + } +``` + +4. **Create a third list and apply the first pattern to it.** + + Once you apply the pattern, set the **Bullets** property to a new Bullets object; this will override the setting in the pattern. A pattern is simply a collection of style property changes, so if you apply the pattern again after modifying an individual property, the pattern could possibly override your individual style modifications. + + **In C#:** + +```csharp + Infragistics.Documents.Reports.Report.List.IList sectionList3 = section1.AddList(); + listPattern1.Apply(sectionList3); + // Override the Pattern's style for the Bullet property. + sectionList3.Bullets = + new Infragistics.Documents.Reports.Report.List.Bullets(BulletType.BlackCircle); + + Infragistics.Documents.Reports.Report.List.IListItem sectionListItem3; + + foreach (string s in Enum.GetNames(typeof(BrushType))) + { + sectionListItem3 = sectionList3.AddItem(); + sectionListItem3.AddQuickText(s); + } +``` \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/pattern/tables.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/pattern/tables.mdx new file mode 100644 index 0000000000..eb64b21a78 --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/pattern/tables.mdx @@ -0,0 +1,183 @@ +--- +title: "Tables" +slug: documentengine-tables +--- + +# Tables + + + +The Table element is a grid-type element that allows you to construct a grid that relies on rows and cells rather than rows and columns, such as the Grid element. The Table element doesn't have specific columns that determine the width of cells like the Grid element. + +The Table element allows you to customize the width of every cell if needed, giving you absolute control of how your data is presented. The two drawbacks to this grid design have to do with column and row spanning. You have to "fake" a column span by doubling the width of a particular cell, and you cannot span rows. + +Being a member of the [pattern content](DocumentEngine-Pattern-Content.html "Explains the pattern content available in the document engine.") family, you can modify the style of different Table elements by applying patterns at different levels of the table: + +* **Table Pattern** -- Styles the table as a whole and provides access to all other patterns except the cell pattern (the [TablePattern](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Table.TablePattern.html "Link to the Web API Reference Guide to the TablePattern member.")  class applies styles to the [ITable](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Table.ITable.html "Link to the Web API Reference Guide to the ITable interface.") interface). +* **Header Pattern** -- Styles the header element of your table (the [TableHeaderPattern](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Table.TableHeaderPattern.html "Link to the Web API Reference Guide to the TableHeaderPattern member.") class applies styles to the  [ITableHeader](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Table.ITableHeader.html "Link to the Web API Reference Guide to the ITableHeader interface.") interface). +* **Divider Pattern** -- Styles the divider element of your table (the [TableDividerPattern](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Table.TableDividerPattern.html "Link to the Web API Reference Guide to the TableDividerPattern member.") class applies styles to the  [ITableDivider](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Table.ITableDivider.html "Link to the Web API Reference Guide to the ITableDivider interface.") interface). +* **Footer Pattern** -- Styles the footer element of your table (the [TableFooterPattern](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Table.TableFooterPattern.html "Link to the Web API Reference Guide to the TableFooterPattern member.") class applies styles to the [ITableFooter](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Table.ITableFooter.html "Link to the Web API Reference Guide to the ITableFooter interface.") interface). +* **Row Pattern** -- Styles each row in your table (the [TableRowPattern](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Table.TableRowPattern.html "Link to the Web API Reference Guide to the TableRowPattern member.") class applies styles to the  [ITableRow](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Table.ITableRow.html "Link to the Web API Reference Guide to the ITableRow interface.") interface). +* **Cell Pattern** -- Styles each individual cell for granular detail (the[TableCellPattern](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Table.TableCellPattern.html "Link to the Web API Reference Guide to the TableCellPattern member.") class applies styles to the [ITableCell](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Table.ITableCell.html "Link to the Web API Reference Guide to the ITableCell interface.") interface). + +The Table element also contains Header, Footer, and Divider elements. These elements consist of only one row. These elements also behave in the same manner as the Header, Footer, and Divider elements of the Band element. Headers display at the top of the table on every page or only the first page, depending on the [Repeat](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Table.ITableHeader~Repeat.html "Link to the Web API Reference Guide to the Repeat member.") property; the same goes for footers, but applying to the last page. Dividers display at the end of every page where the table spills over to the next page. + +![](images/DocumentEngine_Tables_01.png) + +The following code creates a table with three rows, including a header and footer. The first and third rows simulate a column span by manipulating the width of specific cells to be twice the width of the standard cell width. The middle row demonstrates the Table element’s ability to create completely custom rows by modifying the cell width to each be one-third the width of the table. + +1. **Create the table and cell patterns.** + + **In C#:** + +```csharp + using Infragistics.Documents.Reports.Report; + . + . + . + // Create a new pattern for the table as a whole. + Infragistics.Documents.Reports.Report.Table.TablePattern tablePattern = + new Infragistics.Documents.Reports.Report.Table.TablePattern(); + tablePattern.Background = new Background(Brushes.LightSteelBlue); + tablePattern.Borders = new Borders(new Pen(new Color(0, 0, 0)), 5); + + // Create a new pattern for the cells. + Infragistics.Documents.Reports.Report.Table.CellPattern tableCellPattern = + new Infragistics.Documents.Reports.Report.Table.TableCellPattern(); + tableCellPattern.Borders = new Borders(new Pen(new Color(0, 0, 0))); + tableCellPattern.Background = new Background(Brushes.LightSteelBlue); + tableCellPattern.Paddings = new Paddings(5, 10); +``` + +2. **Create the table and apply the table pattern.** + + **In C#:** + +```csharp + // Create the table and apply the table pattern. + Infragistics.Documents.Reports.Report.Table.ITable table = section1.AddTable(); + table.Width = new RelativeWidth(100); + table.ApplyPattern(tablePattern); +``` + +3. **Create the header and footer.** + + **In C#:** + +```csharp + // Create the table header. + Infragistics.Documents.Reports.Report.Table.ITableHeader tableHeader = + table.Header; + Infragistics.Documents.Reports.Report.Table.ITableCell tableHeaderCell = + tableHeader.AddCell(); + tableCellPattern.Apply(tableHeaderCell); + tableHeaderCell.AddQuickText("Table Header"); + + // Create the table footer. + Infragistics.Documents.Reports.Report.Table.ITableFooter tableFooter = + table.Footer; + Infragistics.Documents.Reports.Report.Table.ITableCell tableFooterCell = + tableFooter.AddCell(); + tableCellPattern.Apply(tableFooterCell); + tableFooterCell.AddQuickText("Table Footer"); +``` + +4. **Create the first row.** + + **In C#:** + +```csharp + Infragistics.Documents.Reports.Report.Table.ITableRow tableRow; + Infragistics.Documents.Reports.Report.Table.ITableCell tableCell; + tableRow = table.AddRow(); + + tableCell = tableRow.AddCell(); + tableCell.Width = new RelativeWidth(100); + tableCellPattern.Apply(tableCell); + tableCell.Background = new Background(Brushes.LightSlateGray); + IText tableCellText = tableCell.AddText(); + tableCellText.Alignment = + new TextAlignment(Alignment.Center, Alignment.Middle); + tableCellText.AddContent("'Column' Span 1"); + + tableCell = tableRow.AddCell(); + tableCell.Width = new RelativeWidth(50); + tableCellPattern.Apply(tableCell); + tableCellText = tableCell.AddText(); + tableCellText.Alignment = + new TextAlignment(Alignment.Center, Alignment.Middle); + tableCellText.AddContent("Cell 2"); + + tableCell = tableRow.AddCell(); + tableCell.Width = new RelativeWidth(50); + tableCellPattern.Apply(tableCell); + tableCellText = tableCell.AddText(); + tableCellText.Alignment = + new TextAlignment(Alignment.Center, Alignment.Middle); + tableCellText.AddContent("Cell 3"); +``` + +5. **Create the second row.** + + **In C#:** + +```csharp + tableRow = table.AddRow(); + + tableCell = tableRow.AddCell(); + tableCell.Width = new RelativeWidth(33); + tableCellPattern.Apply(tableCell); + tableCellText = tableCell.AddText(); + tableCellText.Alignment = + new TextAlignment(Alignment.Center, Alignment.Middle); + tableCellText.AddContent("33%"); + + tableCell = tableRow.AddCell(); + tableCell.Width = new RelativeWidth(33); + tableCellPattern.Apply(tableCell); + tableCellText = tableCell.AddText(); + tableCellText.Alignment = + new TextAlignment(Alignment.Center, Alignment.Middle); + tableCellText.AddContent("33%"); + + tableCell = tableRow.AddCell(); + tableCell.Width = new RelativeWidth(33); + tableCellPattern.Apply(tableCell); + tableCellText = tableCell.AddText(); + tableCellText.Alignment = + new TextAlignment(Alignment.Center, Alignment.Middle); + tableCellText.AddContent("33%"); +``` + +6. **Create the third row.** + + **In C#:** + +```csharp + tableRow = table.AddRow(); + + tableCell = tableRow.AddCell(); + tableCell.Width = new RelativeWidth(50); + ableCellPattern.Apply(tableCell); + tableCellText = tableCell.AddText(); + tableCellText.Alignment = + new TextAlignment(Alignment.Center, Alignment.Middle); + tableCellText.AddContent("Cell 1"); + + tableCell = tableRow.AddCell(); + tableCell.Width = new RelativeWidth(50); + tableCellPattern.Apply(tableCell); + tableCellText = tableCell.AddText(); + tableCellText.Alignment = + new TextAlignment(Alignment.Center, Alignment.Middle); + tableCellText.AddContent("Cell 2"); + + tableCell = tableRow.AddCell(); + tableCell.Width = new RelativeWidth(100); + tableCellPattern.Apply(tableCell); + tableCell.Background = new Background(Brushes.LightSlateGray); + tableCellText = tableCell.AddText(); + tableCellText.Alignment = + new TextAlignment(Alignment.Center, Alignment.Middle); + tableCellText.AddContent("'Column' Span 2"); +``` \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/pattern/text.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/pattern/text.mdx new file mode 100644 index 0000000000..b23f1cb86e --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/pattern/text.mdx @@ -0,0 +1,80 @@ +--- +title: "Text" +slug: documentengine-text +--- + +# Text + + +The Text element adds highly customized paragraph content to your reports. The Text element includes several text-specific properties that will make your content stand out no matter what the occasion. Several of these properties can be found in the [report graphics](DocumentEngine-Report-Graphics.html "Explains the graphic items available for reports created using document engine.") section, but there are a few properties that are specific to text: + +* **First Letter** -- Determines whether the first letter in the paragraph is a drop cap. +* **Heading** -- Offers several different styles of headings for text. +* **Indents** -- Determines the values of text indentations. +* **Interval** -- Allows you to add extra space in between each line of text. +* **Line Numbering** -- Allows you to number each line of text to help your reader locate a specific sentence. +* **Style** -- Helps you repeatedly set the same font and color for different text elements. + +The Text element also exposes several methods that help you insert all kinds of textual content. A few of these methods are listed below: + +* **AddContent** -- The most commonly used method with numerous overloads. You can simply enter a string in one overload, or apply a style element in another; there are several possible combinations to suit your needs. +* **AddDateTime** -- Allows you to add the current date and time in several standard formats. +* **AddLeader** -- Allows you to add leader lines to your text. +* **AddLineBreak** -- Adds a line break so your content isn't bunched up on continued lines. +* **AddPageNumber** -- Adds the page number of the current page in decimal, letters, or roman numerals. +* **AddRichContent** -- Adds limited rich content with tags similar to HTML. + +![](images/DocumentEngine_Text_01.png) + +The following code will create a single Text element. A pattern is applied to the entire Text element, and two styles are applied to individual content elements. + +1. **Create the styles.** + + **In C#:** + +```csharp + using Infragistics.Documents.Reports.Report; + using Infragistics.Documents.Reports.Report.Text; + using Infragistics.Documents.Reports.Graphics; + . + . + . + Style style1 = new Style(new Font("Arial", 16), Brushes.White); + Style style2 = new Style(new Font("Verdana", 10), Brushes.Black); +``` + +2. **Create the text pattern.** + + **In C#:** + +```csharp + TextPattern textPattern = new TextPattern(); + textPattern.Margins = new Margins(5, 10); + textPattern.Paddings = new Paddings(5); + textPattern.Interval = 5; + textPattern.Borders = new Borders(new Pen(new Color(0, 0, 0)), 5); + textPattern.Background = new Background(Brushes.LightSteelBlue); +``` + +3. **Create the Text element and add content to it.** + +Use the following text to set the `string1` variable: + +> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec imperdiet mattis sem. Nunc ornare elit at justo. In quam nulla, lobortis non, commodo eu, eleifend in, elit. Nulla eleifend. Nulla convallis. Sed eleifend auctor purus. Donec velit diam, congue quis, eleifend et, pretium id, tortor. Nulla semper condimentum justo. Etiam interdum odio ut ligula. Vivamus egestas scelerisque est. Donec accumsan. In est urna, vehicula non, nonummy sed, malesuada nec, purus. Vestibulum erat. Vivamus lacus enim, rhoncus nec, ornare sed, scelerisque varius, felis. Nam eu libero vel massa lobortis accumsan. Vivamus id orci. Sed sed lacus sit amet nibh pretium sollicitudin. Morbi urna. + + **In C#:** + +```csharp + IText sectionText = section1.AddText(); + sectionText.ApplyPattern(textPattern); + + string string1 = "Lorem ipsum..."; + + sectionText.AddContent("Heading 1", style1); + sectionText.AddLineBreak(); + sectionText.AddContent(string1, style2); + sectionText.AddLineBreak(); + sectionText.AddContent("Heading 2", style1); + sectionText.AddLineBreak(); + sectionText.AddContent(string1, style2); +``` \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/pattern/trees.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/pattern/trees.mdx new file mode 100644 index 0000000000..321670f88b --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/pattern/trees.mdx @@ -0,0 +1,108 @@ +--- +title: "Trees" +slug: documentengine-trees +--- + +# Trees +The Tree element is useful for displaying hierarchical relationships by showing how parent nodes, especially the root node, own their child nodes and all nodes beneath them in the hierarchy. The Tree element's object model consists of a main tree object with a [Root](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Tree.ITree~Root.html "Link to the Web API Reference Guide to the Root member.") property to identify the root node of the tree. Once you've gotten a reference to the root node (which is of type [INode](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Tree.INode.html "Link to the Web API Reference Guide to the INode interface.") ), you can call the [AddNode](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Tree.INode~AddNode.html "Link to the Web API Reference Guide to the AddNode member.") method off the INode interface to add additional nodes to the tree. You can add as many or as few nodes as you like, but there will only be one root node. + +As with all [pattern content](DocumentEngine-Pattern-Content.html "Explains the pattern content items available in the document engine."), you can implement style changes by adding patterns to the following tree elements: + +* the tree as a whole (the [TreePattern](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Tree.TreePattern.html "Link to the Web API Reference Guide to the TreePattern member.") class applies a style to the [ITree](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Tree.ITree.html "Link to the Web API Reference Guide to the ITree interface.") interface) +* the tree nodes, not their content (the [TreeNodePattern](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Tree.TreeNodePattern.html "Link to the Web API Reference Guide to the TreeNodePattern member.") class applies a style to the [INode](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Tree.INode.html "Link to the Web API Reference Guide to the INode interface.") interface) +* the caption of the tree nodes (the [TreeCaptionPattern](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Tree.TreeCaptionPattern.html "Link to the Web API Reference Guide to the TreeCaptionPattern member.") class applies a style to the [ICaption](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Tree.ICaption.html "Link to the Web API Reference Guide to the ICaption interface.") interface) + +As you can see from the list above, each pattern applies to a more granular level of the tree; and if that’s not enough, you can override each pattern by setting specific properties on each node. + +![](images/DocumentEngine_Trees_01.png) + +The following code creates a tree with one root node and seven child nodes. You will first create patterns for the tree, nodes, and captions, create the tree, and then add the nodes. + +1. **Create patterns for the tree, nodes, and captions.** + + **In C#:** + +```csharp + using Infragistics.Documents.Reports.Report; + . + . + . + // Create a new pattern for the tree as a whole. + Infragistics.Documents.Reports.Report.Tree.TreePattern treePattern = new TreePattern(); + treePattern.Background = new Background(Brushes.LightSlateGray); + treePattern.Paddings = new Paddings(5); + treePattern.Borders = new Borders(new Pen(new Color(0, 0, 0)), 5); + + // Create a new pattern for tree nodes. + Infragistics.Documents.Reports.Report.Tree.TreeNodePattern treeNodePattern = + new TreeNodePattern(); + treeNodePattern.Lines = new Lines(new Pen(new Color(0, 0, 0))); + treeNodePattern.Interval = 5; + treeNodePattern.Indent = 25; + + // Create a new pattern for captions. + Infragistics.Documents.Reports.Report.Tree.TreeCaptionPattern treeCaptionPattern = + new TreeCaptionPattern(); + treeCaptionPattern.Background = new Background(Brushes.LightSteelBlue); + treeCaptionPattern.Borders = new Borders(new Pen(new Color(0, 0, 0)), 3); + treeCaptionPattern.Paddings = new Paddings(3); +``` + +2. **Create the tree, apply the tree pattern, and then add a caption for the root node.** + + **In C#:** + +```csharp + // Create the tree and get a reference to the + // tree's root node. + Infragistics.Documents.Reports.Report.Tree.ITree tree = section1.AddTree(); + tree.ApplyPattern(treePattern); + tree.Width = new RelativeWidth(75); + + Infragistics.Documents.Reports.Report.Tree.INode rootNode = tree.Root; + treeNodePattern.Apply(rootNode); + + Infragistics.Documents.Reports.Report.QuickText.IQuickText nodeText; + + // Add a caption to the root node. + Infragistics.Documents.Reports.Report.Tree.ICaption rootCaption = rootNode.Caption; + nodeText = rootCaption.AddQuickText("Alignment Options"); + nodeText.Font = new Infragistics.Documents.Reports.Graphics.Font("Verdana", 24); +``` + +3. **Create the child nodes.** + + The following code loops through the [Alignment](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Alignment.html "Link to the Win API Reference Guide to the Alignment member.") [Alignment](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Alignment.html "Link to the Web API Reference Guide to the Alignment member.") [Alignment](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Alignment.html "Link to the Win API Reference Guide to the Alignment member.") [Alignment](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Alignment.html "Link to the Web API Reference Guide to the Alignment member.") enumeration and retrieves the strings to populate the tree nodes. When the loop encounters the strings "Center" or "Middle", it will override the pattern for those nodes and change the background color to white. + + **In C#:** + +```csharp + INode childNode; + ICaption childNodeCaption; + + foreach (string s in Enum.GetNames(typeof(Alignment))) + { + if (s == "Center" || s == "Middle") + { + childNode = rootNode.AddNode(); + childNodeCaption = childNode.Caption; + treeCaptionPattern.Apply(childNodeCaption); + + // Override the Background of the TreeCaptionPattern + childNodeCaption.Background = new Background(Brushes.White); + + nodeText = childNodeCaption.AddQuickText(s); + nodeText.Font = + new Infragistics.Documents.Reports.Graphics.Font("Verdana", 24); + } + else + { + childNode = rootNode.AddNode(); + childNodeCaption = childNode.Caption; + treeCaptionPattern.Apply(childNodeCaption); + nodeText = childNodeCaption.AddQuickText(s); + nodeText.Font = + new Infragistics.Documents.Reports.Graphics.Font("Verdana", 24); + } + } +``` \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/quick/content.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/quick/content.mdx new file mode 100644 index 0000000000..54c81d71fe --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/quick/content.mdx @@ -0,0 +1,20 @@ +--- +title: "Quick Content" +slug: documentengine-quick-content +--- + +# Quick Content +When all you need is the bare minimum. Quick content allows you to quickly add report material through method calls. For example, call the `AddQuickText` method and pass your text as the argument; that's all you need to do to add simple text to a layout element. + +Click the links below to learn about the light-weight, quick content elements. + +- [Quick Image](DocumentEngine-Quick-Image.html "Explains the quick image available in the document engine.") +- [Quick List](DocumentEngine-Quick-List.html "Explains the quick list available in the document engine.") +- [Quick Table](DocumentEngine-Quick-Table.html "Explains the quick table available in the document engine.") +- [Quick Text](DocumentEngine-Quick-Text.html "Explains the quick text available in the document engine.") + + + + + + diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/quick/image.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/quick/image.mdx new file mode 100644 index 0000000000..341a25d242 --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/quick/image.mdx @@ -0,0 +1,22 @@ +--- +title: "Quick Image" +slug: documentengine-quick-image +--- + +# Quick Image + +The Quick Image element lets you add images to most layout elements with little or no effort. To quickly add an image to your report, you simply need to call the AddQuickImage method of whichever layout element you need to insert an image in. This method has only one parameter, an [Infragistics.Documents.Reports.Graphics.Image](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.Image.html "Link to the Web API Reference Guide to the Image member.") . You can either pass in a previously created image, or you can instantiate a new image. See Image for more information. + +The following code creates a Quick Image element by calling the [AddQuickImage](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Section.ISection~AddQuickImage.html "Link to the Web API Reference Guide to the AddQuickImage member.") method off the [ISection](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Section.ISection.html "Link to the Web API Reference Guide to the ISection interface.") interface and passing in a new image. The new image will use the second overload, using a string to identify the path of the image. This topic assumes that you have a Report element defined with at least one Section element added to it. See [Report](DocumentEngine-Report.html "Explains the report object that's available in the document engine.") and [Section](DocumentEngine-Section.html "Explains the section element that's used in the document engine.") for more information. + +**In C#:** + +```csharp +section1.AddQuickImage(new Image(Application.StartupPath + @"..Coffee Bean.bmp")); +``` + + + + + + diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/quick/images/DocumentEngine_Quick_List_01.png b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/quick/images/DocumentEngine_Quick_List_01.png new file mode 100644 index 0000000000..2da28860df Binary files /dev/null and b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/quick/images/DocumentEngine_Quick_List_01.png differ diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/quick/images/DocumentEngine_Quick_Table_01.png b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/quick/images/DocumentEngine_Quick_Table_01.png new file mode 100644 index 0000000000..fefcb4a107 Binary files /dev/null and b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/quick/images/DocumentEngine_Quick_Table_01.png differ diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/quick/images/DocumentEngine_Quick_Text_01.png b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/quick/images/DocumentEngine_Quick_Text_01.png new file mode 100644 index 0000000000..9ec0fae82c Binary files /dev/null and b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/quick/images/DocumentEngine_Quick_Text_01.png differ diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/quick/list.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/quick/list.mdx new file mode 100644 index 0000000000..0d533a011a --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/quick/list.mdx @@ -0,0 +1,31 @@ +--- +title: "Quick List" +slug: documentengine-quick-list +--- + +# Quick List + +Using the Quick List element is the easiest way to add a simple bulleted or numbered list to your report. Quick List has only the essential features to maintain its light-weight presence. If you need a much more customizable list element, see [Lists](/pattern/documentengine-lists.mdx). As with the other [quick content](/documentengine-quick-content.mdx) elements, you create a Quick List by calling the AddQuickList method of most layout elements. Unlike the Quick Image and Quick Text elements, there is one more step required to create the list; you need to add items. However, adding items to the list isn't difficult at all; call the [AddItem](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.QuickList.IQuickList~AddItem.html) method off the [IQuickList](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.QuickList.IQuickList.html) interface and supply it with a string. There are other options available to you such as the [Numbered](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.QuickList.IQuickList~Numbered.html) property which identifies whether the list will be bulleted or numbered. Another useful property is the [Interval](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.QuickList.IQuickList~Interval.html) property which sets the space in-between each item. + +The following code creates a list of seven items. The list will be numbered and each item will have 10 pixels of space between them. This topic assumes that you have a Report element defined with at least one Section element added to it. See [Report](DocumentEngine-Report.html "Explains the report object that's available in the document engine.") and [Section](DocumentEngine-Section.html "Explains the section element available in the document engine.") for more information. + +![](images/DocumentEngine_Quick_List_01.png) + +**In C#:** + +```csharp +// Add a quick list +section1.AddQuickText("Quick List"); +Infragistics.Documents.Reports.Report.QuickList.IQuickList quickList = section1.AddQuickList(); +quickList.Numbered = true; +quickList.Interval = 10; + +// Add items to the list +quickList.AddItem("Red"); +quickList.AddItem("Orange"); +quickList.AddItem("Yellow"); +quickList.AddItem("Green"); +quickList.AddItem("Blue"); +quickList.AddItem("Indigo"); +quickList.AddItem("Violet"); +``` \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/quick/table.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/quick/table.mdx new file mode 100644 index 0000000000..3d7fbd5665 --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/quick/table.mdx @@ -0,0 +1,77 @@ +--- +title: "Quick Table" +slug: documentengine-quick-table +--- + +# Quick Table + + + +The Quick Table element is definitely the heaviest of the light-weight [Quick Content](DocumentEngine-Quick-Content.html "Explains the quick content items available in the document engine.") elements only because a table naturally contains several elements. You can add the following elements to the Quick Table element: + +- Column +- Row +- Cell +- Header +- Divider +- Footer + +You can also set several properties that will modify the appearance of the Quick Table element: + +- Background +- Borders +- Paddings +- Margins + +The Quick Table element uses several of the features of the full Table element, See [Tables](DocumentEngine-Tables.html "Explains the table element available in the document engine.") for more information. Columns, Rows, and Cells are all repeatable content, meaning you can add as many of those elements as you need. However, the Header, Divider, and Footer elements are not repeatable; there is only one Header, Divider, and Footer per page. Although the Header and Footer elements are not repeatable, their cells are. These two elements each contain an AddCell method used to add additional cells to the Header or Footer elements. You can also add cells to a Row element in much the same way. Therefore, creating a table full of cells (whether in a Header, Row, or Footer) is as easy as calling one method per cell. + +![Shows a PDF that demonstrates the Quikc Table element, and is the result of the code listed below.](images/DocumentEngine_Quick_Table_01.png) + +* * * * * + +The following code creates a simple 3 x 3 table plus headers and footers. The background color of the table is set to LightSteelBlue and the border color is set to Black. This topic assumes that you have a Report element defined with at least one Section element added to it. See [Report](DocumentEngine-Report.html "Explains the report object available in the document engine.") and [Section](DocumentEngine-Section.html "Explains the section element available in the document engine.") for more information. + +**In C#:** + +```csharp +section1.AddQuickText("Quick Table"); +// Add a quick table +Infragistics.Documents.Reports.Report.QuickTable.IQuickTable quickTable = section1.AddQuickTable(); +// Add black borders to the outside of the table +quickTable.Borders = new Borders(new Pen(new Color(0, 0, 0))); +// Add a lightsteelblue background to the entire table +quickTable.Background = new Background(Brushes.LightSteelBlue); + +// Add three columns +quickTable.AddColumn(100); +quickTable.AddColumn(100); +quickTable.AddColumn(100); + +// Add Header cells +Infragistics.Documents.Reports.Report.QuickTable.IQuickTableHeader quickTableHeader = quickTable.Header; +quickTableHeader.AddCell("Header 1"); +quickTableHeader.AddCell("Header 2"); +quickTableHeader.AddCell("Header 3"); + +// Add three rows with three cells each +Infragistics.Documents.Reports.Report.QuickTable.IQuickTableRow quickRow = quickTable.AddRow(); +quickRow.AddCell("Cell 1"); +quickRow.AddCell("Cell 2"); +quickRow.AddCell("Cell 3"); + +quickRow = quickTable.AddRow(); +quickRow.AddCell("Cell 4"); +quickRow.AddCell("Cell 5"); +quickRow.AddCell("Cell 6"); + +quickRow = quickTable.AddRow(); +quickRow.AddCell("Cell 7"); +quickRow.AddCell("Cell 8"); +quickRow.AddCell("Cell 9"); + +// Add Footer cells +Infragistics.Documents.Reports.Report.QuickTable.IQuickTableFooter quickTableFooter = quickTable.Footer; +quickTableFooter.AddCell("Footer 1"); +quickTableFooter.AddCell("Footer 2"); +quickTableFooter.AddCell("Footer 3"); +``` \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/quick/text.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/quick/text.mdx new file mode 100644 index 0000000000..197d9da9ac --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/quick/text.mdx @@ -0,0 +1,27 @@ +--- +title: "Quick Text" +slug: documentengine-quick-text +--- + +# Quick Text + + + +The Quick Text element is the simplest of the [Quick Content](DocumentEngine-Quick-Content.html "Explains the quick content that's available in the document engine.") elements in that you do not need to customize the element at all. The Quick Text element was designed in such a way that all you need to do is pass a string to the AddQuickText method to quickly add text to your report. Of course, you can also get a reference to the element and modify a few standard properties such as [Alignment](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.QuickText.IQuickText~Alignment.html "Link to the Web API Reference Guide to the Alignment member.") , [Brush](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.QuickText.IQuickText~Brush.html "Link to the Web API Reference Guide to the Brush member.") , and [Font](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.QuickText.IQuickText~Font.html "Link to the Web API Reference Guide to the Font member.") ; but if you need a full-fledged Text element, see [Text](DocumentEngine-Text.html "Explains the Text element available in the document engine.") for more information. The basic use-case for the Quick Text element is to add default text (Arial, 12pt) with no regard to its placement or appearance. + +![Shows a PDF that demonstrates the Quick Text, and is the result of the code listed below.](images/DocumentEngine_Quick_Text_01.png) + +* * * * * + +Use the following code to first add a Quick Text element with default style, and then retrieve a reference to a new Quick Text element and modify its style by changing the color and font. This topic assumes that you have a Report element defined with at least one Section element added to it. See [Report](DocumentEngine-Report.html "Explains the report object in the document engine.") and [Section](DocumentEngine-Section.html "Explains the section element in the document engine.") for more information. + +**In C#:** + +```csharp +section1.AddQuickText("This is the default Quick Text style."); + +Infragistics.Documents.Reports.Report.QuickText.IQuickText quickText = section1.AddQuickText("This is a modified Quick Text style."); +quickText.Brush = Infragistics.Documents.Reports.Graphics.Brushes.SteelBlue; +quickText.Font = new Infragistics.Documents.Reports.Graphics.Font("Verdana", 18); +``` + diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/report-elements.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/report-elements.mdx new file mode 100644 index 0000000000..890b5e5e68 --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/elements/report-elements.mdx @@ -0,0 +1,19 @@ +--- +title: "Report Elements" +slug: documentengine-report-elements +--- + +# Report Elements + +Use report elements to add content to your report and to lay out that content in a logical flow. + +- [DocumentEngine Report Layout](DocumentEngine-Report-Layout.html "Explains elements that control the layout of reports.") -- Here you'll find several useful elements that control content flow; from the Band element, useful for laying out almost any content, to the Stretcher element, used only to stretch content to the bottom of a page. +- [Pattern Content](DocumentEngine-Pattern-Content.html "Explains pattern content, which is content that is repeatable.") -- Pattern content is a group of elements that create unique repeatable content such as Grids (row after row), Lists (item after item), and Trees (node after node). You can style each element in this section by using patterns and applying these patterns to the element itself, or individual items in the element for more control over your style patterns. +- [Quick Content](DocumentEngine-Quick-Content.html "Explains how to create simple content, for fast development of reports.") -- If all you need is a simple content element to quickly insert some content, the quick content elements are right for you. +- [Navigation Helpers](DocumentEngine-Navigation-Helpers.html "Explains the navigation helpers that are available for your reports.") -- It's difficult to flip through a 500-page report and find what you're looking for without a Table of Contents, Index, or even Bookmarks. + + + + + + diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/graphics/brushes.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/graphics/brushes.mdx new file mode 100644 index 0000000000..75b3c4d666 --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/graphics/brushes.mdx @@ -0,0 +1,154 @@ +--- +title: "Brushes" +slug: documentengine-brushes +--- + +# Brushes + +Just as an artist uses a brush to add paint to his canvas, you can use the [`Brush`](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.Brush.html) class to add color and gradients to your report’s content. There are several classes that use a brush to add color, such as Background, Borders, and Pen. The Brush class offers you an assortment of options when filling content with color. + +Brushes come in two types: Direct and Indirect. + +- Direct brushes can apply a specific gradient with color blends and stops in a *defined* area, such as a [`Rectangle`](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.Rectangle.html) . Direct brushes also include hatches, textures, and solid colors. +- Indirect brushes are used more commonly as backgrounds for report content that you may not know the exact dimension of while you are creating your report. + +All brushes are eventually converted to direct brushes when the Infragistics Document Engine™ generates the report; this is because once the report is generated, the width and height of all content is finalized and direct brushes can be applied to everything. + +Below is a listing of all brushes, including predefined brushes, that you can apply to backgrounds, shapes, fills, etc. + +![](images/DocumentEngine_Brushes_01.png) + +## Indirect Brushes + +The [IndirectBrush](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.IndirectBrush.html) class is derived from the Brush class and is an abstract class, which means you cannot directly instantiate it. There are three classes derived from the IndirectBrush class that you can instantiate. + +- [LinearGradientBrush](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.LinearGradientBrush.html "Link to the Web API Reference Guide to the LinearGradientBrush member.") -- A brush that creates a gradient of two colors in the form of a line from one side of the parent object to the other side. The gradient is always a smooth 50% transition from the first color to the second color. (Because it is an indirect brush, you can't specify where you want the transition to take place along the line.) You also have the option of modifying the angle of the gradient. +- [RadialGradientBrush](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.RadialGradientBrush.html "Link to the Web API Reference Guide to the RadialGradientBrush member.") -- A brush that creates a gradient of two colors; the first color begins in the center of the parent object and radiates outwardly in a perfect circle while transitioning to the second color. You can also specify the rotation angle of the gradient. +- [TextureBrush](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.TextureBrush.html "Link to the Web API Reference Guide to the TextureBrush member.") -- A texture brush applies an image to the painting surface while repeating the image horizontally and vertically until all space is used up. Your Windows® desktop uses the same concept to tile wallpaper. The TextureBrush constructors allow you to specify the angle of the image as well as the horizontal and vertical scale and offset. + +## Direct Brushes + +The [`DirectBrush`](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.DirectBrush.html "Link to the Web API Reference Guide to the DirectBrush member.") class is derived from the Brush class and is an abstract class, similar to the IndirectBrush class. Use a direct brush when you know the bounds of the containing object such as a Rectangle or other [`Shape`](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Shapes.IShapes.html "Link to the Web API Reference Guide to the IShapes interface."). There are five types of direct brushes that derive from the DirectBrush class: + +- [HatchBrush](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.HatchBrush.html "Link to the Web API Reference Guide to the HatchBrush member."): Create a hatch design with the hatch brush. You can specify the design by using the HatchStyle enumeration. You can also specify a foreground and background color. +- [LinearGradientDirectBrush](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.LinearGradientDirectBrush.html "Link to the Web API Reference Guide to the LinearGradientDirectBrush member."): The direct linear gradient brush allows you to create a linear gradient with more than two colors using the [ColorBlend](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.ColorBlend.html "Link to the Web API Reference Guide to the ColorBlend member.") object. You also need to specify the binding Rectangle as well as a transformation matrix. For more information on blending colors, see [Colors](DocumentEngine-Colors.html "Explains how to use the colors available in document engine."). +- [RadialGradientDirectBrush](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.RadialGradientDirectBrush.html "Link to the Web API Reference Guide to the RadialGradientDirectBrush member."): Same as the LinearGradientDirectBrush class but creates a radial gradient. You can also specify the center point of the gradient as well as x and y radius distances. +- [SolidColorBrush](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.SolidColorBrush.html "Link to the Web API Reference Guide to the SolidColorBrush member."): The solid color brush is the simplest form of brush available. You can set the brush's color to a Color object. +- [TextureDirectBrush](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.TextureDirectBrush.html "Link to the Web API Reference Guide to the TextureDirectBrush member."): The texture direct brush applies an image as a background, much like its indirect counterpart. The difference is that the direct form includes a transformation matrix that you can apply. + +## Brushes Class + +The [`Brushes`](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.Brushes.html "Link to the Web API Reference Guide to the Brushes member.") class is a set of predefined brushes that derive from SolidColorBrush. If all your report content needs is a grayish background, you can set the Brush property off the Background class of most layout elements to the [`Brushes.Gray`](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.Brushes~Gray.html "Link to the Web API Reference Guide to the Brushes.Gray member.") property. + +* * * * * + +The following code creates several indirect brushes and applies them to the background of Text elements. Also notice the use of the Brushes class when setting the text style of the third paragraph. Keep in mind, though, that each brush in the Brushes class is sealed and you cannot modify the color or [`BrushType`](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.BrushType.html "Link to the Web API Reference Guide to the BrushType member."). + +Use the following text to set the the `string1` variable: + +> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec imperdiet mattis sem. Nunc ornare elit at justo. In quam nulla, lobortis non, commodo eu, eleifend in, elit. Nulla eleifend. Nulla convallis. Sed eleifend auctor purus. Donec velit diam, congue quis, +> eleifend et, pretium id, tortor. Nulla semper condimentum justo. Etiam interdum odio ut ligula. Vivamus egestas scelerisque est. Donec accumsan. In est urna, vehicula non, nonummy sed, malesuada nec, purus. Vestibulum erat. Vivamus lacus enim, rhoncus nec, ornare sed, scelerisque varius, felis. Nam eu libero vel massa lobortis accumsan. Vivamus id orci. Sed sed lacus sit amet nibh pretium sollicitudin. Morbi urna. + +**In Visual Basic:** + +```vb +Imports Infragistics.Documents.Reports.Report +Imports Infragistics.Documents.Reports.Graphics +. +. +. +Dim string1 As String = "Lorem ipsum..." + +' Indirect Brushes +Dim brush1 As New LinearGradientBrush( _ + New Color(68, 115, 187), _ + Colors.White, _ + 45) +Dim brush2 As New RadialGradientBrush( _ + New Color(68, 115, 187), _ + Colors.White, _ + 45) +Dim brush3 As New TextureBrush( _ + New Image(Application.StartupPath + "..Coffee Bean.bmp")) + +' Linear gradient brush +Dim brushText As Infragistics.Documents.Reports.Report.Text.IText = section1.AddText() +brushText.Background = New Background(brush1) +brushText.Height = New RelativeHeight(33) +brushText.Borders = New Borders(New Pen(Colors.Black, 3), 5) +brushText.Margins = New Margins(5, 5) +brushText.Paddings = New Paddings(5, 5) +brushText.AddContent(string1) + +' Radial gradient brush +brushText = section1.AddText() +brushText.Background = New Background(brush2) +brushText.Height = New RelativeHeight(50) +brushText.Borders = New Borders(New Pen(Colors.Black, 3), 5) +brushText.Margins = New Margins(5, 5) +brushText.Paddings = New Paddings(5, 5) +brushText.AddContent(string1) + +' Texture brush in the background with a predefined +' solid brush on the text. +brushText = section1.AddText() +brushText.Background = New Background(brush3) +brushText.Height = New RelativeHeight(100) +brushText.Borders = New Borders(New Pen(Colors.Black, 3), 5) +brushText.Margins = New Margins(5, 5) +brushText.Paddings = New Paddings(5, 5) +brushText.Style = New Style(New Font("Verdana", 10), Brushes.White) +brushText.AddContent(string1) +``` + +**In C#:** + +```csharp +using Infragistics.Documents.Reports.Report; +using Infragistics.Documents.Reports.Graphics; +. +. +. +string string1 = "Lorem ipsum..."; + +// Indirect Brushes +LinearGradientBrush brush1 = new LinearGradientBrush( + new Color(68, 115, 187), + Colors.White, + 45); +RadialGradientBrush brush2 = new RadialGradientBrush( + new Color(68, 115, 187), + Colors.White, + 45); +TextureBrush brush3 = + new TextureBrush(new Image(Application.StartupPath + @"..Coffee Bean.bmp")); + +// Linear gradient brush +Infragistics.Documents.Reports.Report.Text.IText brushText = section1.AddText(); +brushText.Background = new Background(brush1); +brushText.Height = new RelativeHeight(33); +brushText.Borders = new Borders(new Pen(Colors.Black, 3), 5); +brushText.Margins = new Margins(5, 5); +brushText.Paddings = new Paddings(5, 5); +brushText.AddContent(string1); + +// Radial gradient brush +brushText = section1.AddText(); +brushText.Background = new Background(brush2); +brushText.Height = new RelativeHeight(50); +brushText.Borders = new Borders(new Pen(Colors.Black,3), 5); +brushText.Margins = new Margins(5, 5); +brushText.Paddings = new Paddings(5, 5); +brushText.AddContent(string1); + +// Texture brush in the background with a predefined +// solid brush on the text. +brushText = section1.AddText(); +brushText.Background = new Background(brush3); +brushText.Height = new RelativeHeight(100); +brushText.Borders = new Borders(new Pen(Colors.Black, 3), 5); +brushText.Margins = new Margins(5, 5); +brushText.Paddings = new Paddings(5, 5); +brushText.Style = new Style(new Font("Verdana", 10), Brushes.White); +brushText.AddContent(string1); +``` diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/graphics/canvas.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/graphics/canvas.mdx new file mode 100644 index 0000000000..9fb0d4b365 --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/graphics/canvas.mdx @@ -0,0 +1,289 @@ +--- +title: "Canvas" +slug: documentengine-canvas +--- + +# Canvas + +The Canvas element is a versatile painting surface. With the Canvas element, you can draw a vast amount of shapes while manipulating them in several different ways. The Canvas element exposes several standard properties, such as [Background](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.ICanvas~Background.html "Link to the Web API Reference Guide to the Background member.") , [Borders](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.ICanvas~Borders.html "Link to the Web API Reference Guide to the Borders member.") , and [Margins](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.ICanvas~Margins.html "Link to the Web API Reference Guide to the Margins member.") , that you will encounter in other layout elements. Also, the Canvas element implements the [IGraphics](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.IGraphics.html "Link to the Web API Reference Guide to the IGraphics interface.") interface, which is where the element derives its visual prowess. The IGraphics interface is very similar to the System.Drawing.Graphics object. + +![](images/DocumentEngine_Canvas_01.png) + +## Standard Layout Element Properties +The Canvas element exposes its own set of standard layout properties that are essential in positioning the canvas as a whole; but there are a few properties exposed through the IGraphics interface that affect what is actually drawn. Two important properties exposed by the IGraphics interface are [Pen](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.IGraphics~Pen.html "Link to the Web API Reference Guide to the Pen member.") and [Brush](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.IGraphics~Brush.html "Link to the Web API Reference Guide to the Brush member.") (normally exposed by the element itself). Each of these properties affects the stroke and fill of all objects created by the IGraphics interface. Another important concept to understand is that all drawings are created in a linear fashion, which means that you can change the pen and brush while drawing shapes and have the same shape with the same dimensions, but drawn differently. + +## IGraphics Interface +The IGraphics Interface is where you will be doing most of your graphics implementation in your reports. Through this interface, you can add hyperlinks anywhere on a page, draw any shape, fill and clip those shapes, and even scale, skew, or transform the shapes. + +## Hyperlinks +You can add a hyperlink area by specifying the coordinates of the upper-left corner of the area's bounding rectangle and then the rectangle's height and width. The following methods allow you to manipulate hyperlinks on the canvas: + + +| | | +| --- | --- | +| [AddHyperlinkArea](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.IGraphics~AddHyperlinkArea.html) [StartHyperlink](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.IGraphics~StartHyperlink.html) [PauseHyperlink](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.IGraphics~PauseHyperlink.html) | [ResumeHyperlink](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.IGraphics~ResumeHyperlink.html) [EndHyperlink](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.IGraphics~EndHyperlink.html) | + + +## Drawing +You can create each of the following shapes/drawings by calling their respective `Draw` method (e.g., call the `DrawRectangle` method to draw a rectangle); you only need to pass in the required Point objects to create them. Other drawing properties (such as pen and brush) are set on the Canvas element itself and affect all drawings. + + +| | | +| --- | --- | +| Arc Bezier Chord Closed Curve Curve Ellipse Image | Line Pie Polygon Rectangle Rounded Rectangle Spacing String | + + +## Filling and Clipping +You can either fill or clip regions with each of the shapes below. The Canvas will use its Brush property to fill the shapes. When using a shape to clip a region, you will only be able to see the portion of the shapes behind the clipping shape that are inside the clipping shapes' bounding rectangle. Use the shape's respective Clip or Fill method (e.g., `ClipRectangle` to form a rectangular clipping region and `FillRectangle` to fill the rectangle) to perform the respective action on the shape. + + +| | | +| --- | --- | +| Arc Bezier Chord Closed Curve Ellipse | Pie Polygon Rectangle Rounded Rectangle | + + +The following code adds a Canvas element to a section and then draws several shapes using several styles. + +1. **Add a canvas to a section.** + + **In Visual Basic:** + +```vb + Imports Infragistics.Documents.Reports.Report + Imports Infragistics.Documents.Reports.Graphics + . + . + . + ' Add a canvas to the section. + Dim canvas1 As Infragistics.Documents.Reports.Report.ICanvas = section1.AddCanvas() + canvas1.Borders = New Borders(Pens.Black, 5) + canvas1.Margins.Vertical = 5 + canvas1.Paddings.All = 5 + canvas1.Background = New Background(New SolidColorBrush(New Color(240, 240, 220))) +``` + + **In C#:** + +```csharp + using Infragistics.Documents.Reports.Report; + using Infragistics.Documents.Reports.Graphics; + . + . + . + // Add a canvas to the section. + Infragistics.Documents.Reports.Report.ICanvas canvas1 = section1.AddCanvas(); + canvas1.Borders = new Borders(Pens.Black, 5); + canvas1.Margins.Vertical = 5; + canvas1.Paddings.All = 5; + canvas1.Background = new Background(new SolidColorBrush(new Color(240, 240, 220))); +``` + +2. **Create a System.Drawing.Graphics object and create a rectangle.** + + **In Visual Basic:** + +```vb + ' Create a System Graphics object and use it + ' to draw a rectangle + canvas1.CreateGraphics().DrawRectangle( _ + System.Drawing.Pens.Green, _ + New System.Drawing.Rectangle(10, 10, 20, 20)) +``` + + **In C#:** + +```csharp + // Create a System Graphics object and use it + // to draw a rectangle + canvas1.CreateGraphics().DrawRectangle + ( + System.Drawing.Pens.Green, + new System.Drawing.Rectangle(10, 10, 20, 20) + ); +``` + +3. **Draw a rectangle.** + + **In Visual Basic:** + +```vb + ' Draw a Rectangle with a Hyperlink inside. + canvas1.StartHyperlink(1, 0, 10) + canvas1.Pen = New Pen(Colors.Red, 5) + canvas1.Brush = New SolidColorBrush(New Color(255, 240, 240)) + canvas1.DrawRectangle(50, 50, 150, 100, PaintMode.FillStroke) + canvas1.AddHyperlinkArea(50, 50, 150, 100) + canvas1.EndHyperlink() + + ' Add text to the rectangle (more accurately, overtop the rectangle). + canvas1.Font = New Font("Times New Roman", 18, FontStyle.Italic) + canvas1.Brush = Brushes.BlueViolet + canvas1.DrawString(70, 90, "Go to page 2") +``` + + **In C#:** + +```csharp + // Draw a Rectangle with a Hyperlink inside. + canvas1.StartHyperlink(1, 0, 10); + canvas1.Pen = new Pen(Colors.Red, 5); + canvas1.Brush = new SolidColorBrush(new Color(255, 240, 240)); + canvas1.DrawRectangle(50, 50, 150, 100, PaintMode.FillStroke); + canvas1.AddHyperlinkArea(50, 50, 150, 100); + canvas1.EndHyperlink(); + + // Add text to the rectangle (more accurately, overtop the rectangle). + canvas1.Font = new Font("Times New Roman", 18, FontStyle.Italic); + canvas1.Brush = Brushes.BlueViolet; + canvas1.DrawString(70, 90, "Go to page ¹2"); +``` + +4. **Draw a green slanted line.** + + **In Visual Basic:** + +```vb + ' Draw a green line 5px thick. + canvas1.Pen = New Pen(Colors.Green, 5) + canvas1.DrawLine(220, 50, 320, 150) +``` + + **In C#:** + +```csharp + // Draw a green line 5px thick. + canvas1.Pen = new Pen(Colors.Green, 5); + canvas1.DrawLine(220, 50, 320, 150); +``` + +5. **Draw an ellipse.** + + **In Visual Basic:** + +```vb + ' Draw an ellipse and outline it with a blue, 5px line + ' and fill it with a light blue color. + canvas1.Pen = New Pen(Colors.Blue, 5) + canvas1.Brush = New SolidColorBrush(New Color(240, 240, 255)) + canvas1.DrawEllipse(340, 50, 150, 100, PaintMode.FillStroke) +``` + + **In C#:** + +```csharp + // Draw an ellipse and outline it with a blue, 5px line + // and fill it with a light blue color. + canvas1.Pen = new Pen(Colors.Blue, 5); + canvas1.Brush = new SolidColorBrush(new Color(240, 240, 255)); + canvas1.DrawEllipse(340, 50, 150, 100, PaintMode.FillStroke); +``` + +6. **Change the Canvas' pen and brush style.** + + **In Visual Basic:** + +```vb + ' Change the Canvas' pen and brush. + canvas1.Pen = New Pen(Colors.DarkBlue, 5, DashStyle.DashDot) + canvas1.Brush = New LinearGradientBrush(Colors.Yellow, Colors.Green, 45.0F) +``` + + **In C#:** + +```csharp + // Change the Canvas' pen and brush. + canvas1.Pen = new Pen(Colors.DarkBlue, 5, DashStyle.DashDot); + canvas1.Brush = new LinearGradientBrush(Colors.Yellow, Colors.Green, 45F); +``` + +7. **Create a compound shape.** + + **In Visual Basic:** + +```vb + ' Because both shapes are being created as one (using + ' StartShape and EndShape), the intersection of the + ' two shapes is considered not a part of the shape + ' and not filled in. Also, the gradient will traverse + ' the entire shape, not both individually. + canvas1.StartShape(PaintMode.FillStroke) + canvas1.FillRectangle(120, 200, 200, 200) + canvas1.DrawEllipse(220, 250, 200, 200) + canvas1.EndShape() +``` + + **In C#:** + +```csharp + // Because both shapes are being created as one (using + // StartShape and EndShape), the intersection of the + // two shapes is considered not to be a part of the shape + // and not filled in. Also, the gradient will traverse + // the entire shape, not both individually. + canvas1.StartShape(PaintMode.FillStroke); + canvas1.FillRectangle(120, 200, 200, 200); + canvas1.DrawEllipse(220, 250, 200, 200); + canvas1.EndShape(); +``` + +8. **Create another rectangle.** + + **In Visual Basic:** + +```vb + ' Draw another rectangle with a different pen and brush. + canvas1.Pen = New Pen(Colors.Red, 5, DashStyle.DashDotDot) + canvas1.Brush = New HatchBrush(HatchStyle.Cross, Colors.Red, Colors.White) + canvas1.DrawRectangle(50, 500, 150, 100, PaintMode.FillStroke) +``` + + **In C#:** + +```csharp + // Draw another rectangle with a different pen and brush. + canvas1.Pen = new Pen(Colors.Red, 5, DashStyle.DashDotDot); + canvas1.Brush = new HatchBrush(HatchStyle.Cross, Colors.Red, Colors.White); + canvas1.DrawRectangle(50, 500, 150, 100, PaintMode.FillStroke); +``` + +9. **Create another line.** + + **In Visual Basic:** + +```vb + ' Draw another line, this time with a different dash style. + canvas1.Pen = New Pen(Colors.Green, 5, DashStyle.DashDot) + canvas1.DrawLine(220, 500, 320, 600) +``` + + **In C#:** + +```csharp + // Draw another line, this time with a different dash style. + canvas1.Pen = new Pen(Colors.Green, 5, DashStyle.DashDot); + canvas1.DrawLine(220, 500, 320, 600); +``` + +10. **Create another ellipse.** + + **In Visual Basic:** + +```vb + ' Draw another ellipse with a different pen and brush. + canvas1.Pen = New Pen(Colors.Blue, 5, DashStyle.Dash) + canvas1.Brush = _ + New HatchBrush(HatchStyle.DiagonalBrick, Colors.Blue, Colors.White) + canvas1.DrawEllipse(340, 500, 150, 100, PaintMode.FillStroke) +``` + + **In C#:** + +```csharp + // Draw another ellipse with a different pen and brush. + canvas1.Pen = new Pen(Colors.Blue, 5, DashStyle.Dash); + canvas1.Brush = + new HatchBrush(HatchStyle.DiagonalBrick, Colors.Blue, Colors.White); + canvas1.DrawEllipse(340, 500, 150, 100, PaintMode.FillStroke); +``` + + diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/graphics/colors.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/graphics/colors.mdx new file mode 100644 index 0000000000..2a546334a5 --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/graphics/colors.mdx @@ -0,0 +1,169 @@ +--- +title: "Colors" +slug: documentengine-colors +--- + +# Colors + +The [Color](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.Color.html "Link to the Web API Reference Guide to the Color member.") class allows you to add any RGB color to your report content with little effort. The Color class has several constructors to account for several scenarios. You can even access a [Colors](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.Colors.html "Link to the Web API Reference Guide to the Colors member.") object that contains 138 predefined colors that you can use rather than initializing a new instance of the Color class. + +Using colors starts to get interesting when creating custom color blends for [direct gradient brushes](DocumentEngine-Brushes.html "Link to the brushes topic.") with the [ColorBlend](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.ColorBlend.html "Link to the Web API Reference Guide to the ColorBlend member.") class. The ColorBlend class is a collection of colors mapped to locations on a line; otherwise known as a [ColorBlendEntry](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.ColorBlendEntry.html "Link to the Web API Reference Guide to the ColorBlendEntry member.") . Each ColorBlendEntry has a [Color](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.ColorBlendEntry~Color.html "Link to the Web API Reference Guide to the Color member.") property which can be set to a Color, and a [Position](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.ColorBlendEntry~Position.html "Link to the Web API Reference Guide to the Position member.") property which can be set to a float that represents the position along the gradient's path. The Position property accepts values on a scale from 0F to 1.0F. + +![Shows several of the colors you can use in the PDF, and is the result of the code listed below](images/DocumentEngine_Colors_01.png) + +The following code instantiates several colors through the various constructors of the Color class. The code then defines a `ColorBlend` object, a rectangle, and a direct linear gradient brush. These objects are then used to draw a rectangle on a Canvas. + +1. **Define three colors: Red, Green, and Blue.** + + **In Visual Basic:** + +```vb + Imports Infragistics.Documents.Reports.Report + Imports Infragistics.Documents.Reports.Graphics + . + . + . + ' Create a new System color + Dim red As New Color(System.Drawing.Color.Red) + ' Create a color from RGB values + Dim green As New Color(0, 255, 0) + ' Create a predefined color from the Colors class + Dim blue As Color = Colors.Blue +``` + + **In C#:** + +```csharp + using Infragistics.Documents.Reports.Report; + using Infragistics.Documents.Reports.Graphics; + . + . + . + // Create a new System color + Color red = new Color(System.Drawing.Color.Red); + // Create a color from RGB values + Color green = new Color(0, 255, 0); + // Create a predefined color from the Colors class + Color blue = Colors.Blue; +``` + +2. **Create a custom color blend.** + + **In Visual Basic:** + +```vb + ' Create a new blend of colors + Dim colorBlend As New ColorBlend() + + ' Add seven colors to the ColorBlend. Each ColorBlendEntry + ' constructor accepts a color and a float representing the + ' location on the line. + colorBlend.Add(New ColorBlendEntry(red, 0.0F)) + colorBlend.Add(New ColorBlendEntry(Colors.Orange, 0.15F)) + colorBlend.Add(New ColorBlendEntry(Colors.Yellow, 0.3F)) + colorBlend.Add(New ColorBlendEntry(green, 0.45F)) + colorBlend.Add(New ColorBlendEntry(blue, 0.6F)) + colorBlend.Add(New ColorBlendEntry(Colors.Indigo, 0.75F)) + colorBlend.Add(New ColorBlendEntry(Colors.Violet, 0.9F)) +``` + + **In C#:** + +```csharp + // Create a new blend of colors + ColorBlend colorBlend = new ColorBlend(); + + // Add seven colors to the ColorBlend. Each ColorBlendEntry + // constructor accepts a color and a float representing the + // location on the line. + colorBlend.Add(new ColorBlendEntry(red, 0F)); + colorBlend.Add(new ColorBlendEntry(Colors.Orange, .15F)); + colorBlend.Add(new ColorBlendEntry(Colors.Yellow, .3F)); + colorBlend.Add(new ColorBlendEntry(green, .45F)); + colorBlend.Add(new ColorBlendEntry(blue, .60F)); + colorBlend.Add(new ColorBlendEntry(Colors.Indigo, .75F)); + colorBlend.Add(new ColorBlendEntry(Colors.Violet, .9F)); +``` + +3. **Define a Rectangle.** + + **In Visual Basic:** + +```vb + ' Create a rectangle that will bind the linear gradient. + Dim rect As New Rectangle(New Point(0, 100), New Size(600, 200)) +``` + + **In C#:** + +```csharp + // Create a rectangle that will bind the linear gradient. + Rectangle rect = new Rectangle(new Point(0,100), new Size(600, 200)); +``` + +4. **Define a LinearGradientDirectBrush.** + + **In Visual Basic:** + +```vb + ' Create a direct linear gradient brush that uses the ColorBlend. + Dim linearDirect As New LinearGradientDirectBrush( _ + colorBlend, rect, New Matrix()) +``` + + **In C#:** + +```csharp + // Create a direct linear gradient brush that uses the ColorBlend. + LinearGradientDirectBrush linearDirect = + new LinearGradientDirectBrush(colorBlend, rect, new Matrix()); +``` + +5. **Create a canvas and draw the rectangle.** + + **In Visual Basic:** + +```vb + Dim canvas As ICanvas = section1.AddCanvas() + + ' Set a few properties on the canvas to help is stand out more. + canvas.Height = New RelativeHeight(100) + canvas.Width = New RelativeWidth(100) + canvas.Borders = New Borders(New Pen(Colors.Black, 3), 5) + canvas.Background = New Background(Brushes.GhostWhite) + + ' If the PaintMode is Fill, the canvas' brush is used; + ' if the PaintMode is Stroke, the pen is used. FillStroke + ' is a combination of both. + canvas.Pen = New Pen(Colors.Black) + ' Set the canvas' brush to the direct linear gradient + ' created earlier. + canvas.Brush = linearDirect + + ' Draw the rectangle. + canvas.DrawRectangle(0, 100, 600, 200, PaintMode.Fill) +``` + + **In C#:** + +```csharp + // Add a canvas to the section. + ICanvas canvas = section1.AddCanvas(); + + // Set a few properties on the canvas to help it stand out more. + canvas.Height = new RelativeHeight(100); + canvas.Width = new RelativeWidth(100); + canvas.Borders = new Borders(new Pen(Colors.Black, 3), 5); + canvas.Background = new Background(Brushes.GhostWhite); + + // If the PaintMode is Fill, the canvas' brush is used; + // if the PaintMode is Stroke, the pen is used. FillStroke + // is a combination of both. + canvas.Pen = new Pen(Colors.Black); + // Set the canvas' brush to the direct linear gradient + // created earlier. + canvas.Brush = linearDirect; + + // Draw the rectangle. + canvas.DrawRectangle(0, 100, 600, 200, PaintMode.Fill); +``` \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/graphics/fonts.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/graphics/fonts.mdx new file mode 100644 index 0000000000..cb98ae32ae --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/graphics/fonts.mdx @@ -0,0 +1,111 @@ +--- +title: "Fonts" +slug: documentengine-fonts +--- + +# Fonts + +You can't write a report without text, so fonts will be an integral part of your report-writing experience. Of course, you could use all default settings for your text, but those defaults still use fonts (default font is Arial, 12 pt.). All you need in order to define a font is the name and size. There are several overloads for the [`Font`](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.Font~_ctor.html "Link to the Web API Reference Guide to the Font member.") constructor that also give you other options when defining fonts such as [FontStyle](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.FontStyle.html "Link to the Web API Reference Guide to the FontStyle member.") and location of the font (if it's not in the system's Fonts folder). There are a number of styles that you can add to your fonts through properties; for example: + +- [Bold](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.Font~Bold.html "Link to the Web API Reference Guide to the Bold member.") +- [Double Strikeout](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.Font~DoubleStrikeout.html "Link to the Web API Reference Guide to the Double Strikeout member.") +- [Double Underline](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.Font~DoubleUnderline.html "Link to the Web API Reference Guide to the Double Underline member.") +- [Italic](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.Font~Italic.html "Link to the Web API Reference Guide to the Double Underline member.") +- [Strikeout](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.Font~Strikeout.html "Link to the Web API Reference Guide to the Strikeout member.") +- [Underline](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.Font~Underline.html "Link to the Web API Reference Guide to the Underline member.") + +Each of these styles is also available in the FontStyle enumeration, which is used when setting the [Style](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.Font~Style.html "Link to the Web API Reference Guide to the Style member.") property. You can also access a collection of predefined fonts and styles using the [Fonts](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.Fonts.html "Link to the Web API Reference Guide to the Fonts member.") class. Keep in mind, though, that each font in the Fonts class is sealed and you cannot modify the style (e.g., add Bold or Underline). + +![Shows several of the fonts available for use in PDFs, and is the results of the code listed below.](images/DocumentEngine_Fonts_01.png) + +* * * * * + +The example code below demonstrates a few common uses of the Font object by defining two fonts and using them in Text elements. + +1. **Define the Font objects.** + + **In Visual Basic:** + +```vb + Imports Infragistics.Documents.Reports.Report + Imports Infragistics.Documents.Reports.Graphics + . + . + . + ' Define two font objects. + Dim verdanaBigItalic As New Font("Verdana", 18, FontStyle.Italic) + Dim verdanaSmallBold As New Font("Verdana", 10, FontStyle.Bold) +``` + + **In C#:** + +```csharp + using Infragistics.Documents.Reports.Report; + using Infragistics.Documents.Reports.Graphics; + . + . + . + // Define two font objects. + Font verdanaBigItalic = new Font("Verdana", 18, FontStyle.Italic); + Font verdanaSmallBold = new Font("Verdana", 10, FontStyle.Bold); +``` + +2. **Add three Text elements to the main section (section1) and set their styles.** + + **In Visual Basic:** + +```vb + ' Add a new Text element to the section and store the + ' reference fontText. Then set the style using the font + ' created earlier and use a black brush. + Dim fontText As Infragistics.Documents.Reports.Report.Text.IText = section1.AddText() + fontText.Margins = New Margins(0, 3) + fontText.Style = _ + New Infragistics.Documents.Reports.Report.Text.Style(verdanaBigItalic, Brushes.Black) + fontText.AddContent("This font is Verdana, 18 pt., and Italic") + + ' Add another text element. + fontText = section1.AddText() + fontText.Margins = New Margins(0, 3) + fontText.Style = _ + New Infragistics.Documents.Reports.Report.Text.Style(verdanaSmallBold, Brushes.Black) + fontText.AddContent("This font is Verdana, 10 pt., and Bold") + + ' Add another text element; this time using a predefined font + ' and changing the color to red. + fontText = section1.AddText() + fontText.Margins = New Margins(0, 3) + fontText.Style = _ + New Infragistics.Documents.Reports.Report.Text.Style( _ + Fonts.TimesNewRomanBold, Brushes.Red) + fontText.AddContent("This font is a predefined font: Fonts.TimesNewRomanBold") +``` + + **In C#:** + +```csharp + // Add a new Text element to the section and store the + // reference fontText. Then set the style using the font + // created earlier and use a black brush. + Infragistics.Documents.Reports.Report.Text.IText fontText = section1.AddText(); + fontText.Margins = new Margins(0, 3); + fontText.Style = + new Infragistics.Documents.Reports.Report.Text.Style(verdanaBigItalic, Brushes.Black); + fontText.AddContent("This font is Verdana, 18 pt., and Italic"); + + // Add another text element. + fontText = section1.AddText(); + fontText.Margins = new Margins(0, 3); + fontText.Style = + new Infragistics.Documents.Reports.Report.Text.Style(verdanaSmallBold, Brushes.Black); + fontText.AddContent("This font is Verdana, 10 pt., and Bold"); + + // Add another text element; this time using a predefined font + // and changing the color to red. + fontText = section1.AddText(); + fontText.Margins = new Margins(0, 3); + fontText.Style = + new Infragistics.Documents.Reports.Report.Text.Style( + Fonts.TimesNewRomanBold, Brushes.Red); + fontText.AddContent("This font is a predefined font: Fonts.TimesNewRomanBold"); +``` \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/graphics/images/DocumentEngine_Brushes_01.png b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/graphics/images/DocumentEngine_Brushes_01.png new file mode 100644 index 0000000000..ce6c1edb9b Binary files /dev/null and b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/graphics/images/DocumentEngine_Brushes_01.png differ diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/graphics/images/DocumentEngine_Canvas_01.png b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/graphics/images/DocumentEngine_Canvas_01.png new file mode 100644 index 0000000000..14d1bf231a Binary files /dev/null and b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/graphics/images/DocumentEngine_Canvas_01.png differ diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/graphics/images/DocumentEngine_Colors_01.png b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/graphics/images/DocumentEngine_Colors_01.png new file mode 100644 index 0000000000..c263863ada Binary files /dev/null and b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/graphics/images/DocumentEngine_Colors_01.png differ diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/graphics/images/DocumentEngine_Fonts_01.png b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/graphics/images/DocumentEngine_Fonts_01.png new file mode 100644 index 0000000000..51998c5dc5 Binary files /dev/null and b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/graphics/images/DocumentEngine_Fonts_01.png differ diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/graphics/images/DocumentEngine_Pens_01.png b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/graphics/images/DocumentEngine_Pens_01.png new file mode 100644 index 0000000000..fc7942c64e Binary files /dev/null and b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/graphics/images/DocumentEngine_Pens_01.png differ diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/graphics/images/DocumentEngine_Shapes_01.png b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/graphics/images/DocumentEngine_Shapes_01.png new file mode 100644 index 0000000000..d919ffaf4f Binary files /dev/null and b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/graphics/images/DocumentEngine_Shapes_01.png differ diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/graphics/pens.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/graphics/pens.mdx new file mode 100644 index 0000000000..8e79530b7a --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/graphics/pens.mdx @@ -0,0 +1,66 @@ +--- +title: "Pens" +slug: documentengine-pens +--- + +# Pens + +Pens are used to define the characteristics of lines. You will find lines in several aspects of the Infragistics Document Engine™ including Borders, Shapes, Rectangles, and several shapes drawn by the Canvas element. Some of the line characteristics that a pen can manipulate are: + +- Color +- Width +- Dash Style +- Line Cap +- Line Join +- Miter Limit + +You can also use the [Pens](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.Pens.html "Link to the Web API Reference Guide to the Pens member.") class, a collection of predefined pens, to quickly add a colored pen with default style attributes to a line. Each pen in the Pens class is a solid pen with a width of 1px. ![Shows how you can use Pens to draw borders around a text element, and is the result of the code listed below.](images/DocumentEngine_Pens_01.png) + + +Use the following code to define two Pen objects and use them to draw the borders of a Text element. The third Text element uses a predefined pen to draw its borders. + +Use the following text to set the the `string1` variable: + +> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec imperdiet mattis sem. Nunc ornare elit at justo. In quam nulla, lobortis non, commodo eu, eleifend in, elit. Nulla eleifend. Nulla convallis. Sed eleifend auctor purus. Donec velit diam, congue quis, eleifend et, pretium id, tortor. Nulla semper condimentum justo. Etiam interdum odio ut ligula. Vivamus egestas scelerisque est. Donec accumsan. In est urna, vehicula non, nonummy sed, malesuada nec, purus. Vestibulum erat. Vivamus lacus enim, rhoncus nec, ornare sed, scelerisque varius, felis. Nam eu libero vel massa lobortis accumsan. Vivamus id orci. Sed sed lacus sit amet nibh pretium sollicitudin. Morbi urna. + +**In C#:** + +```csharp +using Infragistics.Documents.Reports.Report; +using Infragistics.Documents.Reports.Graphics; +. +. +. +string string1 = "Lorem ipsum..."; + +// Define two Pen objects +Pen pen1 = new Pen(Colors.Black, 3, DashStyle.Solid); +Pen pen2 = new Pen(Colors.Red, 5, DashStyle.Dot); + +// The pen used for the border in this Text element +// will be solid, black, 3px. +Infragistics.Documents.Reports.Report.Text.IText penText1 = section1.AddText(); +penText1.Paddings = new Paddings(3, 3); +penText1.Margins = new Margins(3, 3); +penText1.Borders = new Borders(pen1); +penText1.Background = new Background(Brushes.WhiteSmoke); +penText1.AddContent(string1); + +// The pen used for the border in this Text element +// will be dotted, red, 5px. +penText1 = section1.AddText(); +penText1.Paddings = new Paddings(3, 3); +penText1.Margins = new Margins(3, 3); +penText1.Borders = new Borders(pen2); +penText1.Background = new Background(Brushes.WhiteSmoke); +penText1.AddContent(string1); + +// The pen used for the border in this Text element +// is a predefined, green pen. +penText1 = section1.AddText(); +penText1.Paddings = new Paddings(3, 3); +penText1.Margins = new Margins(3, 3); +penText1.Borders = new Borders(Pens.Green); +penText1.Background = new Background(Brushes.WhiteSmoke); +penText1.AddContent(string1); +``` \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/graphics/report-graphics.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/graphics/report-graphics.mdx new file mode 100644 index 0000000000..10eec15d42 --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/graphics/report-graphics.mdx @@ -0,0 +1,23 @@ +--- +title: "Report Graphics" +slug: documentengine-report-graphics +--- + +# Report Graphics + +Report graphics give omph to your reports through several graphical elements such as Brushes, Colors, Fonts, and Images. Use report graphics to augment layout elements. For example, use a brush and pen to color the background and borders of an element, respectively. You can also add color and modify fonts on [pattern content](DocumentEngine-Pattern-Content.html "Explains the available pattern content items available in the document engine.") such as Tables, Lists, and Text. Any layout or content element can by affected by report graphics in some way or another. + +Click the links below to learn more about report graphics. + +- [Brushes](DocumentEngine-Brushes.html "Discusses the brushes available in the document engine.") +- [Canvas](DocumentEngine-Canvas.html "Discusses the canvases available in the document engine.") +- [Colors](DocumentEngine-Colors.html "Discusses the colors available in the document engine.") +- [Fonts](DocumentEngine-Fonts.html "Discusses the fonts available in the document engine.") +- [Pens](DocumentEngine-Pens.html "Discusses the pens available in the document engine.") +- [Shapes](DocumentEngine-Shapes.html "Discusses the shapes available in the document engine.") + + + + + + diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/graphics/shapes.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/graphics/shapes.mdx new file mode 100644 index 0000000000..c5572285c5 --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/graphics/shapes.mdx @@ -0,0 +1,208 @@ +--- +title: "Shapes" +slug: documentengine-shapes +--- + +# Shapes +The Site element is an intriguing element that can place objects anywhere in its binding rectangle as well as rotate them. Another feature that makes the Site element very useful is the [Shapes](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Shapes.IShapes.html "Link to the Web API Reference Guide to the IShapes interface.") factory. Just as the name implies, the Shapes factory allows you to produce numerous kinds of shapes and add them to the Site element. + +You can easily access each shape off the Shapes object by calling a method specific to that shape (e.g., to add a rectangle, call the [AddRetangle](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Shapes.IShapes~AddRectangle.html "Link to the Web API Reference Guide to the AddRectangle member.") method). The method will return a reference to the newly created shape and you can set that reference to a new shape object. + +Below is a list of the shapes you can add to the Site element. + +* **Arc** -- Provide the arc with a start and end angle, and the arc does the rest. You can specify the height and width of the bounding rectangle, as well as the x- and y-coordinates of the upper-left corner. +* **Ellipse** -- The ellipse is created in much the same way as a rectangle. Provide the height and width of the bounding rectangle as well as the x- and y-coordinates to determine the size and location. The ellipse will then be based on the rectangle and automatically formed. +* **Label** -- You can specify the x- and y-coordinates of the upper-left corner of the font’s bounding rectangle in order to place it on the site. Once the [Font](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Shapes.ILabel~Font.html "Link to the Web API Reference Guide to the Font member.") and [Text](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Shapes.ILabel~Text.html "Link to the Web API Reference Guide to the Text member.") properties are set, the size of the rectangle is automatically determined. +* **Line** -- The line has X1 and Y1 coordinates to determine the starting point of the line, and X2 and Y2 coordinates to determine the ending point. You can also specify a brush to modify the appearance of the line. +* **Path** -- The path has a few methods that are helpful in creating completely custom shapes. You can think of a path as moving a pen across a piece of paper in a particular direction. + * **Move To** -- The [MoveTo](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Shapes.IPath~MoveTo.html "Link to the Web API Reference Guide to the MoveTo member.") method moves the active point to the specified coordinates; it doesn't actually draw anything. In the pen and paper analogy, this would be the equivalent of removing the pen from the paper, moving the pen to the new point, and placing the pen back on the paper without drawing a single line. + * **Line To** -- The [LineTo](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Shapes.IPath~LineTo.html "Link to the Web API Reference Guide to the LineTo member.") method draws a line from the starting coordinates to the ending coordinates. + * **Curve To** -- The [CurveTo](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Shapes.IPath~CurveTo.html "Link to the Web API Reference Guide to the CurveTo member.") method draws a line from a starting coordinate, uses a middle coordinate to create the curve, and ends on the ending coordinate. + * **Close Path** -- You can manually close the path with the [ClosePath](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Shapes.IPath~ClosePath.html "Link to the Web API Reference Guide to the ClosePath member.") method. + + Each method you call will generally pass the ending coordinates of the previous method as the starting coordinates of the currently being called method; this creates a continuous path and eventually defines the shape. You can also specify a brush to fill the path, and a pen to draw the path. + +* **Pie** -- The pie is very similar to the arc in that you need to supply starting and ending angles. The difference between the pie and arc is that the arc simply creates a curve, whereas the pie creates an entire pie or a slice of the pie. +* **Polygon** -- You can create polygons with as many sides as needed with the [Polygon](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Shapes.IPolygon.html "Link to the Web API Reference Guide to the IPolygon interface.") shape. Set the [Points](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Shapes.IPolygon~Points.html "Link to the Web API Reference Guide to the Points member.") property to an array of [Point](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.Point.html "Link to the Web API Reference Guide to the Point member.") objects in order to define the polygon. The polygon will be drawn in the order that you provide points, so be careful when providing points and draw them consecutively, similar to tracing an outline. +* **Polyline** -- The polyline is very similar to the polygon in that you also provide an array of Point objects for the line to follow. +* **Rectangle** -- Provide the height and width of the bounding rectangle as well as the x- and y-coordinates to determine size and location. You can also specify a brush to fill the rectangle, and a pen to draw the outline. The [Radius](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Shapes.IRectangle~Radius.html "Link to the Web API Reference Guide to the Radius member.") property allows you to round the corners of the rectangle. + +![](images/DocumentEngine_Shapes_01.png) + +The following code adds a rectangle, ellipse, polygon, pie, and path to a Site element. This topic assumes that you have defined a Report element and have at least one Section element added to it. For more information, see [Report](DocumentEngine-Report.html "Explains the report object available in document engine.") and [Section](DocumentEngine-Section.html "Explains the section element in document engine."). + +1. **Add a Site element to a section.** + + **In C#:** + +```csharp + using Infragistics.Documents.Reports.Report; + using Infragistics.Documents.Reports.Graphics; + . + . + . + // Add a new Site element to the section. + Infragistics.Documents.Reports.Report.ISite shapesSite = section1.AddSite(); +``` + +2. **Add a Rectangle to the Site element.** + + **In C#:** + +```csharp + // Add a new Rectangle to the Site's shape factory. + Infragistics.Documents.Reports.Report.Shapes.IRectangle rectangle = shapesSite.Shapes.AddRectangle(); + // Fill the rectangle with the color green. + rectangle.Brush = Brushes.Green; + // The outline of the rectangle will be black. + rectangle.Pen = Pens.Black; + // Set the height and width of the rectangle. + rectangle.Height = 100; + rectangle.Width = 400; + // Round the corners of the rectangle. + rectangle.Radius = 5; + // Place the rectangle on the Site at the coordinates 0,0. + // This will place the rectangle's upper-left point here. + // The same goes for all other binding rectangles of shapes. + rectangle.X = 0; + rectangle.Y = 0; +``` + +3. **Add an Ellipse to the Site element.** + + **In C#:** + +```csharp + // Add a new Ellipse to the Site's shape factory. + Infragistics.Documents.Reports.Report.Shapes.IEllipse ellipse = shapesSite.Shapes.AddEllipse(); + // Fill the ellipse with the color red and color the + // borders black. + ellipse.Brush = Brushes.Red; + ellipse.Pen = Pens.Black; + // Set the height and the width of the binding rectangle. + ellipse.Height = 100; + ellipse.Width = 400; + // Place the ellipse's binding rectangle's upper-left + // corner at the coordinates 0,150. + ellipse.X = 0; + ellipse.Y = 150; +``` + +4. **Add a six-sided polygon (hexagon) to the Site element.** + + **In C#:** + +```csharp + // Add a new Polygon to the Site's shape factory. + Infragistics.Documents.Reports.Report.Shapes.IPolygon polygon = shapesSite.Shapes.AddPolygon(); + // Fill the polygon with the color blye and color the + // borders black. + polygon.Brush = Brushes.Blue; + polygon.Pen = Pens.Black; + // Create a six-sided polygon (hexagon) by supplying + // six points. The polygon will be drawn from each + // point consecutively, so make sure you draw the + // border in the correct order (draw an outline). + polygon.Points = new Point[6] + { + new Point(0,325), + new Point(200, 300), + new Point(400, 325), + new Point(400, 375), + new Point(200, 400), + new Point(0,375) + }; +``` + +5. **Add a Pie (Pac-man) to the Site element.** + + **In C#:** + +```csharp + // Add a new Pie to the Site's shape factory. + Infragistics.Documents.Reports.Report.Shapes.IPie pie = shapesSite.Shapes.AddPie(); + // Fill the pie with the color yellow and color the + // border black. + pie.Brush = Brushes.Yellow; + pie.Pen = Pens.Black; + // Begin the Pie at a 45 degree angle and end it at + // a 325 degree angle. + pie.StartAngle = 45; + pie.EndAngle = 325; + // Set the height and width of the pie. + pie.Height = 100; + pie.Width = 100; + // Place the upper-left corner of the pie's binding + // rectangle at coordinates 0,450. + pie.X = 0; + pie.Y = 450; + + // Give Pacman an eye. + Infragistics.Documents.Reports.Report.Shapes.IEllipse ellipse2 = shapesSite.Shapes.AddEllipse(); + ellipse2.Height = 10; + ellipse2.Width = 10; + ellipse2.Brush = Brushes.Black; + ellipse2.X = 45; + ellipse2.Y = 465; +``` + +6. **Add a Path (Pinky) to the Site element.** + + **In C#:** + +```csharp + // Add a path to the Site element. + Infragistics.Documents.Reports.Report.Shapes.IPath path = shapesSite.Shapes.AddPath(); + // The inside of the path will be pink while the + // path itself is drawn black. + path.Brush = Brushes.Pink; + path.Pen = Pens.Black; + // Start the path at these coordinates. + path.MoveTo(200, 535); + // draw a line to these coordinates. + path.LineTo(200, 500); + // Curve from the previous coordinates to 250, 450. + path.CurveTo(200, 500, 200, 450, 250, 450); + // Curve from the previous coordinates to 300, 500. + path.CurveTo(250, 450, 300, 450, 300, 500); + // Draw several lines. + path.LineTo(300, 535); + path.LineTo(280, 550); + path.LineTo(270, 535); + path.LineTo(260, 550); + path.LineTo(250, 535); + path.LineTo(240, 550); + path.LineTo(230, 535); + path.LineTo(220, 550); + path.LineTo(200, 535); + + // Give pinky a left eye. + Infragistics.Documents.Reports.Report.Shapes.IEllipse ellipse3 = shapesSite.Shapes.AddEllipse(); + ellipse3.Brush = Brushes.White; + ellipse3.Height = 15; + ellipse3.Width = 10; + ellipse3.X = 225; + ellipse3.Y = 475; + + ellipse3 = shapesSite.Shapes.AddEllipse(); + ellipse3.Brush = Brushes.Blue; + ellipse3.Height = 5; + ellipse3.Width = 5; + ellipse3.X = 225; + ellipse3.Y = 480; + + // give pinky a right eye. + Infragistics.Documents.Reports.Report.Shapes.IEllipse ellipse4 = shapesSite.Shapes.AddEllipse(); + ellipse4.Brush = Brushes.White; + ellipse4.Height = 15; + ellipse4.Width = 10; + ellipse4.X = 260; + ellipse4.Y = 475; + + ellipse4 = shapesSite.Shapes.AddEllipse(); + ellipse4.Brush = Brushes.Blue; + ellipse4.Height = 5; + ellipse4.Width = 5; + ellipse4.X = 260; + ellipse4.Y = 480; +``` \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/reports.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/reports.mdx new file mode 100644 index 0000000000..4bb18de130 --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/document-engine/writing/reports.mdx @@ -0,0 +1,19 @@ +--- +title: "Writing Reports" +slug: documentengine-writing-reports +--- + +# Writing Reports + +When writing reports, there are two main types of elements that you will use. The first type, layout and content elements, allow you to set up your report's logical flow and add whatever content you need to it. The second type of element is the graphical element. Graphic elements are more like support elements; they augment your report by adding color, shapes, and fonts. + +Click the links below to explore the different elements that you can use to design your report. + +- [Report Elements](DocumentEngine-Report-Elements.html "Explains the different elements that can be used in reports created with the document engine.") +- [Report Graphics](DocumentEngine-Report-Graphics.html "Explains the styling that's available for reports created with the document engine.") + + + + + + diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/api-overview.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/api-overview.mdx new file mode 100644 index 0000000000..329b93072e --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/api-overview.mdx @@ -0,0 +1,19 @@ +--- +title: "API Overview" +slug: excelengine-api-overview +--- + +# API Overview +This section lists each namespace that is relevant to the code library. We also give you several key classes that you will be using while programming with this code library. The namespaces and classes on this page link directly into our API documentation. + + +| | | +| --- | --- | +| Infragistics Excel Engine Namespace: [Infragistics.Documents.Excel](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel_namespace.html) | Key Classes: [Workbook](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.Workbook.html) [DocumentProperties](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.DocumentProperties.html) [WorkbookWindowOptions](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.WorkbookWindowOptions.html) [Worksheet](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.Worksheet.html) [WorksheetRow](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.WorksheetRow.html) [WorksheetColumn](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.WorksheetColumn.html) [WorksheetCell](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.WorksheetCell.html) | + + + + + + + diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/deploying-the-infragistics-excel-engine.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/deploying-the-infragistics-excel-engine.mdx new file mode 100644 index 0000000000..616e0100f1 --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/deploying-the-infragistics-excel-engine.mdx @@ -0,0 +1,22 @@ +--- +title: "Deploying the Infragistics Excel Engine" +slug: excelengine-deploying-the-infragistics-excel-engine +--- + +# Deploying the Infragistics Excel Engine + +When deploying a .NET application, you must distribute certain files in addition to your executable. If your application contains one or more Infragistics elements, you will have to distribute or deploy one or more Infragistics assembly files as part of your application. This topic outlines the files that you must re-distribute. + +> **Note:** Any files not specifically covered by this topic should be considered non-redistributable. Files that are included with your Infragistics product but not listed here are not licensed for distribution, and should not be copied to, moved to, or shared with any machine other than the one on which the licensed Infragistics product is installed. + +In order to deploy your application, you will have to re-distribute the following file: + + Infragistics.Web.Documents.Excel.dll + +This is the .NET Assembly containing the Infragistics Excel Engine™ code library. + + + + + + diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/understanding/excel-object-model.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/understanding/excel-object-model.mdx new file mode 100644 index 0000000000..b12e1d411c --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/understanding/excel-object-model.mdx @@ -0,0 +1,35 @@ +--- +title: "Excel Object Model" +slug: excelengine-excel-object-model +--- + +# Excel Object Model + +## Workbook +The root of the Infragistics.Documents.Excel assembly is the [Workbook](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.Workbook.html "Link to the Web API Reference Guide to the Workbook member.") object. Without a Workbook instance, no other information can be written out as a Microsoft® Excel® file. A workbook contains a collection of worksheets, and each worksheet holds a grid of data in cells. In addition, the Workbook contains global settings and collections of custom views, named references, and styles. The global settings on the Workbook are options that affect a workbook as a whole, such as the author of the document, or whether the workbook's child MDI window is minimized when the workbook is opened in Excel. These options include the primitive properties defined directly on the Workbook object and the [DocumentProperties](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.Workbook~DocumentProperties.html "Link to the Web API Reference Guide to the DocumentProperties member.") and [WindowOptions](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.Workbook~WindowOptions.html "Link to the Web API Reference Guide to the WindowOptions member.") properties of the Workbook. Most of the primitive properties exposed off the Workbook control various formula calculation options. + +## DocumentProperties +The DocumentProperties of the workbook are the properties that can be viewed by right-clicking the workbook's XLS file and viewing the properties. These include various tags that describe the content of the workbook such as the author, title, and subject of the workbook. This information can also be edited in certain versions of Excel. + +## WorkbookWindowOptions +The [WorkbookWindowOptions](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.WorkbookWindowOptions.html "Link to the Web API Reference Guide to the WorkbookWindowOptions member.") class controls various display options that are not specific to worksheets, as well as various aspects of the workbook's child MDI window when it is opened in Excel. The display options control many visual elements that will not change when switching to different worksheets, such as which scroll bars are visible, whether or not the worksheet tab bar is visible, and which tab is first visible in the tab bar. + +The options that control the child window include the bounds of the child window with respect to the MDI parent and whether or not the window is minimized when it is opened. Certain window options, such as whether the formula bar or status bar is visible or whether the workbook's child window is maximized, cannot be controlled with the WorkbookWindowOptions class because these properties are system-wide and saved by Excel in the registry. However, these options can be controlled by the WindowOptions property of a [CustomView](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.CustomView.html "Link to the Web API Reference Guide to the CustomView member.") , which is similar to WorkbookWindowOptions. In addition to the other options, the WorkbookWindowOptions class has a property which indicates the selected worksheet in the workbook. + +## Worksheet +Worksheets fill workbooks. A workbook must have at least one worksheet visible at all times. The worksheet contains the actual data in a workbook, as each worksheet holds a grid of cells and each cell can hold a form of data. Aside from the collections and complex properties on the Worksheet, the [Worksheet](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.Worksheet.html "Link to the Web API Reference Guide to the Worksheet member.") object includes properties to change its default row and column sizes, its image background (tiled across the worksheet), and its name. + +## WorksheetRow +One of the most important objects exposed by the Worksheet is the WorksheetRow. Each row in a worksheet is represented by a [WorksheetRow](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.WorksheetRow.html "Link to the Web API Reference Guide to the WorksheetRow member.") object. Through a WorksheetRow instance, its corresponding row in the worksheet can be manipulated. In addition, each cell in a row is represented by a [WorksheetCell](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.WorksheetCell.html "Link to the Web API Reference Guide to the WorksheetCell member.") instance, which is contained in a collection owned by the WorksheetRow. To access any WorksheetCell, you must go through its parent WorksheetRow. A collection of WorksheetCell instances is not owned by the [WorksheetColumn](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.WorksheetColumn.html "Link to the Web API Reference Guide to the WorksheetColumn member.") , only because it would be redundant to maintain each WorksheetCell instance in a collection off its parent row and a collection off its parent column. In addition to each cell and their default cell format, the row's height, visibility, and outline level can also be customized with the WorksheetRow instance. + +## WorksheetColumn +Unlike the WorksheetRow, the WorksheetColumn does not contain a collection of cells, even though a column in a worksheet "contains" the cells under it. This is just because the cells can be accessed from the WorksheetRow instance to which the cell belongs. It is redundant to also make the cells accessible from the WorksheetColumn. Through a WorksheetColumn instance, you can customize the column's default cell format, width, visibility, and outline level. + +## WorksheetCell +A worksheet is a grid of cells. Each cell is represented by a WorksheetCell instance. You can set a cell's value and format using the WorksheetCell object. The value of the cell is what displays in the cell when the workbook is opened in Excel. A cell's value can also be used by formulas to calculate other cells' values. + + + + + + diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/understanding/supported-versions-of-microsoft-excel.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/understanding/supported-versions-of-microsoft-excel.mdx new file mode 100644 index 0000000000..6e9ce6d162 --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/understanding/supported-versions-of-microsoft-excel.mdx @@ -0,0 +1,19 @@ +--- +title: "Supported Versions of Microsoft Excel" +slug: excelengine-supported-versions-of-microsoft-excel +--- + +# Supported Versions of Microsoft Excel + +The Infragistics Excel Engine™ is capable of saving and reading Microsoft® Excel® files using the below formats. + + +|File Formats | Enumeration | Notes +|--------------------------------------|---------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| +|Excel 97-2003 Workbook (*.xls) | Infragistics.Documents.Excel.WorkbookFormat.Excel97To2003 | Uses BIFF8 format. | +|Excel 97-2003 Template (*.xlt) | Infragistics.Documents.Excel.WorkbookFormat.Excel97To2003Template | Uses BIFF8 format. | +|Excel Workbook (*.xlsx) | Infragistics.Documents.Excel.WorkbookFormat.Excel2007 | | +|Excel Macro-Enabled Workbook (*.xlsm) | Infragistics.Documents.Excel.WorkbookFormat.Excel2007MacroEnabled | The Infragistics Excel engine does not support creating, parsing nor executing macros. If there are modules in a file that is loaded those will be included in the output when it is saved. | +|Excel Template (*.xltx) | Infragistics.Documents.Excel.WorkbookFormat.Excel2007Template | | +|Excel Macro-Enabled Template (*.xltm) | Infragistics.Documents.Excel.WorkbookFormat.Excel2007MacroEnabledTemplate | The Infragistics Excel engine does not support creating, parsing nor executing macros. If there are modules in a file that is loaded those will be included in the output when it is saved. | +|Strict Open XML Spreadsheet (*.xlsx) | Infragistics.Documents.Excel.WorkbookFormat.StrictOpenXml | The Strict Open XML file format (ISO/IEC 29500 Strict). | diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/understanding/the-infragistics-excel-engine.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/understanding/the-infragistics-excel-engine.mdx new file mode 100644 index 0000000000..ead1751ba1 --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/understanding/the-infragistics-excel-engine.mdx @@ -0,0 +1,14 @@ +--- +title: "Understanding the Infragistics Excel Engine" +slug: excelengine-understanding-the-infragistics-excel-engine +--- + +# Understanding the Infragistics Excel Engine + +This is a great place for you to start learning about the Infragistics Excel Engine, and its key features and functionalities. The topics in this section will give you a better idea of why you would want to use the Excel Engine in your applications. + +Click the links below to gain an overview of the Excel Engine. + +- [Excel Object Model](/excelengine-excel-object-model.mdx) +- [Supported Versions of Microsoft Excel](/excelengine-supported-versions-of-microsoft-excel.mdx) +- [Office 2007 XLSX file generation references and dependencies](/using/excelengine-office-2007-xlsx-file-generation-references-and-dependencies.mdx) diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/accessing-cells-and-regions-by-their-reference-strings.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/accessing-cells-and-regions-by-their-reference-strings.mdx new file mode 100644 index 0000000000..661f5db9a9 --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/accessing-cells-and-regions-by-their-reference-strings.mdx @@ -0,0 +1,36 @@ +--- +title: "Accessing Cells and Regions by their Reference Strings" +slug: excelengine-accessing-cells-and-regions-by-their-reference-strings +--- + +# Accessing Cells and Regions by their Reference Strings + +This topic will familiarize you on how to access cells and ranges within a worksheet in an Excel® Workbook. The [`GetCell`](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.Worksheet~GetCell.html "Link to the Web API Reference Guide to the GetCell member.") and [`GetRegion`](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.Worksheet~GetRegion.html "Link to the Web API Reference Guide to the GetRegion member.") method of the Worksheet class accepts cell reference strings as a parameter. + +In the following example code a Worksheet cell is accessed by the GetCell method and an Excel formula is applied to it. Similarly an Excel formula is applied to a range of cells within the worksheet. + +**In Visual Basic:** + + +```vb +'Accessing a single cell +worksheet.GetCell ("C5").ApplyFormula ("=A5*B5") +'Accessing a range of cells + worksheet.GetRegion ("G1:G10").ApplyFormula ("=E1*F1") +``` + +**In C#:** + + +```csharp +//Accessing a single cell +worksheet.GetCell ("C5").ApplyFormula ("=A5*B5"); +//Accessing a range of cells + worksheet.GetRegion ("G1:G10").ApplyFormula ("=E1*F1"); +``` + + + + + + diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/add-an-image-to-a-worksheet.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/add-an-image-to-a-worksheet.mdx new file mode 100644 index 0000000000..78a718e193 --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/add-an-image-to-a-worksheet.mdx @@ -0,0 +1,78 @@ +--- +title: "Add an Image to a Worksheet" +slug: excelengine-add-an-image-to-a-worksheet +--- + +# Add an Image to a Worksheet + +Microsoft® Excel® allows images and other shapes to be placed in any location on a worksheet. Using a [`WorksheetImage`](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.WorksheetImage.html "Link to the Web API Reference Guide to the WorksheetImage member.") object, you can also add an image to a [Worksheet](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.Worksheet.html "Link to the Web API Reference Guide to the Worksheet member.") . All shapes are added to a worksheet by using the following steps, in order: + +1. Create the desired shape. +2. Set the anchors for the shape, which determine where the shape will be placed on the worksheet. +3. Add the shape to the Worksheet's [Shapes](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.Worksheet~Shapes.html "Link to the Web API Reference Guide to the Shapes member.") collection. + +The anchors, which need to be set before placing the shape on the worksheet, are the [TopLeftCornerCell](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.WorksheetShape~TopLeftCornerCell.html "Link to the Web API Reference Guide to the TopLeftCornerCell member.") and [BottomRightCornerCell](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.WorksheetShape~BottomRightCornerCell.html "Link to the Web API Reference Guide to the BottomRightCornerCell member.") properties of the shape. These cells determine where the shape's associated corner will appear when the worksheet is viewed in Excel. Additional anchor properties are the [TopLeftCornerPosition](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.WorksheetShape~TopLeftCornerPosition.html "Link to the Web API Reference Guide to the TopLeftCornerPosition member.") and [BottomRightCornerPosition](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.WorksheetShape~BottomRightCornerPosition.html "Link to the Web API Reference Guide to the BottomRightCornerPosition member.") properties of the shape. By using these properties, you have finer control over where the associated corner of the shape will appear in the cell. These position properties are expressed in percentages across each dimension of the cell, with (0.0, 0.0) referring with the top-left corner of the associated anchor cell, and (100.0, 100.0) referring to the bottom-right corner. + +The following code demonstrates how to create an image and have it fill the entire A1 cell of a worksheet: + +**In Visual Basic:** + +```vb +Dim workbook As New Infragistics.Documents.Excel.Workbook() +Dim worksheet As Infragistics.Documents.Excel.Worksheet = _ + workbook.Worksheets.Add("Sheet1") + +Dim image As Image = image.FromFile("C:image.bmp") +Dim imageShape As Infragistics.Documents.Excel.WorksheetImage = _ + New Infragistics.Documents.Excel.WorksheetImage(image) + +Dim cellA1 As Infragistics.Documents.Excel.WorksheetCell = _ + worksheet.Rows.Item(0).Cells.Item(0) + +' The top-left corner of the image should be at the +' top-left corner of cell A1 +imageShape.TopLeftCornerCell = cellA1 +imageShape.TopLeftCornerPosition = New PointF(0.0F, 0.0F) + +' The bottom-right corner of the image should be at +' the bottom-right corner of cell A1 +imageShape.BottomRightCornerCell = cellA1 +imageShape.BottomRightCornerPosition = New PointF(100.0F, 100.0F) + +worksheet.Shapes.Add(imageShape) +``` + +**In C#:** + +```csharp +Infragistics.Documents.Excel.Workbook workbook = new Infragistics.Documents.Excel.Workbook(); +Infragistics.Documents.Excel.Worksheet worksheet = + workbook.Worksheets.Add( "Sheet1" ); + +Image image = Image.FromFile( "C:image.bmp" ); +Infragistics.Documents.Excel.WorksheetImage imageShape = + new Infragistics.Documents.Excel.WorksheetImage( image ); + +Infragistics.Documents.Excel.WorksheetCell cellA1 = worksheet.Rows[0].Cells[0]; + +// The top-left corner of the image should be at the +// top-left corner of cell A1 +imageShape.TopLeftCornerCell = cellA1; +imageShape.TopLeftCornerPosition = new PointF( 0.0F, 0.0F ); + +// The bottom-right corner of the image should be at +// the bottom-right corner of cell A1 +imageShape.BottomRightCornerCell = cellA1; +imageShape.BottomRightCornerPosition = new PointF( 100.0F, 100.0F ); + +worksheet.Shapes.Add( imageShape ); +``` +![Displays the results of using the code listed above.](images/ExcelEngine_Add_an_Image_to_a_Worksheet_01.png) + + + + + + + + diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/add-document-properties-to-a-workbook.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/add-document-properties-to-a-workbook.mdx new file mode 100644 index 0000000000..1a2d6b7009 --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/add-document-properties-to-a-workbook.mdx @@ -0,0 +1,46 @@ +--- +title: "Add Document Properties to a Workbook" +slug: excelengine-add-document-properties-to-a-workbook +--- + +# Add Document Properties to a Workbook + + + +Associated with each workbook file are various properties that provide information about its content. These properties include the following pieces of information: + +- Author +- Title +- Subject +- Keywords +- Category +- Status +- Comments + +This information can be accessed through the Microsoft® Excel® interface as well as the Properties dialog box for the workbook file. You can edit this information in a workbook before serializing it by using its [`DocumentProperties`](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.Workbook~DocumentProperties.html "Link to the Web API Reference Guide to the DocumentProperties member.") property. + +The following code demonstrates how to create a workbook and set its [`Title`](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.DocumentProperties~Title.html "Link to the Web API Reference Guide to the Title member.") and [`Status`](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.DocumentProperties~Status.html "Link to the Web API Reference Guide to the Status member.") document properties. + +**In Visual Basic:** + +```vb +Dim workbook As New Infragistics.Documents.Excel.Workbook() +workbook.DocumentProperties.Title = "Expense Report" +workbook.DocumentProperties.Status = "Complete" +``` + +**In C#:** + +```csharp +Infragistics.Documents.Excel.Workbook workbook = new Infragistics.Documents.Excel.Workbook(); +workbook.DocumentProperties.Title = "Expense Report"; +workbook.DocumentProperties.Status = "Complete"; +``` + + + + + + + + diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/adding-a-hyperlink-to-a-cell-in-an-excel-file.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/adding-a-hyperlink-to-a-cell-in-an-excel-file.mdx new file mode 100644 index 0000000000..86cf9afff2 --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/adding-a-hyperlink-to-a-cell-in-an-excel-file.mdx @@ -0,0 +1,48 @@ +--- +title: "Adding a Hyperlink to a cell in an Excel file" +slug: excelengine-adding-a-hyperlink-to-a-cell-in-an-excel-file +--- + +# Adding a Hyperlink to a cell in an Excel file + +This topic shows you how to add a hyperlink to a cell in a Microsoft® Excel™ file using the [`WorksheetCell`](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.WorksheetCell.html "Link to the API Reference Guide to the WorksheetCell member.") object’s [ApplyFormula](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.WorksheetCell~ApplyFormula.html "Link to the API Reference Guide to the ApplyFormula member.") method. The following code creates an Excel file with a hyperlink in cell 0 of the worksheet by using the intrinsic Excel `HYPERLINK` formula. + +Before you start writing any code, you should place using/imports directives in your code-behind so you don't need to always type out a member's fully qualified name. + +**In Visual Basic:** +```vb +Imports Infragistics.Documents.Excel +``` +**In C#:** +```csharp +using Infragistics.Documents.Excel; +``` +**In Visual Basic:** +```vb + 'Create an Excel File + Dim s As String = "C:theFile.xls" + 'Create a Workbook + Dim w As New Workbook() + + 'Add a new worksheet to the Workbook + Dim ws As Worksheet = w.Worksheets.Add("New") + + 'Create Hyperlink in a Worksheet cell + ws.Rows(0).Cells(0).ApplyFormula("=HYPERLINK(""http://www.infragistics.com"",""Infragistics"")") + w.Save(s) +``` +**In C#:** +```csharp + //Create an Excel File + string s = @" C:theFile.xls"; + + //Create a Workbook + Workbook w = new Workbook(); + + //Add a new worksheet to the Workbook + Worksheet ws = w.Worksheets.Add("New"); + + //Create Hyperlink in a Worksheet cell + ws.Rows[0].Cells[0].ApplyFormula(@"=HYPERLINK(""http://www.infragistics.com"",""Infragistics"")"); + w.Save(s); +``` \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/adding-shapes-to-a-worksheet.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/adding-shapes-to-a-worksheet.mdx new file mode 100644 index 0000000000..1218e1ebf1 --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/adding-shapes-to-a-worksheet.mdx @@ -0,0 +1,209 @@ +--- +title: "Adding Shapes to a Worksheet" +slug: excelengine-adding-shapes-to-a-worksheet +--- + +# Adding Shapes to a Worksheet + + + +## Before You Begin +One of the great things about the Infragistics.Documents.Excel assembly is the ability to add images and shapes to your worksheet. As in Microsoft® Excel®, you can place an image on a worksheet, position it where you want, and even group it with other shapes on the same worksheet. Using a shape is a simple process of creating the shape, setting anchors which determine where it will be positioned on the worksheet, and adding it to the worksheet. + +In addition to placing shapes directly on a worksheet, you can also group shapes together on the worksheet. When shapes are grouped, the entire group can be moved as one shape, ensuring the shapes within the group are always in the same position relative to each other. + +## What You Will Accomplish +This walkthrough will guide you through the steps required to add images to your worksheet and group them as one shape. + +## Follow these Steps +1. **Create a workbook with a worksheet.** + 1. Create a new Visual Basic or C# web site project. + 2. Add a Button to the form. + 3. Double-click the Button to open the code-behind for its Click event. + 4. Create a Workbook with one Worksheet: + + **In Visual Basic:** + +```vb + Dim workbook As New Infragistics.Documents.Excel.Workbook() + Dim worksheet As Infragistics.Documents.Excel.Worksheet = _ + workbook.Worksheets.Add("Sheet1") +``` + + **In C#:** + +```csharp + Infragistics.Documents.Excel.Workbook workbook = new Infragistics.Documents.Excel.Workbook(); + Infragistics.Documents.Excel.Worksheet worksheet = workbook.Worksheets.Add( "Sheet1" ); +``` + +2. **Create the image shapes to place on the worksheet.** + 1. Create the images: + + **In Visual Basic:** + +```vb + Dim aspImage As Image = Image.FromFile("C:NA_AspNet.gif") + Dim winImage As Image = Image.FromFile("C:NA_Win_Forms.gif") + Dim wpfImage As Image = Image.FromFile("C:NA_WPF.gif") +``` + + **In C#:** + +```csharp + Image aspImage = Image.FromFile( "C:NA_AspNet.gif" ); + Image winImage = Image.FromFile( "C:NA_Win_Forms.gif" ); + Image wpfImage = Image.FromFile( "C:NA_WPF.gif" ); +``` + + 2. Create the image shapes to place on the worksheet: + + **In Visual Basic:** + +```vb + Dim aspImageShape As Infragistics.Documents.Excel.WorksheetImage = _ + New Infragistics.Documents.Excel.WorksheetImage(aspImage) + Dim winImageShape As Infragistics.Documents.Excel.WorksheetImage = _ + New Infragistics.Documents.Excel.WorksheetImage(winImage) + Dim wpfImageShape As Infragistics.Documents.Excel.WorksheetImage = _ + New Infragistics.Documents.Excel.WorksheetImage(wpfImage) +``` + + **In C#:** + +```csharp + Infragistics.Documents.Excel.WorksheetImage aspImageShape = + new Infragistics.Documents.Excel.WorksheetImage( aspImage ); + Infragistics.Documents.Excel.WorksheetImage winImageShape = + new Infragistics.Documents.Excel.WorksheetImage( winImage ); + Infragistics.Documents.Excel.WorksheetImage wpfImageShape = + new Infragistics.Documents.Excel.WorksheetImage( wpfImage ); +``` + +3. **Set the position anchors on the image shapes.** + + Before adding the shapes to a group or worksheet, you must set their anchors. Position shapes relative to cells on the worksheet: + + **In Visual Basic:** + +```vb + aspImageShape.TopLeftCornerCell = worksheet.Rows.Item(3).Cells.Item(1) + aspImageShape.BottomRightCornerCell = worksheet.Rows.Item(5).Cells.Item(6) + ' The bottom-right corner of the shape should be close to the + ' bottom-left corner of its anchor cell + aspImageShape.BottomRightCornerPosition = New PointF(10, 100) + + winImageShape.TopLeftCornerCell = worksheet.Rows.Item(7).Cells.Item(1) + ' The top-left corner of the shape should be in the top-middle + ' of its anchor cell + winImageShape.TopLeftCornerPosition = New PointF(50, 0) + winImageShape.BottomRightCornerCell = worksheet.Rows.Item(9).Cells.Item(6) + ' The bottom-right corner of the shape should be close to the + ' bottom-middle of its anchor cell + winImageShape.BottomRightCornerPosition = New PointF(60, 100) + + wpfImageShape.TopLeftCornerCell = worksheet.Rows.Item(11).Cells.Item(2) + wpfImageShape.BottomRightCornerCell = worksheet.Rows.Item(13).Cells.Item(7) + ' The bottom-right corner of the shape should be close to the + ' bottom-left corner of its anchor cell + wpfImageShape.BottomRightCornerPosition = New PointF(10, 100) +``` + + **In C#:** + +```csharp + aspImageShape.TopLeftCornerCell = worksheet.Rows[3].Cells[1]; + aspImageShape.BottomRightCornerCell = worksheet.Rows[5].Cells[6]; + // The bottom-right corner of the shape should be close to the + // bottom-left corner of its anchor cell + aspImageShape.BottomRightCornerPosition = new PointF( 10, 100 ); + + winImageShape.TopLeftCornerCell = worksheet.Rows[7].Cells[1]; + // The top-right corner of the shape should be in the top-middle + // of its anchor cell + winImageShape.TopLeftCornerPosition = new PointF( 50, 0 ); + winImageShape.BottomRightCornerCell = worksheet.Rows[9].Cells[6]; + // The bottom-right corner of the shape should be close to the + // bottom-middle of its anchor cell + winImageShape.BottomRightCornerPosition = new PointF( 60, 100 ); + + wpfImageShape.TopLeftCornerCell = worksheet.Rows[11].Cells[ 2 ]; + wpfImageShape.BottomRightCornerCell = worksheet.Rows[13].Cells[7]; + // The bottom-right corner of the shape should be close to the + // bottom-left corner of its anchor cell + wpfImageShape.BottomRightCornerPosition = new PointF( 10, 100 ); +``` + +4. **Group the image shapes.** + 1. Create a shape group, which is also a shape: + + **In Visual Basic:** + +```vb + Dim group As Infragistics.Documents.Excel.WorksheetShapeGroup = _ + New Infragistics.Documents.Excel.WorksheetShapeGroup() +``` + + **In C#:** + +```csharp + Infragistics.Documents.Excel.WorksheetShapeGroup group = + new Infragistics.Documents.Excel.WorksheetShapeGroup(); +``` + + 2. Add the image shapes to the group. When shapes are added or removed from the shape group, it will automatically set its own anchors so it is the smallest rectangle, which completely encloses all its shapes. Because of this, the anchors for the shape group do not need to be set. + + **In Visual Basic:** + +```vb + group.Shapes.Add(aspImageShape) + group.Shapes.Add(winImageShape) + group.Shapes.Add(wpfImageShape) +``` + + **In C#:** + +```csharp + group.Shapes.Add( aspImageShape ); + group.Shapes.Add( winImageShape ); + group.Shapes.Add( wpfImageShape ); +``` + + 3. Add the group, which now contains the image shapes, to the worksheet: + + **In Visual Basic:** + +```vb + worksheet.Shapes.Add(group) +``` + + **In C#:** + +```csharp + worksheet.Shapes.Add( group ); +``` + +5. **Serialize the workbook.** + 1. Write the workbook to a file: + + **In Visual Basic:** + +```vb + workbook.Serialize("C:Shapes.xls") +``` + + **In C#:** + +```csharp + workbook.Serialize( "C:Shapes.xls" ); +``` + +![Displays the results of using the code listed above.](images/ExcelEngine_Adding_Shapes_to_a_Worksheet_01.png) + + + + + + + + diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/applying-styles-to-cells.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/applying-styles-to-cells.mdx new file mode 100644 index 0000000000..4279ec4c34 --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/applying-styles-to-cells.mdx @@ -0,0 +1,327 @@ +--- +title: "Applying Styles to Cells" +slug: excelengine-applying-styles-to-cells +--- + +# Applying Styles to Cells + +## Before You Begin +The ability to apply styles to cells is one of the ways the Infragistics.Documents.Excel assembly allows you to customize your worksheets. Every aspect of the cell can be customized and each cell can appear differently. You can control the font used in the cell, the call background and borders, and the placement and rotation of text. You can even use different formats for different pieces of text in the same cell. + +Most styles can be applied by setting properties on the `CellFormat` property of [`WorksheetCell`](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.WorksheetCell.html "Link to the Web API Reference Guide to the WorksheetCell member.") , [`WorksheetRow`](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.WorksheetRow.html "Link to the Web API Reference Guide to the WorksheetRow member.") , [`WorksheetColumn`](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.WorksheetColumn.html "Link to the Web API Reference Guide to the WorksheetColumn member.") , and [`WorksheetMergedCellsRegion`](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.WorksheetMergedCellsRegion.html "Link to the Web API Reference Guide to the WorksheetMergedCellsRegion member.") . + +## What You Will Accomplish +This walkthrough will show you how to apply a variety of styles to the cells of a worksheet. + +## Follow these Steps +1. **Create a workbook with a worksheet.** + 1. Create a new Visual Basic or C# web site project. + 2. Add a Button to the form. + 3. Double-click the Button to open the code-behind for its Click event. + 4. Create a Workbook with one Worksheet: + + **In Visual Basic:** + +```vb + Dim workbook As New Infragistics.Documents.Excel.Workbook() + Dim worksheet As Infragistics.Documents.Excel.Worksheet = _ + workbook.Worksheets.Add("Sheet1") +``` + + **In C#:** + +```csharp + Infragistics.Documents.Excel.Workbook workbook = new Infragistics.Documents.Excel.Workbook(); + Infragistics.Documents.Excel.Worksheet worksheet = workbook.Worksheets.Add( "Sheet1" ); +``` + + 5. Increase the width of the first column so all text for the cells is visible: + + **In Visual Basic:** + +```vb + worksheet.Columns.Item(0).Width = 6000 +``` + + **In C#:** + +```csharp + worksheet.Columns[0].Width = 6000; +``` + +2. **Apply the styles to the cells.** + 1. Change the horizontal alignment of a cell so the value is centered in the cell: + + **In Visual Basic:** + +```vb + worksheet.Rows.Item(0).Cells.Item(0).Value = "Center" + worksheet.Rows.Item(0).Cells.Item(0).CellFormat.Alignment = _ + Infragistics.Documents.Excel.HorizontalCellAlignment.Center +``` + + **In C#:** + +```csharp + worksheet.Rows[0].Cells[0].Value = "Center"; + worksheet.Rows[0].Cells[0].CellFormat.Alignment = + Infragistics.Documents.Excel.HorizontalCellAlignment.Center; +``` + + 2. Give the cell different border styles and colors to separate it from other cells: + + **In Visual Basic:** + +```vb + worksheet.Rows.Item(1).Cells.Item(0).CellFormat.BottomBorderColor = Color.Red + worksheet.Rows.Item(1).Cells.Item(0).CellFormat.BottomBorderStyle = _ + Infragistics.Documents.Excel.CellBorderLineStyle.DashDot + worksheet.Rows.Item(1).Cells.Item(0).CellFormat.LeftBorderColor = Color.Yellow + worksheet.Rows.Item(1).Cells.Item(0).CellFormat.LeftBorderStyle = _ + Infragistics.Documents.Excel.CellBorderLineStyle.Thick + worksheet.Rows.Item(1).Cells.Item(0).CellFormat.RightBorderColor = Color.Orange + worksheet.Rows.Item(1).Cells.Item(0).CellFormat.RightBorderStyle = _ + Infragistics.Documents.Excel.CellBorderLineStyle.Thin + worksheet.Rows.Item(1).Cells.Item(0).CellFormat.TopBorderColor = Color.Blue + worksheet.Rows.Item(1).Cells.Item(0).CellFormat.TopBorderStyle = _ + Infragistics.Documents.Excel.CellBorderLineStyle.Double +``` + + **In C#:** + +```csharp + worksheet.Rows[1].Cells[0].CellFormat.BottomBorderColor = Color.Red; + worksheet.Rows[1].Cells[0].CellFormat.BottomBorderStyle = + Infragistics.Documents.Excel.CellBorderLineStyle.DashDot; + worksheet.Rows[1].Cells[0].CellFormat.LeftBorderColor = Color.Yellow; + worksheet.Rows[1].Cells[0].CellFormat.LeftBorderStyle = + Infragistics.Documents.Excel.CellBorderLineStyle.Thick; + worksheet.Rows[1].Cells[0].CellFormat.RightBorderColor = Color.Orange; + worksheet.Rows[1].Cells[0].CellFormat.RightBorderStyle = + Infragistics.Documents.Excel.CellBorderLineStyle.Thin; + worksheet.Rows[1].Cells[0].CellFormat.TopBorderColor = Color.Blue; + worksheet.Rows[1].Cells[0].CellFormat.TopBorderStyle = + Infragistics.Documents.Excel.CellBorderLineStyle.Double; +``` + + 3. Apply a background style to a cell to it stands out: + + **In Visual Basic:** + +```vb + worksheet.Rows.Item(2).Cells.Item(0).CellFormat.FillPattern = _ + Infragistics.Documents.Excel.FillPatternStyle.DiagonalCrosshatch + worksheet.Rows.Item(2).Cells.Item(0).CellFormat.FillPatternBackgroundColor = _ + Color.Lime + worksheet.Rows.Item(2).Cells.Item(0).CellFormat.FillPatternForegroundColor = _ + Color.Gray +``` + + **In C#:** + +```csharp + worksheet.Rows[2].Cells[0].CellFormat.FillPattern = + Infragistics.Documents.Excel.FillPatternStyle.DiagonalCrosshatch; + worksheet.Rows[2].Cells[0].CellFormat.FillPatternBackgroundColor = + Color.Lime; + worksheet.Rows[2].Cells[0].CellFormat.FillPatternForegroundColor = + Color.Gray; +``` + + 4. Change the font of a cell so its value appears differently: + + **In Visual Basic:** + +```vb + worksheet.Rows.Item(3).Cells.Item(0).Value = 57 + worksheet.Rows.Item(3).Cells.Item(0).CellFormat.Font.Bold = _ + Infragistics.Documents.Excel.ExcelDefaultableBoolean.True + worksheet.Rows.Item(3).Cells.Item(0).CellFormat.Font.UnderlineStyle = _ + Infragistics.Documents.Excel.FontUnderlineStyle.Double +``` + + **In C#:** + +```csharp + worksheet.Rows[3].Cells[0].Value = 57; + worksheet.Rows[3].Cells[0].CellFormat.Font.Bold = + Infragistics.Documents.Excel.ExcelDefaultableBoolean.True; + worksheet.Rows[3].Cells[0].CellFormat.Font.UnderlineStyle = + Infragistics.Documents.Excel.FontUnderlineStyle.Double; +``` + + 5. Apply a format string to a cell so the type of value displayed is easily recognized (the following cell is used to display currency): + + **In Visual Basic:** + +```vb + worksheet.Rows.Item(4).Cells.Item(0).Value = -4357.059 + worksheet.Rows.Item(4).Cells.Item(0).CellFormat.FormatString = _ + """$""#,##0.00_);[Red](""$""#,##0.00)" +``` + + **In C#:** + +```csharp + worksheet.Rows[4].Cells[0].Value = -4357.059; + worksheet.Rows[4].Cells[0].CellFormat.FormatString = + ""$"#,##0.00_);[Red]("$"#,##0.00)"; +``` + + 6. Indent text in a cell: + + **In Visual Basic:** + +```vb + worksheet.Rows.Item(5).Cells.Item(0).Value = "Intented" + worksheet.Rows.Item(5).Cells.Item(0).CellFormat.Indent = 2 +``` + + **In C#:** + +```csharp + worksheet.Rows[5].Cells[0].Value = "Intented"; + worksheet.Rows[5].Cells[0].CellFormat.Indent = 2; +``` + + 7. Rotate text in a cell: + + **In Visual Basic:** + +```vb + worksheet.Rows.Item(6).Cells.Item(0).Value = "Rotated" + worksheet.Rows.Item(6).Cells.Item(0).CellFormat.Rotation = 45 +``` + + **In C#:** + +```csharp + worksheet.Rows[6].Cells[0].Value = "Rotated"; + worksheet.Rows[6].Cells[0].CellFormat.Rotation = 45; +``` + + 8. Shrink text to fit in the cell: + + **In Visual Basic:** + +```vb + worksheet.Rows.Item(7).Cells.Item(0).Value = _ + "Shrink text so it is all visible in the cell" + worksheet.Rows.Item(7).Cells.Item(0).CellFormat.ShrinkToFit = _ + Infragistics.Documents.Excel.ExcelDefaultableBoolean.True +``` + + **In C#:** + +```csharp + worksheet.Rows[7].Cells[0].Value = + "Shrink text so it is all visible in the cell"; + worksheet.Rows[7].Cells[0].CellFormat.ShrinkToFit = + Infragistics.Documents.Excel.ExcelDefaultableBoolean.True; +``` + + 9. Change the vertical alignment of a cell so the value appears at the top of the cell when it does not have a default height: + + **In Visual Basic:** + +```vb + worksheet.Rows.Item(8).Height = 500 + worksheet.Rows.Item(8).Cells.Item(0).Value = "Top" + worksheet.Rows.Item(8).Cells.Item(0).CellFormat.VerticalAlignment = _ + Infragistics.Documents.Excel.VerticalCellAlignment.Top +``` + + **In C#:** + +```csharp + worksheet.Rows[8].Height = 500; + worksheet.Rows[8].Cells[0].Value = "Top"; + worksheet.Rows[8].Cells[0].CellFormat.VerticalAlignment = + Infragistics.Documents.Excel.VerticalCellAlignment.Top; +``` + + 10. Wrap the text in a cell so it does hang over into the next cell or get cut off: + + **In Visual Basic:** + +```vb + worksheet.Rows.Item(9).Cells.Item(0).Value = _ + "This text has been wrapped." + worksheet.Rows.Item(9).Cells.Item(0).CellFormat.WrapText = _ + Infragistics.Documents.Excel.ExcelDefaultableBoolean.True +``` + + **In C#:** + +```csharp + worksheet.Rows[9].Cells[0].Value = + "This text has been wrapped."; + worksheet.Rows[9].Cells[0].CellFormat.WrapText = + Infragistics.Documents.Excel.ExcelDefaultableBoolean.True; +``` + + 11. Apply mixed formatting to the text in a cell using a FormattedString object: + + **In Visual Basic:** + +```vb + Dim formattedString As Infragistics.Documents.Excel.FormattedString = _ + New Infragistics.Documents.Excel.FormattedString("Formatted String") + worksheet.Rows.Item(10).Cells.Item(0).Value = formattedString + + Dim font1 As Infragistics.Documents.Excel.FormattedStringFont = _ + formattedString.GetFont(3, 6) + font1.Color = Color.Red + font1.UnderlineStyle = Infragistics.Documents.Excel.FontUnderlineStyle.Single + font1.Height = 300 + + Dim font2 As Infragistics.Documents.Excel.FormattedStringFont = _ + formattedString.GetFont(10) + font2.Bold = Infragistics.Documents.Excel.ExcelDefaultableBoolean.True + font2.Italic = Infragistics.Documents.Excel.ExcelDefaultableBoolean.True + font2.Strikeout = Infragistics.Documents.Excel.ExcelDefaultableBoolean.True +``` + + **In C#:** + +```csharp + Infragistics.Documents.Excel.FormattedString formattedString = + new Infragistics.Documents.Excel.FormattedString( "Formatted String" ); + worksheet.Rows[10].Cells[0].Value = formattedString; + + Infragistics.Documents.Excel.FormattedStringFont font1 = formattedString.GetFont( 3, 6 ); + font1.Color = Color.Red; + font1.UnderlineStyle = Infragistics.Documents.Excel.FontUnderlineStyle.Single; + font1.Height = 300; + + Infragistics.Documents.Excel.FormattedStringFont font2 = formattedString.GetFont( 10 ); + font2.Bold = Infragistics.Documents.Excel.ExcelDefaultableBoolean.True; + font2.Italic = Infragistics.Documents.Excel.ExcelDefaultableBoolean.True; + font2.Strikeout = Infragistics.Documents.Excel.ExcelDefaultableBoolean.True; +``` + +3. **Serialize the workbook.** + + Write the workbook to a file: + + **In Visual Basic:** + +```vb + workbook.Serialize("C:Styles.xls") +``` + + **In C#:** + +```csharp + workbook.Serialize( "C:Styles.xls" ); +``` + +![Displays the results of using the code listed above.](images/ExcelEngine_Applying_Styles_to_Cells_01.png) + + + + + + + + diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/calculating-order-totals.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/calculating-order-totals.mdx new file mode 100644 index 0000000000..ad981d9d98 --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/calculating-order-totals.mdx @@ -0,0 +1,304 @@ +--- +title: "Calculating Order Totals" +slug: excelengine-calculating-order-totals +--- + +# Calculating Order Totals + +## Before You Begin +A common task in a Microsoft® Excel® workbook is to store a column or row of numerical data and have a cell containing the total of these numbers. The nice thing about this total is it can automatically update when one of the numbers changes. You can create a total cell in a worksheet by applying a formula as the cell's value. + +## What You Will Accomplish +Using this topic, you will learn how to create cells contains totals of data in the worksheet. + +## Follow these Steps +1. **Create a workbook with a worksheet.** + 1. Create a new Visual Basic or C# web site project. + 2. Add a Button to the form. + 3. Double-click the Button to open the code-behind for its Click event. + 4. Create a Workbook with one Worksheet: + + **In Visual Basic:** + +```vb + Dim workbook As New Infragistics.Documents.Excel.Workbook() + Dim worksheet As Infragistics.Documents.Excel.Worksheet = _ + workbook.Worksheets.Add("Sheet1") +``` + + **In C#:** + +```csharp + Infragistics.Documents.Excel.Workbook workbook = new Infragistics.Documents.Excel.Workbook(); + Infragistics.Documents.Excel.Worksheet worksheet = workbook.Worksheets.Add( "Sheet1" ); +``` + +2. **Define the columns for the worksheet data.** + 1. Make column headers so the data is easily identified: + + **In Visual Basic:** + +```vb + Dim headersRow As Infragistics.Documents.Excel.WorksheetRow = worksheet.Rows.Item(0) + headersRow.Cells.Item(0).Value = "Order ID" + headersRow.Cells.Item(1).Value = "Product" + headersRow.Cells.Item(2).Value = "Unit Price" + headersRow.Cells.Item(3).Value = "Quantity" + headersRow.Cells.Item(4).Value = "Discount" + headersRow.Cells.Item(5).Value = "Order Total" +``` + + **In C#:** + +```csharp + Infragistics.Documents.Excel.WorksheetRow headersRow = worksheet.Rows[ 0 ]; + headersRow.Cells[0].Value = "Order ID"; + headersRow.Cells[1].Value = "Product"; + headersRow.Cells[2].Value = "Unit Price"; + headersRow.Cells[3].Value = "Quantity"; + headersRow.Cells[4].Value = "Discount"; + headersRow.Cells[5].Value = "Order Total"; +``` + + 2. Set special formatting for any columns which require it: + + **In Visual Basic:** + +```vb + ' The "Unit Price" column should display its values as dollars + worksheet.Columns.Item(2).CellFormat.FormatString = _ + """$""#,##0.00_);(""$""#,##0.00)" + + ' The "Discount" column should display its values as percentages + worksheet.Columns.Item(4).CellFormat.FormatString = "0.00%" + + ' The "Order Total" column should display its values as dollars + worksheet.Columns.Item(5).CellFormat.FormatString = _ + """$""#,##0.00_);(""$""#,##0.00)" + ' Allow enough room to display the totals + worksheet.Columns.Item(5).Width = 3000 +``` + + **In C#:** + +```csharp + // The "Unit Price" column should display its values as dollars + worksheet.Columns[2].CellFormat.FormatString = ""$"#,##0.00_);("$"#,##0.00)"; + + // The "Discount" column should display its values as percentages + worksheet.Columns[4].CellFormat.FormatString = "0.00%"; + + // The "Order Total" column should display its values as dollars + worksheet.Columns[5 ].CellFormat.FormatString = ""$"#,##0.00_);("$"#,##0;00)"; + // Allow enough room to display the totals + worksheet.Columns[5].Width = 3000; +``` + +3. **Populate the cells with data.** + 1. Populate the cells with data (not the cells that will contain totals; those will be calculated by formulas later): + + **In Visual Basic:** + +```vb + Dim currentRow As Infragistics.Documents.Excel.WorksheetRow + + currentRow = worksheet.Rows.Item(1) + currentRow.Cells.Item(0).Value = 10248 + currentRow.Cells.Item(1).Value = 42 + currentRow.Cells.Item(2).Value = 9.8 + currentRow.Cells.Item(3).Value = 10 + currentRow.Cells.Item(4).Value = 0.075 + + currentRow = worksheet.Rows.Item(2) + currentRow.Cells.Item(0).Value = 10248 + currentRow.Cells.Item(1).Value = 72 + currentRow.Cells.Item(2).Value = 34.8 + currentRow.Cells.Item(3).Value = 5 + currentRow.Cells.Item(4).Value = 0.075 + + currentRow = worksheet.Rows.Item(3) + currentRow.Cells.Item(0).Value = 10249 + currentRow.Cells.Item(1).Value = 14 + currentRow.Cells.Item(2).Value = 18.6 + currentRow.Cells.Item(3).Value = 9 + currentRow.Cells.Item(4).Value = 0.1 + + currentRow = worksheet.Rows.Item(4) + currentRow.Cells.Item(0).Value = 10249 + currentRow.Cells.Item(1).Value = 51 + currentRow.Cells.Item(2).Value = 42.4 + currentRow.Cells.Item(3).Value = 40 + currentRow.Cells.Item(4).Value = 0.1 +``` + + **In C#:** + +```csharp + Infragistics.Documents.Excel.WorksheetRow currentRow; + + currentRow = worksheet.Rows[1]; + currentRow.Cells[0].Value = 10248; + currentRow.Cells[1].Value = 42; + currentRow.Cells[2].Value = 9.80; + currentRow.Cells[3].Value = 10; + currentRow.Cells[4].Value = 0.075; + + currentRow = worksheet.Rows[2]; + currentRow.Cells[0].Value = 10248; + currentRow.Cells[1].Value = 72; + currentRow.Cells[2].Value = 34.80; + currentRow.Cells[3].Value = 5; + currentRow.Cells[4].Value = 0.075; + + currentRow = worksheet.Rows[3]; + currentRow.Cells[0].Value = 10249; + currentRow.Cells[1].Value = 14; + currentRow.Cells[2].Value = 18.60; + currentRow.Cells[3].Value = 9; + currentRow.Cells[4].Value = 0.1; + + currentRow = worksheet.Rows[4]; + currentRow.Cells[0].Value = 10249; + currentRow.Cells[1].Value = 51; + currentRow.Cells[2].Value = 42.40; + currentRow.Cells[3].Value = 40; + currentRow.Cells[4].Value = 0.1; +``` + +4. **Create a Grand Total label under the data.** + 1. Create a merged cell, update the data, and apply a label: + + **In Visual Basic:** + +```vb + Dim mergedCell As Infragistics.Documents.Excel.WorksheetMergedCellsRegion = _ + worksheet.MergedCellsRegions.Add(5, 0, 5, 4) + mergedCell.Value = "Grand Total" +``` + + **In C#:** + +```csharp + Infragistics.Documents.Excel.WorksheetMergedCellsRegion mergedCell = + worksheet.MergedCellsRegions.Add( 5, 0, 5, 4 ); + mergedCell.Value = "Grand Total"; +``` + + 2. Adjust the text alignment so the label appears closer to where the Grand Total cell will be: + + **In Visual Basic:** + +```vb + mergedCell.CellFormat.Alignment = _ + Infragistics.Documents.Excel.HorizontalCellAlignment.Right +``` + + **In C#:** + +```csharp + mergedCell.CellFormat.Alignment = + Infragistics.Documents.Excel.HorizontalCellAlignment.Right; +``` + + ![Displays the results of using the code listed above.](images/ExcelEngine_Calculating_Order_Totals_01.png) + +5. **Apply a formula to calculate the sub total of each order record.** + 1. Create a formula that calculates the order total. The formula will multiply the unit price by the quantity, and remove the discount from the total: =[UnitPrice]*[Quantity]*(1-[Discount]). The formula will be created as if it were calculating the order total for the first order (the total in cell F2). However, the formula will be created using relative cell references, so when it is applied to the other order total cells, the cell references will be correctly shifted downwards: + + **In Visual Basic:** + +```vb + Dim orderTotalFormula As Infragistics.Documents.Excel.Formula = _ + Infragistics.Documents.Excel.Formula.Parse("=C2*D2*(1-E2)", _ + Infragistics.Documents.Excel.CellReferenceMode.A1) +``` + + **In C#:** + +```csharp + Infragistics.Documents.Excel.Formula orderTotalFormula = + Infragistics.Documents.Excel.Formula.Parse( "=C2*D2*(1-E2)", Infragistics.Documents.Excel.CellReferenceMode.A1 ); +``` + + 2. Create a cell region that defines the cells to which the formula will be applied: + + **In Visual Basic:** + +```vb + Dim region As Infragistics.Documents.Excel.WorksheetRegion = _ + New Infragistics.Documents.Excel.WorksheetRegion(worksheet, 1, 5, 4, 5) +``` + + **In C#:** + +```csharp + Infragistics.Documents.Excel.WorksheetRegion region = + new Infragistics.Documents.Excel.WorksheetRegion( worksheet, 1, 5, 4, 5 ); +``` + + 3. Apply the formula to the region of order total cells: + + **In Visual Basic:** + +```vb + orderTotalFormula.ApplyTo(region) +``` + + **In C#:** + +```csharp + orderTotalFormula.ApplyTo( region ); +``` + + ![Displays the results of using the code listed above.](images/ExcelEngine_Calculating_Order_Totals_02.png) + +6. **Apply a formula to determine the grand total.** + 1. Create a formula to total all "Order Total" cells for a grand total. This formula will use absolute references by prefacing row and column identifiers with a dollar sign ($), but relative references can be used as well: + + **In Visual Basic:** + +```vb + Dim grandTotalFormula As Infragistics.Documents.Excel.Formula = _ + Infragistics.Documents.Excel.Formula.Parse("=SUM($F$2:$F$5)", _ + Infragistics.Documents.Excel.CellReferenceMode.A1) +``` + + **In C#:** + +```csharp + Infragistics.Documents.Excel.Formula grandTotalFormula = + Infragistics.Documents.Excel.Formula.Parse( "=SUM($F$2:$F$5)", + Infragistics.Documents.Excel.CellReferenceMode.A1 ); +``` + + 2. Apply the formula to the grand total cell: + + **In Visual Basic:** + +```vb + grandTotalFormula.ApplyTo(worksheet.Rows.Item(5).Cells.Item(5)) +``` + + **In C#:** + +```csharp + grandTotalFormula.ApplyTo( worksheet.Rows[5].Cells[5] ); +``` + + ![Displays the results of using the code listed above.](images/ExcelEngine_Calculating_Order_Totals_03.png) + +7. **Save the workbook** + + Write the workbook to a file: + + **In Visual Basic:** + +```vb + workbook.Serialize("C:Orders.xls") +``` + + **In C#:** + +```csharp + workbook.Serialize( "C:Orders.xls" ); +``` \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/comments-in-a-worksheet-cell.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/comments-in-a-worksheet-cell.mdx new file mode 100644 index 0000000000..8cb7cc75ae --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/comments-in-a-worksheet-cell.mdx @@ -0,0 +1,40 @@ +--- +title: "Comments in a Worksheet Cell" +slug: excelengine-comments-in-a-worksheet-cell +--- + +# Comments in a Worksheet Cell + +Cell Comments are used to explain or remind the content of a cell or range of cells. For example, they may be used to explain the formulas that reside in the cells they are attached to. As in Microsoft® Excel®, it is possible to add cell comments to your Excel Worksheet using the [`WorksheetCellComment`](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.WorksheetCellComment.html "Link to the Web API Reference Guide to the WorksheetCellComment member.") class of the Infragistics.Documents.Excel Assembly. + +Cells with comments have a red triangle in the upper right corner. To see the comment, place the pointer in the cell. The comment disappears when you move the pointer off the cell. + +The example code below shows you how to add a comment to a cell. + +**In Visual Basic:** + + +```vb +Dim comment As Infragistics.Documents.Excel.WorksheetCellComment = New WorksheetCellComment () +Dim formatted As New FormattedString ("This is a comment") +comment.Text = formatted +worksheet4.Rows (10).Cells (2).Comment = comment +``` + + + +**In C#:** + + +```csharp +Infragistics.Documents.Excel.WorksheetCellComment comment = new WorksheetCellComment (); +FormattedString formatted = new FormattedString ("This is a comment"); +comment.Text = formatted; +worksheet4.Rows [10].Cells [2].Comment = comment; +``` + + + + + + diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/create-a-workbook.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/create-a-workbook.mdx new file mode 100644 index 0000000000..d37efb6b50 --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/create-a-workbook.mdx @@ -0,0 +1,59 @@ +--- +title: "Create a Workbook" +slug: excelengine-create-a-workbook +--- + +# Create a Workbook + +Before you can take advantage of the features in the Excel assembly, you will need to create a [Workbook](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.Workbook.html "Link to the Web API Reference Guide to the Workbook member.") object. You can do this by either reading an existing Microsoft® Excel® file, as explained in the How Do I... topic: [Read an Excel File into a Workbook](ExcelEngine-Read-an-Excel-File-Into-a-Workbook.html "Explains how to read and excel file into a workbook.") or you can create a blank workbook. When you create a blank workbook, before writing it to a file, you must add at least one worksheet. You can also set various display and print options on the workbook and worksheets. + +The following code demonstrates how to create a blank workbook, set a few properties, and add some worksheets. + +**In Visual Basic:** + +```vb +' Create a new workbook +Dim workbook As New Infragistics.Documents.Excel.Workbook() + +' Show only the vertical scroll bar +workbook.WindowOptions.ScrollBars = Infragistics.Documents.Excel.ScrollBars.Vertical + +' Create two worksheets for the workbook +Dim worksheet1 As Infragistics.Documents.Excel.Worksheet = _ + workbook.Worksheets.Add("Sheet1") +Dim worksheet2 As Infragistics.Documents.Excel.Worksheet = _ + workbook.Worksheets.Add("Sheet2") + +' Set the value of one of the cells +worksheet2.Rows.Item(0).Cells.Item(0).Value = 14.56 + +' Zoom in to double the normal viewing size on Sheet2 +worksheet2.DisplayOptions.MagnificationInNormalView = 200 + +' Make Sheet2 the selected worksheet +workbook.WindowOptions.SelectedWorksheet = worksheet2 +``` + +**In C#:** + +```csharp +// Create a new workbook +Infragistics.Documents.Excel.Workbook workbook = new Infragistics.Documents.Excel.Workbook(); + +// Show only the vertical scroll bar +workbook.WindowOptions.ScrollBars = Infragistics.Documents.Excel.ScrollBars.Vertical; + +// Create two worksheets for the workbook +Infragistics.Documents.Excel.Worksheet worksheet1 = workbook.Worksheets.Add( "Sheet1" ); +Infragistics.Documents.Excel.Worksheet worksheet2 = workbook.Worksheets.Add( "Sheet2" ); + +// Set the value of one of the cells +worksheet2.Rows[0].Cells[0].Value = 14.56; + +// Zoom in to double the normal viewing size on Sheet2 +worksheet2.DisplayOptions.MagnificationInNormalView = 200; + +// Make Sheet2 the selected worksheet +workbook.WindowOptions.SelectedWorksheet = worksheet2; +``` +![Displays the results of using the code listed above.](images/ExcelEngine_Create_a_Workbook_01.png) \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/creating-a-workbook-in-office-2007-xlsx-format.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/creating-a-workbook-in-office-2007-xlsx-format.mdx new file mode 100644 index 0000000000..5cbd393050 --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/creating-a-workbook-in-office-2007-xlsx-format.mdx @@ -0,0 +1,29 @@ +--- +title: "Creating a Workbook in office 2007 XLSX format" +slug: excelengine-creating-a-workbook-in-office-2007-xlsx-format +--- + +# Creating a Workbook in office 2007 XLSX format + +Infragistics® Excel® object library enables you to create Excel files with the new `xlsx` format (Excel2007). + +For more information on project dependencies and references when creating and saving to the `xlsx` format, please review the topic [Office® 2007 xlsx file generation references and dependencies](ExcelEngine-Office-2007-XLSX-file-generation-references-and-dependencies.html "office 2007 xlsx file generation references and dependencies"). + +The example code below shows you how to set the new xlsx format for the Excel Workbook. + +**In Visual Basic:** + + +```vb +Dim workbook As New Infragistics.Documents.Excel.Workbook() +workbook.SetCurrentFormat(WorkbookFormat.Excel2007) +``` + +**In C#:** + + +```csharp +Infragistics.Documents.Excel.Workbook workbook = new Infragistics.Documents.Excel.Workbook (); +workbook.SetCurrentFormat (WorkbookFormat.Excel2007); +``` + diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/freeze-rows-and-columns.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/freeze-rows-and-columns.mdx new file mode 100644 index 0000000000..cede3bb84a --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/freeze-rows-and-columns.mdx @@ -0,0 +1,43 @@ +--- +title: "Freeze Rows and Columns" +slug: excelengine-freeze-rows-and-columns +--- + +# Freeze Rows and Columns + +Certain data on a worksheet should always remain in view (e.g., column headers and the primary field in a row). For this data, you can freeze rows at the top or columns at the left of a worksheet. When you freeze rows in a worksheet and scroll the worksheet vertically, those rows remain fixed at the top of the worksheet. Similarly, frozen columns remain at the left of the worksheet, regardless of the horizontal scroll position. The unfrozen rows and columns exist in the bottom-right pane of the worksheet. You can also specify which row or column is first visible in this pane; doing so sets the vertical and horizontal scroll position of the worksheet. + +The following code demonstrates how to freeze rows and columns in a worksheet: + +**In Visual Basic:** + +```vb +Dim workbook As New Infragistics.Documents.Excel.Workbook() +Dim worksheet As Infragistics.Documents.Excel.Worksheet = _ + workbook.Worksheets.Add("Sheet1") + +worksheet.DisplayOptions.PanesAreFrozen = True + +' One row is frozen at the top of the worksheet +worksheet.DisplayOptions.FrozenPaneSettings.FrozenRows = 1 + +' Two columns are frozen at the left of the worksheet +worksheet.DisplayOptions.FrozenPaneSettings.FrozenColumns = 2 +``` + +**In C#:** + +```csharp +Infragistics.Documents.Excel.Workbook workbook = new Infragistics.Documents.Excel.Workbook(); +Infragistics.Documents.Excel.Worksheet worksheet = + workbook.Worksheets.Add( "Sheet1" ); + +worksheet.DisplayOptions.PanesAreFrozen = true; + +// One row is frozen at the top of the worksheet +worksheet.DisplayOptions.FrozenPaneSettings.FrozenRows = 1; + +// Two columns are frozen at the left of the worksheet +worksheet.DisplayOptions.FrozenPaneSettings.FrozenColumns = 2; +``` + diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/getting-the-value-of-a-formula-from-an-excel-file.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/getting-the-value-of-a-formula-from-an-excel-file.mdx new file mode 100644 index 0000000000..766c195233 --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/getting-the-value-of-a-formula-from-an-excel-file.mdx @@ -0,0 +1,27 @@ +--- +title: "Getting the Value of a Formula from an Excel File" +slug: excelengine-getting-the-value-of-a-formula-from-an-excel-file +--- + +# Getting the Value of a Formula from an Excel File + +In order to get the evaluated value of an Excel Cell that is represented by a Formula, you simply access the [`Value`](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.WorksheetCell~Value.html "Link to the API Reference Guide to the value member.") property of the [WorksheetCell](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.WorksheetCell.html "Link to the API Reference Guide to the worksheetcell member."). + +The example code below shows you how to access a particular Excel Worksheet Cell that is populated by an Excel Formula. + +**In Visual Basic:** +```vb +lblValue.Text = theWorksheet.Rows[1].Cells[4].Value; +``` +**In C#:** +```csharp +lblValue.Text = theWorksheet.Rows[1].Cells[4].Value; +``` +## Related Topics +- [Read an Excel File into a Workbook](ExcelEngine-Read-an-Excel-File-Into-a-Workbook.html "Explains how to read and excel file into a workbook.") +- [List of Supported Built-in Functions](ExcelEngine-List-of-Supported-Built-in-Functions.html "List of supported and unsupported Excel functions.") + + + + + diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/images/ExcelEngine_Add_an_Image_to_a_Worksheet_01.png b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/images/ExcelEngine_Add_an_Image_to_a_Worksheet_01.png new file mode 100644 index 0000000000..bb36e60112 Binary files /dev/null and b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/images/ExcelEngine_Add_an_Image_to_a_Worksheet_01.png differ diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/images/ExcelEngine_Adding_Shapes_to_a_Worksheet_01.png b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/images/ExcelEngine_Adding_Shapes_to_a_Worksheet_01.png new file mode 100644 index 0000000000..7e5465eb1a Binary files /dev/null and b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/images/ExcelEngine_Adding_Shapes_to_a_Worksheet_01.png differ diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/images/ExcelEngine_Applying_Styles_to_Cells_01.png b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/images/ExcelEngine_Applying_Styles_to_Cells_01.png new file mode 100644 index 0000000000..1a1d0230b2 Binary files /dev/null and b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/images/ExcelEngine_Applying_Styles_to_Cells_01.png differ diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/images/ExcelEngine_Calculating_Order_Totals_01.png b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/images/ExcelEngine_Calculating_Order_Totals_01.png new file mode 100644 index 0000000000..72584c62e6 Binary files /dev/null and b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/images/ExcelEngine_Calculating_Order_Totals_01.png differ diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/images/ExcelEngine_Calculating_Order_Totals_02.png b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/images/ExcelEngine_Calculating_Order_Totals_02.png new file mode 100644 index 0000000000..f92041e045 Binary files /dev/null and b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/images/ExcelEngine_Calculating_Order_Totals_02.png differ diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/images/ExcelEngine_Calculating_Order_Totals_03.png b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/images/ExcelEngine_Calculating_Order_Totals_03.png new file mode 100644 index 0000000000..b298aa28b5 Binary files /dev/null and b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/images/ExcelEngine_Calculating_Order_Totals_03.png differ diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/images/ExcelEngine_Create_a_Workbook_01.png b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/images/ExcelEngine_Create_a_Workbook_01.png new file mode 100644 index 0000000000..799c6985ed Binary files /dev/null and b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/images/ExcelEngine_Create_a_Workbook_01.png differ diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/images/ExcelEngine_Merge_Cells_01.png b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/images/ExcelEngine_Merge_Cells_01.png new file mode 100644 index 0000000000..8b4816efbe Binary files /dev/null and b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/images/ExcelEngine_Merge_Cells_01.png differ diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/images/ExcelEngine_Populating_a_Worksheet_from_a_DataSet_01.png b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/images/ExcelEngine_Populating_a_Worksheet_from_a_DataSet_01.png new file mode 100644 index 0000000000..941684be79 Binary files /dev/null and b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/images/ExcelEngine_Populating_a_Worksheet_from_a_DataSet_01.png differ diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/images/ExcelEngine_Resizing_Rows_and_Columns_01.png b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/images/ExcelEngine_Resizing_Rows_and_Columns_01.png new file mode 100644 index 0000000000..d37a744df8 Binary files /dev/null and b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/images/ExcelEngine_Resizing_Rows_and_Columns_01.png differ diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/images/ExcelEngine_Resizing_Rows_and_Columns_02.png b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/images/ExcelEngine_Resizing_Rows_and_Columns_02.png new file mode 100644 index 0000000000..6d30585b1d Binary files /dev/null and b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/images/ExcelEngine_Resizing_Rows_and_Columns_02.png differ diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/images/ExcelEngine_Resizing_Rows_and_Columns_03.png b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/images/ExcelEngine_Resizing_Rows_and_Columns_03.png new file mode 100644 index 0000000000..c7f44783c4 Binary files /dev/null and b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/images/ExcelEngine_Resizing_Rows_and_Columns_03.png differ diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/images/ExcelEngine_Resizing_Rows_and_Columns_04.png b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/images/ExcelEngine_Resizing_Rows_and_Columns_04.png new file mode 100644 index 0000000000..c379419a6f Binary files /dev/null and b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/images/ExcelEngine_Resizing_Rows_and_Columns_04.png differ diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/images/ExcelEngine_Resizing_Rows_and_Columns_05.png b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/images/ExcelEngine_Resizing_Rows_and_Columns_05.png new file mode 100644 index 0000000000..1f85fc842a Binary files /dev/null and b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/images/ExcelEngine_Resizing_Rows_and_Columns_05.png differ diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/images/ExcelEngine_Resizing_Rows_and_Columns_06.png b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/images/ExcelEngine_Resizing_Rows_and_Columns_06.png new file mode 100644 index 0000000000..6acb5519f4 Binary files /dev/null and b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/images/ExcelEngine_Resizing_Rows_and_Columns_06.png differ diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/images/ExcelEngine_Workseet_Sorting.png b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/images/ExcelEngine_Workseet_Sorting.png new file mode 100644 index 0000000000..b205de64d8 Binary files /dev/null and b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/images/ExcelEngine_Workseet_Sorting.png differ diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/list-of-supported-built-in-functions.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/list-of-supported-built-in-functions.mdx new file mode 100644 index 0000000000..b1e130307d --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/list-of-supported-built-in-functions.mdx @@ -0,0 +1,506 @@ +--- +title: "List of Supported Built-in Functions" +slug: excelengine-list-of-supported-built-in-functions +--- + + +# List of Supported Built-in Functions + + ## Introduction + +This document enumerates all supported and unsupported functions by the {ExcelEngineName}. + + +## Supported Excel Functions + +* ABS +* ACOS +* ACOSH +* ACOT +* ACOTH +* ADDRESS +* AND +* ARABIC +* AREAS +* ASIN +* ASINH +* ATAN +* ATAN2 +* ATANH +* AVEDEV +* AVERAGE +* AVERAGEA +* AVERAGEIF +* AVERAGEIFS +* BASE +* BIN2DEC +* BIN2HEX +* BIN2OCT +* BINOM.DIST +* BINOM.DIST.RANGE +* BINOM.INV +* BINOMDIST +* BITAND +* BITLSHIFT +* BITOR +* BITRSHIFT +* BITXOR +* CEILING +* CEILING.MATH +* CEILING.PRECISE +* CHAR +* CHOOSE +* CLEAN +* CODE +* COLUMN +* COLUMNS +* COMBIN +* COMBINA +* COMPLEX +* CONCAT +* CONCATENATE +* CONVERT +* CORREL +* COS +* COSH +* COT +* COTH +* COUNT +* COUNTA +* COUNTBLANK +* COUNTIF +* COUNTIFS +* COVAR +* COVARIANCE.P +* COVARIANCE.S +* CRITBINOM +* CSC +* CSCH +* DATE +* DATEVALUE +* DAY +* DAYS +* DAYS360 +* DB +* DDB +* DEC2BIN +* DEC2HEX +* DEC2OCT +* DECIMAL +* DEGREES +* DELTA +* DEVSQ +* DOLLAR +* DOLLARDE +* DOLLARFR +* ECMA.CEILING +* EDATE +* EFFECT +* EOMONTH +* ERF +* ERF.PRECISE +* ERFC +* ERFC.PRECISE +* ERROR.TYPE +* EVEN +* EXACT +* EXP +* EXPON.DIST +* EXPONDIST +* FACT +* FACTDOUBLE +* FALSE +* FIND +* FISHER +* FISHERINV +* FIXED +* FLOOR +* FLOOR.MATH +* FLOOR.PRECISE +* FORECAST +* FORMULATEXT +* FV +* GCD +* GESTEP +* HEX2BIN +* HEX2DEC +* HEX2OCT +* HLOOKUP +* HOUR +* HYPERLINK +* IF +* IFERROR +* IFNA +* IFS +* IMABS +* IMAGINARY +* IMARGUMENT +* IMCONJUGATE +* IMCOS +* IMDIV +* IMEXP +* IMLN +* IMLOG10 +* IMLOG2 +* IMPOWER +* IMPRODUCT +* IMREAL +* IMSIN +* IMSQRT +* IMSUB +* IMSUM +* INDEX +* INDIRECT +* INFO +* INT +* INTERCEPT +* INTRATE +* IPMT +* IRR +* ISBLANK +* ISERR +* ISERROR +* ISEVEN +* ISFORMULA +* ISLOGICAL +* ISNA +* ISNONTEXT +* ISNUMBER +* ISO.CEILING +* ISODD +* ISREF +* ISTEXT +* LARGE +* LCM +* LEFT +* LEN +* LN +* LOG +* LOG10 +* LOOKUP +* LOWER +* MATCH +* MAX +* MAXIFS +* MDETERM +* MEDIAN +* MID +* MIN +* MINIFS +* MINUTE +* MINVERSE +* MMULT +* MOD +* MODE +* MODE.MULT +* MODE.SNGL +* MONTH +* MROUND +* MULTINOMIAL +* N +* NA +* NETWORKDAYS +* NOMINAL +* NOT +* NOW +* NPER +* NPV +* NUMBERVALUE +* OCT2BIN +* OCT2DEC +* OCT2HEX +* ODD +* OFFSET +* OR +* PDURATION +* PEARSON +* PERCENTILE +* PERCENTILE.EXC +* PERCENTILE.INC +* PERCENTRANK +* PERCENTRANK.EXC +* PERCENTRANK.INC +* PERMUT +* PERMUTATIONA +* PI +* PMT +* POISSON +* POISSON.DIST +* POWER +* PPMT +* PROB +* PRODUCT +* PROPER +* PV +* QUARTILE +* QUARTILE.EXC +* QUARTILE.INC +* QUOTIENT +* RADIANS +* RAND +* RANDBETWEEN +* RANK +* RANK.AVG +* RANK.EQ +* RATE +* REPLACE +* REPT +* RIGHT +* ROMAN +* ROUND +* ROUNDDOWN +* ROUNDUP +* ROW +* ROWS +* RRI +* RSQ +* SEARCH +* SEARCHB +* SEC +* SECH +* SECOND +* SERIESSUM +* SHEET +* SHEETS +* SIGN +* SIN +* SINH +* SKEW +* SKEW.P +* SLN +* SLOPE +* SMALL +* SQRT +* SQRTPI +* STANDARDIZE +* STDEV +* STDEV.P +* STDEV.S +* STDEVA +* STDEVP +* STDEVPA +* STEYX +* SUBSTITUTE +* SUBTOTAL +* SUM +* SUMIF +* SUMIFS +* SUMPRODUCT +* SUMSQ +* SUMX2MY2 +* SUMX2PY2 +* SUMXMY2 +* SWITCH +* SYD +* TAN +* TANH +* TEXT +* TEXTJOIN +* TIME +* TIMEVALUE +* TODAY +* TRANSPOSE +* TRIM +* TRIMMEAN +* TRUE +* TRUNC +* TYPE +* UPPER +* USDOLLAR +* VALUE +* VAR +* VAR.P +* VAR.S +* VARA +* VARP +* VARPA +* VLOOKUP +* WEEKDAY +* WEEKNUM +* WEIBULL +* WEIBULL.DIST +* WORKDAY +* XOR +* YEAR +* YEARFRAC + +## Unsupported Excel Functions + +* ACCRINT +* ACCRINTM +* AGGREGATE +* AMORDEGRC +* AMORLINC +* ASC +* BAHTTEXT +* BESSELI +* BESSELJ +* BESSELK +* BESSELY +* BETA.DIST +* BETA.INV +* BETADIST +* BETAINV +* CELL +* CHIDIST +* CHIINV +* CHISQ.DIST +* CHISQ.DIST.RT +* CHISQ.INV +* CHISQ.INV.RT +* CHISQ.TEST +* CHITEST +* CONFIDENCE +* CONFIDENCE.NORM +* CONFIDENCE.T +* COUPDAYBS +* COUPDAYS +* COUPDAYSNC +* COUPNCD +* COUPNUM +* COUPPCD +* CUBEKPIMEMBER +* CUBEMEMBER +* CUBEMEMBERPROPERTY +* CUBERANKEDMEMBER +* CUBESET +* CUBESETCOUNT +* CUBEVALUE +* CUMIPMT +* CUMPRINC +* DATEDIF +* DATESTRING +* DAVERAGE +* DBCS +* DCOUNT +* DCOUNTA +* DGET +* DISC +* DMAX +* DMIN +* DPRODUCT +* DSTDEV +* DSTDEVP +* DSUM +* DURATION +* DVAR +* DVARP +* F.DIST +* F.DIST.RT +* F.INV +* F.INV.RT +* F.TEST +* FDIST +* FILTERXML +* FINDB +* FINV +* FORECAST.ETS +* FORECAST.ETS.CONFINT +* FORECAST.ETS.SEASONALITY +* FORECAST.ETS.STAT +* FORECAST.LINEAR +* FREQUENCY +* FTEST +* FVSCHEDULE +* GAMMA +* GAMMA.DIST +* GAMMA.INV +* GAMMADIST +* GAMMAINV +* GAMMALN +* GAMMALN.PRECISE +* GAUSS +* GEOMEAN +* GETPIVOTDATA +* GROWTH +* HARMEAN +* HYPGEOM.DIST +* HYPGEOMDIST +* HYPGEOMVERT +* IMCOSH +* IMCOT +* IMCSC +* IMCSCH +* IMSEC +* IMSECH +* IMSINH +* IMTAN +* ISOWEEKNUM +* ISPMT +* ISTHAIDIGIT +* KURT +* LEFTB +* LENB +* LINEST +* LOGEST +* LOGINV +* LOGNORM.DIST +* LOGNORM.INV +* LOGNORMDIST +* MAXA +* MDURATION +* MIDB +* MINA +* MIRR +* MNORMSINV +* MUNIT +* NEGBINOM.DIST +* NEGBINOMDIST +* NETWORKDAYS.INTL +* NORM.DIST +* NORM.INV +* NORM.S.DIST +* NORM.S.INV +* NORMDIST +* NORMINV +* NORMSDIST +* NORMSINV +* NUMBERSTRING +* ODDFPRICE +* ODDFYIELD +* ODDLPRICE +* ODDLYIELD +* PHI +* PHONETIC +* PRICE +* PRICEDISC +* PRICEMAT +* RECEIVED +* REPLACEB +* RIGHTB +* ROUNDBAHTDOWN +* ROUNDBAHTUP +* RTD +* T +* T.DIST +* T.DIST.2T +* T.DIST.RT +* T.INV +* T.INV.2T +* T.TEST +* TBILLEQ +* TBILLPRICE +* TBILLYIELD +* TDIST +* THAIDAYOFWEEK +* THAIDIGIT +* THAIMONTHOFYEAR +* THAINUMSOUND +* THAINUMSTRING +* THAISTRINGLENGTH +* THAIYEAR +* TINV +* TREND +* TTEST +* UNICHAR +* UNICODE +* VDB +* WEBSERVICE +* WORKDAY.INTL +* XIRR +* XNPV +* YIELD +* YIELDDISC +* YIELDMAT +* Z.TEST +* ZTEST \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/merge-cells.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/merge-cells.mdx new file mode 100644 index 0000000000..4954f9ca3b --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/merge-cells.mdx @@ -0,0 +1,79 @@ +--- +title: "Merge Cells" +slug: excelengine-merge-cells +--- + +# Merge Cells +Aside from setting the value or format of cells, you can also merge cells to make two or more cells appear as one. If you merge cells, they must be in a rectangular region. When part of a merged region, each cell in the region will have the same value and cell format; also, they will all be associated with the same [`WorksheetMergedCellsRegion`](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.WorksheetMergedCellsRegion.html "Link to the Web API Reference Guide to the WorksheetMergedCellsRegion member.") object, accessible from their [`AssociatedMergedCellsRegion`](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.WorksheetCell~AssociatedMergedCellsRegion.html "Link to the Web API Reference Guide to the WorksheetMergedCellsRegion member.") property. The `WorksheetMergedCellsRegion` object will also have the same value and cell format as the cells. Setting the value (or cell format) of the region or any cell in the region will change the value of all cells and the region. If you unmerge cells, because the merged region was removed from the worksheet, all of the previously merged cells will retain the shared cell format they had before they were unmerged. However, only the top-left cell of the region will retain the shared value. + +The following code demonstrates how to merge some cells and set the value and format of the merged cells region. + +**In Visual Basic:** + +```vb +Dim workbook As New Infragistics.Documents.Excel.Workbook() +Dim worksheet As Infragistics.Documents.Excel.Worksheet = _ + workbook.Worksheets.Add("Sheet1") + +' Make some column headers +worksheet.Rows.Item(1).Cells.Item(1).Value = "Morning" +worksheet.Rows.Item(1).Cells.Item(2).Value = "Afternoon" +worksheet.Rows.Item(1).Cells.Item(3).Value = "Evening" + +' Create a merged region that will be a header to the column headers +Dim mergedRegion1 As Infragistics.Documents.Excel.WorksheetMergedCellsRegion = _ + worksheet.MergedCellsRegions.Add(0, 1, 0, 3) + +' Set the value of the merged region +mergedRegion1.Value = "Day 1" + +' Give the merged region a solid background color +mergedRegion1.CellFormat.FillPattern = _ + Infragistics.Documents.Excel.FillPatternStyle.Solid +mergedRegion1.CellFormat.FillPatternForegroundColor = Color.SkyBlue + +' Set the cell alignment of the middle cell in the merged region. +' Since a cell and its merged region shared a cell format, this will +' ultimately set the format of the merged region +worksheet.Rows.Item(0).Cells.Item(2).CellFormat.Alignment = _ + Infragistics.Documents.Excel.HorizontalCellAlignment.Center +``` + +**In C#:** + +```csharp +Infragistics.Documents.Excel.Workbook workbook = new Infragistics.Documents.Excel.Workbook(); +Infragistics.Documents.Excel.Worksheet worksheet = workbook.Worksheets.Add( "Sheet1" ); + +// Make some column headers +worksheet.Rows[1].Cells[1].Value = "Morning"; +worksheet.Rows[1].Cells[2].Value = "Afternoon"; +worksheet.Rows[1].Cells[3].Value = "Evening"; + +// Create a merged region that will be a header to the column headers +Infragistics.Documents.Excel.WorksheetMergedCellsRegion mergedRegion1 = + worksheet.MergedCellsRegions.Add( 0, 1, 0, 3 ); + +// Set the value of the merged region +mergedRegion1.Value = "Day 1"; + +// Give the merged region a solid background color +mergedRegion1.CellFormat.FillPattern = + Infragistics.Documents.Excel.FillPatternStyle.Solid; +mergedRegion1.CellFormat.FillPatternForegroundColor = Color.SkyBlue; + +// Set the cell alignment of the middle cell in the merged region. +// Since a cell and its merged region shared a cell format, this will +// ultimately set the format of the merged region +worksheet.Rows[ 0 ].Cells[ 2 ].CellFormat.Alignment = + Infragistics.Documents.Excel.HorizontalCellAlignment.Center; +``` +![Displays the results of using the code listed above.](images/ExcelEngine_Merge_Cells_01.png) + + + + + + + + diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/moving-a-worksheet-within-an-excel-workbook.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/moving-a-worksheet-within-an-excel-workbook.mdx new file mode 100644 index 0000000000..f859bd74f0 --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/moving-a-worksheet-within-an-excel-workbook.mdx @@ -0,0 +1,31 @@ +--- +title: "Moving a Worksheet within an Excel Workbook" +slug: excelengine-moving-a-worksheet-within-an-excel-workbook +--- + +# Moving a Worksheet within an Excel Workbook +In certain cases you might need to move a worksheet to a particular index position in the owning Excel® workbook’s worksheets collection. + +Considering, you have three worksheets in an Excel Workbook, you can place worksheet3 in the first position, using the [`MoveToIndex`](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.Worksheet~MoveToIndex.html "Link to the Web API Reference Guide to the MoveToIndex method.") method of the [`Worksheet`](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.Worksheet.html "Link to the Web API Reference Guide to the Worksheet class.") class. + +The following example code demonstrates how to implement this. + +**In Visual Basic:** +```vb +Dim workbook As New Infragistics.Documents.Excel.Workbook () +Dim worksheet1 As Infragistics.Documents.Excel.Worksheet = workbook.Worksheets.Add ("Sheet1") +Dim worksheet2 As Infragistics.Documents.Excel.Worksheet = workbook.Worksheets.Add ("Sheet2") +Dim worksheet3 As Infragistics.Documents.Excel.Worksheet = workbook.Worksheets.Add ("Sheet3") +`Moving Sheet3 to the first position +worksheet3.MoveToIndex (0) +``` + +**In C#:** +```csharp + Infragistics.Documents.Excel.Workbook workbook = new Infragistics.Documents.Excel.Workbook (); + Infragistics.Documents.Excel.Worksheet worksheet1 = workbook.Worksheets.Add ("Sheet1"); + Infragistics.Documents.Excel.Worksheet worksheet2 = workbook.Worksheets.Add ("Sheet2"); + Infragistics.Documents.Excel.Worksheet worksheet3 = workbook.Worksheets.Add ("Sheet3"); +// Moving Sheet3 to the first position + worksheet3.MoveToIndex (0); +``` \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/office-2007-xlsx-file-generation-references-and-dependencies.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/office-2007-xlsx-file-generation-references-and-dependencies.mdx new file mode 100644 index 0000000000..fa55ebc56c --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/office-2007-xlsx-file-generation-references-and-dependencies.mdx @@ -0,0 +1,10 @@ +--- +title: "Office 2007 XLSX file generation references and dependencies" +slug: excelengine-office-2007-xlsx-file-generation-references-and-dependencies +--- + +# Office 2007 XLSX file generation references and dependencies + +**Using .NET CLR 4.0 or greater** + +When using the Infragistics® Excel® object library and exporters to generate a Microsoft® Office® 2007 compliant `xlsx` Excel File, the .NET Framework CLR version 4.0 or greater is required. In this scenario, you will reference the `Infragistics.Web.Mvc.Excel` Assembly. The compression and packaging functionality that is built into the xlsx file creation logic relies on the .NET Framework CLR4.0 \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/populating-a-worksheet-from-a-dataset.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/populating-a-worksheet-from-a-dataset.mdx new file mode 100644 index 0000000000..6104541e51 --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/populating-a-worksheet-from-a-dataset.mdx @@ -0,0 +1,187 @@ +--- +title: "Populating a Worksheet from a DataSet" +slug: excelengine-populating-a-worksheet-from-a-dataset +--- + +# Populating a Worksheet from a DataSet + +## Before You Begin +The main use for a Microsoft® Excel® worksheet is to display data. You can easily transfer data from an existing DataSet to a workbook so you can view it in Excel. A `DataSet` consists of one or more `DataTable` objects. Each `DataTable` can be mapped to a worksheet. + +## What You Will Accomplish +This walkthrough will show you how to create a `DataSet` from some tables in a database. Then it will demonstrate how to copy the data from that `DataSet` to a workbook, creating a Worksheet object to display the data for each `DataTable` in the `DataSet`. + +## Follow these Steps +1. **Create a DataTable and populate it with data from an existing database.** + 1. Create a new Visual Basic or C# web site project. + 2. Add a Button to the form. + 3. Double-click the Button to open the code-behind for its Click event. + 4. Connect to an existing Access database and populate a `DataSet` with data from some tables in the database: + + **In Visual Basic:** + +```vb + Dim northWindDbConnection As New System.Data.SqlClient.SqlConnection( _ + "Data Source=.SQLEXPRESS;AttachDbFilename=""C:Program FilesMicrosoft SQL ServerMSSQL.1MSSQLDataNorthwind.mdf"";Integrated Security=True;Connect Timeout=30;User Instance=True") + + Dim dataSet As New DataSet() + + northWindDbConnection.Open() + Try + Dim customersSelectCommand As New System.Data.SqlClient.SqlCommand("SELECT * FROM Customers", northWindDbConnection) + + Dim customersReader As System.Data.SqlClient.SqlDataReader = customersSelectCommand.ExecuteReader() + + ' Load all data from the customers table in the database + Dim customersTable As New DataTable("Customers") + customersTable.Load(customersReader) + ' Add the customers data table to the data set + dataSet.Tables.Add(customersTable) + + Dim ordersSelectCommand As New System.Data.SqlClient.SqlCommand("SELECT * FROM Orders", northWindDbConnection) + + Dim ordersReader As System.Data.SqlClient.SqlDataReader = ordersSelectCommand.ExecuteReader() + + ' Load all data from the customers orders in the database + Dim ordersTable As New DataTable("Orders") + ordersTable.Load(ordersReader) + ' Add the orders data table to the data set + dataSet.Tables.Add(ordersTable) + Finally + northWindDbConnection.Close() + End Try +``` + + **In C#:** + +```csharp + System.Data.SqlClient.SqlConnection northWindDbConnection = new System.Data.SqlClient.SqlConnection( + @"Data Source=.SQLEXPRESS;AttachDbFilename=""C:Program FilesMicrosoft SQL ServerMSSQL.1MSSQLDataNorthwind.mdf"";Integrated Security=True;Connect Timeout=30;User Instance=True"); + + DataSet dataSet = new DataSet(); + + northWindDbConnection.Open(); + try + { + System.Data.SqlClient.SqlCommand customersSelectCommand = new System.Data.SqlClient.SqlCommand( + "SELECT * FROM Customers", northWindDbConnection); + + System.Data.SqlClient.SqlDataReader customersReader = customersSelectCommand.ExecuteReader(); + + // Load all data from the customers table in the database + DataTable customersTable = new DataTable("Customers"); + customersTable.Load(customersReader); + // Add the customers data table to the data set + dataSet.Tables.Add(customersTable); + + System.Data.SqlClient.SqlCommand ordersSelectCommand = new System.Data.SqlClient.SqlCommand( + "SELECT * FROM Orders", northWindDbConnection); + + System.Data.SqlClient.SqlDataReader ordersReader = ordersSelectCommand.ExecuteReader(); + + // Load all data from the customers orders in the database + DataTable ordersTable = new DataTable("Orders"); + ordersTable.Load(ordersReader); + // Add the orders data table to the data set + dataSet.Tables.Add(ordersTable); + } + finally + { + northWindDbConnection.Close(); + } +``` + +2. **Load the data into a workbook.** + 1. Create a workbook to hold the data from the DataSet. + + **In Visual Basic:** + +```vb + Dim workbook As New Infragistics.Documents.Excel.Workbook() +``` + + **In C#:** + +```csharp + Infragistics.Documents.Excel.Workbook workbook = new Infragistics.Documents.Excel.Workbook(); +``` + + 2. Iterate the data tables in the data set and create a worksheet for each one. Also, populate the worksheet with the data from the data table: + + **In Visual Basic:** + +```vb + For Each table As DataTable In dataSet.Tables + ' Create the worksheet to represent this data table + Dim worksheet As Infragistics.Documents.Excel.Worksheet = workbook.Worksheets.Add(table.TableName) + ' Create column headers for each column + For columnIndex As Integer = 0 To table.Columns.Count – 1 + worksheet.Rows.Item(0).Cells.Item(columnIndex).Value = table.Columns.Item(columnIndex).ColumnName + Next + ' Starting at row index 1, copy all data rows in + ' the data table to the worksheet + Dim rowIndex As Integer = 1 + For Each dataRow As DataRow In table.Rows + Dim row As Infragistics.Documents.Excel.WorksheetRow = _ + worksheet.Rows.Item(rowIndex) + rowIndex = rowIndex + 1 + For columnIndex As Integer = 0 To dataRow.ItemArray.Length – 1 + row.Cells.Item(columnIndex).Value = dataRow.ItemArray(columnIndex) + Next + Next + Next +``` + + **In C#:** + +```csharp + foreach (DataTable table in dataSet.Tables) + { + // Create the worksheet to represent this data table + Infragistics.Documents.Excel.Worksheet worksheet = workbook.Worksheets.Add(table.TableName); + + // Create column headers for each column + for (int columnIndex = 0; columnIndex < table.Columns.Count; columnIndex++) + { + worksheet.Rows[0].Cells[columnIndex].value = table.Columns[columnIndex].ColumnName; + } + + // Starting at row index 1, copy all data rows in + // the data table to the worksheet + int rowIndex = 1; + foreach (DataRow dataRow in table.Rows) + { + Infragistics.Documents.Excel.WorksheetRow row = worksheet.Rows[rowIndex++]; + + for (int columnIndex = 0; columnIndex < dataRow.ItemArray.Length; columnIndex++) + { + row.Cells[columnIndex].value = dataRow.ItemArray[columnIndex]; + } + } + } +``` + +3. **Save the workbook.** + + Write the workbook to a file: + + **In Visual Basic:** + +```vb + workbook.Save("C:Data.xls") +``` + + **In C#:** + +```csharp + workbook.Save( "C:Data.xls" ); +``` +![Displays the results of using the code listed above.](images/ExcelEngine_Populating_a_Worksheet_from_a_DataSet_01.png) + + + + + + + + diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/read-an-excel-2007-xlsx-file-into-a-workbook.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/read-an-excel-2007-xlsx-file-into-a-workbook.mdx new file mode 100644 index 0000000000..ca583a8c67 --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/read-an-excel-2007-xlsx-file-into-a-workbook.mdx @@ -0,0 +1,44 @@ +--- +title: "Read an Excel 2007 XLSX File Into a Workbook" +slug: excelengine-read-an-excel-2007-xlsx-file-into-a-workbook +--- + +# Read an Excel 2007 XLSX File Into a Workbook + +In addition to writing out Microsoft® Excel® files, the Infragistics.Documents.Excel assembly can also read them. When an Excel file is read with the static [`Load`](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.Workbook~Load.html "Link to the Web API Reference Guide to the Load member.") method, a [`Workbook`](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.Workbook.html "Link to the Web API Reference Guide to the Workbook member.") object is created and its entire object model is populated with all supported information from the file. + +If you are loading a workbook of a particular format and you would like to save it as another format, you can use the [SetCurrentFormat](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.Workbook~SetCurrentFormat.html "Link to the Web API Reference Guide to the setcurrentformat member.") method of the [Infragistics.Documents.Excel.Workbook](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.Workbook.html "Link to the Web API Reference Guide to the workbook member.") class. Also, the [CurrentFormat](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.Workbook~CurrentFormat.html "Link to the Web API Reference Guide to the currentformat member.") property can be used to get the current workbook format. + +For more information on project dependencies and references when loading and saving to the xlsx format, please review the topic [Office® 2007 xlsx file generation references and dependencies](ExcelEngine-Office-2007-XLSX-file-generation-references-and-dependencies.html "office 2007 xlsx file generation references and dependencies"). + +> **Note:** When loading a workbook in new xlsx format(Excel2007), if you are sure that the workbook was saved out by a safe source, such as Microsoft® Excel®, you can assign False to the verifyExcel2007Xml overload of the [Load](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.Workbook~Load.html "Link to the Web API Reference Guide to the Load member.") method. Assigning False for large files would bypass the Excel assembly from verifying the contents of the files being loaded, which in turn will increase performance and load the large files faster. + +The following code demonstrates how to read in an existing XLSX workbook, make a change, and write the workbook to a new file: + +**In Visual Basic:** + +```vb +Dim workbook As Infragistics.Documents.Excel.Workbook = _ + Infragistics.Documents.Excel.Workbook.Load("C:ExistingWorkbook.xlsx") + +workbook.Worksheets.Item(0).Rows.Item(0).Cells.Item(0).Value = 19 +workbook.Save("C:ModifiedWorkbook.xlsx") +``` + +**In C#:** + +```csharp +Infragistics.Documents.Excel.Workbook workbook = + Infragistics.Documents.Excel.Workbook.Load( "C:ExistingWorkbook.xlsx" ); + +workbook.Worksheets[0].Rows[0].Cells[0].Value = 19; +workbook.Save( "C:ModifiedWorkbook.xlsx" ); +``` + + + + + + + + diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/read-an-excel-file-into-a-workbook.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/read-an-excel-file-into-a-workbook.mdx new file mode 100644 index 0000000000..7e54a4a116 --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/read-an-excel-file-into-a-workbook.mdx @@ -0,0 +1,38 @@ +--- +title: "Read an Excel File into a Workbook" +slug: excelengine-read-an-excel-file-into-a-workbook +--- + +# Read an Excel File into a Workbook + +In addition to writing out Microsoft® Excel® files, the Infragistics.Documents.Excel assembly can also read them. You can create a [`Workbook`](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.Workbook.html "Link to the Web API Reference Guide to the Workbook member.") object from an existing Excel file, make some changes, and save a new file containing the modified workbook. When an Excel file is read with the static [`Load`](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.Workbook~Load.html "Link to the Web API Reference Guide to the Load member.") method, a Workbook object is created and its entire object model is populated with all supported information from the file. Cell values, formats, and images, as well as workbook and worksheet options are all accessible and modifiable from the parsed Workbook. + +The following code demonstrates how to read in an existing workbook, make a change, and write the workbook to a new file: + +**In Visual Basic:** + +```vb +Dim workbook As Infragistics.Documents.Excel.Workbook = _ + Infragistics.Documents.Excel.Workbook.Load("C:ExistingWorkbook.xls") + +workbook.Worksheets.Item(0).Rows.Item(0).Cells.Item(0).Value = 19 +workbook.Save("C:ModifiedWorkbook.xls") +``` + +**In C#:** + +```csharp +Infragistics.Documents.Excel.Workbook workbook = + Infragistics.Documents.Excel.Workbook.Load( "C:ExistingWorkbook.xls" ); + +workbook.Worksheets[0].Rows[0].Cells[0].Value = 19; +workbook.Save( "C:ModifiedWorkbook.xls" ); +``` + + + + + + + + diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/resizing-rows-and-columns.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/resizing-rows-and-columns.mdx new file mode 100644 index 0000000000..9cf8c9e7fb --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/resizing-rows-and-columns.mdx @@ -0,0 +1,179 @@ +--- +title: "Resizing Rows and Columns" +slug: excelengine-resizing-rows-and-columns +--- + +# Resizing Rows and Columns + +## Before You Begin +In a worksheet, you may have a large amount of text in a cell or a large image that you want to appear in a cell. If the default cell size cannot fit the cell's contents, you can easily increase the height and width of all cells in a row, column, or the entire worksheet. + +However, in some situations the row height will automatically be increased so all content is visible. For example, if you rotate or wrap text in a cell, and the height of the row containing the cell is the default value, the row height will automatically increase to show all content. The column width is never managed automatically, and always remains constant, regardless of the content of its cells. + +In addition to resizing individual rows and columns, you can resize all rows and columns by setting the Worksheet's [`DefaultRowHeight`](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.Worksheet~DefaultRowHeight.html "Link to the Web API Reference Guide to the DefaultRowHeight member et class.") and [`DefaultColumnWidth`](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.Worksheet~DefaultColumnWidth.html "Link to the Web API Reference Guide to the DefaultColumnWidth member .") properties. + +## What You Will Accomplish +This walkthrough will show you a few ways to auto-size rows. In addition, you will learn how it manually size rows and columns so a cell can completely contain its contents. + +## Follow these Steps +1. **Create a workbook with a worksheet.** + 1. Create a new Visual Basic or C# web site project. + 2. Add a Button to the form. + 3. Double-click the Button to open the code-behind for its Click event. + 4. Create a Workbook with one Worksheet: + + **In Visual Basic:** + +```vb + Dim workbook As New Infragistics.Documents.Excel.Workbook() + Dim worksheet As Infragistics.Documents.Excel.Worksheet = _ + workbook.Worksheets.Add("Sheet1") +``` + + **In C#:** + +```csharp + Infragistics.Documents.Excel.Workbook workbook = new Infragistics.Documents.Excel.Workbook(); + Infragistics.Documents.Excel.Worksheet worksheet = workbook.Worksheets.Add( "Sheet1" ); +``` + +2. **Auto-size the height of rows.** + 1. Rotate the text in a cell whose row still has the default height. The row will auto-size to fit the cell's contents. + + **In Visual Basic:** + +```vb + worksheet.Rows.Item(0).Cells.Item(0).Value = "Rotated Text" + worksheet.Rows.Item(0).Cells.Item(0).CellFormat.Rotation = 70 +``` + + **In C#:** + +```csharp + worksheet.Rows[0].Cells[0].Value = "Rotated Text"; + worksheet.Rows[0].Cells[0].CellFormat.Rotation = 70; +``` + ![Displays the results of using the code listed above.](images/ExcelEngine_Resizing_Rows_and_Columns_01.png) + 2. Wrap the text in a cell whose row still has the default height. The row will auto-size to fit the cell's contents. + + **In Visual Basic:** + +```vb + worksheet.Rows.Item(1).Cells.Item(1).Value = _ + "This text will be wrapped in the cell so all text is visible" + worksheet.Rows.Item(1).Cells.Item(1).CellFormat.WrapText = _ + Infragistics.Documents.Excel.ExcelDefaultableBoolean.True +``` + + **In C#:** + +```csharp + worksheet.Rows[1].Cells[1].Value = + "This text will be wrapped in the cell so all text is visible"; + worksheet.Rows[1].Cells[1].CellFormat.WrapText = + Infragistics.Documents.Excel.ExcelDefaultableBoolean.True; +``` + ![Displays the results of using the code listed above.](images/ExcelEngine_Resizing_Rows_and_Columns_02.png) + +3. **Resize a column so text does not go outside its cell.** + 1. Place enough text in a cell so the text goes outside the boundaries of its cell: + + **In Visual Basic:** + +```vb + worksheet.Rows.Item(2).Cells.Item(2).Value = _ + "This text will not be wrapped" +``` + + **In C#:** + +```csharp + worksheet.Rows[2].Cells[2].Value = "This text will not be wrapped"; +``` + ![Displays the results of using the code listed above.](images/ExcelEngine_Resizing_Rows_and_Columns_03.png) + + 2. Although all text is visible, if a value is set in cell D3, the long text will be cut off. To increase the cell's width, increase the width of the WorksheetColumn, which is accessible from the Worksheet's Columns collection. + + **In Visual Basic:** + +```vb + worksheet.Columns.Item(2).Width = 6100 +``` + + **In C#:** + +```csharp + worksheet.Columns[2].Width = 6100; +``` + ![Displays the results of using the code listed above.](images/ExcelEngine_Resizing_Rows_and_Columns_04.png) + +4. **Place an image in a cell and resize the cell so the image is not distorted.** + 1. Create an image and make it occupy an entire cell: + + **In Visual Basic:** + +```vb + Dim image As Image = image.FromFile("C:NA_Win_Forms.gif") + Dim imageShape As New Infragistics.Documents.Excel.WorksheetImage(image) + + imageShape.TopLeftCornerCell = worksheet.Rows.Item(3).Cells.Item(3) + imageShape.BottomRightCornerCell = worksheet.Rows.Item(3).Cells.Item(3) + imageShape.BottomRightCornerPosition = New PointF(100, 100) + + worksheet.Shapes.Add(imageShape) +``` + + **In C#:** + +```csharp + Image image = Image.FromFile( "C:NA_Win_Forms.gif" ); + Infragistics.Documents.Excel.WorksheetImage imageShape = + new Infragistics.Documents.Excel.WorksheetImage( image ); + + imageShape.TopLeftCornerCell = worksheet.Rows[3].Cells[3]; + imageShape.BottomRightCornerCell = worksheet.Rows[3].Cells[3]; + imageShape.BottomRightCornerPosition = new PointF( 100, 100 ); + + worksheet.Shapes.Add( imageShape ); +``` + ![Displays the results of using the code listed above.](images/ExcelEngine_Resizing_Rows_and_Columns_05.png) + + 2. Increase the height and width of the cell's row and column so the image is not distorted: + + **In Visual Basic:** + +```vb + worksheet.Rows.Item(3).Height = 600 + worksheet.Columns.Item(3).Width = 10000 +``` + + **In C#:** + +```csharp + worksheet.Rows[3].Height = 600; + worksheet.Columns[3].Width = 10000; +``` + + ![Displays the results of using the code listed above.](images/ExcelEngine_Resizing_Rows_and_Columns_06.png) + +5. **Save the workbook.** + + Write the workbook to a file: + + **In Visual Basic:** + +```vb + workbook.Save("C:Resize.xls") +``` + + **In C#:** + +```csharp + workbook.Save( "C:Resize.xls" ); +``` + + + + + + diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/save-and-load-files-in-excel-template-format.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/save-and-load-files-in-excel-template-format.mdx new file mode 100644 index 0000000000..295aa35a5a --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/save-and-load-files-in-excel-template-format.mdx @@ -0,0 +1,62 @@ +--- +title: "Save and Load Files in Excel Template Format" +slug: excelengine-save-and-load-files-in-excel-template-format +--- + +# Save and Load Files in Excel Template Format + +The Infragistics Excel library enables you to define template files in three file formats. The three template formats are the Excel Template format (with extension XLTX), the Excel Macro-Enabled Template format (with extension XLTM), and the Excel 97-2003 Template format (with extension XLT). You can save and load files in these formats. + +The [`WorkbookFormat`](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.WorkbookFormat.html "Link to the Web API Reference Guide to the WorkbookFormat member.") enumeration has the values Excel2007Template, Excel2007MacroEnabledTemplate, and Excel97To2003Template that correspond to the XLTX, XLTM, and XLT formats. The [`CurrentFormat`](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.Workbook~CurrentFormat.html "Link to the Web API Reference Guide to the CurrentFormat member.") property can be used to get the current format of the file. When loading a file if the extension is unknown, the contents of the file will be parsed to dynamically determine the correct format. + +The following code illustrates saving an Excel file in the Excel2007Template format using the [`Save`](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.Workbook~Save.html "Link to the Web API Reference Guide to the Save member.") method. + +**In Visual Basic:** + +```vb +' Create a workbook and set its format to Excel2007Template +Dim newWorkBook As Infragistics.Documents.Excel.Workbook = New Workbook(WorkbookFormat.Excel2007Template) +' Add a worksheet to the workbook +Dim worksheet1 As Infragistics.Documents.Excel.Worksheet = newWorkBook.Worksheets.Add("Sheet1") +' Format a cell in the worksheet +worksheet1.Rows(1).Cells(1).CellFormat.FillPatternBackgroundColor = Color.Red +' Save the workbook +newWorkBook.Save("C:ExcelBookTemplate.xltx") +``` + +**In C#:** + +```csharp +// Create a workbook and set its format to Excel2007Template +Infragistics.Documents.Excel.Workbook newWorkBook = new Workbook(WorkbookFormat.Excel2007Template); +// Add a worksheet to the workbook +Infragistics.Documents.Excel.Worksheet worksheet1 = newWorkBook.Worksheets.Add("Sheet1"); +// Format a cell in the worksheet +worksheet1.Rows[1].Cells[1].CellFormat.FillPatternBackgroundColor = Color.Red; +// Save the workbook +newWorkBook.Save("C:ExcelBookTemplate.xltx"); +``` + +The following code shows you how to modify the format of an Existing Excel file using the [SetCurrentFormat](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.Workbook~SetCurrentFormat.html "Link to the Web API Reference Guide to the SetCurrentFormat member.") method. + +**In Visual Basic:** + +```vb +' Load an Existing Excel file +Dim workbook As Infragistics.Documents.Excel.Workbook = Infragistics.Documents.Excel.Workbook.Load("C:Book1.xlsx") +' Change the format to Excel2007Template +workbook.SetCurrentFormat(WorkbookFormat.Excel2007Template) +' Save the file in the modified format +workbook.Save("C:ModifiedBook1.xltx") +``` + +**In C#:** + +```csharp +// Load an Existing Excel file +Infragistics.Documents.Excel.Workbook workbook = Infragistics.Documents.Excel.Workbook.Load("C:Book1.xlsx"); +// Change the format to Excel2007Template +workbook.SetCurrentFormat(WorkbookFormat.Excel2007Template); +// Save the file in the modified format +workbook.Save("C:ModifiedBook1.xltx"); +``` \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/support-for-excel-workbooks-with-vba-code.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/support-for-excel-workbooks-with-vba-code.mdx new file mode 100644 index 0000000000..50d2af9063 --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/support-for-excel-workbooks-with-vba-code.mdx @@ -0,0 +1,28 @@ +--- +title: "Support for Excel Workbooks with VBA code" +slug: excelengine-support-for-excel-workbooks-with-vba-code +--- + +# Support for Excel Workbooks with VBA code + +Using the Infragistics Excel Engine™, you may want to load and save Microsoft® Excel® Workbooks that have existing VBA macro code embedded in them. It is now possible to round-trip VBA code from both Excel97-2003 and Excel2007 loaded Workbooks, when they are saved out again. This means that you can open an Excel file that contains VBA macros using the Excel Engine, perform any operation on the object model and then save the file and your VBA macros will remain intact and undisturbed. + +Excel97-2003 workbooks that have macros are saved with xls file extension, whereas Excel2007 workbooks having macros are saved as macro-enabled workbooks and therefore they must be saved with a `XLSM` file extension, rather than a `XLSX` extension. + +The example code below shows you how to implement the support for VBA macro round-trips: + +**In Visual Basic:** + + +```vb +Dim workbook As New Infragistics.Documents.Excel.Workbook(WorkbookFormat.Excel2007MacroEnabled) +``` + + + +**In C#:** + + +```csharp +Infragistics.Documents.Excel.Workbook workbook = new Infragistics.Documents.Excel.Workbook (WorkbookFormat.Excel2007MacroEnabled); +``` \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/the-infragistics-excel-engine.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/the-infragistics-excel-engine.mdx new file mode 100644 index 0000000000..72b85a8da2 --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/the-infragistics-excel-engine.mdx @@ -0,0 +1,36 @@ +--- +title: "Using the Infragistics Excel Engine" +slug: excelengine-using-the-infragistics-excel-engine +--- + +# Using the Infragistics Excel Engine + +In this section, you'll find tutorials that walk you through common scenarios when using the Infragistics Excel Engine™. + +- [Accessing Cells and Regions by their Reference Strings](ExcelEngine-Accessing-Cells-and-Regions-by-their-Reference-Strings.html "accessing Cells and Regions by their Reference Strings.") +- [Add an Image to a Worksheet](ExcelEngine-Add-an-Image-to-a-Worksheet.html "add an image to a worksheet.") +- [Add Document Properties to a Workbook](ExcelEngine-Add-Document-Properties-to-a-Workbook.html "add document properties to a workbook.") +- [Adding Shapes to a Worksheet](ExcelEngine-Adding-Shapes-to-a-Worksheet.html "add shapes to a worksheet.") +- [Adding a Hyperlink to a cell in an Excel file](ExcelEngine-Adding-a-Hyperlink-to-a-cell-in-an-Excel-file.html "Adding a Hyperlink to a cell in an Excel file") +- [Applying Styles to Cells](ExcelEngine-Applying-Styles-to-Cells.html "apply styles to cells.") +- [Calculating Order Totals](ExcelEngine-Calculating-Order-Totals.html "calculate order totals.") +- [Create a Workbook](ExcelEngine-Create-a-Workbook.html "create a workbook.") +- [Creating a Workbook in office 2007 XLSX format](ExcelEngine-Creating-a-Workbook-in-office-2007-XLSX-format.html "creating a workbook in office 2007 xlsx format") +- [Comments in a Worksheet Cell](ExcelEngine-Comments-in-a-Worksheet-Cell.html "comments in a Worksheet cell.") +- [Freeze Rows and Columns](ExcelEngine-Freeze-Rows-and-Columns.html "freeze rows and columns in excel engine.") +- [Getting the Value of a Formula from an Excel File](ExcelEngine-Getting-the-value-of-a-Formula-from-an-Excel-File.html "getting the value of a formula from an excel file") +- [Merge Cells](ExcelEngine-Merge-Cells.html "merge cells in excel engine.") +- [Moving a Worksheet within an Excel Workbook](ExcelEngine-Moving-a-Worksheet-within-an-Excel-Workbook.html "Moving a Worksheet within an Excel Workbook.") +- [Populating a Worksheet from a DataSet](ExcelEngine-Populating-a-Worksheet-from-a-DataSet.html "populate a worksheet from a dataset.") +- [Read an Excel File into a Workbook](ExcelEngine-Read-an-Excel-File-Into-a-Workbook.html "read an excel file into a workbook.") +- [Read an Excel 2007 XLSX File Into a Workbook](ExcelEngine-Read-an-Excel-2007-XLSX-File-Into-a-Workbook.html "Read an Excel 2007 XLSX File Into a Workbook.") +- [Resizing Rows and Columns](ExcelEngine-Resizing-Rows-and-Columns.html "resize rows and columns in excel engine.") +- [Save and Load Files in Excel Template Format](/excelengine-save-and-load-files-in-excel-template-format.mdx) +- [Support for Excel Workbooks with VBA code](ExcelEngine-Support-for-Excel-Workbooks-with-VBA-code.html "VBA Support in Excel Workbook.") +- [Write a Workbook to an Excel File](ExcelEngine-Write-a-Workbook-to-an-Excel-File.html "write a workbook to an excel file.") + + + + + + diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/write-a-workbook-to-an-excel-file.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/write-a-workbook-to-an-excel-file.mdx new file mode 100644 index 0000000000..4babb5031d --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/using/write-a-workbook-to-an-excel-file.mdx @@ -0,0 +1,24 @@ +--- +title: "Write a Workbook to an Excel File" +slug: excelengine-write-a-workbook-to-an-excel-file +--- + +# Write a Workbook to an Excel File + +After setting all options and cell values, the last thing you need to do with your workbook is write it to a file so it can be opened in Microsoft® Excel®. This is easily performed with the [`Save`](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.Workbook~Save.html "Link to the Web API Reference Guide to the Save member .") method of [`Workbook`](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.Workbook.html "Link to the Web API Reference Guide to the Workbook member .") object. You can write the workbook to a stream or have it automatically create an xls file for itself. + +> **Note:** Before saving a workbook, it must contain at least one visible worksheet; otherwise, an exception will be thrown when the Save method is called. + +The following code shows how to write your workbook to a file once you are done creating it. + +**In Visual Basic:** + +```vb +workbook.Save("C:Orders.xls") +``` + +**In C#:** + +```csharp +workbook.Save( "C:Orders.xls" ); +``` \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/win-infragistics-excel-engine.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/win-infragistics-excel-engine.mdx new file mode 100644 index 0000000000..02414e2ba6 --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/excel-engine/win-infragistics-excel-engine.mdx @@ -0,0 +1,24 @@ +--- +title: "Infragistics Excel Engine" +slug: win-infragistics-excel-engine +--- + +# Infragistics Excel Engine + +The Infragistics Excel Engine is capable of creating entire Microsoft® Excel® Workbooks, including Worksheets. Use this object model to load Excel workbooks, modify them, and then save them again. + +Click the links below to access important information about the Infragistics Excel Engine. + +- [Understanding the Infragistics Excel Engine](ExcelEngine-Understanding-the-Infragistics-Excel-Engine.html "understanding the infragistics excel engine"): In this section you'll find any information that will help you to better understand the functionalities of the Infragistics Excel Engine, as well as why you would want to use it as part of building your applications. + +- [Using the Infragistics Excel Engine](ExcelEngine-Using-the-Infragistics-Excel-Engine.html "using the infragistics excel engine"): This section contains detailed, step-by-step procedures that guide you through common scenarios that you may need to perform when using the Infragistics Excel Engine. + +- [Deploying the Infragistics Excel Engine](ExcelEngine-Deploying-the-Infragistics-Excel-Engine.html "deploying the infragistics excel engine"): If your application uses the Infragistics Excel Engine, refer to this topic for a list of the Infragistics .NET assemblies that you need to redistribute as part of your application. + +- [API Overview](ExcelEngine-API-Overview.html "api overview for excel engine"): This topic lists the namespaces and classes that you will be working with while programming with the Infragistics Excel Engine. The namespaces and classes listed in this topic link conveniently into the "API Reference Guide" section of the {environment:ProductName} help. + + + + + + diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/igniteui-for-mvc-known-issues.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/igniteui-for-mvc-known-issues.mdx new file mode 100644 index 0000000000..48485b16eb --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/igniteui-for-mvc-known-issues.mdx @@ -0,0 +1,77 @@ +--- +title: "Wrappers Known Issues and Limitations ({environment:ProductNameMVC})" +slug: aspnet-mvc-wrappers-known-issues +--- + +# Wrappers Known Issues and Limitations ({environment:ProductNameMVC}) + + +## Known Issues and Limitations Summary + +The following table summarizes the known issues and limitations of the {environment:ProductNameMVC}. Detailed explanations of some of the issues and the existing workarounds are provided after the summary table. + + +Legend: | +--------|--------- +![](../images/images/positive.png) | Workaround available +![](../images/images/negative.png) | No known workaround +![](../images/images/plannedFix.png) | No known workaround, fix planned + +### {environment:ProductNameMVC} + + +Issue | Description | Status +------|-------------|-------- +[MVC helper-generated code in conjunction with the MVC Loader executes after any custom JavaScript code on a page](#helper-loader-scripts) | When the MVC Loader and an MVC Helper for any control is used in an ASP.NET MVC View, the JavaScript code they generate is executed after any custom page set-up code from the [`$(document).ready()`](http://api.jquery.com/ready/) or [`$(window).load()`](http://api.jquery.com/load-event/) events. | ![](../images/images/positive.png) +[Default value for AutoGenerateLayouts changed](#default-autogeneratelayouts) | In the ASP.NET MVC Helper for grids, the default value of the `AutoGenerateLayouts` property has changed to false in order to avoid an additional remote data request for flat grids. | ![](../images/images/negative.png) +[MVC Loader not functioning correctly in an MVC Razor Layout View](#loader-layout-view) | The ASP.NET MVC Loader cannot initialize before the controls in an actual View when it is included in an ASP.NET MVC Razor Layout View. | ![](../images/images/positive.png) + + +## Known Issues and Limitations Details + +### MVC helper-generated code in conjunction with the MVC Loader executes after any custom JavaScript code on a page + +When the MVC Loader and an MVC Helper for any control is used in an ASP.NET MVC View, the JavaScript code they generate is executed after any custom page set-up code from the [`$(document).ready()`](http://api.jquery.com/ready/) or [`$(window).load()`](http://api.jquery.com/load-event/) events. + +This is because the control is rendered in the body part of a page and script code is usually put in the head part. If the custom code refers to the control rendered by the MVC helper code, it may fail since the control does not exist yet. This is a timing issue and depends on how quickly the loader loads necessary resources. + +> **Workaround** +> +> Attach to the last event in the control initialization sequence like `dataBound` and execute any JavaScript code on the control from the event handler. Alternatively, you can put a short `script` block after the MVC helper like the one in the code snippet below. In the code below, the `customControlLogic()` function handles any custom code. This ensures that code affecting the control will execute after the control has instantiated. + +**In JavaScript:** + +```js +$.ig.loader(function () { + customControlLogic(); +}); +``` + +### Default value for AutoGenerateLayouts changed + +In the ASP.NET MVC Helper for grids, the default value of the `AutoGenerateLayouts` property has changed to false in order to avoid an additional remote data request for flat grids. + +When [`AutoGenerateLayouts`](Infragistics.Web.Mvc~Infragistics.Web.Mvc.GridModel~AutoGenerateLayouts.html) is set to true in remote data binding scenarios such as remote sorting and filtering, there is an additional request to the data source. When `AutoGenerateLayouts` is set to false, that additional request is prevented. + +> **Note:** +> +> This is a breaking change. + +### MVC Loader not functioning correctly in an MVC Razor Layout View + +The {environment:ProductNameMVC} Loader cannot initialize before the controls in an actual View when it is included in an ASP.NET MVC Razor Layout View. + +{environment:ProductNameMVC} do not produce the proper Loader code when the Loader is included in a layout page in an ASP.NET MVC Razor application. They use the regular jQuery `$(function() { })` (document.ready) syntax. This happens only for ASP.NET MVC Razor applications. In MVC ASPX Views with master pages this problem does not occur. + +The reason for this is that layout Views are processed and executed after the particular View is rendered and the Loader has no chance to initialize prior to View rendering. + +> **Workaround** +> +> Do not to include the MVC Loader in an ASP.NET MVC Razor layout page in your applications; instead, include it in each particular View. + + + + + + + diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/igniteui-for-mvc-mobile-known-issues.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/igniteui-for-mvc-mobile-known-issues.mdx new file mode 100644 index 0000000000..bc4371647a --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/igniteui-for-mvc-mobile-known-issues.mdx @@ -0,0 +1,31 @@ +--- +title: "Mobile Wrappers Known Issues and Limitations ({environment:ProductNameMVC})" +slug: aspnet-mvc-mobile-wrappers-known-issues +--- + +# Mobile Wrappers Known Issues and Limitations ({environment:ProductNameMVC}) + + +## Known Issues and Limitations Summary + +The following table summarizes the known issues and limitations of the {environment:ProductNameMVC} mobile. + +Legend: | +--------|--------- +![](../images/images/positive.png) | Workaround available +![](../images/images/negative.png) | No known workaround +![](../images/images/plannedFix.png) | No known workaround, fix planned + + +### {environment:ProductName} ASP.NET MVC Mobile Wrappers (mobile) + +Issue | Description | Status +------|-------------|-------- +Mobile control helpers’ location changed | In 2013.1, the mobile control helpers were part of the *Infragistics.Web.MVC.dll* assembly. In 2013.2, they reside in *Infragistics.Web.MVC.Mobile* dll. | ![](../images/images/positive.png) + + + + + + + diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/images/package.png b/docs/jquery/src/content/en/topics/asp-net-mvc/images/package.png new file mode 100644 index 0000000000..321880853d Binary files /dev/null and b/docs/jquery/src/content/en/topics/asp-net-mvc/images/package.png differ diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/images/packageSource.png b/docs/jquery/src/content/en/topics/asp-net-mvc/images/packageSource.png new file mode 100644 index 0000000000..631396df77 Binary files /dev/null and b/docs/jquery/src/content/en/topics/asp-net-mvc/images/packageSource.png differ diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/images/packageSourceConfig.png b/docs/jquery/src/content/en/topics/asp-net-mvc/images/packageSourceConfig.png new file mode 100644 index 0000000000..60bf9b622e Binary files /dev/null and b/docs/jquery/src/content/en/topics/asp-net-mvc/images/packageSourceConfig.png differ diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/mvcscaffolding/images/Step1.png b/docs/jquery/src/content/en/topics/asp-net-mvc/mvcscaffolding/images/Step1.png new file mode 100644 index 0000000000..833c2217ea Binary files /dev/null and b/docs/jquery/src/content/en/topics/asp-net-mvc/mvcscaffolding/images/Step1.png differ diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/mvcscaffolding/images/Step2.png b/docs/jquery/src/content/en/topics/asp-net-mvc/mvcscaffolding/images/Step2.png new file mode 100644 index 0000000000..a5d6926b84 Binary files /dev/null and b/docs/jquery/src/content/en/topics/asp-net-mvc/mvcscaffolding/images/Step2.png differ diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/mvcscaffolding/images/Step3.png b/docs/jquery/src/content/en/topics/asp-net-mvc/mvcscaffolding/images/Step3.png new file mode 100644 index 0000000000..46297793d6 Binary files /dev/null and b/docs/jquery/src/content/en/topics/asp-net-mvc/mvcscaffolding/images/Step3.png differ diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/mvcscaffolding/mvc-scaffolding.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/mvcscaffolding/mvc-scaffolding.mdx new file mode 100644 index 0000000000..7a73f5f478 --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/mvcscaffolding/mvc-scaffolding.mdx @@ -0,0 +1,51 @@ +--- +title: "{environment:ProductNameMVC} Scaffolder Visual Studio extension" +slug: mvc-scaffolding +--- + +# {environment:ProductNameMVC} Scaffolder Visual Studio extension + +### Introduction + + +With the 2015.2 Release, we introduce the **{environment:ProductNameMVC}** Scaffolder Extension. + +It allows the developer to easily generate MVC wrapper widget declarations, as well as related Controller action methods. +This saves a lot of time for manual setup, referencing and coding. + + +At present, included in the Scaffolding mechanism is the **igGrid** component, with plans to add many more components in the upcoming releases. + + +### Usage + + +In order to take advantage of the Scaffolding mechanism, just follow the steps outlined below: + + +1. Open Visual Studio and the project that you want to use, or a new one. +2. In the *Solution Explorer*, right click on the project node, or on any of the folders in the solution. +3. Click on the "Add" menu item and then on "New Scaffolder Item..." option. +This set of steps is demonstrated in the screenshot below: +![](images/Step1.png) +4. Next, you will be prompted to choose the type of Scaffolding item you want - this can be an "{environment:ProductName} View" or an "{environment:ProductName} Controller with View". +These selection options are demonstrated in the screenshot below: +![](images/Step2.png) +The difference between these two options is that one adds a simple View, whereas the other one creates a View, along with a controller. +5. The next Scaffolder setup steps are optimized for the fasted possible utilization and consist of two easy steps. +In the first tab you set the overall properties for the scaffolded control, such as View Name and Theme. +In the second and last tab, you can choose which properties to enable in the component, such as *Paging*, *Column Hiding*, etc. +This is demonstrated in the screenshot below: +![](images/Step3.png) +6. Once we are done with the settings for the component that we are adding, we click on the "Add" button. This automatically adds a view, containing the widget wrapper definition, along with all the settings that we have enabled. +You can further customize it, add or remove properties and methods, as you would normally do in a standard view, containing an {environment:ProductName} widget wrapper. + +###Prerequisites + +In order to use the ASP.NET Scaffolding feature, you must have: + +1. Microsoft Visual Studio 2017 or higher +2. Web Developer Tools (part of the default Visual Studio 2017 installation) +3. ASP.NET Web Frameworks and Tools 2017 (part of default Visual Studio 2017 installation) + + diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/using-ignite-ui-tag-helpers.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/using-ignite-ui-tag-helpers.mdx new file mode 100644 index 0000000000..79e4a15a80 --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/using-ignite-ui-tag-helpers.mdx @@ -0,0 +1,147 @@ +--- +title: "Using {environment:ProductNameASPNETCore} Tag Helpers" +slug: tag-helpers +--- + +# Using {environment:ProductNameASPNETCore} Tag Helpers + +## Topic Overview + +This topic demonstrates how to configure {environment:ProductNameASPNETCore}™ components by using the Tag Helpers syntax introduced in the new ASP.NET Core 1.0 + +### In this topic + +This topic contains the following sections: + +- [Adding Tag Helpers to scope of the view](#addtaghelper) +- [Configuring data bound control](#control-configuration) +- [Related Content](#related) + +## Adding Tag Helpers to scope of the view + +To add all {environment:ProductName} Tag Helpers to the current view scope, the @addTagHelper directive is used: + +```csharp +@using Infragistics.Web.Mvc + +@addTagHelper *, Infragistics.Web.AspNetCore +``` + +The namespace using is not required if no enumeration options are used. +In order to register only a specific control to the view, the namespace of the control Tag Helper should be specified by ending with wildcard (*). + +For example if the igGrids should be only registered: + +```csharp +@using Infragistics.Web.Mvc + +@addTagHelper Infragistics.Web.Mvc.TagHelpers.Grids.*, Infragistics.Web.AspNetCore +``` + +## Configuring data bound control + +In this section we will demonstrate how to configure igGrid by using the ig-grid Tag Helper. + +Lets have the following model: + +``` +namespace MyApp.Models +{ + using System; + + public class User + { + public int Id { get; set; } + + public string Username { get; set; } + + public string CountryId { get; set; } + + public DateTime BirthDate { get; set; } + + public bool IsAdmin { get; set; } + } +} +``` +we should register it to the view + +```csharp +@model IQueryable +``` + +and lets configure igGrid with updating feature with editor some editors: + +```html + + + + + + + + + + + + + + + + + + + + + + + +``` + +As demonstrated, the control configuration is similar to what would be done using the Html Helpers. +The control is declared as tag and options are set as tag attributes with expcetion of the options +that are set using lambda expression, which are declared as child tags. + +For example the columns with Html Helper are being set: + +```csharp +.Columns(column => +{ + column.For(m => m.Id).HeaderText("ID").Width("150px"); + column.For(m => m.Username).Width("200px"); + column.For(m => m.IsAdmin).HeaderText("Is аdmin").DataType("bool").Width("200px"); + column.For(m => m.BirthDate).HeaderText("Is аdmin").DataType("bool").Width("200px"); + column.For(m => m.CountryId).HeaderText("Country").Width("200px"); +}) +``` + +and by using Tag Helpers: + +```html + + + + + + + +``` + +## Related Content +- [Using {environment:ProductNameASPNETCore}](Using-IgniteUI-Controls-in-ASP.NET-Core-project.html) +- [Adding Controls to an MVC Project](../01_General-and-Getting-Started/00_Adding IgniteUI Controls to an MVC Project.mdx) \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/using-igniteui-controls-in-aspnet-core-project.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/using-igniteui-controls-in-aspnet-core-project.mdx new file mode 100644 index 0000000000..410a09c9cd --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/using-igniteui-controls-in-aspnet-core-project.mdx @@ -0,0 +1,79 @@ +--- +title: "Using {environment:ProductNameASPNETCore}" +slug: mvc-aspnet-core3 +--- + +# Using {environment:ProductNameASPNETCore} + +## Topic Overview + +This topic explains how to get started with {environment:ProductNameASPNETCore}™ components in an ASP.NET Core Web Application built for .NET 7. + +### In this topic + +This topic contains the following sections: + +- [Referencing the Infragistics Web MVC NuGet package](#nuget) +- [Configuring the igUpload Middleware for file upload handling](#middleware) +- [Related Content](#related) + +## Referencing the Infragistics Web MVC NuGet package + +### Using local feed + +With the ASP.NET Core most modules are now wrapped as NuGet packages. This allows you to retrieve and use only the specific modules you need for your application, without having to depend on a common assembly. All dependencies of the specific module will be restored out of the box. + +As such our new {environment:ProductNameASPNETCore} built on top of ASP.NET Core will also ship as a NuGet package. When you are installing the product make sure to include the NuGet packages module that will create a local feed for you to install the required packages from. For more information, please refer to the topic: [Using {environment:ProductName} NuGet packages](/general-and-getting-started/using-ignite-ui-nuget-packages.mdx). + +Control's declaration follows the same syntax as the previous MVC versions. You can refer to the following topic for more information and examples: [Adding Controls to an MVC Project](../01_General-and-Getting-Started/00_Adding IgniteUI Controls to an MVC Project.mdx) + +### Using online private feed + +You can also install Infragistics Web MVC NuGet package using the Infragistics hosted NuGet server. Checkout [Installing {environment:ProductNameMVC} packages from the online private feed](../01_General-and-Getting-Started/18_Using_Ignite_UI_NuGet_Packages.mdx#privateFeedInstallation) topic for more information. + +## Configuring the igUpload Middleware for file upload handling + +In the old ASP.NET in order to handle more robust file uploading capabilities as multiple file uploads, large file uploads and reporting of the progress of an upload you would have to implement an HttpModule and/or HttpHandler in order to plug into the HTTP Request process. +ASP.NET Core introduces a new request pipeline built around a new middleware definition. +The {environment:ProductNameASPNETCore} file upload fully utilizes the new middleware definition model and can be directly plugged into the pipeline. +There are two middleware modules - one for handling uploads and one for receiving commands from the client and returning status feedback to the client. +In order to add them to the pipeline they need to be include in the Configure method of the Startup.cs class before the MVC module. + +**In C#:** + +```csharp + public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory) + { + ... + app.UseUploadModuleMiddleware(); + app.UseUploadHandlerMiddleware(); + + app.UseMvc(routes => + { + routes.MapRoute( + name: "default", + template: "{controller=Home}/{action=Index}/{id?}"); + }); + + ... + } +``` + +Additional settings for the upload can be set in the ConfigureServices method. The options can either be set declaratively or retrieved from the configurations file. + + +**In C#:** + +```csharp + public void ConfigureServices(IServiceCollection services) + { + ... + services.Configure(options => { + options.FileUploadPath = Configuration["UploadAppSettings:fileUploadPath"]; + }); + } +``` + + +## Related Content +- [Adding Controls to an MVC Project](../01_General-and-Getting-Started/00_Adding IgniteUI Controls to an MVC Project.mdx) \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/word-library/understanding-infragistics-word-library/word-about-infragistics-word-library.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/word-library/understanding-infragistics-word-library/word-about-infragistics-word-library.mdx new file mode 100644 index 0000000000..b6afb0fe10 --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/word-library/understanding-infragistics-word-library/word-about-infragistics-word-library.mdx @@ -0,0 +1,161 @@ +--- +title: "About Infragistics Word Library" +slug: word-about-infragistics-word-library +--- + +# About Infragistics Word Library + +This topic explains with examples the possible approaches to creating Word documents: the forward-only streamer approach and the object-model approach. + +The topic is organized as follows: + +- [Approaches to Generating Word Documents](#approaches) + - [Implementing the Forward-Only Streamer Approach](#streamer) + - [Implementating the Object Model Approach](#dom) +- [Related Topics](#related-content) + +## Approaches to Generating Word Documents +The Word library enables you to create Microsoft® Word® documents. Word documents can be created by applying either the forward-only streamer approach or the object-model approach. The advantages and disadvantages of each of them are briefly discussed below. + +The forward-only streaming approach improves performance but decreases the ease of use since the calls to one method must be balanced with calls to another method and the consequence of this error is usually an exception from which execution cannot resume. The alternative object-driven approach is easy to use but in case of large data may consume large amounts of system memory. + +### Implementing the Forward-Only Streamer Approach + +The [WordDocumentWriter](Infragistics.Web.Documents.IO~Infragistics.Documents.Word.WordDocumentWriter.html) is a streamer object that provides a fast, non-cached, forward-only means of generating streams or files containing word processing data. This object is available in the Infragistics.Documents.IO assembly. The WordDocumentWriter object enables you to create Word documents with improved performance through the forward-only streaming approach. + +The WinGridWordWriter™ and WinFormattedTextWordWriter™ components use the WordDocumentWriter object for their exporting to Word functionality. The content exported by these components is directly exported to a file without creating the document in memory and hence use much less RAM and avoid memory issues caused during export of very large data. + +The sections below demonstrate how to use the WordDocumentWriter class with code examples. + +#### Requirements + +A reference to the Infragistics.Web.Documents.IO assembly is required. + +#### Creating an Instance + +The WordDocumentWriter class is abstract, and does not support direct instantiation. Therefore, a static [Create](Infragistics.Web.Documents.IO~Infragistics.Documents.Word.WordDocumentWriter~Create.html) method is exposed to create an instance of a derived class. + +**In C#:** + +```csharp +// Compile the file name +string filename = "C:SampleWordDoc"; + +// Create a new instance of the WordDocumentWriter class using the +// static 'Create' method. +using ( WordDocumentWriter writer = WordDocumentWriter.Create(filename) ) +{ +} +``` + +##### Creating a Blank Word Document + +One of the first things when creating a Word document is to indicate the begining the document. This writes the and tags to the output stream, and prepares the writer for further input. The following code sample demonstrates how to start and close a blank Word document: + +**In C#:** + +```csharp +// Create a new instance of the WordDocumentWriter class using the +// static 'Create' method. +string filename = "C:SampleWordDoc"; + using ( WordDocumentWriter writer = WordDocumentWriter.Create(filename) ) +{ +// Start the document...note that each call to StartDocument must +// be balanced with a corresponding call to EndDocument. +writer.StartDocument(); + +// TODO: SOmething interesting + +// End the document. +writer.EndDocument(); +} +``` + +#### Adding Paragraphs + +The following code sample demonstrates how to add a paragraph with a text run, using a specific font: + +**In C#:** + +```csharp +private void WriteParagraph( + WordDocumentWriter writer, + string text, + Infragistics.Documents.Word.Font font ) +{ + + // Open a paragraph + writer.StartParagraph(); + + // Add a text run with the specified text and font + writer.AddTextRun( text, font ); + + // Close the paragraph. + writer.EndParagraph(); +} +``` + +### Implementating the Object Model Approach + +##### Introduction to the Document Class + +The [Document](Infragistics.Web.Documents.Word~Infragistics.Documents.Word.Document.html) class encapsulates all content associated with the Word document. It is the root-level entity in the object hierarchy, under which all other objects are grouped. For generating a Microsoft Word document you need to create an instance of the [Document](Infragistics.Web.Documents.Word~Infragistics.Documents.Word.Document.html) class, manipulate it using publicly exposed properties and methods, and then call a [Save](Infragistics.Web.Documents.Word~Infragistics.Documents.Word.Document~Save.html) method. + +##### Requirements + +The Object model approach requires a reference to the Infragistics.Documents.Word assembly in addition to the Infragistics.Web.Documents.IO assembly. + +##### Creating a Blank Word Document and Saving It + +The following code sample demonstrates how to use the Document class to create an empty word document and save it to a particular location: + +**In C#:** + +```csharp +// Create a new Word Document +Document doc = new Document(); + +string filename = "C:SampleDoc"; + +// Save the document +doc.Save(filename); +``` + +##### Adding Paragraphs + +The following code sample demonstrates how to use the [Paragraph](Infragistics.Web.Documents.Word~Infragistics.Documents.Word.Paragraph.html) class to add text to a Document, and align that text with the center of the printable area: + +##### Introduction to the Paragraph Class + +The Paragraph class encapsulates a single paragraph in the document. A Paragraph is created by adding a member to the Document’s content blocks collection. A Paragraph provides the ability to display a block of text which can be aligned or indented. The Paragraph class exposes a [ContentRuns](Infragistics.Web.Documents.Word~Infragistics.Documents.Word.Paragraph~ContentRuns.html) collection, which provides a way to add content to the paragraph. + +**In C#:** + +```csharp + // Create a new Word Document +Document doc = new Document(); + +string filename = "C:SampleDoc"; + +// Add a paragraph to the document +Paragraph p = doc.ContentBlocks.AddParagraph(); + +// Center align the paragraph +p.Properties.Alignment = ParagraphAlignment.Center; + +// Add a text run to the paragraph +p.ContentRuns.AddTextRun("Hello World"); + +// Save the document +doc.Save(filename); +``` + +## Related Topics +- [Using the Infragistics Word Library](/using-infragistics-word-library/word-using-the-infragistics-word-library.mdx) +- [Word Document Generation References and Dependencies](/word-word-document-generation-references-and-dependencies.mdx) + + + + + + diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/word-library/understanding-infragistics-word-library/word-understanding-infragistics-word-library.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/word-library/understanding-infragistics-word-library/word-understanding-infragistics-word-library.mdx new file mode 100644 index 0000000000..599003fb0f --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/word-library/understanding-infragistics-word-library/word-understanding-infragistics-word-library.mdx @@ -0,0 +1,18 @@ +--- +title: "Understanding Infragistics Word Library" +slug: word-understanding-infragistics-word-library +--- + +# Understanding Infragistics Word Library +The topics in this section will give you a better idea of why you would want to use Word Library in your applications. + +Click the links below to gain an overview of the Word Library. + +- [About Infragistics Word Library](/word-about-infragistics-word-library.mdx) +- [Word Document Generation References and Dependencies](/word-word-document-generation-references-and-dependencies.mdx) + + + + + + diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/word-library/understanding-infragistics-word-library/word-word-document-generation-references-and-dependencies.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/word-library/understanding-infragistics-word-library/word-word-document-generation-references-and-dependencies.mdx new file mode 100644 index 0000000000..642a33133d --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/word-library/understanding-infragistics-word-library/word-word-document-generation-references-and-dependencies.mdx @@ -0,0 +1,20 @@ +--- +title: "Word Document Generation References and Dependencies" +slug: word-word-document-generation-references-and-dependencies +--- + +# Word Document Generation References and Dependencies + +## Using .NET CLR 4.0 or greater + +When using the Infragistics®Word library and exporters to generate a Microsoft® Word®document, the .NET Framework CLR version 4.0 or greater is required. In this scenario, you will reference the Infragistics.Web.Documents.IO assembly. The compression and packaging functionality that is built into the Word document creation logic relies on the .NET Framework CLR4.0. + +## Related Topics +- [Using the Infragistics Word Library](/using-infragistics-word-library/word-using-the-infragistics-word-library.mdx) +- [About Infragistics Word Library](/word-about-infragistics-word-library.mdx) + + + + + + diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/word-library/using-infragistics-word-library/images/Word_Add_Images_to_Word_Document_01.png b/docs/jquery/src/content/en/topics/asp-net-mvc/word-library/using-infragistics-word-library/images/Word_Add_Images_to_Word_Document_01.png new file mode 100644 index 0000000000..74c8ba4fd9 Binary files /dev/null and b/docs/jquery/src/content/en/topics/asp-net-mvc/word-library/using-infragistics-word-library/images/Word_Add_Images_to_Word_Document_01.png differ diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/word-library/using-infragistics-word-library/images/Word_Add_Table_To_Word_Document_01.png b/docs/jquery/src/content/en/topics/asp-net-mvc/word-library/using-infragistics-word-library/images/Word_Add_Table_To_Word_Document_01.png new file mode 100644 index 0000000000..545fd44356 Binary files /dev/null and b/docs/jquery/src/content/en/topics/asp-net-mvc/word-library/using-infragistics-word-library/images/Word_Add_Table_To_Word_Document_01.png differ diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/word-library/using-infragistics-word-library/images/Word_Add_Table_To_Word_Document_02.png b/docs/jquery/src/content/en/topics/asp-net-mvc/word-library/using-infragistics-word-library/images/Word_Add_Table_To_Word_Document_02.png new file mode 100644 index 0000000000..cdd4481700 Binary files /dev/null and b/docs/jquery/src/content/en/topics/asp-net-mvc/word-library/using-infragistics-word-library/images/Word_Add_Table_To_Word_Document_02.png differ diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/word-library/using-infragistics-word-library/images/Word_Create_a_Word_Document_01.png b/docs/jquery/src/content/en/topics/asp-net-mvc/word-library/using-infragistics-word-library/images/Word_Create_a_Word_Document_01.png new file mode 100644 index 0000000000..aa67c45986 Binary files /dev/null and b/docs/jquery/src/content/en/topics/asp-net-mvc/word-library/using-infragistics-word-library/images/Word_Create_a_Word_Document_01.png differ diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/word-library/using-infragistics-word-library/images/Word_Headers_Footers_and_Page_Numbers_01.png b/docs/jquery/src/content/en/topics/asp-net-mvc/word-library/using-infragistics-word-library/images/Word_Headers_Footers_and_Page_Numbers_01.png new file mode 100644 index 0000000000..34257d2c23 Binary files /dev/null and b/docs/jquery/src/content/en/topics/asp-net-mvc/word-library/using-infragistics-word-library/images/Word_Headers_Footers_and_Page_Numbers_01.png differ diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/word-library/using-infragistics-word-library/images/Word_Headers_Footers_and_Page_Numbers_02.png b/docs/jquery/src/content/en/topics/asp-net-mvc/word-library/using-infragistics-word-library/images/Word_Headers_Footers_and_Page_Numbers_02.png new file mode 100644 index 0000000000..3add253325 Binary files /dev/null and b/docs/jquery/src/content/en/topics/asp-net-mvc/word-library/using-infragistics-word-library/images/Word_Headers_Footers_and_Page_Numbers_02.png differ diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/word-library/using-infragistics-word-library/word-add-images-to-word-document.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/word-library/using-infragistics-word-library/word-add-images-to-word-document.mdx new file mode 100644 index 0000000000..cf8a9bbd7a --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/word-library/using-infragistics-word-library/word-add-images-to-word-document.mdx @@ -0,0 +1,198 @@ +--- +title: "Word Add Images to Word Document" +slug: word-add-images-to-word-document +--- + +# Word Add Images to Word Document + +Infragistics® Word library supports two kinds of images that can be added to a new Word document using the [WordDocumentWriter](Infragistics.Web.Documents.IO~Infragistics.Documents.Word.WordDocumentWriter.html) streamer object: anchored and inline image (also referred to here as a picture). + +Anchored are pictures “anchored” to a specific location within the document with adjacent text flowing around its boundaries. By contrast, “inline” pictures move with the adjacent content within the paragraph. + +The following screenshot shows a Word document created with an anchored and an inline picture. + +![](images/Word_Add_Images_to_Word_Document_01.png) + +> **Note:** The code to add anchored and inline images must be between the [StartParagraph](Infragistics.Web.Documents.IO~Infragistics.Documents.Word.WordDocumentWriter~StartParagraph.html) and [EndParagraph](Infragistics.Web.Documents.IO~Infragistics.Documents.Word.WordDocumentWriter~EndParagraph.html) methods of the WordDocumentWriter object. + +## Adding Anchored Pictures +To add an anchored picture to the current paragraph, you use an instance of the WordDocumentWriter class to call the [CreateAnchoredPicture](Infragistics.Web.Documents.IO~Infragistics.Documents.Word.WordDocumentWriter~CreateAnchoredPicture.html) method which returns an instance of AnchoredPicture. This reference is passed as a parameter to the [AddAnchoredPicture](Infragistics.Web.Documents.IO~Infragistics.Documents.Word.WordDocumentWriter~AddAnchoredPicture.html) method of the WordDocumentWriter object. + +**In C#:** + +```csharp +// Create a new instance of the WordDocumentWriter class using the +// static 'Create' method. +WordDocumentWriter docWriter = WordDocumentWriter.Create(@"C:TestWordDoc.docx"); +// Get Image +Image img = Image.FromFile(@"....Ballon_New_Year.jpg"); +// Create an Anchored Image +AnchoredPicture anchPic = docWriter.CreateAnchoredPicture(img); +docWriter.AddAnchoredPicture(anchPic); +``` + +**In Visual Basic:** + +```vb +' Create a new instance of the WordDocumentWriter class using the +' static 'Create' method. +Dim docWriter As WordDocumentWriter = WordDocumentWriter.Create("C:\TestWordDoc.docx") +' Get Image +Dim img As Image = Image.FromFile("..\..\Ballon_New_Year.jpg") +' Create an Anchored Image +Dim anchPic As AnchoredPicture = docWriter.CreateAnchoredPicture(img) +docWriter.AddAnchoredPicture(anchPic) +``` + +## Adding Inline Pictures +To add inline pictures to a paragraph, you use the the [AddInlinePicture](Infragistics.Web.Documents.IO~Infragistics.Documents.Word.WordDocumentWriter~AddInlinePicture.html) method of the WordDocumentWriter object. + +**In C#:** + +```csharp +// Create a new instance of the WordDocumentWriter class using the +// static 'Create' method. +WordDocumentWriter docWriter = WordDocumentWriter.Create(@"C:TestWordDoc.docx"); +// Get Image +Image img = Image.FromFile(@"....Ballon_New_Year.jpg"); +// Add an Inline picture +docWriter.AddInlinePicture(img); +``` + +**In Visual Basic:** + +```vb +' Create a new instance of the WordDocumentWriter class using the +' static 'Create' method. +Dim docWriter As WordDocumentWriter = WordDocumentWriter.Create("C:\TestWordDoc.docx") +' Get Image +Dim img As Image = Image.FromFile("..\..\Ballon_New_Year.jpg") +' Add an Inline picture +docWriter.AddInlinePicture(img) +``` + +> **Note:** Before the AddAnchoredPicture or AddInlinePicture method is used you must begin a paragraph using the StartParagraph method, or an exception is thrown. + +To define properties of the outline that is displayed around an anchored picture you can use the PictureOultlineProperties class. The [CreatePictureOutlineProperties](Infragistics.Web.Documents.IO~Infragistics.Documents.Word.WordDocumentWriter~CreatePictureOutlineProperties.html) method of the WordDocumentWriter object returns an instance which contains reference to the PictureOutlineProperties class. This reference exposes the various outline properties. These properties can be defined only for anchored pictures. + +**In C#:** + +```csharp +// Define the picture outline properties +PictureOutlineProperties picOutlineProps = docWriter.CreatePictureOutlineProperties(); +picOutlineProps.Color = Color.Violet; +picOutlineProps.Style = PictureOutlineStyle.Single; +picOutlineProps.LineWidth = 1; +' Get Image +Image img = Image.FromFile(@"....Ballon_New_Year.jpg"); +// Create an Anchored Image +AnchoredPicture anchPic = docWriter.CreateAnchoredPicture(img); +anchPic.AlternateTextDescription = "Word Image"; +anchPic.Outline.Color = picOutlineProps.Color; +anchPic.Outline.Style = picOutlineProps.Style; +anchPic.Outline.LineWidth = picOutlineProps.LineWidth; +``` + +**In Visual Basic:** + +```vb +' Define the picture outline properties +Dim picOutlineProps As PictureOutlineProperties = docWriter.CreatePictureOutlineProperties() +picOutlineProps.Color = Color.Violet +picOutlineProps.Style = PictureOutlineStyle.[Single] +picOutlineProps.LineWidth = 1 +' Get Image +Dim img As Image = Image.FromFile("..\..\Ballon_New_Year.jpg") +' Create an Anchored Image +Dim anchPic As AnchoredPicture = docWriter.CreateAnchoredPicture(img) +' Assign the picture outline properties for anchored image +anchPic.AlternateTextDescription = "Word Image" +anchPic.Outline.Color = picOutlineProps.Color +anchPic.Outline.Style = picOutlineProps.Style +anchPic.Outline.LineWidth = picOutlineProps.LineWidth +``` + +## Mixing Anchored and Inline Pictures +**In C#:** + +```csharp +// Create a new instance of the WordDocumentWriter class using the +// static 'Create' method. +WordDocumentWriter docWriter = WordDocumentWriter.Create(@"C:TestWordDoc.docx"); + +docWriter.StartDocument(); +docWriter.StartParagraph(); +docWriter.AddTextRun("A paragraph is a series of sentences that are organized and coherent, and are all related to a single topic. Almost every piece of writing you do that is longer than a few sentences should be organized into paragraphs."); + +// Define the picture outline properties +PictureOutlineProperties picOutlineProps = docWriter.CreatePictureOutlineProperties(); +picOutlineProps.Color = Color.Violet; +picOutlineProps.Style = PictureOutlineStyle.Single; +picOutlineProps.LineWidth =1; +// Get Image +Image img = Image.FromFile(@"....Ballon_New_Year.jpg"); + +// Create an Anchored Image +AnchoredPicture anchPic = docWriter.CreateAnchoredPicture(img); +// Assign the picture outline properties for anchored image +anchPic.AlternateTextDescription = "Word Image"; +anchPic.Outline.Color = picOutlineProps.Color; +anchPic.Outline.Style = picOutlineProps.Style; +anchPic.Outline.LineWidth = picOutlineProps.LineWidth; +docWriter.AddAnchoredPicture(anchPic); + +// Add an Inline picture +docWriter.AddInlinePicture(img); + +docWriter.EndParagraph(); +docWriter.EndDocument(); +docWriter.Close(); +``` + +**In Visual Basic:** + +```vb +' Create a new instance of the WordDocumentWriter class using the +' static 'Create' method. +Dim docWriter As WordDocumentWriter = WordDocumentWriter.Create("C:\TestWordDoc.docx") +docWriter.StartDocument() +docWriter.StartParagraph() +docWriter.AddTextRun("A paragraph is a series of sentences that are organized and coherent, and are all related to a single topic. Almost every piece of writing you do that is longer than a few sentences should be organized into paragraphs.") + +' Define the picture outline properties +Dim picOutlineProps As PictureOutlineProperties = docWriter.CreatePictureOutlineProperties() +picOutlineProps.Color = Color.Violet +picOutlineProps.Style = PictureOutlineStyle.[Single] +picOutlineProps.LineWidth =1 +' Get Image +Dim img As Image = Image.FromFile("..\..\Ballon_New_Year.jpg") + +' Create an Anchored Image +Dim anchPic As AnchoredPicture = docWriter.CreateAnchoredPicture(img) +' Assign the picture outline properties for anchored image +anchPic.AlternateTextDescription = "Word Image" +anchPic.Outline.Color = picOutlineProps.Color +anchPic.Outline.Style = picOutlineProps.Style +anchPic.Outline.LineWidth = picOutlineProps.LineWidth +docWriter.AddAnchoredPicture(anchPic) + +' Add an Inline picture +docWriter.AddInlinePicture(img) + +docWriter.EndParagraph() +docWriter.EndDocument() +docWriter.Close() +``` + +## Related Topics +- [Creating a Word Document](/word-create-a-word-document.mdx) +- [Applying Formatting to Word Document](/word-apply-formatting-to-word-document.mdx) +- [Adding Table to Word Document](/word-add-table-to-word-document.mdx) +- [Headers Footers and Page Numbers](/word-headers-footers-and-page-numbers.mdx) +- [Understanding Infragistics Word Library](/understanding-infragistics-word-library/word-understanding-infragistics-word-library.mdx) + + + + + + diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/word-library/using-infragistics-word-library/word-add-table-to-word-document.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/word-library/using-infragistics-word-library/word-add-table-to-word-document.mdx new file mode 100644 index 0000000000..c2ea68ae78 --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/word-library/using-infragistics-word-library/word-add-table-to-word-document.mdx @@ -0,0 +1,240 @@ +--- +title: "Adding Table to Word Document" +slug: word-add-table-to-word-document +--- + +# Adding Table to Word Document + +This document demonstrates with examples how to add to a Word document a table with a heading row and a nested table. + +The topic is organized as follows: + +- [Introduction](#Intro) +- [Requirements](#Req) +- [Formatting Tables - Overview](#FormatTable) +- [Examples](#Ex) +- [Related Topics](#relatedTopics) + +## Introduction +Infragistics® Word library enables you to insert tables in your Word document. A table will help you align columns and rows of text with ease. + +## Requirements +A reference to the Infragsitics3.Documents.IO assembly is required. + +## Formatting Tables - Overview +Formatting table, table rows, and table cells is handled by various classes, such as: + +- [TableProperties](Infragistics.Web.Documents.IO~Infragistics.Documents.Word.TableProperties.html) +- [TableRowProperties](Infragistics.Web.Documents.IO~Infragistics.Documents.Word.TableRowProperties.html) +- [TableCellProperties](Infragistics.Web.Documents.IO~Infragistics.Documents.Word.TableCellProperties.html) +- [TableBorderProperties](Infragistics.Web.Documents.IO~Infragistics.Documents.Word.TableBorderProperties.html) + +## Examples +### Example: Creating a Table With a Header Row +The code below creates a table with two columns and three rows using the [WordDocumentWriter](Infragistics.Web.Documents.IO~Infragistics.Documents.Word.WordDocumentWriter.html) streamer object. The first row is set as a header row using the [IsHeaderRow](Infragistics.Web.Documents.IO~Infragistics.Documents.Word.TableRowProperties~IsHeaderRow.html) property of the TableRowProperties object. + +## Preview +Following is a preview of the final result: + +![](images/Word_Add_Table_To_Word_Document_01.png) + +### Figure 1: A table with headers in Word document as created by the example code + +## Code Sample +**In C#:** + +```csharp +using Infragistics.Documents.Word; + +// Create a new instance of the WordDocumentWriter class using the +// static 'Create' method. +// This instance must be closed once content is written into Word. +WordDocumentWriter docWriter = WordDocumentWriter.Create(@"C:TestWordDoc.docx"); +docWriter.StartDocument(); + +// Create border properties for Table +TableBorderProperties borderProps = docWriter.CreateTableBorderProperties(); +borderProps.Color = Color.Red; +borderProps.Style = TableBorderStyle.Double; +// Create table properties +TableProperties tableProps = docWriter.CreateTableProperties(); +tableProps.Alignment = ParagraphAlignment.Center; +tableProps.BorderProperties.Color = borderProps.Color; +tableProps.BorderProperties.Style = borderProps.Style; +// Create table row properties +TableRowProperties rowProps = docWriter.CreateTableRowProperties(); +//Make the row a Header +rowProps.IsHeaderRow = true; +// Create table cell properties +TableCellProperties cellProps = docWriter.CreateTableCellProperties(); +cellProps.BackColor = Color.DarkGray; +cellProps.TextDirection = TableCellTextDirection.LeftToRightTopToBottom; + +// Begin a table with 2 columns, and apply the table properties +docWriter.StartTable(2, tableProps); +// Begin a Row and apply table row properties +// This row will be set as the Header row by the row properties +// HEADER ROW +docWriter.StartTableRow(rowProps); +// Cell Value for 1st row 1st column +// Start a Paragraph and add a text run to the cell +docWriter.StartTableCell(cellProps); +docWriter.StartParagraph(); +docWriter.AddTextRun("Header Row1 Col1"); +docWriter.EndParagraph(); +docWriter.EndTableCell(); +// Cell value for 1st row 2nd column +docWriter.StartTableCell(cellProps); +docWriter.StartParagraph(); +docWriter.AddTextRun("Header Row1 Col2"); +docWriter.EndParagraph(); +docWriter.EndTableCell(); +// End the Table Row +docWriter.EndTableRow(); + +// Reset the cell properties, so that the +// cell properties are different from the header cells. +cellProps.Reset(); +cellProps.BackColor = Color.AliceBlue; + +// DATA ROW +docWriter.StartTableRow(); +// Cell Value for 2nd row 1st column +docWriter.StartTableCell(cellProps); +docWriter.StartParagraph(); +docWriter.AddTextRun("A paragraph is a series of sentences that are organized and coherent, and are all related to a single topic. "); +docWriter.EndParagraph(); +docWriter.EndTableCell(); +// Cell Value for 2nd row 2nd column +docWriter.StartTableCell(cellProps); +docWriter.StartParagraph(); +docWriter.AddTextRun("Row2 Col2"); +docWriter.EndParagraph(); +docWriter.EndTableCell(); +docWriter.EndTableRow(); +// DATA ROW +docWriter.StartTableRow(); +// Cell Value for 3rd row 1st column +docWriter.StartTableCell(cellProps); +docWriter.StartParagraph(); +docWriter.AddTextRun("Row3 Col1"); +docWriter.EndParagraph(); +docWriter.EndTableCell(); +// Cell Value for 3rd row 2nd column +docWriter.StartTableCell(cellProps); +docWriter.StartParagraph(); +docWriter.AddTextRun("Row3 Col2"); +docWriter.EndParagraph(); +docWriter.EndTableCell(); +docWriter.EndTableRow(); +docWriter.EndTable(); +docWriter.EndDocument(); +// Close the WordDocumentWriter instance. +docWriter.Close(); +``` +## Example: Creating a Nested Table +Nested Table is a table appearing inside another table. The following code creates a primary table with two columns, two rows and a nested table with two columns, two rows. The first row second column of the primary table holds the nested table. + +## Preview +Following is a preview of the final result: + +![](images/Word_Add_Table_To_Word_Document_02.png) + +###### Figure 2: A nested table in Word document as created by the example code + +## Code Sample +**In C#:** + +```csharp +// Create a new instance of the WordDocumentWriter +// class using the static 'Create' method. +// This instance must be closed once content is written into Word. +WordDocumentWriter docWriter = WordDocumentWriter.Create(@"C:TestWordDoc.docx"); + +TableCellProperties cellProps = docWriter.CreateTableCellProperties(); +cellProps.BackColor = Color.LightGray; +docWriter.StartDocument(); +// Begin a Table with 2 columns +docWriter.StartTable(2); +// Begin a table row +docWriter.StartTableRow(); +// Begin Table cell for first row first column +docWriter.StartTableCell(cellProps); +docWriter.StartParagraph(); +docWriter.AddTextRun("Row1 Col1"); +docWriter.EndParagraph(); +docWriter.EndTableCell(); +// Begin Table cell for first row second column +docWriter.StartTableCell(cellProps); + +#region // Nested Table +docWriter.StartParagraph(); +docWriter.AddTextRun("Nested Table"); +docWriter.AddNewLine(); +docWriter.EndParagraph(); +docWriter.StartTable(2); +docWriter.StartTableRow(); +cellProps.Reset(); +cellProps.BackColor = Color.Yellow; +docWriter.StartTableCell(cellProps); +docWriter.StartParagraph(); +docWriter.AddTextRun("Nested Table Row1 Col1"); +docWriter.EndParagraph(); +docWriter.EndTableCell(); +docWriter.StartTableCell(cellProps); +docWriter.StartParagraph(); +docWriter.AddTextRun("Nested Table Row1 Col2"); +docWriter.EndParagraph(); +docWriter.EndTableCell(); +docWriter.EndTableRow(); +docWriter.StartTableRow(); +docWriter.StartTableCell(cellProps); +docWriter.StartParagraph(); +docWriter.AddTextRun("Nested Table Row2 Col1"); +docWriter.EndParagraph(); +docWriter.EndTableCell(); +docWriter.StartTableCell(cellProps); +docWriter.StartParagraph(); +docWriter.AddTextRun("Nested Table Row2 Col2"); +docWriter.EndParagraph(); +docWriter.EndTableCell(); +docWriter.EndTableRow(); +// For nested tables at least one paragraph must be added after adding the table within the cell. +// The EndTable method exposes an overload that adds an empty paragraph. +docWriter.EndTable(true); +#endregion // Nested Table + +docWriter.EndTableCell(); +docWriter.EndTableRow(); +docWriter.StartTableRow(); +cellProps.Reset(); +cellProps.BackColor = Color.LightGray; +docWriter.StartTableCell(cellProps); +docWriter.StartParagraph(); +docWriter.AddTextRun("Row2 Col1"); +docWriter.EndParagraph(); +docWriter.EndTableCell(); +docWriter.StartTableCell(cellProps); +docWriter.StartParagraph(); +docWriter.AddTextRun("Row2 Col2"); +docWriter.EndParagraph(); +docWriter.EndTableCell(); +docWriter.EndTableRow(); +docWriter.EndTable(); +docWriter.EndDocument(); +// Close the WordDocumentWriter instance. +docWriter.Close(); +``` + +## Related Topics +- [Creating a Word Document](/word-create-a-word-document.mdx) +- [Applying Formatting to Word Document](/word-apply-formatting-to-word-document.mdx) +- [Word Add Images to Word Document](/word-add-images-to-word-document.mdx) +- [Headers Footers and Page Numbers](/word-headers-footers-and-page-numbers.mdx) +- [Understanding Infragistics Word Library](/understanding-infragistics-word-library/word-understanding-infragistics-word-library.mdx) + + + + + + diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/word-library/using-infragistics-word-library/word-api-overview.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/word-library/using-infragistics-word-library/word-api-overview.mdx new file mode 100644 index 0000000000..d2c0270469 --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/word-library/using-infragistics-word-library/word-api-overview.mdx @@ -0,0 +1,17 @@ +--- +title: "Word API Overview" +slug: word-api-overview +--- + +# Word API Overview + +This section lists each namespace that is relevant to the Word Library. We also give you several key classes that you will be using while programming with this Word Library. The namespaces and classes on this page link directly into our API documentation. + +## [Documents.Word Namespace](Infragistics.Web.Documents.IO~Infragistics.Documents.Word_namespace.html) + +- [Hyperlink](Infragistics.Web.Documents.IO~Infragistics.Documents.Word.Hyperlink.html) +- [ParagraphProperties](Infragistics.Web.Documents.IO~Infragistics.Documents.Word.ParagraphProperties.html) +- [SectionProperties](Infragistics.Web.Documents.IO~Infragistics.Documents.Word.SectionProperties.html) +- [SectionHeaderFooterWriterSet](Infragistics.Web.Documents.IO~Infragistics.Documents.Word.SectionHeaderFooterWriterSet.html) +- [Shape](Infragistics.Web.Documents.IO~Infragistics.Documents.Word.Shape.html) +- [TableProperties](Infragistics.Web.Documents.IO~Infragistics.Documents.Word.TableProperties.html) \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/word-library/using-infragistics-word-library/word-apply-formatting-to-word-document.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/word-library/using-infragistics-word-library/word-apply-formatting-to-word-document.mdx new file mode 100644 index 0000000000..69fc430224 --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/word-library/using-infragistics-word-library/word-apply-formatting-to-word-document.mdx @@ -0,0 +1,143 @@ +--- +title: "Applying Formatting to Word Document" +slug: word-apply-formatting-to-word-document +--- + +# Applying Formatting to Word Document + +This topic demonstrates formatting of Word document using the Infragistics® Word library. The code below uses the forward-only [WordDocumentWriter](Infragistics.Web.Documents.IO~Infragistics.Documents.Word.WordDocumentWriter.html) object. The various formatting functionalities discussed in this topic are Font, Paragraph formatting and Page attributes such as size, orientation etc. + +**Note:** A reference to the Infragistics.Web.Documents.IO assembly is required. + +## Designating Fonts +The [Font](Infragistics.Web.Documents.IO~Infragistics.Documents.Word.Font.html) class provides a way to customize the visual attributes of a character or range of characters. + +**In C#:** + +```csharp +using Infragistics.Documents.Word; + +// Create a font, which can be reused in content creation +Infragistics.Documents.Word.Font font = docWriter.CreateFont(); +font.Bold = true; +font.Size = .23f; +font.Underline = Underline.Double; +font.UnderlineColor = Color.Blue; +font.Effects.Capitalization = Capitalization.CapsOn; +``` + +## Paragraph Properties +The [ParagraphProperties](Infragistics.Web.Documents.IO~Infragistics.Documents.Word.ParagraphProperties.html) class provides a way to control formatting for a paragraph. + +**In C#:** + +```csharp +using Infragistics.Documents.Word; + +// Paragraph Properties +// Create a new instance of the WordDocumentWriter class using the +// static 'Create' method. +WordDocumentWriter docWriter = WordDocumentWriter.Create(@"C:TestWordDoc.docx"); +ParagraphProperties paraformat = docWriter.CreateParagraphProperties(); +paraformat.Alignment = ParagraphAlignment.Right; +``` + +## Section Properties +The [SectionProperties](Infragistics.Web.Documents.IO~Infragistics.Documents.Word.SectionProperties.html) class provides a way to control page attributes such as size, margin and orientation. The DefineSection method passing in the SectionProperties instance must be called after the EndParagraph method. + +**In C#:** + +```csharp +using Infragistics.Documents.Word; + +// Create a new instance of the WordDocumentWriter class using the +// static 'Create' method. +WordDocumentWriter docWriter = WordDocumentWriter.Create(@"C:TestWordDoc.docx"); +// Use inches as the unit of measure +docWriter.Unit = UnitOfMeasurement.Inch; +SectionProperties secProperties = docWriter.CreateSectionProperties(); +secProperties.PageSize = new SizeF(7, 5); +secProperties.PageOrientation = PageOrientation.Landscape; +// Applies the section properties(PageSize and Orientation) for the above added paragraphs +docWriter.DefineSection(secProperties); +``` +Following is the complete code with all the above mentioned formatting. + +**In C#:** + +```csharp +using Infragistics.Documents.Word; + +// Create a new instance of the WordDocumentWriter class using the +// static 'Create' method. +// This instance must be closed once content is written into Word. +WordDocumentWriter docWriter = WordDocumentWriter.Create(@"C:TestWordDoc.docx"); +// Use inches as the unit of measure +docWriter.Unit = UnitOfMeasurement.Inch; + +// Create a font, which we can use in content creation +Infragistics.Documents.Word.Font font = docWriter.CreateFont(); +//Start the document...note that each call to StartDocument must +//be balanced with a corresponding call to EndDocument. +docWriter.StartDocument(); +//Start a paragraph +docWriter.StartParagraph(); +// Add a text run for the title, bolded and a little bigger +font.Bold = true; +font.Size = .23f; +font.Underline = Underline.Double; +font.UnderlineColor = Color.Blue; +font.Effects.Capitalization = Capitalization.CapsOn; +docWriter.AddTextRun("Paragraphs and Topic Sentences", font); +//End the paragraph +docWriter.EndParagraph(); + +// Paragraph Properties +ParagraphProperties paraformat = docWriter.CreateParagraphProperties(); +paraformat.Alignment = ParagraphAlignment.Right; + +// Start another Paragraph +// and apply the ParagraphProperties Object +docWriter.StartParagraph(paraformat); +docWriter.AddNewLine(); +// Reset font, and apply different font settings for this paragraph. +font.Reset(); +font.Italic = true; +font.ForeColor = Color.Blue; +font.Effects.TextEffect = FontTextEffect.EngravingOn; +docWriter.AddTextRun("A paragraph is a series of sentences that are organized and coherent, and are all related to a single topic. Almost every piece of writing you do that is longer than a few sentences should be organized into paragraphs. This is because paragraphs show a reader where the subdivisions of an essay begin and end, and thus help the reader see the organization of the essay and grasp its main points.", font); +// End the paragraph +docWriter.EndParagraph(); +//Add an Empty paragraph +docWriter.AddEmptyParagraph(); +docWriter.StartParagraph(); +font.Reset(); +font.ForeColor = Color.Red; +docWriter.AddTextRun("This page is defined by the SectionProperties object. The size of the page is set to 7x5 inches and the Orientation is set to Landscape.", font); +docWriter.EndParagraph(); + +// Set page attributes +SectionProperties secProperties = docWriter.CreateSectionProperties(); +secProperties.PageSize = new SizeF(7, 5); +secProperties.PageOrientation = PageOrientation.Landscape; +// Applies the section properties(PageSize and Orientation) for the above added paragraphs +docWriter.DefineSection(secProperties); + +// End the Document +docWriter.EndDocument(); +// Close the writer +docWriter.Close(); +``` + +## Related Topics +- [Creating a Word Document](/word-create-a-word-document.mdx) +- [Adding Table to Word Document](/word-add-table-to-word-document.mdx) +- [Word Add Images to Word Document](/word-add-images-to-word-document.mdx) +- [Headers Footers and Page Numbers](/word-headers-footers-and-page-numbers.mdx) +- [Understanding Infragistics Word Library](/understanding-infragistics-word-library/word-understanding-infragistics-word-library.mdx) + + + + + + diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/word-library/using-infragistics-word-library/word-create-a-word-document.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/word-library/using-infragistics-word-library/word-create-a-word-document.mdx new file mode 100644 index 0000000000..2df2b82dee --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/word-library/using-infragistics-word-library/word-create-a-word-document.mdx @@ -0,0 +1,67 @@ +--- +title: "Creating a Word Document" +slug: word-create-a-word-document +--- + +# Creating a Word Document + +This topic illustrates how to create a Word document using the forward-only [WordDocumentWriter](Infragistics.Web.Documents.IO~Infragistics.Documents.Word.WordDocumentWriter.html) streamer object. The static Create method of the `WordDocumentWriter` object creates a new Word document. + +The following screenshot shows a Word document created with text and hyperlink: + +![](images/Word_Create_a_Word_Document_01.png) + +The various properties of the document such as `Author`, `Title`, `Subject` etc., can be set using the [DocumentProperties](Infragistics.Web.Documents.IO~Infragistics.Documents.Word.WordDocumentWriter~DocumentProperties.html) property of the `WordDocumentWriter` object. These information can be accessed in Word 2007 by clicking the Office Button and navigating to Prepare > Properties section. Similarly in Word 2010 by clicking the File tab the document properties can be accessed from the right side of the backstage view. + +In order to start writing into the Word document use the [StartDocument](Infragistics.Web.Documents.IO~Infragistics.Documents.Word.WordDocumentWriter~StartDocument.html) method that must be balanced with a corresponding call to the [EndDocument](Infragistics.Web.Documents.IO~Infragistics.Documents.Word.WordDocumentWriter~EndDocument.html) method. + +A Paragraph provides the ability to display a block of text which can be aligned or indented. Use the [StartParagraph](Infragistics.Web.Documents.IO~Infragistics.Documents.Word.WordDocumentWriter~StartParagraph.html) method to begin a paragraph. The [AddTextRun](Infragistics.Web.Documents.IO~Infragistics.Documents.Word.WordDocumentWriter~AddTextRun.html) method provides a way to add content to the paragraph. Once content is added the paragraph must be closed using the [EndParagraph](Infragistics.Web.Documents.IO~Infragistics.Documents.Word.WordDocumentWriter~EndParagraph.html) method. + +> **Note:** A reference to the `Infragistics.Web.Documents.IO` assembly is required for the following code. + +> **Note:** When using the `WordDocumentWriter` object for creating Word documents the streamer object must be disposed or closed using either the Dispose or Close method. + +**In C#:** + +```csharp +using Infragistics.Documents.Word; + +// Create a new instance of the WordDocumentWriter class +// using the static 'Create' method. +WordDocumentWriter docWriter = WordDocumentWriter.Create(@"C:TestWordDoc.docx"); +// Use inches as the unit of measure +docWriter.Unit = UnitOfMeasurement.Inch; +// Set the document properties, such as title, author, etc. +docWriter.DocumentProperties.Title = "Sample Document"; +docWriter.DocumentProperties.Author = string.Format("Infragistics.{0}", SystemInformation.UserName); +// Start the document...note that each call to +// StartDocument must be balanced with a corresponding call to EndDocument. +docWriter.StartDocument(); +// Start a paragraph +docWriter.StartParagraph(); +// Add a text run for the title +docWriter.AddTextRun("Paragraphs and Topic Sentences"); +// Add a new line +docWriter.AddNewLine(); +// Add a Hyperlink +docWriter.AddHyperlink("http://www.infragistics.com", "Infragistics Inc."); +// End the paragraph +docWriter.EndParagraph(); +// End Document +docWriter.EndDocument(); +// Close the writer +docWriter.Close(); +``` + +## Related Topics +- [Applying Formatting to Word Document](/word-apply-formatting-to-word-document.mdx) +- [Adding Table to Word Document](/word-add-table-to-word-document.mdx) +- [Word Add Images to Word Document](/word-add-images-to-word-document.mdx) +- [Headers Footers and Page Numbers](/word-headers-footers-and-page-numbers.mdx) +- [Understanding Infragistics Word Library](/understanding-infragistics-word-library/word-understanding-infragistics-word-library.mdx) + + + + + + diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/word-library/using-infragistics-word-library/word-creating-word-document-using-object-model-approach.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/word-library/using-infragistics-word-library/word-creating-word-document-using-object-model-approach.mdx new file mode 100644 index 0000000000..ae1013d643 --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/word-library/using-infragistics-word-library/word-creating-word-document-using-object-model-approach.mdx @@ -0,0 +1,258 @@ +--- +title: "Creating Word Document Using Object Model Approach" +slug: word-creating-word-document-using-object-model-approach +--- + +# Creating Word Document Using Object Model Approach + +This topic illustrates how to create a Microsoft®Word® document and its layout elements using the object model approach. + +## Overview +The topic is organized as follows: + +- [Creating a Simple Word Document](#CreateSimpleDoc) +- [Adding a Hyperlink](#AddHyperlink) +- [Adding a Picture](#AddPic) + - [Adding an Anchored Picture](#AddAnchPic) + - [Adding an Inline Picture](#AddInlinePic) +- [Setting the Header and the Footer](#HeaderFooter) + - [Adding and Setting the Header](#Header) + - [Adding and Setting the Footer](#Footer) +- [Example Code: Full Code Sample](#ExCode) +- [Related Topics](#RelatedTopics) + +## Creating a Simple Word Document +The entire Word document is encapsulated by the [Document](Infragistics.Web.Documents.Word~Infragistics.Documents.Word.Document.html) class. The Document class is the root-level entity in the object hierarchy, under which all other objects are grouped. It serves as a container for block-level content such as paragraphs and tables. Block-level content is contained within the [ContentBlocks](Infragistics.Web.Documents.Word~Infragistics.Documents.Word.Document~ContentBlocks.html) collection. + +Individual paragraphs in the document are encapsulated by the [Paragraph](Infragistics.Web.Documents.Word~Infragistics.Documents.Word.Paragraph.html) class. The Paragraph class exposes a [ContentRuns](Infragistics.Web.Documents.Word~Infragistics.Documents.Word.Paragraph~ContentRuns.html) collection, which provides a way to add content to the paragraph. + +To generate a Word document, create an instance of the Document class and manipulate it using publicly exposed properties and methods, and then call a [Save](Infragistics.Web.Documents.Word~Infragistics.Documents.Word.Document~Save.html) method. + +The various properties of the Word document such as Author, Title, Subject, etc., can be set using the [DocumentProperties](Infragistics.Web.Documents.Word~Infragistics.Documents.Word.Document~DocumentProperties.html) property. These information can be accessed in Word 2007 by clicking the Office Button and navigating to Prepare > Properties section. Similarly in Word 2010 by clicking the File tab the document properties can be accessed from the right side of the backstage view. + +**In C#:** + +```csharp +using Infragistics.Documents.Word; + +string documentName = @"C:TestWordDOMDoc.docx"; +Document doc = new Document(); +// Set the document properties, such as title, author, etc. +doc.DocumentProperties.Title = "Sample Document"; +doc.DocumentProperties.Author = string.Format("Infragistics.{0}", SystemInformation.UserName); +Infragistics.Documents.Word.Font font = doc.CreateFont(); +font.Bold = true; +font.Size = 15; +font.Underline = Underline.Double; +// Add a Paragraph to the document +Paragraph para1 = doc.ContentBlocks.AddParagraph(); +para1.ContentRuns.AddTextRun("Sample Word Document with Hyperlinks,Images,Headers and Footers", font); +``` + +## Adding a Hyperlink to the Word Document +The Infragistics Word library supports hyperlinks. The [AddHyperlink](Infragistics.Web.Documents.Word~Infragistics.Documents.Word.ContentRunsCollection~AddHyperlink.html) method adds a TextHyperlink to the associated paragraph. + +**In C#:** + +```csharp +using Infragistics.Documents.Word; + +// Add a Paragraph to the document +Paragraph para2 = doc.ContentBlocks.AddParagraph(); +para2.ContentRuns.AddTextRun("Hyperlink: "); +// Add a Hyperlink +para2.ContentRuns.AddHyperlink("http://www.infragistics.com", "Infragistics Inc."); +``` + +## Adding a Picture +### Adding Anchored Picture +The [AnchoredPicture](Infragistics.Web.Documents.IO~Infragistics.Documents.Word.AnchoredPicture.html) class encapsulates a picture or image that is anchored to a specific location within the document. [AddAnchoredPicture](Infragistics.Web.Documents.Word~Infragistics.Documents.Word.AnchorsCollection~AddAnchoredPicture.html) method adds an anchored picture to the associated paragraph. + +**In C#:** + +```csharp +using Infragistics.Documents.Word; + +// Get Image +Image img = Image.FromFile(@"....Ballon_New_Year.jpg"); +// Add a paragraph to the Document +Paragraph para3 = doc.ContentBlocks.AddParagraph(); +para3.ContentRuns.AddTextRun("Anchored Picture: An Anchored picture or image is one that is anchored to a specific location within the document. Unlike an inline picture, which moves along with adjacent content, an Anchored Picture remains at a fixed location within the paragraph, with adjacent text flowing around it."); + +// Create an Anchored picture +AnchoredPicture anchPic = doc.CreateAnchoredPicture(img); +// Assign the picture outline properties for anchored image +anchPic.AlternateTextDescription = "Word Image"; +anchPic.Outline.Color = Color.Brown; +anchPic.Outline.Style = PictureOutlineStyle.Single; +anchPic.Outline.LineWidth = 1; +// Add the Anchored picture to anchor section of the paragraph +para3.Anchors.AddAnchoredPicture(anchPic); +``` + +### Adding Inline Picture +The [InlinePicture](Infragistics.Web.Documents.IO~Infragistics.Documents.Word.InlinePicture.html) class enacpsulates a picture, which appears inline with the textual content within the document. [AddInlinePicture](Infragistics.Web.Documents.Word~Infragistics.Documents.Word.ContentRunsCollection~AddInlinePicture.html) method adds an inline picture to the associated paragraph. + +**In C#:** + +```csharp +using Infragistics.Documents.Word; + +// Get Image +Image img = Image.FromFile(@"....Ballon_New_Year.jpg"); + +// Add a Paragraph to the document +Paragraph para4 = doc.ContentBlocks.AddParagraph(); +para4.ContentRuns.AddTextRun("Inline Picture: An inline picture moves with the adjacent content"); + +// Create an Inline picture +InlinePicture inlinePic = doc.CreateInlinePicture(img); +inlinePic.AlternateTextDescription = "Word Image"; +// Add the Inline picture to a content section of the paragraph +para4.ContentRuns.AddInlinePicture(inlinePic); +``` +The [Section](Infragistics.Web.Documents.Word~Infragistics.Documents.Word.Section.html) class encapsulates the pagination properties and header/footer content for a document section. + +## Setting the Header and the Footer +### Adding and Setting the Header +The following code example shows how to display text and image in the header section of all pages. + +**In C#:** + +```csharp +using Infragistics.Documents.Word; + +// Add a paragraph to the Document +Paragraph para5 = doc.ContentBlocks.AddParagraph(); +// Add text to Paragraph +Section sec = doc.Sections.Add(para5); + +// Header +Paragraph headerPara = sec.HeaderAllPages.ContentBlocks.AddParagraph(); +// The header text alignment is set to right +headerPara.Properties.Alignment = ParagraphAlignment.Right; +// Create an Anchored Image to display in the Header +AnchoredPicture headeranchPic = doc.CreateAnchoredPicture(img); +// Display Anchored Image in Header +headerPara.Anchors.AddAnchoredPicture(headeranchPic); +// Display Text in Header +headerPara.ContentRuns.AddTextRun("This is a header"); +``` + +### Adding and Setting the Footer +The [AddPageNumberField](Infragistics.Web.Documents.Word~Infragistics.Documents.Word.ContentRunsCollection~AddPageNumberField.html) method adds a PageNumberField to the associated paragraph. + +**In C#:** + +```csharp +using Infragistics.Documents.Word; + +// Add a paragraph to the Document +Paragraph para5 = doc.ContentBlocks.AddParagraph(); +// Add section which defines pagination for specified paragraph +Section sec = doc.Sections.Add(para5); + +//Footer +Paragraph footerPara = sec.FooterAllPages.ContentBlocks.AddParagraph(); +// The footer text alignment is set to right +footerPara.Properties.Alignment = ParagraphAlignment.Right; +// Display Text in Footer +footerPara.ContentRuns.AddTextRun("This is a footer"); +// Add Page numbers to the Footer +footerPara.ContentRuns.AddPageNumberField(PageNumberFieldFormat.Ordinal); +``` + +## Example Code: Full Code Sample +Following is the complete functional code used in the examples in this topic. + +**In C#:** + +```csharp +using Infragistics.Documents.Word; + +string documentName = @"C:TestWordDOMDoc.docx"; +Document doc = new Document(); +// Set the document properties, such as title, author, etc. +doc.DocumentProperties.Title = "Sample Document"; +doc.DocumentProperties.Author = string.Format("Infragistics.{0}", SystemInformation.UserName); +Infragistics.Documents.Word.Font font = doc.CreateFont(); +font.Bold = true; +font.Size = 15; +font.Underline = Underline.Double; +// Add a Paragraph to the document +Paragraph para1 = doc.ContentBlocks.AddParagraph(); +para1.ContentRuns.AddTextRun("Sample Word Document with Hyperlinks,Images,Headers and Footers", font); +para1.ContentRuns.AddNewLine(); +Paragraph para2 = doc.ContentBlocks.AddParagraph(); +para2.ContentRuns.AddTextRun("Hyperlink: "); + +// Add a Hyperlink +para2.ContentRuns.AddHyperlink("http://www.infragistics.com", "Infragistics Inc."); +para2.ContentRuns.AddNewLine(); + +// Get Image +Image img = Image.FromFile(@"....Ballon_New_Year.jpg"); +// Add a paragraph to the Document +Paragraph para3 = doc.ContentBlocks.AddParagraph(); +para3.ContentRuns.AddTextRun("Anchored Picture: An Anchored picture or image is one that is anchored to a specific location within the document. Unlike an inline picture, which moves along with adjacent content, an Anchored Picture remains at a fixed location within the paragraph, with adjacent text flowing around it."); + +// Create an Anchored picture +AnchoredPicture anchPic = doc.CreateAnchoredPicture(img); +// Assign the picture outline properties for anchored image +anchPic.AlternateTextDescription = "Word Image"; +anchPic.Outline.Color = Color.Brown; +anchPic.Outline.Style = PictureOutlineStyle.Single; +anchPic.Outline.LineWidth = 1; +// Add the Anchored picture to anchor section of the paragraph +para3.Anchors.AddAnchoredPicture(anchPic); + +// Add a Paragraph to the document +Paragraph para4 = doc.ContentBlocks.AddParagraph(); +para4.ContentRuns.AddTextRun("Inline Picture: An inline picture moves with the adjacent content"); + +// Create an Inline picture +InlinePicture inlinePic = doc.CreateInlinePicture(img); +inlinePic.AlternateTextDescription = "Word Image"; +// Add the Inline picture to a content section of the paragraph +para4.ContentRuns.AddInlinePicture(inlinePic); + +// Add a paragraph to the Document +Paragraph para5 = doc.ContentBlocks.AddParagraph(); +// Add text to Paragraph +Section sec = doc.Sections.Add(para5); +// Header +Paragraph headerPara = sec.HeaderAllPages.ContentBlocks.AddParagraph(); +// The header text alignment is set to right +headerPara.Properties.Alignment = ParagraphAlignment.Right; +// Create an Anchored Image to display in the Header +AnchoredPicture headeranchPic = doc.CreateAnchoredPicture(img); +// Display Anchored Image in Header +headerPara.Anchors.AddAnchoredPicture(headeranchPic); +// Display Text in Header +headerPara.ContentRuns.AddTextRun("This is a header"); + +//Footer +Paragraph footerPara = sec.FooterAllPages.ContentBlocks.AddParagraph(); +// The footer text alignment is set to right +footerPara.Properties.Alignment = ParagraphAlignment.Right; +// Display Text in Footer +footerPara.ContentRuns.AddTextRun("This is a footer"); +// Add Page numbers to the Footer +footerPara.ContentRuns.AddPageNumberField(PageNumberFieldFormat.Ordinal); + +doc.Save(documentName); +``` + +## Related Topics +- [Creating a Word Document](/word-create-a-word-document.mdx) +- [Applying Formatting to Word Document](/word-apply-formatting-to-word-document.mdx) +- [Adding Table to Word Document](/word-add-table-to-word-document.mdx) +- [Adding Images to Word Document](/word-add-images-to-word-document.mdx) +- [Headers Footers and Page Numbers](/word-headers-footers-and-page-numbers.mdx) +- [Understanding Infragistics Word Library](/understanding-infragistics-word-library/word-understanding-infragistics-word-library.mdx) + + + + + + diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/word-library/using-infragistics-word-library/word-headers-footers-and-page-numbers.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/word-library/using-infragistics-word-library/word-headers-footers-and-page-numbers.mdx new file mode 100644 index 0000000000..27ca572ebd --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/word-library/using-infragistics-word-library/word-headers-footers-and-page-numbers.mdx @@ -0,0 +1,142 @@ +--- +title: "Headers Footers and Page Numbers" +slug: word-headers-footers-and-page-numbers +--- + +# Headers Footers and Page Numbers +Using the Infragistics® Word library you can create headers and footers that may be as simple as a document title and a page number to images, multiple paragraphs, tables and hyperlinks. + +The following screenshots depicts a Word document created with text and image in the `Header`: + +![](images/Word_Headers_Footers_and_Page_Numbers_01.png) + +The following screenshots depicts a Word document created with text and page number in the `Footer`: + +![](images/Word_Headers_Footers_and_Page_Numbers_02.png) + +> **Note:** A reference to the `Infragistics.Web.Documents.IO` assembly is required for the following code. + +## Headers and Footers +To write content to the headers and footers in a document section you must use the [SectionHeaderFooterWriterSet](Infragistics.Web.Documents.IO~Infragistics.Documents.Word.SectionHeaderFooterWriterSet.html) class that holds one or more [WordHeaderFooterWriter](Infragistics.Web.Documents.IO~Infragistics.Documents.Word.WordHeaderFooterWriter.html) instances. The headers and footers can either be set to all pages or to the first page only. Text, image, multiple paragraphs, hyperlinks can all be added to the header and footer sections. + +**In C#:** + +```csharp +using Infragistics.Documents.Word; + +// Specify the default parts for header and footer +SectionHeaderFooterParts parts = SectionHeaderFooterParts.HeaderAllPages | SectionHeaderFooterParts.FooterAllPages; +SectionHeaderFooterWriterSet writerSet = docWriter.AddSectionHeaderFooter(parts); +// Set text for Header +writerSet.HeaderWriterAllPages.Open(); +writerSet.HeaderWriterAllPages.StartParagraph(); +writerSet.HeaderWriterAllPages.AddTextRun("This text appears in the Header."); +writerSet.HeaderWriterAllPages.EndParagraph(); +writerSet.HeaderWriterAllPages.Close(); +// Set text for Footer +writerSet.FooterWriterAllPages.Open(); +writerSet.FooterWriterAllPages.StartParagraph(); +writerSet.FooterWriterAllPages.AddTextRun("This text appears in the footer."); +writerSet.FooterWriterAllPages.EndParagraph(); +writerSet.FooterWriterAllPages.Close(); +``` + +## Page Numbers +Page numbers are possible by adding the right settings to either the header or footer of a Word document using the [AddPageNumberField](Infragistics.Web.Documents.IO~Infragistics.Documents.Word.WordHeaderFooterWriter~AddPageNumberField.html) method. This method accepts the `PageNumberFieldType` enum value and font object as optional argument. The `PageNumberFieldType` enum offers several formats such as `Decimal`, `RomanLowercase`, `TextCardinal`, `Ordinal` etc., for the page numbers. + +**In C#:** + +```csharp +using Infragistics.Documents.Word; + +// Add Page numbers to the Footer +writerSet.FooterWriterAllPages.AddPageNumberField(PageNumberFieldFormat.Ordinal, font); +``` +The following complete code adds header, footer and page numbers to the Word document. + +**In C#:** + +```csharp +using Infragistics.Documents.Word; + +// Create a new instance of the WordDocumentWriter class using the +// static 'Create' method. +// This instance must be closed once content is written into Word. +WordDocumentWriter docWriter = WordDocumentWriter.Create(@"C:TestWordDoc.docx"); +// Use inches as the unit of measure +docWriter.Unit = UnitOfMeasurement.Inch; +// Create a font, which we can use in content creation +Infragistics.Documents.Word.Font font = docWriter.CreateFont(); +font.Bold = true; +// Paragraph Properties +ParagraphProperties paraformat = docWriter.CreateParagraphProperties(); + +//Start the document...note that each call to StartDocument must +//be balanced with a corresponding call to EndDocument. +docWriter.StartDocument(); +//Start a paragraph +docWriter.StartParagraph(); +docWriter.AddNewLine(); +docWriter.AddTextRun("This document demonstrates headers, footers and page numbers.", font); +// End the paragraph +docWriter.EndParagraph(); +// Create a page break +paraformat.PageBreakBefore = true; +docWriter.StartParagraph(paraformat); +docWriter.EndParagraph(); +// Header and Footer +// Specify the default parts for header and footer. +SectionHeaderFooterParts parts = SectionHeaderFooterParts.HeaderAllPages | SectionHeaderFooterParts.FooterAllPages; +SectionHeaderFooterWriterSet writerSet = docWriter.AddSectionHeaderFooter(parts); +// Get Image to display in the Header +Image img = Image.FromFile(@"....Ballon_New_Year.jpg"); +// Create an Anchored Image +AnchoredPicture anchPic = docWriter.CreateAnchoredPicture(img); +anchPic.Size = new SizeF(0.75f, 0.75f); +// Reset paragraph properties +paraformat.Reset(); +paraformat.Alignment = ParagraphAlignment.Right; +// Header +writerSet.HeaderWriterAllPages.Open(); +// The header text alignment is set to right +// by passing in the ParagraphProperties instance +writerSet.HeaderWriterAllPages.StartParagraph(paraformat); +// Add Image to the header +writerSet.HeaderWriterAllPages.AddAnchoredPicture(anchPic); +// Add text to the Header +writerSet.HeaderWriterAllPages.AddTextRun("This text appears in the Header."); +writerSet.HeaderWriterAllPages.EndParagraph(); +writerSet.HeaderWriterAllPages.StartParagraph(paraformat); +// Add text to the Header +writerSet.HeaderWriterAllPages.AddTextRun("Multiple paragraphs can be added to the Header."); +writerSet.HeaderWriterAllPages.EndParagraph(); +writerSet.HeaderWriterAllPages.Close(); +//Footer +writerSet.FooterWriterAllPages.Open(); +// The footer text alignment is set to right +// by passing in the ParagraphProperties instance +writerSet.FooterWriterAllPages.StartParagraph(paraformat); +writerSet.FooterWriterAllPages.AddTextRun("This text appears in the footer. "); +// Add Page numbers to the Footer +writerSet.FooterWriterAllPages.AddPageNumberField(PageNumberFieldFormat.Ordinal, font); +writerSet.FooterWriterAllPages.EndParagraph(); +writerSet.FooterWriterAllPages.Close(); + +// End the Document +docWriter.EndDocument(); +// Close the writer +docWriter.Close(); +``` + +## Related Topics +- [Creating a Word Document](/word-create-a-word-document.mdx) +- [Applying Formatting to Word Document](/word-apply-formatting-to-word-document.mdx) +- [Adding Table to Word Document](/word-add-table-to-word-document.mdx) +- [Word Add Images to Word Document](/word-add-images-to-word-document.mdx) +- [Understanding Infragistics Word Library](/understanding-infragistics-word-library/word-understanding-infragistics-word-library.mdx) + + + + + + diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/word-library/using-infragistics-word-library/word-using-the-infragistics-word-library.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/word-library/using-infragistics-word-library/word-using-the-infragistics-word-library.mdx new file mode 100644 index 0000000000..dfa31be7bf --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/word-library/using-infragistics-word-library/word-using-the-infragistics-word-library.mdx @@ -0,0 +1,21 @@ +--- +title: "Using the Infragistics Word Library" +slug: word-using-the-infragistics-word-library +--- + +# Using the Infragistics Word Library + +This section is your gateway to important task-based information that will help you to effectively use the various features and functionalities provided by the Word Library. + +- [Creating a Word Document](/word-create-a-word-document.mdx) +- [Applying Formatting to Word Document](/word-apply-formatting-to-word-document.mdx) +- [Adding Table to Word Document](/word-add-table-to-word-document.mdx) +- [Word Add Images to Word Document](/word-add-images-to-word-document.mdx) +- [Headers Footers and Page Numbers](/word-headers-footers-and-page-numbers.mdx) +- [Creating Word Document Using Object Model Approach](/word-creating-word-document-using-object-model-approach.mdx) + + + + + + diff --git a/docs/jquery/src/content/en/topics/asp-net-mvc/word-library/word-infragistics-word-library.mdx b/docs/jquery/src/content/en/topics/asp-net-mvc/word-library/word-infragistics-word-library.mdx new file mode 100644 index 0000000000..178968e93d --- /dev/null +++ b/docs/jquery/src/content/en/topics/asp-net-mvc/word-library/word-infragistics-word-library.mdx @@ -0,0 +1,24 @@ +--- +title: "Infragistics Word Library" +slug: word-infragistics-word-library +--- + +# Infragistics Word Library +This section contains valuable information about Word Library, ranging from what the Word Library does and why you would want to use it in your application, to step-by-step procedures on how to accomplish a common task. + +Click the links below to access important information about the Word Library. + +## [Understanding Infragistics Word Library](/understanding-infragistics-word-library/word-understanding-infragistics-word-library.mdx) +In this section you'll find any information that will help you to better understand the functionalities of the Word Library, as well as why you would want to use it to as part of building your applications. + +## [Using the Infragistics Word Library](/using-infragistics-word-library/word-using-the-infragistics-word-library.mdx) +In this section, you'll find short, useful topics with sample code snippets that demonstrate how to perform specific tasks with the Word Library. + +## [Word API Overview](Word-API-Overview.html "api overview for Word Library") +This topic lists the namespaces and classes that you will be working with while programming with the Word Library. The namespaces and classes listed in this topic link conveniently into the "API Reference Guide" section of the {environment:ProductName} help. + + + + + + diff --git a/docs/jquery/src/content/en/topics/controls/igbulletgraph/accessibility-compliance.mdx b/docs/jquery/src/content/en/topics/controls/igbulletgraph/accessibility-compliance.mdx new file mode 100644 index 0000000000..4375146d46 --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igbulletgraph/accessibility-compliance.mdx @@ -0,0 +1,57 @@ +--- +title: "Accessibility Compliance (igBulletGraph)" +slug: igbulletgraph-accessibility-compliance +--- + +# Accessibility Compliance (igBulletGraph) + + +## Topic Overview + +#### Purpose + +This topic explains the `igBulletGraph`™ control's accessibility features and demonstrates how to achieve accessibility compliance for pages containing bullet graphs. + +#### Required background + +The following topics are prerequisites to understanding this topic: + +- [*igBulletGraph* Overview](/igbulletgraph-overview.mdx): This topic provides conceptual information about the `igBulletGraph` control including its main features, minimum requirements, and user functionality. + +- [Adding *igBulletGraph*](/adding/igbulletgraph-adding.mdx): This is a group of topics demonstrating how to add the `igBulletGraph` control to an HTML page and to an ASP.NET MVC application. + + +## Accessibility Compliance Reference + +#### Introduction + +All of the {environment:ProductName}™ controls and components comply with Section 508, Subpart 1194.22 of the Rehabilitation Act of 1973. The table below contains the specific rules of Subpart 1194.22 that pertain to the control. Also, detailed is how the igBulletGraph control complies with each of these rules. + +In some cases, to meet the requirements of each accessibility rule, you may need to interact with the control by setting a specific property, but in other cases, the control performs these tasks for you. + +#### Accessibility compliance reference summary + +The following table summarizes the accessibility compliance features of igBulletGraph. + +Rules | Rule text | How we comply +---|---|--- +(a) | A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content). | Since igBulletGraph is exclusively a graphic control, consider providing an alternative view for the disabled by converting the chart into a table or grid containing the chart data. This would allow using screen reader to assist users in getting the information from the chart. +(b) | Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation. | See the note for (a) for an alternative way to provide compliance to the rule. +(c) | Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup. | You can control coloring and provide suitable colors for the bullet graph using the styling and theming capabilities of the control. +(d)* | Documents shall be organized so they are readable without requiring an associated style sheet. | The control's markup may not be entirely readable without the associated style sheet due to igBulletGraph being client-side control and depending on CSS rules. See the note for (a) for an alternative way to provide compliance to the rule. + + +## Related Content + +#### Topics + +The following topic provides additional information related to this topic. + +- [Accessibility Compliance](//general-and-getting-started/accessibility-compliance.mdx): This topic provides reference information for the accessibility compliance of all controls in the {environment:ProductName} product. + + + + + + + diff --git a/docs/jquery/src/content/en/topics/controls/igbulletgraph/adding/adding.mdx b/docs/jquery/src/content/en/topics/controls/igbulletgraph/adding/adding.mdx new file mode 100644 index 0000000000..5d34ba2441 --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igbulletgraph/adding/adding.mdx @@ -0,0 +1,17 @@ +--- +title: "Adding igBulletGraph" +slug: igbulletgraph-adding +--- + +# Adding igBulletGraph + +## Introduction + +This is a group of topics demonstrating how to add the `igBulletGraph`™ control to an HTML page and to an ASP.NET MVC application. + +## Topics + +- [Adding *igBulletGraph* to an HTML Page](/igbulletgraph-adding-to-an-html-page.mdx): This topic explains how to add the `igBulletGraph` to an HTML page. + +- [Adding *igBulletGraph* to an ASP.NET MVC Application](/igbulletgraph-adding-using-the-mvc-helper.mdx): This topic walks through instantiating an `igBulletGraph` in an ASP.NET MVC application using the ASP.NET MVC helper. + diff --git a/docs/jquery/src/content/en/topics/controls/igbulletgraph/adding/images/igBulletGraph_Adding_igBulletGraph_to_an_ASP.NET_MVC_Application_1.png b/docs/jquery/src/content/en/topics/controls/igbulletgraph/adding/images/igBulletGraph_Adding_igBulletGraph_to_an_ASP.NET_MVC_Application_1.png new file mode 100644 index 0000000000..6916a4dcf5 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igbulletgraph/adding/images/igBulletGraph_Adding_igBulletGraph_to_an_ASP.NET_MVC_Application_1.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igbulletgraph/adding/images/igBulletGraph_Adding_igBulletGraph_to_an_ASP.NET_MVC_Application_2.png b/docs/jquery/src/content/en/topics/controls/igbulletgraph/adding/images/igBulletGraph_Adding_igBulletGraph_to_an_ASP.NET_MVC_Application_2.png new file mode 100644 index 0000000000..d9fbf53a01 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igbulletgraph/adding/images/igBulletGraph_Adding_igBulletGraph_to_an_ASP.NET_MVC_Application_2.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igbulletgraph/adding/images/igBulletGraph_Adding_igBulletGraph_to_an_ASP.NET_MVC_Application_3.png b/docs/jquery/src/content/en/topics/controls/igbulletgraph/adding/images/igBulletGraph_Adding_igBulletGraph_to_an_ASP.NET_MVC_Application_3.png new file mode 100644 index 0000000000..14184d391d Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igbulletgraph/adding/images/igBulletGraph_Adding_igBulletGraph_to_an_ASP.NET_MVC_Application_3.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igbulletgraph/adding/images/igBulletGraph_Adding_igBulletGraph_to_an_HTML_Page_1.png b/docs/jquery/src/content/en/topics/controls/igbulletgraph/adding/images/igBulletGraph_Adding_igBulletGraph_to_an_HTML_Page_1.png new file mode 100644 index 0000000000..ed1733843b Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igbulletgraph/adding/images/igBulletGraph_Adding_igBulletGraph_to_an_HTML_Page_1.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igbulletgraph/adding/images/igBulletGraph_Adding_igBulletGraph_to_an_HTML_Page_2.png b/docs/jquery/src/content/en/topics/controls/igbulletgraph/adding/images/igBulletGraph_Adding_igBulletGraph_to_an_HTML_Page_2.png new file mode 100644 index 0000000000..2e23f3ffdd Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igbulletgraph/adding/images/igBulletGraph_Adding_igBulletGraph_to_an_HTML_Page_2.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igbulletgraph/adding/images/igBulletGraph_Adding_igBulletGraph_to_an_HTML_Page_3.png b/docs/jquery/src/content/en/topics/controls/igbulletgraph/adding/images/igBulletGraph_Adding_igBulletGraph_to_an_HTML_Page_3.png new file mode 100644 index 0000000000..86191058eb Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igbulletgraph/adding/images/igBulletGraph_Adding_igBulletGraph_to_an_HTML_Page_3.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igbulletgraph/adding/to-an-html-page.mdx b/docs/jquery/src/content/en/topics/controls/igbulletgraph/adding/to-an-html-page.mdx new file mode 100644 index 0000000000..224ea9a6b8 --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igbulletgraph/adding/to-an-html-page.mdx @@ -0,0 +1,338 @@ +--- +title: "Adding igBulletGraph to an HTML Page" +slug: igbulletgraph-adding-to-an-html-page +--- +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# Adding igBulletGraph to an HTML Page + +## Topic Overview + +#### Purpose + +This topic demonstrates, with code examples, how to add the `igBulletGraph`™ control to an HTML page. + +#### Required background + +The following topics are prerequisites to understanding this topic: + +- [*igBulletGraph* Overview](/igbulletgraph-overview.mdx): This topic provides conceptual information about the `igBulletGraph`™ control including its main features, minimum requirements, and user functionality. + + +#### In this topic + +This topic contains the following sections: + +- [**Adding *igBulletGraph* to an HTML Page – Conceptual Overview**](#overview) + - [Requirements](#requirements) + - [Steps](#steps) +- [**Adding igBulletGraph to an HTML Page – Procedure**](#procedure) + - [Introduction](#procedure-introduction) + - [Preview](#preview) + - [Prerequisites](#prerequisites) + - [Steps](#procedure-steps) + - [Full code](#full-code) +- [**Related Content**](#related-content) + - [Topics](#topics) + - [Samples](#samples) + + +## Adding igBulletGraph to an HTML Page – Conceptual Overview + +To add `igBulletGraph` control to a web page requires an HTML element, a `div` to serve as the base for instantiation. The basic configuration of `igBulletGraph` requires providing values for its dimensions - `width` and `height`. + +#### Requirements + +The following table summarizes the requirements for using the `igBulletGraph` control. + + +| | | | +| --- | --- | --- | +| Required Resources | Description | What you need to do… | +| jQuery and jQuery UI JavaScript resources | {environment:ProductName}™ is built on top of the following frameworks: [jQuery](http://jquery.com/) [jQuery UI](http://jqueryui.com/) | Add script references to both libraries in the `` section of your page. | +| General *igBulletGraph* JavaScript Resources | The *igBulletGraph* control depends on functionality distributed across several files in the {environment:ProductName} Library. You can load the required resources in one of the following ways: Use the Infragistics® Loader (*igLoader*™). You only need to include a script reference to *igLoader* on your page. Load the required resources manually. You need to use the dependencies listed in the table below. Load the two combined files, containing the logic for all data visualization controls from the {environment:ProductName} package - *infragistics.core.js*, *infragistics.dv.js* and *infragistics.encoding.js* (optional). The following table lists the {environment:ProductName} library dependencies related to the *igBulletGraph* control. These resources need to be referred to explicitly if you chose not to use *igLoader* or the combined files. JS Resource | Description | +| *infragistics.util.js*, *infragistics.util.jquery.js* | {environment:ProductName} utilities | | +| *infragistics.ext_core.js*, *infragistics.ext_collections.js*, *infragistics.ext_ui.js*, *infragistics.dv_jquerydom.js*, *infragistics.dv_core.js*, *infragistics.dv_geometry.js* A shared library for data visualization components | | | +| *infragistics.ui.widget.js* | Base igWidget for all {environment:ProductName} widgets. | | +| *infragistics.bulletgraph.js* | The *igBulletGraph* control | | +| *infragistics.ui.bulletgraph.js* | The *igBulletGraph* widget | | + + </td> + <td>Add one of the following:
  • A reference to \*igLoader\*
  • A reference to all the required JavaScript files (listed in the table on the left).
  • A reference to the combined files and optionally to the file containing the encodings.
</td> + </tr> + </tbody> +</table> + +#### Steps + +Following are the general conceptual steps for adding `igBulletGraph` to an HTML Page. + +1. Creating the target element for storing the `igBulletGraph` control. +2. Instantiating the `igBulletGraph` control. +3. Configuring the basic rendering options. +4. Configuring the scale. +5. Adding performance bar. +6. Configuring the comparative marker. +7. Adding comparative ranges. + + +## Adding igBulletGraph to an HTML Page – Procedure +#### Introduction +This procedure adds an instance of `igBulletGraph` to an HTML page and configures its dimensions, its scale and adds a performance bar, comparative marker and three comparative ranges to it. + +The procedure presumes the required resources are added to the header of the HTML page, so it instantiates the `igBulletGraph` control in the document ready event to prevent any errors due to DOM being not fully loaded. + +#### Preview + +The following screenshot is a preview of the result. + +![](images/igBulletGraph_Adding_igBulletGraph_to_an_HTML_Page_1.png) + +### Prerequisites + +To complete the procedure, you need the required JavaScript and CSS files referenced on the HTML page. + +**In HTML:** + +```html + + + + + + + + + + + + + + + + + + + + + + + + +``` + +### Steps + +Follow these steps to add an `igBulletGraph` to an HTML page. + +1. **Create the target element for storing the *igBulletGraph* control.** + + Create a `
` element within the HTML body on which to instantiate the `igBulletGraph` control. + + **In HTML:** + +```html + + +
+ +``` + +2. **Instantiate the *igBulletGraph* control.** + + Use the selector of the target element defined in step 1 to instantiate the `igBulletGraph` control. + + **In HTML:** + +```html + +``` + +3. **Configure the basic rendering options.** + + When instantiating the igBulletGraph, configure the `width` and `height` options. + + **In HTML:** + +```html + $("#bulletGraph").igBulletGraph({ + width: "300px", + height: "70px" + }); +``` + +4. **Configure the scale.** + + In order to customize the values of the scale, you need to set its and properties. In this example, the scale will start at 5 and end at 55. + + **In HTML:** + +```html + $("#bulletGraph").igBulletGraph({ + width: "300px", + height: "70px", + minimumValue: "5", + maximumValue: "55" + }); +``` + + The changed scale is shown on the following screenshot: + + ![](images/igBulletGraph_Adding_igBulletGraph_to_an_HTML_Page_2.png) + +5. ​**Add performance bar.** + + The primary measure of the `igBulletGraph` is visualized by its performance bar. Its value is managed by the property setting. For this example, set the value property to 35. + + **In HTML:** + +```html + $("#bulletGraph").igBulletGraph({ + … + value:"35" + }); +``` + +6. **Configure the comparative marker.** + + To position the comparative measure marker on the scale is managed by the value of the property. For this example, set the `targetValue` property to 43. + + **In HTML:** + +```html + $("#bulletGraph").igBulletGraph({ + … + targetValue:"43" + }); +``` + + The following screenshot displays what the `igBulletGraph` control would look so far in the procedure. + + ![](images/igBulletGraph_Adding_igBulletGraph_to_an_HTML_Page_3.png) + +7. **Add comparative ranges.** + + In order to compare the value displayed by the performance bar against some meaningful range(s) of values, these comparative ranges need to be displayed on the scale. Comparative ranges are managed by property within which several individual ranges can be defined, each of which having its own starting and ending values ( and ) and color (). + + For this example, configure 3 comparative ranges, each of a different shade of gray, starting at the 0, 15, and 30 tick marks of the scale, respectively. + + **In HTML:** + +```html + $("#bulletGraph").igBulletGraph({ + … + ranges: [{ + name: 'range1', + startValue: 0, + endValue: 15, + brush: '#DCDCDC' + }, + { + name: 'range2', + startValue: 15, + endValue: 30, + brush: '#A9A9A9' + }, + { + name: 'range3', + startValue: 30, + endValue: 55, + brush: '#808080' + } + ] + }); +``` + + The final look of the graph is presented below. + + ![](images/igBulletGraph_Adding_igBulletGraph_to_an_HTML_Page_1.png) + + +### Full code + +Following is the full code for this procedure. + +**In HTML:** + +```html + + + + + + + + + + + + + + + + + + + + + + + + +
+ + +``` + + +## Related Content + +### Topics + +The following topics provide additional information related to this topic. + +- [Adding *igBulletGraph* to an ASP.NET MVC Application](/igbulletgraph-adding-using-the-mvc-helper.mdx): This topic demonstrates, with code examples, how to add the igBulletGraph control to an ASP.NET MVC View using the ASP.NET MVC helper. + +- [jQuery and MVC API Links (*igBulletGraph*)](/igbulletgraph-api-links.mdx): This topic provides links to the API reference documentation about the `igBulletGraph` control and the ASP.NET MVC Helper for it. + + +### Samples + +The following sample provides additional information related to this topic. + +- [Basic Configuration]({environment:SamplesUrl}/bullet-graph/basic-configuration): This sample demonstrates a simple configuration of the `igBulletGraph` control. \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/controls/igbulletgraph/adding/using-the-mvc-helper.mdx b/docs/jquery/src/content/en/topics/controls/igbulletgraph/adding/using-the-mvc-helper.mdx new file mode 100644 index 0000000000..8fed8bd5cd --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igbulletgraph/adding/using-the-mvc-helper.mdx @@ -0,0 +1,297 @@ +--- +title: "Adding igBulletGraph to an ASP.NET MVC application" +slug: igbulletgraph-adding-using-the-mvc-helper +--- +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# Adding igBulletGraph to an ASP.NET MVC application + + +## Topic Overview + +#### Purpose + +This topic demonstrates, with code examples, how to add the `igBulletGraph`™ to an ASP.NET MVC application using the ASP.NET MVC helper. + +### Required background + +The following table lists the concepts and topics required as a prerequisite to understanding this topic. + +- Concepts + - jQuery + - jQuery UI + - ASP.NET MVC + - ASP.NET MVC HTML Helpers + +- Topics + - [Adding Controls to an MVC Project](../../../01_General-and-Getting-Started/00_Adding IgniteUI Controls to an MVC Project.mdx): This topic explains how to get started with {environment:ProductName}™ components in an ASP.NET MVC application. + - [*igBulletGraph* Overview](/igbulletgraph-overview.mdx): This topic provides conceptual information about the `igBulletGraph` control including its main features, minimum requirements, and user functionality. + + + + + +### In this topic + +This topic contains the following sections: + +- [**Adding *igBulletGraph* to an ASP.NET MVC Application – Conceptual Overview**](#overview) + - [Requirements](#requirements) + - [Steps](#steps) +- [**Adding *igBulletGraph* to an ASP.NET MVC Application – Procedure**](#procedure) + - [Introduction](#procedure-introduction) + - [Preview](#preview) + - [Prerequisites](#prerequisites) + - [Steps](#steps) + - [Full code](#full-code) +- [**Related Content**](#related-content) + - [Topics](#topics) + - [Samples](#samples) + + +## Adding igBulletGraph to an ASP.NET MVC Application – Conceptual Overview + +The `igBulletGraph` control can be added to an ASP.NET MVC view using the ASP.NET MVC helper. In order to successfully display the bullet graph, the dimensions of the control should be specified. When instantiating the `igBulletGraph` control, there are several **helper methods** that should be set for basic rendering including the following: + + +- [`Width()`](Infragistics.Web.Mvc~Infragistics.Web.Mvc.BulletGraphModel_members.html): Sets the width of the igBulletGraph. + +- [`Height()`](Infragistics.Web.Mvc~Infragistics.Web.Mvc.BulletGraphModel_members.html): Sets the height of the igBulletGraph. + +- [`MinimumValue()`](Infragistics.Web.Mvc~Infragistics.Web.Mvc.BulletGraphModel_members.html): Sets the start value for the scale’s range. + +- [`MaximumValue()`](Infragistics.Web.Mvc~Infragistics.Web.Mvc.BulletGraphModel_members.html): Sets the end value for the scale’s range. + +- [`Value()`](Infragistics.Web.Mvc~Infragistics.Web.Mvc.BulletGraphModel_members.html): Sets the value which determines the end position of the performance bar. + +- [`TargetValue()`](Infragistics.Web.Mvc~Infragistics.Web.Mvc.BulletGraphModel_members.html): Sets the value indicated by the comparative marker. + +- [`Ranges()`](Infragistics.Web.Mvc~Infragistics.Web.Mvc.BulletGraphModel_members.html): Instantiates range objects for the `igBulletGraph`. + +Apart from its and , a must be assigned to the individual range, so that its extent is specified. + + +### Requirements + +To complete the procedure, you need the following: + +- **An ASP.NET MVC application** +- **A reference to the *Infragistics.Web.Mvc.dll* assembly** added to the application project. For details, refer to the [Adding Controls to an MVC Project](../../../01_General-and-Getting-Started/00_Adding IgniteUI Controls to an MVC Project.mdx) topic. +- The dependencies of the View: + + - **The `Infragistics.Web.Mvc` namespace added** to the ASP.NET MVC View + + **In ASPX:** + +```csharp + <%@ Import Namespace="Infragistics.Web.Mvc" %> +``` + + - **References to the combined Java Script files** for all data visualization controls and to the required CSS files added to the `` tag of the ASP.NET MVC View + + **In ASPX:** + +```csharp + " rel="stylesheet"> + " rel="stylesheet"> + + + + +``` + + Alternatively, you can use the Infragistics Loader (the igLoader + component) or explicitly include all igBulletGraph-related files as + explained in the [Adding *igBulletGraph* to an HTML + Page](/igbulletgraph-adding-to-an-html-page.mdx) topic. + +### Steps + +1. Adding the ASP.NET MVC Helper +2. Instantiating the `igBulletGraph` control configuring its basic rendering options +3. Configuring the scale +4. Adding performance bar +5. Configuring the comparative marker +6. Adding comparative ranges + +## Adding igBulletGraph to an ASP.NET MVC Application – Procedure + +#### Introduction + +This procedure adds an instance of `igBulletGraph` to an ASP.NET MVC application using the ASP.NET MVC helper for the control and configures its basic options - `width` and `height`. It also configures its scale and adds a performance bar, comparative marker and three comparative ranges to it. The procedure presumes that a reference to the *Infragistics.Web.Mvc.dll* assembly has been added to project and the control is rendered to the View with the ASP.NET MVC helper’s `Render()` method. + +#### Preview + +The following screenshot is a preview of the result. + +![](images/igBulletGraph_Adding_igBulletGraph_to_an_ASP.NET_MVC_Application_1.png) + +### Prerequisites + +An ASP.NET MVC application configured with the required JavaScript files, CSS files and ASP.NET MVC assembly as defined in the Prerequisites of the Adding `igBulletGraph` to an ASP.NET MVC Application procedure. + +### Steps + +The following steps demonstrate how to instantiate `igBulletGraph` in an ASP.NET MVC application using the ASP.NET MVC helper. + +​ **1. Add the ASP.NET MVC Helper**. + +Add the ASP.NET MVC helper to the body of your ASP.NET page. + +**In ASPX:** + +```csharp + +<%=(Html.Infragistics().BulletGraph() +.Render())%> + +``` + +​**2. Instantiate the *igBulletGraph* control** configuring its basic rendering options. + +Instantiate the `igBulletGraph` control. As with all {environment:ProductNameMVC} controls, you must call the Render method to render the HTML and JavaScript to the View. + +**In ASPX:** + +```csharp + + <%= Html.Infragistics().BulletGraph() + .Width("300px") + .Height("70px").Render()%> + +``` + +​**3. Configure the scale.** + +In order to customize the values of the scale, you need to supply values for the [`MinimumValue()`](Infragistics.Web.Mvc~Infragistics.Web.Mvc.BulletGraphModel_members.html) and [`MaximumValue()`](Infragistics.Web.Mvc~Infragistics.Web.Mvc.BulletGraphModel_members.html) methods. In this example, the scale will start at 5 and end at 55. + +**In ASPX:** + +```csharp +<%= Html.Infragistics().BulletGraph() + .Width("300px") + .Height("70px") + .MinimumValue(5) + .MaximumValue(55).Render()%> +``` + +The changed scale is shown on the following screenshot: + +**![](images/igBulletGraph_Adding_igBulletGraph_to_an_ASP.NET_MVC_Application_2.png)** + +​**4. Add performance bar.** + +Add the performance bar by setting the igBulletGraph's `Value()` method. For this example, set this value to 35. + +**In ASPX:** + +```csharp +<%= Html.Infragistics().BulletGraph() + ... + .Value(35) + .Render()%> +``` + +​**5. Configure the comparative marker.** + +To position the comparative measure marker on the scale, set the `TargetValue()` method value. For this example, set the value to 43. + +**In ASPX:** + +```csharp +<%= Html.Infragistics().BulletGraph() + ... + .TargetValue(43) + .Render()%> +``` + +The following screenshot displays what the `igBulletGraph` control would look so far in the procedure. + +![](images/igBulletGraph_Adding_igBulletGraph_to_an_ASP.NET_MVC_Application_3.png) + +​**6. Add comparative ranges.** + +Within the `Ranges()` method, define the individual comparative ranges. The starting and ending values are configured individually for each range ( parameters of `StartValue()` and `EndValue()`) and color (`Brush()`). + +For this example, configure 3 comparative ranges, each of a different shade of gray, starting at the 0, 15, and 30 tick marks of the scale, respectively. + +**In ASPX:** + +```csharp +<%= Html.Infragistics().BulletGraph() + ... + .Ranges(range => + { + range.Range("range1").StartValue(0).EndValue(15).Brush("#DCDCDC"); + range.Range("range2").StartValue(15).EndValue(30).Brush("#A9A9A9"); + range.Range("range3").StartValue(30).EndValue(55).Brush("#808080"); + }) + .Render()%> +``` + +The final look of the graph is presented below. + +![](images/igBulletGraph_Adding_igBulletGraph_to_an_ASP.NET_MVC_Application_1.png) + + +### Full code + +Following is the full code for this procedure. + +**In ASPX:** + +```csharp +<%@ Import Namespace="Infragistics.Web.Mvc" %> + + + +BulletGraph +" rel="stylesheet"> +" rel="stylesheet"> + + + + + + + <%= Html.Infragistics().BulletGraph() + .Width("300px") + .Height("70px") + .MinimumValue(5) + .MaximumValue(55) + .Value(35) + .TargetValue(43) + .Ranges(range => + { + range.Range("range1").StartValue(0).EndValue(15).Brush("#DCDCDC"); + range.Range("range2").StartValue(15).EndValue(30).Brush("#A9A9A9"); + range.Range("range3").StartValue(30).EndValue(55).Brush("#808080"); + }) + .Render()%> + + +``` + + +## Related Content + +### Topics +The following topics provide additional information related to this topic. + +- [Adding *igBulletGraph* to an HTML Page](/igbulletgraph-adding-to-an-html-page.mdx): This topic demonstrates, with code examples, how to add the `igBulletGraph` control to an HTML page. + +- [jQuery and MVC API Links (*igBulletGraph*)](/igbulletgraph-api-links.mdx): This topic provides links to the API reference documentation about the `igBulletGraph` control and its ASP.NET MVC Helper. + + +### Samples + +The following sample provides additional information related to this topic. + +- [MVC Initialization]({environment:SamplesUrl}/bullet-graph/mvc-initialization): This sample demonstrates how to use the ASP.NET MVC helper for the bullet graph. + + + + + + + diff --git a/docs/jquery/src/content/en/topics/controls/igbulletgraph/api-links.mdx b/docs/jquery/src/content/en/topics/controls/igbulletgraph/api-links.mdx new file mode 100644 index 0000000000..8bcb6aa0d1 --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igbulletgraph/api-links.mdx @@ -0,0 +1,28 @@ +--- +title: "jQuery and MVC API Links (igBulletGraph)" +slug: igbulletgraph-api-links +--- +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +#jQuery and MVC API Links (igBulletGraph) + + +## igBulletGraph API Reference Documentation + +#### igBulletGraph API reference documentation summary chart + +The following table lists the links to the API reference documentation for the `igBulletGraph`™ control. (This reference content is in addition to the developer guide about the control, available [here](/igbulletgraph-overview.mdx).) + +- : The documentation contains an overview of the control and full list of options, events, and methods with code snippets. + +- [***igBulletGraph* MVC API**](Infragistics.Web.Mvc~Infragistics.Web.Mvc.BulletGraphModel.html): The documentation contains the description of the bullet graph ASP.NET MVC Helper and a list of all of its members. + + +## Related Content + +#### Topics + +The following topics provide additional information related to this topic. + +- [Adding *igBulletGraph*](/adding/igbulletgraph-adding.mdx): This topic walks through instantiating an `igBulletGraph` in an ASP.NET MVC application using the ASP.NET MVC helper. + diff --git a/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/configuring.mdx b/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/configuring.mdx new file mode 100644 index 0000000000..c664db118c --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/configuring.mdx @@ -0,0 +1,17 @@ +--- +title: "Configuring igBulletGraph" +slug: igbulletgraph-configuring +--- + +# Configuring igBulletGraph + +## Introduction + +This is a group of topics explaining how to configure the various aspects of the `igBulletGraph`™ control including its orientation and direction and visual elements. + +## Topics + +- [Configuring the Orientation and Direction (*igBulletGraph*)](/igbulletgraph-configuring-the-orientation-and-direction.mdx): This topic explains how to configure the igBulletGraph control with vertical scale and/or inverted scale direction. + +- [Configuring the Visual Elements (*igBulletGraph*)](/elements/igbulletgraph-configuring-the-visual-elements.mdx): This is a group of topics covering in detail the visual elements the igBulletGraph control (like the scale elements, performance bar, comparative marker and ranges, etc.) and explaining, with code examples, how to configure them. + diff --git a/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/comparative-ranges.mdx b/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/comparative-ranges.mdx new file mode 100644 index 0000000000..66bfedf1e0 --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/comparative-ranges.mdx @@ -0,0 +1,272 @@ +--- +title: "Configuring Comparative Ranges (igBulletGraph)" +slug: igbulletgraph-configuring-comparative-ranges +--- +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# Configuring Comparative Ranges (igBulletGraph) + +## Topic Overview + +#### Purpose + +This topic explains, with code examples, how to configure ranges in the `igBulletGraph`™ control. This includes the number of ranges and their positions, lengths, widths, and formatting. + +### Required background + +The following topics are prerequisites to understanding this topic: + +- [*igBulletGraph* Overview](//igbulletgraph-overview.mdx): This topic provides conceptual information about the `igBulletGraph` control including its main features, minimum requirements, and user functionality. + +- [Adding *igBulletGraph*](//adding/igbulletgraph-adding.mdx): This is a group of topics explaining how to add the `igBulletGraph` control to an HTML page and an ASP.NET MVC application. + + +### In this topic + +This topic contains the following sections: + +- [**Configuring Comparative Ranges**](#configuring) + - [Comparative ranges configuration summary](#configuration-summary) + - [Comparative ranges configuration summary chart](#configuration-summary-chart) + - [Property settings](#property-settings) + - [Example](#example) +- [**Related Content**](#related-content) + - [Topics](#topics) + - [Samples](#samples) + + +## Configuring Comparative Ranges + +#### Comparative ranges configuration summary + +The `igBulletGraph` control supports multiple comparative ranges via instantiating its ranges object. + +![](images/igBulletGraph_Configuring_Comparative_Ranges_1.png) + +Each range can be configured individually by specifying its starting and ending value (in the measures of the scale), fill color, and border thickness and color. The size of a comparative range in the across-the-scale is configurable by adjusting its inner and outer margins. + +### Comparative ranges configuration summary chart + +The following table explains briefly the configurable aspects of `igBulletGraph` control’s comparative ranges and maps them to properties that configure them. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Configurable aspectsPropertyDefault value
\*\*Number\*\* (of ranges in the graph)Not set
\*\*Length, width, and position\*\*Not set
Not set
Not set
Not set
Not set
Not set
\*\*Look-and-feel\*\*Fill colorDefined in the default theme
Border colorDefined in the default theme
Border thickness\*1.0\*
\*\*Tooltip\*\*The start and end values of the range separated by a hyphen (-).
+ +> **Note:** If you do not explicitly provide values for the `brush` and `outline` properties for each range, the values are retrieved from the values of *igBulletGraph*’s `rangeBrushes` and `rangeOutlines` objects. They can also be used to predefine a set of brushes to be used consecutively for setting each range’s color or outline fill. + +### Property settings + +The following table maps the desired behavior to its respective property settings. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
In order to configure:Use this property:And set it to:
\*\*Aspect\*\*\*\*Details\*\*
\*\*Name\*\*A name for the range. Used for displaying in the tooltip.A string expressing the name of the range
[]()\*\*Position along the scale\*\*Range startPosition on the scale at which the range beginsThe desired value (in the measures of the scale)
Range endPosition on the scale at which the range endsThe desired value (in the measures of the scale)
\*\*Breadth and position\*\* (across the scale)Inner vertex of the starting edge of the rangeThe position of the inner vertex of the starting edge across the scale relative to the edge of the [Reserved area](../../00_igBulletGraph_Overview.mdx#logical-areas). (Inner vertex is the point of the starting edge that is the closest to the edge of the Reserved area.)The desired value as a relative part of the height/width of the [Graph area](../../00_igBulletGraph_Overview.mdx#logical-areas) depending on the orientation (horizontal / vertical) presented as a fraction of 1 (e.g. \*0.2\*)
Inner vertex of the ending edge of the rangeThe position of the inner vertex of the ending edge across the scale relative to the edge of the Reserved areaThe desired value as a relative part of the height/width of the Graph area depending on the orientation (horizontal / vertical) presented as a fraction of 1 (e.g. \*0.3\*)
Outer vertex of the starting edge of the rangeThe position of the outer vertex of the starting edge across the scale relative to the edge of the Reserved area. (Outer vertex is the point of the starting edge that is the closest to the edge of the Reserved area)The desired value as a relative part of the height/width of the Graph area depending on the orientation (horizontal / vertical) presented as a fraction of 1 (e.g. \*0.7\*)
Outer vertex of the ending edge of the rangeThe position of the outer vertex of the ending edge across the scale relative to the edge of the Reserved areaThe desired value as a relative part of the height/width of the Graph area depending on the orientation (horizontal / vertical) presented as a fraction of 1 (e.g. \*0.8\*)
\*\*Look-and-feel\*\*Fill colorFill color of the rangeThe desired color
Border thicknessThickness of the range’s borderThe desired value in pixels
Border colorColor of the range’s borderThe desired color
\*\*Tooltip\*\*Content of the tooltip of the comparative range(s)The desired template(See [Configuring the Tooltips (\*igBulletGraph\*)](/igbulletgraph-configuring-the-tooltips.mdx).)
+ +### Example + +The screenshot below demonstrates how a comparative range added to the `igBulletGraph` looks as a result of the following settings: + +Property | Value +---|--- + | “Green” + | “range1” + | “6” + | “89” + | “0.5” + | “0.5” + | “0.8” + | “0.8” + | “Black” + +![](images/igBulletGraph_Configuring_Comparative_Ranges_2.png) + +Following is the code that implements this example. + +**In JavaScript:** + +```js +$(function () { + $("#bulletgraph").igBulletGraph({ + width: "300", + height: "100", + ranges: [{ + name: 'range1', + brush:'#008000', + startValue:"6", + endValue:"89", + innerStartExtent:"0.5", + innerEndExtent:"0.5", + outerStartExtent:"0.8", + outerEndExtent:"0.8" + }] });}); +``` + + +## Related Content + +### Topics + +The following topics provide additional information related to this topic. + +- [Configuring the Scale (*igBulletGraph*)](/scale/igbulletgraph-configuring-the-scale.mdx): This topic explains, with examples, how to configure the scale of the `igBulletGraph` control. This includes positioning the scale inside the control and configuring the scale tick marks and labels. + +- [Configuring the Performance Bar (*igBulletGraph*)](/igbulletgraph-configuring-the-performance-bar.mdx): This topic explains, with examples, how to configure the performance bar of the `igBulletGraph` control. This includes the value indicated by the bar, its width, position, and formatting. + +- [Configuring the Comparative Marker (*igBulletGraph*)](/igbulletgraph-configuring-the-comparative-marker.mdx): This topic explains, with code examples, how to configure the comparative measure marker of the `igBulletGraph` control. This includes the marker’s value, width, and formatting. + +- [Configuring the Background (*igBulletGraph*)](/igbulletgraph-configuring-the-background.mdx): This topic explains, with code examples, how to configure a background for the bullet graph. This includes setting the background’s size, position, color, and border. + +- [Configuring the Tooltips (*igBulletGraph*)](/igbulletgraph-configuring-the-tooltips.mdx): This topic explains, with code examples, how to enable the tooltips in the `igBulletGraph` control and configure the delay with which they are displayed. + + +### Samples + +The following samples provide additional information related to this topic. + +- [Range Settings]({environment:SamplesUrl}/bullet-graph/range-settings): This sample demonstrates setting comparative ranges in the `igBulletGraph` control. + + + + + + + diff --git a/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/images/igBulletGraph_Configuring_Comparative_Ranges_1.png b/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/images/igBulletGraph_Configuring_Comparative_Ranges_1.png new file mode 100644 index 0000000000..28e82733fe Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/images/igBulletGraph_Configuring_Comparative_Ranges_1.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/images/igBulletGraph_Configuring_Comparative_Ranges_2.png b/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/images/igBulletGraph_Configuring_Comparative_Ranges_2.png new file mode 100644 index 0000000000..8eab3a7faa Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/images/igBulletGraph_Configuring_Comparative_Ranges_2.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/images/igBulletGraph_Configuring_the_Background_1.png b/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/images/igBulletGraph_Configuring_the_Background_1.png new file mode 100644 index 0000000000..703d3e87c7 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/images/igBulletGraph_Configuring_the_Background_1.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/images/igBulletGraph_Configuring_the_Background_2.png b/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/images/igBulletGraph_Configuring_the_Background_2.png new file mode 100644 index 0000000000..218a57fe8f Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/images/igBulletGraph_Configuring_the_Background_2.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/images/igBulletGraph_Configuring_the_Comparative_Marker_1.png b/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/images/igBulletGraph_Configuring_the_Comparative_Marker_1.png new file mode 100644 index 0000000000..984f193c79 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/images/igBulletGraph_Configuring_the_Comparative_Marker_1.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/images/igBulletGraph_Configuring_the_Comparative_Marker_2.png b/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/images/igBulletGraph_Configuring_the_Comparative_Marker_2.png new file mode 100644 index 0000000000..7ae3bf43b0 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/images/igBulletGraph_Configuring_the_Comparative_Marker_2.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/images/igBulletGraph_Configuring_the_Performance_Bar_1.png b/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/images/igBulletGraph_Configuring_the_Performance_Bar_1.png new file mode 100644 index 0000000000..8ba6ab6800 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/images/igBulletGraph_Configuring_the_Performance_Bar_1.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/images/igBulletGraph_Configuring_the_Performance_Bar_2.png b/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/images/igBulletGraph_Configuring_the_Performance_Bar_2.png new file mode 100644 index 0000000000..8dae5236e2 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/images/igBulletGraph_Configuring_the_Performance_Bar_2.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/images/igBulletGraph_Configuring_the_Tooltips_1.png b/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/images/igBulletGraph_Configuring_the_Tooltips_1.png new file mode 100644 index 0000000000..061541e53f Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/images/igBulletGraph_Configuring_the_Tooltips_1.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/images/igBulletGraph_Configuring_the_Tooltips_2.png b/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/images/igBulletGraph_Configuring_the_Tooltips_2.png new file mode 100644 index 0000000000..9ada6f31b7 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/images/igBulletGraph_Configuring_the_Tooltips_2.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/images/igBulletGraph_Configuring_the_Tooltips_3.png b/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/images/igBulletGraph_Configuring_the_Tooltips_3.png new file mode 100644 index 0000000000..4a22f018ed Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/images/igBulletGraph_Configuring_the_Tooltips_3.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/scale/images/igBulletGraph_Configuring_the_Scale_1.png b/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/scale/images/igBulletGraph_Configuring_the_Scale_1.png new file mode 100644 index 0000000000..a2a2ffb2f8 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/scale/images/igBulletGraph_Configuring_the_Scale_1.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/scale/images/igBulletGraph_Configuring_the_Scale_10.png b/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/scale/images/igBulletGraph_Configuring_the_Scale_10.png new file mode 100644 index 0000000000..caefaf8c29 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/scale/images/igBulletGraph_Configuring_the_Scale_10.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/scale/images/igBulletGraph_Configuring_the_Scale_11.png b/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/scale/images/igBulletGraph_Configuring_the_Scale_11.png new file mode 100644 index 0000000000..3bf644e33e Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/scale/images/igBulletGraph_Configuring_the_Scale_11.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/scale/images/igBulletGraph_Configuring_the_Scale_12.png b/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/scale/images/igBulletGraph_Configuring_the_Scale_12.png new file mode 100644 index 0000000000..56732ef577 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/scale/images/igBulletGraph_Configuring_the_Scale_12.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/scale/images/igBulletGraph_Configuring_the_Scale_2.png b/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/scale/images/igBulletGraph_Configuring_the_Scale_2.png new file mode 100644 index 0000000000..f4c9e88955 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/scale/images/igBulletGraph_Configuring_the_Scale_2.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/scale/images/igBulletGraph_Configuring_the_Scale_3.png b/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/scale/images/igBulletGraph_Configuring_the_Scale_3.png new file mode 100644 index 0000000000..2c07ac45db Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/scale/images/igBulletGraph_Configuring_the_Scale_3.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/scale/images/igBulletGraph_Configuring_the_Scale_4.png b/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/scale/images/igBulletGraph_Configuring_the_Scale_4.png new file mode 100644 index 0000000000..64414a151d Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/scale/images/igBulletGraph_Configuring_the_Scale_4.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/scale/images/igBulletGraph_Configuring_the_Scale_5.png b/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/scale/images/igBulletGraph_Configuring_the_Scale_5.png new file mode 100644 index 0000000000..c1ce86ffc6 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/scale/images/igBulletGraph_Configuring_the_Scale_5.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/scale/images/igBulletGraph_Configuring_the_Scale_6.png b/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/scale/images/igBulletGraph_Configuring_the_Scale_6.png new file mode 100644 index 0000000000..04abf16c8f Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/scale/images/igBulletGraph_Configuring_the_Scale_6.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/scale/images/igBulletGraph_Configuring_the_Scale_7.png b/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/scale/images/igBulletGraph_Configuring_the_Scale_7.png new file mode 100644 index 0000000000..4588fb2e91 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/scale/images/igBulletGraph_Configuring_the_Scale_7.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/scale/images/igBulletGraph_Configuring_the_Scale_8.png b/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/scale/images/igBulletGraph_Configuring_the_Scale_8.png new file mode 100644 index 0000000000..849639ed92 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/scale/images/igBulletGraph_Configuring_the_Scale_8.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/scale/images/igBulletGraph_Configuring_the_Scale_9.png b/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/scale/images/igBulletGraph_Configuring_the_Scale_9.png new file mode 100644 index 0000000000..953f0957b9 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/scale/images/igBulletGraph_Configuring_the_Scale_9.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/scale/the-scale.mdx b/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/scale/the-scale.mdx new file mode 100644 index 0000000000..536c7ba8f3 --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/scale/the-scale.mdx @@ -0,0 +1,762 @@ +--- +title: "Configuring the Scale (igBulletGraph)" +slug: igbulletgraph-configuring-the-scale +--- +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# Configuring the Scale (igBulletGraph) + +## Topic Overview + +#### Purpose + +This topic explains, with examples, how to customize the scale of the `igBulletGraph`™ control. This includes positioning the scale inside the control and configuring the scale tick marks and labels. (For the default settings, see the [*igBulletGraph* Overview](///igbulletgraph-overview.mdx) topic.) + +### Required background + +The following topics are prerequisites to understanding this topic: + +- [*igBulletGraph* Overview](///igbulletgraph-overview.mdx): This topic provides conceptual information about the `igBulletGraph` control including its main features, minimum requirements, and user functionality. + +- [Adding *igBulletGraph*](///adding/igbulletgraph-adding.mdx): This is a group of topics explaining how to add the `igBulletGraph` control to an HTML page and an ASP.NET MVC application. + + +### In this topic + +This topic contains the following sections: + +- [**Introduction**](#introduction) + - [Scale configuration summary](#configuration-summary) + - [Scale configuration summary chart](#configuration-summary-chart) +- [**Configuring the Scale’s Size and Position**](#size-and-position) + - [Overview](#size-and-position-overview) + - [Property settings](#size-and-position-properties) + - [Example](#size-and-position-example) +- [**Configuring the Scale’s Range**](#range) + - [Overview](#range-overview) + - [Property settings](#range-properties) + - [Example](#range-example) +- [**Configuring the Scale’s Major Tick Marks**](#major-tick-marks) + - [Overview](#major-tick-marks-overview) + - [Configuring the position along the scale, count, and spacing](#major-tick-marks-position-count-spacing) + - [Configuring the position across the scale and the length of the segments](#major-tick-marks-segments) + - [Property settings](#major-tick-marks-properties) + - [Example](#major-tick-marks-example) +- [**Configuring the Scale’s Minor Tick Marks**](#minor-tick-marks) + - [Overview](#minor-tick-marks-overview) + - [Configuring the position along the scale, count, and spacing](#minor-tick-marks-position-count-spacing) + - [Configuring the position across the scale and the length of the segments](#minor-tick-marks-segments) + - [Property settings](#minor-tick-marks-properties) + - [Example](#minor-tick-marks-example) +- [**Configuring the Scale’s Labeling**](#labeling) + - [Overview](#labeling-overview) + - [Event handling](#labeling-event-handling) + - [Property settings](#labeling-property-settings) + - [Example – horizontal orientation](#labeling-example-horizontal) + - [Example – vertical orientation](#labeling-example-vertical) +- [**Related Content**](#related-content) + - [Topics](#topics) + - [Samples](#samples) + + +## Introduction + +#### Scale configuration summary + +The scale of the `igBulletGraph` control is a logical entity formed by the tick marks and the (numbering) labels. The size and position of the tick marks is configured relative to the [Graph area](../../../00_igBulletGraph_Overview.mdx#logical-areas) and the position of the numbering labels – relative to the inner edge of the control (the bottom edge at horizontal orientation). + +The tick marks of the `igBulletGraph` control identify equal intervals of measure along the graph. Two types of tick marks are supported – major and minor. Both can be positioned along the scale by adjusting the values of the respective extent-related properties which are measured against the Graph area. The tick marks’ exact count, position, look, and frequency of occurrence can be customized by property settings. + +As far as the labels are concerned, various aspects of them can be configured such as position, text, format, etc.. + +### Scale configuration summary chart + +The following table explains briefly the configurable aspects of `igBulletGraph` control’s scale and maps them to properties that configure them. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Configurable aspectsPropertyDefault value
\*\*Position\*\*\*0.05\*
\*0.95\*
\*\*Range and Values\*\*\*\*Max value\*\*\*0\*
\*\*Min value\*\*\*100\*
\*\*Tick marks\*\*\*\*Major tick marks\*\*\*\*Position\*\* (within the scale)\*\*, spacing, and length\*\*Not set
\*0\*
\*0\*
\*0.02\*
\*0.2\*
\*\*Look-and-feel\*\*ColorDefined in the default theme
Width\*2.0\*
\*\*Minor tick marks\*\*\*\*Number\*\* (between two adjacent major tick marks)\*3.0\*
\*\*Position\*\*\*0.06\*
\*0.2\*
\*\*Look-and-feel\*\*ColorDefined in the default theme
Width\*1.0\*
\*\*Labels\*\*\*\*Position and spacing\*\*\*0\*
Not set
\*0\*
\*0\*
\*\*Look-and-feel\*\*ColorDefined in the default theme
FontDefined in the default theme
+ +## Configuring the Scale’s Size and Position + +### Overview + +The scale’s size and position within the `igBulletGraph` control in the along-the scale-dimension is determined relative the [Graph area](../../../00_igBulletGraph_Overview.mdx#logical-areas). This is done through a pair of properties ( and ). + +![](images/igBulletGraph_Configuring_the_Scale_1.png) + +The positioning of the scale in the other (across-the-scale) dimension of the Graph area is not configurable by itself; instead, all elements comprising the scale are configured individually. + +>**Note:** The value of the `LabelExtent` property, which controls the positioning of the numbering labels, is measured relative to the height of the control when its orientation is horizontal and to its width otherwise. (For details, see [Configuring the Orientation and Direction (*igBulletGraph*)](//igbulletgraph-configuring-the-orientation-and-direction.mdx).) + +### Property settings + +The following table maps the desired behavior to its respective property settings. For an illustration of the configurable aspects, see the [Example](#size-and-position-example). + + + + + + + + + + + + + + + + + + + + + + + + + + +
In order to configure:Use this property:And set it to:
\*\*Aspect\*\*\*\*Details\*\*
Dimension along the scale – size and positionStarting position\*\*The starting position of the\*\* \*\*scale\*\* relative to the left edge of the [Graph area](../../../00_igBulletGraph_Overview.mdx#logical-areas) at horizontal orientation or to the bottom edge at vertical orientation. (When the direction of the scale is inverted, these become, respectively, the right edge at horizontal orientation and top edge at vertical orientation. For details, see [Configuring the Orientation and Direction (\*igBulletGraph\*)](//igbulletgraph-configuring-the-orientation-and-direction.mdx).)The desired value as a relative part the width/height of the control (depending on the orientation) presented as a fraction of 1 (e.g. \*0.2\*)
Ending position\*\*The ending position of the scale\*\* relative to the left edge of the Graph area relative to the left edge of the control in horizontal orientation or to the bottom edge in vertical orientation. (When the direction of the scale is inverted, these become, respectively, the right edge at horizontal orientation and top edge at vertical orientation. For details, see [Configuring the Orientation and Direction (\*igBulletGraph\*)](//igbulletgraph-configuring-the-orientation-and-direction.mdx).)The desired value as a relative part the width/height of the control width/height (depending on the orientation) presented as a fraction of 1 (e.g. \*0.8\*)
+ + +### Example + +The screenshot below demonstrates how the `igBulletGraph` would look as a result of the following settings: + +Property | Value +---|--- + | 0.2 + | 0.9 + + +![](images/igBulletGraph_Configuring_the_Scale_2.png) + +Following is the code that implements this example. + +**In JavaScript:** + +```js +$('#igBulletGraph').igBulletGraph({ + width: 300, + height: 70, + scaleStartExtent: 0.2, + scaleEndExtent: 0.9}); +``` + + +## Configuring the Scale’s Range + +#### Overview + +The values of the scale are defined by specifying its value range, that is, its minimum and maximum values. This is done with the and properties. + +Setting the minimum and maximum values implicitly defines all values within the scale; all values are meant as evenly distributed between the minimum and maximum values. However, only those values are displayed for which there is a numbering label, placed on the scale. (The scale’s values can be displayed only through the numbering labels. The labels display the respective values based on the label’s position on the scale, i.e. the labels’ values are configured through the positioning of the labels along the scale and not set explicitly.) There is no requirement to have labels at the positions of the minimum and maximum values which means that the minimum and maximum values may not be indicated visually on the scale and the scale can look something like this: + +![](images/igBulletGraph_Configuring_the_Scale_3.png) + +Having the scales’ range defined also enables the positioning of the other value-based visual elements on the scale, namely the performance bar, comparative ranges, comparative marker, and the performance bar. Note that because these elements are value-based, when the scale’s range changes (i.e. when either its minimum or maximum value (or both) changes), these visual elements are re-positioned spatially together with the scale’s values keeping their position on the scale. (To see this effect in action, refer to the [Range Settings]({environment:SamplesUrl}/bullet-graph/range-settings) sample.) + +### Property settings + +The following table maps the desired behavior to its respective property settings. For an illustration of the configurable aspects, see the [Example](#size-and-position-example). + + + + + + + + + + + + + + + + + + + + + + + + + +
In order to configure:Use this property:And set it to:
\*\*Aspect\*\*\*\*Details\*\*
The minimum value of the scaleThe value at which the scale starts.The desired value in the measures of the scale
The maximum value of the scaleThe value at which the scale ends.The desired value in the measures of the scale
+ +### Example + +The screenshot below demonstrates how the `igBulletGraph` would look as a result of the following settings: + +Property | Value +---|--- + | 60 + | 70 + + +![](images/igBulletGraph_Configuring_the_Scale_4.png) + +Following is the code that implements this example. + +**In JavaScript:** + +```js +$('#igBulletGraph').igBulletGraph({ + width: 300, + height: 70, + minimumValue: 60, + maximumValue: 70}); +``` + + +## Configuring the Scale’s Major Tick Marks + +#### Overview + +The major tick marks of the `igBulletGraph` control can be customized in terms of position and interval at which they occur. The height, thickness, and color of the line segments that forms the major tick marks are configurable as well. + +### Configuring the position along the scale, count, and spacing + +The major tick marks are defined in terms of starting and ending points (the positions of the first and the last tick marks relative to the edges of the [Graph area](../../../00_igBulletGraph_Overview.mdx#logical-areas) and the interval (the distance from each other) at which they occur. (This is done through the , , and properties.) This way, defining the starting and ending points of the major tick marks essentially defines the position and length of the scale. + +![](images/igBulletGraph_Configuring_the_Scale_5.png) + +### Configuring the position across the scale and the length of the segments + +In the across-the-scale dimension, the length and position of the line segments that form the major tick marks is configured relative to the edges of the [Graph area](../../../00_igBulletGraph_Overview.mdx#logical-areas). (This is done through the and properties.) + +![](images/igBulletGraph_Configuring_the_Scale_6.png) + +### Property settings + +The following table maps the desired behavior to its respective property settings. For an illustration of the configurable aspects, see the [Example](#major-tick-marks-example). + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
In order to configure:Use this property:And set it to:
\*\*Aspect\*\*\*\*Details\*\*
\*\*Position along the scale, count, and spacing\*\*Starting pointThe distance at which the major tick marks begin relative to the [starting position](#size-and-position-properties) of the scaleThe desired distance (in the measures of the scale) from scale start position
Ending pointThe distance at which the major tick marks end relative to the [ending position](#size-and-position-properties) of the scaleThe desired distance (in the measures of the scale) from the scale end position
IntervalThe interval at which to place the major tick marks (Interval is the distance – in the measures of the scale – between two adjacent major tick marks.)The desired value in measures of the scale
\*\*Position across the scale and length of the segments\*\*Starting pointThe starting point of the line segments that form the major tick marks. (The starting point is defined relative to the bottom of the Graph area in horizontal orientation or to the left edge of the Graph area in vertical orientation.) Negative values are supported as well, indicating positions beneath/ on the left of the Graph area.The desired value (in the measures of the scale) as a relative part the height/width of the Graph area (depending on the orientation) presented as a fraction of 1 (e.g. \*0.2\*)
Ending pointThe ending point of the line segments that form major tick marks relative to the bottom of the Graph area in horizontal orientation or to the left border of the Graph area in vertical orientation. Negative values are supported as well, indicating positions beneath/ on the left of the Graph area. (The difference between the starting and the ending points forms the length of the marks’ line segments.)The desired value as a relative part the height/width of the Graph area (depending on the orientation) presented as a fraction of 1 (e.g. \*0.8\*)
\*\*Look-and-feel\*\*ThicknessThe thickness of the major tick marks’ line segments.The desired value in pixels
ColorThe color of the major tick marksThe desired color
+ + +### Example + +The screenshot below demonstrates how the `igBulletGraph` looks as a result of the following settings: + +Property | Value +---------|------ + | 30 + | "lime" + | 0.9 + | 30 + | 10 + | 0.5 + | 3 + + +![](images/igBulletGraph_Configuring_the_Scale_7.png) + +Following is the code that implements this example. + +**In JavaScript:** + +```js +('#igBulletGraph').igBulletGraph({ + width: 300, + height: 70, + interval: 30, + tickBrush: 'lime', + tickStartExtent: 0.5, + tickEndExtent: 0.9, + ticksPostInitial: 30, + ticksPreTerminal: 10, + tickStrokeThickness: 3 }); +``` + + +## Configuring the Scale’s Minor Tick Marks + +#### Overview + +The minor tick marks of the `igBulletGraph` control can be explicitly disabled or customized in terms of number (between two major tick marks), positioning, size, and color. + +### Configuring the position along the scale, count, and spacing + +The minor tick marks are defined as a count (the number of minor tick marks between two adjacent major tick marks). (This is done through the property; setting this property to *0* disables (hides) the minor tick marks.) When the count is set, the specified number of minor tick marks is placed evenly between every two adjacent major tick marks, from the first one, to the last. + +### Configuring the position across the scale and the length of the segments + +In the across-the-scale dimension, the minor tick marks length and position is configured relative to the edges of the [Graph area](../../../00_igBulletGraph_Overview.mdx#logical-areas). + +![](images/igBulletGraph_Configuring_the_Scale_8.png) + +### Property settings + +The following table maps the desired behavior to its respective property settings. For an illustration of the configurable aspects, see the [Example](#minor-tick-marks-example). + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
In order to configure:Use this property:And set it to:
\*\*Aspect\*\*\*\*Details\*\*
\*\*Number and spacing\*\*The number of minor tick marks between two adjacent major tick marks.The desired number; setting of \*0\* hides the minor tick marks
\*\*Line segments\*\*\*\*Length and position\*\*Starting pointThe starting point of the line segments that form the minor tick marks. (The starting point is defined relative to the bottom of the [Graph area](../../../00_igBulletGraph_Overview.mdx#logical-areas) in horizontal orientation or to the left edge of the Graph area in vertical orientation.) Negative values are supported as well, indicating positions beneath/ on the left of the Graph area.The desired value as a relative part the height/width of the control height/width (depending on the orientation) presented as a fraction of 1 (e.g. \*0.2\*)
\*\*Ending point\*\*The ending point of the line segments that form minor tick marks relative to the bottom of the Graph area in horizontal orientation or to the left border of the Graph area in vertical orientation. Negative values are supported as well, indicating positions beneath/ on the left of the Graph area. (The difference between the starting and the ending points forms the length of the marks’ line segments.)The desired value as a relative part the height/width of the control height/width (depending on the orientation) presented as a fraction of 1 (e.g. \*0.2\*\*5\*)
\*\*Look-and-feel\*\*ThicknessThe thickness of the minor tick marksThe desired value in pixels
ColorThe color of the minor tick marksThe desired color
+ + +### Example + +The screenshot below demonstrates how the `igBulletGraph` looks as a +result of the following settings: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
In order to configure:Use this property:And set it to:
\*\*Aspect\*\*\*\*Details\*\*
\*\*Number and spacing\*\*The number of minor tick marks between two adjacent major tick marks.The desired number; setting of \*0\* hides the minor tick marks
\*\*Line segments\*\*\*\*Length and position\*\*Starting pointThe starting point of the line segments that form the minor tick marks. (The starting point is defined relative to the bottom of the [Graph area](../../../00_igBulletGraph_Overview.mdx#logical-areas) in horizontal orientation or to the left edge of the Graph area in vertical orientation.) Negative values are supported as well, indicating positions beneath/ on the left of the Graph area.The desired value as a relative part the height/width of the control height/width (depending on the orientation) presented as a fraction of 1 (e.g. \*0.2\*)
\*\*Ending point\*\*The ending point of the line segments that form minor tick marks relative to the bottom of the Graph area in horizontal orientation or to the left border of the Graph area in vertical orientation. Negative values are supported as well, indicating positions beneath/ on the left of the Graph area. (The difference between the starting and the ending points forms the length of the marks’ line segments.)The desired value as a relative part the height/width of the control height/width (depending on the orientation) presented as a fraction of 1 (e.g. \*0.2\*\*5\*)
\*\*Look-and-feel\*\*ThicknessThe thickness of the minor tick marksThe desired value in pixels
ColorThe color of the minor tick marksThe desired color
+ +![](images/igBulletGraph_Configuring_the_Scale_9.png) + +Following is the code that implements this example. + +**In JavaScript:** + +```js +('#igBulletGraph').igBulletGraph({ + width: 300, + height: 70, + minorTickCount: 4, + minorTickBrush: 'purple', + minorTickStartExtent: 0.05, + minorTickEndExtent: 0.1, + minorTickStrokeThickness: 2, + interval: 20}); +``` + + +## Configuring the Scale’s Labeling + +### Overview + +By default, the labels indicating the scale’s measures are enabled. The labels are defined in terms of the following factors: + +- **Starting and ending points** – the positions of the first and the last label relative to the edges of the scale +- **Breadth of the label row** – relative to the height/width of the control, depending on the orientation (vertical/horizontal). The breadth can be controlled only indirectly by the font settings in the applied style template. +- **The interval** (the distance from each other) at which they occur. (This is done through the , and properties.) +- **The position of the label row** in the across-the-scale dimension – the default is at the bottom / on the left of the control (for horizontal or vertical orientation, respectively); the entire row can be shifted vertically at horizontal scale orientation or the horizontally at vertical scale orientation. (This is done through the property.) + +![](images/igBulletGraph_Configuring_the_Scale_10.png) + +The value that each label displays is defined by the value represented by its position on the scale (This requires [**configuring the scale’s value range**](#range).) A string format can be applied to the labels so that their look is additionally customized. By default, a numeric label is displayed for each of the major tick marks and the labels are positioned beneath / on the left of the scale depending on the scale’s orientation (horizontal/vertical, respectively). + +If you customize the labels and the major tick marks, you will more likely need to make sure they align to each other; to achieve alignment, set the same value for the tick marks interval ( property) and the label interval (`labelInterval` property). (By default, they are aligned because the `labelInterval` property is not set and uses the value set for interval.) + +### Event handling + +The labels of `igBulletGraph` can be additionally formatted and aligned on handling the corresponding events. + +The following table maps the desired behavior to its respective event. + +In order to: | Handle this event: +---|--- +Format the labels | +Align the labels | + + +### Property settings + +The following table maps the desired behavior to its respective property settings. For an illustration of the configurable aspects, see [Example – horizontal orientation](#labeling-example-horizontal). + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
In order to configure:Use this property:And set it to:
\*\*Aspect\*\*\*\*Details\*\*
\*\*Label row\*\*PositionThe positioning of the label row relative to bottom/left edge of the control (depending on the orientation – vertical/horizontal).The desired value presented as a relative part the height/width of the control (depending on the orientation – vertical/horizontal) presented as a fraction of 1 (e.g. \*0.\*\*8\*).
\*\*Number and spacing\*\*Starting pointPosition (in the measures of the scale) of the first label along the scaleThe value (in the measures of the scale) at which the first label of the scale is to be displayed
Ending pointPosition (in the measures of the scale) of the last label along the scaleThe value (in the measures of the scale) at which the last label of the scale is to be displayed
IntervalThe interval at which to place the labels (Interval is the distance between two adjacent labels in the measures of the scale.)The desired value in the measure of the scale
\*\*Look-and-feel\*\*Font colorFont color of the labelsThe desired color
+ +>**Note:** You can set the font-related properties in CSS through the `.ui-bulletgraph-label` and `.ui-bulletgraph` CSS classes. + +### Example – horizontal orientation + +The screenshot below demonstrates how the *igBulletGraph* looks as a result of the following settings with the default horizontal scale orientation: + +Property | Value +---|--- + | 0.5 + |30 + | 20 + | 20 + | 'green' + +![](images/igBulletGraph_Configuring_the_Scale_11.png) + +Following is the code that implements this example. + +**In JavaScript:** + +```js +('#igBulletGraph').igBulletGraph({ + width: 300, + height: 70, + labelExtent: 0.5, + labelInterval: 30, + labelsPostInitial: 20, + labelsPreTerminal: 20, + fontBrush: 'green'}); +``` + +### Example – vertical orientation + +The screenshot below demonstrates how the `igBulletGraph` looks as a result of the following property settings (same as in [Example – horizontal orientation](#labeling-example-horizontal)) and vertical orientation: + +Property | Value +---|--- + | Vertical + |0.5 + | 30 + | 20 + | 20 + | 'green' + + +![](images/igBulletGraph_Configuring_the_Scale_12.png) + +Following is the code that implements this example. + +**In JavaScript:** + +```js +('#igBulletGraph').igBulletGraph({ + height: 300, + width: 70, + orientation: 'vertical', + labelExtent: 0.5, + labelInterval: 30, + labelsPostInitial: 20, + labelsPreTerminal: 20, + fontBrush: 'green'}); +``` + + +## Related Content + +### Topics + +The following topics provide additional information related to this topic. + +- [Configuring Orientation and Direction (*igBulletGraph*)](//igbulletgraph-configuring-the-orientation-and-direction.mdx) : This topic explains how to configure the igBulletGraph control with vertical scale and/or inverted scale direction. + +- [Configuring the Performance Bar (*igBulletGraph*)](/igbulletgraph-configuring-the-performance-bar.mdx): This topic explains, with examples, how to configure the performance bar of the igBulletGraph control. This includes the value indicated by the bar, its width, position, and formatting. + +- [Configuring the Comparative Marker (*igBulletGraph*)](/igbulletgraph-configuring-the-comparative-marker.mdx): This topic explains, with code examples, how to configure the comparative measure marker of the igBulletGraph control. This includes the marker’s value, width, and formatting. + +- [Configuring Comparative Ranges (*igBulletGraph*)](/igbulletgraph-configuring-comparative-ranges.mdx): This topic explains, with code examples, how to configure ranges in the igBulletGraph control. This includes the number of ranges and their positions, lengths, widths, and formatting. + +- [Configuring the Background (*igBulletGraph*)](/igbulletgraph-configuring-the-background.mdx): This topic explains, with code examples, how to configure a background for the bullet graph. This includes setting the background’s size, position, color, and border. + +- [Configuring the Tooltips (*igBulletGraph*)](/igbulletgraph-configuring-the-tooltips.mdx): This topic explains, with code examples, how to enable the tooltips in the igBulletGraph control and configure the delay with which they are displayed. + +### Samples + +The following samples provide additional information related to this topic. + +- [Tick Marks Settings]({environment:SamplesUrl}/bullet-graph/tick-marks-settings) This sample demonstrates the supported tickmarks configuration of the `igBulletGraph` control. + +- [Scale Labeling Settings]({environment:SamplesUrl}/bullet-graph/scale-labeling-settings): This sample demonstrates the supported scale labeling configurations of the `igBulletGraph` control. + + + + + + + diff --git a/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/the-background.mdx b/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/the-background.mdx new file mode 100644 index 0000000000..e6f5afb5ba --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/the-background.mdx @@ -0,0 +1,194 @@ +--- +title: "Configuring the Background (igBulletGraph)" +slug: igbulletgraph-configuring-the-background +--- +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# Configuring the Background (igBulletGraph) + +## Topic Overview + +#### Purpose + + +This topic explains, with code examples, how to configure a background for the bullet graph. This includes setting the background’s size, position, color, and border. + +### Required background + +The following topics are prerequisites to understanding this topic: + +- [*igBulletGraph* Overview](//igbulletgraph-overview.mdx): This topic provides conceptual information about the `igBulletGraph`™ control including its main features, minimum requirements, and user functionality. + +- [Adding *igBulletGraph*](//adding/igbulletgraph-adding.mdx): This is a group of topics demonstrating how to add the `igBulletGraph` control to an HTML page and to an ASP.NET MVC application. + +### In this topic + +This topic contains the following sections: + +- [**Configuring the Background**](#configuring) + - [Background configuration summary](#configuration-summary) + - [Background configuration summary chart](#configuration-summary-chart) + - [Property settings](#property-settings) + - [Example](#example) +- [**Related Content**](#related-content) + - [Topics](#topics) + + +## Configuring the Background + +#### Background configuration summary + +The background of the `igBulletGraph` control is configurable in terms of spread and position and look-and-feel (fill and border). The spread and position are configurable in the dimension across the scale (through the and properties); along the scale, the background always spreads from one edge of the control to the other. The fill color and the border are managed by a set of properties available in the style template. + +The following picture demonstrates a background color of a variety of orange and a cyan border with a thickness of 3 pixels. The background extent is made smaller by providing values for its and properties. + +![](images/igBulletGraph_Configuring_the_Background_1.png) + +### Background configuration summary chart + +The following table explains briefly the configurable aspects of `igBulletGraph` control’s background and maps them to properties that configure them. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Configurable aspectsPropertyDefault value
\*\*Spread and position\*\*
(across the scale)		\*0\*
\*1.0\*
\*\*Look-and-feel\*\*Fill colorDefined in the default theme
Border colorDefined in the default theme
Border thickness\*2.0\*
+ + +### Property settings + +The following table maps the desired behavior to its respective property settings. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
In order to configure:Use this property:And set it to:
\*\*Aspect\*\*\*\*Details\*\*
\*\*Spread and position\*\*
(across the scale)		Bottom / left edge positionThe position of lower edge of the background (at horizontal orientation) or the left edge (at vertical orientation) relative to the bottom edge of the [Graph area](../../00_igBulletGraph_Overview.mdx#logical-areas) at horizontal orientation or to its left edge – at vertical orientation.The desired value as a relative part of the height/width of the Graph area (depending on the orientation) presented as a fraction of 1 (e.g. \*0.2)\*
Top / right edge positionThe position of top edge of the background at horizontal orientation or the right edge at vertical orientation relative to the lower edge of the Graph area at horizontal orientation or to its left edge – at vertical orientation.The desired value as a relative part of the height/width of the Graph area (depending on the orientation) presented as a fraction of 1 (e.g. \*0.2\*)
\*\*Look-and-feel\*\*Fill colorFill color of the backgroundThe desired color
Border thicknessBorder thickness of the backgroundThe desired value in pixels
Border colorBorder color of the backgroundThe desired color
+ +### Example + +The screenshot below demonstrates how the `igBulletGraph` looks as a result of the following settings: + +Property | Value +---|--- + | '#FFDAB9' + | '#00FFFF' + | “3” + | “0.2” + | “0.7” + + +![](images/igBulletGraph_Configuring_the_Background_2.png) + +Following is the code that implements this example. + +**In JavaScript:** + +```js + $(function () { + $("#bulletGraph").igBulletGraph({ + width: "300px", + height: "100px", + backingBrush:'#FFDAB9', + backingOutline: '#00FFFF', + backingStrokeThickness: "3", + backingInnerExtent:"0.2", + backingOuterExtent:"0.7" + }); +``` + + +## Related Content + +### Topics + +The following topics provide additional information related to this topic. + + +- [Configuring the Scale (*igBulletGraph*)](/scale/igbulletgraph-configuring-the-scale.mdx): This topic explains, with examples, how to configure the scale of the `igBulletGraph` control. This includes positioning the scale inside the control and configuring the scale tick marks and labels. + +- [Configuring the Performance Bar (*igBulletGraph*)](/igbulletgraph-configuring-the-performance-bar.mdx): This topic explains, with examples, how to configure the performance bar of the `igBulletGraph` control. This includes the value indicated by the bar, its width, position, and formatting. + +- [Configuring the Comparative Marker (*igBulletGraph*)](/igbulletgraph-configuring-the-comparative-marker.mdx): This topic explains, with code examples, how to configure the comparative measure marker of the `igBulletGraph` control. This includes the marker’s value, width, and formatting. + +- [Configuring Comparative Ranges (*igBulletGraph*)](/igbulletgraph-configuring-comparative-ranges.mdx): This topic explains, with code examples, how to configure ranges in the `igBulletGraph` control. This includes the number of ranges and their positions, lengths, widths, and formatting. + +- [Configuring the Tooltips (*igBulletGraph*)](/igbulletgraph-configuring-the-tooltips.mdx): This topic explains, with code examples, how to enable the topoltips in the `igBulletGraph` control and configure the delay with which they are displayed. + + + + + + + diff --git a/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/the-comparative-marker.mdx b/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/the-comparative-marker.mdx new file mode 100644 index 0000000000..ab57520e97 --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/the-comparative-marker.mdx @@ -0,0 +1,253 @@ +--- +title: "Configuring the Comparative Marker (igBulletGraph)" +slug: igbulletgraph-configuring-the-comparative-marker +--- +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# Configuring the Comparative Marker (igBulletGraph) + +## Topic Overview + +#### Purpose + +This topic explains, with code examples, how to configure the comparative measure marker of the `igBulletGraph`™ control. This includes the marker’s value, width, and formatting. + +### Required background + +The following topics are prerequisites to understanding this topic: + +- [*igBulletGraph* Overview](//igbulletgraph-overview.mdx): This topic provides conceptual information about the `igBulletGraph` control including its main features, minimum requirements, and user functionality. + +- [Adding *igBulletGraph*](//adding/igbulletgraph-adding.mdx): This is a group of topics explaining how to add the `igBulletGraph` control to an HTML page and an ASP.NET MVC application. + + +### In this topic + +This topic contains the following sections: + +- [**Configuring the Comparative Marker**](#configuring) + - [Comparative marker configuration summary](#configuration-summary) + - [Comparative marker configuration summary chart](#configuration-summary-chart) + - [Property settings](#property-settings) + - [Example](#example) +- [**Related Content**](#related-content) + - [Topics](#topics) + - [Samples](#samples) + + +## Configuring the Comparative Marker + +#### Comparative marker configuration summary + +The comparative marker indicates a mark on the scale against which the value denoted by the performance bar is compared. This comparative value can be some sort of a target to aim for (like target sales volume) or a limit that not to be exceeded (as the 98.6°F/37°C mark on a medical thermometer scale). + +The value indicated by the comparative marker (and its position on the scale, respectively) is set by the property. The comparative marker is customizable in terms of position and size across the scale ( and ), breadth () and look-and-feel (fill color – , border thickness – , border color – ) using the respective properties. + +![](images/igBulletGraph_Configuring_the_Comparative_Marker_1.png) + +#### Comparative marker configuration summary chart + +The following table explains briefly the configurable aspects of `igBulletGraph` control’s comparative marker and maps them to properties that configure them. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Configurable aspectsPropertyDefault value
\*\*Name\*\*Not set
\*\*Value indicated\*\*Not set
\*\*Breadth\*\*\*3.0\*
\*\*Position across the scale\*\*\*\*Inner edge\*\*\*0.3\*
\*\*Outer edge\*\*\*0.85\*
\*\*Look-and-feel\*\*Fill colorDefined in the default theme
Border thickness\*1.0\*
Border colorDefined in the default theme
\*\*Tooltip\*\*The value indicated by the comparative marker
+ + +#### Property settings + +The following table maps the desired behavior to its respective property settings. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
In order to configure:Use this property:And set it to:
\*\*Aspect\*\*\*\*Details\*\*
\*\*Name\*\*A name for the comparative marker (for displaying in the [tooltip)](./05_igBulletGraph_Configuring_the_Tooltips.mdx#comparative-marker)A string expressing the name of the comparative marker
\*\*Value to indicate\*\*The value to indicateThe desired value in the measures of the scale
\*\*Breadth\*\*The breadth of the markerThe desired value in pixels
\*\*Position across the scale\*\*\*\*Inner edge\*\*The position of lower edge of the comparative marker at horizontal orientation or the left edge at vertical orientation.The desired value as a relative part of the height/width of the [Graph area](../../00_igBulletGraph_Overview.mdx#logical-areas) (depending on the orientation) presented as a fraction of 1 (e.g. \*0.2\*)
\*\*Outer edge\*\*The position of top edge of the comparative marker at horizontal orientation or the right edge at vertical orientation.The desired value as a relative part of the height/width of the Graph area (depending on the orientation) presented as a fraction of 1 (e.g. \*0.2\*)
\*\*Look-and-feel\*\*Fill colorFill color of the markerThe desired color
Border thicknessThickness of the marker’s borderThe desired value in pixels
Border colorConfigure the color of the marker’s borderThe desired color
TooltipContent of the comparative marker’s borderThe desired template(see [Configuring the Tooltips (\*igBulletGraph\*)](/igbulletgraph-configuring-the-tooltips.mdx) topic).
+ +#### Example + +The screenshot below demonstrates how the `igBulletGraph` looks as a result of the following settings: + +Property | Value +---|--- + | “70” + | “10” + | '#FFFF00' + | “0.2” + | “0.7” + | '#006400' + | “3” + + +![](images/igBulletGraph_Configuring_the_Comparative_Marker_2.png) + +Following is the code that implements this example. + +**In JavaScript:** + +```js +$(function () { +$("#bulletGraph").igBulletGraph({ + height: "70", + width: "300", + targetValue:"70", + targetValueBreadth:"10", + targetValueBrush: '#FFFF00', + targetValueOutline:'#006400', + targetValueStrokeThickness: "2", + targetValueInnerExtent:"0.3", + targetValueOuterExtent:"0.8" +}); +``` + + +## Related Content + +### Topics + +The following topics provide additional information related to this topic. + +- [Configuring the Scale (*igBulletGraph*)](/scale/igbulletgraph-configuring-the-scale.mdx): This topic explains, with examples, how to configure the scale of the `igBulletGraph` control. This includes positioning the scale inside the control and configuring the scale tick marks and labels. + +- [Configuring the Performance Bar (*igBulletGraph*)](/igbulletgraph-configuring-the-performance-bar.mdx): This topic explains, with examples, how to configure the performance bar of the `igBulletGraph` control. This includes the value indicated by the bar, its width, position, and formatting. + +- [Configuring Comparative Ranges (*igBulletGraph*)](/igbulletgraph-configuring-comparative-ranges.mdx): This topic explains, with code examples, how to configure ranges in the `igBulletGraph` control. This includes the number of ranges and their positions, lengths, widths, and formatting. + +- [Configuring the Background (*igBulletGraph*)](/igbulletgraph-configuring-the-background.mdx): This topic explains, with code examples, how to configure a background for the bullet graph. This includes setting the background’s size, position, color, and border. + +- [Configuring the Tooltips (*igBulletGraph*)](/igbulletgraph-configuring-the-tooltips.mdx): This topic explains, with code examples, how to enable the tooltips in the `igBulletGraph` control and configure the delay with which they are displayed. + + +### Samples + +The following samples provide additional information related to this topic. + +- [Performance Bar Settings]({environment:SamplesUrl}/bullet-graph/performance-bar-settings): This sample demonstrates configuring the performance (actual value) bar, the comparative measure (target value) marker, and the dimension of the scale of the `igBulletGraph` control. + +- [Basic Configuration]({environment:SamplesUrl}/bullet-graph/basic-configuration): This sample demonstrates a simple configuration of the `igBulletGraph` control. + + + + + + + diff --git a/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/the-performance-bar.mdx b/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/the-performance-bar.mdx new file mode 100644 index 0000000000..6940de5d6f --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/the-performance-bar.mdx @@ -0,0 +1,243 @@ +--- +title: "Configuring the Performance Bar (igBulletGraph)" +slug: igbulletgraph-configuring-the-performance-bar +--- +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# Configuring the Performance Bar (igBulletGraph) + +## Topic Overview + +#### Purpose + +This topic explains, with code examples, how to configure the performance bar of the `igBulletGraph`™ control. This includes the value indicated by the bar, its width, position, and formatting. + +### Required background + +The following topics are prerequisites to understanding this topic: + +- [*igBulletGraph* Overview](//igbulletgraph-overview.mdx): This topic provides conceptual information about the `igBulletGraph` control including its main features, minimum requirements, and user functionality. + +- [Adding *igBulletGraph*](//adding/igbulletgraph-adding.mdx): This is a group of topics explaining how to add the `igBulletGraph` control to an HTML page and an ASP.NET MVC application. + + +### In this topic + +This topic contains the following sections: + +- [**Configuring the Performance Bar**](#configuring) + - [Performance bar appearance configuration summary](#appearance-summary) + - [Performance bar appearance configuration summary chart](#appearance-summary-chart) + - [Property settings](#property-settings) + - [Example](#example) +- [**Related Content**](#related-content) + - [Topics](#topics) + - [Samples](#samples) + + +## Configuring the Performance Bar + +#### Performance bar appearance configuration summary + +The performance bar always starts at the beginning of the scale range. Only his ending position is configurable, which effectively configures the length of the bar. The ending position is managed by the property. + +Its position in the across-the-scale dimension is configurable relative to the edges of the Graph area through the and properties. Configuring the position of the performance bar also defines its width. + +![](images/igBulletGraph_Configuring_the_Performance_Bar_1.png) + +The look-and-feel of the bar can be customized in terms of fill color, border color, and border thickness using the respective properties (, , and ). + +### Performance bar appearance configuration summary chart + +The following table explains briefly the configurable aspects of `igBulletGraph` control’s bar and maps them to properties that configure them. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Configurable aspectsPropertyDefault value
\*\*Name\*\*Not set
\*\*Value to indicate\*\*Not set
\*\*Width and position\*\*
(across the scale)		\*0.5\*
\*0.65\*
\*\*Look-and-feel\*\*Fill colorDefined in the default theme
Border thickness\*1.0\*
Border colorDefined in the default theme
TooltipDepends on whether has been initialized
+ +> **Note:** For details in configuring the tooltip, see [Configuring a Custom Tooltip for the Performance Bar](./05_igBulletGraph_Configuring_the_Tooltips.mdx#performance-bar) in the [Configuring the Tooltips (*igBulletGraph*)](/igbulletgraph-configuring-the-tooltips.mdx) topic.) + +### Property settings + +The following table maps the desired behavior to its respective property settings. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
In order to configure:Use this property:And set it to:
\*\*Aspect\*\*\*\*Details\*\*
\*\*Name\*\*A name for the performance bar (for displaying in the [tooltip](./05_igBulletGraph_Configuring_the_Tooltips.mdx#performance-bar))A string expressing the name of the performance bar
\*\*Value to indicate\*\*The value indicated by the performance barThe desired value in the measures of the scale
\*\*Width and position\*\*
(across the scale)		Bottom / right edge positionThe position of lower edge of the performance bar at horizontal orientation or the right edge at vertical orientation.The desired value as a relative part of the height/width of the [Graph area](../../00_igBulletGraph_Overview.mdx#logical-areas) (depending on the orientation) presented as a fraction of 1 (e.g. \*0.2\*)
Top / left edge positionThe position of top edge of the performance bar at horizontal orientation or the left edge at vertical orientation. (The difference between the starting and the ending points forms the length of the marks’ line segments.)The desired value as a relative part of the height/width of the Graph area (depending on the orientation) presented as a fraction of 1 (e.g. \*0.2\*)
\*\*Look-and-feel\*\*Fill colorFill color of the barThe desired color
Border thicknessThickness of the performance bar’s borderThe desired value in pixels
Border colorColor of the performance bar’s borderThe desired color
\*\*Tooltip\*\*Content of the performance bar’s tooltipThe desired template(See [Configuring the Tooltips (\*igBulletGraph\*)](/igbulletgraph-configuring-the-tooltips.mdx).)
+### Example + +The screenshot below demonstrates how the `igBulletGraph` looks as a result of the following settings: + +Property | Value +---|--- + | *“85”* + | *'#FFA500'* + | *“0.3”* + | *“0.8”* + | *'#A52A2A'* + | *“3”* + + +![](images/igBulletGraph_Configuring_the_Performance_Bar_2.png) + +Following is the code that implements this example. + +**In JavaScript:** + +```js + $(function () { + $("#bulletGraph").igBulletGraph({ + width: "300", + height: "100", + value:"85", + valueBrush: '#FFA500', + valueInnerExtent:"0.3", + valueOuterExtent:"0.8", + valueOutline:'A52A2A', + valueStrokeThickness:"3" + }); +``` + + +## Related Content + +### Topics + +The following topics provide additional information related to this topic. + + +- [Configuring the Scale (*igBulletGraph*)](/scale/igbulletgraph-configuring-the-scale.mdx): This topic explains, with examples, how to configure the scale of the `igBulletGraph` control. This includes positioning the scale inside the control and configuring the scale tick marks and labels. + +- [Configuring the Comparative Marker (*igBulletGraph*)](/igbulletgraph-configuring-the-comparative-marker.mdx) + +This topic explains, with code examples, how to configure the comparative measure marker of the `igBulletGraph` control. This includes the marker’s value, width, and formatting. + +- [Configuring Comparative Ranges (*igBulletGraph*)](/igbulletgraph-configuring-comparative-ranges.mdx): This topic explains, with code examples, how to configure ranges in the `igBulletGraph` control. This includes the number of ranges and their positions, lengths, widths, and formatting. + +- [Configuring the Background (*igBulletGraph*)](/igbulletgraph-configuring-the-background.mdx): This topic explains, with code examples, how to configure a background for the bullet graph. This includes setting the background’s size, position, color, and border. + +- [Configuring the Tooltips (*igBulletGraph*)](/igbulletgraph-configuring-the-tooltips.mdx): This topic explains, with code examples, how to enable the tooltips in the `igBulletGraph` control and configure the delay with which they are displayed. + + +### Samples + +The following samples provide additional information related to this topic. + +- [Performance Bar Settings]({environment:SamplesUrl}/bullet-graph/performance-bar-settings): This sample demonstrates configuring the performance (actual value) bar, the comparative measure (target value) marker, and the dimension of the scale of the `igBulletGraph` control. + + + + + + + diff --git a/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/the-tooltips.mdx b/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/the-tooltips.mdx new file mode 100644 index 0000000000..31f137fcb5 --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/the-tooltips.mdx @@ -0,0 +1,394 @@ +--- +title: "Configuring the Tooltips (igBulletGraph)" +slug: igbulletgraph-configuring-the-tooltips +--- +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# Configuring the Tooltips (igBulletGraph) + +## Topic Overview + +#### Purpose + +This topic explains, with code examples, how to enable the tooltips in the `igBulletGraph`™ control and configure the delay with which they are displayed as well as creating custom tooltips templates and a code sample ilustrating it. + +### Required background + +The following topics are prerequisites to understanding this topic: + +- [*igBulletGraph* Overview](//igbulletgraph-overview.mdx): This topic provides conceptual information about the `igBulletGraph` control including its main features, minimum requirements, and user functionality. + +- [Adding *igBulletGraph*](//adding/igbulletgraph-adding.mdx): This is a group of topics demonstrating how to add the `igBulletGraph`™ control to an HTML page and to an ASP.NET MVC application. + + +### In this topic + +This topic contains the following sections: + +- [**Introduction**](#introduction) + - [Tooltips configuration summary](#configuration-summary) + - [Tooltips configuration summary chart](#configuration-summary-chart) +- [**Enabling/Disabling Tooltips**](#enabling-disabling) + - [Property settings](#enabling-disabling-property) + - [Code Example](#enabling-disabling-example) +- [**Configuring the Tooltip Delay**](#delay) + - [Property settings](#delay-property) + - [Code Example](#delay-example) +- [**Configuring a Custom Tooltip for the Performance Bar**](#performance-bar) + - [Overview](#performance-bar-overview) + - [Property settings](#performance-bar-property) + - [Example](#performance-bar-example) +- [**Configuring a Custom Tooltip for the Comparative Marker**](#comparative-marker) + - [Property settings](#comparative-marker-property) + - [Example](#comparative-marker-example) +- [**Configuring a Custom Tooltip for the Comparative Ranges**](#comparative-ranges) + - [Property settings](#comparative-ranges-property) + - [Example](#comparative-ranges-example) +- [**Configuring tooltips sample**](#configuring-tooltips-sample) +- [**Related Content**](#related-content) + - [Topics](#topics) + + +## Introduction + +#### Tooltips configuration summary + +The `igBulletGraph` control supports tooltips. They are pre-configured to show the values indicated by the performance bar, comparative marker, and comparative ranges. The tooltip for each of these visual elements is configured individually by a property setting. + +Tooltips are configurable in terms of visibility (can be enabled/disabled), delay (the timeout with which the tooltip appears is configurable), and value. Because the value of the tooltips can be set to a custom template, you have a wide array of possibilities to present the information relevant for the specific use case in the most appropriate manner. + +By default, tooltips are disabled. + +### Tooltips configuration summary chart + +The following table maps the configurable aspects of the `igBulletGraph` control related to tooltips to the properties that manage them. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Configurable aspectDetailsProperties / EventsDefault value
[\*\*Visibility\*\*](#enabling-disabling)You can enable/disable tooltips for the \*igBulletGraph\* control.\*False\*
[\*\*Delay\*\*](#delay)The timeout before the tooltip appears upon the visual element at mouse hovering is configurable in milliseconds.\*500\*
ValueYou can provide a custom value for the respective tooltip template property.[\*\*Performance bar\*\*](#performance-bar)Depends on whether has been initialized (see [\*\*Configuring a Custom Tooltip for the Performance Bar\*\*](#performance-bar))
[\*\*Comparative marker\*\*](#comparative-marker)The value indicated by the comparative marker
[\*\*Comparative Range(s)\*\*](#comparative-ranges)The start and end values of the range separated by a hyphen
+ + +> **Note:** In order to bind to different values of the respective visual element when you change the default tooltip template, you must use the ${Item.Property} syntax from within the template. + + +## Enabling/Disabling Tooltips + +You can show or hide (default setting) the tooltips on a `igBulletGraph`. + +### Property settings + +The following table maps the desired behavior to property settings. + +In order to: | Use this property: | And set it to: +---|---|--- +Enable tooltips | | true +Disable tooltips | | false + + +### Code Example + +The following code example enables the tooltips: + +**In JavaScript:** + +```js +$("#bulletgraph").igBulletGraph({ + … + showToolTip: true +}); +``` + + +## Configuring the Tooltip Delay +It is possible to specify a delay by which a tooltip is displayed after the respective visual element has been hovered. The default value is 500 milliseconds. + +### Property settings + +The following table maps the desired behavior to property settings. + +In order to: | Use this property: | And set it to: +---|---|--- +Configure the initial delay before the tooltip is displayed | | The desired value in milliseconds + + +### Code Example + +The following code example sets the tooltip delay to 2000 milliseconds: + +**In JavaScript:** + +```js +$("#bulletgraph").igBulletGraph({ + … + showToolTip: true, + showToolTipTimeout: 2000 +}); +``` + + +## Configuring a Custom Tooltip for the Performance Bar + +### Overview + +The default value of the tooltip is pre-configured depending on whether the property has been initialized. + +If the `valueName` property has been initialized, the default format of the tooltip property would be: + +``` + : +``` + +If the `valueName` property has not been initialized, the default format of the tooltip would be: + +``` + +``` + +To change the data (and/or its look-and-feel) presented by the tooltip, you can set it to a custom template. + +### Property settings + +The following table maps the desired behavior to its respective property settings. + +In order to: | Use this property: | And set it to: +---|---|--- +Set a custom tooltip for the performance bar | | The id of the desired template. + + +### Example + +The screenshot below demonstrates how the tooltip of the `igBulletGraph`’s performance bar looks as a result of the following settings: + +Property | Value +---|--- + | "valueToolTipTemplate" +Where "valueToolTipTemplate" is the id of the template: + +**In HTML:** + +```html + +``` + + +![](images/igBulletGraph_Configuring_the_Tooltips_1.png) + +Following is the code that implements this example. + +**In HTML:** + +```html + + +``` + + +## Configuring a Custom Tooltip for the Comparative Marker + +The tooltip for the comparative marker displays the value set for the marker using the default system font and styled by default in accordance with the look of the control. To specify custom settings, set the tooltip value to a custom template. + +### Property settings + +The following table maps the desired behavior to its respective property +settings. + +In order to: | Use this property: | And set it to: +---|---|--- +Set a custom tooltip for the comparative marker | | The id of the desired template + + +### Example + +The code below illustrates displaying the value presented in the tooltip of the comparative marker as a result of the following settings: + +Property | Value +---|--- + | "targetValueToolTipTemplate" + +Where "targetValueToolTipTemplate" is the id of the template: + +**In HTML:** + +```html + +``` + + +![](images/igBulletGraph_Configuring_the_Tooltips_2.png) + +Following is the code that implements this example. + +**In HTML:** + +```html + + +``` + + +## Configuring a Custom Tooltip for the Comparative Ranges + +By default, the tooltips for the comparative ranges display the starting and ending values of the range, separated by a hyphen (i.e. 0 - 34), no matter where exactly over the range the mouse is being hovered. To change these pre-configured settings, you can set a custom template. + + +### Property settings + +The following table maps the desired behavior to its respective property +settings. + +In order to: | Use this property: | And set it to: +--|--|-- +Set a custom tooltip for the comparative range(s) | | The id of the desired template + + +### Example + +The screenshot below demonstrates displaying the value presented in the tooltip of the comparative range as a result of the following settings: + +Property | Value +---|--- + | "rangeToolTipTemplate" + +Where "rangeToolTipTemplate" is the id of the template: + +**In HTML:** + +```html + +``` + + +![](images/igBulletGraph_Configuring_the_Tooltips_3.png) + +Following is the code that implements this example. + +**In HTML:** + +```html + + +``` + +## Configuring tooltips sample + +This sample demonstrates what can be achieved when combining all of the custom tooltips mentioned above. It includes templates for all of the configurable areas where you can have a tooltip - the , and . +While the first `igBulletGraph` used for visualizing the Development Task and has default tooltips enabled and configured only via the options API, the second one illustrating the Quality Assurance Task is taking advantage of the custom tooltip templates used and has more unique look when key areas are hovered. + +In the sample's context, even though these tasks are executed simultaneously at the course of three weeks, initially more time has been spent on development. This is demonstrated by the progress bars’ placement amongst the three different ranges (“Low, “Medium” and “High”), that represent the level of confidence for delivering the needed results. + +
+ [{environment:SamplesEmbedUrl}/bullet-graph/tooltip-settings]({environment:SamplesEmbedUrl}/bullet-graph/tooltip-settings) +
+ +## Related Content + +### Topics + +The following topics provide additional information related to this topic. + +- [Configuring the Scale (*igBulletGraph*)](/scale/igbulletgraph-configuring-the-scale.mdx): This topic explains, with examples, how to configure the scale of the igBulletGraph control. This includes positioning the scale inside the control and configuring the scale tick marks and labels. + +- [Configuring the Performance Bar (*igBulletGraph*)](/igbulletgraph-configuring-the-performance-bar.mdx): This topic explains, with examples, how to configure the performance bar of the igBulletGraph control. This includes the value indicated by the bar, its width, position, and formatting. + +- [Configuring the Comparative Marker (*igBulletGraph*)](/igbulletgraph-configuring-the-comparative-marker.mdx): This topic explains, with code examples, how to configure the comparative measure marker of the `igBulletGraph` control. This includes the marker’s value, width, and formatting. + +- [Configuring Comparative Ranges (*igBulletGraph*)](/igbulletgraph-configuring-comparative-ranges.mdx): This topic explains, with code examples, how to configure ranges in the `igBulletGraph` control. This includes the number of ranges and their positions, lengths, widths, and formatting. + +- [Configuring the Background (*igBulletGraph*)](/igbulletgraph-configuring-the-background.mdx): This topic explains, with code examples, how to configure a background for the bullet graph. This includes setting the background’s size, position, color, and border. + + diff --git a/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/the-visual-elements.mdx b/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/the-visual-elements.mdx new file mode 100644 index 0000000000..0c645e976d --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/elements/the-visual-elements.mdx @@ -0,0 +1,38 @@ +--- +title: "Configuring the Visual Elements (igBulletGraph)" +slug: igbulletgraph-configuring-the-visual-elements +--- + +# Configuring the Visual Elements (igBulletGraph) + + + +## In This Group of Topics + +### Introduction + +The topic introduces a series of technical articles containing details on how to configure the different visual elements of `igBulletGraph`™. + +### Topics + +- [Configuring the Scale (*igBulletGraph*)](/scale/igbulletgraph-configuring-the-scale.mdx): This topic explains, with examples, how to customize the scale of the `igBulletGraph` control. This includes positioning the scale inside the control and configuring the scale tick marks and labels. (For the default settings, see the [*igBulletGraph* Overview](//igbulletgraph-overview.mdx) topic.) + +- [Configuring the Performance Bar (*igBulletGraph*)](/igbulletgraph-configuring-the-performance-bar.mdx): This topic explains, with code examples, how to configure the performance bar of the `igBulletGraph` control. This includes the value indicated by the bar, its width, position, and formatting. + +- [Configuring the Comparative Marker (*igBulletGraph*)](/igbulletgraph-configuring-the-comparative-marker.mdx): This topic explains, with code examples, how to configure the comparative measure marker of the `igBulletGraph` control. This includes the marker’s value, width, and formatting. + +- [Configuring Comparative Ranges (*igBulletGraph*)](/igbulletgraph-configuring-comparative-ranges.mdx): This topic explains, with code examples, how to configure ranges in the `igBulletGraph` control. This includes the number of ranges and their positions, lengths, widths, and formatting. + +- [Configuring the Background (*igBulletGraph*)](/igbulletgraph-configuring-the-background.mdx): This topic explains, with code examples, how to configure a background for the bullet graph. This includes setting the background’s size, position, color, and border. + +- [Configuring the Tooltips (*igBulletGraph*)](/igbulletgraph-configuring-the-tooltips.mdx): This topic explains, with code examples, how to enable the tooltips in the `igBulletGraph` control and configure the delay with which they are displayed. + + + + + + + + + + diff --git a/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/images/igBulletGraph_Configuring_the_Orientation_and_Direction_1.png b/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/images/igBulletGraph_Configuring_the_Orientation_and_Direction_1.png new file mode 100644 index 0000000000..15afebf39f Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/images/igBulletGraph_Configuring_the_Orientation_and_Direction_1.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/images/igBulletGraph_Configuring_the_Orientation_and_Direction_2.png b/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/images/igBulletGraph_Configuring_the_Orientation_and_Direction_2.png new file mode 100644 index 0000000000..61358295d5 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/images/igBulletGraph_Configuring_the_Orientation_and_Direction_2.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/images/igBulletGraph_Configuring_the_Orientation_and_Direction_3.png b/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/images/igBulletGraph_Configuring_the_Orientation_and_Direction_3.png new file mode 100644 index 0000000000..4fc0f46b0e Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/images/igBulletGraph_Configuring_the_Orientation_and_Direction_3.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/images/igBulletGraph_Configuring_the_Orientation_and_Direction_5.png b/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/images/igBulletGraph_Configuring_the_Orientation_and_Direction_5.png new file mode 100644 index 0000000000..84842a8d93 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/images/igBulletGraph_Configuring_the_Orientation_and_Direction_5.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/images/igBulletGraph_Configuring_the_Orientation_and_Direction_6.png b/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/images/igBulletGraph_Configuring_the_Orientation_and_Direction_6.png new file mode 100644 index 0000000000..e2c7b18c1d Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/images/igBulletGraph_Configuring_the_Orientation_and_Direction_6.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/images/igBulletGraph_Configuring_the_Orientation_and_Direction_7.png b/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/images/igBulletGraph_Configuring_the_Orientation_and_Direction_7.png new file mode 100644 index 0000000000..78a57cccf0 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/images/igBulletGraph_Configuring_the_Orientation_and_Direction_7.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/images/igBulletGraph_Configuring_the_Orientation_and_Direction_8.png b/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/images/igBulletGraph_Configuring_the_Orientation_and_Direction_8.png new file mode 100644 index 0000000000..63142082ef Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/images/igBulletGraph_Configuring_the_Orientation_and_Direction_8.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/the-orientation-and-direction.mdx b/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/the-orientation-and-direction.mdx new file mode 100644 index 0000000000..d0b603a413 --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igbulletgraph/configuring/the-orientation-and-direction.mdx @@ -0,0 +1,208 @@ +--- +title: "Configuring the Orientation and Direction (igBulletGraph)" +slug: igbulletgraph-configuring-the-orientation-and-direction +--- +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# Configuring the Orientation and Direction (igBulletGraph) + +## Topic Overview + +#### Purpose + +This topic explains how to configure the `igBulletGraph`™ control with vertical scale and/or inverted scale direction. + +### Required background + +The following topics are prerequisites to understanding this topic: + +- [*igBulletGraph* Overview](/igbulletgraph-overview.mdx): This topic provides conceptual information about the igBulletGraph control including its main features, minimum requirements, and user functionality. + +- [Adding *igBulletGraph*](/adding/igbulletgraph-adding.mdx): This is a group of topics explaining how to add the igBulletGraph control to an HTML page and an ASP.NET MVC application. + + +### In this topic + +This topic contains the following sections: + +- [**Introduction**](#introduction) + - [Scale orientation and direction configuration summary](#scale-orientation-summary) + - [Scale orientation and direction configuration summary chart](#scale-orientation-summary-chart) +- [**Configuring the Scale Orientation**](#scale-orientation) + - [Property settings](#scale-orientation-property-settings) + - [Example](#scale-orientation-example) +- [**Configuring the Scale Direction (Scale Inversion)**](#scale-direction) + - [Overview](#scale-direction-overview) + - [Property settings](#scale-direction-property-settings) + - [Example – inverted direction at horizontal orientation](#scale-direction-example-horizontal) + - [Example – inverted direction at vertical orientation](#scale-direction-example-vertical) +- [**Related Content**](#related-content) + - [Topics](#topics) + - [Samples](#samples) + + +## Introduction + +### Scale orientation and direction configuration summary + +The `igBulletGraph` control supports vertical and horizontal orientations of the scale. By default, the scale orientation is horizontal. In vertical orientation, the scale values increase in upward direction and the numbering labels are positioned on its left. + +*![](images/igBulletGraph_Configuring_the_Orientation_and_Direction_1.png)* + +It is defined by the property of the control. + +The scale direction is the direction in which the performance bar extends and the values of the scale increase. It can be standard (left-to-right or at horizontal orientation and bottom-to-top at vertical orientation) or inverted (right-to-left or at horizontal orientation and top-to-bottom or at vertical orientation). + +*Inverted direction at horizontal orientation* | *Inverted direction at vertical orientation* +-----------------------------------------------|--------------------------------------------- +![](images/igBulletGraph_Configuring_the_Orientation_and_Direction_2.png) | ![](images/igBulletGraph_Configuring_the_Orientation_and_Direction_3.png) + + +Scale direction is defined by the property of the control. The default orientation is standard. + +### Scale orientation and direction configuration summary chart + +The following table explains briefly the configurable aspects of the `igBulletGraph`’s control orientation and scale inversion and maps them to properties that configure them. + +Configurable aspect | Details | Properties +---|---|--- +Scale orientation | Horizontal or vertical orientation of the bullet graph scale inside the control. | +Scale direction | Direction of the bullet graph, standard or inverted. | + + +## Configuring the Scale Orientation + +The orientation (horizontal or vertical) of the bullet graph is specified by the property of the control. + +### Property settings + +The following table maps the desired configuration to its respective property settings. + +In order to: | Use this property: | And set it to: +--------------|--------------------|-------------- +Specify horizontal orientation | | *horizontal* +Specify vertical orientation | `orientation` | *vertical* + + +### Example + +The screenshot below demonstrates how the `igBulletGraph` looks as a result of the following settings: + +Property | Value +---|--- + | “vertical” + + +![](images/igBulletGraph_Configuring_the_Orientation_and_Direction_1.png) + +Following is the code that implements this example. + +**In JavaScript:** + +```js +$('#igBulletGraph').igBulletGraph({ + width: ”70”, + height: ”300”, + orientation: "vertical" +}); +``` + + +## Configuring the Scale Direction (Scale Inversion) + +### Overview + +With horizontal orientation, the standard (default) direction of the scale is left-to-right, which means that the scale begins at the left edge of the [**Graph area**](../00_igBulletGraph_Overview.mdx#logical-areas) and ends at its right edge (the indicates an outset from the left edge of the Graph area and the – the distance from the left edge of the Graph area to the end of the scale): + +![](images/igBulletGraph_Configuring_the_Orientation_and_Direction_5.png) + +When the direction is inverted, the scale begins at the right edge of the Graph area and ends at its left edge (the `scaleStartExtent` indicates an outset from the right edge of the Graph area and the `scaleEndExtent` – the distance from the right edge of the Graph area to the end of the scale): + +![](images/igBulletGraph_Configuring_the_Orientation_and_Direction_6.png) + +With vertical orientation, the standard (default) direction of the scale is bottom-to-top, which means that the scale begins at the bottom of the Graph area and ends at its top (the `scaleStartExtent` indicates an outset from the bottom edge of the Graph area and the `scaleEndExtent` – the distance from the bottom edge of the Graph area to the end of the scale): + +![](images/igBulletGraph_Configuring_the_Orientation_and_Direction_7.png) + +When the direction is inverted, the scale begins at the top edge of the Graph area and ends at its bottom edge (the `scaleStartExtent` indicates an outset from the top edge of the Graph area and the `scaleEndExtent` – the distance from the top edge of the Graph area to the end of the scale): + +![](images/igBulletGraph_Configuring_the_Orientation_and_Direction_8.png) + +### Property settings + +The following table maps the desired <configuration/behaviors> to its respective property settings. + +In order to: | Use this property: | And set it to: +---|---|--- +Configure standard direction | | “false” +Configure inverted direction | `isScaleInverted` | “true” + + +### Example – inverted direction at horizontal orientation + +The screenshot below demonstrates how the igBulletGraph looks as a result of the following settings: + +Property | Value +---|--- + | “true” + | “horizontal” + + +![](images/igBulletGraph_Configuring_the_Orientation_and_Direction_2.png) + +Following is the code that implements this example. + +**In JavaScript:** + +```js +$('#igBulletGraph').igBulletGraph({ + width: “70”, + height: “300”, + isScaleInverted: "true" +}); +``` + +### Example – inverted direction at vertical orientation + +The screenshot below demonstrates how the `igBulletGraph` looks as a +result of the following settings: + +Property | Value +---|--- + | “true” + | “vertical” + +![](images/igBulletGraph_Configuring_the_Orientation_and_Direction_3.png) + +Following is the code that implements this example. + +**In JavaScript:** + +```js +$('#igBulletGraph').igBulletGraph({ + width: '70', + height: '400', + orientation: "vertical", + isScaleInverted: "true" +}); +``` + + +## Related Content + +### Topics +- [Configuring the Visual Elements (*igBulletGraph*)](/elements/igbulletgraph-configuring-the-visual-elements.mdx): This is a group of topics covering in detail the visual elements the igBulletGraph control (like the scale elements, performance bar, comparative marker and ranges, etc.) and explaining, with code examples, how to configure them. + + +### Samples + +The following samples provide additional information related to this topic. + +- [Vertical Orientation]({environment:SamplesUrl}/bullet-graph/vertical-orientation): This sample demonstrates how to change the orientation of the bullet graph and how to invert the scale. + + + + + + + diff --git a/docs/jquery/src/content/en/topics/controls/igbulletgraph/igbulletgraph.mdx b/docs/jquery/src/content/en/topics/controls/igbulletgraph/igbulletgraph.mdx new file mode 100644 index 0000000000..a3737e6caa --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igbulletgraph/igbulletgraph.mdx @@ -0,0 +1,29 @@ +--- +title: "igBulletGraph" +slug: igbulletgraph +--- + +# igBulletGraph + +### Introduction + +The topics in this group cover the `igBulletGraph`™ control and its use. + +The `igBulletGraph` control is an {environment:ProductName}™ control which allows for visualizing data in the form of a bullet graph. Linear by design, it provides a simple and concise view of a primary measure or measures compared against a scale and, optionally, some other measure. + +![](images/igBulletGraph.png) + +#### Topics + +- [***igBulletGraph* Overview**](/igbulletgraph-overview.mdx): This topic provides conceptual information about the `igBulletGraph` control including its main features, minimum requirements, and user functionality. + +- [**Adding *igBulletGraph***](/adding/igbulletgraph-adding.mdx): This is a group of topics explaining how to add the `igBulletGraph` control to an HTML page and an ASP.NET MVC application. + +- [**Configuring *igBulletGraph***](/configuring/igbulletgraph-configuring.mdx): This is a group of topics explaining how to configure the various aspects of the `igBulletGraph` control including its orientation and visual elements, and the animated display of values. + +- [**jQuery and MVC API Links (*igBulletGraph*)**](/igbulletgraph-api-links.mdx): This topic provides links to the API reference documentation about the `igBulletGraph` control and its ASP.NET MVC Helper. + +- [**Known Issues and Limitations (*igBulletGraph*)**](/igbulletgraph-known-issues-and-limitations.mdx): This topic provides information about the known issues and limitations of the `igBulletGraph` control. + + + diff --git a/docs/jquery/src/content/en/topics/controls/igbulletgraph/images/igBulletGraph.png b/docs/jquery/src/content/en/topics/controls/igbulletgraph/images/igBulletGraph.png new file mode 100644 index 0000000000..9140faba3e Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igbulletgraph/images/igBulletGraph.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igbulletgraph/images/igBulletGraph_Overview_10.png b/docs/jquery/src/content/en/topics/controls/igbulletgraph/images/igBulletGraph_Overview_10.png new file mode 100644 index 0000000000..984f193c79 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igbulletgraph/images/igBulletGraph_Overview_10.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igbulletgraph/images/igBulletGraph_Overview_11.png b/docs/jquery/src/content/en/topics/controls/igbulletgraph/images/igBulletGraph_Overview_11.png new file mode 100644 index 0000000000..28e82733fe Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igbulletgraph/images/igBulletGraph_Overview_11.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igbulletgraph/images/igBulletGraph_Overview_12.png b/docs/jquery/src/content/en/topics/controls/igbulletgraph/images/igBulletGraph_Overview_12.png new file mode 100644 index 0000000000..703d3e87c7 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igbulletgraph/images/igBulletGraph_Overview_12.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igbulletgraph/images/igBulletGraph_Overview_13.png b/docs/jquery/src/content/en/topics/controls/igbulletgraph/images/igBulletGraph_Overview_13.png new file mode 100644 index 0000000000..8b44f1b6bb Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igbulletgraph/images/igBulletGraph_Overview_13.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igbulletgraph/images/igBulletGraph_Overview_2.png b/docs/jquery/src/content/en/topics/controls/igbulletgraph/images/igBulletGraph_Overview_2.png new file mode 100644 index 0000000000..134af7b0fb Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igbulletgraph/images/igBulletGraph_Overview_2.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igbulletgraph/images/igBulletGraph_Overview_3.png b/docs/jquery/src/content/en/topics/controls/igbulletgraph/images/igBulletGraph_Overview_3.png new file mode 100644 index 0000000000..9dd45bfb48 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igbulletgraph/images/igBulletGraph_Overview_3.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igbulletgraph/images/igBulletGraph_Overview_4.png b/docs/jquery/src/content/en/topics/controls/igbulletgraph/images/igBulletGraph_Overview_4.png new file mode 100644 index 0000000000..31958d7af2 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igbulletgraph/images/igBulletGraph_Overview_4.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igbulletgraph/images/igBulletGraph_Overview_5.png b/docs/jquery/src/content/en/topics/controls/igbulletgraph/images/igBulletGraph_Overview_5.png new file mode 100644 index 0000000000..a2a2ffb2f8 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igbulletgraph/images/igBulletGraph_Overview_5.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igbulletgraph/images/igBulletGraph_Overview_6.png b/docs/jquery/src/content/en/topics/controls/igbulletgraph/images/igBulletGraph_Overview_6.png new file mode 100644 index 0000000000..caefaf8c29 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igbulletgraph/images/igBulletGraph_Overview_6.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igbulletgraph/images/igBulletGraph_Overview_7.png b/docs/jquery/src/content/en/topics/controls/igbulletgraph/images/igBulletGraph_Overview_7.png new file mode 100644 index 0000000000..c1ce86ffc6 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igbulletgraph/images/igBulletGraph_Overview_7.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igbulletgraph/images/igBulletGraph_Overview_8.png b/docs/jquery/src/content/en/topics/controls/igbulletgraph/images/igBulletGraph_Overview_8.png new file mode 100644 index 0000000000..04abf16c8f Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igbulletgraph/images/igBulletGraph_Overview_8.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igbulletgraph/images/igBulletGraph_Overview_88.png b/docs/jquery/src/content/en/topics/controls/igbulletgraph/images/igBulletGraph_Overview_88.png new file mode 100644 index 0000000000..99a3365e2a Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igbulletgraph/images/igBulletGraph_Overview_88.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igbulletgraph/images/igBulletGraph_Overview_9.png b/docs/jquery/src/content/en/topics/controls/igbulletgraph/images/igBulletGraph_Overview_9.png new file mode 100644 index 0000000000..849639ed92 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igbulletgraph/images/igBulletGraph_Overview_9.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igbulletgraph/known-issues-and-limitations.mdx b/docs/jquery/src/content/en/topics/controls/igbulletgraph/known-issues-and-limitations.mdx new file mode 100644 index 0000000000..35a8ab5d00 --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igbulletgraph/known-issues-and-limitations.mdx @@ -0,0 +1,57 @@ +--- +title: "Known Issues and Limitations (igBulletGraph)" +slug: igbulletgraph-known-issues-and-limitations +--- + +# Known Issues and Limitations (igBulletGraph) + +## Known Issues and Limitations + +#### Overview + +The following table summarizes the known issues and limitations of the `igBulletGraph` control. Detailed explanations of known issues and the possible workarounds are provided for some of the issues in the following summary table. + +#### Legend: + +| | | +| --- | --- | +| ![](../../images/images/positive.png) | Workaround available | +| ![](../../images/images/negative.png) | No known workaround | +| ![](../../images/images/plannedFix.png) | Fix planned | + + + +#### [igBulletGraph](#igBulletGraph) + +Issue | Description | Status +---|---|--- +[Only one performance bar and one comparative marker supported](#_SingleCMAndPB) | The `igBulletGraph` control supports only one performance bar and one comparative marker. | ![](../../images/images/positive.png) +[No label collisions detection](#_NoLabelsCollision) | The `igBulletGraph` control does not provide means for detecting label collisions. As a result, when the space to visualize the labels is not sufficient, label collisions may occur. | ![](../../images/images/positive.png) +Performance bar can be drawn only from the minimum scale position | The starting position of the performance bar can only be at the minimum value of the scale, i.e. the performance bar cannot originate from an arbitrary position. | ![](../../images/images/negative.png) ![](../../images/images/plannedFix.png) + + +## igBulletGraph + +#### Only one performance bar and one comparative marker supported + +The `igBulletGraph` control supports only one performance bar and one comparative marker. + +> **Workaround** +> +The effect of displaying multiple performance bars or multiple comparative markers can be achieved by overlaying several instances of the control. + +#### No label collisions detection + +The `igBulletGraph` control does not provide means for detecting label collisions. As a result, when the space to visualize the labels is not sufficient, label collisions may occur. + +> **Workaround** +> +Make sure that in the container of the control there is sufficient space to display the labels properly. + + + + + + + + diff --git a/docs/jquery/src/content/en/topics/controls/igbulletgraph/overview.mdx b/docs/jquery/src/content/en/topics/controls/igbulletgraph/overview.mdx new file mode 100644 index 0000000000..8bcd8e35b4 --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igbulletgraph/overview.mdx @@ -0,0 +1,628 @@ +--- +title: "igBulletGraph Overview" +slug: igbulletgraph-overview +--- +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# igBulletGraph Overview + + +## Topic Overview + +#### Purpose + +This topic provides conceptual information about the `igBulletGraph`™ control including its main features, minimum requirements, and user functionality. + +#### Required background + +The following concept is required for understanding this topic. + +- [Bullet graph](http://www.perceptualedge.com/articles/misc/Bullet_Graph_Design_Spec.pdf) + +#### In this topic + +This topic contains the following sections: + +- [**Introduction**](#Introduction) + - [igBulletGraph summary](#summary) +- [**Main Features**](#main-features) +- [**Logical areas and Configurable Visual Elements Summary**](#areas-elements) + - [Logical areas](#logical-areas) + - [Configurable visual elements](#configurable-visual-elements) +- [**Configurable Visual Elements and Related Properties**](#configurable-visual-elements-properties) + - [Configurable visual elements and related properties summary](#configurable-visual-elements-properties-summary) + - [Scale](#scale) + - [Performance bar](#performance-bar) + - [Comparative marker](#comparative-marker) + - [Comparative ranges](#comparative-ranges) + - [Background](#background) + - [Tooltips](#tooltips) +- [**Default Configuration**](#default-configuration) +- [**Requirements**](#requirements) +- [**Related Content**](#related-countent) + - [Topics](#related-topics) + - [Samples](#related-samples) + - [Resource](#related-resource) + + +## Introduction + + +#### igBulletGraph summary + +The `igBulletGraph` control is an **{environment:ProductName}**™ control which allows for visualizing data in the form of a bullet graph. Linear by design, it provides a simple and concise view of a primary measure or measures compared against a scale and, optionally, some other measure. + +![](images/igBulletGraph.png) + +The igBulletGraph control provides you with the ability to create attractive data presentations, replacing meters and gauges that are used on dashboards with simple yet straightforward and clear bar charts. A bullet graph is one of the most effective and efficient ways to present progress towards goals, good/better/best ranges, or compare multiple measurements in as little horizontal or vertical space as possible. + + +## Main Features + +The features of igBulletGraph include configurable orientation and direction, configurable visual elements and tooltips, and more. The control has also a built-in support for animated transitions. + +### Configurable orientation and direction + +The igBulletGraph control exposes an API for setting the state of its scale’s orientation and direction, so that the look of the graph can be largely customized. (For details, see the [Configuring the Orientation and Direction (*igBulletGraph*)](/configuring/igbulletgraph-configuring-the-orientation-and-direction.mdx) topic.) + +### Configurable visual elements + +Each of the [visual elements](./00_igBulletGraph_Overview.mdx#configurable-visual-elements-properties-summary) of the bullet graph can be configured in several aspects. (For details, see [Configurable Visual Elements of *igBulletGraph* and Related Properties](#configurable-visual-elements-properties).) + +### Animated transitions + +The igBulletGraph control provides built-in support for animation by its property. The animation effect occurs on loading the control as well as when the value of any of its properties is changed. By default, animated transitions are disabled. Providing a value in milliseconds for the transitionDuration property of the control determines the timeframe for swiping the control into view by smoothly visualizing all its visual elements through a slide effect (from bottom-left to top-right). Setting the value to 0 disables the animated transition. For a sample, demonstrating the animation transition effect, see the [Animated Transitions]({environment:SamplesUrl}/bullet-graph/animated-transitions) sample. + +### Support for tooltips + +The built-in tooltips of the igBulletGraph control show the values used to create the performance bars, the target value or the values, corresponding to the different ranges respectively. They are initially styled in accordance with the default look of the control, but their look can be customized by templates. By default, tooltips are disabled. (For details, see [Configuring the Tooltips (*igBulletGraph*)](/configuring/elements/igbulletgraph-configuring-the-tooltips.mdx)) + + +## Logical areas and Configurable Visual Elements Summary + + +### Logical areas + +The user-visible area of the igBulletGraph control is logically divided into a Graph area and a Reserved area. + +Horizontal orientation | Vertical orientation +---------------------- | -------------------- +![](images/igBulletGraph_Overview_2.png) | ![](images/igBulletGraph_Overview_3.png) + + +- Reserved area (1) – This area spreads: + - Along the scale – the Reserved area begins either at the edge of the control and ends at the edge of the control. + - Across the scale: + - In horizontal orientation: the Reserved area begins at the bottom edge of the control and spreads upward as much as the height of the numbering labels is (depending on the size and the other formatting of the font used in the labels) + - In vertical orientation: the Reserved area begins at the left edge of the control and spreads to the right as much as the width of the numbering labels is (depending on how large the numbers of the measurements of the scale are and the size and the other formatting of the font used in the labels). + +The main purpose of the Reserved area is to provide enough space for the numbering labels of the scale at any orientation – horizontal or vertical (The Reserved area automatically re-sizes when the orientation changes in order to accommodate the specific space requirements for displaying the numbering labels in each of the orientations: in horizontal orientation, the area has to fit the labels’ height and in vertical orientation – their maximum width.) This doesn’t mean that you must necessarily place the numbering labels in the Reserved area: actually, you can position the label row anywhere across-the-scale within the [Graph area](./00_igBulletGraph_Overview.mdx#areas-elements). However, even if you place the label row outside Reserved area, this will have no bearing on the spread and location of the Reserved area itself – it remains where it is, automatically defined through the height/width (depending on the orientation) of the numbering labels. + +Another aspect in which the Reserved area is significant is the fact that its inner edge specifies the beginning edge of the [Graph area](./00_igBulletGraph_Overview.mdx#areas-elements) in the across-the-scale dimension. This is important, because this edge serves as a reference mark for the extent-related properties that position some [visual elements](./00_igBulletGraph_Overview.mdx#configurable-visual-elements-properties-summary) across the scale. (Positive values for these properties – the most common case – position the visual elements inside the [Graph area](./00_igBulletGraph_Overview.mdx#areas-elements) and negative values – inside the Reserved area.) + +- Graph area (2) – The area for displaying the performance bars, the tick marks, the ranges, and, optionally, the numbering labels of the bullet graph. All extent-related properties for these visual elements (except for labels) are measured against its edges. The Graph area serves not as a placeholder but as a frame of reference for positioning the scale inside the control (More precisely, for positioning the [visual elements](./00_igBulletGraph_Overview.mdx#configurable-visual-elements-properties-summary) of the scale). + +Spread of the Graph area: + +- Along the scale – the Graph area begins at the starting edge of the control (the left edge at horizontal orientation or bottom edge at vertical orientation) and ends at its ending edge (the right edge at horizontal orientation or top edge at vertical orientation). Both the starting and ending positions of the scale are measured against the starting edge of the Graph area. +- Across the scale – the Graph area begins at the edge of the [Reserved area](./00_igBulletGraph_Overview.mdx#areas-elements) (this is the bottom edge of the Graph area at horizontal orientation or its left edge at vertical orientation). The edge of the Graph area that borders with the Reserved area serves as reference point for the extent-related properties of some of the visual elements of the scale (for positioning these elements across the scale). + +### Configurable visual elements + +The `igBulletGraph` control features the following visual elements (See the picture below.): + +- Performance bar (3) – This is the primary measure displayed by the control and is visualized as a bar. +- Comparative marker (4) – A measure which the performance bar measure compares against. It is visualized as a marker that runs perpendicular to the orientation of the performance bar. +- Comparative range(s) (5) – The ranges are visual elements that highlight a specified range of values on a scale. Their purpose is to visually communicate the qualitative state of the performance bar measure, illustrating at the same times the degree to which it resides within that state. +- Tick marks (6) –The tick marks serve as a visual division of the scale into intervals in order to increase the readability of the bullet graph. + - Major tick marks – The major tick marks are used as primary delimiters on the scale. The frequency they appear at, their extents and style can be controlled by setting the corresponding properties. + - Minor tick marks – The minor tick marks represent helper tick marks, which might be used to additionally improve the readability of the scale and can be customized in a way similar to the major ones. +- Scale labels (7) – The labels indicate the measures on the scale. +- Border (8) – The line visually delimiting the dimensions of the control. +- Background (9) – The background on which visual elements is placed is configurable in terms of color. + +![](images/igBulletGraph_Overview_4.png) + +- Tooltips – show the values used to create the performance bars, the target value or the values, corresponding to the different ranges respectively. + + +## Configurable Visual Elements and Related Properties + +### Configurable visual elements and related properties summary + +There are several specific aspects in which each element can be configured. + +The following table provides an overview of the configurable aspects of the visual elements of the *igBulletGraph* control. Further details about the configurable aspects with illustrations and the properties that configure them are available, for each visual element, in the blocks that follow the table: + + +| Visual element | Main configurable aspects | +| --- | --- | +| [Scale](#scale) | Position Tick marks Labels | +| [Performance bar](#performance-bar) | Value indicated Width and position Look-and-feel | +| [Comparative marker](#comparative-marker) | Value indicated Width Look-and-feel | +| [Comparative ranges](#comparative-ranges) | Number (of ranges in the graph) Length, width, and position Look-and-feel | +| [Background](#background) | Size and position Look-and-feel | +| [Tooltips](#tooltips) | Display delay | + + +### Scale + +The following pictures illustrate the scale-related extents, listed in the table below. + +Extent positioning the scale within the Graph area | Extents configuring the position of the labels +---|--- +![](images/igBulletGraph_Overview_5.png) | ![](images/igBulletGraph_Overview_6.png) + + +Extents configuring the major tick marks along the scale | Extents configuring the major tick marks across the scale +-----------|-------------- +![](images/igBulletGraph_Overview_7.png) | ![](images/igBulletGraph_Overview_8.png) + +|Extents configuring the minor tick marks across the scale| +|-------------| +|![](images/igBulletGraph_Overview_9.png)| + + +The following table maps the configurable aspects related to the scale of the bullet graph to the `igBulletGraph` properties that manage them. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Configurable aspectsPropertyDefault value
\*\*Position\*\*0.05
0.95
\*\*Range and Values\*\*\*\*Max value\*\*0
\*\*Min value\*\*100
\*\*Tick marks\*\*\*\*Major tick marks\*\*\*\*Position\*\* (within the scale)\*\*, spacing, and length\*\*Not set
0
0
0.02
0.2
\*\*Look-and-feel\*\*ColorDefined in the default theme
Width2.0
\*\*Minor tick marks\*\*\*\*Number\*\* (between two adjacent major tick marks)3.0
\*\*Position\*\*0.06
0.2
\*\*Look-and-feel\*\*ColorDefined in the default theme
Width1.0
\*\*Labels\*\*\*\*Position and spacing\*\*0
Not set
0
0
\*\*Number format\*\*Not set
\*\*Look-and-feel\*\*ColorDefined in the default theme
FontDefined in the default theme
+ + +#### Related Topics + +- [Configuring the Scale (*igBulletGraph*)](/configuring/elements/scale/igbulletgraph-configuring-the-scale.mdx) + +### Performance bar + +The following picture illustrates the performance-bar-related extents, listed in the table below. + +![](images/igBulletGraph_Overview_88.png) + +The following table maps the configurable aspects related to the performance bar of the bullet graph to the `igBulletGraph` properties that manage them. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
\*\*Configurable aspects\*\*PropertyDefault value
\*\*Name\*\*Not set
\*\*Value to indicate\*\*Not set
\*\*Breadth and position\*\*\*0.5\*
\*0.65\*
\*\*Look-and-feel\*\*Fill colorDefined in the default theme
Border colorDefined in the default theme
Border thickness\*1.0\*
\*\*Tooltip\*\*Depends on whether has been initialized
+ + +#### Related Topics + +- [Configuring the Performance Bar (*igBulletGraph*)](/configuring/elements/igbulletgraph-configuring-the-performance-bar.mdx) + +### Comparative marker + +The following picture illustrates the comparative-market-related extents, listed in the table below. + +![](images/igBulletGraph_Overview_10.png) + +The following table maps the configurable aspects related to the comparative marker of the bullet graph to the `igBulletGraph` properties that manage them. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Configurable aspectsPropertyDefault value
\*\*Value indicated\*\*Not set
\*\*Breadth\*\*\*3.0\*
\*\*Look-and-feel\*\*Fill colorDefined in the default theme
Border colorDefined in the default theme
Border thickness\*1.0\*
+ + +#### Related Topics + +- [Configuring the Comparative Marker (*igBulletGraph*)](/configuring/elements/igbulletgraph-configuring-the-comparative-marker.mdx) + +### Comparative ranges + +The following picture illustrates the comparative-ranges-related extents, listed in the table below. + +![](images/igBulletGraph_Overview_11.png) + +The following table maps the configurable aspects related to the comparative ranges of the bullet graph to the `igBulletGraph` properties that manage them. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Configurable aspectsPropertyDefault value
\*\*Number\*\* (of ranges in the graph)Not set
\*\*Length, width, and position\*\*Not set
Not set
Not set
Not set
Not set
Not set
\*\*Look-and-feel\*\*Fill colorDefined in the default theme
Border colorDefined in the default theme
Border thickness\*1.0\*
\*\*Tooltip\*\*The start and end values of the range separated by a hyphen (-).
+ + +#### Related Topics + +- [Configuring Comparative Ranges (*igBulletGraph*)](/configuring/elements/igbulletgraph-configuring-comparative-ranges.mdx) + +### Background + +The following picture illustrates the background-related extents, listed in the table below. + +![](images/igBulletGraph_Overview_12.png) + +The following table maps the configurable aspects related to the background of the bullet graph to the `igBulletGraph` properties that manage them. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Configurable aspectsPropertyDefault value
\*\*Spread and position\*\* (across the scale)\*0\*
\*1.0\*
\*\*Look-and-feel\*\*ColorDefined in the default theme
Border colorDefined in the default theme
Border thickness\*2.0\*
+ +#### Related Topics + +- [Configuring the Background (*igBulletGraph*)](/configuring/elements/igbulletgraph-configuring-the-background.mdx) + +### Tooltips + +The following table maps the configurable aspects of the `igBulletGraph` control related to tooltips to the properties that manage them. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Configurable aspectDetailsProperties / EventsDefault value
VisibilityYou can enable/disable tooltips for the \*\*igBulletGraph\*\* control.\*False\*
DelayThe timeout before the tooltip appears upon the visual element at mouse hovering is configurable in milliseconds.\*500\*
ValueYou can provide a custom value for the respective tooltip property.[\*\*Performance bar\*\*](./02_Configuring/01_Elements/05_igBulletGraph_Configuring_the_Tooltips.mdx#performance-bar)Depends on whether has been initialized (see [Configuring the Tooltips (\*igBulletGraph\*)](/configuring/elements/igbulletgraph-configuring-the-tooltips.mdx))
[\*\*Comparative marker\*\*](./02_Configuring/01_Elements/05_igBulletGraph_Configuring_the_Tooltips.mdx#comparative-marker)The value indicated by the comparative marker
[\*\*Comparative Range(s)\*\*](./02_Configuring/01_Elements/05_igBulletGraph_Configuring_the_Tooltips.mdx#comparative-ranges)The start and end values of the range separated by a hyphen.
+ + +#### Related Topics + +- [Configuring the Tooltips (*igBulletGraph*)](/configuring/elements/igbulletgraph-configuring-the-tooltips.mdx) + + +## Default Configuration +By default, the `igBulletGraph` control is oriented horizontally. It displays with a scale starting at 0 and ending at 100. The major tick marks of the control are located at an interval of 10 and the count of minor tick marks between each pair of major tick marks is 3. There is no title/subtitle displayed, the background color is a variety of light grey. The border is 2 pixels thick colored in dark grey. No comparative marker or ranges are displayed. Animated transitions are disabled. + +The following picture demonstrates a `igBulletGraph` displayed with default settings. + +![](images/igBulletGraph_Overview_13.png) + + +## Requirements + +The `igBulletGraph` control is a jQuery UI widget and, therefore, depends on the jQuery and jQuery UI libraries. References to these resources are needed nevertheless, in spite of the use of pure jQuery or {environment:ProductNameMVC}. The *Infragistics.Web.Mvc* assembly is required when the control is used in the context of ASP.NET MVC. + +In order for the bullet graph to display the performance value(s), the property has to be set. + +For the full requirements listing, refer to the [Adding *igBulletGraph*](/adding/igbulletgraph-adding.mdx) topic. + + +## Related Content + +### Topics + +The following topics provide additional information related to this topic. + + +- [Adding *igBulletGraph*](/adding/igbulletgraph-adding.mdx): This is a group of topics demonstrating how to add the igBulletGraph control to an HTML page and to an ASP.NET MVC application. + +- [Configuring *igBulletGraph*](/configuring/igbulletgraph-configuring.mdx): This is a group of topics explaining how to configure the various aspects of the igBulletGraph control including its orientation and direction and visual elements. + +- [jQuery and MVC API Links (*igBulletGraph*)](/igbulletgraph-api-links.mdx): This topic provides links to the API reference documentation about the igBulletGraph control and its ASP.NET MVC Helper. + +- [Known Issues and Limitations (*igBulletGraph*)](/igbulletgraph-known-issues-and-limitations.mdx): This topic provides information about the known issues and limitations of the igBulletGraph control. + + +### Samples + +The following samples provide additional information related to this topic. + +- [Basic Configuration]({environment:SamplesUrl}/bullet-graph/basic-configuration): This sample demonstrates a simple configuration of the igBulletGraph control. + +- [Animated Transitions]({environment:SamplesUrl}/bullet-graph/animated-transitions): This sample demonstrates animated transitions between different sets of settings in the igBulletGraph control. + + +### Resource + +The following material (available outside the Infragistics family of content) provides additional information related to this topic. + +- [Bullet Graph Design Specification](http://www.perceptualedge.com/articles/misc/Bullet_Graph_Design_Spec.pdf): This is a PDF document explaining the bullet graph conceptually and providing design recommendations. \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/controls/igcategorychart/adding.mdx b/docs/jquery/src/content/en/topics/controls/igcategorychart/adding.mdx new file mode 100644 index 0000000000..d6fb50dfb3 --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igcategorychart/adding.mdx @@ -0,0 +1,106 @@ +--- +title: "Adding igCategoryChart" +slug: igcategorychart-adding +--- + +# Adding igCategoryChart + +### Purpose + +This topic explains using a code example how to add the igCategoryChart™ control to your applications. + +### In this topic + +This topic contains the following sections: + +- [Adding Category Chart control to your application](#Adding) + - [Introduction](#Introduction) + - [Preview](#Preview) + - [Requirements](#Prerequisites) + - [Overview](#Overview) + - [Steps](#Steps) +- [**Related Content**](#RelatedContent) + + +## Adding igCategoryChart control to your application + + + +### Introduction + +The following procedure demonstrates adding the igCategoryChart to your applications. + + + +### Preview + +The following is a screenshot of the igCategoryChart. +![](images/categorychart-walkthrough-01.png) + + +### Requirements + + + + + +### Overview + +Following is a conceptual overview of the process: + +1. Add a data source + +2. Adding the igCategoryChart control to your application + +3. Verifying the results + + + +### Steps + +The following procedure takes you through the steps necessary for adding the igCategoryChart control to a page. + +**Add a data source** + +In order to create an igCategoryChart control, you must first have data to bind it to. The following code snippet demonstrates how to create a simple data source. For more information on binding to other data sources, please refer to the following topic, [Binding to Data](/categorychart-binding-to-data.mdx). + +**In HTML:** +``` +var data = [ + { "CountryName": "China", "Pop1995": 1216, "Pop2005": 1297, "Pop2015": 1361, "Pop2025": 1394 }, + { "CountryName": "India", "Pop1995": 920, "Pop2005": 1090, "Pop2015": 1251, "Pop2025": 1396 }, + { "CountryName": "United States", "Pop1995": 266, "Pop2005": 295, "Pop2015": 322, "Pop2025": 351 }, + { "CountryName": "Indonesia", "Pop1995": 197, "Pop2005": 229, "Pop2015": 256, "Pop2025": 277 }, + { "CountryName": "Brazil", "Pop1995": 161, "Pop2005": 186, "Pop2015": 204, "Pop2025": 218 } +]; + +``` + +**Add igCategoryChart** + +Add the igCategoryChart control to the page and bind it to the above data. + +The following code demonstrates adding the igCategoryChart control with the minimum code and property settings required for display: + +**In HTML:** + +```html + $(function () { + $("#chart").igCategoryChart({ dataSource: data}); +}); +``` + +**Verify the results** + +Build and run your project to verify the result. If you have implemented the steps correctly, the displayed igCategoryChart should look like the one in the Preview section above. + + + + +## Related Content + +### Topics + +- [Axes](/axes/categorychart-axes.mdx) + +- [Configuring Chart Types](/categorychart-chart-types.mdx) \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/controls/igcategorychart/annotations-and-interactions/annotations-and-interactions.mdx b/docs/jquery/src/content/en/topics/controls/igcategorychart/annotations-and-interactions/annotations-and-interactions.mdx new file mode 100644 index 0000000000..5ad8f6dbd7 --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igcategorychart/annotations-and-interactions/annotations-and-interactions.mdx @@ -0,0 +1,28 @@ +--- +title: "igCategoryChart Annotation and Interaction Layers" +slug: igcategorychart-annotations-and-interactions +--- + +# igCategoryChart Annotation and Interaction Layers + +## In This Group of Topics + +### Introduction + +The topics in this group explain how to configure annotation and interaction layers in the `igCategoryChart` widget. + +### Topics + +- [Category Highlight Layer](/igcategorychart-category-highlight-layer.mdx): This topic discusses configuration of the Category Highlight Layer in the `igCategoryChart`. + +- [Item Highlight Layer](/igcategorychart-item-highlight-layer.mdx): This topic discusses configuration of the Item Highlight Layer in the `igCategoryChart`. + +- [Crosshairs Layer](/igcategorychart-crosshairs-layer.mdx): This topic discusses configuration of the Crosshairs Layer in the `igCategoryChart`. + +- [Category Tooltip Layer](/igcategorychart-category-tooltip-layer.mdx): This topic discusses configuration of the Category Tooltip Layer in the `igCategoryChart`. + +- [Item Tooltip Layer](/igcategorychart-item-tooltip-layer.mdx): This topic discusses configuration of the Item Tooltip Layer in the `igCategoryChart`. + +- [Final Value Layer](/igcategorychart-final-value-layer.mdx): This topic discusses configuration of the Final Value Layer in the `igCategoryChart`. + +- [Callouts Layer](/igcategorychart-callouts-layer.mdx): This topic discusses configuration of the Callouts Layer in the `igCategoryChart`. diff --git a/docs/jquery/src/content/en/topics/controls/igcategorychart/annotations-and-interactions/callouts-layer.mdx b/docs/jquery/src/content/en/topics/controls/igcategorychart/annotations-and-interactions/callouts-layer.mdx new file mode 100644 index 0000000000..4d34f69c30 --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igcategorychart/annotations-and-interactions/callouts-layer.mdx @@ -0,0 +1,51 @@ +--- +title: "Callouts Layer" +slug: igcategorychart-callouts-layer +--- + +# Callouts Layer + +The Callouts Layer displays an annotation at the given position. This can be used to draw a user's attention to certain data points and provide additional information. + +## Options + +Below is a list of options that can be used to configure the Callouts Layer. + +Option Name|Value Type|Description +---|---|--- +`calloutsVisible` | boolean | Determines if callout annotations will render on the chart +`calloutsItemsSource` | object | Datasource where callout data is stored +`calloutsLabelMemberPath` | string | The path for your data that will be used as the annotation label +`calloutsXMemberPath` | string | The path for your data that will be used as the annotation's x position +`calloutsYMemberPath` | string | The path for your data that will be used as the annotation's y position + +## Enabling the Callouts Layer + +The Callouts Layer is enabled by setting the `calloutsVisible` option to true. + +The code snippet below demonstrates how to enable the Callouts Layer for the `igCategoryChart`. + +*In HTML:* + +```html +$(function () { + $("chart1").igCategoryChart({ + calloutsVisible: true, + calloutsItemsSource: data, + calloutsXMemberPath: "calloutIndex", + calloutsYMemberPath: "calloutValue", + calloutsLabelMemberPath: "calloutContent" + }); +}); +``` + +The following screenshot displays the igCategoryChart control using the Callouts Layer. + +![](images/categorychart-callouts-layer-01.png) + + +## Related Topics: + +- [Final Value Layer](/igcategorychart-final-value-layer.mdx) + +- [Item ToolTips Layer](/igcategorychart-item-tooltip-layer.mdx) \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/controls/igcategorychart/annotations-and-interactions/category-highlight-layer.mdx b/docs/jquery/src/content/en/topics/controls/igcategorychart/annotations-and-interactions/category-highlight-layer.mdx new file mode 100644 index 0000000000..989db7a5f0 --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igcategorychart/annotations-and-interactions/category-highlight-layer.mdx @@ -0,0 +1,35 @@ +--- +title: "Category Highlight Layer" +slug: igcategorychart-category-highlight-layer +--- + +# Category Highlight Layer + +The Category Highlight Layer highlights a category of the chart when hovering your pointer over the category. + +## Enabling the Category Highlight Layer + +The Category Highlight Layer is enabled by setting the `isCategoryHighlightingEnabled` option to true. + +The code snippet below demonstrates how to enable the Category Highlight Layer for the `igCategoryChart`. + +*In HTML:* + +```html +$(function () { + $("chart1").igCategoryChart({ + isCategoryHighlightingEnabled: true + }); +}); +``` + +The following screenshot displays the igCategoryChart control using the Category Highlight Layer. + +![](images/categorychart-category-highlight-layer-01.png) + + +## Related Topics: + +- [Item Highlight Layer](/igcategorychart-item-highlight-layer.mdx) + +- [Category Tooltip Layer](/igcategorychart-category-tooltip-layer.mdx) \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/controls/igcategorychart/annotations-and-interactions/category-tooltip-layer.mdx b/docs/jquery/src/content/en/topics/controls/igcategorychart/annotations-and-interactions/category-tooltip-layer.mdx new file mode 100644 index 0000000000..e29a2620f3 --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igcategorychart/annotations-and-interactions/category-tooltip-layer.mdx @@ -0,0 +1,35 @@ +--- +title: "Category ToolTip Layer" +slug: igcategorychart-category-tooltip-layer +--- + +# Category ToolTip Layer + +The Category ToolTip Layer displays tooltips in a single tooltip for the category where your pointer is hovering in the igCategoryChart. + +## Enabling the Category ToolTip Layer + +The Category ToolTip Layer is enabled by setting the `toolTipType` option to "category". + +The code snippet below demonstrates how to enable the Category ToolTip Layer for the `igCategoryChart`. + +*In HTML:* + +```html +$(function () { + $("chart1").igCategoryChart({ + toolTipType: "category" + }); +}); +``` + +The following screenshot displays the igCategoryChart control using the Category ToolTip Layer. + +![](images/categorychart-category-tooltip-layer-01.png) + + +## Related Topics: + +- [Item Tooltip Layer](/igcategorychart-item-tooltip-layer.mdx) + +- [Category Highlight Layer](/igcategorychart-category-highlight-layer.mdx) \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/controls/igcategorychart/annotations-and-interactions/crosshairs-layer.mdx b/docs/jquery/src/content/en/topics/controls/igcategorychart/annotations-and-interactions/crosshairs-layer.mdx new file mode 100644 index 0000000000..d4a638528b --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igcategorychart/annotations-and-interactions/crosshairs-layer.mdx @@ -0,0 +1,77 @@ +--- +title: "Crosshairs Layer" +slug: igcategorychart-crosshairs-layer +--- + +# Crosshairs Layer + +The Crosshairs Layer renders a vertical and/or horizontal line where your pointer intersects with the data points on the igCategoryChart. + +## Options + +Below is a list of options that can be used to configure the Crosshairs Layer. + +Option Name|Value Type|Description +---|---|--- +`crosshairsDisplayMode` | enumeration | Determines type of crosshairs displayed by the chart.
Values: "default", "none", "horizontal", "vertical", "both" +`crosshairsSnapToData` | boolean | Determines if crosshairs will interpolate between data points +`crosshairsAnnotationEnabled`| boolean | Determines if the crosshair value will render in an annotation in the axis + +## Enabling the Crosshairs Layer + +The Crosshairs Layer is enabled by setting the `crosshairsDisplayMode` option to either "horizontal", "vertical", or "both". + +The code snippet below demonstrates how to enable both horizontal and vertical crosshairs for the `igCategoryChart`. + +*In HTML:* + +```html +$(function () { + $("chart1").igCategoryChart({ + crosshairsDisplayMode: "both" + }); +}); +``` + +## Configuring the Crosshairs Layer + +### Snap to Data + +Setting the `crosshairsSnapToData` option to true will snap the crosshairs to your data points in the `igCategoryChart`. If set to false, the crosshair will interpolate between data points while hovering your pointer. + +The code snippet below demonstrates how to enable crosshairs to snap to data points. + +*In HTML:* + +```html +$(function () { + $("chart1").igCategoryChart({ + crosshairsSnapToData: true + }); +}); +``` + +### Enable Axis Annotations + +Enabling axis annotations for the Crosshairs Layer will render the crosshair's value as an annotation label in the axis. + +The code snippet below demonstrates how to enable axis annotation for the Crosshair Layer. + +*In HTML:* + +```html +$(function () { + $("chart1").igCategoryChart({ + crosshairsAnnotationEnabled: true + }); +}); +``` + +The following screenshot displays the igCategoryChart control using horizontal crosshairs with axis annotations. + +![](images/categorychart-crosshairs-layer-01.png) + + +## Related Topics: + +- [Final Value Layer](/igcategorychart-final-value-layer.mdx) \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/controls/igcategorychart/annotations-and-interactions/datatooltip.mdx b/docs/jquery/src/content/en/topics/controls/igcategorychart/annotations-and-interactions/datatooltip.mdx new file mode 100644 index 0000000000..6ac20acf7c --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igcategorychart/annotations-and-interactions/datatooltip.mdx @@ -0,0 +1,138 @@ +--- +title: "Chart Data Tooltip" +--- +# Chart Data Tooltip + +In {ProductName}, the data tooltip of the `igCategoryChart` displays values and titles of series as well as legend badges of series in a tooltip. In addition, it provides many configuration properties of the `igDataLegend` for filtering series rows and values columns, styling, and formatting values. This tooltip type updates while moving the mouse inside of the plot area of the `igCategoryChart`. + +## Data Tooltip Elements + +The data tooltip of the `igCategoryChart` displays content using a set of three types of rows and four types of columns. + +### Data Tooltip Rows + +The rows of the data tooltip include the header row, series row(s), and the summary row. + +The header row displays the axis label of the point that is hovered, and can be changed using the `dataToolTipHeaderText` property. + +The series row can actually be a set of rows corresponding to each series plotted in the chart. These rows will display the legend badge, series title, actual/abbreviated value of the the series, and abbreviation symbol and unit, if specified. + +Finally, there is a summary row that displays the total of all series values. The default summary title can be changed using the `dataToolTipSummaryTitleText` property of the series. Also, you can use the `dataToolTipSummaryType` property to customize whether you display the Total, Min, Max, or Average of series values in the summary row. + +The following code snippet demonstrates setting the properties mentioned above to have a data tooltip with a `Total` summary type with a custom title for the summary and a custom header: + +**In JavaScript:** + +```js +$("#chart").igCategoryChart({ + dataSource: data, + chartType: "column", + toolTipType: "data", + dataToolTipHeaderText: "My Custom Data Tooltip Header", + dataToolTipSummaryType: "total", + dataToolTipSummaryTitleText: "Grand Total:" +}); +``` + +### Data Tooltip Columns + +The columns of the data tooltip include the title, label, value, and units columns. Each series in the chart can have multiple columns for label, value, and units depending on the `dataToolTipIncludedColumns` or `dataToolTipExcludedColumns` collections of the chart. + +The title column displays legend badges and series titles, which come from the `title` property of the different series plotted in the chart. + +The label column displays the name or abbreviation of the different property paths in the `dataToolTipIncludedColumns` or `dataToolTipExcludedColumns` collections of the chart. + +The value column displays series values as abbreviated text which can be formatted using the `dataToolTipValueFormatAbbreviation` property to apply the same abbreviation for all numbers by setting this property to `Auto` or `Shared`. Alternatively, a user can select other abbreviations such as `Independent`, `Kilo`, `Million`, etc. Precision of abbreviated values is controlled using the `dataToolTipValueFormatMinFractions` and `dataToolTipValueFormatMaxFractions` for minimum and maximum digits, respectively. + +The units column displays an abbreviation symbol and/or unit text, which can be set on the tooltip by setting the `dataToolTipUnitsText`. + +The following code snippet demonstrates the `unitText` and the minimum/maximum fractions set for the data tooltip on the `igCategoryChart`: + +**In JavaScript:** + +```js +$("#chart").igCategoryChart({ + dataSource: data, + chartType: "column", + toolTipType: "data", + dataToolTipUnitsText: "K", + dataToolTipValueFormatMinFractions: 2, + dataToolTipValueFormatMaxFractions: 4 +}); +``` + +## Data Tooltip Styling + +The `igCategoryChart` provides properties for styling each type of column in its data tooltip. Each of these properties begins with Title, Label, Value, or Units, and you can style the text's color, font, and margin. For example, if you wanted to set the text color of each of these, you would set the `dataToolTipTitleTextColor`, `dataToolTipLabelTextColor`, `dataToolTipValueTextColor`, and `dataToolTipUnitsTextColor` properties. + +The following code snippet demonstrates how to set the styling properties mentioned above: + +**In JavaScript:** + +```js +$("#chart").igCategoryChart({ + dataSource: data, + chartType: "column", + toolTipType: "data", + dataToolTipTitleTextColor: "lightgray", + dataToolTipLabelTextColor: "lightgray", + dataToolTipValueTextColor: "green", + dataToolTipUnitsTextColor: "green", + dataToolTipUnitsText: "K" +}); +``` + +## Data Tooltip Grouping & Positioning + +You can set the `dataToolTipGroupingMode` property to either `Grouped` or `Individual` to group content for multiple series into single tooltip or separate content for each series in multiple tooltips. In the `Grouped` mode, you can customize where the tooltip is shown by setting the `dataToolTipGroupedPositionModeX` and `dataToolTipGroupedPositionModeY` properties. This essentially allows you to customize the horizontal and vertical alignments of the tooltip and whether you want it to track to the closest series points to the mouse position or pin the tooltip to edge of plot area. + +The following code snippet demonstrates a data tooltip that will be pinned to the top-left of the `igCategoryChart` as you scroll: + +**In JavaScript:** + +```js +$("#chart").igCategoryChart({ + dataSource: data, + chartType: "column", + toolTipType: "data", + dataToolTipGroupingMode: "grouped", + dataToolTipGroupedPositionModeX: "pinLeft", + dataToolTipGroupedPositionModeY: "pinTop" +}); +``` + +## Data Tooltip Value Formatting + +The `igCategoryChart` provides automatic abbreviation of large numbers for its data tooltip using its `dataToolTipValueFormatAbbreviation` property. This adds a multiplier in the units column such as kilo, million, billion, etc. You can customize the number of fractional digits that are displayed by setting the `dataToolTipValueFormatMinFractions` and `dataToolTipValueFormatMaxFractions`. This will allow you to determine the minimum and maximum number of digits that appear after the decimal point, respectively. + +The following code snippet demonstrates how to set the minimum and maximum fractions of the data tooltip of the `igCategoryChart`: + +**In JavaScript:** + +```js +$("#chart").igCategoryChart({ + dataSource: data, + chartType: "column", + toolTipType: "data", + dataToolTipValueFormatMinFractions: 2, + dataToolTipValueFormatMaxFractions: 4 +}); +``` + +## Data Tooltip Value Mode + +You can change the default decimal display of values within the data tooltip to be currency by changing the `dataToolTipValueFormatMode` property of the chart. The `igCategoryChart` also exposes the ability to modify the culture of the displayed currency symbol in the tooltip by using its `dataToolTipValueFormatCulture` property and setting it to its corresponding culture tag. + +For example, the following code snippet will create a chart with the `dataToolTipValueFormatCulture` set to "en-GB" and the `dataToolTipValueFormatMode` set to "Currency": + +**In JavaScript:** + +```js +$("#chart").igCategoryChart({ + dataSource: data, + chartType: "column", + toolTipType: "data", + dataToolTipValueFormatCulture: "en-GB", + dataToolTipValueFormatMode: "currency" +}); +``` \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/controls/igcategorychart/annotations-and-interactions/final-value-layer.mdx b/docs/jquery/src/content/en/topics/controls/igcategorychart/annotations-and-interactions/final-value-layer.mdx new file mode 100644 index 0000000000..77dc3d8e96 --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igcategorychart/annotations-and-interactions/final-value-layer.mdx @@ -0,0 +1,35 @@ +--- +title: "Final Value Layer" +slug: igcategorychart-final-value-layer +--- + +# Final Value Layer + +The Final Value Layer displays an annotation along the axis where the final value of your data is shown. + +## Enabling the Final Value Layer + +The Final Value Layer is enabled by setting the `finalValueAnnotationsVisible` option to true. + +The code snippet below demonstrates how to enable the Final Value Layer for the `igCategoryChart`. + +*In HTML:* + +```html +$(function () { + $("chart1").igCategoryChart({ + finalValueAnnotationsVisible: true + }); +}); +``` + +The following screenshot displays the igCategoryChart control using the Final Value Layer. + +![](images/categorychart-final-value-layer-01.png) + + +## Related Topics: + +- [Crosshairs Layer](/igcategorychart-crosshairs-layer.mdx) + +- [Callouts Layer](/igcategorychart-callouts-layer.mdx) \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/controls/igcategorychart/annotations-and-interactions/images/categorychart-callouts-layer-01.png b/docs/jquery/src/content/en/topics/controls/igcategorychart/annotations-and-interactions/images/categorychart-callouts-layer-01.png new file mode 100644 index 0000000000..20b8e53656 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igcategorychart/annotations-and-interactions/images/categorychart-callouts-layer-01.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igcategorychart/annotations-and-interactions/images/categorychart-category-highlight-layer-01.png b/docs/jquery/src/content/en/topics/controls/igcategorychart/annotations-and-interactions/images/categorychart-category-highlight-layer-01.png new file mode 100644 index 0000000000..01724b58b6 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igcategorychart/annotations-and-interactions/images/categorychart-category-highlight-layer-01.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igcategorychart/annotations-and-interactions/images/categorychart-category-tooltip-layer-01.png b/docs/jquery/src/content/en/topics/controls/igcategorychart/annotations-and-interactions/images/categorychart-category-tooltip-layer-01.png new file mode 100644 index 0000000000..0e91e30641 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igcategorychart/annotations-and-interactions/images/categorychart-category-tooltip-layer-01.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igcategorychart/annotations-and-interactions/images/categorychart-crosshairs-layer-01.png b/docs/jquery/src/content/en/topics/controls/igcategorychart/annotations-and-interactions/images/categorychart-crosshairs-layer-01.png new file mode 100644 index 0000000000..e22a10507e Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igcategorychart/annotations-and-interactions/images/categorychart-crosshairs-layer-01.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igcategorychart/annotations-and-interactions/images/categorychart-final-value-layer-01.png b/docs/jquery/src/content/en/topics/controls/igcategorychart/annotations-and-interactions/images/categorychart-final-value-layer-01.png new file mode 100644 index 0000000000..7d3e8413b8 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igcategorychart/annotations-and-interactions/images/categorychart-final-value-layer-01.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igcategorychart/annotations-and-interactions/images/categorychart-item-highlight-layer-01.png b/docs/jquery/src/content/en/topics/controls/igcategorychart/annotations-and-interactions/images/categorychart-item-highlight-layer-01.png new file mode 100644 index 0000000000..f8f4321eaa Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igcategorychart/annotations-and-interactions/images/categorychart-item-highlight-layer-01.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igcategorychart/annotations-and-interactions/images/categorychart-item-tooltip-layer-01.png b/docs/jquery/src/content/en/topics/controls/igcategorychart/annotations-and-interactions/images/categorychart-item-tooltip-layer-01.png new file mode 100644 index 0000000000..8fbf70d7eb Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igcategorychart/annotations-and-interactions/images/categorychart-item-tooltip-layer-01.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igcategorychart/annotations-and-interactions/item-highlight-layer.mdx b/docs/jquery/src/content/en/topics/controls/igcategorychart/annotations-and-interactions/item-highlight-layer.mdx new file mode 100644 index 0000000000..fb265f9fc0 --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igcategorychart/annotations-and-interactions/item-highlight-layer.mdx @@ -0,0 +1,35 @@ +--- +title: "Item Highlight Layer" +slug: igcategorychart-item-highlight-layer +--- + +# Item Highlight Layer + +The Item Highlight Layer highlights background of items in a category of the chart when hovering your pointer over the category. + +## Enabling the Item Highlight Layer + +The Item Highlight Layer is enabled by setting the `isItemHighlightingEnabled` option to true. + +The code snippet below demonstrates how to enable the Item Highlight Layer for the `igCategoryChart`. + +*In HTML:* + +```html +$(function () { + $("chart1").igCategoryChart({ + isItemHighlightingEnabled: true + }); +}); +``` + +The following screenshot displays the igCategoryChart control using the Item Highlight Layer. + +![](images/categorychart-item-highlight-layer-01.png) + + +## Related Topics: + +- [Category Highlight Layer](/igcategorychart-category-highlight-layer.mdx) + +- [Item Tooltip Layer](/igcategorychart-item-tooltip-layer.mdx) \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/controls/igcategorychart/annotations-and-interactions/item-tooltip-layer.mdx b/docs/jquery/src/content/en/topics/controls/igcategorychart/annotations-and-interactions/item-tooltip-layer.mdx new file mode 100644 index 0000000000..04f5f6a2f8 --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igcategorychart/annotations-and-interactions/item-tooltip-layer.mdx @@ -0,0 +1,35 @@ +--- +title: "Item ToolTip Layer" +slug: igcategorychart-item-tooltip-layer +--- + +# Item ToolTip Layer + +The Item ToolTip Layer displays tooltips for each item in the category where your pointer is hovering in the igCategoryChart. + +## Enabling the Item ToolTip Layer + +The Item ToolTip Layer is enabled by setting the `toolTipType` option to "item". + +The code snippet below demonstrates how to enable the Item ToolTip Layer for the `igCategoryChart`. + +*In HTML:* + +```html +$(function () { + $("chart1").igCategoryChart({ + toolTipType: "item" + }); +}); +``` + +The following screenshot displays the igCategoryChart control using the Item ToolTip Layer. + +![](images/categorychart-item-tooltip-layer-01.png) + + +## Related Topics: + +- [Category Tooltip Layer](/igcategorychart-category-tooltip-layer.mdx) + +- [Item Highlight Layer](/igcategorychart-item-highlight-layer.mdx) \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/controls/igcategorychart/axes/axis-intervals.mdx b/docs/jquery/src/content/en/topics/controls/igcategorychart/axes/axis-intervals.mdx new file mode 100644 index 0000000000..b83f32fd67 --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igcategorychart/axes/axis-intervals.mdx @@ -0,0 +1,69 @@ +--- +title: "Axis Interval" +slug: igcategorychart-axis-intervals +--- + +# Axis Interval + +### Purpose +This topic demonstrates explains how to configure the major and minor intervals for chart axes of the igCategoryChart control. + +In the igCategoryChart control, axis major interval specifies how frequent major gridlines and axis labels are rendered on an axis. Similarly, axis minor interval specifies how frequent minor gridlines are rendered on an axis. + + +### In this topic + +This topic contains the following sections: + +- [Configuring XAxis and YAxis Major and Minor Intervals](#ConfiguringXAxis) +- [Code Snippet](#codesnippet) +- [Related Topics](#relatedtopics) + +### Configuring XAxis and YAxis Major and Minor Intervals + +In order to configure|Use this property|And set it to +---|---|--- +The frequency of major interval gridlines | `xAxisInterval`,`yAxisInterval` | This value provides adequate spacing for axis labels and major gridlines, if used. Note that the interval for axis labels will also be set by this value, displaying one label at the point on the axis associated with the interval.
On X axes, this value is represented as an index between the first and last category item. Generally, this value should equal to 10-20% of total numbers of category items so that all axis labels fit on axis so that they are not clipped by other axis labels.
On date time axes, this value is represented as time span between axis minimum value and axis maximum value.
On Y axes, this value is represented as double between axis minimum value and axis maximum value. By default, numeric axes will automatically calculate and find a nice and round interval based on axis minimum values and maximum value. +The color of the major interval gridlines | `xAxisMajorStroke`,`yAxisMajorStroke` | A color of axis major gridlines. +The thickness of the major interval gridlines | `xAxisMajorStrokeThickness`,`yAxisMajorStrokeThickness` | A thickness in pixels of the axis major gridlines set as a double value +The frequency of minor interval gridlines | `xAxisMinorInterval`,`yAxisMinorInterval` | This value provides adequate spacing for minor gridlines, which are always rendered between major gridlines. As result, a value of XAxisMinorInterval property should always be much smaller (usually 2-5 time smaller) than the value of XAxisInterval property of an axis.
On category axes, this value is represented as fraction of major Interval property. Generally, this value should equal to between 0.25 and 0.5
On numeric axes, this value is represented as double between axis minimum value and axis maximum value. By default, numeric axes will not automatically calculate minor interval based on axis minimum values and maximum value.
On date time axes, this value is represented as time span between axis minimum value and axis maximum value. +The color of the minor interval gridlines|`xAxisMinorStroke`, `yAxisMinorStroke` | A color of axis minor gridlines. +The thickness of the minor interval gridlines|`xAxisMajorStrokeThickness`, `yAxisMajorStrokeThickness`|A thickness in pixels of the axis major gridlines set as a double value + +### Code Snippet + +The following code snippet demonstrates how to configure the interval on the x-axis. + +*In HTML:* + +```html + +$(function () { + $("#chart").igCategoryChart({ + xAxisInterval: 1, + xAxisMinorInterval: 0.25 , + xAxisMinorStroke: "Red", + xAxisMajorStroke: "Green", + xAxisMinorStrokeThickness: 1, + xAxisMajorStrokeThickness: 1 + }); +}); +``` + +![](images/categorychart-intervals-01.png) + +## Related Topics: + +- [Walkthrough](/igcategorychart-adding.mdx) + +- [Binding to Data](/categorychart-binding-to-data.mdx) + +- [Configuring Axis Gap and Overlap](/categorychart-configuring-axis-gap-and-overlap.mdx) + +- [Configuring Axis Labels](igcategorychart-axis-labels.html) + +- [Configuring Axis Range](/categorychart-configuring-axis-range.mdx) + +- [Configuring Axis Tickmarks](/igcategorychart-axis-tickmarks.mdx) + +- [Configuring Axis Titles](/categorychart-configuring-axis-titles.mdx) \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/controls/igcategorychart/axes/axis-labels.mdx b/docs/jquery/src/content/en/topics/controls/igcategorychart/axes/axis-labels.mdx new file mode 100644 index 0000000000..baaeaebf5a --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igcategorychart/axes/axis-labels.mdx @@ -0,0 +1,78 @@ +--- +title: "Configuring Axis Label" +slug: igcategorychart-axis-label +--- + +# Configuring Axis Label + +The igCategoryChart control allows you full control over configuring, formatting and styling the labels displayed on your chart. By default, you do not need to explicitly set the labels. The Category Chart will use the first appropriate string property that it finds within the data you provided and will use that for the labels. + +### In this topic + +This topic contains the following sections: + +- [Label Settings](#labelsettings) +- [Label Styling](#labelstyling) +- [Code Snippet](#codesnippet) +- [Related Topics](#relatedtopics) + +### Label Settings + +In the igCategoryChart™ control, you can change the rotation angle, margin, horizontal/vertical alignment, opacity, padding and visibility, of the x-axis and y-axis labels using the following properties: + +Property Name|Property Type|Description +---|---|--- +`xAxisLabelAngle`, `yAxisLabelAngle` | double |Determines angle rotation of x-axis or y-axis labels +`xAxisLabelHorizontalAlignment`, `yAxisLabelHorizontalAlignment` |HorizontalAlignment |Determines horizontal alignment of the x-axis or y-axis labels +`xAxisLabelVerticalAlignment`, `yAxisLabelVerticalAlignment`|VerticalAlignment|Determines vertical alignment of the x-axis or y-axis labels +`xAxisLabelVisibility`, `yAxisLabelVisibility`|Visibility bool|Determines whether or not x-axis or y-axis labels are visible +`xAxisLabelLeftMargin`, `yAxisLabelLeftMargin`, `xAxisLabelRightMargin`, `yAxisLabelRightMargin`|Number|Determines the margin applied to each x-axis or y-axis labels + + +### Label Styling +The look and feel of the category chart's x-axis and y-axis labels can be styled in many aspects, the main of which are applying different font styles such as font type, font size and text color. This can be achieved through the following properties: + +Property Name|Property Type|Description +---|---|--- +`xAxisLabelTextStyle`,`yAxisLabelTextStyle`|object|Determines the font family, size, style to be used for the x-axis or y-axis labels +`xAxisLabelTextColor`,`yAxisLabelTextColor`|Brush|Determines the text color of the x-axis or y-axis labels + + +### Code Snippet +The following code example shows how to style labels on the x-axis using style properties: + +*In HTML:* + +```html +$(function () { + $("#chart").igCategoryChart({ + dataSource: data, + xAxisLabelTextStyle: "16pt Verdana", + xAxisLabelRightMargin: "14", + xAxisLabelTextColor: "red" + }); + }); +``` + + + + +The following screenshot demonstrates the igCategoryChart control with the x-axis label styled. + +![](images/categorychart-configuring-axis-labels-01.png) + +## Related Topics: + +- [Walkthrough](/igcategorychart-adding.mdx) + +- [Binding to Data](/categorychart-binding-to-data.mdx) + +- [Configuring Axis Gap and Overlap](/categorychart-configuring-axis-gap-and-overlap.mdx) + +- [Configuring Axis Intervals](/igcategorychart-axis-intervals.mdx) + +- [Configuring Axis Range](/categorychart-configuring-axis-range.mdx) + +- [Configuring Axis Tickmarks](/igcategorychart-axis-tickmarks.mdx) + +- [Configuring Axis Titles](/categorychart-configuring-axis-titles.mdx) \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/controls/igcategorychart/axes/axis-tickmarks.mdx b/docs/jquery/src/content/en/topics/controls/igcategorychart/axes/axis-tickmarks.mdx new file mode 100644 index 0000000000..10c35c57f4 --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igcategorychart/axes/axis-tickmarks.mdx @@ -0,0 +1,60 @@ +--- +title: "Axis Tickmarks" +slug: igcategorychart-axis-tickmarks +--- + +# Axis Tickmarks + +Tick marks display points on the axes. They represent a certain numeric point on a scale or the value of the category in a category axis. + +### In this topic + +This topic contains the following sections: + +- [Property Settings](#propertysettings) +- [Code Snippet](#codesnippet) +- [Related Topics](#relatedtopics) + +### Property Settings +In the igCategoryChart™ control, you can change the length, thickness and color of the x-axis and y-axis labels using the following properties: + +Property Name|Property Type|Description +---|---|--- +`xAxisTickLength`, `yAxisTickLength` | number |Determines the length of the tickmark along the x-axis or y-axis +`xAxisTickStroke`, `yAxisTickStroke` |string |Determines the color of the tickmark along the x-axis or y-axis +`xAxisTickStrokeThickness`, `yAxisTickStrokeThickness`|number|Determines the thickness of of the tickmark along the x-axis or y-axis + +### Code Snippet + +The following code snippet demonstrates how to set the color, length and thickness of the tickmark on the x-axis + +*In HTML:* + +```html +$(function () { + $("#chart").igCategoryChart({ + dataSource: data, + xAxisTickLength: 10, + xAxisTickStrokeThickness: 3, + xAxisTickStroke: 'red' + }); + }); +``` + +![](images/categorychart-configuring-axis-tickmarks-01.png) + +## Related Topics: + +- [Walkthrough](/igcategorychart-adding.mdx) + +- [Binding to Data](/categorychart-binding-to-data.mdx) + +- [Configuring Axis Gap and Overlap](/categorychart-configuring-axis-gap-and-overlap.mdx) + +- [Configuring Axis Labels](igcategorychart-axis-labels.html) + +- [Configuring Axis Intervals](/igcategorychart-axis-intervals.mdx) + +- [Configuring Axis Range](/categorychart-configuring-axis-range.mdx) + +- [Configuring Axis Titles](/categorychart-configuring-axis-titles.mdx) \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/controls/igcategorychart/axes/categorychart-axes.mdx b/docs/jquery/src/content/en/topics/controls/igcategorychart/axes/categorychart-axes.mdx new file mode 100644 index 0000000000..ad7d5c4beb --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igcategorychart/axes/categorychart-axes.mdx @@ -0,0 +1,17 @@ +--- +title: "Axes" +slug: categorychart-axes +--- + +# Axes + + +In the igCategoryChart control, an Axis provides base properties for specifying appearance of axis main lines, gridlines, tickmarks, titles, stripes, and axis labels. + + +- [Configuring Axis Gap and Overlap](/categorychart-configuring-axis-gap-and-overlap.mdx) +- [Configuring Axis Labels](igcategorychart-axis-labels.html) +- [Configuring Axis Intervals](/igcategorychart-axis-intervals.mdx) +- [Configuring Axis Range](/categorychart-configuring-axis-range.mdx) +- [Configuring Axis Tickmarks](/igcategorychart-axis-tickmarks.mdx) +- [Configuring Axis Titles](/categorychart-configuring-axis-titles.mdx) \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/controls/igcategorychart/axes/categorychart-configuring-axis-gap-and-overlap.mdx b/docs/jquery/src/content/en/topics/controls/igcategorychart/axes/categorychart-configuring-axis-gap-and-overlap.mdx new file mode 100644 index 0000000000..217ed1ed44 --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igcategorychart/axes/categorychart-configuring-axis-gap-and-overlap.mdx @@ -0,0 +1,102 @@ +--- +title: "Configuring Axis Gap and Overlap on igCategoryChart" +slug: categorychart-configuring-axis-gap-and-overlap +--- + +# Configuring Axis Gap and Overlap on igCategoryChart + +## Topic Overview + +### Purpose + +This topic provides information on configuring axis gap and axis overlap in the `igCategoryChart`™ control. + +### Required background + +The following topic is a prerequisite to understanding this topic: +- [Walkthrough](/igcategorychart-adding.mdx) + +This topic demonstrates how to add the `igCategoryChart`™ control to the page and bind it to data. + +## Axis Gap + +### Overview + +The Axis Gap feature of the `igCategoryChart`™ control allows setting the gap between series of the chart. + +### Property + +Property name: `xAxisGap`. + +Can be set either during the widget initialization, or as an option after the widget was initialized: +```javascript +$("#chart").igCategoryChart("option", "xAxisGap", 0.5); +``` + +The property accepts a numeric float value between 0 and 1. The value represents a relative width of the gap out of the available number of pixels between series. 0 - no gap is rendered between series; 1 - maximum available gap is rendered between series. + +For the example, `xAxisGap` of 0.5 is a half of the available space is used to draw the gap:
+![](images/categorychart-axis-gap-00.png) + +### Example + +To initialize `igCategoryChart` with `xAxisGap` of `0.5` the following code can be used: + +```javascript +$("#chart").igCategoryChart({ + title: "Countries population", + xAxisTitle: "Countries", + yAxisTitle: "Millions of people", + dataSource: data, + chartType: "column", + xAxisGap: 0.5 +}); +``` + +## Axis Overlap + +### Overview + +The Axis Overlap feature of the `igCategoryChart`™ control allows setting overlap of rendered categories. + +### Property + +Property name: `xAxisOverlap`. + +Can be set either during the widget initialization, or as an option after the widget was initialized: +```javascript +$("#chart").igCategoryChart("option", "xAxisOverlap", 0.5); +``` + +The property accepts a numeric float value between -1 and 1. The value represents a relative overlap out of the available number of pixels dedicated to each series. + +Negative value (up to -1): the categories are pushed away from each other producing a gap between themselves. + +Positive value (up to 1): the categories are overlapping each other. Value of 1 directs the chart to render categories on top of each other. + +For the example, `xAxisOverlap` of 0.5 is a half of the available space is used to draw categories overlapping each other:
+![](images/categorychart-axis-overlap-00.png) + +`xAxisOverlap` of -1 pushes categories from each other as far as possible:
+![](images/categorychart-axis-overlap-01.png) + +### Example + +To initialize `igCategoryChart` with `xAxisOverlap` of `0.5` the following code can be used: + +```javascript +$("#chart").igCategoryChart({ + title: "Countries population", + xAxisTitle: "Countries", + yAxisTitle: "Millions of people", + dataSource: data, + chartType: "column", + xAxisOverlap: 0.5 +}); +``` + +## Related Topics: + +- [Walkthrough](/igcategorychart-adding.mdx) + +- [Binding to Data](/categorychart-binding-to-data.mdx) diff --git a/docs/jquery/src/content/en/topics/controls/igcategorychart/axes/categorychart-configuring-axis-range.mdx b/docs/jquery/src/content/en/topics/controls/igcategorychart/axes/categorychart-configuring-axis-range.mdx new file mode 100644 index 0000000000..ea7816ca32 --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igcategorychart/axes/categorychart-configuring-axis-range.mdx @@ -0,0 +1,52 @@ +--- +title: "Axis Range" +slug: categorychart-configuring-axis-range +--- + +# Axis Range + +In the igCategoryChart™ control, the range on numeric axes is the difference in numeric values from the beginning of the axis to the end or from the smallest to largest values in the data. The range minimum is the lowest value of the axis. The range maximum is the highest value of the axis. + +### In this topic + +This topic contains the following sections: + +- [Overview](#overview) +- [Code Snippet](#codesnippet) +- [Related Topics](#relatedtopics) + +### Overview +By default, the igDataChart control will calculate the minimum and maximum values for the y-axis range based on the lowest and highest data points in order to maximize the chart plot area. The automatic calculation of an axis' minimum and maximum values may not be appropriate for your set of data points. For example, if your data has a minimum value of 850, you may want to set the minimum value of the axis using y-axis’s `yAxisMinimumValue` property to 800 so that there will be a space value of 50 between the axis minimum and the lowest value of data points. The same can be applied to the axis maximum value and the highest value of data points using y-axis’s `yAxisMaximumValue` property. + +### Code Snippet +The following sample code demonstrates how to change the axis range on the y-axis. + +*In HTML:* + +```html +$(function () { + $("#chart").igCategoryChart({ + dataSource: data, + yAxisMinimumValue: -200, + yAxisMaximumValue: 1000 + }); + }); +``` + +![](images/categorychart-configuring-axis-ranges-01.png) + +### Related Topics: + +- [Adding igCategoryChart](/igcategorychart-adding.mdx) + +- [Binding to Data](/categorychart-binding-to-data.mdx) + +- [Configuring Axis Gap and Overlap](/categorychart-configuring-axis-gap-and-overlap.mdx) + +- [Configuring Axis Labels](igcategorychart-axis-labels.html) + +- [Configuring Axis Intervals](/igcategorychart-axis-intervals.mdx) + +- [Configuring Axis Tickmarks](/igcategorychart-axis-tickmarks.mdx) + +- [Configuring Axis Titles](/categorychart-configuring-axis-titles.mdx) \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/controls/igcategorychart/axes/categorychart-configuring-axis-titles.mdx b/docs/jquery/src/content/en/topics/controls/igcategorychart/axes/categorychart-configuring-axis-titles.mdx new file mode 100644 index 0000000000..f5aef96088 --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igcategorychart/axes/categorychart-configuring-axis-titles.mdx @@ -0,0 +1,70 @@ +--- +title: "Axis Titles" +slug: categorychart-configuring-axis-titles +--- + +# Axis Titles +The axis title feature of the igCategoryChart control allows you to add contextual information to the x and y axes of the chart. + +### In this topic + +This topic contains the following sections: + +- [Property Settings](#propertysettings) +- [Code Snippet](#codesnippet) +- [Related Topics](#relatedtopics) + +### Property Settings +You can customize the look and feel of the category chart's x-axis and y-axis titles in many different ways such as applying different font styles, margins, and alignment. This can be achieved through the following properties: + +Property Name|Property Type|Description +---|---|--- +`xAxisTitle`,`yAxisTitle`|string|Determines the text to be used for the x-axis and y-axis title +`xAxisTitleTextColor`, `yAxisTitleTextColor`|string|Determines the color for the x-axis or y-axis title +`xAxisTitleTextStyle`,`yAxisTitleTextStyle`|string|Determines the font styles to be applied to the x-axis or y-axis title +`xAxisTitleAngle`,`yAxisTitleAngle`|number|Determines the angle rotation for the x-axis and y-axis titles +`xAxisTitleAlignment`, `yAxisTitleAlignment`|enumeration|Determines the horizontal alignment of the x-axis and the vertical alignment of the y-axis +`xAxisTitleExtent`,`yAxisTitleExtent`|number|Determines the extent to be applied to the x-axis or y-axis title +`xAxisTitleMargin`,`yAxisTitleMargin`|number|Determines the margin to be applied to the x-axis or y-axis title +`xAxisTitleTopMargin`,`yAxisTitleTopMargin`|number|Determines the margin to be applied to the top of the x-axis or y-axis title +`xAxisTitleRightMargin`,`yAxisTitleRightMargin`|number|Determines the margin to be applied to the right of the x-axis or y-axis title +`xAxisTitleBottomMargin`,`yAxisTitleBottomMargin`|number|Determines the margin to be applied to the bottom of the x-axis or y-axis title +`xAxisTitleLeftMargin`,`yAxisTitleLeftMargin`|number|Determines the margin to be applied to the left of the x-axis or y-axis title + +### Code Snippet +The following code example shows how to customize the titles on the x-axis and y-axis: + +*In HTML:* + +```html +$(function () { + $("#chart").igCategoryChart({ + dataSource: data, + chartType: "auto", + xAxisTitle: "Country", + xAxisTitleTextColor: "blue", + xAxisTitleTextStyle: "20pt Times New Roman|Georgia|Serif", + yAxisTitle: "Millions of People", + yAxisTitleAngle: 90, + yAxisTitleTextColor: "red" + }); +}); +``` + +![](images/categorychart-configuring-axis-title-01.png) + +## Related Topics: + +- [Walkthrough](/igcategorychart-adding.mdx) + +- [Binding to Data](/categorychart-binding-to-data.mdx) + +- [Configuring Axis Gap and Overlap](/categorychart-configuring-axis-gap-and-overlap.mdx) + +- [Configuring Axis Labels](igcategorychart-axis-labels.html) + +- [Configuring Axis Intervals](/igcategorychart-axis-intervals.mdx) + +- [Configuring Axis Range](/categorychart-configuring-axis-range.mdx) + +- [Configuring Axis Tickmarks](/igcategorychart-axis-tickmarks.mdx) \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/controls/igcategorychart/axes/images/categorychart-axis-gap-00.png b/docs/jquery/src/content/en/topics/controls/igcategorychart/axes/images/categorychart-axis-gap-00.png new file mode 100644 index 0000000000..1e553d6ad0 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igcategorychart/axes/images/categorychart-axis-gap-00.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igcategorychart/axes/images/categorychart-axis-overlap-00.png b/docs/jquery/src/content/en/topics/controls/igcategorychart/axes/images/categorychart-axis-overlap-00.png new file mode 100644 index 0000000000..ca86e89e77 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igcategorychart/axes/images/categorychart-axis-overlap-00.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igcategorychart/axes/images/categorychart-axis-overlap-01.png b/docs/jquery/src/content/en/topics/controls/igcategorychart/axes/images/categorychart-axis-overlap-01.png new file mode 100644 index 0000000000..cdb25ac5a8 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igcategorychart/axes/images/categorychart-axis-overlap-01.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igcategorychart/axes/images/categorychart-configuring-axis-labels-01.png b/docs/jquery/src/content/en/topics/controls/igcategorychart/axes/images/categorychart-configuring-axis-labels-01.png new file mode 100644 index 0000000000..99de5eb921 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igcategorychart/axes/images/categorychart-configuring-axis-labels-01.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igcategorychart/axes/images/categorychart-configuring-axis-ranges-01.png b/docs/jquery/src/content/en/topics/controls/igcategorychart/axes/images/categorychart-configuring-axis-ranges-01.png new file mode 100644 index 0000000000..72d2401871 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igcategorychart/axes/images/categorychart-configuring-axis-ranges-01.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igcategorychart/axes/images/categorychart-configuring-axis-tickmarks-01.png b/docs/jquery/src/content/en/topics/controls/igcategorychart/axes/images/categorychart-configuring-axis-tickmarks-01.png new file mode 100644 index 0000000000..9abe0c042e Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igcategorychart/axes/images/categorychart-configuring-axis-tickmarks-01.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igcategorychart/axes/images/categorychart-configuring-axis-title-01.png b/docs/jquery/src/content/en/topics/controls/igcategorychart/axes/images/categorychart-configuring-axis-title-01.png new file mode 100644 index 0000000000..2d621c1fef Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igcategorychart/axes/images/categorychart-configuring-axis-title-01.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igcategorychart/axes/images/categorychart-intervals-01.png b/docs/jquery/src/content/en/topics/controls/igcategorychart/axes/images/categorychart-intervals-01.png new file mode 100644 index 0000000000..480f6827c1 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igcategorychart/axes/images/categorychart-intervals-01.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igcategorychart/categorychart-accessibility-compliance.mdx b/docs/jquery/src/content/en/topics/controls/igcategorychart/categorychart-accessibility-compliance.mdx new file mode 100644 index 0000000000..65235cada9 --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igcategorychart/categorychart-accessibility-compliance.mdx @@ -0,0 +1,58 @@ +--- +title: "Accessibility Compliance (igCategoryChart)" +slug: igcategorychart-accessibility-compliance +--- + +# Accessibility Compliance (igCategoryChart) + + +##Topic Overview + + +### Purpose + +This topic explains `igCategoryChart`™ accessibility features and provides advice how to achieve accessibility compliance for pages containing charts. + +### Required background + +The following topics are prerequisite to understanding this topic: + + +- [**igCategoryChart Overview**](/categorychart-overview.mdx): This topic provides conceptual information about the `igCategoryChart` control including its main features, minimum requirements for using charts and user functionality. + +- [**Adding igCategoryChart**](/igcategorychart-adding.mdx): This topic demonstrates how to create add the `igCategoryChart` control and bind it to data. + + +##Accessibility Compliance Reference + + +### Introduction + +All of the {environment:ProductName}™ controls and components comply with Section 508, Subpart 1194.22 of the Rehabilitation Act of 1973. Table 1 contains the specific rules of Subpart 1194.22 that pertain to the control. Also detailed is how the `igCategoryChart` control complies with each rule. + +To meet the requirements each accessibility rule, in some cases, you may need to interact with the control by to setting a specific property, but in other cases the control does the work for you. + +>**Note:** As jQuery controls are client-only, some of the rules are not supported and are marked as limitations. + +#### Accessibility compliance reference summary + +The following table summarizes the accessibility compliance features of the igCategoryChart. + + +| Rules | Rule Text | How We Comply | +| --- | --- | --- | +| (a) | A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content). | Since igCategoryChart is exclusively a graphic control you may consider providing an alternative view for disabled people by converting the chart into a table or igGrid™ component with the chart data. That way screen readers may help users to get the information from the chart. | +| (b) | Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation. | See the note for (a) for an alternative way to provide compliance to the rule. | +| (c) | Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup. | You can control coloring and provide suitable colors for charts using the styling and theming capabilities of igCategoryChart. | +| (d)* | Documents shall be organized so they are readable without requiring an associated style sheet. | The control's markup is not readable without the associated style sheet because it’s a client-side control and depends on the CSS rules. See the note for (a) for an alternative way to provide compliance to the rule. | + + +\* - control limitations + + +## Related Content + + +The following topic provide additional information related to this topic. + +- [**Accessibility Compliance**](//general-and-getting-started/accessibility-compliance.mdx): Provides reference information for accessibility compliance of all {environment:ProductName} controls. \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/controls/igcategorychart/categorychart-api-overivew.mdx b/docs/jquery/src/content/en/topics/controls/igcategorychart/categorychart-api-overivew.mdx new file mode 100644 index 0000000000..9642549d01 --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igcategorychart/categorychart-api-overivew.mdx @@ -0,0 +1,41 @@ +--- +title: "jQuery and MVC API Reference Links (igCategoryChart)" +slug: categorychart-api-overview +--- +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# jQuery and MVC API Reference Links (igCategoryChart) + + +## Topic Overview +### Purpose + +This topic provides links to the API documentation for jQuery and {environment:ProductNameMVC} class for `igCategoryChart`™ control. + +### Required Background + +The following topics are prerequisite to understanding this topic: + + +- [](/categorychart-overview.mdx)[igCategoryChart Overview](/categorychart-overview.mdx): This topic provides conceptual information about the igCategoryChart control including its main features, minimum requirements for using charts and user functionality. + +- [](/igcategorychart-adding.mdx)[Adding igCategoryChart](/igcategorychart-adding.mdx): This topic demonstrates how to create add the `igCategoryChart` control and bind it to data. + +##igCategoryChart API Reference + +### Introduction + +The `igCategoryChart` is built as a jQuery UI widget with an accompanying {environment:ProductNameMVC}. For more information about each API, follow the links to the API documentation given below. + +### API documents reference summary + +- : The documentation contains an overview of the control and full list of options, events, and methods with code snippets. + +- [igCategoryChart MVC API](Infragistics.Web.Mvc~Infragistics.Web.Mvc.categorychart`1.html) : The documentation contains the CategoryChart class description and a list of all of its members. + +## Related Content + +The following topic provide additional information related to this topic. + + +- [](/categorychart-binding-to-data.mdx)[Binding igCategoryChart to Data](/categorychart-binding-to-data.mdx): This topic explains how to bind the `igCategoryChart` control to various data sources. \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/controls/igcategorychart/categorychart-binding-to-data.mdx b/docs/jquery/src/content/en/topics/controls/igcategorychart/categorychart-binding-to-data.mdx new file mode 100644 index 0000000000..240d8d32ef --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igcategorychart/categorychart-binding-to-data.mdx @@ -0,0 +1,193 @@ +--- +title: "Binding to Data" +slug: categorychart-binding-to-data +--- + +# Binding to Data + +### Topic Overview + +This topic demonstrates how to bind both flat and hierarchical data to the igCategoryChart™ control. At the end of each section, a complete code sample is provided. + +### Purpose +The procedure below demonstrates how to bind the igCategoryChart control to a data collection. The igCategoryChart allows you to bind to JavaScript arrays. Nested collections are also supported. +In this topic you will define two sets of data collection (flat and hierarchical), add the Category Chart control to your application, and bind the control’s DataSource to an instance of the designated data collection. + + +### In this topic +This topic contains the following sections: +This topic contains the following sections: + +- [Binding to a JavaScript Array](#BindingJavaScriptArray) + - [Introduction](#Introduction) + - [Prerequisites](#Prerequisites) + - [Preview](#Preview) + - [Steps](#Steps) +- [Binding to a Hierarchical JavaScript Array](#BindingHierarchicalJavaScriptArray) + - [Introduction](#HIntroduction) + - [Prerequisites](#HPrerequisites) + - [Preview](#HPreview) + - [Steps](#HSteps) +- [Related Topics](#relatedcontent) + +### Binding to a JavaScript Array + +#### Introduction +This procedure demonstrates how to bind the igCategoryChart control to a JavaScript data array. + +#### Prerequisites +To complete the procedure, you need the following: + +- An HTML5 web page +- All required JavaScript and CSS files added to your web site or web application project. + +For detailed information on instantiation and configuration of an igCategoryChart see [Adding igCategoryChart](/igcategorychart-adding.mdx). + +#### Preview + + +![](images/categorychart-data-binding-01.png) + + +#### Steps +The following steps demonstrate how to bind the igCategoryChart control to a JavaScript data array. + +**Define the data array** + +*In Javascript* +``` + +``` + +**Add and configure igCategoryChart control** + +Add the chart div element to the web page. In the body of the web page, add a div element for the igCategoryChart control. + +*In HTML* +``` + + … +
+
+ … + +``` + +**Instantiate igCategoryChart control and configure the data source** + +To do this, assign the data array defined in the previous step to the dataSource options of the igCategoryChart control. + +*In HTML* +``` + +``` + +### Binding to a Hierarchical JavaScript Array + +#### Introduction +This procedure demonstrates how to bind the igCategoryChart control to a “semi-nested” hierarchical JavaScript data array. + +#### Prerequisites + +To complete the procedure, you need the following: +- An HTML5 web page +- All required JavaScript and CSS files added to your web site or web application project. + +For detailed information on instantiation and configuration of an igCategoryChart see [Adding igCategoryChart](/igcategorychart-adding.mdx). + +#### Preview + + +![](images/categorychart-data-binding-02.png) + + +#### Steps +The following steps demonstrate how to bind the igCategoryChart control to a JavaScript data array. + +**Define the data array** + +*In Javascript* +``` + + +``` + +**Add and configure igCategoryChart control** + +Add the chart div element to the web page. In the body of the web page, add a div element for the igCategoryChart control. + +*In HTML* +``` + + … +
+
+ … + +``` + +**Instantiate igCategoryChart control and configure the data source and xAxis labels** + +To do this, assign the data array defined in the previous step to the dataSource options of the igCategoryChart control. + +*In HTML* +``` + + +``` + +## Related Topics: + +- [Walkthrough](/igcategorychart-adding.mdx) + +- [Axes](/axes/categorychart-axes.mdx) \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/controls/igcategorychart/categorychart-chart-requirements.mdx b/docs/jquery/src/content/en/topics/controls/igcategorychart/categorychart-chart-requirements.mdx new file mode 100644 index 0000000000..97e2d6e0f9 --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igcategorychart/categorychart-chart-requirements.mdx @@ -0,0 +1,178 @@ +--- +title: "Chart Requirements" +slug: categorychart-chart-requirements +--- + +# Chart Requirements + +## Overview + +While using the `igCategoryChart` it is important to remember a few rules that will make the data visualization better. +This control will make an intelligent attempt to visualize any data that is assigned to it. However, there are still a few rules that need to be followed. + +This topics describes the rules that need to be applied to the data before it is assigned to the chart. + +## Data source requirements + +Generally, the chart will attempt to treat the `data` that is provided to it as a collection of objects. + +Example of the `igCategoryChart` initialization code: +```javascript +$("#chart").igCategoryChart({ + title: "Countries population", + subTitle: "1995 vs 2005", + xAxisTitle: "Countries", + yAxisTitle: "Population", + chartType: "auto", + dataSource: data +}); +``` + +### Array of objects + +The most commonly used data source that the `igCategoryChart` control recognizes and is able to work with is an array of objects. +While analyzing such a data source during data binding routine the chart makes several attempt to extract the following attributes out of that data and show them in the chart automatically: + +- *Series titles*. These are extracted from a distinct property of each object. If there are no distinct properties in the data objects, the first string property is assigned to be the series title. The distinct property types are analyzed in the following order: +1. string +2. date +3. number + +- *Category scale*. Numeric properties are assigned into a category and their values are used to select minimum and maximum value of the Y axis. + +Example: +```javascript +var data = [ + { "Label": "1995", "Brazil": 161, "Indonesia": 197, "United States": 266, "India": 920, "China": 1297 }, + { "Label": "2005", "Brazil": 186, "Indonesia": 229, "United States": 295, "India": 1090, "China": 1216 }, + { "Label": "2015", "Brazil": 204, "Indonesia": 256, "United States": 322, "India": 1251, "China": 1361 }, + { "Label": "2025", "Brazil": 218, "Indonesia": 277, "United States": 351, "India": 1396, "China": 1394 } +]; +``` + +> **Note:** In some cases the chart will assign `yAxisMinimumValue` to be other than `0`. Setting this option to a value explicitly will prevent this behavior. + +### Array of arrays + +The `igCategoryChart` control is also able to recognize objects in an array of arrays (multi-dimensional data). +The rules of discovering data described above are also applicable in this scenario. + +Example: +```javascript +var data = [ + [ + [ + { "AmountSold": 2, "Item": "Hat" }, + { "AmountSold": 5, "Item": "Jacket" }, + { "AmountSold": 3, "Item": "Shoes" } + ] + ], + [ + [ + { "AmountSold": 5, "Item": "Hat" }, + { "AmountSold": 2, "Item": "Jacket" }, + { "AmountSold": 1.9, "Item": "Shoes" } + ] + ], + [ + [ + { "AmountSold": 4, "Item": "Hat" }, + { "AmountSold": 7, "Item": "Jacket" }, + { "AmountSold": 3, "Item": "Shoes" } + ] + ] +]; +``` + +### Data intents + +To influence the logic of data recognition by the `igCategoryChart`, a sub-object with the name of `__dataIntents` can be assigned to the data with meta data that corresponds to the properties in the data objects and description of their roles. + +Example: +```javascript +var data = [ + { + id:0, + title:"Shoes", + another_title: "Fancy shoes", + sold:5 + }, + { + id:1, + title:"Hats", + another_title: "Fancy hats", + sold:2 + }, + { + id:2, + title:"Gloves", + another_title: "Fancy gloves", + sold:3 + } +]; +data.__dataIntents = { + id: ["DontPlot"], + another_title: ["AxisLabelValue"] +}; +``` + +Full list of supported metadata values: + +Metadata value|Application description +--|-- +PrimarySeriesValue|Indicates which value to use as the primary category series value +SeriesX|Indicates which value should be used for scatter X values +SeriesY|Indicates which value should be used for scatter Y values +SeriesFill|Indicates which value should be used for bubble color values +SeriesLabel|Indicates which value should be used for bubble label values +SeriesRadius|Indicates which value should be used for bubble radius values +SeriesAngle|Indicates which value should be used for polar angle values +SeriesShape|Indicates which value should be used for shape geometry values +SeriesValue|Indicates which value should be used for secondary series values +SeriesTitle|Indicates which value should be used for series title values +OpenSeriesValue|Indicates which value should be used for series open values +HighSeriesValue|Indicates which value should be used for series high values +LowSeriesValue|Indicates which value should be used for series low values +CloseSeriesValue|Indicates which value should be used for series close values +VolumeSeriesValue|Indicates which value should be used for volume values +AxisLabelValue|Indicates which value should be used for axis label values +AxisDateValue|Indicates which value should be used for axis date values +DontPlot|Indicates that the value should not be considered when inferring data series + +## Restrictions + +Plain JSON object, or a dictionary in a form of JSON sub-objects is not currently supported. + +Unsupported data examples: +```javascript +var data = { + "Shoes": 5, + "Hats": 2, + "Gloves": 1 +}; +``` + +```javascript +var data = { + "Shoes": { + "2014":5, + "2015":7, + "2016":9 + }, + "Hats": { + "2014":2, + "2015":1, + "2016":0 + }, + "Gloves": { + "2014":2, + "2015":4, + "2016":3 + } +}; +``` +Arrays (of any dimension) of values is also out of scope of the currently supported data sources in the `igCategoryChart`. + +```javascript +var data = [[100, 200], [200, 300], [300, 400], [400, 500], [50, 100]]; +``` \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/controls/igcategorychart/categorychart-chart-title-subtitle.mdx b/docs/jquery/src/content/en/topics/controls/igcategorychart/categorychart-chart-title-subtitle.mdx new file mode 100644 index 0000000000..4f79bd9bd0 --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igcategorychart/categorychart-chart-title-subtitle.mdx @@ -0,0 +1,69 @@ +--- +title: "Chart Title and Subtitle" +slug: categorychart-chart-title-subtitle +--- + +# Chart Title and Subtitle + +The title and subtitle feature of the igCategoryChart control allows you to add information to the top section of the chart control. + +When adding a title or subtitle to the chart control, the content of the chart automatically resizes allowing for the title and subtitle information. +### In this topic + +This topic contains the following sections: + +- [Property Settings](#propertysettings) +- [Code Snippet](#codesnippet) +- [Related Topics](#relatedtopics) + +### Property Settings +You can customize the look and feel of the category chart's subtitle and title in many different ways such as applying different font styles, margins, and alignment. This can be achieved through the following properties: + +Property Name|Property Type|Description +---|---|--- +`title`|string|Determines the text to be used for the title +`titleTextColor`|string|Determines the color for the title +`titleTextStyle`|string|Determines the font styles to be applied to the title +`titleAlignment`|enumeration|Determines the alignment of the title +`titleTopMargin`|number|Determines the margin to be applied to the top of title +`titleRightMargin`|number|Determines the margin to be applied to the right of the title +`titleBottomMargin`|number|Determines the margin to be applied to the bottom of the title +`titleLeftMargin`|number|Determines the margin to be applied to the left of the title +`subtitle`|string|Determines the text to be used for the subtitle +`subtitleTextColor`|string|Determines the color for the subtitle +`subtitleTextStyle`|string|Determines the font styles to be applied to the subtitle +`subtitleAlignment`|enumeration|Determines the alignment of the subtitle +`subtitleTopMargin`|number|Determines the margin to be applied to the top of subtitle +`subtitleRightMargin`|number|Determines the margin to be applied to the right of the subtitle +`subtitleBottomMargin`|number|Determines the margin to be applied to the bottom of the subtitle +`subtitleLeftMargin`|number|Determines the margin to be applied to the left of the subtitle + +### Code Snippet +The following code example shows how to customize the title and subtitle: + +*In HTML:* + +```html +$(function () { + $("#chart").igCategoryChart({ + dataSource: data, + chartType: "auto", + xAxisTitle: "Country", + yAxisTitle: "Millions of People", + yAxisTitleAngle: 90, + title: "Energy Use Per Country", + subtitle: "Results over a two year period", + titleTextColor: "blue", + titleTextStyle: "20pt Times New Roman|Georgia|Serif", + titleAlignment: "center", + }); +}); +``` + +![](images/categorychart-configuring-title-01.png) + +## Related Topics: + +- [Adding igCategoryChart](/igcategorychart-adding.mdx) + +- [Binding to Data](/categorychart-binding-to-data.mdx) \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/controls/igcategorychart/categorychart-chart-types.mdx b/docs/jquery/src/content/en/topics/controls/igcategorychart/categorychart-chart-types.mdx new file mode 100644 index 0000000000..d5bbc7fd0d --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igcategorychart/categorychart-chart-types.mdx @@ -0,0 +1,37 @@ +--- +title: "Chart Types" +slug: categorychart-chart-types +--- + +# Chart Types + +## Overview + +The Category Chart simplifies assignment of the type of rendering compared to the Data Chart. +In order to select how data should be displayed it is enough to set the `chartType` property of this chart. +Below listed all of the types that the Category Chart supports. + +Special case is the `auto` setting of that property. If `auto` is used the chart will analyze assigned data and will assign the most suitable chart type. + +Default value of that property is `line`. + +## Supported chart types + +Property Value|Description|Example +---|---|--- +`line`|Specifies category line series with markers at each data point|![](images/chart-type-line.png) +`area`|Specifies category area series|![](images/chart-type-area.png) +`column`|Specifies category column chart with vertical rectangles at each data point|![](images/chart-type-column.png) +`point`|Specifies category point chart with markers at each data point|![](images/chart-type-point.png) +`stepLine`|Specifies category step line chart|![](images/chart-type-stepline.png) +`stepArea`|Specifies category step area chart|![](images/chart-type-steparea.png) +`spline`|Specifies category spline line series with markers at each data point|![](images/chart-type-spline.png) +`splineArea`|Specifies category spline area series|![](images/chart-type-splinearea.png) +`waterfall`|Specifies category waterfall chart|![](images/chart-type-waterfall.png) +`auto`|Specifies automatic selection of chart type based on suggestions from Data Adapter + +## Related topics + +- [Walkthrough](/igcategorychart-adding.mdx) + +- [Configuring Chart Types](/categorychart-configuring-chart-types.mdx) \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/controls/igcategorychart/categorychart-configuring-chart-markers.mdx b/docs/jquery/src/content/en/topics/controls/igcategorychart/categorychart-configuring-chart-markers.mdx new file mode 100644 index 0000000000..fd671b72eb --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igcategorychart/categorychart-configuring-chart-markers.mdx @@ -0,0 +1,84 @@ +--- +title: "Configuring Chart Markers" +slug: categorychart-configuring-chart-markers +--- + +# Configuring Chart Markers + +Markers are visual elements that display the values of data points in the igCategoryChart™ control's plot area. Markers help your end-users immediately identify a data point's value even if the value falls between major or minor grid lines. +This section provides you with useful information about working with the igCategoryChart control's Markers. + +- [Marker Appearance](#markerappearance) +- [Marker Types](#markertypes) +- [Marker Brushes and Outlines](#markerbrushesandoutlines) + +The appearance of chart markers is managed through the marker properties of the igCategoryChart class. + +#### Marker Appearance +The following table lists all marker appearance properties. + + +Property Name|Property Type|Description +---|---|--- +`markerTypes`| MarkerType |Determines type of markers displayed by the all series in the chart +`markerBrushes` |Brush |Determines fill color of markers +`markerOutlines`|Brush|Determines outline color of markers + + + +#### Marker Types +Property Name|Property Type|Description +---|---|--- +`circleMarker`|MarkerType|Displays the Circle marker type. +`diamondMarker`|MarkerType|Displays the Diamond marker type. +`hexagonMarker`|MarkerType|Displays the Hexagon marker type. +`hexagramMarker`|MarkerType|Displays the Hexagram marker type. +`pentagramMarker`|MarkerType|Displays the Pentagram marker type. +`pentagonMarker`|MarkerType|Displays the Pentagon marker type. +`pyramidMarker`|MarkerType|Displays the Pyramid marker type. +`squareMarker`|MarkerType|Displays the Square marker type. +`tetragramMarker`|MarkerType|Displays the Tetragram marker type. +`triangleMarker`|MarkerType|Displays the Triangle marker type. + + +The code snippets below demonstrate how to change the marker type for the igCategoryChart. + +*In HTML:* + +```html +$(function () { + $(“chart1”).igCategoryChart({ + markerTypes: [“diamond, "circle”, "square"] + }); +}); +``` + +The following screenshot displays the igCategoryChart control using the Line chart type with Diamond markers. + +![](images/categorychart-chart-markers-01.png) + + +#### Marker Brush and Outline + +The code snippets below demonstrate how to change the markerBrushes and markerOutlines for the igCategoryChart. + +*In HTML:* + +```html +$(function () { + $(“chart1”).igCategoryChart({ + markerBrushes: [“White”], + markerOutlines: [“Red”, “Orange”, “Green”] + }); +}); +``` + +The following screenshot displays the igCategoryChart control using the Line chart type with customized markers. + +![](images/categorychart-chart-markers-02.png) + +## Related Topics: + +- [Adding igCategoryChart](/igcategorychart-adding.mdx) + +- [Binding to Data](/categorychart-binding-to-data.mdx) \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/controls/igcategorychart/categorychart-configuring-chart-types.mdx b/docs/jquery/src/content/en/topics/controls/igcategorychart/categorychart-configuring-chart-types.mdx new file mode 100644 index 0000000000..5fce7d8fc5 --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igcategorychart/categorychart-configuring-chart-types.mdx @@ -0,0 +1,67 @@ +--- +title: "Configuring Chart Types" +slug: categorychart-configuring-chart-types +--- + +# Configuring Chart Types + +## Setting chart type + +As described in the [Chart Types](/categorychart-chart-types.mdx) topic the chart can render different types of chart with a simple change of a property. + +To assign chart type during initialization: + +```javascript +$("#theChart").igCategoryChart({ + dataSource: data, + chartType: "spline" +}); +``` + +To change chart type after initialization: + +```javascript +$("#theChart").igCategoryChart("option", "chartType", "area"); +``` + +## Properties + +To further customize the look of the chart there is a number of properties available that allows doing just that. + +Property Name|Property Type|Default Value|Description +---|---|---|--- +`brushes`|object|null|Gets or sets the palette of brushes to use for coloring the chart series. The value provided should be an array of CSS color strings or JavaScript objects defining gradients. Optionally the first element can be a string reading "RGB" or "HSV" to specify the interpolation mode of the collection. +`negativeBrushes`|object|null|Gets or sets the palette used for coloring negative items of Waterfall chart type. The value provided should be an array of CSS color strings or JavaScript objects defining gradients. Optionally the first element can be a string reading "RGB" or "HSV" to specify the interpolation mode of the collection. +`outlines`|object|null|Gets or sets the palette of brushes to use for outlines on the chart series. The value provided should be an array of CSS color strings or JavaScript objects defining gradients. Optionally the first element can be a string reading "RGB" or "HSV" to specify the interpolation mode of the collection. +`resolution`|number|1|Gets or sets the rendering resolution for series in this chart. Where n = Resolution, for every n horizontal pixels, combine all items into a single datapoint. When Resolution = 0, all datapoints will be rendered as graphical objects. Charts with a higher resolution will have faster performance. +`thickness`|number|1|Gets or sets the thickness of the chart series. Depending on the ChartType, this can be the main brush used, or just the outline. +`xAxisGap`|number|0|Gets or sets the amount of space between adjacent categories for the X-axis. Gets or sets the gap is silently clamped to the range [0, inf] when used. +`xAxisOverlap`|number|0|Gets or sets the amount of overlap between adjacent categories for the X-axis. Gets or sets the overlap is silently clamped to the range [-1, 1] when used. +`xAxisInverted`|bool|null|Gets or sets whether the direction of the X-axis is inverted, placing the first data items on the right side instead of left side. +`yAxisInverted`|bool|null|Gets or sets whether the direction of the Y-axis is inverted, placing minimum numeric value at the top of the axis instead of bottom. + +## Example + +The following example exercises some of the properties mentioned above. +To see more configuration options, follow the links at the bottom of this topic. + +```javascript +$("#theChart").igCategoryChart({ + dataSource: data, + chartType: "waterfall", + brushes: ["blue", "green"], + negativeBrushes: ["red", "yellow"], + outlines: ["black"], + thickness: 5 +}); +``` +And here is the result of running this code on a web page: +![](images/chart-types-configure.png) + +## Related topics + +- [Walkthrough](/igcategorychart-adding.mdx) + +- [Chart Types](/categorychart-chart-types.mdx) + +- [Axis Gap and Overlap](/axes/categorychart-configuring-axis-gap-and-overlap.mdx) \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/controls/igcategorychart/categorychart-datalegend.mdx b/docs/jquery/src/content/en/topics/controls/igcategorychart/categorychart-datalegend.mdx new file mode 100644 index 0000000000..d0343d9991 --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igcategorychart/categorychart-datalegend.mdx @@ -0,0 +1,119 @@ +--- +title: "Data Legend" +--- +# Data Legend + +The `igDataLegend` is a component that works much like the `Legend`, but it shows values of series and provides many configuration properties for filtering series rows and values columns, styling and formatting values. This legend updates when moving the mouse inside of the plot area of the `igCategoryChart` and has a persistent state that remembers the last hovered point when the user's mouse pointer exits the plot area. It displays this content using a set of three type of rows and four types of columns. + +## Data Legend Rows + +The rows of the `igDataLegend` include the header row, series row(s), and the summary row. + +The header row displays the axis label of the point that is hovered, and can be changed using the `headerText` property. + +The series row can actually be a set of rows corresponding to each series plotted in the chart. These rows will display the legend badge, series title, actual/abbreviated value of the the series, and abbreviation symbol and unit, if specified. + +Finally, there is a summary row that displays the total of all series values. The default summary title can be changed using the `summaryTitleText` property of the legend. Also, you can use the `summaryType` property to customize whether you display the Total, Min, Max, or Average of series values in the summary row. + +The following code snippet demonstrates setting the properties mentioned above to have a `igDataLegend` with a *Total* summary type with a custom title for the summary and a custom header: + +**In JavaScript:** + +```js +$("#dataLegendContainer").igDataLegend({ + target: $("#chartContainer").igCategoryChart(), + headerText: "My Custom Data Legend Header", + summaryType: "total", + summaryTitleText: "Grand Total" +}); +``` + +## Data Legend Columns + +The columns of the `igDataLegend` include the title, label, value, and units columns. Each series in the chart can have multiple columns for label, value, and units depending on the `includedColumns` or `excludedColumns` collections of the legend. + +The title column displays legend badges and series titles, which come from the `title` property of the different `Series` plotted in the chart. + +The label column displays the name or abbreviation of the different property paths in the `includedColumns` or `excludedColumns` collections of the legend. + +The value column displays series values as abbreviated text which can be formatted using the `valueFormatAbbreviation` property to apply the same abbreviation for all numbers by setting this property to `Auto` or `Shared`. Alternatively, a user can select other abbreviations such as `Independent`, `Kilo`, `Million`, etc. Precision of abbreviated values is controlled using the `valueFormatMinFractions` and `valueFormatMaxFractions` for minimum and maximum digits, respectively. + +The units column displays an abbreviation symbol and/or unit text, which can be set on the `igDataLegend` by setting the `UnitText` property. + +The following code snippet demonstrates the `unitText` and the minimum/maximum fractions set on the `igDataLegend`: + +**In JavaScript:** + +```js +$("#dataLegendContainer").igDataLegend({ + target: $("#chartContainer").igCategoryChart(), + valueFormatMinFractions: 2, + valueFormatMaxFractions: 4, + unitsText: "K" +}); +``` + +## Data Legend Styling + +The `igDataLegend` provides properties for styling each type of column. Each of these properties begins with Title, Label, Value, or Units, and you can style the text's color, font, and margin. For example, if you wanted to set the text color of each of these, you would set the `titleTextColor`, `labelTextColor`, `valueTextColor`, and `unitsTextColor` properties. + +The following code snippet demonstrates how to set the styling properties mentioned above: + +**In JavaScript:** + +```js +$("#dataLegendContainer").igDataLegend({ + target: $("#chartContainer").igCategoryChart(), + titleTextColor: "lightgray", + labelTextColor: "lightgray", + valueTextColor: "green", + unitsTextColor: "green", + unitsText: "K" +}); +``` + +## Data Legend Value Formatting + +The `igDataLegend` provides automatic abbreviation of large numbers using its `valueFormatAbbreviation` property. This adds a multiplier in the units column such as kilo, million, billion, etc. + +You can customize the number of fractional digits that are displayed by setting the `valueFormatMinFractions` and `valueFormatMaxFractions`. This will allow you to determine the minimum and maximum number of digits that appear after the decimal point, respectively. + +The following code snippet demonstrates how to set the minimum and maximum fractions of the `igDataLegend`: + +**In JavaScript:** + +```js +$("#dataLegendContainer").igDataLegend({ + target: $("#chartContainer").igCategoryChart(), + valueFormatMinFractions: 2, + valueFormatMaxFractions: 4 +}); +``` + +## Data Legend Value Mode + +You have the ability to change the default decimal display of values within the `igDataLegend` to be currency by changing the `valueFormatMode` property of the control. The `igDataLegend` also exposes the ability to modify the culture of the displayed currency symbol by using its `valueFormatCulture` property and setting it to its corresponding culture tag. + +For example, the following code snippet will create a `igDataLegend` with the `valueFormatCulture` set to "en-GB" and the `valueFormatMode` set to "Currency": + +**In JavaScript:** + +```js +$("#dataLegendContainer").igDataLegend({ + target: $("#chartContainer").igCategoryChart(), + valueFormatMode: "currency", + valueFormatCulture: "en-GB" +}); +``` + +## Data Legend Styling Events + +The `igDataLegend` has three events that fire when rendering their corresponding row. These events are listed below with a description of what they are designed to be used for: + +- `styleHeaderRow`: This event fires once when rendering the header row. +- `styleSeriesRow`: This event fires once for each series row which allows conditional styling of the values of the series. +- `styleSeriesColumn`: This event fires once for each series column, which allows conditional styling of the different columns for the series in the chart. +- `styleSummaryRow`: This event fires once when rendering the summary row. +- `styleSummaryColumn`: This event fires once when rendering the summary column. + +Each of the above events exposes a `DataLegendStylingRowEventArgs` parameter as its arguments, which lets you customize each item's text, text color, and the overall visibility of the row. The event arguments also expose event-specific properties. For example, since the `styleSeriesRow` event fires for each series, the event arguments will return the series index and series title for the row that represents the series. \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/controls/igcategorychart/categorychart-overview.mdx b/docs/jquery/src/content/en/topics/controls/igcategorychart/categorychart-overview.mdx new file mode 100644 index 0000000000..14b01537fa --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igcategorychart/categorychart-overview.mdx @@ -0,0 +1,38 @@ +--- +title: "Overview" +slug: categorychart-overview +--- + +# Overview + +### About igCategoryChart + +The igCategoryChart is a lightweight, highly performant chart. This chart can be easily configured to display category data using an extremely simple and intuitive API. All you need to do is bind your data (a collection or a collection of collections) and the chart takes care of everything else. + +The following screenshot demonstrates the category chart displaying a column chart. + +![](images/categorychart-configuring-title-01.png) + +By using a smart Data Adapter, the data is analyzed and the appropriate visualization is rendered. For example, if the `chartType` is set to `Auto`, the control can determine that if it is provided a small data set then a column chart should be plotted, while a larger data set will draw a line chart. + +However, you can also explicitly specify the chart type by setting the `chartType` to: + +- Line +- Area +- Column +- Point +- Spline +- SplineArea +- StepArea +- StepLine +- Waterfall + +Another example of the intuitive behavior of the Category Chart control is that you do not need to explicitly set the labels. The Category Chart will use the first appropriate string property that it finds within the data you provided and will use that for the labels. + +Built to be easily configurable, it uses the Data Chart control as its engine, which means that it benefits from the high performing and powerful Data Chart. You can also extend upon the category chart to avail of the powerful and extensive features of the data chart control. For more information, refer to the [Extending the Category Chart](categorychart-extending-category-chart.html) topic. + +*Related topics:* + +- [Walkthrough](/igcategorychart-adding.mdx) + +- [Binding to Data](/categorychart-binding-to-data.mdx) \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/controls/igcategorychart/categorychart-styling.mdx b/docs/jquery/src/content/en/topics/controls/igcategorychart/categorychart-styling.mdx new file mode 100644 index 0000000000..b2b783cf52 --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igcategorychart/categorychart-styling.mdx @@ -0,0 +1,290 @@ +--- +title: "Styling igCategoryChart" +slug: categorychart-styling +--- + +# Styling igCategoryChart + + +## Topic Overview + + +### Purpose + +This topic demonstrates how to apply styles and themes to the `igCategoryChart`™ control. + +### Required Background + +**Concepts** + +- Cascading Style Sheets +- Applying themes by changing linked CSS files + +**Topics** + +- [Styling and Theming in {environment:ProductName}](//general-and-getting-started/styling-and-theming/deployment-guide-styling-and-theming.mdx): General information and a procedure for updating styles and themes in {environment:ProductName}™ library. + +**External Resources** + + +- [jQuery UI](http://jqueryui.com/): General information about the jQuery UI library. + +- [Theming jQuery UI](http://docs.jquery.com/UI/Theming): Provides information on using themes with jQuery UI library. + +- [jQuery UI CSS Framework](http://docs.jquery.com/UI/Theming/API): Provides information in the jQuery UI styling framework. + +### In This Topic + +This topic contains the following sections: + +- [Introduction](#topic-introduction) +- [Themes Summary](#themes-summary) +- [Required Cascading Style Sheets (CSS)](#required-css) + - [Required CSS summary](#required-css-summary) + - [Required CSS code: HTML](#required-css-html) + - [Required CSS code: ASPX](#required-css-aspx) +- [Chart Styles Reference](#chart-style-reference) +- [Modifying the Chart-Specific Visual Elements Using Themes](#modify-chart-specific) + - [Introduction](#modify-chart-introduction) + - [Overview](#overview) + - [Steps](#steps) +- [Related Content](#related-content) + - [Topics](#topics) + - [Resources](#resources) + + +## Introduction + + +### Introduction to themes + +The `igCategoryChart` uses the jQuery UI CSS Framework for the purposes of applying styles and themes. By default, the `igCategoryChart` uses the IG Theme, which is a jQuery UI theme provided by Infragistics for use in your application. Additionally, the IG Theme has some additional chart specific styles. That means in order to customize the looks of charts a general jQuery UI theme is not sufficient. You will need to provide additional style classes that alter chart specific elements like data series and axes. + +To customize a theme, you can use the ThemeRoller tool. This jQuery UI tool facilitates the creation of custom themes that are compatible with the jQuery UI widgets. Many prebuilt themes are available for download and use in your website. The `igCategoryChart` control supports the use of ThemeRoller themes. + +Detailed information for using themes with {environment:ProductName} library is available in the [Styling and Theming in {environment:ProductName}](//general-and-getting-started/styling-and-theming/deployment-guide-styling-and-theming.mdx) topic. + +Note: The base theme of {environment:ProductName} is not necessary for charts and you may safely omit it on pages only containing charts. + + +## Themes Summary + +A summary of the `igCategoryChart` control’s available themes. + + + + + + + + + + + + + + + + + + + + +
ThemeDescription
IG Theme

Path: `{IG CSS root}/themes/Infragistics/`

File: `infragistics.theme.css`

This theme defines general visual features for all {environment:ProductName} controls. Detailed information for using the IG theme is available in the Styling and Theming in {environment:ProductName} topic.
Chart Structure

Path: `{IG CSS root}/structure/modules/`

File: `infragistics.ui.chart.css`

This theme defines visual elements specific for charts.
+ +## Required Cascading Style Sheets (CSS) + +### Required CSS summary + +The following CSS resources are necessary to correctly render charts: + +- `infragistics.theme.css` – Contains the IG Theme +- `infragistics.ui.chart.css` – Contains the Chart Structure classes + +In the code snippets that follow, it is assumed that the CSS resources are located in the `Content/ig` folder below the website or application root. + +>**Note:** The following blocks provide information on manually including required CSS files but the recommended way to load these files into your page it to use the Infragistics Loader control. + +### Required CSS code: HTML + +**In HTML:** + +```html + + +``` + +### Required CSS code: ASPX + +**In ASPX:** + +```csharp + + +``` + + +## Chart Styles Reference + + +### Style reference summary + +A summary of the `igCategoryChart` style’s purpose and functionality. + + +| | | +| --- | --- | +| Property | Description | +| .ui-chart-palette-1 to .ui-chart-palette-N | Sets border and background color for data series 1 to data series N. You can have as many ui-chart-palette classes as needed by your application. | +| .ui-chart-axis | Sets border and background color for chart axes. | +| .ui-chart-legend-items-list | Sets all styling options for chart legends. | +| .ui-chart-legend-item-text | Sets all styling options for legend item text. | +| .ui-chart-legend-item-badge | Sets all styling options for legend item icon. | +| .ui-chart-tooltip | Sets all styling options for chart tooltips. | + + +>**Note:** In all style classes, the border-color setting determines the outline of the corresponding element and the background-color settings determines the background or fill color of the element. + + +## Modifying the Chart-Specific Visual Elements Using Themes + + +### Introduction + +Demonstrates how to alter the default settings for various visual elements of the `igDataChart` control by changing the `infragistics.ui.chart.css` chart-specific styles. + +Use an existing page with a chart, since the procedure for creating a chart is not included for this example. The example shows you how to modify the chart styles. + +In this example, we will change the colors of the data series. + + +### Prerequisites + +To complete the procedure, you need the following: + +- An HTML5 web page with an existing `igCategoryChart` control + +### Overview + +A high level overview of the process: + +1. [Copy the default chart CSS file](#copy-default-css) +2. [Modify the styles for the chart visual elements](#modify-sryles) +3. [Change the link from the default chart CSS file to the modified file](#change-css-links) +4. [Verify the result](#final-result) + +### Steps + +Demonstrate how to modify the default IG Chart styles with your preferred settings. + +1. Copy the default chart CSS file. + + **Copy the CSS file, with the default chart styles (`infragistics.ui.chart.css`), from the {environment:ProductName} installation folder to the themes folder of your web site or application.** + + For instance, if you have a folder `Content/themes` in your web site or application where keep the CSS files used by the application, then make a copy of the default chart CSS file mentioned above in `Content/themes/MyChartTheme/ig.ui.chart.custom.css`. + +2. Modify the styles for chart visual elements + + Open the copy of the CSS file and make the desired changes to the styles. + + **In CSS:** + +```css + .ui-chart-palette-1 + { + border-color: rgb(35, 128, 168); + border-color: rgba(35, 128, 168, .8); + background-color: rgb(68, 172, 214); + background-color: rgba(68, 172, 214, .8); + } + .ui-chart-palette-2 + { + border-color: rgb(51, 51, 51); + border-color: rgba(51, 51, 51, .8); + background-color: rgb(73, 73, 73); + background-color: rgba(73, 73, 73, .8); + } + .ui-chart-palette-3 + { + border-color: rgb(128, 128, 128); + border-color: rgba(128, 128, 128, .8); + background-color: rgb(168, 168, 168); + background-color: rgba(168, 168, 168, .8); + } + .ui-chart-palette-4 + { + border-color: rgb(24, 81, 112); + border-color: rgba(24, 81, 112, .8); + background-color: rgb(33, 110, 153); + background-color: rgba(33, 110, 153, .8); + } + .ui-chart-palette-5 + { + border-color: rgb(135, 153, 34); + border-color: rgba(135, 153, 34, .8); + background-color: rgb(164, 186, 41); + background-color: rgba(164, 186, 41, .8); + } + .ui-chart-axis + { + border-color: #989EA3; + background-color: #989EA3; + } + .ui-chart-legend-items-list + { + padding: 10; + margin: 5px; + } + .ui-chart-legend-item-text + { + vertical-align: text-bottom; + } + .ui-chart-legend-item-badge + { + vertical-align: baseline; + } + .ui-chart-tooltip + { + -moz-box-shadow: 5px 5px rgba(0,0,0,0.5); + -webkit-box-shadow: 5px 5px rgba(0,0,0,0.5); + box-shadow: 5px 5px rgba(0,0,0,0.5); + } +``` + +3. Change the link from the default chart CSS file to the modified file. + + Update the link to the default chart CSS file to point to the CSS file modified in the previous step. + + **In HTML:** + +```html + +``` + + **In ASPX:** + +```csharp + +``` + +4. Verify the result. + + To verify that the chart colors and styles changed, save the web page and open it in your browser. + + +## Related Content + +### Topics + +The following topics provide additional information related to this topic. + + +- [igCategoryChart Overview](/categorychart-overview.mdx): Conceptual information about the `igCategoryChart` control. + +- [Adding igCategoryChart](/igcategorychart-adding.mdx): Demonstrates how to create the `igCategoryChart` control and bind it to data. + +###Resources + +The following third party material provides additional information related to this topic. + +- [jQuery Themeroller](http://jqueryui.com/themeroller/): Provides jQuery UI themes for preview and download. \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/controls/igcategorychart/categorychart-transition-in-animations.mdx b/docs/jquery/src/content/en/topics/controls/igcategorychart/categorychart-transition-in-animations.mdx new file mode 100644 index 0000000000..eae835cc20 --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igcategorychart/categorychart-transition-in-animations.mdx @@ -0,0 +1,89 @@ +--- +title: "Transition In Animations" +slug: categorychart-transition-in-animations +--- + +# Transition In Animations + +This feature allows you to animate the series as it loads a new data source. The available animation differs depending on the type of series involved. For example, the column series animates by rising from the x-axis, a line series animates by drawing from the y-axis. +The chart resizes allowing for the title and subtitle information. + +### In this topic + +- [Overview](#overview) +- [Supported Transition Types](#supportedtransitiontypes) +- [Supported Transition Speed Types](#supportedtransitionspeedtypes) +- [Supported Easing Function Types](#supportedeasingfunctiontypes) +- [Configuring the Transition-In Animations](#configuringthetransitioninanimations) +- [Related Topics](#relatedtopics) + +### Overview +By default, animated transitions are disabled and you can enable transition-in animations by setting the isTransitionInEnabled option to “True”. + +Animated transitions can be configured in terms of transition type, speed of the individual data points relative to each other, and the easing transition (managed by an easing function). + +## Supported transition types + +Many types of animated transitions are supported based on the nature of the movement and its direction: +* FromZero – Series transitions in from the reference value of the value axis. +* Accordion-type transitions: + * From side: + * AccordionFromLeft – Series accordions in from the left. + * AccordionFromRight – Series accordions in from the right. + * AccordionFromTop – Series accordions in from the top. + * AccordionFromBottom – Series accordions in from the bottom. + * From an axis: + * AccordionFromCategoryAxisMinimum – Series accordions in from the category axis minimum. + * AccordionFromCategoryAxisMaximum – Series accordions in from the category axis maximum. + * AccordionFromValueAxisMaximum – Series accordions in from the value axis maximum. + * AccordionFromValueAxisMinimum – Series accordions in from the value axis minimum. + +* Expand – Series expands from the value midpoints. +* Sweep-type transitions: + * From side: + * SweepFromLeft – Series sweeps in from the left + * SweepFromRight – Series sweeps in from the right + * SweepFromTop – Series sweeps in from the top. + * SweepFromBottom – Series sweeps in from the bottom. + * SweepFromCenter – Series sweeps in from the center. + * From an axis: + * SweepFromCategoryAxisMaximum – Series sweeps in from the category axis maximum. + * SweepFromCategoryAxisMinimum – Series sweeps in from the category axis minimum. + * SweepFromValueAxisMaximum – Series sweeps in from the value axis maximum. + * SweepFromValueAxisMinimum – Series sweeps in from the value axis minimum. + +## Supported transition speed types +The transition’s speed type determines the speed of the individual items of the current series’s transition relative to each other as the animated transition is playing. The following are the different speed types: +* Auto – Automatically selects a speed type. +* IndexScaled – Data points arrive later if their index is further from the axis origin. +* Normal – All speeds are normal, data points arrive at the same time. +* Random – Data points arrive at random times. +* ValueScaled - Data points arrive later if their value is further from the starting point. + +## Supported easing function types +The easing function determines what way the animation initially eases in. Apply any easing function. It is set to CubicEase by default. + +## Configuring the Transition-In Animations +The transition type is configured by setting the transitionInMode option to the desired transition name. Automatic selection of the transition type based on the series type is possible, too, by setting the property to “Auto” (default). + +The following example demonstrates how to enable transition in animations and have the chart accordion in from the right. + +*In HTML:* + +```html +$(function () { + $("#chart").igCategoryChart({ + dataSource: data, + chartType: "auto", + isTransitionInEnabled: true, + transitionInDuration: 500, + transitionInEasingFunction:"cubic" + }); +}); +``` + +## Related Topics: + +- [Adding igCategoryChart](/igcategorychart-adding.mdx) + +- [Binding to Data](/categorychart-binding-to-data.mdx) \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/controls/igcategorychart/images/categorychart-chart-markers-01.png b/docs/jquery/src/content/en/topics/controls/igcategorychart/images/categorychart-chart-markers-01.png new file mode 100644 index 0000000000..143a6a180e Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igcategorychart/images/categorychart-chart-markers-01.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igcategorychart/images/categorychart-chart-markers-02.png b/docs/jquery/src/content/en/topics/controls/igcategorychart/images/categorychart-chart-markers-02.png new file mode 100644 index 0000000000..b87e007d4a Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igcategorychart/images/categorychart-chart-markers-02.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igcategorychart/images/categorychart-configuring-title-01.png b/docs/jquery/src/content/en/topics/controls/igcategorychart/images/categorychart-configuring-title-01.png new file mode 100644 index 0000000000..31416980bc Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igcategorychart/images/categorychart-configuring-title-01.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igcategorychart/images/categorychart-data-binding-01.png b/docs/jquery/src/content/en/topics/controls/igcategorychart/images/categorychart-data-binding-01.png new file mode 100644 index 0000000000..2b204f20c8 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igcategorychart/images/categorychart-data-binding-01.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igcategorychart/images/categorychart-data-binding-02.png b/docs/jquery/src/content/en/topics/controls/igcategorychart/images/categorychart-data-binding-02.png new file mode 100644 index 0000000000..6337ce919b Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igcategorychart/images/categorychart-data-binding-02.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igcategorychart/images/categorychart-intervals-01.png b/docs/jquery/src/content/en/topics/controls/igcategorychart/images/categorychart-intervals-01.png new file mode 100644 index 0000000000..cb6fba6363 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igcategorychart/images/categorychart-intervals-01.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igcategorychart/images/categorychart-walkthrough-01.png b/docs/jquery/src/content/en/topics/controls/igcategorychart/images/categorychart-walkthrough-01.png new file mode 100644 index 0000000000..e4abfb6735 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igcategorychart/images/categorychart-walkthrough-01.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igcategorychart/images/chart-type-area.png b/docs/jquery/src/content/en/topics/controls/igcategorychart/images/chart-type-area.png new file mode 100644 index 0000000000..80ba22603d Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igcategorychart/images/chart-type-area.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igcategorychart/images/chart-type-column.png b/docs/jquery/src/content/en/topics/controls/igcategorychart/images/chart-type-column.png new file mode 100644 index 0000000000..ad155bde5d Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igcategorychart/images/chart-type-column.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igcategorychart/images/chart-type-line.png b/docs/jquery/src/content/en/topics/controls/igcategorychart/images/chart-type-line.png new file mode 100644 index 0000000000..78930e5b05 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igcategorychart/images/chart-type-line.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igcategorychart/images/chart-type-point.png b/docs/jquery/src/content/en/topics/controls/igcategorychart/images/chart-type-point.png new file mode 100644 index 0000000000..5c04ae88b6 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igcategorychart/images/chart-type-point.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igcategorychart/images/chart-type-spline.png b/docs/jquery/src/content/en/topics/controls/igcategorychart/images/chart-type-spline.png new file mode 100644 index 0000000000..eeba399515 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igcategorychart/images/chart-type-spline.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igcategorychart/images/chart-type-splinearea.png b/docs/jquery/src/content/en/topics/controls/igcategorychart/images/chart-type-splinearea.png new file mode 100644 index 0000000000..450100647e Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igcategorychart/images/chart-type-splinearea.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igcategorychart/images/chart-type-steparea.png b/docs/jquery/src/content/en/topics/controls/igcategorychart/images/chart-type-steparea.png new file mode 100644 index 0000000000..9b5938a691 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igcategorychart/images/chart-type-steparea.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igcategorychart/images/chart-type-stepline.png b/docs/jquery/src/content/en/topics/controls/igcategorychart/images/chart-type-stepline.png new file mode 100644 index 0000000000..e64589f733 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igcategorychart/images/chart-type-stepline.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igcategorychart/images/chart-type-waterfall.png b/docs/jquery/src/content/en/topics/controls/igcategorychart/images/chart-type-waterfall.png new file mode 100644 index 0000000000..61d814d83c Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igcategorychart/images/chart-type-waterfall.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igcategorychart/images/chart-types-configure.png b/docs/jquery/src/content/en/topics/controls/igcategorychart/images/chart-types-configure.png new file mode 100644 index 0000000000..a3021f766e Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igcategorychart/images/chart-types-configure.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igcategorychart/landingpage.mdx b/docs/jquery/src/content/en/topics/controls/igcategorychart/landingpage.mdx new file mode 100644 index 0000000000..c931770a4c --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igcategorychart/landingpage.mdx @@ -0,0 +1,39 @@ +--- +title: "igCategoryChart" +slug: igcategorychart-landingpage +--- + +# igCategoryChart + +### Introduction + +The igCategoryChart is a lightweight, highly performant chart. This chart can be easily configured to display category data using an extremely simple and intuitive API. All you need to do is bind your data (a collection or a collection of collections) and the chart takes care of everything else. + +The following screenshot demonstrates the category chart displaying a column chart. + +![](images/categorychart-configuring-title-01.png) + +### Topics +The topics in this section provide detailed information regarding the igCategoryChart control. + +- [Overview](/categorychart-overview.mdx) + +- [Walkthrough](/igcategorychart-adding.mdx) + +- [Binding to Data](/categorychart-binding-to-data.mdx) + +- [Axes](/axes/categorychart-axes.mdx) + +- [Chart Types](/categorychart-chart-types.mdx) + +- [Configuring Chart Types](/categorychart-configuring-chart-types.mdx) + +- [Configuring Chart Markers](/categorychart-configuring-chart-types.mdx) + +- [Chart Requirements](/categorychart-chart-requirements.mdx) + +- [Chart Title and Subtitle](/categorychart-chart-title-subtitle.mdx) + +- [Chart Styling](/categorychart-styling.mdx) + +- [Chart API Overview](/categorychart-api-overivew.mdx) \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/controls/igcombo/accessibility-compliance.mdx b/docs/jquery/src/content/en/topics/controls/igcombo/accessibility-compliance.mdx new file mode 100644 index 0000000000..04b7a271ea --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igcombo/accessibility-compliance.mdx @@ -0,0 +1,51 @@ +--- +title: "Accessibility Compliance (igCombo)" +slug: igcombo-accessibility-compliance +--- + +# Accessibility Compliance (igCombo) + + +##igCombo Accessibility Compliance + + +###Introduction + + +All of the {environment:ProductName}™ controls and components comply with Section 508, Subpart 1194.22 of the Rehabilitation Act of 1973. + +To meet the requirements each accessibility rule, in some cases, you may need to interact with the control by to setting a specific property, but in other cases the control does the work for you. + +>**Note:** As jQuery controls are client-only, some of the rules are not supported and are marked as limitations. + +###Accessibility reference chart + + +The table below briefly explains how the igCombo complies to the corresponding Section 508 rules. + +- **a:** A text equivalent for every non-text element is provided. + +- **c:** All information from the igCombo control conveyed with color is also available without color. + +- **d:** Content rendered by the igCombo control is readable even without an associated style sheet. + +- **j:** The igCombo control does not itself contribute to causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz. + +- **k:** The igCombo control supports scenarios where a text-only page, with equivalent information or functionality, shall be provided to make a web site comply with the provisions of this part, when compliance cannot be accomplished in any other way. + +- **l:** The igCombo control scripts can be identified with functional text that can be read by assistive technology. + +- **p:** When a timed response is required, the user is alerted and given sufficient time to indicate more time is required. + +##Related Topics + + +Following are some other topics you may find useful. + +- [Accessibility Compliance](//general-and-getting-started/accessibility-compliance.mdx) + + + + + + diff --git a/docs/jquery/src/content/en/topics/controls/igcombo/binding/cascading.mdx b/docs/jquery/src/content/en/topics/controls/igcombo/binding/cascading.mdx new file mode 100644 index 0000000000..1184dc8a69 --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igcombo/binding/cascading.mdx @@ -0,0 +1,235 @@ +--- +title: "Creating Cascading igCombos" +slug: igcombo-cascading +--- + +# Creating Cascading igCombos + + +##Topic Overview + + +### Purpose + +This topic explains how to implement igCombos in a cascading manner where the selection of one combo filters the data that is availble for selection in the next combo. + +### Required background + +The following topics are prerequisites to understanding this topic: + + +- [igCombo Overview](/igcombo-overview.mdx): This topic provides an overview of the `igCombo` control including its features, binding to data sources, requirements, and templates. + +- [Binding igCombo to Data](/igcombo-data-binding.mdx): This topic discusses the different ways to data bind the `igCombo` control, as well as some other details related to data binding. + +- [Configuring Selection](/configuring/igcombo-configure-selection.mdx): This topic discusses how to implement selection, including information on how to handle selection events. + +### In this topic + +This topic contains the following sections: + +- [Creating Cascading Combos](#creating-cascading-combos) + - [Introduction](#introduction) + - [Preview](#preview) + - [Prerequisites](#prerequisites) + - [Steps](#steps) + - [Finished Example](#finished-example) +- [Related Content](#related-content) + +##Creating Cascading Combos +### Introduction + +In this example two igCombos are created and bound to different data sources. Then, the selection of the first igCombo will filter the data that is available in the second igCombo. + +### Preview + +The following screenshot is a preview of the final result. + +![](images/01_Cascading_Combo_with_Individaul_Data_Source_1.png) + +### Prerequisites + +To comple the procedure you need the following: + +- A standard HTML page opened for editing. + +### Steps + +The following steps demonstrate how to bind the parent and child `igCombo` controls to different data sources. + +1. Add the HTML placeholders for parent and child `igCombo` controls. + + For this procedure, define the SPAN element to store the drop-downs. The HTML placeholder can be a DIV element, but in this procedure we use SPAN because we want the both combo boxes on the same row. + + **In HTML:** + +```html + + +``` + +2. Add the data source for the parent `igCombo` control. + + For this procedure, define the parent `igCombo` data source as an array of objects. + + **In JavaScript:** + +```js + var dsCountry = [ + { txtCountry: 'United States', valCountry: "US" }, + { txtCountry: 'Bulgaria', valCountry: "BG" } + ]; +``` + +3. Add the parent `igCombo` control. + + Add the parent `igCombo` defining the required properties. + + **In JavaScript:** + +```js + $("#comboCountry").igCombo({ + textKey: "txtCountry", + valueKey: "valCountry", + dataSource: dsCountry + }); +``` + +4. Add the data source for the child `igCombo` control. + + For this procedure, define the child `igCombo` data source as an array of objects. Note the additional key (`keyCountry`) holding the relation to the parent. + + **In JavaScript:** + +```js + var dsCascDistrict = [ + { keyCountry: "US", txtDistrict: "New Jersey", valDistrict: "NJ" }, + { keyCountry: "US", txtDistrict: "California", valDistrict: "CA" }, + { keyCountry: "US", txtDistrict: "Illinois", valDistrict: "IL" }, + { keyCountry: "US", txtDistrict: "New York", valDistrict: "NY" }, + { keyCountry: "US", txtDistrict: "Florida", valDistrict: "FL" }, + { keyCountry: "BG", txtDistrict: "Sofia", valDistrict: "SA" }, + { keyCountry: "BG", txtDistrict: "Plovdiv", valDistrict: "PV" }, + { keyCountry: "BG", txtDistrict: "Varna", valDistrict: "V" }, + { keyCountry: "BG", txtDistrict: "Yambol", valDistrict: "Y" } + ]; +``` + +5. Add the child `igCombo` control. + + Add the child `igCombo` control. Do not set the dataSource property yet. + + **In JavaScript:** + +```js + $("#comboDistrict").igCombo({ + valueKey: "valDistrict", + textKey: "txtDistrict" + }); +``` + +6. Add the selectionChanged event handler to the parent `igCombo`. + + Add the selectionChanged event handler to to parent `igCombo`. Create an empty array and then use the selected value of the parent `igCombo` to filter the data source for the child `igCombo`, storing the filtered results in the empty array. + + **In JavaScript:** + +```js + selectionChanged: function (evt, ui) { + var filteredCascDistrict = []; + if (ui.items && ui.items[0]) { + var itemData = ui.items[0].data; + + filteredCascDistrict = dsCascDistrict.filter(function (district) { + return district.keyCountry == itemData.valCountry; + }); + } + } +``` + +7. Bind the child `igCombo`. + + In the parent `igCombo` selectionChanged event bind the child `igCombo` to the filtered data. Take note of the call to deselectAll here; this is needed to clear the previous selection of the child `igCombo`, if any, in the instance that the new filtered set of data does not contain the previous selected values. + + **In JavaScript:** +```js + var $comboDistrict = $("#comboDistrict"); + $comboDistrict.igCombo("deselectAll", {}, true); + $comboDistrict.igCombo("option", "dataSource", filteredCascDistrict); + $comboDistrict.igCombo("dataBind"); +``` + +8. (Optional) Verify the result. + + Open the HTML page in your browser to view the result. If you have completed the procedure correctly, you will have two functional drop-downs aligned horizontally as shown in the [Preview](#preview). + +### Finished Example + +The following is the full code that was created for this sample to demonstrate what your page should look like when complete: + + **In HTML and JavaScript:** +```html + + + + +``` + +##Related Content + +### Samples + +The following samples provide additional information related to this topic. + +- [Cascading Combo]({environment:SamplesUrl}/combo/cascading-combos): This sample demonstrates three cascading `igCombo` controls. + + + + + + + diff --git a/docs/jquery/src/content/en/topics/controls/igcombo/binding/data-binding.mdx b/docs/jquery/src/content/en/topics/controls/igcombo/binding/data-binding.mdx new file mode 100644 index 0000000000..6bb2f2fe27 --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igcombo/binding/data-binding.mdx @@ -0,0 +1,300 @@ +--- +title: "Binding igCombo to Data Overview" +slug: igcombo-data-binding +--- + +# Binding igCombo to Data Overview + + +## Topic Overview + + +### Purpose + + +This topic discusses the different ways to data bind the `igCombo` control as well as other details related to data binding. + +### In this topic + + +This topic contains the following sections: + +- [Binding igCombo Data – Conceptual Overview](#binding-to-data-sources) +- Requirements for binding +- Supported data sources +- Binding to data sources overview +- Class diagram for binding to data sources +- [Binding igCombo Data – Procedure](#basicig-combo-data-binding) +- [Demos](#demos) + - [JSON Binding](#json-binding) + - [HTML Binding](#html-binding) + - [XML Binding](#xml-binding) +- [Related Topics](#related-topics) + +### Required background + + +You need to first read the following topics: + +- [igCombo Overview](/igcombo-overview.mdx) +- [Getting Started with igCombo](/igcombo-getting-started.mdx) + +## Binding igCombo Data – Conceptual Overview + + +### Requirements for binding + + +The following lists the requirements for binding the `igCombo` control to data sources grouped by requirement category. + +***Data structure*** + +Can be any of the following: + +- Well-formed JSON or XML supplied locally or from a web server +- JavaScript array or HTML TABLE element +- SELECT element +- OData services +- JSONP +- `IQueryable` in ASP.NET MVC + +***Data types*** + +- String +- Number +- Boolean +- Date + +### Supported data sources + + +The following lists the supported data sources and some basic specifics for their binding + +- **igDataSource**: The `igDataSource` is used internally by the `igCombo` to manage data operations for the control. The data source accepts many different types of local and remote data. + +- **HTML SELECT element**: This element is specific to the `igCombo` control. You can point to this element in the jQuery selector for `igCombo` and it converts the SELECT element to the `igCombo` control automatically inheriting the options of the base element. + +- **`IQueryable`**: In ASP.NET MVC, supply an `IQueryable` as the igCombo’s datasource and the collection is serialized to JSON and returned with the View for use in the browser. + +## Binding to data sources to overview + + +In most cases, you will use the `dataSource` or `dataSourceUrl` options of the `igCombo` to bind to data. This option provides your data to the `igDataSource` which can handle the various supported data formats. The one main exception to using this option is when the `igCombo` is instantiated using a SELECT element. The `igCombo` will inherit the data and options of its base SELECT element in this case. In ASP.NET MVC, supplying an `IQueryable` to the {environment:ProductNameMVC} facilitates the serialization of the data from the server and passes it to the client with the View. Once the page is received by the browser, the `dataSource` option of the `igCombo` is set for client-side operation. + +### Class diagram for binding to data sources + + +The following class diagram demonstrates how data binding works. + +![](images/igCombo_DataBinding_01.png) + +## Binding igCombo Data – Procedure + + +### Introduction + + +The following steps demonstrate how to configure basic options and bind to data using both jQuery and ASP.NET MVC. + +### Preview + + +Following is a preview of the final result. + +![](images/igCombo_DataBinding_02.png) + +### Requirements + + +To complete the procedure, you need the following: + +- A website and web page on which to add this example +- The required JavaScript resources and jQuery themes in your website +- References to the required JavaScript files and CSS files on your web page +- (ASP.NET MVC) A reference to the `Infragistics.Web.Mvc.dll` assembly + +### Overview + + +Following is a conceptual overview of the process: + +**1. Instantiating the `igCombo`** + +**2. Binding to data** + +### Steps + +1. **Instantiate the `igCombo`.** + + **a. Define a target element.** + + On your web page, define a target HTML element which will serve as the base object for the `igCombo` and set its ID. This is an optional step for ASP.NET MVC + + **In HTML:** + +```html + +``` + + **b. Instantiate the `igCombo`.** In jQuery, you can use the document ready JavaScript event to instantiate the combo. In ASP.NET MVC, use the HTML helper to bind to an `IQueryable` datasource. + + **In HTML:** + +```html + +``` + + **In ASPX:** + +```csharp + <%= Html. + Infragistics(). + Combo(). + ID("comboTarget") + %> +``` + +2. **Bind to data.** + + **a. Define the data.** + + In jQuery, this example binds to a simple JSON array. This data could be passed as part of the page request or could be returned from a web service. In ASP.NET MVC, this example binds to a collection of Color objects defined in the controller class on the server and returned as the model with the View. + + **In HTML:** + +```html + var colors = [ + { "Name": "Black" }, + { "Name": "Blue" }, + { "Name": "Brown" }, + { "Name": "Red" }, + { "Name": "White" }, + { "Name": "Yellow" } + ]; +``` + + **In C#:** + +```csharp + public class DefaultController : Controller + { + public ActionResult Index() + { + List colors = new List(); + colors.Add(Color.Black); + colors.Add(Color.Blue); + colors.Add(Color.Brown); + colors.Add(Color.Red); + colors.Add(Color.White); + colors.Add(Color.Yellow); + + return View("default", colors.AsQueryable()); + } + } +``` + + **b. Set the data source.** + + Use the `dataSource` option to supply the data to the combo. In ASP.NET MVC, Use the DataSource method of the helper to bind to the data passed in as part of the Model. + + **In HTML:** + +```html + $("#comboTarget").igCombo({ + dataSource: colors}); +``` + + **In ASPX:** + +```csharp + <%= Html. + Infragistics(). + Combo(). + ID("comboTarget"). + DataSource(this.Model as IQueryable) + %> +``` + + **c. Configure the text and value fields.** + + Set the `textKey` and `valueKey` options of the `igCombo`. In this simple example, the `textKey` and `valueKey` are both set to the same object value of ‘Name’. However, the `textKey` and `valueKey` could be set as two different fields. For instance, the `valueKey` could point to an ID field for each color object. + + **In HTML:** + +```html + $("#comboTarget").igCombo({ + dataSource: colors, textKey: "Name", + valueKey: "Name", + }); +``` + + **In ASPX:** + +```csharp + <%= Html. + Infragistics(). + Combo(). + ID("comboTarget"). + TextKey("Name"). + ValueKey("Name"). + DataSource(this.Model as IQueryable) + %> +``` + + **d. (ASP.NET MVC) Call DataBind() and Render().** + + When instantiating the {environment:ProductNameMVC} `Combo`, call the DataBind method to bind to the data and call the Render method last after all other options have been configured. This is the method that renders the HTML and JavaScript necessary to instantiate the `igCombo` on the client + + **In ASPX:** + +```csharp + <%= Html. + Infragistics(). + Combo(). + ID("comboTarget"). + TextKey("Name"). + ValueKey("Name"). + DataSource(this.Model as IQueryable). + DataBind(). + Render() %> +``` + +## Demos +Online Combo binding examples + +### JSON Binding +The combo easily binds to a JavaScript array or JSON data. This sample contains a basic example of client-side binding. + +
+ [{environment:SamplesEmbedUrl}/combo/json-binding]({environment:SamplesEmbedUrl}/combo/json-binding) +
+ +### HTML Binding + +igCombo can bind directly to an HTML SELECT element. + +
+ [{environment:SamplesEmbedUrl}/combo/html-binding]({environment:SamplesEmbedUrl}/combo/html-binding) +
+ +### XML Binding +igCombo supports binding to XML data. This sample shows a basic example of binding to an XML string. + +
+ [{environment:SamplesEmbedUrl}/combo/xml-binding]({environment:SamplesEmbedUrl}/combo/xml-binding) +
+ +## Related Topics + +Following are some other topics you may find useful. + +- [Binding igCombo to Data Overview](/igcombo-binding-to-data.mdx) +- [Binding Cascading igCombo Controls to Data](/igcombo-cascading.mdx) + + diff --git a/docs/jquery/src/content/en/topics/controls/igcombo/binding/images/01_Cascading_Combo_with_Individaul_Data_Source_1.png b/docs/jquery/src/content/en/topics/controls/igcombo/binding/images/01_Cascading_Combo_with_Individaul_Data_Source_1.png new file mode 100644 index 0000000000..4859a737f4 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igcombo/binding/images/01_Cascading_Combo_with_Individaul_Data_Source_1.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igcombo/binding/images/igCombo_DataBinding_01.png b/docs/jquery/src/content/en/topics/controls/igcombo/binding/images/igCombo_DataBinding_01.png new file mode 100644 index 0000000000..5cf50e173e Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igcombo/binding/images/igCombo_DataBinding_01.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igcombo/binding/images/igCombo_DataBinding_02.png b/docs/jquery/src/content/en/topics/controls/igcombo/binding/images/igCombo_DataBinding_02.png new file mode 100644 index 0000000000..4c05c886c6 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igcombo/binding/images/igCombo_DataBinding_02.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igcombo/binding/to-data.mdx b/docs/jquery/src/content/en/topics/controls/igcombo/binding/to-data.mdx new file mode 100644 index 0000000000..570d01fa19 --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igcombo/binding/to-data.mdx @@ -0,0 +1,28 @@ +--- +title: "Binding igCombo to Data" +slug: igcombo-binding-to-data +--- + +# Binding igCombo to Data + + +##In This Group of Topics + + +### Introduction + +The topics in this group explain how to bind {environment:ProductName}® combo control to data. + +### Topics + + +- [Binding igCombo to Data Overview](/igcombo-data-binding.mdx): This topic discusses the different ways to data bind the `igCombo` control as well as other details related to data binding. + +- [Binding Cascading igCombo Controls to Data](/igcombo-cascading.mdx): The topics in this group explain how to bind cascading {environment:ProductName} combo control to data. + + + + + + + diff --git a/docs/jquery/src/content/en/topics/controls/igcombo/configuring/angularjs-support.mdx b/docs/jquery/src/content/en/topics/controls/igcombo/configuring/angularjs-support.mdx new file mode 100644 index 0000000000..6f33ab6fd1 --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igcombo/configuring/angularjs-support.mdx @@ -0,0 +1,38 @@ +--- +title: "AngularJS Support (igCombo)" +slug: igcombo-angularjs-support +--- + +# AngularJS Support (igCombo) + +## Topic Overview +This topic shows how to configure `igCombo` with AngularJS. Each of our controls has a corresponding AngularJS directive, `igCombo` as well. This is an overview of the AngularJS `igCombo` directive. + +### In this topic + +This topic contains the following sections: + +- [Preview](#Preview) +- [Requirements](#Requirements) +- [Details](#Details) +- [Related Content](#Related_Content) + +### Preview +The following is a preview of the final result. + +
+ [{environment:SamplesEmbedUrl}/combo/angular]({environment:SamplesEmbedUrl}/combo/angular) +
+ +### Requirements +In order to run this sample, you need to have: +- The required {environment:ProductName} JavaScript and CSS files +- The {environment:ProductFamilyName} AngularJS directives + +### Details +In the sample we have listed 20 products. Using the AngularJS ng-repeat we loop through the data source records and for each of these products we create an input and bind it to the ProductName. In this way when we edit something in the input, the change is immediately reflected in the data source. Above the product names there are two `igCombo` controls with similar options. They are bound to the data source with the products. Also they are bound to a value from the controller (combo.value1) which stores the selected product id. On the left side of the `igCombo` controls we have an input which is bound to the same value (combo.value1). We can edit the inputs holding the product names, select a value from any `igCombo` or edit the selected product id - the two-way binding will update the `igCombo` controls and the input with the corresponding values instantly. + +### Related Content +The following topics provide additional information related to this topic: +- [Using {environment:ProductFamilyName} with AngularJS](../../../10_AngularJS Directives/00_Using_Ignite_UI_with_AngularJS.mdx) - This topic contains an overview using the {environment:ProductFamilyName} directives for AngularJS. +- [Conditional and Advanced Templating with AngularJS](../../../10_AngularJS Directives/01_Conditional_and_Advanced_Templating_with_AngularJS.mdx) - This topic explains how to use conditional templates and use advanced templating methods to customize controls created with the {environment:ProductFamilyName} directives for AngularJS. \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/controls/igcombo/configuring/asp-net-mvc.mdx b/docs/jquery/src/content/en/topics/controls/igcombo/configuring/asp-net-mvc.mdx new file mode 100644 index 0000000000..54e22e045d --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igcombo/configuring/asp-net-mvc.mdx @@ -0,0 +1,238 @@ +--- +title: "Configuring ASP.NET MVC Combo" +slug: configuring-asp-net-mvc +--- + +# Configuring ASP.NET MVC Combo + +## Topic Overview +This topic shows how to use the igCombo in a basic ASP.NET MVC scenario. + +### Purpose + +The {environment:ProductNameMVC} Combo is instantiated in a View. In addition, the `ComboDataSourceAction` attribute is used to process the remote request for the collection of employees as well as process the remote filtering parameters. Finally, you can see how the combo is used in a form to update a field in the model. + +#### Concepts + +- Using {environment:ProductNameMVC} Combo + + +### In this topic + +This topic contains the following sections: + +- [Preview](#_Preview) +- [Requirements](#_Requirements) +- [Overview](#_Requirements_Overview) +- [Steps](#_Steps) + - [Create a Order class](#_create_order_class) + - [Add the Controller and View](#_add_controler_and_view) + - [Run the sample](#_run_the_sample) +- [Related Content](#_Related_Content) + + +### Preview + +The following screenshot is a preview of the final result. + +![](images/igCombo_init_MVC_example.png) + +### Requirements + +To complete the procedure, you need an ASP.NET MVC Project with the following: + +- The required {environment:ProductName} JavaScript and CSS files +- The Infragistics.Web.Mvc.dll assembly referenced + +### Overview + +This topic takes you step-by-step toward creating a Model, View and Controller. + +1. Creating the `Order` class +2. Creating the Controller and the View + +### Steps + +​Create an `Order` class + +1. Add the `Order` class + + Add the `Order` class to your `Models` folder. + +2. Create class members + + Open the `Order.cs` file and add the following members to the class: + + **In C#:** + +```csharp + public class Order + { + public int OrderID { get; set; } + public string CustomerID { get; set; } + public Nullable EmployeeID { get; set; } + public Nullable OrderDate { get; set; } + public Nullable RequiredDate { get; set; } + public Nullable ShippedDate { get; set; } + public Nullable ShipVia { get; set; } + public Nullable Freight { get; set; } + public string ShipName { get; set; } + public string ShipAddress { get; set; } + public string ShipCity { get; set; } + public string ShipRegion { get; set; } + public string ShipPostalCode { get; set; } + public string ShipCountry { get; set; } + public string ContactName { get; set; } + public string EmployeeName { get; set; } + public int ShipperID { get; set; } + public string ShipperName { get; set; } + public decimal TotalPrice { get; set; } + public int TotalItems { get; set; } + } +``` + +​Add the Controller and the View + +1. Create a `ComboController` + + Create a new controller in the `Controllers` folder of your ASP.NET MVC application named `ComboController.cs` + +2. Create the Action methods + + Add two Action methods to the Controller for the purposes of creating an `Order`. + + **In C#:** + +```csharp + public class ComboController : Controller + { + // + // GET: /Combo/ + + [ComboDataSourceAction] + [ActionName("employee-combo-data")] + public ActionResult ComboData() + { + IEnumerable employees = RepositoryFactory.GetEmployeeRepository().Get(); + return View(employees); + } + + [ActionName("aspnet-mvc-helper")] + public ActionResult UsingAspNetMvcHelper() + { + Order order = RepositoryFactory.GetOrderRepository().Get().First(); + return View("aspnet-mvc-helper", order); + } + + [HttpPost] + [ActionName("aspnet-mvc-helper")] + public ActionResult UsingAspNetMvcHelper(Order updatedOrder) + { + ItemRepository orderRepository = RepositoryFactory.GetOrderRepository(); + ItemRepository employeeRepository = RepositoryFactory.GetEmployeeRepository(); + + Order existingOrder = orderRepository.Get(o => o.OrderID == updatedOrder.OrderID); + Employee newEmployee = employeeRepository.Get(e => e.ID == updatedOrder.EmployeeID); + + if (existingOrder != null && newEmployee != null) + { + existingOrder.EmployeeID = newEmployee.ID; + existingOrder.EmployeeName = newEmployee.Name; + + orderRepository.Update(existingOrder, o => o.OrderID == existingOrder.OrderID); + orderRepository.Save(); + } + + return View("aspnet-mvc-helper", existingOrder); + } + + } +``` +3. Create the View + + Create a strongly-typed View and use the `Order` class as the Model. + + **In ASPX:** + +```csharp + @using Infragistics.Web.Mvc + @using IgniteUI.SamplesBrowser.Models + @model IgniteUI.SamplesBrowser.Models.Northwind.Order +``` + +4. Add the JavaScript and CSS references. + + In this example, use the combined JavaScript and CSS files referenced locally in the ASP.NET MVC application. + + **In ASPX:** + +```csharp + + + + + + + + ... + + +``` + +5. Create a form for the `Order` object. + + **In ASPX:** + +```csharp + @using (Html.BeginForm()) + { +
+ @Html.HiddenFor(item => item.OrderID) + +
+

Current Employee:

+ @Html.DisplayFor(item => item.EmployeeName) +
+ +
+

Choose New Employee

+ + @(Html.Infragistics().ComboFor(item => item.EmployeeID) + .Width("270px") + .DataSource(Url.Action("employee-combo-data")) + .ValueKey("ID") + .TextKey("Name") + .DataBind() + .Render() + ) +
+ + +
+ } +``` + +​Run the sample. + + +Run the sample and select an item from the dropdown. After that click on "Update" button in order to update the current employee value. + +![](images/igCombo_updated_MVC_example.png) + +### Related Content + +- [Binding igCombo to Data Overview](/binding/igcombo-data-binding.mdx): This topic discusses the different ways to data bind the `igCombo` control as well as other details related to data binding. diff --git a/docs/jquery/src/content/en/topics/controls/igcombo/configuring/configure-auto-suggest.mdx b/docs/jquery/src/content/en/topics/controls/igcombo/configuring/configure-auto-suggest.mdx new file mode 100644 index 0000000000..23235e2f2e --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igcombo/configuring/configure-auto-suggest.mdx @@ -0,0 +1,215 @@ +--- +title: "Configuring Auto-Suggest (igCombo)" +slug: igcombo-configure-auto-suggest +--- +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# Configuring Auto-Suggest (igCombo) + + +##Topic Overview +###Purpose + + +This topic explains how to configure auto-suggest and different filtering options of the `igCombo`™ control. + +###In this topic + + +This topic contains the following sections: + +- [igCombo Configuration Overview](#control_configuration_overview) +- [Configure Auto-Suggest](#configure_auto_suggest) + - [Auto-Suggest details](#configure_auto_suggest_details) + - [Auto-Suggest property settings](#configure_auto_suggest_property_settings) + - [Example: auto-suggest with local filtering](#auto_suggest_example) + - [Example: case-sensitive auto-suggest with local filtering](#auto_suggest_case_sensitive_example) + - [Auto-suggest property reference](#auto_suggest_property_reference) +- [Related Topics](#related_topics) + +###Required background + + +The list below lists the background you need for fully understanding the information in this topic. + + +**Concepts** + +You need to be familiar with the following concepts: + +- ASP.NET MVC Only + - [ASP.NET MVC Routing](http://www.asp.net/mvc/tutorials/older-versions/controllers-and-routing/asp-net-mvc-routing-overview-cs) + +**Topics** + +You need to first read the following topics: + +- [igCombo Overview](/igcombo-overview.mdx) +- [Adding igCombo](/igcombo-getting-started.mdx) +- [Binding igCombo to Data](/binding/igcombo-binding-to-data.mdx) + +##igCombo Configuration Overview + + +###Control configuration chart + +The table below lists the configurable behaviors of the `igCombo` control. + +###Auto-suggest + +The auto-suggest feature is the combination of dropdown list filtering and match-highlighting to suggest possible choices to the user.The configuration properties are: + +- + +- + +- + +- + +##Configure Auto-Suggest + + +###Auto-Suggest details + + +The `igCombo` auto-suggest feature is the combination of drop-down list filtering and match-highlighting to suggest possible choices to the user. Setting the filteringType to ‘local’ enables list filtering and setting highlightMatchesMode allows for matching text in the dropdown to be highlighted. + +Whether the `igCombo` control is bound on the client or the server, filtering on the list is performed locally to reduce the amount of server requests for filtered data. Using the local filtering type requires all of the data for the `igCombo` control is provided to the client. + +>**Note:** If the amount of choices is too large for a single request, consider using remote filtering. + +Additionally, the filtering and highlighting behaviors can be customized to change which criterion triggers a match. The most common settings are listed in the property settings table. Conditions can customize filtering using the `filteringCondition` option and similar behavior can be customized for highlighting using the `highlightMatchesMode` option. Making filtering case sensitive is achieved by setting the `caseSensitive` option to true. + +![](images/igCombo_AutoSuggest_01.png) + +###Auto-Suggest property settings + + +The following table maps the desired behaviors to property settings. The properties are accessed through the `igCombo` control’s options. + + +| In order to | Use this property | And set it to | +| --- | --- | --- | +| Enable auto-suggest filtering | | local | +| Enable match highlighting for all instances within a single item | | multi | +| Configure the filtering to find only items that start with the entered text | | startsWith | +| Configure the filtering to find all items that contain the entered text | | contains | +| Configure match highlighting to match only items that start with the entered text | | startsWith | +| Configure match highlighting to match only one instance of the entered text within each item | | contains | +| Make filtering case sensitive | | true | +| Enable auto-complete | | true | + + +###Example: auto-suggest with local filtering + + +The following settings demonstrate how to configure the auto-suggest behavior to match list values from local data. + + + + + + + + + + + + + + + + + + + + + + + + +
PropertySettingPreview
local![](images/igCombo_AutoSuggest_02.png)
multi
contains
+ +##Example: case-sensitive auto-suggest with local filtering + +The following settings demonstrate how to configure the auto-suggest behavior to match list values from local data that match the exact case of the entered text. + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertySettingPreview
local![](images/igCombo_AutoSuggest_03.png)
contains
contains
true
+ +###Example: auto-suggest with auto-complete and local filtering + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertySettingPreview
local![](../images/igCombo_Auto_Complete.png)
startsWith
startsWith
true
+ +###Auto-suggest property reference + + +For detailed information about these properties, refer to their listing in the property reference section: + +- + +###Related Topics + +Following are some other topics you may find useful. + +- [Configure Remote Filtering (igCombo) ](/igcombo-configure-remote-filtering.mdx) + + + + + + diff --git a/docs/jquery/src/content/en/topics/controls/igcombo/configuring/configure-remote-filtering.mdx b/docs/jquery/src/content/en/topics/controls/igcombo/configuring/configure-remote-filtering.mdx new file mode 100644 index 0000000000..b4d04d9d79 --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igcombo/configuring/configure-remote-filtering.mdx @@ -0,0 +1,321 @@ +--- +title: "Configuring Remote Filtering (igCombo)" +slug: igcombo-configure-remote-filtering +--- +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# Configuring Remote Filtering (igCombo) + + +##Topic Overview + + +This topic explains how to configure auto-suggest and different filtering options in the `igCombo`™ control. + +###In this topic + + +This topic contains the following sections: + +- [igCombo Configuration Overview](#overview) +- [Configure OData list filtering](#odata_filtering) + - [OData list filtering configuration details](#odata_details) + - [OData list filtering configuration property settings](#odata_settings) + - [OData list filtering configuration example](#odata_example) +- [Configure ASP.NET MVC list filtering](#asp_filtering) + - [ASP.NET MVC list filtering configuration details](#asp_details) + - [ASP.NET MVC list filtering configuration property settings](#asp_settings) + - [ASP.NET MVC list filtering configuration example](#asp_example) +- [Related Topics](#related_topics) + +###Required background + + +The table bellows lists the background you need for fully understanding the information in this topic. + +**Concepts** + +You need to be familiar with the following concepts: + +- ASP.NET MVC Only + - [ASP.NET MVC Routing](http://www.asp.net/mvc/tutorials/asp-net-mvc-routing-overview-cs) +- OData Only + - [OData: JavaScript Object Notation (JSON) Format](http://www.odata.org/documentation/odata-version-2-0/) + - [OData: URI Conventions](http://www.odata.org/documentation/odata-version-2-0/uri-conventions/) + +**Topics** + +You need to first read the following topics: + +- [igCombo Overview](/igcombo-overview.mdx) +- [Adding igCombo](/igcombo-getting-started.mdx) +- [Configure igCombo](/igcombo-configuring.mdx) + +##igCombo Configuration Overview + + +###Control configuration chart + + +The table below lists the configurable behaviors of the `igCombo` control. + + +| Configurable behavior | Behavior details | Configuration properties | +| --- | --- | --- | +| Remote filtering with OData | OData provides a way to filter the combo when the data source has a very large amount of records. The igCombo control internally handles sending the proper requests for filtered results from the service. | | +| Remote filtering with the ASP.NET MVC | The {environment:ProductNameMVC} Combo provides the API to setup server-side filtering when binding to collections of business objects. | ComboDataSourceAction | + + +##Configure OData list filtering + + +###OData list filtering configuration details + + +The `igCombo` control can be bound to an OData service. Because the OData protocol supports filtering, the `igCombo` can internally handle the request parameters necessary to handle the filtering for Auto-Suggest from an OData service. If your application requires the combo to suggest from a large list of options, using server-side filtering with OData can help avoid having to download a large amount of data that must be bound locally. + +###OData list filtering configuration property settings + + +The table below maps the desired configurations to property settings. The properties are accessed through the `igCombo` options. + + +| In order to… | Use this property: | And set it to… | +| --- | --- | --- | +| Configure remote filtering with OData | dataSource, filteringType, responseDataKey, valueKey, textKey | string - OData service URL, remote, d.results, string - unique key for item in list, string - field to display in list | + + +For detailed information about these properties, refer to their listing in the property reference section: + +- `igCombo` Options + +###OData list filtering configuration example + + +#### Introduction + +This example demonstrates how to configure the `igCombo` control for remote filtering with an OData service using the JSONP format. + +#### Requirements + +To complete the procedure, you need the following: + +- Access to a OData service + +#### Overview + +Following is a conceptual overview of the process: + +1. Enabling remote filtering +2. Configuring the data source +3. Configuring the response data key +4. Configuring the value key +5. Configuring the text key + +#### Steps + +1. Enable remote filtering. + + Set the filteringType option to ‘remote’ in order to instruct the `igCombo` control to send filtering parameters to the server. + + **In HTML:** + +```html + filteringType: "remote" +``` + + **In ASPX:** + +```csharp + FilteringType(ComboFilteringType.Remote) +``` + +2. Configure the data source + + Set the dataSource option to the URL of the OData service. In the case of the {environment:ProductName} OData service, JSONP is used to avoid cross-domain restrictions of the browser. This is format is requested by passing a callback parameter in the OData request URI. + + **In HTML:** + +```html + dataSource: "http://igniteui.com/api/products?callback=?" +``` + + **In ASPX:** + +```csharp + DataSource("http://igniteui.com/api/products?callback=?") +``` + +3. Configure the response data key + + The data is returned from OData in a specific schema. If you are accessing an OData v1 service, this key is typically ‘d’. The {environment:ProductName} service is OData v2 and the response key is ‘d.results’. + + **In HTML:** + +```html + responseDataKey: "d.results" +``` + + **In ASPX:** + +```csharp + ResponseDataKey("d.results") +``` + +4. Configure the value key. + + Setting the value key tells the `igCombo` control which field provides unique value for each dropdown item. This value varies and is dependent upon the fields of data to which the `igCombo` control is bound. + + **In HTML:** + +```html + valueKey: "ID" +``` + + **In ASPX:** + +```csharp + ValueKey("ID") +``` + +5. Configure the text key. + + Setting the text key tells the `igCombo` control which field provides text for each dropdown item. This value varies and is dependent upon the fields of data to which the `igCombo` control is bound. + + **In HTML:** + +```html + textKey: "ProductName" +``` + + **In ASPX:** + +```csharp + TextKey("ProductName") +``` + +#### Example code + +The following listing is the full code used in this example to configure list filtering with OData. + +**In HTML:** + +```html +$("#comboTarget").igCombo({ + filteringType: "remote", + responseDataKey: "d.results", + valueKey: "ID", + textKey: "ProductName", + dataSource: "http://igniteui.com/api/products?callback=?" +}); +``` + +**In ASPX:** + +```csharp +<%= Html. + Infragistics(). + Combo(). + ID("comboTarget"). + FilteringType(ComboFilteringType.Remote). + DataSource("http://igniteui.com/api/products?callback=?"). + ResponseDataKey("d.results"). + ValueKey("ID"). + TextKey("ProductName"). + Render() +%> +``` + +##Configure ASP.NET MVC list filtering + + +###ASP.NET MVC list filtering configuration details + + +The {environment:ProductNameMVC} `Combo` primarily functions to render the necessary jQuery and HTML on the client while being able to configure the behaviors in C# or Visual Basic.NET. + +The other part of the {environment:ProductNameMVC} is to facilitate remote operations to the server. This is the case with `igCombo` control where you can decorate an `ActionResult` method with the `ComboDataSourceAction` attribute and the helper can facilitate the server-side querying of the data source and return the appropriate data to the client. + +###ASP.NET MVC list filtering configuration property settings + + +The table below maps the desired configuration to property settings. The properties are accessed through [path to the properties]. + + +| In order to… | Use this property: | And set it to… | +| --- | --- | --- | +| Configure remote filtering with the {environment:ProductNameMVC} helper | , , , , ComboDataSourceAction | IQueryable object, string URL to ComboDataSourceAction, remote, filter, Attribute used to decorate filtering request ActionResult method | + + +For detailed information about these properties, refer to their listing +in the property reference section: + +- +- + +###ASP.NET MVC list filtering configuration example + + +#### Introduction + +This example shows how to enable remote filtering with the {environment:ProductNameMVC}. In this configuration, and action method is defined for data filtering operations. The `igCombo` control is bound to data on the server and when a filtering operation occurs on the client, the request for filtered data is sent to the action method. + +#### Requirements + +To complete the procedure, you need the following: + +- an ASP.NET MVC application +- `Infragistics.Web.Mvc.dll` assembly referenced in your project +- A `Combo` control bound to data through the {environment:ProductNameMVC} + +#### Overview + +Following is a conceptual overview of the process: + +1. Configuring server requests to be handled internally by the combo +2. Configuring remote filtering + +#### Steps + +1. **Configure server requests to be handled internally by the combo.** + + In order to have the requests from the server handled internally, a `ComboDataSource` needs to be defined and configured in the controller on the server. The `ComboDataSourceAction` is an attribute that can be applied to an `ActionResult` configured on your controller. When the `ActionResult` is configured with the attribute and the `igCombo` is provided with the URL to the controller action, requests to the server are handled internally by the combo. The `igCombo` constructs a URL with query parameters that are directed to this action on the server. Once the action receives the request, additional logic is performed by the `ComboDataSourceAction` to filter the IQueryable data source object and return the filtered JSON values to the client. + + **In C#:** + +```csharp + [ComboDataSourceAction] + public ActionResult ComboData() + { + return View(this.GetColors()); + } +``` + + You can see here that the same call to the data is made without any special filtering logic required. + +2. **Configure remote filtering.** + + Finally, the `ComboDataSourceAction` requires some properties set. The `DataSourceUrl` points to the `ActionResult` method name. Also, the `FilterExprUrlKey` should be set to "filter" which is the URL parameter required by the `ComboDataSourceAction`. This string is passed as a parameter in the request URL to send the filtering expression to the server. The reason the `FilterExprUrlKey` is set to "filter" when using the ASP.NET MVC Helper is because the logic of the `ComboDataSourceAction` specifically looks for "filter" in the request URL query parameters to extract the filtering expression information. + + **In C#:** + +```csharp + comboViewModel.DataSourceUrl = Url.Action("combodata"); + comboViewModel.FilteringType = ComboFilteringType.Remote; + comboViewModel.FilterExprUrlKey = "filter"; +``` + +##Related Topics + + +Following are some other topics you may find useful. + +- [Configure igCombo](/igcombo-configuring.mdx) + +- [jQuery and MVC API Links (igCombo)](/igcombo-jquery-and-asp-net-mvc-helper-api-links.mdx) + + + + + + diff --git a/docs/jquery/src/content/en/topics/controls/igcombo/configuring/configure-selection.mdx b/docs/jquery/src/content/en/topics/controls/igcombo/configuring/configure-selection.mdx new file mode 100644 index 0000000000..b6f81912d1 --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igcombo/configuring/configure-selection.mdx @@ -0,0 +1,265 @@ +--- +title: "Configuring Selection (igCombo)" +slug: igcombo-configure-selection +--- +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# Configuring Selection (igCombo) + + +##Topic Overview + + +###Purpose + + +The `igCombo`™ control supports single and multiple selection, checkboxes, selection events and an API for changing the selection behavior programmatically. This topic shows how these different aspects of the selection functionality can be configured. + +###In this topic + + +This topic contains the following sections: + +- [igCombo Selection Configuration Overview](#configuration_overview) +- [Configure Multiple Selection](#configure_multiple_selection) + - [Multiple selection details](#multiple_selection_details) + - [Multiple selection settings](#multiple_selection_settings) +- [Code Example: Configure checkboxes](#code_example) +- [Clear Selection](#clear_selection) + - [Clear selection details](#clear_selection_details) + - [Clear selection settings](#clear_selection_settings) +- [Handle selection Events](#handle_selection_events) + - [Selection events details](#selection_events_details) + - [Selection events settings](#selection_events_settings) +- [Cancel Selection](#cancel_selection) + - [Introduction](#cancel_selection_introduction) + - [Overview](#cancel_selection_overview) + - [Steps](#cancel_selection_steps) +- [Related Topics](#related_topics) + +###Required background + + +The table below lists the background you need to fully understand the information in this topic. + +**Topics** + +You need to first read the [igCombo Overview](/igcombo-overview.mdx) and [Adding igCombo](/igcombo-getting-started.mdx) topic. + +**External Resources** + +You need to first read the following articles: + +- [jQuery bind() API](http://api.jquery.com/bind/) +- [jQuery live() API](http://api.jquery.com/live/) + +##igCombo Selection Configuration Overview + + +###Selection configuration + + +The table below lists the configurable behaviors of the `igCombo` control. + + +| Configurable behavior | Behavior details | Configuration properties | +| --- | --- | --- | +| Multiple selection | Multiple selection allows users to select more than one item in the combo from the dropdown or by typing multiple values in the text box. | | +| Clear selection | Programmatically clears the selection from the igCombo control. | | +| Handle selection events | Capture selection events to perform logic in response to a selection operation occurring. | | +| Handle selection events | Capture selection events to perform logic in response to a selection operation occurring. | , | +| Cancel Selection | Cancel the selection changing event to cancel a selection operation. | | + + +##Configure Multiple Selection + + +###Multiple selection details + + +Enabling multiple selection allows the user to select multiple items with the mouse or keyboard from the dropdown. In addition, the users also can type multiple values in the text box separating them by ``itemSeparator`` to select corresponding values. Default value for the ``itemSeparator`` is ``', '``. + +Finally, you can enable checkboxes to facilitate multiple selection. + +![](images/Configure_Selection_in_the_igCombo__01.png) + +###Multiple selection settings + + +The table below maps the desired configurations to property settings. The properties are accessed through the `igCombo` control options. + + +| In order to configure | Use this option | Set it to | +| --- | --- | --- | +| Multiple selection | | true | +| Show checkboxes | | true | + + +###Code Example: Configure checkboxes + + +Following is the full code used in this example to configure multiple selection with checkboxes using the `igCombo` control options with the following parameters: + +**Multiple Selection** – Enabled with checkboxes + +**In HTML:** + +```html + +``` + + +**In ASPX:** + +```csharp +<%= Html. + Infragistics(). + Combo(). + DataSource(this.Model as IQueryable). + MultiSelectionSettings(ms => { + ms.Enabled(true); + ms.ShowCheckBoxes(true); + }). + Render() +%> +``` + +###Multiple selection property reference + + +For detailed information about these properties, refer to their listing in the property reference section: + +**igCombo Options** + +####Clear selection + + +######Clear selection details + + +To clear the selection of the `igCombo` control programmatically, use the method deselectAll. + +![](images/Configure_Selection_in_the_igCombo__02.png) + +######Clear selection settings + + +The table below maps the desired behaviors to property settings. The properties are accessed through the `igCombo` options. + + +| In order to | Use this method and event | +| --- | --- | +| Clear selection | | +| Handle an event after selection has been changed | | + + +###Handle selection events + + +######Selection events details + + +You can use selection events to perform logic when a selection operation occurs. The `selectionChanging` is raised before the selection is changed within the control and the `selectionChanged` event is raised directly after the igCombo’s selection is changed. + +######Selection events settings + + +The table below maps the desired configurations to property settings. The properties are accessed through the `igCombo` options. + + +| In order to | Use this event | Set it to | +| --- | --- | --- | +| Handle an event prior to selection being changed | | `function()` | +| Handle an event after selection has been changed | | `function()` | + + +##Cancel Selection + + +###Introduction + + +By handling the `selectionChanging` event, you can cancel a selection operation. + +###Overview + + +- Following is a conceptual overview of the process: + +- Handling the `selectionChanging` event + +- Cancelling the event by returning false + +###Steps + + +1. Handle the `selectionChanging` event. + + 1. Define a handler function. + + Define a function that is called when the `selectionChanging` event is raised. + + **In HTML and JavaScript:** + +```html + +``` + + 2. Configure the handler for the `selectionChanging` event. + + Once you have a handler defined, you must set it as the handler for the `selectionChanging` event. In jQuery, this can be done when the widget is instantiated. In ASP.NET MVC, the event should be attached using the jQuery live or bind API. Using the live or bind API is an option for attaching the event in a pure jQuery implementation as well. The type for this event is ‘igcomboselectionchanging’. + + **In HTML:** + +```html + $("#comboTarget").igCombo({ + selectionChanging: comboSelectionChanging + }); +``` + + **In ASPX:** + +```csharp + $("#comboTarget").bind("igcomboselectionchanging", comboSelectionChanging); +``` + +2. Cancel the event by returning false. + + **In HTML and JavaScript:** + +```html + +``` + +##Related Topics + + +Following are some other topics you may find useful. + +- [Configuring igCombo](/igcombo-configuring.mdx) + + + + + + diff --git a/docs/jquery/src/content/en/topics/controls/igcombo/configuring/configuring.mdx b/docs/jquery/src/content/en/topics/controls/igcombo/configuring/configuring.mdx new file mode 100644 index 0000000000..860e0dd57b --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igcombo/configuring/configuring.mdx @@ -0,0 +1,32 @@ +--- +title: "Configuring igCombo" +slug: igcombo-configuring +--- + +# Configuring igCombo + + +##In This Group of Topics + + +### Introduction + +The topics in this group explain how to configure {environment:ProductName}® combo control. + +### Topics + +- [Configuring Selection (igCombo)](/igcombo-configure-selection.mdx): This topic shows how these different aspects of the selection functionality can be configured. + +- [Configuring Auto-Suggest (igCombo)](/igcombo-configure-auto-suggest.mdx): This topic explains how to configure auto-suggest and different filtering options of the `igCombo` control. + +- [Configuring Remote Filtering (igCombo)](/igcombo-configure-remote-filtering.mdx): This topic explains how to configure auto-suggest and different filtering options in the `igCombo` control. + +- [Configuring Load-on-Demand (igCombo)](/igcombo-load-on-demand.mdx): This topic introduces the Load on Demand feature of the `igCombo` control and explains, with code examples how to configure and use it. + +- [Configuring Knockout Support (igCombo)](/igcombo-knockoutjs-support.mdx): This topic explains how to configure the `igCombo` control to bind it to View-Model objects managed by the Knockout library. + +- [Optimizing Performance (igCombo)](/igcombo-optimize-performance.mdx): This topic demonstrates how to enable item virtualization for maximum performance while scrolling the `igCombo` control. + +- [ASP.NET MVC configuration (igCombo)](configuring-asp-net-mvc): This topic shows how the `igCombo` is used in a basic ASP.NET MVC scenario. + + diff --git a/docs/jquery/src/content/en/topics/controls/igcombo/configuring/grouping.mdx b/docs/jquery/src/content/en/topics/controls/igcombo/configuring/grouping.mdx new file mode 100644 index 0000000000..4efc2de5d4 --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igcombo/configuring/grouping.mdx @@ -0,0 +1,75 @@ +--- +title: "Configuring Grouping (igCombo)" +slug: igCombo-grouping +--- +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# Configuring Grouping (igCombo) + +Grouping functionality will allow you to unite items into groups by certain criteria or common category. + +##Topic overview +### Purpose +This topic explains how to use grouping functionality, possible configuration and briefly explanation of the main `Grouping` widget properties. +### In this topic + +This topic contains the following sections: + +- [Introduction](#introduction) +- [Grouping overview](#groupingOverview) +- [Related content](#relatedContent) + +## Introduction +The `igCombo` supports Grouping functionality that will enable the user to group together related items. This feature is included in version 15.2. The picture below demonstrate `igCombo` in which the items are grouped by car `type` in ascending order. +> **Note:** By default the sort order is set to be `ascending` + +![](images/igCombo_Grouping.png) + +##Grouping overview +In order to enable combo `grouping` property should be set. This property represents the `name of column` by which the records to be grouped. When combo is initialized all items will be grouped by that key in ascending order. `Sort direction` can be changed by using property as swhown in the code snippet below: +**In JavaScript:** + +```js + +$(".selector").igCombo({ + dataSource: data, + textKey: 'name', + valueKey: 'id', + closeDropDownOnBlur: false, + grouping: { + key: 'carType', + dir: 'desc' + } +}); +``` + +**In ASPX:** + +```csharp +@(Html.Infragistics().ComboFor(item => item.ID) + .Width("400px") + .DataSourceUrl(Url.Action("ComboDataLocation")) + .ValueKey("ID") + .TextKey("CarName") + .CompactData(false) + .Grouping(gr => + { + gr.Key("Country"); + gr.Dir(ComboGroupingDirection.Desc); + }) + .DataBind() + .Render() +) +``` + +> **Note:** When Load On Demand and Grouping are used it is recommended all datasource items to be sorted by the key which is used for grouping. + +## Related content +###API help + +- + +### Samples + +The following samples provide additional information related to this topic. +- [Grouping with header and footer templates]({environment:SamplesUrl}/combo/grouping):This sample demonstrates how grouping can be used with Header and Footer templates efficiently. diff --git a/docs/jquery/src/content/en/topics/controls/igcombo/configuring/images/Configure_Selection_in_the_igCombo__01.png b/docs/jquery/src/content/en/topics/controls/igcombo/configuring/images/Configure_Selection_in_the_igCombo__01.png new file mode 100644 index 0000000000..cc6e0f107a Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igcombo/configuring/images/Configure_Selection_in_the_igCombo__01.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igcombo/configuring/images/Configure_Selection_in_the_igCombo__02.png b/docs/jquery/src/content/en/topics/controls/igcombo/configuring/images/Configure_Selection_in_the_igCombo__02.png new file mode 100644 index 0000000000..aa90250f89 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igcombo/configuring/images/Configure_Selection_in_the_igCombo__02.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igcombo/configuring/images/igCombo_AutoSuggest_01.png b/docs/jquery/src/content/en/topics/controls/igcombo/configuring/images/igCombo_AutoSuggest_01.png new file mode 100644 index 0000000000..3c62fe4129 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igcombo/configuring/images/igCombo_AutoSuggest_01.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igcombo/configuring/images/igCombo_AutoSuggest_02.png b/docs/jquery/src/content/en/topics/controls/igcombo/configuring/images/igCombo_AutoSuggest_02.png new file mode 100644 index 0000000000..3c62fe4129 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igcombo/configuring/images/igCombo_AutoSuggest_02.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igcombo/configuring/images/igCombo_AutoSuggest_03.png b/docs/jquery/src/content/en/topics/controls/igcombo/configuring/images/igCombo_AutoSuggest_03.png new file mode 100644 index 0000000000..1b3b4f4623 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igcombo/configuring/images/igCombo_AutoSuggest_03.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igcombo/configuring/images/igCombo_Grouping.png b/docs/jquery/src/content/en/topics/controls/igcombo/configuring/images/igCombo_Grouping.png new file mode 100644 index 0000000000..09bb047555 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igcombo/configuring/images/igCombo_Grouping.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igcombo/configuring/images/igCombo_Optimize_the_igCombos_Performance_01.png b/docs/jquery/src/content/en/topics/controls/igcombo/configuring/images/igCombo_Optimize_the_igCombos_Performance_01.png new file mode 100644 index 0000000000..106cfe6358 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igcombo/configuring/images/igCombo_Optimize_the_igCombos_Performance_01.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igcombo/configuring/images/igCombo_TypeScript.PNG b/docs/jquery/src/content/en/topics/controls/igcombo/configuring/images/igCombo_TypeScript.PNG new file mode 100644 index 0000000000..2c71869621 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igcombo/configuring/images/igCombo_TypeScript.PNG differ diff --git a/docs/jquery/src/content/en/topics/controls/igcombo/configuring/images/igCombo_init_MVC_example.png b/docs/jquery/src/content/en/topics/controls/igcombo/configuring/images/igCombo_init_MVC_example.png new file mode 100644 index 0000000000..61c0656fed Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igcombo/configuring/images/igCombo_init_MVC_example.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igcombo/configuring/images/igCombo_updated_MVC_example.png b/docs/jquery/src/content/en/topics/controls/igcombo/configuring/images/igCombo_updated_MVC_example.png new file mode 100644 index 0000000000..881762d56f Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igcombo/configuring/images/igCombo_updated_MVC_example.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igcombo/configuring/knockoutjs-support.mdx b/docs/jquery/src/content/en/topics/controls/igcombo/configuring/knockoutjs-support.mdx new file mode 100644 index 0000000000..0177b9a40b --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igcombo/configuring/knockoutjs-support.mdx @@ -0,0 +1,232 @@ +--- +title: "Configuring Knockout Support (igCombo)" +slug: igcombo-knockoutjs-support +--- +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# Configuring Knockout Support (igCombo) + + +## Topic Overview + + +### Purpose + +This topic explains how to configure the `igCombo`™ control to bind it to View-Model objects managed by the [Knockout library](http://knockoutjs.com/). + +### Required background + +The following table lists the topics and external resources required as a prerequisite to understanding this topic. + + +**Topics** + + +- [igCombo Overview](/igcombo-overview.mdx) : This topic provides conceptual information for the `igCombo` control including information regarding: features, binding to data sources, requirements, and templates. + +- [Adding igCombo](/igcombo-getting-started.mdx): This help topic demonstrates how to set up a basic `igCombo` control in different scenarios including binding to JSON data on the client and to a collection of business object on the server. + + +**External Resources** + +- [Knockout Interactive Tutorials](http://learn.knockoutjs.com/) + + +### In this topic + +This topic contains the following sections: + +- [Introduction](#introduction) +- [Configuring igCombo with Knockout Support](#igCombo-knockout-support) +- [Code Examples](#code-examples) +- [Code Example: Basic Combo Box Bound to a Knockout View-Model Object](#basic-combo-box-bound) +- [Related Content](#related-content) + - [Topics](#topics) + - [Samples](#samples) + - [Resources](#resources) + + +## Introduction + + +### Knockout support summary + +The support for the Knockout library in the `igCombo` control is intended to provide easy means for developers to use the Knockout library and its declarative syntax to instantiate and configure combo controls. + +The Knockout support is implemented as a Knockout extension which is invoked initially when Knockout bindings are applied to a page and during the page life (when external updates to the View-Model take place). + +To instantiate an `igCombo` bound to Knockout-managed data structure, you need to specify `igCombo` configuration options into the data-bind attribute of a div, input, span or select element. The combo is rendered on the place of the element just like if you create the control using JavaScript. For the most important `igCombo` configuration options in this regard, refer to [Configuring with Knockout](#igCombo-knockout-support) section below. In the data-bind attribute, you can specify also any of the other `igCombo` options that have relevance to your business case. + +Using the Knockout extension for the `igCombo` control ensures that anytime the `igCombo` selected items is changed, by selecting a new value from the drop-down, the extension will notify the observable and it will update all its corresponding views. It also ensures that if some external view is updated, the observable in the extension will update the `igCombo` selected items. (This is the expected behavior from any other knockout extension.) + +In addition to that, the Knockout extension for `igCombo` can be configured in a way that the `igCombo` drop-down reacts to a change in the data source to it which it is bound. This means that, if an item is added, deleted or edited in the data source and the data source is configured as observable, the extension will be able to track additions and removals of elements and update the drop-down list accordingly. Please refer to [Code Example: Basic Combo Box Bound to a Knockout View-Model Object](#basic-combo-box-bound) for detailed information. + +>**Note:** In difference with the Knockout support for the `igCombo`, versions 14.2 and earlier, the extension has introduced some differences in the options and the way it is bound to the View-Model. Those changes are introduced, to meet the needs of the new `igCombo` control, released with version 15.1 Please refer to the [Configuring with Knockout](#igCombo-knockout-support) section below, as well as to the [Migrating to the New Combo](/igcombo-migrating-to-the-new-combo.mdx) topic. + +##Configuring igCombo with Knockout Support + + +### Configuring igCombo with knockout support summary chart + +The following table maps the `igCombo` control configuration tasks related to Knockout usage scenarios to the respective properties that manage those tasks. Code examples of some practical implementations are available after the table. + + +| Configuration task | Required? | Details | Properties | +| --- | --- | --- | --- | +| Binding the View-Model object’s field to the igCombo selected items | Required | Array of the selected items in the igCombo. Configuring the selectedItems property enables the data exchange between the combo selected items and the View-Model. | `selectedItems`, Possible values:array of primitivesarray of objects, **Note:** The value property is not available for the igCombo, but only for its Knockout extension. | +| Configuring data source for the igCombo | Required | Sets a valid data source accepted by $.ig.DataSource, or an instance of an $.ig.DataSource itself. | | +| Configuring the data source field that holds the items' display text | Required | Sets the name of the data source field which contains the items' display text. The text for each item is displayed in the dropdown list and in the combo box when an item is selected. The same text is stored in the text option, too. | | +| Configuring the data source field that holds the items' values | Required | Sets the name of data source field (ID field) which contains the items' values. The igCombo items' values are mapped against this field. | | +| Defining the type of the selected items | Optional | Setting the type of the selected items in the array, either to be "primitive" or "object". The extension itself automatically defines the type of the selected items if there are any and that's why this option is not required. The `selectedItemType` option can be used in scenarios where the extension is not able to define the type automatically because no item is selected. | `selectedItemType`, Possible values:"primitive""object", **Note:** The value property is not available for the igCombo, but only for its Knockout extension. | + + +## Code Examples + + +### Code examples summary + +The following table lists the code examples included in this topic. + + +- [Basic Combo Box Bound to a Knockout View-Model Object](#basic-combo-box-bound) :This example demonstrates the basic configuration of an `igCombo` control bound to a Knockout observable View-Model object. + +## Code Example: Basic Combo Box Bound to a Knockout View-Model Object + + +This example demonstrates the basic configuration of an `igCombo` control bound to a Knockout observable View-Model object. Using the declarative syntax of Knockout, the combo is instantiated from the data-bind attribute of a span element and bound to the View-Model observable properties. + + +### Creating the View-Model object + +The following code demonstrates a View-Model object that declares observable properties managed by Knockout. + +**In JavaScript:** + +```js +var model = [ + { name: "Adam Sandler", id: "1" }, + { name: "Brooke Shields", id: "2" }, + { name: "Charles Chaplin", id: "3" }, + . . . +]; +var viewModel = new ViewModel(model); +function ViewModel(actorsList) { + var self = this; + this.actorsList = actorsList; + // The array of actor objects to be bound to the drop down list + this.actors = ko.observableArray(self.actorsList); + // Select the first actor, using his id. + this.selectedActor = ko.observableArray([self.actors()[0].id]); + // Alternative way to select an actor, using the whole object, containing value and text + // this.selectedActor = ko.observableArray([self.actors()[0]]); + this.isVisible = true; +} +``` +>**Note:** You can select `igCombo` items by passing either an array of primitives, containing the selected values, or an array of objects, containing the value and the text of the items. Using primitive values is recommended, in cases when View-Model is attached in addition to a HTML select element, and in the same time is attached to an `igCombo` control. This is because the KnockoutJS library operates with an array of primitives, when HTML select is attached to the View-Model. + +#### Apply the declared Knockout bindings to the page + +The following code snippet demonstrates how to apply the declared Knockout bindings to the page. Note that the `ko.applyBindings()` call is made within the ready callback of the [Using Infragistics Loader](///general-and-getting-started/using-infragistics-loader.mdx). This is necessary because the combo extension for Knockout needs to be loaded into the page before the bindings are applied. + +**In JavaScript:** + +```js +$.ig.loader({ + scriptPath: "http://localhost/ig_ui/js/", + cssPath: "http://localhost/ig_ui/css/", + resources: "igCombo,extensions/infragistics.ui.combo.knockout-extensions.js", + ready: function () { + ko.applyBindings(viewModel); + } +}); +``` + +#### Declare the binding properties for igCombo in the View + +##### igCombo handler +The following code demonstrates how to declare the binding properties for `igCombo` in your View. The most important part is the declaration of the instantiation properties in the data-bind attribute of the corresponding span element. + +**In HTML:** + +```html + +``` + +Notice that both the `selectedItems` and `dataSource` properties of the View-Model object are observable. For the selectedItems property, this means that the View-Model object will be able to update the `igCombo` selected items dynamically and vice-versa: `igCombo` will be able to update the View-Model object. If you configure the `dataSource` to be an observable array, `igCombo` will be able to track additions and removals of elements and update the drop-down list accordingly. It is possible to declare any of these properties as non-observable, which means that you will lose the corresponding functionalities. If no View-Model object properties are defined as observables, you will not have Knockout support for the `igCombo` and it does not make sense to use the declarative syntax and the Knockout binding extension. + +##### igComboVisible handler + +The following code demonstrates how to declare the `igComboVisible` binding, which has the same functionality as the Knockout visible binding. + +**In JavaScript:** + +```js +function viewModel() { + this.isVisible = ko.observable(true); +} +``` + +**In HTML:** + +```html + +``` + +The `igCombo` control is displayed in a HTML element with inline-block property, and because Knockout visible binding sets the display of the element to block, this breaks the `igCombo` appearance. Use the custom `igComboVisible` binding to display `igCombo` properly and in the same time to use the Knockout visible binding functionality. + +##### igComboDisable handler + +The following code demonstrates how to declare the `igComboDisable` binding, which has the same functionality as the Knockout [`disabled`](http://knockoutjs.com/documentation/disable-binding.html) binding. + +**In JavaScript:** + +```js +function viewModel() { + this.isDisabled = ko.observable(false); +} +``` + +**In HTML:** + +```html + +``` + +Using the Knockout [`disabled`](http://knockoutjs.com/documentation/disable-binding.html) binding handler is not enough, because the igCombo has a special logic that handles enabling/disabling the control. + +## Related Content + + +### Topics + +The following topics provide additional information related to this topic. + +- [Knockout Support (Editors)](../../igEditors/Config/02_Configuring Knockout Support (Editors).mdx): This topic explains how to configure {environment:ProductName} editor controls to bind to View-Model objects managed by the [Knockout library](http://knockoutjs.com/). + +- [Migrating to the New Combo](../02_igCombo_Migrating_To_The_New_Combo.mdx#ko_changes): This topic aims to help with migration from old combo to the new one. The document includes the changes in the Knockout integration of the igCombo. + + +### Samples + +The following samples provide additional information related to this topic. + +- The sample below demonstrates how to bind igCombo to data managed by KO data bindings. Binding an array to combo's drop-down and model property to the combo selected items is implemented. + +
+   [{environment:SamplesEmbedUrl}/combo/bind-combo-with-ko]({environment:SamplesEmbedUrl}/combo/bind-combo-with-ko) +
+ +>**Note:** The Knockout extensions do not work with the {environment:ProductNameMVC}. + +### Resources + +The following material (available outside the Infragistics family of content) provides additional information related to this topic. + +- [Knockout](http://knockoutjs.com/): This is the home page of the Knockout library. The library contains complete documentation and samples. + + diff --git a/docs/jquery/src/content/en/topics/controls/igcombo/configuring/load-on-demand.mdx b/docs/jquery/src/content/en/topics/controls/igcombo/configuring/load-on-demand.mdx new file mode 100644 index 0000000000..a243c56efe --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igcombo/configuring/load-on-demand.mdx @@ -0,0 +1,189 @@ +--- +title: "Configuring Load-on-Demand (igCombo)" +slug: igcombo-load-on-demand +--- +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# Configuring Load-on-Demand (igCombo) + + +##Topic Overview + + +### Purpose + +This topic introduces the Load on Demand feature of the `igCombo`™ control and explains, with code examples how to configure and use it. + +### Required background + + +**Concepts** + +- Load-on-Demand + +**Topics** + + +- [igCombo Overview](/igcombo-overview.mdx): This topic provides conceptual information for the `igCombo` control including information regarding features, binding to data sources, requirements, and templates. + +- [Adding igCombo](/igcombo-getting-started.mdx): This help topic demonstrates how to setup a basic `igCombo` control and bind it to JSON data on the client and a collection of business object on the server. Both jQuery or ASP.NET MVC environments are covered. + +- [Binding igCombo to Data](/binding/igcombo-binding-to-data.mdx): This topic discusses the ways to bind the `igCombo` control to data and provides further details related to data binding. + + +#### In this topic + +This topic contains the following sections: + +- [Introduction](#introduction) +- [Enabling Load-on-Demand](#enabling-loadOnDemand) +- [Configuring Load-on-Demand](#configuring-LoadOnDemand) +- [Code Example: Load-on-Demand, Paging and Header and Footer Templates](#code-example-load) + - [Description](#description) + - [Footer template variables](#footer-template) + - [Code](#code) +- [Related Content](#related-content) + - [Topics](#topics) + - [Samples](#samples) + + +##Introduction + + +### Load-on-Demand feature summary + +The `igCombo` control supports Load-on-Demand feature. Enabling Load-on-Demand significantly reduces the bandwidth and processing overhead on both the server and the client. + +If Load-on-Demand is enabled, the user should first be able to see a scrollbar in the drop-down container, and the first page of list items. If the user scrolls to the end of the list, the next page of items are fetched and appended at the bottom of the list through asynchronous callbacks. + + +##Enabling Load-on-Demand + + +### Enabling Load-on-Demand summary + +By default, Load-on-Demand is disabled. To enable it, the `loadOnDemandSettings`.enabled option must be set to true: + +**In JavaScript:** + +```js +loadOnDemandSettings: { enabled: true } +``` + +or + +**In ASPX:** + +```csharp +Html.Infragistics().Combo().LoadOnDemandSettings(load => load.Enabled(true)) +``` + +While data are being loaded from the data source the drop-down list appears a loading indicator. After data loading and rendering on the page is finished the loading indicator is removed. + + +##Configuring Load-on-Demand + + +### Configuring Load-on-Demand summary + +The following table lists the configurable aspects of the `igCombo` control regarding Load-on-Demand and the related drop-down list paging functionality. + + +| Configurable aspects | Details | Properties | +| --- | --- | --- | +| Drop-down list paging | Sets the page size of the drop-down list | | +| Drop-down list header | Sets the heading label of the drop-down list through a header template | | +| Drop-down list footer | Sets the heading label of the drop-down list through a header template | | + + +##Code Example: Load-on-Demand, Paging and Header and Footer Templates + + +### Description + +This example demonstrates how to configure the Load-on-Demand feature for a remote OData data source with a specific page size. + +The code instantiates an `igCombo` control over an already created HTML input tag with id equal to “combo”. On initialization the code sets page size of 25 items for the drop-down list (pageSize: 25). The `responseDataKey`, `responseTotalRecCountKey` and `dataSource` options are assigned values that direct the combo to load the drop-down list by making a query to the specified URL and use d.results.Results and d.results.Count members of the returned JSON object. + +The `headerTemplate` option is assigned a string that represents an HTML code and is rendered at the top of the drop-down list. This is usually single tag possibly formatted with a `CSS` class as in the example (class=”boxed”) but may be a more complex HTML code. + +The `footerTemplate` option is assigned a string that represents an HTML code and allows some predefined variables to be substituted at run-time, i.e. it acts like a template. The string assigned to that option is processed to substitute variables and rendered at the bottom of the drop-down list. + +### Footer template variables + +The following table lists the available footer template variables. + +| Description | Short Name | Alternative ASP.NET MVC Helper Syntax | +| --- | --- | --- | +| Number of records in igCombo (view of dataSource) | {0} | ComboModel.RECORDS_VIEW | +| Number of records in dataSource | {1} | ComboModel.RECORDS_DATA | +| Number of (filtered) records on server | {2} | ComboModel.RECORDS_SERVER | +| Number of all records on server | {3} | ComboModel.RECORDS_SERVER_TOTAL | + + +### Code + +**In JavaScript:** + +```js +$("#combo").igCombo({ + loadOnDemandSettings: { + enabled: true, + pageSize: 25 + }, + responseDataKey: "d.results.Results", + responseTotalRecCountKey : "d.results.Count", + dataSource: 'http://igniteui.com/api/products?&callback=?', + textKey: "ProductName", + valueKey: "ID", + headerTemplate: '
Available Products
', + footerTemplate: '
Product Count: {0} of {3}
' +}); +``` + +**In ASPX:** + +```csharp +<%= + Html.Infragistics().Combo() + .ID("combo") + .DataSource("http://igniteui.com/api/products?&callback=?") + .ResponseDataKey("d.results.Results") + .ResponseTotalRecCountKey("d.results.Count") + .TextKey("ProductName") + .ValueKey("ID") + .LoadOnDemandSettings(load => load.Enabled(true).PageSize(25)) + .HeaderTemplate("
Available Movies
") + .FooterTemplate("
Movie Count: {0} of {3}
") + .Render() +%> +``` + + +##Related Content + + +### Topics + +The following topics provide additional information related to this topic. + + +- [Configuring igCombo](/igcombo-configuring.mdx):This topic discusses the different ways to data bind the `igCombo` control as well as other details related to data binding. + + +### Samples + +The following samples provide additional information related to this topic. + +- [Load-on-Demand]({environment:SamplesUrl}/combo/load-on-demand):This sample demonstrates how to use the combo box load-on-demand and paging functionality using a remote OData data source. + +- [Virtualization]({environment:SamplesUrl}/combo/virtualization):This sample demonstrates how enabling UI virtualization allows the `igCombo` control to quickly and efficiently render large amounts of data in the combo. + +- [Filtering]({environment:SamplesUrl}/combo/filtering):This sample demonstrates how the dropdown list of the `igCombo` control can be filtered based off of the input value. The auto-suggest and auto-complete functionalities are also supported. + + + + + + + diff --git a/docs/jquery/src/content/en/topics/controls/igcombo/configuring/optimize-performance.mdx b/docs/jquery/src/content/en/topics/controls/igcombo/configuring/optimize-performance.mdx new file mode 100644 index 0000000000..9cfaf5fea8 --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igcombo/configuring/optimize-performance.mdx @@ -0,0 +1,90 @@ +--- +title: "Optimizing Performance (igCombo)" +slug: igcombo-optimize-performance +--- +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# Optimizing Performance (igCombo) + + +##Topic Overview + + +###Purpose + + +This topic demonstrates how to enable item virtualization for maximum performance while scrolling the `igCombo`™ control. + +###Required background + + +You need to first read the [igCombo Overview](/igcombo-overview.mdx) and [Adding igCombo](/igcombo-getting-started.mdx) topic. + +##Infragistics Combo Configuration Overview + + +###Control configuration + + +Enable the `virtualization` option to make the igCombo’s dropdown scroll quickly even with large amounts of data. + + +###Virtualization details + + +The `virtualization` option enables the `igCombo` control to re-use HTML elements for each list item. The data is stored locally in a compact JSON format. When scrolling the igCombo’s dropdown, the HTML elements are re-used but different data is bound to the dropdown as the scrollbar’s position changes. + +![](images/igCombo_Optimize_the_igCombos_Performance_01.png) + +###Virtualization property settings + + +The table below maps the desired configurations to property settings. The properties are accessed through the `igCombo` control’s options. + + +| In order to… | Use this property: | And set it to… | +| --- | --- | --- | +| Enable virtualization | virtualization | true | + + +###Example: enabling virtualization + + +**In HTML:** + +```html +$("#combo").igCombo({ + virtualization: true, +}); +``` + +**In ASPX:** + +```csharp +<%= Html. + Infragistics(). + Combo(). + ID("combo"). + Virtualization(true). + Render() %> +``` + +###Virtualization property reference + + +For detailed information about these properties, refer to their listing in the property reference section: + +- + +##Related Topics + + +Following are some other topics you may find useful. + +- [Configuring igCombo](/igcombo-configuring.mdx) + + + + + + diff --git a/docs/jquery/src/content/en/topics/controls/igcombo/configuring/typescript-support.mdx b/docs/jquery/src/content/en/topics/controls/igcombo/configuring/typescript-support.mdx new file mode 100644 index 0000000000..f940c198ac --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igcombo/configuring/typescript-support.mdx @@ -0,0 +1,141 @@ +--- +title: "TypeScript Support (igCombo)" +slug: igcombo-typescript-support +--- + +# TypeScript Support (igCombo) + +## Topic Overview +This topic shows how to configure `igCombo` with TypeScript data source. We can define a TypeScript class, create a data source with instances from our class and bind the data source to the `igCombo`. + +### In this topic + +This topic contains the following sections: + +- [Preview](#Preview) +- [Requirements](#Requirements) +- [Overview](#Overview) +- [Steps](#Steps) + - [Create the HTML](#create_html_markup) + - [Create a TypeScript Class](#create_typescript_class) + - [Create a Data Source](#create_data_source) + - [Create an igCombo with TypeScript Data Source](#create_combos) +- [Related Content](#Related_Content) + +### Preview +The following screenshot is a preview of the final result. + +![](images/igCombo_TypeScript.png) + +### Requirements +In order to run this sample, you need to have: +- The required {environment:ProductName} JavaScript and CSS files +- The required {environment:ProductName} TypeScript definitions + +### Overview +This topic takes you step-by-step toward creating a TypeScript class, data source and `igCombo`. + +### Steps + +​Create the HTML - we are going to have three combos demonstrating keyboard navigation, multiple selection and filtering respectively. + +**In HTML:** +```html +
+

+ Keyboard navigation +

+
+
+
+

+ Multiple Selection with Checkboxes +

+
+
+
+

+ Filtering Condition of Contains +

+
+
+``` +​Create a TypeScript Class - the class will store information about a mountain top with several characteristics - `id`, `mountainName`, `country` and `height`. + +**In TypeScript:** +```typescript +/// +/// +/// +class MountainTop { + id: number; + mountainName: string; + country: string; + height: number; + constructor(inId: number, inMountanName: string, inCountry: string, inHeight: number) { + this.id = inId; + this.mountainName = inMountanName; + this.country = inCountry; + this.height = inHeight; + } +} +``` + +​Create a Data Source - we are going to create 10 instances of our class `MountainTop` and add them to an array which will be our data source. + +**In TypeScript:** +```typescript +var mountainTopsData: MountainTop[] = []; +mountainTopsData.push(new MountainTop(1, "Everest", "Nepal/Tibet", 29.035)); +mountainTopsData.push(new MountainTop(2, "K2 (Mount Godwin Austen)", "Pakistan/China", 29.250)); +mountainTopsData.push(new MountainTop(3, "Kangchenjunga", "India/Nepal", 28.169)); +mountainTopsData.push(new MountainTop(4, "Lhotse", "Nepal/Tibet", 27.940)); +mountainTopsData.push(new MountainTop(5, "Makalu", "Nepal/Tibet", 27.766)); +mountainTopsData.push(new MountainTop(6, "Cho Oyu", "Nepal/Tibet", 26.906)); +mountainTopsData.push(new MountainTop(7, "Dhaulagiri", "Nepal", 26.795)); +mountainTopsData.push(new MountainTop(8, "Manaslu", "Nepal", 26.781)); +mountainTopsData.push(new MountainTop(9, "Nanga Parbat", "Pakistan", 26.660)); +mountainTopsData.push(new MountainTop(10, "Annapurna", "Nepal", 26.545)); +``` + +​Create an igCombo with TypeScript Data Source - we define our three combos and assign the data source to them. + +**In TypeScript:** +```typescript +$(function () { + $("#keyNavigationCombo").igCombo({ + width: "270px", + textKey: "mountainName", + valueKey: "id", + dataSource: mountainTopsData, + multiSelection: { + enabled: true + }, + }); + + $("#checkboxSelectCombo").igCombo({ + width: "270px", + dataSource: mountainTopsData, + textKey: "mountainName", + valueKey: "id", + multiSelection: { + enabled: true, + showCheckboxes: true + } + }); + + $("#filterContainsCombo").igCombo({ + width: "270px", + textKey: "mountainName", + valueKey: "mountainName", + dataSource: mountainTopsData, + filteringType: "local", + filteringCondition: "contains", + highlightMatchesMode: "contains" + }); +}); +``` + +### Related Content +The following topic provides additional information related to this topic: +- [Using {environment:ProductName} with TypeScript](Using-Ignite-UI-with-TypeScript.html) - This topic contains an overview for using the {environment:ProductName} type definitions for TypeScript. \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/controls/igcombo/getting-started.mdx b/docs/jquery/src/content/en/topics/controls/igcombo/getting-started.mdx new file mode 100644 index 0000000000..6ea1f2acf8 --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igcombo/getting-started.mdx @@ -0,0 +1,321 @@ +--- +title: "Adding igCombo" +slug: igcombo-getting-started +--- + +# Adding igCombo + + +##Topic Overview + + +###Purpose + + +The `igCombo`™ can be configured to run using jQuery or ASP.NET MVC. This help topic demonstrates how to setup a basic `igCombo` control in each of these environments binding to JSON data on the client and a collection of business object on the server. + +###Required background + + +You need to first read the following topics: + +- [Using JavaScript Resources in {environment:ProductName}](//general-and-getting-started/deployment-guide-javascript-resources.mdx) +- [Styling and Theming in {environment:ProductName}](//general-and-getting-started/styling-and-theming/deployment-guide-styling-and-theming.mdx) + +##Create a basic igCombo implementation + + +###Introduction + + +The following steps demonstrate how to configure basic options and bind to data using both jQuery and ASP.NET MVC. + +###Preview + + +Following is a preview of the final result. + +![](images/igCombo_Auto_Complete.png) + +###Requirements + +To complete the procedure, you need the following: + +- A website and web page on which to add this example +- The required JavaScript resources and jQuery themes in your website +- References to the required JavaScript files and CSS files on your web page +- (ASP.NET MVC) A reference to the `Infragistics.Web.Mvc.dll` assembly + +###Overview + + +Following is a conceptual overview of the process: + +1. Instantiating the `igCombo` +2. Binding to data +3. (Optional) Configuring the width +4. (Optional) Enabling auto-complete + +###Steps + +1. **Instantiate the `igCombo`.** + + a. **Define a target element.** + + On your web page, define a target HTML element which serves as the base object for the `igCombo` control and set its ID. This is an optional step for ASP.NET MVC + + **In HTML:** + +```html +
+``` + + Instantiate the `igCombo`. In jQuery, you can use the document ready JavaScript event to instantiate the combo. In ASP.NET MVC, use the {environment:ProductNameMVC} to bind to an `IQueryable` datasource. + + **In HTML:** + +```html + +``` + + **In ASPX:** + +```csharp + <%= Html. + Infragistics(). + Combo(). + ID("comboTarget"). + Render() + %> +``` + +2. **Bind to data.** + + **a. Define the data.** + + In jQuery, this example binds to a simple JSON array. This data could be passed as part of the page request or could be returned from a web service. In ASP.NET MVC, this example binds to a collection of Color objects defined in the controller class on the server and returned as the model with the View. + + **In HTML:** + +```html + var colors = [{ "Name": "Black" },{ "Name": "Blue" },{ "Name": "Brown" },{ "Name": "Red" },{ "Name": "White" },{ "Name": "Yellow" }]; +``` + + **In C#:** + +```csharp + public class DefaultController : Controller + { + public ActionResult Index() + { + List colors = new List(); + colors.Add(Color.Black); + colors.Add(Color.Blue); + colors.Add(Color.Brown); + colors.Add(Color.Red); + colors.Add(Color.White); + colors.Add(Color.Yellow); + + return View("default", colors.AsQueryable()); + } + } +``` + + **b. Set the data source.** + + Use the dataSource option to supply the data to the combo. In ASP.NET MVC, Use the DataSource method to bind to the data passed in as part of the Model. + + **In HTML:** + +```html + dataSource: colors +``` + + **In ASPX:** + +```csharp + DataSource(this.Model as IQueryable) +``` + + **c. Configure the text and value fields.** + + Set the `textKey` and `valueKey` options of the `igCombo`. In this simple example, the `textKey` and `valueKey` are both set to the same object value of ‘Name’. However, the `textKey` and `valueKey` could be set as two different fields. The `valueKey` has to be unique value in order to select items properly. For instance, the `valueKey` could point to an ID field for each color object. The `textKey` determines which field is used to display the text which represents the bound items in the dropdown list. + + >**Note:** The “key” properties designate which properties on the data source of the combo are used as the selected value and selected text of the combo. + + **In HTML:** + +```html + textKey: "Name", + valueKey: "Name", +``` + + **In ASPX:** + +```csharp + TextKey("Name"). + ValueKey("Name"). +``` + + **d. (ASP.NET MVC) Call Render().** + + When instantiating the {environment:ProductNameMVC} `Combo`, call the Render method last after all other options have been configured. This is the method that renders the HTML and JavaScript necessary to instantiate the `igCombo` on the client + + **In ASPX:** + +```csharp + Render() +``` + +3. **(Optional) Configure the width.** + + The width option accepts a string value that configures the width attribute of the igCombo’s base DOM element. The value can be set to any HTML size unit supported by the target web browser. + + **In HTML:** + +```html + width: "200px" +``` + + **In ASPX:** + +```csharp + Width("200px") +``` + +4. **(Optional) Enabling auto-complete.** + + Use the autoComplete option to enable auto-complete in the `igCombo` + + **In HTML:** + +```html + autoComplete: true +``` + + **In ASPX:** + +```csharp + AutoComplete(true) +``` + +##Code Examples + + +###Examples overview + + +The following table lists the code examples provided below. + + +| | | +| --- | --- | +| Example | Description | +| Basic jQuery Implementation | Shows how to bind to data and set basic options in jQuery | +| Basic ASP.NET MVC Implementation | Shows how to bind to data and set basic options using the {environment:ProductNameMVC} | + + +###Code Example: Basic jQuery implementation + +The code below demonstrates how to create and configure the `igCombo` control using jQuery with the following parameters: + + +| Data Source | JSON data | +| --- | --- | +| Text Key | Name | +| Value Key | Name | +| Width | 200px | +| AutoComplete | true | + + +**In HTML:** + + +```html + +``` + +###Code Example: Basic ASP.NET MVC implementation + + +The code below demonstrates how to create and configure the {environment:ProductNameMVC} `Combo` control with the following parameters: + + +| Property | Value | +| --- | --- | +| Data Source | IQueryable | +| Script files | Name | +| Value Key | Name | +| Width | 300px | +| AutoComplete | true | + + +**In ASPX:** + +```csharp +<%= Html. + Infragistics(). + Combo(). + ID("comboTarget"). + DataSource(this.Model as IQueryable). + ValueKey("Name"). + TextKey("Name"). + Width("300px"). + AutoComplete(true). + Render() +%> +``` + +**In C#:** + +```csharp +public class DefaultController : Controller{ + public ActionResult Index() { + List colors = new List(); + colors.Add(Color.Black); + colors.Add(Color.Blue); + colors.Add(Color.Brown); + colors.Add(Color.Red); + colors.Add(Color.White); + colors.Add(Color.Yellow); + return View("default", colors.AsQueryable()); + }} +``` + +##Related Topics + + +Following are some other topics you may find useful. + +- [Using JavaScript Resources in {environment:ProductName}](//general-and-getting-started/deployment-guide-javascript-resources.mdx) +- [Styling and Theming in {environment:ProductName}](//general-and-getting-started/styling-and-theming/deployment-guide-styling-and-theming.mdx) + + + + + + diff --git a/docs/jquery/src/content/en/topics/controls/igcombo/igcombo.mdx b/docs/jquery/src/content/en/topics/controls/igcombo/igcombo.mdx new file mode 100644 index 0000000000..67cf83f166 --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igcombo/igcombo.mdx @@ -0,0 +1,39 @@ +--- +title: "igCombo" +slug: igcombo-igcombo +--- + +# igCombo + + +##Introduction + + +The `igCombo` is a combo box control built in jQuery that offers auto-complete, auto-suggest, and rich editing capabilities. + +##Topics + + +The information you need about the Infragistics Combo is covered in the following topics: + +- [igCombo Overview](/igcombo-overview.mdx) + +- [Adding igCombo](/igcombo-getting-started.mdx) + +- [Binding igCombo to Data](/binding/igcombo-binding-to-data.mdx) + +- [Configuring igCombo](/configuring/igcombo-configuring.mdx) + +- [Styling igCombo](/igcombo-using-themes.mdx) + +- [Accessibility Compliance (igCombo)](/igcombo-accessibility-compliance.mdx) + +- [Known Issues and Limitations (igCombo)](/igcombo-known-limitations.mdx) + +- [jQuery and MVC API Links (igCombo)](/igcombo-jquery-and-asp-net-mvc-helper-api-links.mdx) + + + + + + diff --git a/docs/jquery/src/content/en/topics/controls/igcombo/images/Getting_Started_with_igCombo__01.png b/docs/jquery/src/content/en/topics/controls/igcombo/images/Getting_Started_with_igCombo__01.png new file mode 100644 index 0000000000..4c05c886c6 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igcombo/images/Getting_Started_with_igCombo__01.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igcombo/images/igCombo_Auto_Complete.png b/docs/jquery/src/content/en/topics/controls/igcombo/images/igCombo_Auto_Complete.png new file mode 100644 index 0000000000..386fe1cec8 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igcombo/images/igCombo_Auto_Complete.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igcombo/images/igCombo_Auto_Suggest.png.png b/docs/jquery/src/content/en/topics/controls/igcombo/images/igCombo_Auto_Suggest.png.png new file mode 100644 index 0000000000..beebc25863 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igcombo/images/igCombo_Auto_Suggest.png.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igcombo/images/igCombo_multiple_selection.png b/docs/jquery/src/content/en/topics/controls/igcombo/images/igCombo_multiple_selection.png new file mode 100644 index 0000000000..5aceaf87b2 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igcombo/images/igCombo_multiple_selection.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igcombo/jquery-and-asp-net-mvc-helper-api-links.mdx b/docs/jquery/src/content/en/topics/controls/igcombo/jquery-and-asp-net-mvc-helper-api-links.mdx new file mode 100644 index 0000000000..7f7d8abfb5 --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igcombo/jquery-and-asp-net-mvc-helper-api-links.mdx @@ -0,0 +1,19 @@ +--- +title: "jQuery and MVC API Links (igCombo)" +slug: igcombo-jquery-and-asp-net-mvc-helper-api-links +--- +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# jQuery and MVC API Links (igCombo) + + +The `igCombo` is built as a jQuery UI widget with an accompanying ASP.NET MVC Helper. For more information about each API, see the following API documentation: + +- +- [igCombo MVC API](Infragistics.Web.Mvc~Infragistics.Web.Mvc.ComboModel.html) + + + + + + diff --git a/docs/jquery/src/content/en/topics/controls/igcombo/keyboard-navigation.mdx b/docs/jquery/src/content/en/topics/controls/igcombo/keyboard-navigation.mdx new file mode 100644 index 0000000000..55cadccdb3 --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igcombo/keyboard-navigation.mdx @@ -0,0 +1,77 @@ +--- +title: "Keyboard Navigation (igCombo)" +slug: igCombo-keyboard-navigation +--- + +#Keyboard Navigation (igCombo) + +##Topic overview +This topic explains how to use keyboard navigation so that end-users can easily and quickly navigate through items or change the selected/highlighted items. + +### In this topic + +This topic contains the following sections: + +- [Keyboard interactions](#kbInteraction) +- [Multiselection](#multiselection) + - [Shift interaction](#shiftInteraction) + - [Ctrl interaction](#ctrlInteraction) +- [From browser](#fromBrowser) + +## Keyboard interactions +### Overview + + +Press| To| When +---|---|--- +Alt + Down arrow|Open drop down| Drop down is closed +Alt + Up arrow|Close drop down| Drop down is opened +Ctrl + Home|Move to very first item in drop down| Drop down is opened +Ctrl + End|Move to very last item| Drop down is opened +Page Up|Move to and selects the first visible item| Drop down is opened and multiselection is enabled +Page Down|Move to and selects the last visible item| Drop down is opened and multiselection is enabled +Up arrow|Move to and selects the prev item; Close drop down if opened | Drop down is opened or closed +Down arrow|Move to and selects next item; Open drop down if closed| Drop down is opened or closed +Esc key|Clear content when there isn’t selected item | There is content in the input +Esc key|Close the drop down| The drop down is opened +Enter key|Close the drop down| There is selected item + +##Multiselection + +Press| To| When +---|---|--- +Page Up|Move to first visible item| Drop down is opened +Page Down|Move to last visible item| Drop down is opened +Up arrow|Move to prev item; Close drop down if opened | Drop down is opened or closed +Down arrow|Move next item; Open drop down if closed| Drop down is opened or closed +Enter key|Select the active item| There is active item + +###Shift interactions +When press|Then +---|--- +Shift|The item is highlighted to active state +Shift|If you don’t select more than one item nothing happens, the item stays in active state. +Shift + Up/Down arrows |will change the active (highlighted) items and if you release Shift key the active items will be selected. +Shift + Enter|**Scenario**: If you select item (with the mouse) and move the active item with up/down arrow key on Shift + Enter the items state, between the first and last selected items, will be changed to Selected. + +> **Note:** Shift key only select items + +###Ctrl interaction (addWithKeyModifier option set to true) +By default if MultiSelection is enabled the end user can select multiple items by simply clicking with left mouse button. In order to select multiple items with Ctrl `addWithKeyModifier` option must be set to `true`. + + +## From browser + +Press| To +---|--- +Left arrow|Move cursor one char left +Right arrow|Move cursor one char right +Ctr + Left|Move cursor one word to the left +Ctr + Right|Move cursor one word to the right +Shift|Seletion of the text when moving cursor +Delete, Backspace|Clear only the selected text +Delete, Backspace|Clear char by char +Enter key|Select item +Home key|Move cursor to input text start +End key|Move cursor to input text end +Backspace key|Clear all the contents of the combo box (Hold the key; Ctrl+A) \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/controls/igcombo/known-limitations.mdx b/docs/jquery/src/content/en/topics/controls/igcombo/known-limitations.mdx new file mode 100644 index 0000000000..15efb19d07 --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igcombo/known-limitations.mdx @@ -0,0 +1,72 @@ +--- +title: "Known Issues and Limitations (igCombo)" +slug: igcombo-known-limitations +--- + +# Known Issues and Limitations (igCombo) + + + +##Known Issues and Limitations Summary + + +### Known issues and limitations summary chart + +The following table summarizes the known issues and limitations of the `igCombo`™ control. Detailed explanations of some of the issues and the existing workarounds are provided after the summary table. + +Legend | +-------|------ +![](../../images/images/positive.png) | Workaround available +![](../../images/images/negative.png) | No known workaround +![](../../images/images/plannedFix.png) | No known workaround, fix planned + +Issue | Description | Status +---|---|--- +[In IE9 and lower versions placeHolder text is not previewed](#IE9PlaceHolder) | Input placeholders are simply ignored in IE9 and below|![](../../images/images/negative.png) +[When virtualization is enabled, all ItemTemplate elements should have equal heights](#virtualizationAndItemTemplate) | Misalignment issues may occur with the scrollbar | ![](../../images/images/positive.png) +[When Grouping and Virtualization are used some items are not rendered properly](#groupingWithVirtualization) | When scrolling down, some items are not properly added|![](../../images/images/negative.png) +[When loadOnDemand is used, initialSelectedItems option won't work as expected](#lodWithInitialSelectedItems) | Initial selection won't be reflected if the item is currently not present in the page loaded by the combo.|![](../../images/images/negative.png) +[Autocomplete breaks the "Backspace" and "ESC" functionalities of Japanese IME composition in some browsers](#composition) | IgCombo provides composition functionality for Japanese characters, but in most browsers (excluding Firefox) there is a slight deviation from the standard behavior. |![](../../images/images/negative.png) + +##Known Issues and Limitations Details + + +###In IE9 and lower versions placeHolder text is not previewed + +HTML5 introduces the `placeholder` attribute on `input` elements, which allows to display a greyed-out default text, although input placeholders are simply ignored in IE9 and below. This is because IE does not support it. + +### When virtualization is enabled, all ItemTemplate elements should have equal heights + +If `itemTemplate` is used with `virtualization` some misalignment issues may occur with the scrollbar. For example the last visible item could be partially hidden. + +**Workaround** +A potential work around for this issue is to set `height` to the item template like: +``` + +``` +###When Grouping and Virtualization are used some items are not rendered properly + +When scrolling up/down through the item list, while there are grouped items, some list items may not be rendered properly or rendered at all. + +###When loadOnDemand is used, initialSelectedItems option won't work as expected +Initial selection won't be reflected if the item is currently not present in the page loaded by the combo (e.g. first 16 initially loaded items). This is because the combo cannot extract the text of an item that is not yet loaded and thus cannot populate it in the combo input. + +###Autocomplete breaks the "Backspace" and "ESC" functionalities of Japanese IME composition in some browsers +IgCombo provides composition functionality for Japanese characters, but in most browsers (excluding Firefox) there is a slight deviation from the standard behavior. When Autocomplete behavior of igCombo is activated, Japanese character is typed and needs to be confirmed, "Backspace" or "ESC" should delete the IME proposition. Instead of that, these keys confirm the IME proposition for Japanese character. The second use of the keys in this situation will work as expected. diff --git a/docs/jquery/src/content/en/topics/controls/igcombo/migrating-to-the-new-combo.mdx b/docs/jquery/src/content/en/topics/controls/igcombo/migrating-to-the-new-combo.mdx new file mode 100644 index 0000000000..2e02dd6e15 --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igcombo/migrating-to-the-new-combo.mdx @@ -0,0 +1,343 @@ +--- +title: "Migrating to the new combo" +slug: igcombo-migrating-to-the-new-combo +--- +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# Migrating to the new combo + +## Topic overview +This topic aims to help with migration from old combo to the new one. Different scenarios are viewed and how they were done before and how they can be done now. + +### In this topic +This topic contains the following sections: + +1. [General changes](#general_changes) +2. [Options changes](#options_changes) +3. [New options](#new_options) +4. [API Methods changes](#methods_changes) +5. [New API methods](#new_methods) +6. [Theming changes](#theming_changes) +7. [Event changes](#event_changes) +8. [New events](#new_events) +9. [Knockout Integration changes](#ko_changes) +10. [Knockout Backwards compitability](#ko_backwards) +11. [Requirements](#requirements) + + +### General changes + +Option|Description +---|--- +Item|Item is how we call the new structure that we use for representing the list items in the drop down list. It is an object with two properties - `element` and `data`. The `element` is the jQuery reference to the list item, while the `data` is the corresponding data from the data source behind this element. The `data` is a reference to the corresponding data item in the data source, it includes the `text` and `value` fields and if their property name is known they can be accessed by `item.data.textPropertyName` or `item.data.valuePropertyName`. In case where their property name is unknown or might change the same can be accessed by getting the property name directly from the combo : `item.data[$("#combo").igCombo("option", "valueKey")]` for value field and `item.data[$("#combo").igCombo("option", "textKey")]` for text field. + + +### Options changes + +Option| Previously| Now +---|---|--- +width|$(‘#combo’).igCombo({ width: 300 })| The default width is set through css. The recommended way to set new combo width is ``. Old way is also supported. +height|$(‘#combo’).igCombo({ height: 300 })| The default height is set through css. The recommended way to set new combo height is ``. Old way is also supported. +enableDisplayBlock|$(‘#combo’).igCombo({ enableDisplayBlock: true})|This option is removed. Now this can be controlled through css: `` +mode| Previously supported values: `editable, dropdown, readonlylist, readonly, 0, 1, 2, 3`.| Now supported values are: `editable, dropdown, readonlylist, readonly`. Drop down mode now closely mimics the html select element behavior, this means that when selection is single there will be always a selected item and clear button will be disabled by default. +renderMatchItems|-|This option is renamed to `highlightMatchesMode` to better communicate what it does. +filteringType|`filteringType` default is `'none'`| Now `filteringType` default is `'local'`, so local filtering will be enabled by default. To disable filtering when initializing combo: `$('#combo').igCombo({ filteringType: 'none' })` or if combo is already created use `$('#combo').igCombo('option', 'filteringType', 'none' })`. +selectedItems| Used to specify initial selected items and to set/get selected items after combo is created. | This option is removed. Initial selected items can be set using new option [initialSelectedItems](#initialSelectedItems). Setting selection is done through combo API methods: [value](#value), [select](#select) or [index](#index). Getting selected items can be done through API method [selectedItems](#selectedItems). +multiSelection|Previously supported values: `null, false, 0, off, true, 1, on, 2, onWithCheckboxes'`|Now this option is used to setup all multiple selection settings. Object with following settings can be provided: `enabled, addWithKeyModifier, showCheckboxes, itemSeparator`. Set `enabled` to `true` to enable multiple selection. Set addWithKeyModifier to `true` to require holding `ctrl` key to add the item to already selected items, by default all selections are additive without holding `ctrl`. Set `showCheckboxes` to `true` to render check-boxes in front of each list item. Set `itemSeparator` to change what string is rendered between the selected items, the default string is ', '. Example with all settings: `$('#combo').igCombo({ multiSelection: { enabled: true, addWithKeyModifier: true, showCheckboxes: true, itemSeparator: ', ' } })` +itemSeparator|Used to change what string is rendered between the selected items.|This option is removed and added as setting of [multiSelection](#multiSelection) option +enableActiveItem|Used to enable/disable the active item when navigating with keyboard.| This option is removed. The active item is removed when selection is single and navigating with keyboard will change the selection. The active item is always enabled when multiple selection is enabled. +dropDownMaxHeight dropDownMinHeight|Used to set drop down list max and min height.|These options are removed. New option [visibleItemsCount](#visibleItemsCount) is added to control the drop down height. +dropDownAsChild|Used to render the drop down list as child of the combo element.| Renamed to `dropDownAttachedToBody`. Default value is `true`. Set to `false` to render the drop down as a child: `$('#combo').igCombo({ dropDownAttachedToBody: false })` +showDropDownButton|Used to control the visibility of the drop down button|This option is removed. The visibility of the drop down button can be controlled through css. To disable the drop down button: `` +nullText|Used to specify what text is shown in text input when it is empty.| Renamed to `placeHolder`. It is a known issue that this option does not work for IE8/9. +closeDropDownOnSelect|Used to specify whether the drop down should close when selection is made.|Changed to specify whether to close the drop down list when single item in the list is selected with mouse click or enter press. Default is `false` for single selection and `true` for multiple selection. This option will not close the drop down when multiple selection is enabled and additive selection is performed. `$('#combo').igCombo({ closeDropDownOnSelect: false })` +allowCustomValue|Used to allow custom value in combo's text input.|This option was initially not supported, but is again available as of the September service release for 15.1 and the 15.2 volume release. +dataBindOnOpen|Used to delay data binding to when the drop down is opened.|This option is not supported. The same functionality can be achieved by canceling the data binding event and data bind when the drop down list is first opened. +text|Used to set custom text in combo input on initialization|This option is not supported. To set initial selection use option [initialSelectedItems](#initialSelectedItems). +clearSelectionOnBlur|Used to preserve selected items on blur when the text input didn't match the selected items text.| This option is not supported. +valueKeyType textKeyType|Used to specify the data type behind the value/text data|These options are not supported. The type of value and text fields from the data source will be used. +parentCombo cascadingDataSources parentComboKey|Used to setup cascading functionality|These options are not supported. Internal cascading functionality is no longer supported. It can be achieved through changing related combo data sources on current combo's selection changed event. [See sample]({environment:SamplesUrl}/combo/cascading-combos) + +*We tried hard to ensure behavioral parity between the old and new combo, but some things we could not complete for 15.1. If these behaviors are crucial to your solution, and you want to upgrade to 15.1, please contact us. + + +### New options + +Option| Description +---|--- +initialSelectedItems|Use to set what items should be selected when combo is initially created, by specifying the selected item index or value: `$('#combo').igCombo({ initialSelectedItems: [{ index: 2 }, { index: 5 }, { value: 'items_value' }] })`. +visibleItemsCount|This option can be used to control the maximum number of items that can be visible at a time. When it is set to 10 and there are 20 items in the list, only 10 will be shown at a time. When there are 5 items in the list only the 5 will be shown and drop down height will be as much as required for the 5 items. Default value is 15. `$('#combo').igCombo({ visibleItemsCount: 10 })` +autoSelectFirstMatch|Specifies whether the first list item starting with the entered in the input text should be automatically selected. When multiple selection is enabled this option will instead put the active item on the matching element. When disabled only full matches will be automatically selected. By default it is set to true. To disable it: `$('#combo').igCombo({ autoSelectFirstMatch: false })` +delayFilteringOnKeyUp|Specifies the delay duration before triggering next filtering operation. Useful to boost performance by lowering the filtering operations count. Default is 250 ms. To change it: `$('#combo').igCombo({ delayFilteringOnKeyUp: 1000 })` +preventSubmitOnEnter|Specifies whether to prevent default form submitting on enter key press. Default is true. To disable it: `$('#combo').igCombo({ preventSubmitOnEnter: false })` + + + + +### API Methods changes + +Method| Previously| Now +---|---|--- +dropDownVisible|Used to control visibility of the drop down list|This API method is removed. Use [openDropDown](#openDropDown) to open the drop down list and [closeDropDown](#closeDropDown) to close the drop down list +setFocus|Used to set focus to combo text input.|This API method is removed. Focus on the text input can be set by calling jQuery `focus` method on the input: `$("#combo").igCombo("textInput").focus()` +hasFocus|Used to check whether combo text input has focus.|This API method is removed. To check whether the text input has focus jQuery `is(":focus")` can be used: `$("#combo").igCombo("textInput").is(':focus').` +isSelected|Used to check whether list item at specified index is selected.|There are three API methods that check whether an item is selected: [isSelected](#isSelected) by jQuery reference, [isIndexSelected](#isIndexSelected) by index and [isValueSelected](#isValueSelected) by value. +selectedIndex|Used to get index of the first selected item or set the selection by index.|This API method was renamed to [index](#index). This method also accepts array of indexes to select multiple items at once. When multiple items are selected it will return array with all selected indexes. The rest of the functionality is the same. +value|Used to get value of the first selected item or set the selection by value.|This method also accepts array of values to select multiple items at once. When multiple items are selected this method will return array with all selected values. The rest of the functionality is the same. +values|Used to get values of all selected items or set the selection by values.|This API method is removed. Its functionality was merged into `value` method. +itemByIndex|Used to get object with members relative to the list item at specific index. Used to return object with `{ element, index, value, text }`.|This API method is renamed to `itemFromIndex`. The object returned is [item](#item). +itemByValue|Used to get object with members relative to the list item with specific value. Used to return object with `{ element, index, value, text }`.|This API method is renamed to `itemFromValue`. The object returned is [item](#item). +getDataSource|Used to get reference to data source used by combo.|This API method is removed. Reference to the data source can be get through `$("#combo").igCombo("option", "dataSource")` +getData|Used to get reference to current data used by combo.|This API method is removed. Reference to the current data can be get through `$("#combo").igCombo("option", "dataSource").dataView()` +getRecordsCount|Used to get records count in dataSource, dataView or total server data.|This API method is removed. To get records count in dataSource use: `$("#combo").igCombo("option", "dataSource").data().length`. To get records count in dataView use: `$("#combo").igCombo("option", "dataSource").dataView().length`. To get records count in total server data use: `$('#combo').igCombo('option', 'dataSource').totalRecordsCount()` +filter|Method parameters used to be `event, filterText, noFilter` | Method parameters changed to `filterText, event` +remove|Used to remove the combo from its parent element while keeping rest of the functionality.|This API method is not supported. +getFooter|Used to get reference to combo footer.|This API method is not supported, as there is no footer yet. + + +### New API Methods + +Method|Description +---|--- +openDropDown|Use this method to open the drop down list. +closeDropDown|Use this method to close the drop down list. +select|Use to select one or more list items by passing the items jQuery reference: `$('#combo').igCombo('select', $('.itemSelector'))` +value|Use to select one or more list items by value: `$('#combo').igCombo('value', 'itemValue')` to select single item or `$('#combo').igCombo('value', ['itemValue_1', 'itemValue_2', 'itemValue_3'])` to select multiple items at once. Calling this method without parameters will return the selected values. +index|Use to select one or more list items by their index in the data source: `$('#combo').igCombo('index', 5)` to select single item or `$('#combo').igCombo('index', [3, 5, 8, 10])` to select multiple items. Calling this method without parameters will return the selected indexes. +isSelected|Use to check whether specific jQuery element is selected. `$('#combo').igCombo('isSelected', $('.selector'))` +isIndexSelected|Use to check whether item at specific index is selected. `$('#combo').igCombo('isIndexSelected', 5)` +isValueSelected|Use to check whether item with specific value is selected. $('#combo').igCombo('isValueSelected', 'itemValue') +dataForValue|Gets the associated data source data of an list item by value matching it's valueKey property. `$('#combo').igCombo('dataForValue', 'itemValue')` +dataForElement|Gets the associated data source data of list item in the combo by its jQuery reference. `$('#combo').igCombo('dataForElement', $('.listItemSelector'))` +itemsFromElement|Gets [item](#item) represening li element in the combo by its jQuery element. When multiple elements are given the method will return array with items. `$('#combo').igCombo('itemsFromElement', $('.listItemSelector'))` +itemsFromValue|Gets [item](#item) representing li element in the combo by its value. When array of values are given the method will return array with items. `$('#combo').igCombo('itemsFromValue', 'itemValue')` +itemsFromIndex|Gets item representing li element in the combo by its index. When array of indexes are given the method will return array with items. `$('#combo').igCombo('itemsFromIndex', 3)` +items|Gets array with all items in the combo. +filteredItems|Gets array with all filtered [items](#item) in the combo. +selectedItems| Gets the selected [item](#item). When multiple items are selected will return array with the selected [items](#item). +listItems|Gets jQuery reference to all rendered list items in the combo drop down lsit +clearFiltering|Clears the filtering +clearInput|Clears text input value and removes all selection, filtering and highlighting. +selectAll|Selects all list items +deselect|Deselects list item by jQuery reference +deselectByValue|Deselects list item with specific value +deselectByIndex|Deselects list item at specific index +deselectAll|Deselects all selected list items +comboWrapper|Gets jQuery reference to the outer element of the combo +dropDown|Gets jQuery reference to the drop down list of the combo +textInput|Gets jQuery reference to the text input of the combo +valueInput|Gets jQuery reference to the value input of the combo +dropDownOpened|Checks whether the drop down is opened + + + + +### Theming changes + +Event|Changes +---|--- +ui-igcombo-nulltext| Class is removed. Now, for example, if a text color needs to be applied to the combo input element, the approach below could be used. + +```html + + +``` +> **Note:** Depending on the browser (`:-moz-placeholder`, `:-ms-input-placeholder`); + + +### Event changes + +Event|Changes +---|--- +selectionChanging|Event argument ui.oldItems renamed to ui.currentItems to better communicate that these items are still the current selected as the selection change hasn't still happened. Items are in [item](#item) format. +selectionChanged|Items are in [item](#item) format. +dropDownOpening dropDownOpened dropDownClosing dropDownClosed|Event argument ui.element renamed to ui.list to communicate better that this is the drop down list. +textChanged|This event was removed. To check when the text has changed bind to combo text input keydown event. +noMatchFound|This event was removed as the `autoComplete` feature is not fully supported yet. +activeItemChanging activeItemChanged|These events were removed. + + +### New events + +Event|Description +---|--- +rendered|Event raised when rendering of combo is completed. +itemsRendering|Event which is raised before rendering of the combo items is performed. +itemsRendered|Event which is raised after rendering of the combo items completes. Function callback is passed argument `ui.items` that is array of [items](#item) representing the rendered list item elements. + + + + +###Knockout Integration changes +One of the changes, introduced with the new `igCombo` control, is the one that the combo is considered as control that accepts values only from its list. There isn't an option to allow custom values in the `igCombo`, as it was in the old one, which leads to a need for a different work process in the Knockout extension. This means that the only time, when the `igCombo` can notify the View-Model about a change, is when an item is selected/deselected and the selected items collection is changed. In such cases, some of the old Knockout extension options are not necessary anymore and some other need to be introduced. The following changes have been made to integrate the `igCombo` with its Knockout extension. + +####New options + +Option| Description +---|--- +selectedItems| Array of the selected items in the `igCombo`. When configured in the View-model, this ensures that there is a data exchange between the combo selected items and the View-Model. +selectedItemType| Allows configuring the type of the selected items in the array, either to be "primitive" or "object". + +####Removed options + +Option| Description +---|--- +text| The combo cannot anymore update the View-model, when a change in its input occurs.
If, with the old `igCombo`, you had a View-model property that holds the combo value and it got updated and notified other subscribers, then because such an option doesn't exist in the `igCombo` Knockout extension anymore, the `selectionChanged` event handler can be used to take current combo value and notify the subscribers. The code snippets below the table, demonstrate how the old functionality can be simulated. +value| This option is not needed, because the newly introduced `selectedItems` option is used, when you want to select item by its value. +enableTextChangedUpdate| The `igCombo` doesn't have `textChanged` event, and therefore we cannot have such a functionality. +enableSelectionChangedUpdate| With the new changes, the update always happens on selection change of the combo, that's why such an option is not necessary. +cascadingDataSource| The `igCombo` control doesn't contain such an option, that's why it also cannot be used in the Knockout extension. + +**Before** +```html + + +``` + +**Now** +```html + + +``` + +>**Note:** This will only work, when there is a change from the `igCombo` to the View-Model. + + +###Knockout Backwards compatibility + +The new combo and its knockout extensions have been redesigned and therefore there are some changes in architecture. The combo selection collection was designed to only accept values that are available in its drop down items. The knockout extension follows that pattern and the observable item, which monitors the changes in the combo, is now an array of the selected items. +In the previous version the extension was monitoring the combo filed. With the new implementation one can monitor multiple selected items and not only a single selection. + +This architectural approach means that one cannot bind igCombo with an HTML input element for example, because the input observable cannot be defined as an observable array. Our igEditors and their extensions, in contrast, are designed to work with HTML inputs. If one needs a way to combine igCombo with HTML inputs, one can use the approach demonstrated in the previous section (Knockout Integration Changes). +The code in this section demonstrates a custom solution, which allows the use of the new version of the igCombo and Knockout extension, but without the need to change the code in your ViewModel and View. This polyfill is suitable for situations when you want to upgrade to the latest version of IgniteUI but cannot change your current code to handle selection notifications. + +The following binding handler should be defined after the igCombo knockout handlers are loaded: + +```html + +``` +Then you can use the same logic as before and define the observable item as a string: + +**Before** +```html + + +
+``` + + + +### jQuery requirements + +Lib| Prev required version| New required version +---|---|--- +jQuery core|1.4.4|1.8.3 +jQuery UI|1.7|1.9.2 diff --git a/docs/jquery/src/content/en/topics/controls/igcombo/overview.mdx b/docs/jquery/src/content/en/topics/controls/igcombo/overview.mdx new file mode 100644 index 0000000000..e26467eadd --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igcombo/overview.mdx @@ -0,0 +1,284 @@ +--- +title: "igCombo Overview" +slug: igcombo-overview +--- + +# igCombo Overview + + +##Topic Overview + + +###Purpose + + +This topic provides conceptual information for the `igCombo`™ control including information regarding: features, binding to data sources, requirements, and templates. + +###In this topic + + +This topic contains the following sections: + +- [Main Features](#main-features) + +- [Binding to Data Sources](#binding-to-data-source) + +- [Minimum Requirements](#minimum-requirements) + +- [Template Use and Selection](#template-use-and-selection) + +### Required background + + +The table below lists the required background you need for fully understanding the information in this topic. + +**Topics** + +You need to first read the following topics: + +- [{environment:ProductName} Overview](//igniteui-for-jquery-overview.mdx) + +- [Using JavaScript Resources in {environment:ProductName}](//general-and-getting-started/deployment-guide-javascript-resources.mdx) + +- [Styling and Theming in {environment:ProductName}](//general-and-getting-started/styling-and-theming/deployment-guide-styling-and-theming.mdx) + +- [igGrid/igDataSource Architecture Overview](/iggrid/igdatasource-architecture-overview.mdx), The Data Source Control section + +**External Resources** + +You need to first read the following article: [Working with jQuery Widgets](http://learn.jquery.com/jquery-ui/getting-started/) + +##Main Features + + +###Features overview + + +The table below briefly explains the main features of the `igCombo`. + + +| | | +| --- | --- | +| Feature | Description | +| Virtualization | The igCombo control can re-use HTML elements when binding large amounts of data to improve performance. | +| Auto-complete | Enabling this allows the igCombo control to automatically fill in the remaining input text based off of the first match in the list of choices. | +| Auto-suggest | The igCombo control can filter the list of choices based of the text entered in the input box. | +| Multiple selection | Users can select single items or multiple items and can perform multiple selections using checkboxes. | +| Keyboard navigation | Users can easily and quickly navigate through items or change the selected/highlighted items thanks to the rich keyboard navigation that igCombo supports. | +| Load-on-Demand | The igCombo control supports Load-on-Demand feature. Enabling Load-on-Demand significantly reduces the bandwidth and processing overhead on both the server and the client. | +| Highlighting | When a user type a text in igCombo input the matching results in the dropdown items are displayed with a visual highlighting of the matching text. | +| {environment:ProductNameMVC} | You can use managed .NET code to configure the {environment:ProductNameMVC} Combo control. | + + +### Virtualization + + +Virtualization allows the `igCombo` control to bind to hundreds of items while keeping the memory profile concise. The combo creates only the amount of HTML elements necessary to fill the scrollable area of the combo and then reuses those elements as the user scrolls through the data. + +#### Related Topics + + +- [Optimizing Performance (igCombo)](/configuring/igcombo-optimize-performance.mdx) + +#### Related Sample + +- [igCombo Virtualization]({environment:SamplesUrl}/combo/virtualization) + +### Auto-Complete + + +The auto-complete feature helps users select content that is already in a list of choices. After the first character is entered, the combo prefills the remaining text of the first matching item in the list. + +![](images/igCombo_Auto_Complete.png) + +#### Related Topics + +- [Adding igCombo](/igcombo-getting-started.mdx) + +### Auto-suggest + + +To help the user find a specific value in the dropdown list, enable the Auto-Suggest feature. The dropdown list filters based off of the text entered in the input box. Different filtering conditions are available that include ‘contains’ or ‘startsWith’ operators. + +![](images/igCombo_Auto_Suggest.png.png) + +#### Related Topics + +- [Configuring Auto-Suggest (igCombo)](/configuring/igcombo-configure-auto-suggest.mdx) + + +### Multiple selection + +The `igCombo` control supports single and multiple selection. With multiple selection enabled the user can select multiple items from the dropdown list. During data entry users can also use a comma (,) to select multiple values while typing in the input box. + +![](images/igCombo_multiple_selection.png) + +#### Related Topics + +- [Configuring Selection (igCombo)](/configuring/igcombo-configure-selection.mdx) + + +#### Related Sample + +- [igCombo Multiple selection]({environment:SamplesUrl}/combo/selection-and-checkboxes) + +### Load-on-Demand + +If Load-on-Demand is enabled, the user should first be able to see a scrollbar in the drop-down container, and the first page of list items. If the user scrolls to the end of the list, the next page of items are fetched and appended at the bottom of the list through asynchronous callbacks. + +#### Related Topics +- [Configuring Load-on-Demand ](/configuring/igcombo-load-on-demand.mdx) + +#### Related Sample + +- [Load-On-Demand]({environment:SamplesUrl}/combo/load-on-demand) + +### Keyboard navigation + +The combo provides very important accessibility feature, which is the ability to navigate by using the keyboard. This feature improves the User +Experience by saving time and allowing the end-user to easily and quickly navigate through dropdown items. + +#### Related Topics +- [igCombo Keyboard Navigation](/igcombo-keyboard-navigation.mdx) + +#### Related Sample + +- [Keyboard navigation]({environment:SamplesUrl}/combo/keyboard-navigation) + +### {environment:ProductNameMVC} + + +You can use the ASP.NET MVC Helper to use managed code languages to configure the {environment:ProductNameMVC} `Combo` control. You can create re-usable Views or ViewModels in your ASP.NET MVC applications to interface with the combo. You can also bind to an IQueryable object in ASP.NET and the helper will generate the JSON data for the `igCombo` control to use on the client. + +### Related Topics + + +- [Adding igCombo](/igcombo-getting-started.mdx) + +- [Configuring Auto-Suggest (igCombo)](/configuring/igcombo-configure-auto-suggest.mdx) + +#### Related Sample + +- [{environment:ProductNameMVC} Combo]({environment:SamplesUrl}/combo/aspnet-mvc-helper) + + +##Minimum Requirements + + +###Introduction + + +The `igCombo` control is a jQuery UI Widget and therefore is dependent upon the jQuery core and jQuery UI JavaScript libraries. In addition, there are several {environment:ProductName}™ JavaScript resources that the `igCombo` control uses for shared functionality and data binding. These JavaScript references are required whether the `igCombo` control is used in a pure JavaScript context or in ASP.NET MVC. When using the `igCombo` in ASP.NET MVC, the Infragistics.Web.Mvc assembly is required to configure the `igCombo` with .NET languages. + +###Requirements + + +The table below lists the requirements for the `igCombo` control. + + +| Requirement | Description | +| --- | --- | +| jQuery and jQuery UI JavaScript resources | {environment:ProductName} is built on top of these frameworks: [jQuery](http://jquery.com) (The required jQuery version for igCombo is 1.8.3) [jQuery UI](http://jqueryui.com/) (The required jQuery UI version for igCombo is 1.9.2) | +| Shared {environment:ProductName} JavaScript resources | There are several shared JavaScript resources in {environment:ProductName} that most widgets use: infragistics.util.js infragistics.util.jquery.js | +| igDataSource JavaScript Resources | The igCombo uses the igDataSource internally for data operations: infragistics.dataSource.js | +| igTemplating JavaScript Resources | The igCombo uses the igTemplating internally for the rendering of items. infragistics.templating.js | +| igCombo JavaScript resources | The JavaScript file for the igCombo widget: infragistics.ui.combo.js | +| IG Theme | This theme contains custom visual styles created especially for {environment:ProductName} | +| Base Theme | The base theme contains styles that primarily define the form and function for each widget. | + + +##Binding to Data Sources + + +The following table lists the requirements for binding the `igCombo` control to data sources grouped by requirement category. + + +| | | +| --- | --- | +| Requirement category | Requirements listing | +| Data structure | Can be any of the following: Well-formed JSON or XML supplied locally or from a web server JavaScript array HTML SELECT element KnockoutJS JSONP IQueryable in ASP.NET MVC | +| Data types | String Number Boolean Date | + + +###Supported data sources + + +The following table lists the supported data sources and some basic specifics for their binding + + +| Data Source | Binding | +| --- | --- | +| igDataSource | The `igDataSource` is used internally by the `igCombo` control to manage data operations for the control. The data source accepts many different types of local and remote data. | +| [Binding igCombo to Data](/binding/igcombo-binding-to-data.mdx) | You can point to a SELECT element in the jQuery selector for `igCombo` control and it will convert the SELECT element to the `igCombo` control automatically inheriting the options of the base element. | +| IQueryable | In ASP.NET MVC, supply an IQueryable as the igCombo’s datasource and the collection is serialized to JSON and returned with the View for use in the browser. | +| [KnockoutJS](/configuring/igcombo-knockoutjs-support.mdx) | The support for the Knockout library in the `igCombo` control is intended to provide easy means for developers to use the Knockout library and its declarative syntax to instantiate and configure combo controls. | + + +### Binding to data sources overview + + +In most cases, you will use the `dataSource` or `dataSourceUrl` options of the `igCombo` to bind to data. This option provides your data to the `igDataSource` which can handle the various data formats that are supported. The one main exception to using this option is when the `igCombo` is instantiated using a SELECT element. The `igCombo` inherits the data and options of its base SELECT element in this case. In ASP.NET MVC, supplying an IQueryable to the {environment:ProductNameMVC} Helper facilitates the serialization of the data from the server and passes it to the client with the View. Once the page is received by the browser, the `dataSource` option of the `igCombo` is set for client-side operation. + + +##Template Use and Selection + +###Introduction + + +There are several places where a template can be used to customize the layout of the `igCombo` control. A header and/or footer can appended to the top and/or bottom of the dropdown list respectively to provide greater context to the user’s choices. In addition, an item template can be defined which allows each choice to have multiple pieces of information shown in a customized layout. + +###Template use chart + +The table bellows lists the `igCombo` templates and their possible uses. + + +| | | +| --- | --- | +| Template | Use with igCombo | +| Header | By setting the headerTemplate option, you can define custom HTML which displays at the top of the dropdown list. | +| Footer | Setting the footerTemplate option appends custom HTML at the bottom of the dropdown list. If the list is large enough to require a scrollbar, the footer template is always shown below the scrollable area. | +| Item | You can set custom HTML to the itemTemplate option and each bound item uses the template to display its data. Images and custom layouts can be displayed for each item. | + + +###Template selection chart + +The table below maps some of your possible needs to the appropriate templates. + + +| If you need to | Then use this template: | +| --- | --- | +| Display a header at the top of the dropdown list | headerTemplate | +| Display a footer at the bottom of the dropdown list | footerTemplate | +| Display an image or icon for each item choice | itemTemplate | +| Show multiple pieces of information for each item in a custom layout | itemTemplate | + + +##Related Topics + + +Following are some other topics you may find useful. + +- [{environment:ProductName} Overview](//igniteui-for-jquery-overview.mdx) + +- [Using JavaScript Resources in {environment:ProductName}](//general-and-getting-started/deployment-guide-javascript-resources.mdx) + +- [Styling and Theming in {environment:ProductName}](//general-and-getting-started/styling-and-theming/deployment-guide-styling-and-theming.mdx) + +- [igGrid/igDataSource Architecture Overview](/iggrid/igdatasource-architecture-overview.mdx) + +- [Adding igCombo](/igcombo-getting-started.mdx) + +- [Binding igCombo to Data](/binding/igcombo-binding-to-data.mdx) + +- [Configuring igCombo](/configuring/igcombo-configuring.mdx) + +- [Styling igCombo](/igcombo-using-themes.mdx) + +- [Keyboard Navigation](/igcombo-keyboard-navigation.mdx) + +- [Accessibility Compliance (igCombo)](/igcombo-accessibility-compliance.mdx) + +- [Known Issues and Limitations (igCombo)](/igcombo-known-limitations.mdx) + +- [jQuery and MVC API Links (igCombo)](/igcombo-jquery-and-asp-net-mvc-helper-api-links.mdx) + diff --git a/docs/jquery/src/content/en/topics/controls/igcombo/using-themes.mdx b/docs/jquery/src/content/en/topics/controls/igcombo/using-themes.mdx new file mode 100644 index 0000000000..215cc0866c --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igcombo/using-themes.mdx @@ -0,0 +1,40 @@ +--- +title: "Styling igCombo" +slug: igcombo-using-themes +--- + +# Styling igCombo + + +##Using Themes + + +###Introduction + +The `igCombo`™ utilizes the jQuery UI CSS Framework for styling and theming purposes. By default, the `igCombo` uses the IG Theme which is a jQuery UI theme provided by Infragistics for use in your application. + +To customize a theme, you can use ThemeRoller. ThemeRoller is a tool provided by jQuery UI which facilitates the creation of custom themes that are compatible with jQuery UI widgets. Many pre-built themes are available for download and use in your website. The `igCombo` control supports the use of ThemeRoller themes. + +###Topics + + +The information you need to customize the jQuery UI theme for the `igCombo` is covered in the following topics: + +- [Styling and Theming in {environment:ProductName}](//general-and-getting-started/styling-and-theming/deployment-guide-styling-and-theming.mdx) + +##Related Topics + + +Following are some other topics you may find useful. + +- [jQuery UI](http://jqueryui.com/) +- [jQuery UI - Getting Started](http://docs.jquery.com/UI/Getting_Started) +- [jQuery Themeroller](http://jqueryui.com/themeroller/) +- [Theming jQuery UI](http://docs.jquery.com/UI/Theming) +- [jQuery UI CSS Framework](http://docs.jquery.com/UI/Theming/API) + + + + + + diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/accessibility-compliance.mdx b/docs/jquery/src/content/en/topics/controls/igdatachart/accessibility-compliance.mdx new file mode 100644 index 0000000000..71ffc5034a --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igdatachart/accessibility-compliance.mdx @@ -0,0 +1,67 @@ +--- +title: "Accessibility Compliance (igDataChart)" +slug: igdatachart-accessibility-compliance +--- + +# Accessibility Compliance (igDataChart) + + +##Topic Overview + + +### Purpose + +This topic explains `igDataChart`™ accessibility features and provides advice how to achieve accessibility compliance for pages containing charts. + +### Required background + +The following topics are prerequisite to understanding this topic: + + +- [**igDataChart Overview**](/overview/igdatachart-overview.mdx): This topic provides conceptual information about the `igDataChart` control including its main features, minimum requirements for using charts and user functionality. + +- [**Adding igDataChart**](/igdatachart-adding.mdx): This topic demonstrates how to create add the `igDataChart` control and bind it to data. + + +##Accessibility Compliance Reference + + +### Introduction + +All of the {environment:ProductName}™ controls and components comply with Section 508, Subpart 1194.22 of the Rehabilitation Act of 1973. Table 1 contains the specific rules of Subpart 1194.22 that pertain to the control. Also detailed is how the `igDataChart` control complies with each rule. + +To meet the requirements each accessibility rule, in some cases, you may need to interact with the control by to setting a specific property, but in other cases the control does the work for you. + +>**Note:** As jQuery controls are client-only, some of the rules are not supported and are marked as limitations. + +#### Accessibility compliance reference summary + +The following table summarizes the accessibility compliance features of the igDataChart. + + +| Rules | Rule Text | How We Comply | +| --- | --- | --- | +| (a) | A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content). | Since igDataChart is exclusively a graphic control you may consider providing an alternative view for disabled people by converting the chart into a table or igGrid™ component with the chart data. That way screen readers may help users to get the information from the chart. | +| (b) | Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation. | See the note for (a) for an alternative way to provide compliance to the rule. | +| (c) | Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup. | You can control coloring and provide suitable colors for charts using the styling and theming capabilities of igDataChart. | +| (d)* | Documents shall be organized so they are readable without requiring an associated style sheet. | The control's markup is not readable without the associated style sheet because it’s a client-side control and depends on the CSS rules. See the note for (a) for an alternative way to provide compliance to the rule. | + + +\* - control limitations + + +##Related Content + + +### Topics + +The following topics provide additional information related to this topic. + +- [**Accessibility Compliance**](//general-and-getting-started/accessibility-compliance.mdx): Provides reference information for accessibility compliance of all {environment:ProductName} controls. + + + + + + + diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/adding.mdx b/docs/jquery/src/content/en/topics/controls/igdatachart/adding.mdx new file mode 100644 index 0000000000..cc2e6f2da7 --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igdatachart/adding.mdx @@ -0,0 +1,493 @@ +--- +title: "Adding igDataChart" +slug: igdatachart-adding +--- + +# Adding igDataChart + + +## Topic Overview +### Purpose + +This topic demonstrates how to add the `igDataChart`™ control to a page and bind it to data. + +### Required Background + +The following table lists the materials required as a prerequisite to understanding this topic. + + +**Concepts** + +- [jQuery](http://docs.jquery.com/Main_Page), [jQuery UI](http://jqueryui.com/) +- [ASP.NET MVC](http://www.asp.net/mvc) + +**Topics** + +- [{environment:ProductName} Overview](//igniteui-for-jquery-overview.mdx): General information on the {environment:ProductName}™ library. + +- [Using JavaScript Resources in {environment:ProductName}](//general-and-getting-started/deployment-guide-javascript-resources.mdx): This topic provides general guidance on adding required JavaScript resources to use controls from the {environment:ProductName} library. + +- [igDataChart Overview](/overview/igdatachart-overview.mdx): This topic provides conceptual information about the `igDataChart`™ control including its main features, minimum requirements for using charts and user functionality. + +### In This Topic + +This topic contains the following sections: + +- [Add Chart to a Web Page](#add-chart) + - [Introduction](#introduction) + - [Preview](#preview) + - [Requirements](#requirements) + - [Overview](#overview) + - [Steps](#steps) +- [Resources for Charts Reference](#charts-reference) +- [Related Content](#related-content) + - [Topics](#topics) + - [Samples](#samples) + - [Resources](#resources) + +##Add Chart to a Web Page + + +### Introduction + +This procedure will guide you through the process of adding a chart control with legend and data series to a web page. The data for the chart in the example is supplied into a JavaScript array for the HTML/jQuery example and from a model object for the ASP.NET MVC example. The chart includes financial and line charts. + +### Preview + +The following screenshot is a preview of the final result. + +![](images/Adding_igDataChart_1.png) + +### Requirements + +- To complete the procedure, you need the following: + - An ASP.NET MVC web application in Visual Studio for the MVC examples. + - An HTML5 web page for the HTTP examples. + +### Overview + +This topic takes you step-by-step toward adding a chart control to a web page. The following is a conceptual overview of the process: + +1. [Add references to required resources](#add-references-to-required-resources) + 1. [Preparation](#preparation) + 2. [Use igLoader in JavaScript](#use-igLoader-in-js) + 3. [Use MVC Loader](#use-mvc-loader) + 4. [Loading Resources Statically](#load-resources-staticallty) +2. [Add HTML markup required by the igDataChart](#add-html-markup) +3. [Add data source](#add-data-array) +4. [Configure basic chart options](#configure-basic) +5. [Configure chart axis options](#configure-axis) +6. [Data series options](#configure-dataSeries) +7. [(Optional) Observe Final Result](#view-results) + +### Steps + +The following steps demonstrate how to add an `igDataChart` control to a web page. + +1. Add references to required resources. + + **Preparation** + + Add the jQuery, jQueryUI and Modernizr JavaScript resources to a folder named `Scripts` in your web site or web application. + + Add the {environment:ProductName} CSS files to a folder named `Content/ig` in your web site or web application (see the [Styling and Theming in {environment:ProductName}](//general-and-getting-started/styling-and-theming/deployment-guide-styling-and-theming.mdx) topic for details). + + Add the {environment:ProductName} JavaScript files to a folder named `Scripts/ig` in your web site or web application (see the [Using JavaScript Resouces in {environment:ProductName}](//general-and-getting-started/deployment-guide-javascript-resources.mdx) topic for details). + + **Use igLoader in JavaScript** + + The `igLoader`™ control is the recommended way to load JavaScript and CSS resources required by the {environment:ProductName} library controls. First the `igLoader` script must be included in the page: + + **In HTML:** + +```html + +``` + + For HTML views the `igLoader` must be instantiated this way: + + **In HTML:** + +```html + +``` + + **ASP.NET example** + + The way to supply data for an ASP.NET MVC view is through a controller method and appropriate data model definition. Here follows the data model part. Create a new empty class into the Models folder of you ASP.NET MVC application and add the following code. + + **In C#:** + +```csharp + public class StockMarketDataPoint + { + public double Open { get; set; } + public double High { get; set; } + public double Low { get; set; } + public double Close { get; set; } + public double Volume { get; set; } + public DateTime Date { get; set; } + public string DateString { get { return string.Format("{0:M/d}", Date); } } + } +``` + + Add an empty controller class in the Controllers folder and the following code for the Index (or whatever your view is named) method: + + **In C#:** + +```csharp + public ActionResult Index() + { + List stockMarketData = new List + { + new StockMarketDataPoint { Date = DateTime.Parse("2.1.2010"), Open = 1000, High = 1028.75, Low = 985.25, Close = 1020, Volume = 1995 }, + new StockMarketDataPoint { Date = DateTime.Parse("3.1.2010"), Open = 1020, High = 1032.5, Low = 999.5, Close = 1021, Volume = 1964.5 }, + new StockMarketDataPoint { Date = DateTime.Parse("4.1.2010"), Open = 1021, High = 1033.5, Low = 996, Close = 1033, Volume = 1974.75 }, + new StockMarketDataPoint { Date = DateTime.Parse("5.1.2010"), Open = 1033, High = 1062, Low = 1018.75, Close = 1042, Volume = 1978.5 }, + new StockMarketDataPoint { Date = DateTime.Parse("6.1.2010"), Open = 1042, High = 1058.5, Low = 1019.75, Close = 1029, Volume = 1979 }, + new StockMarketDataPoint { Date = DateTime.Parse("7.1.2010"), Open = 1029, High = 1050.75, Low = 1006, Close = 1042, Volume = 1990 } + }; + + return View(stockMarketData); + } +``` + + Add the following code in your ASP.NET MVC view to make it strongly-typed and point to the data model class created above: + + **In ASPX:** + +```csharp + <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage>" %> +``` + +4. Configure basic chart options. + + **HTML example** + + For the chart and legend div tags to be wrapped and chart drawn, the `igDataChart` control must be instantiated and its main options set. Add the code below to the existing code in the ` +``` + +## Related Content + +### Topics + +- [Hover Interactions Overview (igDataChart)](//overview/hoverinteractions-hover-interactions-overview.mdx): This topic provides conceptual information about the hover interactions available on the `igDataChart` control including the different types of hover interaction layers available. + +- [Hover Interactions Property Reference (igDataChart)](/hoverinteractions-common-properties.mdx): This topic provides information about the properties and methods that the hover interaction feature uses for highlighting, hovering and interacting with the tooltip interactions inherited from the `series` class. + +- [Configuring the Crosshair Layer (igDataChart)](/hoverinteractions-crosshair-layer.mdx): This topic provides information about the crosshair layer used for hover interactions. It describes the properties of the crosshair layer and provides an implementation example. + +- [Configuring the Category Highlight Layer (igDataChart)](/hoverinteractions-category-highlight-layer.mdx): This topic provides information about the category highlight layer which is used for hover interactions. It describes the properties of the category highlight layer and provides an example of its implementation. + +- [Configuring the Category Item Highlight Layer (igDataChart)](/hoverinteractions-category-item-highlight-layer.mdx): This topic provides information about the category item highlight layer used for hover interactions. It describes the properties of the category item highlight layer and provides an example of its implementation. + +- [Configuring the Category Tooltip Layer (igDataChart)](/hoverinteractions-category-tooltip-layer.mdx): This topic provides information about the category tooltip layer used for hover interactions. It describes the properties of the category tooltip layer and provides an example of its implementation. + +- [Configuring the Item Tooltip Layer (igDataChart)](/hoverinteractions-item-tooltip-layer.mdx): This topic provides information about the item tooltip layer which is used for hover interactions. It describes the properties of the item tooltip layer and also provides an example of its implementation. + + +### Samples + +The following samples provide additional information related to this topic. + +- [Hover Interactions – Category Highlight Layer]({environment:SamplesUrl}/data-chart/category-highlight-layer): This sample demonstrates the Category Highlight Layer that targets a category axis, or all category axes in the `igDataChart`™ control. The sample options pane allows you to edit the properties of the Category Highlight Layer, such as changing the color of the highlight, outline, thickness and more. + +- [Hover Interactions – Category Item Highlight Layer]({environment:SamplesUrl}/data-chart/category-item-highlight-layer): This sample demonstrates the Category Item Highlight Layer that highlights items in a series that use a category axis either by drawing a banded shape at their position or by rendering a marker at their position.The sample options pane allows you to edit the properties of the Category Item Highlight Layer, such as changing the color of the highlight, outline, thickness and more. + +- [Hover Interactions – Category Tooltip Layer]({environment:SamplesUrl}/data-chart/category-tooltip-layer): This sample demonstrates the Category Tooltip Layer that displays grouped tooltips for series that use a category axis. The sample options pane allows you to edit the properties of the layer, such as changing the position of the tooltip. + +- [Hover Interactions – Crosshair Layer]({environment:SamplesUrl}/data-chart/crosshair-layer): This sample demonstrates the Crosshair Layer that provides crossing lines that meet at the actual value of every series that they are targeting. The sample options pane allows you to edit the properties of the layer, such as changing the thickness of the crosshair. + +- [Hover Interactions – Item Tooltip Layer]({environment:SamplesUrl}/data-chart/item-tooltip-layer): This sample demonstrates the Item Tooltip Layer that displays tooltips for all target series individually. The sample options pane allows you to edit the properties of the layer, such as changing the transition duration. + +- [Hover Interactions – Multiple Layers]({environment:SamplesUrl}/data-chart/multiple-layers): This sample demonstrates how multiple layers interact within the `igDataChart` control. This sample displays the Item Tooltip Layer, the Crosshair layer and the Category Highlight Layer. diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/hover-interactions/crosshair-layer.mdx b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/hover-interactions/crosshair-layer.mdx new file mode 100644 index 0000000000..66ff2a4b0c --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/hover-interactions/crosshair-layer.mdx @@ -0,0 +1,132 @@ +--- +title: "Configuring the Crosshair Layer (igDataChart)" +slug: hoverinteractions-crosshair-layer +--- + +# Configuring the Crosshair Layer (igDataChart) + + +## Topic Overview + +### Purpose + + +This topic provides information about the crosshair layer used for hover interactions. It describes the properties of the crosshair layer and provides an implementation example. + +### Required background + +The following topics are prerequisites to understanding this topic: + +- [Adding igDataChart](//igdatachart-adding.mdx): This topic demonstrates how to add the `igDataChart`™ control to a page and bind it to data. + +- [Binding igDataChart to Data](//igdatachart-databinding.mdx): This topic explains how to bind the `igDataChart`™ control to various data sources (JavaScript array, `IQueryable`, web service). + + +### In this topic + +This topic contains the following sections: + +- [Overview](#overview) + - [Preview](#preview) +- [Properties](#properties) +- [Axis Annotations](#annotations) +- [Example](#example) +- [Related Content](#related-content) + - [Topics](#topics) + - [Samples](#samples) + + +## Overview + +#### Crosshair layer overview + +The `crosshairLayer` renders as crossing lines intersecting at the actual value of every series that they are configured to target with each series rendering a separate set of lines. + +You can configure the `crosshairLayer` so that the layer will only display one specific series as by default they target all series on the `igDataChart` control. To achieve this, set the `targetSeries` property. For more information on this property, see the [Properties](#properties) section below. + +By default, the color of the crosshair lines is a lighter color than the series that it is interacting with. However, this default setting can be overridden so that you can select a color that will be used for the crosshair lines. This is done by setting the `brush` property. For more information on this property see the [Hover Interactions Property Reference (igDataChart)](/hoverinteractions-common-properties.mdx) topic. + +#### Preview + +The following image is a preview of the `igDataChart` control rendered with the `crosshairLayer` added. + +![](images/jQuery_Crosshair_Layer_01.png) + + +## Properties + +#### Crosshair layer properties + +The following table summarizes the properties of the crosshair layer. + +Property Name | Property Type | Description +---|---|--- +horizontalLineVisibility | visibility | This property specifies if the horizontal line of the crosshair layer should be visible. If this is set to `collapsed`, only the vertical line will display. +verticalLineVisibilty | visibility | This property specifies if the vertical line of the crosshair layer should be visible. If this is set to `collapsed`, only the horizontal line will display. +targetSeries | series | This property specifies which series should have an enabled crosshair layer. It is possible to create a separate crosshair layer for each series and configure them individually. +useInterpolation | bool | This property specifies if the vertical crosshair should cross the series at an interpolated position between data points. Usually the crosshair layer finds the closest point in a series and ensures that the crosshairs meet at that point, however if the points are sparse then you should enable this property. +isAxisAnnotationEnabled | bool | This property specifies if the crosshair value will render in an annotation label in the axes. + +## Axis Annotations + +The Crosshair Layer can display the value of the crosshair on the related axis. That is, the horizontal crosshair value shows on Y-axis and the vertical crosshair value shows on X-axis. This can be enabled by setting the `isAxisAnnotationEnabled` property to true. + +#### Styling Annotations + +The axis annotations can be styled with the following properties: + +Property Name | Property Type | Description +---|---|--- +xAxisAnnotationBackground
yAxisAnnotationBackground | string | The background color of the annotation. +xAxisAnnotationTextColor
yAxisAnnotationTextColor | string | The color of the text in the annotation. +xAxisAnnotationOutline
yAxisAnnotationOutline | string | The color of the annotation's outline. +xAxisAnnotationStrokeThickness
yAxisAnnotationStrokeThickness | number | The thickness of the annotation's outline. + +## Example + +This sample demonstrates the Crosshair Layer that provides crossing lines that meet at the actual value of every series that they are targeting. +The sample options pane allows you to edit the properties of the layer, such as changing the thickness of the crosshair. + +
+ [Crosshair Layer]({environment:SamplesEmbedUrl}/data-chart/crosshair-layer) + ![](images/jQuery_Crosshair_Layer_01.png) +
+ + +## Related Content + +### Topics + +- [Hover Interactions Overview (igDataChart)](//overview/hoverinteractions-hover-interactions-overview.mdx): This topic provides conceptual information about the hover interactions available on the `igDataChart` control including the different types of hover interaction layers available. + +- [Hover Interactions Property Reference (igDataChart)](/hoverinteractions-common-properties.mdx): This topic provides information about the properties and methods that the hover interaction feature uses for highlighting, hovering and interacting with the tooltip interactions inherited from the `series` class. + +- [Configuring the Category Highlight Layer (igDataChart)](/hoverinteractions-category-highlight-layer.mdx): This topic provides information about the category highlight layer which is used for hover interactions. It describes the properties of the category highlight layer and provides an example of its implementation. + +- [Configuring the Category Item Highlight Layer (igDataChart)](/hoverinteractions-category-item-highlight-layer.mdx): This topic provides information about the category item highlight layer used for hover interactions. It describes the properties of the category item highlight layer and provides an example of its implementation. + +- [Configuring the Category Tooltip Layer (igDataChart)](/hoverinteractions-category-tooltip-layer.mdx): This topic provides information about the category tooltip layer used for hover interactions. It describes the properties of the category tooltip layer and provides an example of its implementation. + +- [Configuring the Item Tooltip Layer (igDataChart)](/hoverinteractions-item-tooltip-layer.mdx): This topic provides information about the item tooltip layer which is used for hover interactions. It describes the properties of the item tooltip layer and also provides an example of its implementation. + + +### Samples + +The following samples provide additional information related to this topic. + +- [Hover Interactions – Category Highlight Layer](./00_HoverInteractions_Category_Highlight_Layer.mdx#example): This sample demonstrates the Category Highlight Layer that targets a category axis, or all category axes in the `igDataChart`™ control. The sample options pane allows you to edit the properties of the Category Highlight Layer, such as changing the color of the highlight, outline, thickness and more. + +- [Hover Interactions – Category Item Highlight Layer](./01_HoverInteractions_Category_Item_Highlight_Layer.mdx#example): This sample demonstrates the Category Item Highlight Layer that highlights items in a series that use a category axis either by drawing a banded shape at their position or by rendering a marker at their position.The sample options pane allows you to edit the properties of the Category Item Highlight Layer, such as changing the color of the highlight, outline, thickness and more. + +- [Hover Interactions – Category Tooltip Layer](./02_HoverInteractions_Category_Tooltip_Layer.mdx#example): This sample demonstrates the Category Tooltip Layer that displays grouped tooltips for series that use a category axis. The sample options pane allows you to edit the properties of the layer, such as changing the position of the tooltip. + +- [Hover Interactions – Item Tooltip Layer](./04_HoverInteractions_Item_Tooltip_Layer.mdx#example): This sample demonstrates the Item Tooltip Layer that displays tooltips for all target series individually. The sample options pane allows you to edit the properties of the layer, such as changing the transition duration. + +- [Hover Interactions – Multiple Layers]({environment:SamplesUrl}/data-chart/multiple-layers): This sample demonstrates how multiple layers interact within the `igDataChart` control. This sample displays the Item Tooltip Layer, the Crosshair layer and the Category Highlight Layer. + + + + + + + diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/hover-interactions/final-value-layer.mdx b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/hover-interactions/final-value-layer.mdx new file mode 100644 index 0000000000..4ce6a1f1c4 --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/hover-interactions/final-value-layer.mdx @@ -0,0 +1,90 @@ +--- +title: "Configuring the Final Value Layer (igDataChart)" +slug: hoverinteractions-final-value-layer +--- + +# Configuring the Final Value Layer (igDataChart) + + +## Topic Overview + +### Purpose + + +This topic provides information about the final value layer annotations. It describes the properties of the final value layer and also provides an example of its implementation. + +### Required background + +The following topics are prerequisites to understanding this topic: + +- [Adding igDataChart](//igdatachart-adding.mdx): This topic demonstrates how to add the `igDataChart`™ control to a page and bind it to data. + +- [Binding igDataChart to Data](//igdatachart-databinding.mdx): This topic explains how to bind the `igDataChart`™ control to various data sources (JavaScript array, `IQueryable`, web service). + + +### In this topic + +This topic contains the following sections: + +- [Overview](#overview) + - [Preview](#preview) +- [Properties](#properties) +- [Example](#example) +- [Related Content](#related-content) + - [Topics](#topics) + - [Samples](#samples) + + +## Overview + +The `finalValueLayer` displays annotations based on the final value of data in the chart. + +### Preview + +The following image is a preview of how the `igDataChart` control renders with the `finalValueLayer` added. + +![](images/jQuery_Final_Value_Layer_01.png) + + +## Properties + +#### Item tooltip layer summary + +The following table summarizes the properties of the `finalValueLayer` layer. + +Property Name | Property Type | Description +---|---|--- +finalValueSelectionMode | `enumeration` | Specifies method for how the final value is identified. + +## Example + +The code snippet below demonstrates how to enable the final value layer. + +*In HTML:* + +```html +$(function () { + $("#chart1").igDataChart({ + series: [ + { + name: "finalValueSeries", + type: "finalValueLayer" + } + ] + }); +}); +``` + + +## Related Content + +### Topics + +- [Hover Interactions Overview (igDataChart)](//overview/hoverinteractions-hover-interactions-overview.mdx): This topic provides conceptual information about the hover interactions available on the `igDataChart` control including the different types of hover interaction layers available. + + +### Samples + +The following samples provide additional information related to this topic. + +- [Hover Interactions – Multiple Layers]({environment:SamplesUrl}/data-chart/final-value-layer): This sample demonstrates using the Final Value annotation layer in the `igDataChart`. diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/hover-interactions/hover-interactions.mdx b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/hover-interactions/hover-interactions.mdx new file mode 100644 index 0000000000..91388bc2e3 --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/hover-interactions/hover-interactions.mdx @@ -0,0 +1,36 @@ +--- +title: "Configuring Hover Interactions (igDataChart)" +slug: hoverinteractions-hover-interactions +--- + +# Configuring Hover Interactions (igDataChart) + +## In This Group of Topics + +### Introduction + +The topics in this group explain the hover interaction feature. + +In order to implement all hover, highlight and tooltip interactions, layers are added to the `igDataChart` control, such as the Crosshair and Category Highlight layers. + +![](images/jQuery_Multiple_Layers_01.png) + +### Topics + +- [Hover Interactions Overview (igDataChart)](//overview/hoverinteractions-hover-interactions-overview.mdx): This topic provides conceptual information about the hover interactions available on the igDataChart control including the different types of hover interaction layers available. + +- [Hover Interactions Property Reference (igDataChart)](/hoverinteractions-common-properties.mdx): This topic provides information about the properties and methods that the hover interaction feature uses for highlighting, hovering and interacting with the tooltip interactions inherited from the series class. + +- [Configuring the Crosshair Layer (igDataChart)](/hoverinteractions-crosshair-layer.mdx): This topic provides information about the crosshair layer used for hover interactions. It describes the properties of the crosshair layer and provides an implementation example. + +- [Configuring the Category Highlight Layer (igDataChart)](/hoverinteractions-category-highlight-layer.mdx): This topic provides information about the category highlight layer which is used for hover interactions. It describes the properties of the category highlight layer and provides an example of its implementation. + +- [Configuring the Category Item Highlight Layer (igDataChart)](/hoverinteractions-category-item-highlight-layer.mdx): This topic provides information about the category item highlight layer used for hover interactions. It describes the properties of the category item highlight layer and provides an example of its implementation. + +- [Configuring the Category Tooltip Layer (igDataChart)](/hoverinteractions-category-tooltip-layer.mdx): This topic provides information about the category tooltip layer used for hover interactions. It describes the properties of the category tooltip layer and provides an example of its implementation. + +- [Configuring the Item Tooltip Layer (igDataChart)](/hoverinteractions-item-tooltip-layer.mdx): This topic provides information about the item tooltip layer which is used for hover interactions. It describes the properties of the item tooltip layer and also provides an example of its implementation. + +- [Configuring the Final Value Layer (igDataChart)](/hoverinteractions-final-value-layer.mdx): This topic provides information about the final value layer which is used for axis annotations. It describes the properties of the final value layer and also provides an example of its implementation. + +- [Configuring the Callout Layer (igDataChart)](/hoverinteractions-callout-layer.mdx): This topic provides information about the callout layer which is used for annotations. It describes the properties of the callout layer and also provides an example of its implementation. diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/hover-interactions/images/jQuery_Callout_Layer_01.png b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/hover-interactions/images/jQuery_Callout_Layer_01.png new file mode 100644 index 0000000000..873f2ee6b9 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/hover-interactions/images/jQuery_Callout_Layer_01.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/hover-interactions/images/jQuery_Category_Highlight_Layer_01.png b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/hover-interactions/images/jQuery_Category_Highlight_Layer_01.png new file mode 100644 index 0000000000..3954030326 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/hover-interactions/images/jQuery_Category_Highlight_Layer_01.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/hover-interactions/images/jQuery_Category_Highlight_Layer_02.png b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/hover-interactions/images/jQuery_Category_Highlight_Layer_02.png new file mode 100644 index 0000000000..4b04e313b6 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/hover-interactions/images/jQuery_Category_Highlight_Layer_02.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/hover-interactions/images/jQuery_Category_Tooltip_Layer_01.png b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/hover-interactions/images/jQuery_Category_Tooltip_Layer_01.png new file mode 100644 index 0000000000..cfd0792203 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/hover-interactions/images/jQuery_Category_Tooltip_Layer_01.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/hover-interactions/images/jQuery_Category_Tooltip_Layer_02.png b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/hover-interactions/images/jQuery_Category_Tooltip_Layer_02.png new file mode 100644 index 0000000000..1a74c622d7 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/hover-interactions/images/jQuery_Category_Tooltip_Layer_02.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/hover-interactions/images/jQuery_Crosshair_Layer_01.png b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/hover-interactions/images/jQuery_Crosshair_Layer_01.png new file mode 100644 index 0000000000..5905c3056c Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/hover-interactions/images/jQuery_Crosshair_Layer_01.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/hover-interactions/images/jQuery_Crosshair_Layer_02.png b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/hover-interactions/images/jQuery_Crosshair_Layer_02.png new file mode 100644 index 0000000000..8d9df16ec5 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/hover-interactions/images/jQuery_Crosshair_Layer_02.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/hover-interactions/images/jQuery_Final_Value_Layer_01.png b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/hover-interactions/images/jQuery_Final_Value_Layer_01.png new file mode 100644 index 0000000000..fb3c3c6e31 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/hover-interactions/images/jQuery_Final_Value_Layer_01.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/hover-interactions/images/jQuery_Hover_Interactions_Legend_01.png b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/hover-interactions/images/jQuery_Hover_Interactions_Legend_01.png new file mode 100644 index 0000000000..835d4a6166 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/hover-interactions/images/jQuery_Hover_Interactions_Legend_01.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/hover-interactions/images/jQuery_Item_Highlight_Layer_01.png b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/hover-interactions/images/jQuery_Item_Highlight_Layer_01.png new file mode 100644 index 0000000000..b49f9ab47a Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/hover-interactions/images/jQuery_Item_Highlight_Layer_01.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/hover-interactions/images/jQuery_Item_Highlight_Layer_02.png b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/hover-interactions/images/jQuery_Item_Highlight_Layer_02.png new file mode 100644 index 0000000000..219542af4b Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/hover-interactions/images/jQuery_Item_Highlight_Layer_02.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/hover-interactions/images/jQuery_Item_Tooltip_Layer_01.png b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/hover-interactions/images/jQuery_Item_Tooltip_Layer_01.png new file mode 100644 index 0000000000..0b15c26355 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/hover-interactions/images/jQuery_Item_Tooltip_Layer_01.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/hover-interactions/images/jQuery_Item_Tooltip_Layer_02.png b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/hover-interactions/images/jQuery_Item_Tooltip_Layer_02.png new file mode 100644 index 0000000000..6c96b6f08d Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/hover-interactions/images/jQuery_Item_Tooltip_Layer_02.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/hover-interactions/images/jQuery_Multiple_Layers_01.png b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/hover-interactions/images/jQuery_Multiple_Layers_01.png new file mode 100644 index 0000000000..5d0a26c4db Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/hover-interactions/images/jQuery_Multiple_Layers_01.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/hover-interactions/item-tooltip-layer.mdx b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/hover-interactions/item-tooltip-layer.mdx new file mode 100644 index 0000000000..0c843c56e2 --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/hover-interactions/item-tooltip-layer.mdx @@ -0,0 +1,107 @@ +--- +title: "Configuring the Item Tooltip Layer (igDataChart)" +slug: hoverinteractions-item-tooltip-layer +--- + +# Configuring the Item Tooltip Layer (igDataChart) + + +## Topic Overview + +### Purpose + + +This topic provides information about the item tooltip layer which is used for hover interactions. It describes the properties of the item tooltip layer and also provides an example of its implementation. + +### Required background + +The following topics are prerequisites to understanding this topic: + +- [Adding igDataChart](//igdatachart-adding.mdx): This topic demonstrates how to add the `igDataChart`™ control to a page and bind it to data. + +- [Binding igDataChart to Data](//igdatachart-databinding.mdx): This topic explains how to bind the `igDataChart`™ control to various data sources (JavaScript array, `IQueryable`, web service). + + +### In this topic + +This topic contains the following sections: + +- [Overview](#overview) + - [Preview](#preview) +- [Properties](#properties) +- [Example](#example) +- [Related Content](#related-content) + - [Topics](#topics) + - [Samples](#samples) + + +## Overview + +#### Item tooltip layer overview + +The `itemToolTipLayer` displays tooltips for all the series on the `igDataChart` control individually when the mouse hovers over that particular series. + +The tooltip style is inherited from the chart; however you can override this default behavior by setting the `toolTipStyle` property. For more information on this property see the [Properties](#properties) section below. + +### Preview + +The following image is a preview of the `igDataChart` control renders with the `itemToolTipLayer` added. + +![](images/jQuery_Item_Tooltip_Layer_01.png) + + +## Properties + +#### Item tooltip layer summary + +The following table summarizes the properties of the `itemToolTipLayer` layer. + +Property Name | Property Type | Description +---|---|--- +targetSeries | series | This property specifies which series should have an enabled item tooltip layer. It is possible to create a separate item tooltip layer for each series and configure them individually. +toolTipStyle | style | This property specifies a style to apply to the displayed tooltip. By default, the tooltip inherits its style from the chart, but setting this property will override this default setting. +pointerToolTipStyle | style | This property specifies a style to apply to the pointer area of the tooltip. +useInterpolation | bool | This property specifies if the tooltip’s x position should be interpolated rather than snapping to the gridlines or the center spaces. + + +## Example + +This sample demonstrates the Item Tooltip Layer that displays tooltips for all target series individually. +The sample options pane allows you to edit the properties of the layer, such as changing the transition duration. + +
+ [Item Tooltip Layer]({environment:SamplesEmbedUrl}/data-chart/item-tooltip-layer) + ![](images/jQuery_Item_Tooltip_Layer_01.png) +
+ + +## Related Content + +### Topics + +- [Hover Interactions Overview (igDataChart)](//overview/hoverinteractions-hover-interactions-overview.mdx): This topic provides conceptual information about the hover interactions available on the `igDataChart` control including the different types of hover interaction layers available. + +- [Hover Interactions Property Reference (igDataChart)](/hoverinteractions-common-properties.mdx): This topic provides information about the properties and methods that the hover interaction feature uses for highlighting, hovering and interacting with the tooltip interactions inherited from the `series` class. + +- [Configuring the Category Highlight Layer (igDataChart)](/hoverinteractions-category-highlight-layer.mdx): This topic provides information about the category highlight layer which is used for hover interactions. It describes the properties of the category highlight layer and provides an example of its implementation. + +- [Configuring the Category Item Highlight Layer (igDataChart)](/hoverinteractions-category-item-highlight-layer.mdx): This topic provides information about the category item highlight layer used for hover interactions. It describes the properties of the category item highlight layer and provides an example of its implementation. + +- [Configuring the Category Tooltip Layer (igDataChart)](/hoverinteractions-category-tooltip-layer.mdx): This topic provides information about the category tooltip layer used for hover interactions. It describes the properties of the category tooltip layer and provides an example of its implementation. + +- [Configuring the Crosshair Layer (igDataChart)](/hoverinteractions-crosshair-layer.mdx): This topic provides information about the crosshair layer used for hover interactions. It describes the properties of the crosshair layer and provides an implementation example. + + +### Samples + +The following samples provide additional information related to this topic. + +- [Hover Interactions – Category Highlight Layer](./00_HoverInteractions_Category_Highlight_Layer.mdx#example): This sample demonstrates the Category Highlight Layer that targets a category axis, or all category axes in the `igDataChart`™ control. The sample options pane allows you to edit the properties of the Category Highlight Layer, such as changing the color of the highlight, outline, thickness and more. + +- [Hover Interactions – Category Item Highlight Layer](./01_HoverInteractions_Category_Item_Highlight_Layer.mdx#example): This sample demonstrates the Category Item Highlight Layer that highlights items in a series that use a category axis either by drawing a banded shape at their position or by rendering a marker at their position.The sample options pane allows you to edit the properties of the Category Item Highlight Layer, such as changing the color of the highlight, outline, thickness and more. + +- [Hover Interactions – Category Tooltip Layer](./02_HoverInteractions_Category_Tooltip_Layer.mdx#example): This sample demonstrates the Category Tooltip Layer that displays grouped tooltips for series that use a category axis. The sample options pane allows you to edit the properties of the layer, such as changing the position of the tooltip. + +- [Hover Interactions – Crosshair Layer](./03_HoverInteractions_Crosshair_Layer.mdx#example): This sample demonstrates the Crosshair Layer that provides crossing lines that meet at the actual value of every series that they are targeting. The sample options pane allows you to edit the properties of the layer, such as changing the thickness of the crosshair. + +- [Hover Interactions – Multiple Layers]({environment:SamplesUrl}/data-chart/multiple-layers): This sample demonstrates how multiple layers interact within the `igDataChart` control. This sample displays the Item Tooltip Layer, the Crosshair layer and the Category Highlight Layer. \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/igchart-transitions-in-animations.mdx b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/igchart-transitions-in-animations.mdx new file mode 100644 index 0000000000..7dd4164248 --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/igchart-transitions-in-animations.mdx @@ -0,0 +1,142 @@ +--- +title: "Transitions In Animations" +slug: igchart-transitions-in-animations +--- + +# Transitions In Animations + + +##Topic Overview + + +### Purpose + +This topic provides information on enabling the `igDataChart`™ controls transition animation feature along with a listing of the supported series. + +### Required background + +The following topic is a prerequisite to understanding this topic: + +- [Adding igDataChart](/igdatachart-adding.mdx) + +This topic demonstrates how to add the `igDataChart`™ control to a page and bind it to data. + + +### In this topic + +This topic contains the following sections: + +- [Introduction](#introduction) + - [Overview](#overview) + - [Supported series](#supported-series) + - [Supported transition types](#supported-transition-types) + - [Supported transition speed types](#supported-transition-speed-types) + - [Supported easing function types](#supported-easing-function-types) +- [Configuring the Transition In Animations](#transition-in-animations) + - [Overview](#transition-overview) + - [Example](#transition-example) +- [Related Content](#related-content) + - [Topics](#topics) + - [Samples](#samples) + + +##Introduction + + +### Overview + +This feature allows you to animate the series as it loads a new data source. The available animation differs depending on the type of series involved. For example, the `columnSeries` animates by rising from the x-axis, a `lineSeries` animates by drawing from the y-axis. Refer to the following sample to see how the different series animate visually, [Transition Animation]({environment:SamplesUrl}/data-chart/transition-animation) and [Transition Animation (Financial)](./08_igChart_Transitions_In_Animations.mdx#transition-example). + +Enable animated transitions by setting the `isTransitionInEnabled` property to “`true`”. + +By default, animated transitions are disabled. + +Animated transitions can be configured in terms of transition type, speed of the individual data points relative to each other, and the easing transition (managed by an easing function). + +### Supported series + +The following series types support the transition animations feature: + +- Category Series +- Range Category Series +- Financial Price Series +- Financial Indicators + +### Supported transition types + +Many types of animated transitions are supported based on the nature of the movement and its direction: + +- `fromZero` – Series transitions in from the reference value of the value axis. +- accordion-type transitions: + - From side: + - `accordionFromLeft` – Series accordions in from the left. + - `accordionFromRight` – Series accordions in from the right. + - `accordionFromTop` – Series accordions in from the top. + - `accordionFromBottom` – Series accordions in from the bottom. + - From an axis: + - `accordionFromCategoryAxisMinimum` – Series accordions in from the category axis minimum. + - `accordionFromCategoryAxisMaximum` – Series accordions in from the category axis maximum. + - `accordionFromValueAxisMaximum` – Series accordions in from the value axis maximum. + - `accordionFromValueAxisMinimum` – Series accordions in from the value axis minimum. +- `expand` – Series expands from the value midpoints. +- Sweep-type transitions: + - From side: + - `sweepFromLeft` – Series sweeps in from the left + - `sweepFromRight` – Series sweeps in from the right + - `sweepFromTop` – Series sweeps in from the top. + - `sweepFromBottom` – Series sweeps in from the bottom. + - `sweepFromCenter` – Series sweeps in from the center. + - From an axis: + - `sweepFromCategoryAxisMaximum` – Series sweeps in from the category axis maximum. + - `sweepFromCategoryAxisMinimum` – Series sweeps in from the category axis minimum. + - `sweepFromValueAxisMaximum` – Series sweeps in from the value axis maximum. + - `sweepFromValueAxisMinimum` – Series sweeps in from the value axis minimum. + +### Supported transition speed types + +The transition’s speed type determines the speed of the individual items of the current series’s transition relative to each other as the animated transition is playing. The following are the different speed types: + +- `auto` – Automatically selects a speed type. +- `indexScaled` – Data points arrive later if their index is further from the axis origin. +- `normal` – All speeds are normal, data points arrive at the same time. +- `random` – Data points arrive at random times. +- `valueScaled` - Data points arrive later if their value is further from the starting point. + +### Supported easing function types + +The easing function determines what way the animation initially eases in. Apply any easing function. It is set to `cubicEase` by default. + + +##Configuring the Transition In Animations + + +### Overview + +The transition type is configured by setting the `transitionInMode` property to the desired transition name. Automatic selection of the transition type based on the series type is possible, too, by setting the property to “auto” (default). + +### Example + +The following example demonstrates how to enable and change transition in animations for the financial chart: + +
+ [Transition Animation (Financial)]({environment:SamplesEmbedUrl}/data-chart/transition-animation-financial) +
+ +##Related Content + + +### Topics + +The following topic provides additional information related to this topic: + +- [Adding igDataChart](/igdatachart-adding.mdx) + +This topic demonstrates how to add the `igDataChart`™ control to a page +and bind it to data. + + +### Samples +The following samples provide additional information related to this topic. + + +- [Transition Animation]({environment:SamplesUrl}/data-chart/transition-animation): This sample demonstrates the animation feature that is displayed at the chart initialization. \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/images/igDataChart_(TimeXAxis)_1.PNG b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/images/igDataChart_(TimeXAxis)_1.PNG new file mode 100644 index 0000000000..a75ce9ef3a Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/images/igDataChart_(TimeXAxis)_1.PNG differ diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/images/igDataChart_(TimeXAxis_Break)_1.PNG b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/images/igDataChart_(TimeXAxis_Break)_1.PNG new file mode 100644 index 0000000000..1d39d85150 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/images/igDataChart_(TimeXAxis_Break)_1.PNG differ diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/images/igDataChart_(TimeXAxis_Interval)_1.PNG b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/images/igDataChart_(TimeXAxis_Interval)_1.PNG new file mode 100644 index 0000000000..8181cb1cfa Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/images/igDataChart_(TimeXAxis_Interval)_1.PNG differ diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/images/igDataChart_(TimeXAxis_LabelFormats)_1.PNG b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/images/igDataChart_(TimeXAxis_LabelFormats)_1.PNG new file mode 100644 index 0000000000..1fab2785d8 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/images/igDataChart_(TimeXAxis_LabelFormats)_1.PNG differ diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/images/igDataChart_Chart_Title_01.png b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/images/igDataChart_Chart_Title_01.png new file mode 100644 index 0000000000..6cacdb1a6b Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/images/igDataChart_Chart_Title_01.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/images/igDataChart_Chart_Title_02.png b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/images/igDataChart_Chart_Title_02.png new file mode 100644 index 0000000000..8c77faf031 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/images/igDataChart_Chart_Title_02.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/images/igDataChart_percent_change_y_axis.PNG b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/images/igDataChart_percent_change_y_axis.PNG new file mode 100644 index 0000000000..ba6bd6f998 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/images/igDataChart_percent_change_y_axis.PNG differ diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/images/jQuery_AxisIntervals_NumericY_01.png b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/images/jQuery_AxisIntervals_NumericY_01.png new file mode 100644 index 0000000000..99cf33fb88 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/images/jQuery_AxisIntervals_NumericY_01.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/images/jQuery_Axis_Title_01.png b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/images/jQuery_Axis_Title_01.png new file mode 100644 index 0000000000..e439c18470 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/images/jQuery_Axis_Title_01.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/images/jQuery_Axis_Title_02.png b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/images/jQuery_Axis_Title_02.png new file mode 100644 index 0000000000..7ab270930f Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/images/jQuery_Axis_Title_02.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/images/jQuery_Series_Highlighting_01.png b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/images/jQuery_Series_Highlighting_01.png new file mode 100644 index 0000000000..5e11a953aa Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/images/jQuery_Series_Highlighting_01.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/images/jQuery_Series_Highlighting_02.png b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/images/jQuery_Series_Highlighting_02.png new file mode 100644 index 0000000000..8332db6c98 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/images/jQuery_Series_Highlighting_02.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/images/jquery-ordinal-time-x-formatted.PNG b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/images/jquery-ordinal-time-x-formatted.PNG new file mode 100644 index 0000000000..f7f3a189bb Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/images/jquery-ordinal-time-x-formatted.PNG differ diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/images/jquery-ordinal-time-x.PNG b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/images/jquery-ordinal-time-x.PNG new file mode 100644 index 0000000000..77ac7d0d80 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/images/jquery-ordinal-time-x.PNG differ diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/images/jquery_axisintervals_categoryx_01.png b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/images/jquery_axisintervals_categoryx_01.png new file mode 100644 index 0000000000..2f4a472b51 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/images/jquery_axisintervals_categoryx_01.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/images/jquery_axisintervals_numericx_01.png b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/images/jquery_axisintervals_numericx_01.png new file mode 100644 index 0000000000..505bb588ee Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/images/jquery_axisintervals_numericx_01.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/images/jquery_axisintervals_numericxy_01.png b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/images/jquery_axisintervals_numericxy_01.png new file mode 100644 index 0000000000..960c9b0bf7 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/images/jquery_axisintervals_numericxy_01.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/knockoutjs-support.mdx b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/knockoutjs-support.mdx new file mode 100644 index 0000000000..c9974d07fb --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/knockoutjs-support.mdx @@ -0,0 +1,199 @@ +--- +title: "Configuring Knockout Support (igDataChart)" +slug: igdatachart-knockoutjs-support +--- +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# Configuring Knockout Support (igDataChart) + + +##Topic Overview + +### Purpose + +This topic explains how to configure the `igDataChart`™ control to bind to View-Model objects managed by the Knockout library. + +### Required background + +The following table lists the topics and external resources required as a prerequisite to understanding this topic. + +**Topics** + +- [igDataChart Overview](/overview/igdatachart-overview.mdx) : This topic provides conceptual information about the `igDataChart` control including its main features, minimum requirements for using charts and user functionality. + +- [Series Type (igDataChart)](/overview/igdatachart-series-types.mdx): This topic shows all kinds of charts that can be produced with the help of the `igDataChart` control. + +- [Adding an igDataChart](/igdatachart-adding.mdx): This topic demonstrates how to add the `igDataChart` control to a page and bind it to data. + + +**External Resources** + +- [**Knockout Interactive Tutorials**](http://learn.knockoutjs.com/#/?tutorial=intro) + +##Introduction + +### Knockout support summary + +The support for the Knockout library in the `igDataChart` control is intended to make it easier for developers to use the Knockout library and its declarative syntax to instantiate and configure chart controls. + +Implementing Knockout support as a Knockout extension, initially invoked when applying Knockout bindings to a page and throughout the page’s life whenever external updates to the View-Model occur. + +To instantiate a chart control bound to a Knockout managed data structure you need to specify `igDataChart` configuration options into data-bind attribute of an HTML div or span element. The chart renders at the location of the HTML tag just like if you create the control using JavaScript. Additional information on its more commonly used options please refer to the [](#Configuring_igDataChart)[Configuring `igDataChart` with Knockout Support](#Configuring_igDataChart) section. You can also specify all of the other igDataChart options in the data-bind attribute that are relevant to your business case. + +>**Note:** The knockout support is only valid from the View-Model to the View +- in our case the `igDataChart` control. Updates to the View-Model, in our case passed as dataSource property to the `igDataChart`, notify the `igDataChart` UI, and animates the rendering of the new value. Using the API methods to edit the `igDataChart` will not update the View-Model. It is impossible to update the `igDataChart` from the View as it lives inside HTML Canvas element. + +>**Note:** The knockout extension for `igDataChart` adds a hidden HTML div element to the browser DOM tree containing the UL list. This is necessary because the chart is a single HTML Canvas element, but the binding handlers of each of the chart items requires additional DOM element, in this case its HTML LI. Keep this in mind when visualizing significantly large data sets. + + +## Configuring igDataChart with Knockout Support + + +### Configuring igDataChart with knockout support summary chart + +The following table maps the configuration tasks of the `igDataChart` control related to Knockout usage scenarios to their respective properties for managing those tasks. Code examples of some practical implementations are available following the table. + + +| Configuration task | Required? | Details | Properties | +| --- | --- | --- | --- | +| Specifying data source for chart items | Required | The property for configuring the data source for the chart dataSource. It can be flat data source, as shown in the [Code Example:](#Code_Example_igDataChart) [Configure igDataChart for editing, adding and deleting an item](#Code_Example_igDataChart) section below. **Note:** Setting this option as Observable, allows direct access for adding and removing elements to and from the data source with taking place immediately, and updates the chart. **Note:** If any individual data source record, configured with its properties as observable, will result in updates then updates to those records have immediate affect on the *igDataChart* item. **It is impossible to bind a chart to an array of data sources when using the chart extension for Knockout JS.** | | +| Configuring the member paths that will show the data visualization. | Required | Depending on the type of series you may use different member paths and map a path with data source record object fields resulting in the data for that option being shown in the chart. For more information about the series and their corresponding member paths please refer to the [Series Type (*igDataChart*)](/overview/igdatachart-series-types.mdx) topic. | | + + +##Code Example: Configure igDataChart for Editing, Adding and Deleting an Item + + +### Description + +This example shows how to instantiate an `igDataChart` control and bind it to a data structure managed by Knockout. Using the declarative syntax of Knockout, instantiate the chart from the data-bind attribute of a div element and bind to the View-Model observable properties. + +### Code + +The code snippet below shows a View-Model object that has observable flat structure and properties managed by Knockout. In this example, explicitly declaring the data structure is for clarity; however, in a real-world case with a remote data source (*i.e.**,* database) providing the data the data will be in the form of a JSON. The data then can be made observable by using the Knockout Mapping library. + +>**Note:** Both the array structures and individual object fields are declared as observable. Hence it will be able to update the View when a data item is added, removed or changed, or it can change the View-Model when the user makes edits. + +**In JavaScript:** + +```js +var viewModel = { + data: ko.observableArray( + [{ + label: ko.observable("I"), + value1: ko.observable(90.34), + value2: ko.observable(15.77), + value3: ko.observable(10.09) + }, { + label: ko.observable("II"), + value1: ko.observable(45.11), + value2: ko.observable(80.12), + value3: ko.observable(9.89) + }, { + . . . + }]; + ); +} +``` + +The following code snippet shows how to apply the declared Knockout bindings to the page. + +>**Note:** The `ko.applyBindings()` call is made within the Loader’s ready callback. This is necessary because the chart extension for Knockout needs to be loaded into the page before the bindings are applied. + +**In JavaScript:** + +```js +$.ig.loader({ + scriptPath: "http://localhost/ig_ui/js/", + cssPath: "http://localhost/ig_ui/css/", + resources: "igDataChart.Category,extensions/infragistics.ui.datachart.knockout-extensions.js", + ready: function () { + ko.applyBindings(viewModel); + } +}); +``` + +The following code snippet demonstrates how to declare binding options in your View, for a chart control that you want to consist of three different line series. The most important part is the declaration of the instantiation options in the data-bind attribute of the div element. + +**In HTML:** + +```html +
+``` + +When the control is bound to the View-Model through Knockout it will receive notifications of any changes. + +The control can be bound to a non-observable array and object fields, but doing so will cause you to lose the updating functionality making such a scenario pointless to use in the context of KnockoutJS. + +##Live Example: Edit Chart Items with KnockoutJS + +This example demonstrates the igDataChart control reacting to changes in the data source by the Knockout View-Model. Note that the chart is updated without having to re-bind the control. By default, the sample shows the market revenue and expenses for the first 10 days of the month. You can add/remove days and move items along the chart and observe money flow on the market changing accordingly. + +>**Note:** The Knockout extensions do not work with the {environment:ProductNameMVC}. + +
+ [{environment:SamplesEmbedUrl}/data-chart/edit-chart-items-with-knockout]({environment:SamplesEmbedUrl}/data-chart/edit-chart-items-with-knockout) +
+ +##Related Content + + +### Topics + +The following topics provide additional information related to this topic. + +- [igDataChart Overview](/overview/igdatachart-overview.mdx): This topic provides conceptual information about the `igDataChart` control including its main features, minimum requirements for using charts and user functionality. + +- [Series Type (igDataChart)](/overview/igdatachart-series-types.mdx): This topic shows all kinds of charts that can be produced with the help of the `igDataChart` control. + +- [Adding an igDataChart](/igdatachart-adding.mdx): This topic demonstrates how to add the `igDataChart` control to a page and bind it to data. + +- [Configuring Knockout Support (igCombo)](//igcombo/configuring/configuring.mdx): This topic explains how to configure the `igCombo` control to bind to View-Model objects managed by the Knockout library. + +- [Configuring Knockout Support (igEditors)](../../igEditors/Config/02_Configuring Knockout Support (Editors).mdx): This topic explains how to configure {environment:ProductName} editor controls to bind to View-Model objects using the Knockout library. + +- [Configuring Knockout Support (igTree)](//igtree/knockoutjs-support.mdx): This topic explains how to configure the `igTree` control to bind to View-Model objects managed by the Knockout library. + + +### Samples + +The following samples provide additional information related to this topic. + +- [Bind igDataChart with KnockoutJS]({environment:SamplesUrl}/data-chart/bind-data-chart-with-ko): The sample demonstrates binding `igDataChart` with Knockout View-Model, using Infragistics Knockout extension for the control. + + +### Resources + +The following information (available outside the Infragistics family of content) provides additional information related to this topic. + +- [Knockout Web Site](http://knockoutjs.com/): This is the home page of the Knockout library where all the needed documentation and samples can be found. \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/navigation-features.mdx b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/navigation-features.mdx new file mode 100644 index 0000000000..5c05b4a2df --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/navigation-features.mdx @@ -0,0 +1,86 @@ +--- +title: "Configuring the Navigation Features (igDataChart)" +slug: igdatachart-configuring-navigation-features +--- +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# Configuring the Navigation Features (igDataChart) + + +##Topic Overview + +### Purpose + +This topic explains, with code examples, how to configure navigation features of the `igDataChart`™ control and how to use its API to define the position and size of the visible portion of the chart. + +### Required background + +The following topics are prerequisites to understanding this topic: + +- [](/overview/igdatachart-overview.mdx)[igDataChart Overview](/overview/igdatachart-overview.mdx): This topic provides conceptual information about the `igDataChart` control including its main features, minimum requirements for using charts and user functionality. + +- [](/igdatachart-adding.mdx)[Adding igDataChart](/igdatachart-adding.mdx): This topic demonstrates how to add the `igDataChart` control to a page and bind it to data. + +- [Binding igDataChart to Data](/igdatachart-databinding.mdx): This topic demonstrates how to bind the `igDataChart` control to various data sources (JavaScript array, `IQueryable`, web service). + + +### In this topic + +This topic contains the following sections: + +- [Introduction](#introduction) +- [Navigation Features Configuration Summary](#navigation) +- [Code Example](#example) +- [Related Content](#related-content) + - [Topics](#topics) + + +##Introduction + + +### Navigation features summary + +The `igDataChart` control provides an extensive set of navigation features along with options and methods for using them in your code. + +When enabled the Overview Plus Detail (OPD) panel appears on the lower right corner of the chart. It shows a thumbnail of the entire chart and contains buttons and slider for zooming. Additionally, you can drag the rectangle of the current view across the panel to position it on different regions. + +The user can perform zooming in and out with mouse scroll or Page Up/Down keys, panning with mouse drag or touch and drag, and other navigational actions all being controlled by option settings. For reference for all interactive features see [igDataChart Overview: User Interaction and Usability](igDataChart-Overview#user-interaction). + +As a developer, you can use the `igDataChart`’s options and methods to set the current chart position and get the coordinates of the current view, in various ways, as the user navigates to different regions. You can either present a specific view at initialization or change the view at runtime depending on the user input or dynamic actions. + + +##Navigation Features Configuration Summary + + +### Navigation features configuration summary chart + +The following table lists the configurable aspects of the `igDataChart` control regarding navigation features. + +Configurable aspect |Details |Properties +---|---|--- +OPD panel visibility |By default, the OPD panel is not shown. When configured to display, the OPD panel is shown in the lower right corner of the chart.|In JavaScript:

  • In ASP.NET MVC:
  • [OverviewPlusDetailPaneVisibility()](Infragistics.Web.Mvc~Infragistics.Web.Mvc.SeriesViewer`3~OverviewPlusDetailPaneVisibility.html)
    • +Default interaction|By default, panning is not allowed and zooming is the default dragging interaction. You can configure panning to be the default dragging interaction.|In JavaScript:

  • In ASP.NET MVC:
  • [DefaultInteraction()](Infragistics.Web.Mvc~Infragistics.Web.Mvc.SeriesViewer`3~DefaultInteraction.html)
    • +Panning modifier key|Modifier key to use when panning is not the default interaction.|In JavaScript:

  • In ASP.NET MVC:
  • [PanModifier()](Infragistics.Web.Mvc~Infragistics.Web.Mvc.SeriesViewer`3~PanModifier.html)
    • +Zooming modifier key|Modifier key to use when zooming is not the default interaction. By default, the Ctrl key switches to zooming.|In JavaScript:

  • In ASP.NET MVC:
  • [DragModifier()](Infragistics.Web.Mvc~Infragistics.Web.Mvc.SeriesViewer`3~DragModifier.html)
    • +Zooming|Vertical or/and horizontal zoom can be enabled or disabled, individually or at the same time.|In JavaScript:


  • In ASP.NET MVC:
  • [HorizontalZoomable()](Infragistics.Web.Mvc~Infragistics.Web.Mvc.SeriesViewer`3~HorizontalZoomable.html)
  • [VerticalZoomable()](Infragistics.Web.Mvc~Infragistics.Web.Mvc.SeriesViewer`3~VerticalZoomable.html)
    • +Setting the visible portion of the chart|Set the coordinates and size of the visible portion of the chart you want displayed.|In JavaScript:

  • In ASP.NET MVC:
  • [WindowRect()](Infragistics.Web.Mvc~Infragistics.Web.Mvc.SeriesViewer`3~WindowRect.html)
    • + +##Code Example + +This sample demonstrates various navigation methods available in the jQuery chart. Panning and zooming through the control’s content can be performed using built-in keyboard navigation (Arrows, Page Up/Down, Home key), built-in mouse navigation (Shift + mouse drag, mouse scroll, mouse down + mouse drag), and the overview plus detail pane, as well as from code-behind using the control's window position and scale properties. + +
    + [Chart Navigation]({environment:SamplesEmbedUrl}/data-chart/chart-navigation) +
    + + +##Related Content + + +### Topics + +The following topics provide additional information related to this topic. + +- [Configurable Visual Elements (igDataChart)](/overview/igdatachart-visual-elements.mdx): This topic lists all configurable visual elements of the `igDataChart` control and the properties that manage them. + +- [Series Types (igDataChart)](/overview/igdatachart-series-types.mdx): This topic shows all kinds of charts that can be produced with the help of the `igDataChart` control. \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/ordinaltimexaxis.mdx b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/ordinaltimexaxis.mdx new file mode 100644 index 0000000000..24b581fc6c --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/ordinaltimexaxis.mdx @@ -0,0 +1,144 @@ +--- +title: "Configuring the OrdinalTimeXAxis (igDataChart)" +slug: igdatachart-configuring-ordinaltimexaxis +--- + +# Configuring the OrdinalTimeXAxis (igDataChart) + +This topic demonstrates, with code examples, how to use the OrdinalTimeXAxis in the `igDataChart` control. The benefit of using this axis is to dynamically change date label formats as you zoom in or out of your data. + +### In this topic + +This topic contains the following sections: +- [Overview](#overview) +- [Axis Label Formats](#axis_label_formats) +- [Related Content](#related) + + +### Overview + +The OrdinalTimeXAxis may be used with the following series types: + +- Category Series +- Financial Indicators +- Financial Series + +The main difference between the `OrdinalTimeXAxis` and the `TimeXAxis` is that in the ordinal axis, the dates displayed are assumed to be equidistant. The `TimeXAxis` currently sorts and aligns them according to a chronological timescale. + +Below is a code example on how to add the `OrdinalTimeXAxis` to the chart: + +**In JavaScript:** + +```js +$(function () { + $("#chart").igDataChart({ + width: "700px", + height: "400px", + axes: [{ + name: "xAxis", + type: "ordinalTimeX", + dataSource: data, + dateTimeMemberPath: "Date", + }, + { + name: "yAxis", + type: "numericY", + }], + series: [{ + name: "series1", + dataSource: data, + type: "financial", + displayType: "candlestick", + xAxis: "xAxis", + yAxis: "yAxis", + openMemberPath: "Open", + highMemberPath: "High", + lowMemberPath: "Low", + closeMemberPath: "Close", + } + ], + }); +}); +``` + +Below is a screenshot demonstrating the usage of the OrdinalTimeXAxis with a `FinancialPriceSeries`: + +![](images/jquery-ordinal-time-x.png) + + + +### Axis Label Formats + +The `OrdinalTimeXAxis` has the `LabelFormats` property which is a collection of type `TimeAxisLabelFormat`. Each `TimeAxisLabelFormat` added to the collection is responsible for assigning a unique `Format` and `Range`. This can be especially useful for drilling data from years to milliseconds and adjusting the labels depending on the range of time shown by the chart. + +The following lists a typical set of label formats for the given amount of time in view: + +1. 1825 days or more (eg. 5 years) will result in a format of "yyyy". +2. 365 days or more (eg. 1 year) will result in a format of "MMM yy". +3. 1 day or more will result in a format of "MMM-dd-yy". +4. 5 hours or more will result in a format of "hh:mm". +5. Below 5 hours will result in a format of "hh:mm:ss". + +**In JavaScript:** +```js +$(function () { + $("#chart").igDataChart({ + width: "700px", + height: "400px", + axes: [{ + name: "xAxis", + type: "ordinalTimeX", + dataSource: data, + dateTimeMemberPath: "Date", + labelFormats: [ + { + format: "hh:mm:ss", + range: 1000 + }, + { + format: "hh:mm", + range: 60 * 1000 + }, + { + format: "MMM-dd-yy", + range: 24 * 60 * 60 * 1000 + }, + { + format: "MMM yy", + range: 365.24 * 24 * 60 * 60 * 1000 + }, + { + format: "yyyy", + range: 5 * 365 * 24 * 60 * 60 * 1000 + }], + + }, + { + name: "yAxis", + type: "numericY", + }], + series: [{ + name: "series1", + dataSource: data, + type: "financial", + displayType: "candlestick", + xAxis: "xAxis", + yAxis: "yAxis", + openMemberPath: "Open", + highMemberPath: "High", + lowMemberPath: "Low", + closeMemberPath: "Close", + } + ], + }); +}); +``` + +Below is a screenshot demonstrating the usage of the OrdinalTimeXAxis with a `FinancialPriceSeries` with label formatting: + +![](images/jquery-ordinal-time-x-formatted.png) + + +### Related Content +- [Adding igDataChart](/igdatachart-adding.mdx): This topic demonstrates how to add the `igDataChart` control to a page and bind it to data. +- [Configuring Time X-Axis](/igdatachart-configuring-timexaxis.mdx): This topic demonstrates how to use TimeXAxis in the `igDataChart` control. \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/percentchangeyaxis.mdx b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/percentchangeyaxis.mdx new file mode 100644 index 0000000000..6773d5606f --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/percentchangeyaxis.mdx @@ -0,0 +1,85 @@ +--- +title: "Configuring the PercentChangeYAxis (igDataChart)" +slug: igdatachart-configuring-percentchangeyaxis +--- + +# Configuring the PercentChangeYAxis (igDataChart) + +This topic demonstrates, with code examples, how to use the PercentChangeYAxis in the `igDataChart` control. This axis allows the ability to show percent values as opposed to the actual bound values to the chart. + +### In this topic + +This topic contains the following sections: +- [Overview](#overview) +- [Code Example](#code_example) +- [Related Content](#related) + + +### Overview + +The PercentChangeYAxis may be used with the following series types: + +- Category Series +- Range Series +- Financial Indicators +- Financial Series +- Scatter Series + +The PercentChangeYAxis works such that it takes the first data point in your series as a reference value. Each value after the first value is scaled according to what percent increase or decrease it is compared to the reference value. + +For CategorySeries, this reference value corresponds to the `ValueMemberPath` for those series. + +For ScatterSeries, the reference value will correspond to the `YMemberPath` for those series. + +For RangeSeries, the reference value will correspond to the first low value. + +For FinancialSeries and Financial Indicators, the reference value will correspond to the first "Open" value. + + +### Code Example + +The following code example demonstrates usage of the PercentChangeYAxis element in the igDataChart control. + +**In JavaScript:** + +```js +$(function () { + $("#chart").igDataChart({ + width: "100%", + height: "500px", + axes: [{ + name: "xAxis", + type: "categoryX", + dataSource: data, + label: "Date" + }, + { + name: "yAxis", + type: "percentChangeY", + }], + series: [{ + name: "series1", + dataSource: data, + type: "financial", + displayType: "candlestick", + xAxis: "xAxis", + yAxis: "yAxis", + openMemberPath: "Open", + highMemberPath: "High", + lowMemberPath: "Low", + closeMemberPath: "Close", + } + ], + }); +}); +``` + +The following screenshot depicts the igDataChart using the PercentChangeYAxis with a financial series: + +![](images/igDataChart_percent_change_y_axis.png) + + +### Related Content + +- [Adding igDataChart](/igdatachart-adding.mdx): This topic demonstrates how to add the `igDataChart` control to a page and bind it to data. +- [Configuring Ordinal Time X-Axis](/igdatachart-configuring-ordinaltimexaxis.mdx): This topic demonstrates how to use OrdinalTimeXAxis in the `igDataChart` control. \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/series-highlighting.mdx b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/series-highlighting.mdx new file mode 100644 index 0000000000..e2404c3b13 --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/series-highlighting.mdx @@ -0,0 +1,166 @@ +--- +title: "Configuring the Series Highlighting (igDataChart)" +slug: igdatachart-series-highlighting +--- + +# Configuring the Series Highlighting (igDataChart) + + +##Topic Overview + + +### Purpose + +This topic provides information on enabling the series highlighting feature along with a listing of the supported series. This topic also explains how to configure the series highlighting using the available events. + +### Required background + +The following topic is a prerequisite to understanding this topic: + + +[Adding igDataChart](/igdatachart-adding.mdx) + +This topic demonstrates how to add the `igDataChart`™ control to a page and bind it to data. + +### In this topic + +This topic contains the following sections: + +- [Series Highlighting](#series-highlighting) + - [Overview](#overview) + - [Preview](#preview) + - [Properties](#properties) + - [Example](#example) +- [Events](#events) + - [Overview](#events-overview) + - [Event Arguments Properties](#event-arguments-properties) + - [Example](#event-example) +- [Related Content](#related-content) + + +## Series Highlighting + + +### Overview + +This feature allows you to highlight an entire series or individual items within the series. For example, highlights the entire line in a series such as the `lineSeries` as it is all one shape; however, highlights can be applied to each individual column in a series such as `columnSeries`. Individual markers can be highlighted in all supported series. + +Currently the feature only supports highlighting via the mouse. + +The series highlighting feature is supported for the following series types: + +- Category Series +- RangeCategory Series + +- Financial Price Series +- Financial Indicators + +### Preview + +The following screenshot is a preview of the `igDataChart` control with a `columnSeries` and the series highlighting feature enabled. + +![](images/jQuery_Series_Highlighting_01.png) + +### Properties + +The following table summarizes the properties used for series highlighting. These properties are set on the supported series. + + +| | | | +| --- | --- | --- | +| Property Name | Property Type | Description | +| isHighlightingEnabled | boolean | Enables the series highlighting feature, by default it is set to False. | +| highlightingTransitionDuration | timeSpan | Determines the duration that the highlighting change takes. | + + +### Examples +This sample demonstrates the series highlighting feature on different series types by configuring the `isHighlightingEnabled` and `highlightingTransitionDuration` series properties. + +
    + [Series Highlighting]({environment:SamplesEmbedUrl}/data-chart/series-highlighting) + ![](images/jQuery_Series_Highlighting_01.png) +
    + +The following example shows the same functionality, applied to a financial chart. +
    + [Series Highlighting (Financial)]({environment:SamplesEmbedUrl}/data-chart/series-highlighting-financial) +
    + +## Events + + +### Overview + +There are two events that are specifically related to the series highlighting feature. + +- `assigningCategoryStyle` +- `assigningCategoryMarkerStyle` + +These events can be configured to achieve the following: + +- Modify the way that the highlighting is represented +- Modify the appearance properties assigned to the entire series such as a `lineSeries`, or each individual item in the series for the series having individual items such as `columnSeries`. + +When using the above series to configure the highlighting on the series, only the properties that are available on that particular series can be used. For example, overriding the fill or `radiusX` property of a `lineSeries` does not have any affect since those properties do not affect the `lineSeries`. + +### Event Arguments Properties + +The following table summarizes the properties of the `assigningCategoryStyleEventArgsBase`. + + +| | | | +| --- | --- | --- | +| Property Name | Property Type | Description | +| startIndex | int | Start index of the range of data that is currently being highlighted. | +| endIndex | int | End index of the range of the data that is currently being highlighted. | +| startDate | dateTime | Start date of the range of data that is currently being highlighted. | +| endDate | dateTime | End date of the range of data that is currently being highlighted. | +| getItems | getCategoryItemsEventHandler | Actual items from the data source being highlighted. However, if there is a lot of data and you called it every time the event was fired, will negatively impact performance. | +| Fill | brush | Overrides the default fill property of the series. However, this property only takes affect if the Fill property only affects that particular series. | +| stroke | brush | Overrides the default stroke property of the series. | +| opacity | double | Overrides the default the opacity property of the series. | +| highlightingInfo | higlightingInfo | Determine the styling of the highlighted series. | +| maxAllSeriesHighlightingProgress | double | Progress state of the highlighting of the series. Value from 0 to 1. | +| sumAllSeriesHighlightingProgress | double | Progress state of the highlighting of the series. Value from 0 to 1. | +| highlightingHandled | bool | When set to True the default highlighting does not apply. | +| HasDateRange | bool | | + + +The following table summarizes the properties of the `assigningCategoryMarkerStyleEventArgs` + + +| | | | +| --- | --- | --- | +| Property Name | Property Type | Description | +| strokeThickness | double | Overrides the default StrokeThickness property of the marker. | +| strokeDashArray | doubleCollection | Overrides the default StrokeDashArray property of the marker. | +| strokeDashCap | penLineCap | Overrides the default StrokeDashCap property of the marker. | +| radiusX | double | Overrides the default RadiusX property. | +| radiusY | double | Overrides the default RadiusY property. | + + +### Example + +The following example shows the usage of the `assigningCategoryStyle` event to change the highlighting feature to fade non highlighting columns instead of changing the highlighting column. + +
    + [Custom Series Highlighting]({environment:SamplesEmbedUrl}/data-chart/custom-series-highlighting) + ![](images/jQuery_Series_Highlighting_02.png) +
    + +## Related Content + + +### Topics + +The following topic provides additional information related to this topic: + + +- [Adding igDataChart](/igdatachart-adding.mdx): This topic demonstrates how to add the `igDataChart` control to a page and bind it to data. + + + + + + + diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/shape-series/images/jquery_mini_scatter_polygon_01.png b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/shape-series/images/jquery_mini_scatter_polygon_01.png new file mode 100644 index 0000000000..a1a276e797 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/shape-series/images/jquery_mini_scatter_polygon_01.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/shape-series/images/jquery_mini_scatter_polyline_01.png b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/shape-series/images/jquery_mini_scatter_polyline_01.png new file mode 100644 index 0000000000..884001ebe8 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/shape-series/images/jquery_mini_scatter_polyline_01.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/shape-series/images/jquery_scatter_polygon_01.png b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/shape-series/images/jquery_scatter_polygon_01.png new file mode 100644 index 0000000000..5f0c2b058d Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/shape-series/images/jquery_scatter_polygon_01.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/shape-series/images/jquery_scatter_polygon_02.PNG b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/shape-series/images/jquery_scatter_polygon_02.PNG new file mode 100644 index 0000000000..6791e0aa92 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/shape-series/images/jquery_scatter_polygon_02.PNG differ diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/shape-series/images/jquery_scatter_polyline_01.png b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/shape-series/images/jquery_scatter_polyline_01.png new file mode 100644 index 0000000000..ef74acb112 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/shape-series/images/jquery_scatter_polyline_01.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/shape-series/images/jquery_scatter_polyline_02.PNG b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/shape-series/images/jquery_scatter_polyline_02.PNG new file mode 100644 index 0000000000..b2bc985596 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/shape-series/images/jquery_scatter_polyline_02.PNG differ diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/shape-series/polygon-series.mdx b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/shape-series/polygon-series.mdx new file mode 100644 index 0000000000..3e3e2c1196 --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/shape-series/polygon-series.mdx @@ -0,0 +1,102 @@ +--- +title: "Configuring the Scatter Polygon Series (igDataChart)" +slug: shapeseries-polygon-series +--- + +# Configuring the Scatter Polygon Series (igDataChart) + +## Topic Overview + +### Purpose + +This topic provides information on how to use the scatter polygon series element in the `igDataChart` control. + +### Required background + +You should be familiar with the following topics before continuing: + +- [Adding igDataChart](//igdatachart-adding.mdx): This topic demonstrates how to add the `igDataChart`™ control to a page and bind it to data. + +- [Binding igDataChart to Data](//igdatachart-databinding.mdx): This topic explains how to bind the `igDataChart`™ control to various data sources (JavaScript array, `IQueryable`, web service). + + +### In this topic + +This topic contains the following sections: + +- [Overview](#overview) + - [Preview](#preview) +- [Data Requirements](#data-requirements) +- [Example](#example) +- [Related Content](#related-content) + - [Topics](#topics) + - [Samples](#samples) + +## Overview + +In the `igDataChart` control, scatter polygon series is a visual element that displays data using polygons. This type of series can render any shape that is desired. The scatter polygon series works a lot like the scatter polyline series except that data is rendered with polygons instead of polylines. + +### Preview + +The following is a preview of the `igDataChart` control with a scatter polygon series drawing a floor plan for a building. + +![](images/jquery_scatter_polygon_01.png) + +## Data Requirements + +Similar to other types of series in the `igDataChart` control, the scatter polygon series has the `dataSource` option for the purpose of data binding. This option is provided an array of items where each item must have one data column that stores point locations (X and Y values) of a shape as another array. This data column is mapped to the `shapeMemberPath` option. The scatter polygon series uses points of this mapped data column to plot polygons in the `igDataChart` control. + +## Example + +Based on the above data requirements, an example of how your data must be structured is as follows: + +**In JavaScript:** + +```js +var data = [ + { Points: [ + [{x: 0, y: 0}, {x: 0.5, y: 1}, {x: -0.5, y:1}], + [{x: 2, y: 0}, {x: 2.5, y: 1}, {x: 1.5, y:1}]]}] +``` + +Once your data is ready you can provide it to the chart: + +**In JavaScript:** + +```js +$("#chart").igDataChart({ + width: "400px", + height: "400px", + axes: [{ + name: "xAxis", + type: "numericX", + }, { + name: "yAxis", + type: "numericY", + }], + series: [{ + name: "series1", + type: "scatterPolygon", + dataSource: data, + xAxis: "xAxis", + yAxis: "yAxis", + shapeMemberPath: "Points", + }], +}); +``` + +With the above data and chart, the following result is generated: + +![](images/jquery_scatter_polygon_02.png) + +## Related Content + +### Topics + +- [Configuring Shape Series](/shapeseries-shape-series.mdx): This topic provides an overview of the scatter polygon and polyline series for the `igDataChart` control. + +- [Configuring the Scatter Polyline Series](/shapeseries-polyline-series.mdx): This topic explains how to configure the scatter polyline series for the `igDataChart` control. + +### Samples + +- [Scatter Polygon Series]({environment:SamplesUrl}/data-chart/polygon): This sample demonstrates how you can display polygonal data in the `igDataChart` control. \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/shape-series/polyline-series.mdx b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/shape-series/polyline-series.mdx new file mode 100644 index 0000000000..e506154bb8 --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/shape-series/polyline-series.mdx @@ -0,0 +1,103 @@ +--- +title: "Configuring the Scatter Polyline Series (igDataChart)" +slug: shapeseries-polyline-series +--- + +# Configuring the Scatter Polyline Series (igDataChart) + +## Topic Overview + +### Purpose + +This topic provides information on how to use the scatter polyline series element in the `igDataChart` control. + +### Required background + +You should be familiar with the following topics before continuing: + +- [Adding igDataChart](//igdatachart-adding.mdx): This topic demonstrates how to add the `igDataChart`™ control to a page and bind it to data. + +- [Binding igDataChart to Data](//igdatachart-databinding.mdx): This topic explains how to bind the `igDataChart`™ control to various data sources (JavaScript array, `IQueryable`, web service). + + +### In this topic + +This topic contains the following sections: + +- [Overview](#overview) + - [Preview](#preview) +- [Data Requirements](#data-requirements) +- [Example](#example) +- [Related Content](#related-content) + - [Topics](#topics) + - [Samples](#samples) + + +## Overview + +In the `igDataChart` control, the scatter polyline series is a series that displays data using polylines. This type of scatter series is often used where rendering disconnected lines are required such as a network graph. The scatter polyline series works a lot like the scatter polygon series except that data is rendered with polylines instead of polygons. + +### Preview + +The following is a preview of the `igDataChart` control with the scatter polyline series rendering connections between various points. + +![](images/jQuery_scatter_polyline_01.png) + +## Data Requirements + +Similar to other types of series in the `igDataChart` control, the scatter polyline series has the `dataSource` option for the purpose of data binding. This option is provided as an array of items where each item must have one data column that stores point locations (X and Y values) of a shape as another array. This data column is mapped to the `shapeMemberPath` option. The scatter polyline series uses points of this mapped data column to plot polylines in the `igDataChart` control. + +## Example + +Based on the above data requirements, an example of how your data must be structured is as follows: + +**In JavaScript:** + +```js +var data = [ + { Points: [ + [{x: 0, y: 0}, {x: 0.5, y: 1}, {x: -0.5, y:1}, {x: 0, y: 0}], + [{x: 2, y: 0}, {x: 2.5, y: 1}, {x: 1.5, y:1}, {x: 2, y: 0}]]}] +``` + +Once your data is ready you can provide it to the chart: + +**In JavaScript:** + +```js +$("#chart").igDataChart({ + width: "400px", + height: "400px", + axes: [{ + name: "xAxis", + type: "numericX", + }, { + name: "yAxis", + type: "numericY", + }], + series: [{ + name: "series1", + type: "scatterPolyline", + dataSource: data, + xAxis: "xAxis", + yAxis: "yAxis", + shapeMemberPath: "Points", + }], +}); +``` + +With the above data and chart, the following result is generated: + +![](images/jquery_scatter_polyline_02.png) + +## Related Content + +### Topics + +- [Configuring Shape Series](/shapeseries-shape-series.mdx): This topic provides an overview of the scatter polygon and polyline series for the `igDataChart` control. + +- [Configuring the Scatter Polygon Series](/shapeseries-polygon-series.mdx): This topic explains how to configure the scatter polygon series for the `igDataChart` control. + +### Samples + +- [Scatter Polyline Series]({environment:SamplesUrl}/data-chart/polyline): This sample demonstrates how you can display polyline data in the `igDataChart` control. \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/shape-series/shape-series.mdx b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/shape-series/shape-series.mdx new file mode 100644 index 0000000000..1291156620 --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/shape-series/shape-series.mdx @@ -0,0 +1,26 @@ +--- +title: "Configuring Shape Series (igDataChart)" +slug: shapeseries-shape-series +--- + +# Configuring Shape Series (igDataChart) + +## In This Group of Topics + +### Introduction + +The topics in this group explain both the Polygon and Polyline series. These series can be used to display custom shapes in the igDataChart. All that is required is providing both series with a list of points made up of X and Y values. These points are what define the shape. + +Figure 1. Scatter Polygon Series + +![](images/jQuery_mini_scatter_polygon_01.png) + +Figure 2. Scatter Polyline Series + +![](images/jQuery_mini_scatter_polyline_01.png) + +### Topics + +- [Configuring the Scatter Polygon Series (igDataChart)](/shapeseries-polygon-series.mdx): This topic provides information about the polygon series. It describes the properties of the polygon series and provides an implementation example. + +- [Configuring the Scatter Polyline Series (igDataChart)](/shapeseries-polyline-series.mdx): This topic provides information about the polyline series. It describes the properties of the polyline series and provides an implementation example. \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/timexaxis.mdx b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/timexaxis.mdx new file mode 100644 index 0000000000..8cb61674fd --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/timexaxis.mdx @@ -0,0 +1,211 @@ +--- +title: "Configuring the TimeXAxis (igDataChart)" +slug: igdatachart-configuring-timexaxis +--- + +# Configuring the TimeXAxis (igDataChart) + +This topic demonstrates, with code examples, how to use TimeXAxis in the `igDataChart`™ control. The benefit of using TimeXAxis is to dynamically change label formats as you zoom in or out of the data. In addition, axis breaks can be created which omit dates within a range. For example, weekends can be skipped. + +This topic is organized as follows: + +- [Introduction](#introduction) +- [Axis Break Properties](#breaks) + +Note: The following sections are only required if the default labels (i.e. formatting and intervals) need to be changed. +- [Axis Label Format Properties](#labelformats) +- [Axis Interval Properties](#intervals) +- [Related Content](#related-content) + +### Introduction + +{/* image not found: igDataChart_%28TimeXAxis%29_1.png */} + +Figure 2: Sample implementation of the TimeXAxis + +The TimeXAxis may be used with the following series: +- Category Series +- Financial Indicators +- Financial Series + +For more information on what axis types are required by a specific series, refer to the Series Requirements topic. + +Note: +All category axes require data binding and data mapping in order to show labels on the axis lines. Refer to the Getting Started with Data Chart topic for code example how to bind data to the category. + +### Axis Breaks Properties + +The TimeXAxis has the option to exclude intervals of data with Breaks. As a result, labels will not appear at the excluded interval. For example, working/non-working, holidays, and/or weekends. + +Several axis breaks can be added to the Breaks property and configured by using a unique Start, End and Interval. + + +| Property Name | Property Type | Description | +| --- | --- | --- | +| `Breaks` | array | A list of axis label intervals. The interval selected is according to the visible axis range. | + + +The following code snippets show how to skip labels on the TimeXAxis in the XamDataChart for a range of years, causing uneven intervals. The result is shown in Figure 4 below. + + **In Javascript:** + +```js + +``` +{/* image not found: igDataChart_%28TimeXAxis_Break%29_1.png */} +Figure 4: TimeXAxis displaying data from Monday through Friday in 2010. + +### Axis Label Format Properties + +The TimeXAxis has the following label format properties: + +An instance of TimeAxisLabelFormat can be added to the LabelFormatsproperty associated with each interval allowed, including a unique Format and Range. This can be especially useful for drilling data from years to milliseconds to adjust the labels depending visible axis range. + + +| Property Name | Property Type | Description | +| --- | --- | --- | +| `LabelFormats` | array | A list of label formats. The label format selected will be the one with the largest range smaller than the visible range of the axis. | + + +Configurations can be customized by using the Format and Range properties of each TimeAxisLabelFormat that is added to the axis. +eg. The following lists a typical set of label formats for the given amount of time in view: + +1. 1825 days or more (eg. 5 years) will result in a format of "yyyy". +2. 365 days or more (eg. 1 year) will result in a format of "MMM yy". +3. 1 day or more will result in a format of "MMM dd". +4. 5 hours or more will result in a format of "hh:mm". +5. Less than 30 minutes will result in a format of "hh:mm:ss". + +**In Javascript:** + +```js + +``` +{/* image not found: igDataChart_%28TimeXAxis_LabelFormats%29_1.png */} + +Figure 2: The XamDataChart control with a custom TimeAxisLabelFormat of "hh:mm:ss" + +### Axis Interval Properties + +The TimeXAxis provides an Intervals collection of type TimeAxisInterval. Each TimeAxisInterval added to the collection is responsible for assigning a unique Interval, Range, and IntervalType. + +An instance of TimeAxisInterval can be added to the Intervals property associated with each IntervalType, including a unique Interval and Range. This can be especially useful for drilling data from years to milliseconds to provide unique spacing between labels depending on the range of time shown by the chart. + + +| Property Name | Property Type | Description | +| --- | --- | --- | +| `Intervals` | array | A list of axis label intervals. The interval selected is according to the visible axis range. | + + +The following code snippet demonstrates how to implement several Intervals for each IntervalType XamDataChart control. The result is shown in Figure 3 below. + +```js + +``` +{/* image not found: igDataChart_%28TimeXAxis_Interval%29_1.png */} +Figure 3: TimeXAxis displaying data every 48 hours. + +### Related Topics + +The following topic provides additional information related to this topic: + +- [Adding igDataChart](/igdatachart-adding.mdx): This topic demonstrates how to add the `igDataChart` control to a page and bind it to data. + +### Samples + +The following sample provides additional information related to this topic. +- [Data Chart - Time X-Axis with Axis Breaks]({environment:SamplesUrl}/data-chart/time-x-axis): This sample demonstrates the Time X-Axis with axis breaks in the `igDataChart` control. \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/triangulation-series/area-series.mdx b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/triangulation-series/area-series.mdx new file mode 100644 index 0000000000..6e4df7be40 --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/triangulation-series/area-series.mdx @@ -0,0 +1,123 @@ +--- +title: "Configuring the Scatter Area Series (igDataChart)" +slug: triangulationseries-area-series +--- + +# Configuring the Scatter Area Series (igDataChart) + +## Topic Overview + +### Purpose + +This topic provides information on how to use the Scatter Area Series element in the `igDataChart` control. + +### Required background + +You should be familiar with the following topics before continuing: + +- [Adding igDataChart](//igdatachart-adding.mdx): This topic demonstrates how to add the `igDataChart`™ control to a page and bind it to data. + +- [Binding igDataChart to Data](//igdatachart-databinding.mdx): This topic explains how to bind the `igDataChart`™ control to various data sources (JavaScript array, `IQueryable`, web service). + +### In this topic + +This topic contains the following sections: + +- [Overview](#overview) + - [Preview](#preview) +- [Data Requirements](#data-requirements) +- [Data Binding](#data-binding) +- [Color Scale](#color-scale) +- [Example](#example) +- [Related Content](#related-content) + - [Topics](#topics) + +## Overview + +In the `igDataChart` control, the Scatter Area Series draws a colored surface based on a triangulation of X and Y data with a numeric value assigned to each point. + +This type of series is useful for rendering heat maps, magnetic field strength or wifi strength in an office. The Scatter Area Series works a lot like the Scatter Contour Series except that it represents data as interpolated and colored surface instead of contour lines connecting data points with the same values. + +### Preview + +The following is a preview of the `igDataChart`_ control with a Scatter Area Series that is plotting 3D surface data where the Z axis is rendered as color changes across the surface. Lower Z values are in blue and higher values are in red. + +![](images/jquery_scatter_area_01.png) + +## Data Requirements + +Similar to other types of series in the `igDataChart` control, the Scatter Area Series has the `dataSource` option for the purpose of data binding. This option can be set to an array and each item in this array must have two data columns that store point locations (one for X and one for Y). These data columns are then mapped to the `xMemberPath` and `yMemberPath` options. The data must also have one data column that stores a value for each point. This value is used by the series to color the surface. This value column is mapped to the `colorMemberPath` option. + +## Data Binding + +The following table summarizes options of Scatter Area Series used for data binding. + +Property Name | Property Type | Description +---|---|--- +`datasource` | array | The source of items to perform triangulation on. +`xMemberPath` | string | The name of the property containing the X location for each item in the `dataSource`. +`yMemberPath` | string | The name of the property containing the Y location for each item in the `dataSource`. +`colorMemberPath` | string | The name of the property on each item containing a numeric value, which can be converted to a color by a color scale, set to the `colorScale` option. +`colorScale` | object | The color scale to apply to each item based on the value of the property in `colorMemberPath`. + +## Color Scale + +Use the `colorScale` option of the Scatter Area Series to resolve values of points and thus fill the surface of the series. The colors are smoothly interpolated around the shape of the surface by applying a pixel-wise triangle rasterizer to triangulation data. Because rendering of the surface is pixel-wise, the color scale uses colors instead of brushes. + +The following table list properties of the `colorScale` affecting surface coloring of the Scatter Area Series. + +Property Name | Property Type | Description +---|---|--- +`palette` | array | An array of colors to select from or to interpolate between. +`interpolationMode` | string | The type of interpolation that is used for selecting colors. The options available are `"interpolateRGB"`, `"interpolateHSV"` and `"select"`. `"interpolateRGB"` will use RGB interpolation. `"interpolateHSV"` will use HSV interpolation. `"select"` will select one of the colors in the `palette`. +`minimumValue` | string | The highest value to assign a color. Any item value greater than this value will be made transparent. +`maximumValue` | string | The lowest value to assign a color. Any item value less than this value will be made transparent. + +## Example + +The following code shows how to bind the Scatter Area Series to data. + +```js +var data = [ + { x: 0, y: 0, z: 2 }, + { x: 10, y: 0, z: 3 }, + { x: 10, y: 10, z: 5 }, + { x: 0, y: 10, z: 1 }]; + +$("#chart").igDataChart({ + width: "400px", + height: "400px", + axes: [{ + name: "xAxis", + type: "numericX", + }, { + name: "yAxis", + type: "numericY", + }], + series: [{ + name: "polygonSeries", + type: "scatterArea", + dataSource: data, + xAxis: "xAxis", + yAxis: "yAxis", + xMemberPath: "x", + yMemberPath: "y", + colorMemberPath: "z", + colorScale: { + palette: [ "green", "yellow", "red" ], + interpolationMode: "interpolateRGB", + } + }], +}); +``` +This code generates the following result: + +![](images/jquery_scatter_area_02.png) + +## Related Content + +### Topics + +- [Configuring Triangulation Series](/triangulationseries-triangulation-series.mdx): This topic provides an overview for configuring the scatter area and contour series in the `igDataChart` control. + +- [Configuring the Scatter Contour Series](/triangulationseries-contour-series.mdx): This topic explains how to configure the Scatter Contour Series for the `igDataChart` control. \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/triangulation-series/contour-series.mdx b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/triangulation-series/contour-series.mdx new file mode 100644 index 0000000000..6b298f2011 --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/triangulation-series/contour-series.mdx @@ -0,0 +1,139 @@ +--- +title: "Configuring the Scatter Contour Series (igDataChart)" +slug: triangulationseries-contour-series +--- + +# Configuring the Scatter Contour Series (igDataChart) + +## Topic Overview + +### Purpose + +This topic provides information on how to use the Scatter Contour Series element in the `igDataChart` control. + +### Required background + +You should be familiar with the following topics before continuing: + +- [Adding igDataChart](//igdatachart-adding.mdx): This topic demonstrates how to add the `igDataChart`™ control to a page and bind it to data. + +- [Binding igDataChart to Data](//igdatachart-databinding.mdx): This topic explains how to bind the `igDataChart`™ control to various data sources (JavaScript array, `IQueryable`, web service). + +### In this topic + +This topic contains the following sections: + +- [Overview](#overview) + - [Preview](#preview) +- [Data Requirements](#data-requirements) +- [Data Binding](#data-binding) +- [Fill Scale](#fill-scale) +- [Value Resolver](#value-resolver) +- [Example](#example) +- [Related Content](#related-content) + - [Topics](#topics) + +## Overview + +In the `igDataChart` control, the Scatter Contour Series draws colored contour lines based on a triangulation of X and Y data with a numeric value assigned to each point. + +This type of series is useful for rendering heat maps, magnetic field strength or wifi strength in an office. The Scatter Contour Series works a lot like the Scatter Area Series except that it represents data as contour lines colored using a fill scale and the scatter area series represents data as a surface interpolated using a color scale. + +### Preview + +The following is a preview of the `igDataChart`_ control with a Scatter Contour Series that is plotting 3D surface data where the Z axis is rendered as color changes across the surface. Lower Z values are in blue and higher values are in red. + +![](images/jquery_scatter_contour_01.png) + +## Data Requirements + +Similar to other types of series in the `igDataChart` control, the Scatter Contour Series has the `dataSource` option for the purpose of data binding. This option can be set to an array and each item in this array must have two data columns that store point locations (one for X and one for Y). These data columns are then mapped to the `xMemberPath` and `yMemberPath` options. The data must also have one data column that stores a value for each point. This value is used by the series to color the surface. This value column is mapped to the `valueMemberPath` option. + +## Data Binding + +The following table summarizes options of Scatter Contour Series used for data binding. + +Property Name | Property Type | Description +---|---|--- +`datasource` | array | The source of items to perform triangulation on. +`xMemberPath` | string | The name of the property containing the X location for each item in the `dataSource`. +`yMemberPath` | string | The name of the property containing the Y location for each item in the `dataSource`. +`valueMemberPath` | string | The name of the property on each item containing a numeric value. This value is used to generate contour lines grouping together points that contain similar numeric values. +`fillScale` | object | Used for determining which colors are used for each contour line. + +## Fill Scale + +Use the `fillScale` option of the Scatter Contour Series to resolve fill brushes of the contour lines. + +The following table list properties of the `fillScale` affecting surface coloring of the Scatter Contour Series. + +Property Name | Property Type | Description +---|---|--- +`brushes` | array | An array of brushes for filling contours. +`minimumValue` | numeric | The lowest value to assign a brush in a fill scale. If not assigned the series will use the lowest value contained in the data. +`maximumValue` | numeric | The highest value to assign a brush in a fill scale. If not assigned the series will use the highest value contained in the data. + +## Value Resolver + +The Scatter Contour Series renders using exactly 10 contour lines at even intervals between the minimum and maximum values of the items mapped to the `valueMemberPath` option. If you desire more or fewer contours, you can assign the `valueResolver` option with an object and setting the `valueCount` property with a number of desired contours. + +The following code shows how to configure the number of contour lines in the Scatter Contour Series. + +```js +valueResolver: { + type: "linear", + valueCount: 15, +} +``` + +## Example + +The following code shows how to bind the Scatter Contour Series to data. This example is increasing the contour line count from the default 10 up to 15. + +```js +var data = [ + { x: 0, y: 0, z: 2 }, + { x: 10, y: 0, z: 3 }, + { x: 10, y: 10, z: 5 }, + { x: 0, y: 10, z: 1 }]; + +$("#chart").igDataChart({ + width: "400px", + height: "400px", + axes: [{ + name: "xAxis", + type: "numericX", + }, { + name: "yAxis", + type: "numericY", + }], + series: [{ + name: "series1", + type: "scatterContour", + dataSource: data, + xAxis: "xAxis", + yAxis: "yAxis", + xMemberPath: "x", + yMemberPath: "y", + valueMemberPath: "z", + fillScale: { + brushes: [ "green", "yellow", "red" ], + }, + valueResolver: { + type: "linear", + valueCount: 15 + } + }], +}); +``` +This code generates the following result: + +![](images/jquery_scatter_contour_02.png) + +## Related Content + +### Topics + +- [Configuring Triangulation Series](/triangulationseries-triangulation-series.mdx): This topic provides an overview for configuring the scatter area and contour series in the `igDataChart` control. + +- [Configuring the Scatter Area Series](/triangulationseries-area-series.mdx): This topic explains how to configure the Scatter Area Series for the `igDataChart` control. \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/triangulation-series/images/jquery_mini_scatter_area_01.png b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/triangulation-series/images/jquery_mini_scatter_area_01.png new file mode 100644 index 0000000000..cb312f7d19 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/triangulation-series/images/jquery_mini_scatter_area_01.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/triangulation-series/images/jquery_mini_scatter_contour_01.png b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/triangulation-series/images/jquery_mini_scatter_contour_01.png new file mode 100644 index 0000000000..df95fb3e37 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/triangulation-series/images/jquery_mini_scatter_contour_01.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/triangulation-series/images/jquery_scatter_area_01.png b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/triangulation-series/images/jquery_scatter_area_01.png new file mode 100644 index 0000000000..16273bde7a Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/triangulation-series/images/jquery_scatter_area_01.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/triangulation-series/images/jquery_scatter_area_02.PNG b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/triangulation-series/images/jquery_scatter_area_02.PNG new file mode 100644 index 0000000000..72ecbad6e1 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/triangulation-series/images/jquery_scatter_area_02.PNG differ diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/triangulation-series/images/jquery_scatter_contour_01.png b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/triangulation-series/images/jquery_scatter_contour_01.png new file mode 100644 index 0000000000..3bfeeca671 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/triangulation-series/images/jquery_scatter_contour_01.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/triangulation-series/images/jquery_scatter_contour_02.PNG b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/triangulation-series/images/jquery_scatter_contour_02.PNG new file mode 100644 index 0000000000..1c34a5c6eb Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/triangulation-series/images/jquery_scatter_contour_02.PNG differ diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/triangulation-series/triangulation-series.mdx b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/triangulation-series/triangulation-series.mdx new file mode 100644 index 0000000000..e147b03a8c --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/triangulation-series/triangulation-series.mdx @@ -0,0 +1,26 @@ +--- +title: "Configuring Triangulation Series (igDataChart)" +slug: triangulationseries-triangulation-series +--- + +# Configuring Triangulation Series (igDataChart) + +## In This Group of Topics + +### Introduction + +The topics in this group explain both the Scatter Area and Scatter Contour series. Both series take a list of points containing three values (X, Y and Z) and triangulate these points using the X and Y values in order to generate a two-dimensional surface that is rendered on screen. The Z value is used for coloring the surface using a color scale. This allows an easy visualization of value changes across a two-dimensional space. An example might be displaying wifi strength across different locations in an office. + +Figure 1. Scatter Area Series + +![some title](images/jQuery_mini_scatter_area_01.png) + +Figure 2. Scatter Contour Series + +![](images/jQuery_mini_scatter_contour_01.png) + +### Topics + +- [Configuring the Scatter Area Series (igDataChart)](TriangulationSeries-Scatter-Area.html): This topic provides information about the polygon series. It describes the properties of the polygon series and provides an implementation example. + +- [Configuring the Scatter Contour Series (igDataChart)](TriangulationSeries-Scatter-Contour.html): This topic provides information about the polyline series. It describes the properties of the polyline series and provides an implementation example. \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/databinding.mdx b/docs/jquery/src/content/en/topics/controls/igdatachart/databinding.mdx new file mode 100644 index 0000000000..4bddf72518 --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igdatachart/databinding.mdx @@ -0,0 +1,476 @@ +--- +title: "Binding igDataChart to Data" +slug: igdatachart-databinding +--- + +# Binding igDataChart to Data + + +##Topic Overview + + +### Purpose + +This topic explains how to bind the `igDataChart`™ control to various data sources (JavaScript array, IQueryable<T>, web service). + +### Required background + +The following table lists the materials required as a prerequisite to understanding this topic. + + +**Concepts** + +- Data Binding +- JSON +- XML +- Web Services +- WCF Services +- ASP.NET MVC + + +**Topics** + +- [igDataSource Overview](//data-sources/igdatasource/igdatasource-overview.mdx): General description of the `igDataSource`™ control which serves as an intermediate layer between the data bound controls and the actual data source. + +- [igDataChart Overview](/overview/igdatachart-overview.mdx): This topic provides conceptual information about the `igDataChart` control including its main features, minimum requirements for using charts and user functionality. + +- [Adding igDataChart](/igdatachart-adding.mdx): This topic demonstrates how to create add the `igDataChart` control and bind it to data. + + +### In this topic + +This topic contains the following sections: + +- [Binding to Data Sources](#binding-to-data-sources) + - [Supported data sources](#supported-data-sources) + - [Requirements for binding](#requirements-for-binding) + - [Data sources summary](#data-sources-summary) +- [Binding to a JavaScript Array](#bind-to-js-array) + - [Introduction](#js-introduction) + - [Prerequisites](#js-array-prerequisites) + - [Preview](#js_preview) + - [Steps](#js_steps) +- [Binding to an XML string](#binding-to-xml) + - [Introduction](#xml-introduction) + - [Example](#xml-example) +- [Binding to an IQueryable<T> in ASP.NET MVC](#binding-to-iqueryable) + - [Introduction](#mvc-introduction) + - [Prerequisites](#mvc_prerequisites) + - [Preview](#mvc_preview) + - [Steps](#mvc_steps) +- [Binding to an WCF Service](#binding_wcf) + - [Introduction](#wcf-introduction) + - [Preview](#wcf-preview) + - [Steps](#wcf-steps) +- [Related Content](#related-content) + - [Topics](#topics) + - [Samples](#samples) + - [Resources](#resources) + + +##Binding to Data Sources + + +### Supported data sources + +The `igDataChart` control supports the following data sources: + + +| Data Source | Binding | +| --- | --- | +| igDataSource | Used internally by the control to manage data operations | +| IQueryable<T> | Used to supply data from an MVC controller method | + + +### Requirements for binding + +Each data source has different requirements for data binding to the `igDataSource` control. The following table lists each requirement category. + + +| | | +| --- | --- | +| Requirement category | Requirement listing | +| Data structure | JSON (client side or from a web or WCF service) XML (client side or from a web or WCF service) JavaScript array IQueryable<T> in ASP.NET MVC | +| Data types | String (for category axes) Number Date | + + +### Data sources summary + +The data binding of the `igDataChart` control is identical to that of the other controls in the {environment:ProductName}™ library. The way to bind data is by either by assigning a data source to the `dataSource` option or by providing a URL in the `dataSourceUrl` if data is provided by a web or WCF service. + +##Binding to a JavaScript Array + + +### Introduction + +This procedure demonstrates how to bind the `igDataChart` control to a JavaScript data array. + +### Prerequisites + +To complete the procedure, you need the following: + +- An HTML5 web page +- All required JavaScript and CSS files added to your web site or web application project. For detailed information on instantiation and configuration of an igDataChart see [Adding igDataChart](/igdatachart-adding.mdx). + +### Preview + +The following screenshot demonstrates the `igDataChart` control visualizing the data in the sample array as result of successful binding to that array. + +![](images/Data_Binding_in_igDataChart_1.png) + +### Steps + +The following steps demonstrate how to bind the `igDataChart` control to a JavaScript data array. + +1. Define the data array. + + The following code demonstrates defining a sample JavaScript array. + + **In Javascript:** + +```js + +``` + +2. Add and configure `igDataChart` control. + + **1.** Add the chart div element to the web page. + + In the body of the web page, add a div element for the `igDataChart` chart control. + + **In HTML:** + +```html + + ... +
    + ... + +``` + + **2.** Instantiate `igDataChart` chart control and configure the data source. + + To do this, assign the data array defined in the previous step to the `dataSource` options of the `igDataChart` control. + + **In Javascript:** + +```js + +``` + +This is a basic example of the data chart bound to JSON data: + +
    + [{environment:SamplesEmbedUrl}/data-chart/json-binding]({environment:SamplesEmbedUrl}/data-chart/json-binding) +
    + +###Binding to to an XML string + +### Introduction + +This example demonstrates how to bind the `igDataChart` control to an XML string. + +### Example + +
    + [{environment:SamplesEmbedUrl}/data-chart/xml-binding]({environment:SamplesEmbedUrl}/data-chart/xml-binding) +
    + +##Binding to an IQueryable<T> in ASP.NET MVC + + +### Introduction + +This procedure demonstrates how to bind a list of data objects from a backend controller method to a data chart using the ASP.NET helper provided in the {environment:ProductName} library. + +### Prerequisites + +To complete the procedure, you need the following: + +- An ASP.NET MVC application +- All required JavaScript and CSS files added to your web site or web application project. For detailed information on instantiation and configuration of an igDataChart see [Adding igDataChart](/igdatachart-adding.mdx). + +### Preview + +The following screenshot demonstrates the `igDataChart` control +visualizing the data in the sample array as result of successful binding +to that array. + +![](images/Data_Binding_in_igDataChart_2.png) + +### Steps + +The following steps demonstrate how to instantiate and bind an `igDataChart` control in ASP.NET MVC by providing a list of data objects to a strongly typed view and use {environment:ProductNameMVC} DataChart. + +1. Define the data model. + + Define the data model class: + + **In C#:** + +```csharp + public class StockMarketDataPoint + { + public double Open { get; set; } + public double High { get; set; } + public double Low { get; set; } + public double Close { get; set; } + public double Volume { get; set; } + public DateTime Date { get; set; } + public string DateString { get { return Date.ToShortDateString(); } } + } +``` + +2. Define the controller method. + + Add the logic to a controller method in order to instantiate an array of `StockMarketDataPoint` objects. This place to add custom logic that gets data from the data base. + + Note that the list of `StockMarketDataPoint` objects is converted to an IQueryable<StockMarketDataPoint> before submitting to the view. This can alternatively be done in the {environment:ProductNameMVC} call in the view, but the implementation provided here is cleaner. + + **In C#:** + +```csharp + public ActionResult Index() + { + List stockMarketData = new List + { + new StockMarketDataPoint { Date = DateTime.Parse("2.1.2010"), Open = 1000, High = 1028.75, Low = 985.25, Close = 1020, Volume = 1995 }, + new StockMarketDataPoint { Date = DateTime.Parse("3.1.2010"), Open = 1020, High = 1032.5, Low = 999.5, Close = 1021, Volume = 1964.5 }, + new StockMarketDataPoint { Date = DateTime.Parse("4.1.2010"), Open = 1021, High = 1033.5, Low = 996, Close = 1033, Volume = 1974.75 }, + new StockMarketDataPoint { Date = DateTime.Parse("5.1.2010"), Open = 1033, High = 1062, Low = 1018.75, Close = 1042, Volume = 1978.5 }, + new StockMarketDataPoint { Date = DateTime.Parse("6.1.2010"), Open = 1042, High = 1058.5, Low = 1019.75, Close = 1029, Volume = 1979 }, + new StockMarketDataPoint { Date = DateTime.Parse("7.1.2010"), Open = 1029, High = 1050.75, Low = 1006, Close = 1042, Volume = 1990 } + }; + return View(stockMarketData.AsQueryable()); + } +``` + +3. Instantiate the `igDataChart` control and configure the data source. + + The following code in the ASP.NET MVC view instantiates an `igDataChart` and assigns the list. Note how the data model of the strongly-typed view is mapped to the chart with the `DataChart(Model)` call. In the axes definition the `item.DateString` property is mapped to the category X-axis with the `Label()` function call. In the series definition the `OpenMemberPath`, `CloseMemberPath`, `LowMemberPath` and `HighMemberPath` calls bind the corresponding properties to the Financial chart type. The `DataBind()` method does the actual data binding and at the end the `Render()` method emits the final JavaScript code to be executed on the client-side. + + **In ASPX:** + +```csharp + <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage>" %> + <%@ Import Namespace="Infragistics.Web.Mvc" %> + ... + <%= + Html.Infragistics().DataChart(Model) + .ID("chart") + .Axes(axes => + { + axes.CategoryX("xAxis").Label(item => item.DateString); + axes.NumericY("priceAxis"); + } + ) + .Series(series => + { + series.Financial("finSeries") + .XAxis("xAxis") + .YAxis("priceAxis") + .OpenMemberPath(item => item.Open) + .CloseMemberPath(item => item.Close) + .LowMemberPath(item => item.Low) + .HighMemberPath(item => item.High); + } + ) + .DataBind() + .Render() + %> +``` + + +##Binding to an WCF Service + + +### Introduction + +This procedure shows how to bind an `igDataChart` to a WCF service with the help of the `dataSourceUrl` option. Binding to a Web service is identical. + +### Prerequisites + +To complete the procedure, you need the following: + +- An HTML5 web page +- All required JavaScript and CSS files added to your web site or web application project. For detailed information on instantiation and configuration of an `igDataChart` see [Adding igDataChart](/igdatachart-adding.mdx). + +### Preview + +The following screenshot demonstrates the `igDataChart` control +visualizing the data in the sample array as result of successful binding +to that array. + +![](images/Data_Binding_in_igDataChart_3.png) + +### Steps + +The following steps demonstrate how to bind an `igDataChart` control to a WCF service. + + +1. Define the WCF Service interface. + + The full implementation of the WCF service is omitted because it is not relevant to the example. Here follows a sample service contract class and operation contract method that serves data to the client upon a GET HTTP request. The data model class is the same as in the previous procedure [Bind to an IQueryable<T> in ASP.NET MVC](#binding-to-iqueryable). + + Here follows the interface of the sample `StockMarket` WCF service that serves financial data to clients in the form of a List of `StockMarketDataPoint` objects. + + **In C#:** + +```csharp + [ServiceContract] + [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)] + public class StockMarket + { + [OperationContract] + [WebGet(BodyStyle = WebMessageBodyStyle.Bare, ResponseFormat = WebMessageFormat.Json)] + public List GetStockData() + { + return StockMarketGenerator.GenerateData(); + } + } +``` + + The important things to note here is the `WebGet` attribute applied to the server method `GetStockData()`. It declares that this method will respond to GET requests and that the response will be a bare (not wrapped) JSON encoded array of data. + +2. Instantiate chart control and set data source. + + **HTML/jQuery** + + Add the following code into the head part of your HTML5 page in order to instantiate an `igDataChart`. The WCF service address is set as data source by assigning the address to the `dataSourceUrl` option. In the x-axis definition the axis labels is mapped to the `DateString` property of the data provided by the server. Identically, the data options of the financial data series are mapped to the Open, High, Low and Close properties of the WCF data source. + + In this example it is assumed that the WCF service is installed and running on the address `http://www.example.com/Services/StockMarket.svc/GetStockData`. + + **In Javascript:** + +```js + $(function () { + $("#chart").igDataChart({ + dataSourceUrl: "http://www.example.com/Services/StockMarket.svc/GetStockData", + axes: [{ + name: "xAxis", + type: "categoryX", + label: "DateString" + }, + { + name: "yAxis", + type: "numericY" + }], + series: [{ + name: "dataSeries", + title: "stockPrice", + type: "financial", + xAxis: "xAxis", + yAxis: "yAxis", + openMemberPath: "Open", + highMemberPath: "High", + lowMemberPath: "Low", + closeMemberPath: "Close" + }] + }); + }); +``` + + **ASP.NET MVC** + + Add the following code into your ASP.NET MVC view in order to instantiate an `igDataChart` and set the WCF service address. The meaning of the code is the same as in the HTML example and the important piece of code is the call that sets the WCF service URL: `DataSourceUrl("http://www.example.com/Services/StockMarket.svc/GetStockData")`. + + **In ASPX:** + +```csharp + <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %> + <%@ Import Namespace="Infragistics.Web.Mvc" %> + ... + <%= + Html.Infragistics().DataChart() + .ID("chart") + .Axes((axes) => + { + axes.CategoryX("xAxis").Label("DateString"); + axes.NumericY("yAxis"); + }) + .Series((series) => + { + series + .Financial("finSeries") + .XAxis("xAxis").YAxis("yAxis") + .OpenMemberPath("Open") + .CloseMemberPath("Close") + .LowMemberPath("Low") + .HighMemberPath("High") + .VolumeMemberPath("Volume") + }) + .DataSourceUrl("http://www.example.com/Services/StockMarket.svc/GetStockData") + .DataBind() + .Render() + %> +``` + +##Related Content + + +### Topics + +The following topics provide additional information related to this topic. + +- [Binding igDataSource to Client-Side Data](//data-sources/igdatasource/binding-igdatasource-to-client-side-data.mdx): This topic explains how to bind `igDataSource` to client-side JavaScript arrays and JSON data. + +- [Binding igDataSource to REST Services](//data-sources/igdatasource/binding-to-rest-services.mdx): This topic explains how to bind an `igDataSource` control to REST services. + +- [Binding igDataSource to WCF Data Services](//data-sources/igdatasource/binding-to-wcf-data-services.mdx): This topic explains how to bind an `igDataSource` component to a WCF service. + + +### Samples + +The following samples provide additional information related to this topic. + +- [Binding High Volume Data]({environment:SamplesUrl}/data-chart/binding-high-volume-data): This sample demonstrates a large number of records bound to an `igDataChart`. + + +### Resources + +The following material (available outside the Infragistics family of content) provides additional information related to this topic. + +- [Hosting and Consuming WCF Services](http://msdn.microsoft.com/en-us/library/bb332338.aspx): This MSDN article explains in detail how to create, host and consume WCF services. + +- [Walkthrough: Creating and Using an ASP.NET Web Service in Visual Web Developer](http://msdn.microsoft.com/en-us/library/8wbhsy70%28v=vs.80%29.aspx): This MSDN article explains in detail how to create a Web Service in Visual Web Developer. + + + + + + + diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/images/Adding_igDataChart_1.png b/docs/jquery/src/content/en/topics/controls/igdatachart/images/Adding_igDataChart_1.png new file mode 100644 index 0000000000..4ed32b2dbc Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdatachart/images/Adding_igDataChart_1.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/images/Data_Binding_in_igDataChart_1.png b/docs/jquery/src/content/en/topics/controls/igdatachart/images/Data_Binding_in_igDataChart_1.png new file mode 100644 index 0000000000..a1bd2732af Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdatachart/images/Data_Binding_in_igDataChart_1.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/images/Data_Binding_in_igDataChart_2.png b/docs/jquery/src/content/en/topics/controls/igdatachart/images/Data_Binding_in_igDataChart_2.png new file mode 100644 index 0000000000..803c77497e Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdatachart/images/Data_Binding_in_igDataChart_2.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/images/Data_Binding_in_igDataChart_3.png b/docs/jquery/src/content/en/topics/controls/igdatachart/images/Data_Binding_in_igDataChart_3.png new file mode 100644 index 0000000000..2df4530d69 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdatachart/images/Data_Binding_in_igDataChart_3.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/images/igDataChart_(Landing_Page)_1.png b/docs/jquery/src/content/en/topics/controls/igdatachart/images/igDataChart_(Landing_Page)_1.png new file mode 100644 index 0000000000..5e10ca0f1a Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdatachart/images/igDataChart_(Landing_Page)_1.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/known-issues.mdx b/docs/jquery/src/content/en/topics/controls/igdatachart/known-issues.mdx new file mode 100644 index 0000000000..c349e71345 --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igdatachart/known-issues.mdx @@ -0,0 +1,60 @@ +--- +title: "Known Issues and Limitations (igDataChart)" +slug: igdatachart-known-issues +--- +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# Known Issues and Limitations (igDataChart) + + +### Purpose + +This topic lists all known issues and limitations in the `igDataChart`™ control. + + +##Known Issues and Limitations + + +### Overview + +The following table summarizes the known issues and limitations of the `igDataChart` control. Detailed explanations of known issues and the possible workarounds are provided for some of the issues follow the summary table. + +Legend: | +--------|------ +![](../../images/images/positive.png) | Workaround available +![](../../images/images/negative.png) | No known workaround available +![](../../images/images/plannedFix.png) | Fix planned + + + +| Feature | Description | Status | +| --- | --- | --- | +| [First and last items appear half cut in financial series charts](#first-last-items-half-cut) | In financial series the first and the last data items do not appear entirely on the chart view but are plotted as if they are cut in half. | ![](../../images/images/plannedFix.png) | +| [Chart animation disabled when axis range changes](#chart-animation-issue) | If you use the Motion Framework for charts and updated data causes Y-axis range to be changed then all chart animation is disabled and new data to appear immediately without any motion effect. | ![](../../images/images/positive.png) | +| [Monolith shadows do not allow for the blur effect to be applied to them](#monolith_shadow) | When the property of the series is set to "true", the setting is disregarded and no blur is applied to the shadow. | ![](../../images/images/positive.png) | + + +### First and last items appear half cut in financial series charts + +In financial series the first and the last data items do not appear entirely on the chart view but are plotted as if they are half cut. + +A new feature of data charts will be implemented in future releases that will solve this problem. + +### Chart animation disabled when axis range changes + +If you use the Motion Framework for charts and updated data causes Y-axis range to be changed then all chart animation is disabled and new data appear immediately without any motion effect. + +The solution to this problem is to select an appropriate range for the Y-axis of your chart and set the `minimumValue` and `maximumValue` options accordingly which will prevent axis range changes. + +### Monolith shadows do not allow for the blur effect to be applied to them + +When the property of the series is set to "true", the setting is disregarded and no blur is applied to the shadow. This is a deliberate limitation due to a [Google® Chrome™ bug](https://code.google.com/p/chromium/issues/detail?id=100703) and extended to all major browsers thus ensuring consistent behavior across all of them. This behavior is subject to change once the aforementioned Chrome issue is resolved. + +If you need to apply blur to the shadow, use the Compound type of shadow (`useSingleShadow: true`). + + + + + + + diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/landing-page.mdx b/docs/jquery/src/content/en/topics/controls/igdatachart/landing-page.mdx new file mode 100644 index 0000000000..05389b4fd1 --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igdatachart/landing-page.mdx @@ -0,0 +1,64 @@ +--- +title: "igDataChart" +slug: igdatachart-landing-page +--- + +# igDataChart + + +##In This Group of Topics + + +### Introduction + +The `igDataChart`™ control provides functionality for displaying various kinds of charts in web applications based on the HTML5 Canvas element. + +{/* image not found: igDataChart_%28Landing_Page%29_1.png */} + +### Topics + +The topics in this section provide detailed information regarding the `igDataChart` control. + + +- [](/overview/igdatachart-overview.mdx)[igDataChart Overview](/overview/igdatachart-overview.mdx): This topic provides conceptual information about the `igDataChart` control including its main features, minimum requirements for using charts and user functionality. + +- [Series Types (igDataChart)](/overview/igdatachart-series-types.mdx): This topic shows all kinds of charts that can be produced with the help of the `igDataChart` control. + +- [Configurable Visual Elements (igDataChart)](/overview/igdatachart-visual-elements.mdx): This topic lists all configurable visual elements of the `igDataChart` control and the properties that manage them. + +- [Adding igDataChart](/igdatachart-adding.mdx): This topic demonstrates how to add the `igDataChart` control to a page and bind it to data. + +- [Binding igDataChart to Data](/igdatachart-databinding.mdx): This topic explains how to bind the `igDataChart` control to various data sources (JavaScript array, `IQueryable`, web service). + +- [Series Requirements](/igdatachart-series-requirements.mdx): This topic explains the specific requirements for each series. + +- [Styling igDataChart](/styling/igdatachart-styling-themes.mdx): This topic explains how to use styles and apply themes with `igDataChart`. + +- [Configuring the Axis Title (igDataChart)](/configuring/igdatachart-axis-title.mdx): This topic provides information on setting an axis title on the `igDataChart`™ control. + +- [Configuring the Chart Title and Subtitle (igDataChart)](/configuring/igdatachart-chart-titles-and-subtitles.mdx): This topic provides information on using the chart title and subtitle feature of the `igDataChart`™ control. + +- [Configuring Axis Intervals (igDataChart)](igDataChart-Axis-Intervals.html): This topic provides information on configuring the major and minor axis intervals on the `igDataChart`™ control. + +- [Configuring Hover Interactions (igDataChart)](./04_Configuring/04_Hover Interactions/~HoverInteractions_Hover_Interactions.mdx): This sections provides information about the hover interactions available on the `igDataChart` control including the different type of hover interactions layers available. + +- [Configuring the Series Highlighting (igDataChart)](/configuring/igdatachart-series-highlighting.mdx): This topic provides information on enabling the series highlighting feature along with a listing of the supported series. + +- [Accessibility Compliance (igDataChart)](/igdatachart-accessibility-compliance.mdx): This topic explains `igDataChart` accessibility features and provides advice how to achieve accessibility compliance for pages containing charts. + +- [jQuery and MVC API Reference Links (igDataChart)](/igdatachart-api-links.mdx): This topic provides links to the API documentation for jQuery and {environment:ProductNameMVC} class for `igDataChart` control. + +- [Known Issues and Limitations (igDataChart)](/igdatachart-known-issues.mdx): This topic lists all known issues and limitations in the `igDataChart` control. + + +##Related Content + + +### Topics + +The following topics provide additional information related to this topic. + + +- [{environment:ProductName} Overview](//igniteui-for-jquery-overview.mdx): This topic provides general information about the {environment:ProductName}™ library. + +- [igPieChart Overview](/igpiechart/overview.mdx): This topic provides conceptual information about the `igPieChart`™ control including its main features, minimum requirements, and user functionality. \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/overview/hoverinteractions-hover-interactions-overview.mdx b/docs/jquery/src/content/en/topics/controls/igdatachart/overview/hoverinteractions-hover-interactions-overview.mdx new file mode 100644 index 0000000000..4412887455 --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igdatachart/overview/hoverinteractions-hover-interactions-overview.mdx @@ -0,0 +1,167 @@ +--- +title: "Hover Interactions Overview (igDataChart)" +slug: hoverinteractions-hover-interactions-overview +--- + +# Hover Interactions Overview (igDataChart) + +#### Purpose + +This topic provides conceptual information about the hover interactions available on the `igDataChart` control including the different types of hover interaction layers available. + +#### Required background + +The following topics are prerequisites to understanding this topic: + +- [Adding igDataChart](/igdatachart-adding.mdx): This topic demonstrates how to add the `igDataChart`™ control to a page and bind it to data. + +- [Binding igDataChart to Data](/igdatachart-databinding.mdx): This topic explains how to bind the `igDataChart`™ control to various data sources (JavaScript array, `IQueryable`, web service). + + +#### In this topic + +This topic contains the following sections: + +- [Overview](#overview) +- [Common Properties](#common-properties) +- [Types of Layers](#types-of-layers) + - [Crosshair Layer](#crosshair-layer) + - [Category Highlight Layer](#category-highlight-layer) + - [Category Item Highlight Layer](#category-item-highlight-layer) + - [Category Tooltip Layer](#category-tooltip-layer) + - [Item Tooltip Layer](#item-tooltip-layer) + - [Final Value Layer](#final-value-layer) + - [Callout Layer](#callout-layer) +- [Related Content](#related-content) + - [Topics](#topics) + - [Samples](#samples) + + +## Overview + +#### Hover interactions summary + +Hover interactions are implemented through hover interaction layers which are series that are added to the series collection. These layers are dependent on the cursor position. Adding the hover interaction layers to the `igDataChart` control disables the default behavior of the crosshairs and/or tooltips (depending on which type of layer added). + +The default behavior is disabled because it prevents visual confusion as the hover interaction layers perform a similar visual function compared to the built in behavior as the cursor moves. You can, however, override this behavior and allow the default crosshair functionality to perform in addition to the hover interaction layer functionality. Also of note, only target a series by one tooltip layer at a time. If you target more than one tooltip layer at a series, the hover interaction layers that use tooltips will not function as expected. Using a tooltip for a series in more than one location at once is not allowed. + +The following screenshot displays the `igDataChart` control with the category highlight layer, the crosshair layer and the item tooltip layer implemented. + +![](../configuring/hover-interactions/images/jQuery_Multiple_Layers_01.png) + + +## Common Properties + +#### Common properties and methods overview + +Since the hover interaction layers inherit from the `Series` object, they gain a lot of the properties and methods that are available on the `Series` base class. However, not everything from the `Series` class is meaningful for the hover interaction layers. For example, hover interaction layers are not designed to interact with the mouse and should not be hit testable; consequently they will not raise mouse related events. + +For more information on the common properties and methods, see the [Hover Interactions Property Reference (igDataChart)](../04_Configuring/04_Hover Interactions/07_HoverInteractions_Common_Properties.mdx) topic. + + +## Types of Layers + +#### Introduction + +Currently there are 5 different hover interaction layers available on the `igDataChart` control. Each of these hover interactions layers provides a different highlight, hover and tooltip interactions that may be used individually or combined with one another providing powerful hover interactions. + +The following summarizes the different types of layers available on the `igDataChart` control: + +### Crosshair Layer + +The `crosshairLayer` provides crossing lines that meet at the actual value of every targeted series. + +![](../configuring/hover-interactions/images/jQuery_Crosshair_Layer_01.png) + +For more information, see the [Configuring the Crosshair Layer (igDataChart)](../04_Configuring/04_Hover Interactions/03_HoverInteractions_Crosshair_Layer.mdx) topic. + +### Category Highlight Layer + +The `categoryHighlightLayer` targets a category axis, or all category axes in the `igDataChart` control. They draw a shape that illuminates the area of the axis closest to the cursor position. + +![](../configuring/hover-interactions/images/jQuery_Category_Highlight_Layer_01.png) + +For more information, see the [Configuring the Category Highlight Layer (igDataChart)](../04_Configuring/04_Hover Interactions/00_HoverInteractions_Category_Highlight_Layer.mdx) topic. + +### Category Item Highlight Layer + +The `categoryItemHighlightLayer` layer highlights items in a series that use a category axis either by drawing a banded shape at their position or by rendering a marker at their position. + +![](../configuring/hover-interactions/images/jQuery_Item_Highlight_Layer_01.png) + +For more information, see the [Configuring the Category Item Highlight Layer (igDataChart)](../04_Configuring/04_Hover Interactions/01_HoverInteractions_Category_Item_Highlight_Layer.mdx) topic. + +### Category Tooltip Layer + +The `categoryTooltipLayer` displays grouped tooltips for series using a category axis. + +![](../configuring/hover-interactions/images/jQuery_Category_Tooltip_Layer_01.png) + +For more information, see the [Configuring the Category Tooltip Layer (igDataChart)](../04_Configuring/04_Hover Interactions/02_HoverInteractions_Category_Tooltip_Layer.mdx) topic. + +### Item Tooltip Layer + +The `itemTooltipLayer` displays tooltips for all target series individually. + +![](../configuring/hover-interactions/images/jQuery_Item_Tooltip_Layer_01.png) + +For more information, see the [Configuring the Item Tooltip Layer (igDataChart)](../04_Configuring/04_Hover Interactions/04_HoverInteractions_Item_Tooltip_Layer.mdx) topic. + +### Final Value Layer + +The `finalValueLayer` displays annotations that represent the current (final) value of a series on the chart. + +![](../configuring/hover-interactions/images/jQuery_Final_Value_Layer_01.png) + +For more information, see the [Configuring the Final Value Layer (igDataChart)](../04_Configuring/04_Hover Interactions/05_HoverInteractions_Final_Value_Layer.mdx) topic. + +### Callout Layer + +The `calloutLayer` displays annotations from existing or new data on the chart. + +![](../configuring/hover-interactions/images/jQuery_Callout_Layer_01.png) + +For more information, see the [Configuring the Callout Layer (igDataChart)](../04_Configuring/04_Hover Interactions/06_HoverInteractions_Callout_Layer.mdx) topic. + + +## Related Content + +### Topics + +- [Hover Interactions Overview (igDataChart)](/hoverinteractions-hover-interactions-overview.mdx): This topic provides conceptual information about the hover interactions available on the `igDataChart` control including the different types of hover interaction layers available. + +- [Hover Interactions Property Reference (igDataChart)](../04_Configuring/04_Hover Interactions/07_HoverInteractions_Common_Properties.mdx): This topic provides information about the properties and methods that the hover interaction feature uses for highlighting, hovering and interacting with the tooltip interactions inherited from the `series` class. + +- [Configuring the Crosshair Layer (igDataChart)](../04_Configuring/04_Hover Interactions/03_HoverInteractions_Crosshair_Layer.mdx): This topic provides information about the crosshair layer used for hover interactions. It describes the properties of the crosshair layer and provides an implementation example. + +- [Configuring the Category Highlight Layer (igDataChart)](../04_Configuring/04_Hover Interactions/00_HoverInteractions_Category_Highlight_Layer.mdx): This topic provides information about the category highlight layer which is used for hover interactions. It describes the properties of the category highlight layer and provides an example of its implementation. + +- [Configuring the Category Item Highlight Layer (igDataChart)](../04_Configuring/04_Hover Interactions/01_HoverInteractions_Category_Item_Highlight_Layer.mdx): This topic provides information about the category item highlight layer used for hover interactions. It describes the properties of the category item highlight layer and provides an example of its implementation. + +- [Configuring the Category Tooltip Layer (igDataChart)](../04_Configuring/04_Hover Interactions/02_HoverInteractions_Category_Tooltip_Layer.mdx): This topic provides information about the category tooltip layer used for hover interactions. It describes the properties of the category tooltip layer and provides an example of its implementation. + +- [Configuring the Item Tooltip Layer (igDataChart)](../04_Configuring/04_Hover Interactions/04_HoverInteractions_Item_Tooltip_Layer.mdx): This topic provides information about the item tooltip layer which is used for hover interactions. It describes the properties of the item tooltip layer and also provides an example of its implementation. + + +### Samples + +The following samples provide additional information related to this topic. + +- [Hover Interactions – Crosshair Layer](../04_Configuring/04_Hover Interactions/03_HoverInteractions_Crosshair_Layer.mdx#example): This sample demonstrates the Crosshair Layer that provides crossing lines that meet at the actual value of every series that they are targeting. The sample options pane allows you to edit the properties of the layer, such as changing the thickness of the crosshair. + +- [Hover Interactions – Category Highlight Layer](../04_Configuring/04_Hover Interactions/00_HoverInteractions_Category_Highlight_Layer.mdx#example): This sample demonstrates the Category Highlight Layer that targets a category axis, or all category axes in the `igDataChart`™ control. The sample options pane allows you to edit the properties of the Category Highlight Layer, such as changing the color of the highlight, outline, thickness and more. + +- [Hover Interactions – Category Item Highlight Layer](../04_Configuring/04_Hover Interactions/01_HoverInteractions_Category_Item_Highlight_Layer.mdx#example): This sample demonstrates the Category Item Highlight Layer that highlights items in a series that use a category axis either by drawing a banded shape at their position or by rendering a marker at their position.The sample options pane allows you to edit the properties of the Category Item Highlight Layer, such as changing the color of the highlight, outline, thickness and more. + +- [Hover Interactions – Category Tooltip Layer](../04_Configuring/04_Hover Interactions/02_HoverInteractions_Category_Tooltip_Layer.mdx#example): This sample demonstrates the Category Tooltip Layer that displays grouped tooltips for series that use a category axis. The sample options pane allows you to edit the properties of the layer, such as changing the position of the tooltip. + +- [Hover Interactions – Item Tooltip Layer](../04_Configuring/04_Hover Interactions/04_HoverInteractions_Item_Tooltip_Layer.mdx#example): This sample demonstrates the Item Tooltip Layer that displays tooltips for all target series individually. The sample options pane allows you to edit the properties of the layer, such as changing the transition duration. + +- [Hover Interactions – Multiple Layers]({environment:SamplesUrl}/data-chart/multiple-layers): This sample demonstrates how multiple layers interact within the `igDataChart` control. This sample displays the Item Tooltip Layer, the Crosshair layer and the Category Highlight Layer. + + + + + + + diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/overview/images/igDataChart_Overview_1.png b/docs/jquery/src/content/en/topics/controls/igdatachart/overview/images/igDataChart_Overview_1.png new file mode 100644 index 0000000000..5e10ca0f1a Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdatachart/overview/images/igDataChart_Overview_1.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/overview/images/igDataChart_Overview_2.png b/docs/jquery/src/content/en/topics/controls/igdatachart/overview/images/igDataChart_Overview_2.png new file mode 100644 index 0000000000..e6556c5d48 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdatachart/overview/images/igDataChart_Overview_2.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/overview/images/igDataChart_Overview_3.png b/docs/jquery/src/content/en/topics/controls/igdatachart/overview/images/igDataChart_Overview_3.png new file mode 100644 index 0000000000..631dc2f70d Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdatachart/overview/images/igDataChart_Overview_3.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/overview/images/igDataChart_Overview_4.png b/docs/jquery/src/content/en/topics/controls/igdatachart/overview/images/igDataChart_Overview_4.png new file mode 100644 index 0000000000..2985aa6ce4 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdatachart/overview/images/igDataChart_Overview_4.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/overview/images/igDataChart_Overview_5.png b/docs/jquery/src/content/en/topics/controls/igdatachart/overview/images/igDataChart_Overview_5.png new file mode 100644 index 0000000000..0e9016eac5 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdatachart/overview/images/igDataChart_Overview_5.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/overview/images/igDataChart_Overview_6.png b/docs/jquery/src/content/en/topics/controls/igdatachart/overview/images/igDataChart_Overview_6.png new file mode 100644 index 0000000000..394043022c Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdatachart/overview/images/igDataChart_Overview_6.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/overview/images/igDataChart_Overview_7.png b/docs/jquery/src/content/en/topics/controls/igdatachart/overview/images/igDataChart_Overview_7.png new file mode 100644 index 0000000000..4a3d061c70 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdatachart/overview/images/igDataChart_Overview_7.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/overview/images/igDataChart_Overview_8.png b/docs/jquery/src/content/en/topics/controls/igdatachart/overview/images/igDataChart_Overview_8.png new file mode 100644 index 0000000000..c313ff19e2 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdatachart/overview/images/igDataChart_Overview_8.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/overview/images/igDataChart_Overview_9.png b/docs/jquery/src/content/en/topics/controls/igdatachart/overview/images/igDataChart_Overview_9.png new file mode 100644 index 0000000000..1050564f56 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdatachart/overview/images/igDataChart_Overview_9.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/overview/images/igDataChart_Types_1.png b/docs/jquery/src/content/en/topics/controls/igdatachart/overview/images/igDataChart_Types_1.png new file mode 100644 index 0000000000..8a44bef275 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdatachart/overview/images/igDataChart_Types_1.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/overview/images/igDataChart_Types_10.png b/docs/jquery/src/content/en/topics/controls/igdatachart/overview/images/igDataChart_Types_10.png new file mode 100644 index 0000000000..097c777807 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdatachart/overview/images/igDataChart_Types_10.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/overview/images/igDataChart_Types_2.png b/docs/jquery/src/content/en/topics/controls/igdatachart/overview/images/igDataChart_Types_2.png new file mode 100644 index 0000000000..11bac97ec8 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdatachart/overview/images/igDataChart_Types_2.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/overview/images/igDataChart_Types_3.png b/docs/jquery/src/content/en/topics/controls/igdatachart/overview/images/igDataChart_Types_3.png new file mode 100644 index 0000000000..14ced2d093 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdatachart/overview/images/igDataChart_Types_3.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/overview/images/igDataChart_Types_4.png b/docs/jquery/src/content/en/topics/controls/igdatachart/overview/images/igDataChart_Types_4.png new file mode 100644 index 0000000000..67d1e7ef2a Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdatachart/overview/images/igDataChart_Types_4.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/overview/images/igDataChart_Types_5.png b/docs/jquery/src/content/en/topics/controls/igdatachart/overview/images/igDataChart_Types_5.png new file mode 100644 index 0000000000..de23a36571 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdatachart/overview/images/igDataChart_Types_5.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/overview/images/igDataChart_Types_6.png b/docs/jquery/src/content/en/topics/controls/igdatachart/overview/images/igDataChart_Types_6.png new file mode 100644 index 0000000000..bbf15bb995 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdatachart/overview/images/igDataChart_Types_6.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/overview/images/igDataChart_Types_7.png b/docs/jquery/src/content/en/topics/controls/igdatachart/overview/images/igDataChart_Types_7.png new file mode 100644 index 0000000000..bbc7b31dc8 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdatachart/overview/images/igDataChart_Types_7.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/overview/images/igDataChart_Types_8.png b/docs/jquery/src/content/en/topics/controls/igdatachart/overview/images/igDataChart_Types_8.png new file mode 100644 index 0000000000..9f97ed70f6 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdatachart/overview/images/igDataChart_Types_8.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/overview/images/igDataChart_Types_9.png b/docs/jquery/src/content/en/topics/controls/igdatachart/overview/images/igDataChart_Types_9.png new file mode 100644 index 0000000000..d3b47a9712 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdatachart/overview/images/igDataChart_Types_9.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/overview/images/igDataChart_Visual_Elements_1.png b/docs/jquery/src/content/en/topics/controls/igdatachart/overview/images/igDataChart_Visual_Elements_1.png new file mode 100644 index 0000000000..4b20149578 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdatachart/overview/images/igDataChart_Visual_Elements_1.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/overview/overview.mdx b/docs/jquery/src/content/en/topics/controls/igdatachart/overview/overview.mdx new file mode 100644 index 0000000000..f1dd437ada --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igdatachart/overview/overview.mdx @@ -0,0 +1,322 @@ +--- +title: "Overview (igDataChart)" +slug: igdatachart-overview +--- +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# Overview (igDataChart) + + +### Purpose + +This topic provides conceptual information about the `igDataChart`™ control including its main features, minimum requirements for using charts and user functionality. + +### Required Background + +The following table lists the materials required as a prerequisite to understanding this topic. + + +**Concepts** + +- Charting +- Chart types +- Data visualization + +**Topics** + + +- [{environment:ProductName} Overview](///igniteui-for-jquery-overview.mdx) + +General information on the {environment:ProductName}™ library. + +### In This Topic + +This topic contains the following sections: + +- [Introduction](#introduction) +- [Supported Chart Types](#supported-chart-types) +- [Minimum Requirements](#min-requirements) +- [Main Features](#main-features) + - [Features Overview](#features-overview) + - [Legend](#legend) + - [Composite charts](#composite-charts) + - [Navigation](#navigation) + - [Axes](#axis-options) + - [Tooltips](#tooltips) + - [Cross-hairs](#crosshairs) + - [Markers](#markers) + - [Trend Lines](#trend-lines) +- [User Interaction and Usability](#user-interaction) +- [Related Content](#related-content) + - [Topics](#topics) + - [Samples](#samples) + + +##Introduction + + +### Introduction to the igDataChart + +The igDataChart is a charting control for rendering various kinds of charts into HTML5 Web applications and sites. It uses the new Canvas tag in HTML5 to plot data series on web pages. + +![](images/igDataChart_Overview_1.png) + +The `igDataChart` control allows many different series types to be rendered like bar/column, financial, category (line, spline, are, etc.), polar, radial, scatter (scatter and scatter line) and others. A chart can be configured with one or more legends which mark the meaning of each data series. In addition other visual and user interaction elements can be configured like cross-hairs, the overview plus detail (OPD) panel, axis major/minor lines, axis range and others. For details see the [Main Features](#main-features) section. + + +##Supported Chart Types + + +### Supported chart types summary + +The `igDataChart` control allows for a variety of series types to be implemented for different visualization purposes. + +See the [Supported chart types table](#supported-chart-types) block for detailed information on supported series types and basic configuration information. + +>**Note:** Pie charts are created using a separate control, `igPieChart`™. For details, see [igPieChart Overview](//igpiechart/overview.mdx). + +### Supported chart types table + +The following table displays the supported chart types. + + +| Chart type | Series type | Description | Series.type property setting | Data binding properties | +| --- | --- | --- | --- | --- | +| Bar and Column | Bar | Visualizes categorized data with horizontal bars. | bar | | +| | Column | Visualizes categorized data with vertical columns. | column | | +| Category | Line | Visualizes categorized data with a line with sharp edges on data points. | line | | +| | Area | Visualizes categorized data with colored area below a line with sharp edges on data points. | area | | +| | Spline | Visualizes categorized data with a line with smooth edges on data points. | spline | | +| | Spline Area | Visualizes categorized data with colored area below a line with smooth edges on data points. | splineArea | | +| | Waterfall | Visualizes categorized data with vertical columns where the first column for the first category starts from the x-axis and each next category starts where the previous one ends. | waterfall | | +| Financial | Candlestick | Displays opening, closing, highest and lowest value of a financial (investment) instrument in the form of a candlestick. | candlestick | | +| | OHLC | Abbreviation for Open, High, Low, Close. Displays opening, closing, highest and lowest value of a financial (investment) instrument in the form of vertical lines with markings for opening and closing values. | ohlc | | +| Polar | Polar Scatter | Visualizes data with dots (or other types of markers) in a polar coordinate system. | polarScatter | | +| | Polar Line | Visualizes data with a line with sharp edges on data points in a polar coordinate system. | polarLine | | +| | Polar Area | Visualizes data with colored area below a line with sharp edges on data points in a polar coordinate system. | polarArea | | +| Radial | Radial Line | Visualizes categorized data with a line with sharp edges on data points with all categories distributed in a circle. | radialLine | | +| | Radial Column | Visualizes categorized data with columns starting from a common center and turned on different angles. | radialColumn | | +| | Radial Pie | Visualizes categorized data with pie-slice shaped elements starting from a common center and turned on different angles. | radialPie | | +| Range Category | Range Area | Visualizes categorized data in ranges between two values with colored area between two lines with sharp edges on data points. | rangeArea | | +| | Range Column | Visualizes categorized data in ranges between two values with columns. | rangeColumn | | +| Bubble | Bubble | Visualizes data described by multiple parameters with colored circles with different diameter. | bubble | | +| Scatter | Scatter | Visualizes data with dots in Cartesian coordinate system. | scatter | | +| | Scatter Line | Visualizes data with a line with sharp edges on data points in Cartesian coordinate system. | scatterLine | | + + +##Minimum Requirements + + +### Minimum requirements summary + +The `igDataChart` control is a jQuery UI widget and therefore depends on the jQuery and jQuery UI libraries. The Modernzr library is also used internally for detecting browser and device capabilities. The control uses several {environment:ProductName}™ shared resources for functionality and data binding. References to these resources are needed nevertheless, in spite of pure jQuery or {environment:ProductNameMVC} being used. The `Infragistics.Web.Mvc` assembly is required when the control is used in the context of ASP.NET MVC. + +### Minimum requirements summary chart + +The following table summarizes the requirements for using the `igDataChart` control. + + +| Requirement | Description | +| --- | --- | +| HTML5 canvas API | The functionality of the charting library is based on the HTML5 Canvas tag and its related API. Any web browser that supports these will be able to render and display charts generated by the igDataChart control. No other HTML5 features are required for the operation of the igDataChart control. The topic [Canvas Element: Support](http://en.wikipedia.org/wiki/Canvas_element#Support) from [Wikipedia™](http://en.wikipedia.org/wiki/Main_Page) details which versions of the most popular desktop and mobile web browsers support the HTML5 Canvas API. | +| jQuery and jQuery UI JavaScript resources | {environment:ProductName} is built on top of these frameworks: [jQuery](http://docs.jquery.com/Main_Page) [jQuery UI](http://jqueryui.com/) | +| Modernizr | The Modernizr library is used by the igDataChart to detect browser and device capabilities. It is not mandatory and if not included the control will behave as if it works in a normal desktop environment with HTML5 compatible browser. [Modernizr](http://modernizr.com/docs/) | +| General charting JavaScript resources | The charting functionality of the {environment:ProductName} library is distributed across several files depending on the series type. In case you wish to include resources manually, you need to use the dependencies listed in the following tables. JS Resource | +| infragistics.util.js, infragistics.util.jquery.js | {environment:ProductName} utilities | +| infragistics.datasource.js | The igDataSource control. | +| infragistics.ext_core.js, infragistics.ext_collections.js, infragistics.ext_ui.js, infragistics.dv_jquerydom.js, infragistics.dv_core.js, infragistics.dv_geometry.js, infragistics.datachart_core.js | Data visualization core functionality | +| infragistics.dvcommonwidget.js | Chart and map common widget | +| infragistics.ui.chart.js | Chart UI widget | +| infragistics.legend.js, infragistics.ui.chartlegend.js | Chart legend functionality and UI widget | +| infragistics.dv_opd.js | Chart Overview Plus Detail Pane functionality | +| infragistics.ui.widget.js | Base igWidget for all {environment:ProductName} widgets. | + + </td> + </tr> + + <tr> + <td>Chart-type-specific JavaScript resources</td> + <td>In addition to the general charting resources listed above, you need to include references related to the respective chart type in use. | Chart Series Type | JS Resource | | --- | --- | | Common category functionality | infragistics.datachart_categorycore.js | | Area, Column, Line, all Spline charts, Waterfall | infragistics.datachart_category.js | | Bar | infragistics.datachart_verticalcategory.js | | Financial, Typical Price Indicator | infragistics.datachart_financial.js, infragistics.datachart_extendedfinancial.js | | Polar Area, Polar Line, all Polar charts | infragistics.datachart_polar.js (dendends on: infragistics.datachart_extendedaxes.js) | | all Radial charts | infragistics.datachart_radial.js (dendends on: infragistics.datachart_extendedaxes.js) | | all Range charts | infragistics.datachart_rangecategory.js | | all Scatter charts | infragistics.datachart_scatter.js | | all Stacked charts | infragistics.datachart_stacked.js (dendends on: infragistics.datachart_verticalcategory.js, infragistics.datachart_extendedaxes.js) | | Tooltips, highlights, and other annotations | infragistics.datachart_annotation.js | | DateTimeAxis / TimeAxis | infragistics.datachart_extendedaxes.js |</td> + </tr> + + <tr> + <td>IG theme</td> + <td>This theme contains custom visual styles created for the {environment:ProductName} library. It is contained in the following file:
    • {IG CSS root}/themes/Infragistics/infragistics.theme.css
    </td> + </tr> + + <tr> + <td>Chart structure</td> + <td>This CSS resource is used by the charting components for rendering different elements of the controls:
    • {IG CSS root}/structure/modules/infragistics.ui.chart.css
    </td> + </tr> + </tbody> +</table> + + +>**Note:**To learn about the different ways to reference JavaScript resources in {environment:ProductName}, see the [Using JavaScript Resources in {environment:ProductName}](///general-and-getting-started/deployment-guide-javascript-resources.mdx) topic. + + +##Main Features + + +### Features Overview + +The following table summarizes the main features of the `igDataChart` control. Additional details are available after following the summary table. + + +| | | +| --- | --- | +| Feature | Description | +| [Series type selection](#supported-chart-types) | A chart can render multiple different series types (see [Composite charts](#composite-charts) ) and the series type is determined by the type option of each series object. Depending on the series type different types of x- and y-axes must be selected, and different data binding options must be set. | +| [Composite charts](#composite-charts) | Composite charts have multiple series of different type or multiple y-axes with different range. | +| [Legend](#legend) | A chart can have a legend configured to display the title of every data series visualized. | +| [Navigation](#navigation) | Interactive features like drag-to-zoom, drag-to-pan, and the Overview Plus Detail (OPD) panel allow easy magnification on details and navigation across different areas of a chart. | +| [Axes](#axis-options) | An initial range can be defined on every axis and later the range can be changed at runtime by user interaction with external controls. Additionally, there are configurable axis labels, axis lines, major and minor lines, and axis stripes. | +| [Tooltips](#tooltips) | Tooltips can be displayed by hovering over the chart. Tooltips are based on templates that define the concrete structure and data displayed in the tooltip. | +| [Cross-hairs](#crosshairs) | Cross-hairs follow the movement of the mouse pointer on the chart and designate the location of the tip of the mouse pointer by two lines crossed at right angle. | +| [Markers](#markers) | Different markers can be used to designate data points on the charts. These markers can be of various type like triangle, diamond, square, etc. | +| [Trend Lines](#trend-lines) | Various data series allow trend line for the depicted data to be calculated and displayed by the control. Trend lines allow a trend or similarity with known mathematical functions to be visually identified in the visualized data. | + + +### Legend + +The legend is a visual panel that shows an icon and a title for each data series in the chart. + +![](images/igDataChart_Overview_2.png) + +Legends are implemented with a separate control from the {environment:ProductName} library called `igChartLegend` and require a separate div element on the page. The div element is referred in each series object so that it is included in the legend. The `igChartLegend` is a very simple control covered in the topic referred below. + +### Composite charts + +A chart can combine multiple series of different type or have series with different y-axis range. That means that two data series can be depicted by two different graphs like bars and lines, for example, or data in different range of values can be depicted on the same chart. + +On the picture below a composite chart combining column and line category series is shown where the columns represent individual values and the line shows the sum of these values and having the form of a line it implies a trend. + +![](images/igDataChart_Overview_3.png) + +### Navigation + +Navigation in a chart is possible with the help of zooming, panning, and the Overview Plus Detail (OPD) window. Zooming is done by mouse scroll or by dragging a rectangle over an area that you want to magnify. Panning is done by dragging with the mouse when the chart is zoomed in. + +The OPD window is a separate navigation tool. It is a smaller image of the chart with the active view marked so that the user can figure out where in the chart sits the active view. + +![](images/igDataChart_Overview_4.png) + +The OPD window is that can be configured to appear by default or switched on by API method and serves to display. Since both zooming and panning rely on a drag action, i.e. holding mouse button down and moving the mouse, it is configurable what the default drag action will do and what modifier key (Ctrl, Alt, Shift) will be used for alternative drag actions. + +### Axes + +Axes are a key feature of all charts and they have a variety of settings. The range of every axis can be defined and changed by API call and define the range of values displayed by the chart in the active view. Besides the main axis lines charts also can display titles for key values, major and minor gridlines, and axis stripes that make easier to differentiate between areas on the chart. + +You can see the axis elements in the figure below: + +![](images/igDataChart_Overview_5.png) + +**Legend:** + +1. Axis line +2. Axis label +3. Minor line +4. Major line +5. Axis stripe + +### Tooltips + +Tooltips are small panels that appear on the current mouse position and display information predefined in a tooltip template. Usually that is the numeric value depicted on the chart on the particular point and/or some other related information. + +![](images/igDataChart_Overview_6.png) + +Tooltip templates can be defined in HTML script tags of the “`text/x-jquery-tmpl`” type or can be just strings with HTML markup. Tooltips essentially define HTML markup with parameters that is to be rendered on screen. Values to be substituted are defined with the jQuery templating syntax, e.g.` ${item.Price}`. + +### Cross-hairs + +Cross-hairs are two lines crossed at right angle that are displayed on the current mouse position when the mouse pointer is over the chart. Crosshairs can help visually align data in the chart series with the equivalent position on the associated axes. + +On the figure below you can see the cross-hairs lines marked with two double-headed red arrows. + +![](images/igDataChart_Overview_7.png) + +### Markers + +Markers are small figures that are displayed for each data point in the data series. There are a plenty of marker types available like circle, triangle, diamond, pyramid, square, pentagon, hexagon, etc. + +On the figure below you can see a chart with circle markers (some markers are designated by red arrows). + +![](images/igDataChart_Overview_8.png) + +### Related Topics: + +- [Adding igDataChart](/igdatachart-adding.mdx) + +### Trend Lines + +Trend lines allow a trend or similarity with known mathematical functions to be visually identified in the visualized data. This allows characteristics of the data to be identified like “this system is linear”, or “this value grows exponentially”. Trend lines are usually applied to financial and category data series. + +On the picture below you can see a line category series with a trend line of the “quintic fit” type which indicates how closely the data matches a quintic function (a polynomial of degree five). + +![](images/igDataChart_Overview_9.png) + + +##User Interaction and Usability + + +###User interactions summary + +The following table summarizes the user interaction capabilities of the `igDataChart` control. Additional details are available in the topics referred in the Configurable? column. + + +| The user can… | Using… | Configurable? | +| --- | --- | --- | +| Zoom | Drag Mouse scroll Dual tap | ![](../../../images/images/positive.png) | +| Pan | Drag Ctrl/Alt/Shift + Drag | ![](../../../images/images/positive.png) | +| Navigate | OPD window | ![](../../../images/images/positive.png) | +| Hover | Mouse hover | ![](../../../images/images/positive.png) | +| Switch On/Off axis lines | External checkbox | ![](../../../images/images/positive.png) | +| Switch On/Off axis major and minor lines | External checkbox | ![](../../../images/images/positive.png) | +| Switch On/Off axis stripes | External checkbox | ![](../../../images/images/positive.png) | +| Switch On/Off axis labels | External checkbox | ![](../../../images/images/positive.png) | +| Switch On/Off data series | External checkbox | ![](../../../images/images/positive.png) | +| Switch On/Off legend | External checkbox | ![](../../../images/images/positive.png) | +| Switch On/Off markers | External checkbox | ![](../../../images/images/positive.png) | + + +##Related Content + + +### Topics + +The following topics provide additional information related to this topic. + +- [igPieChart Overview](//igpiechart/overview.mdx) + +Contains basic information about the related `igPieChart` control for displaying pie charts in web pages. + +- [Series Types (igDataChart)](/igdatachart-series-types.mdx): This topic shows all kinds of charts that can be produced with the help of the `igDataChart` control. + +- [Configurable Visual Elements (igDataChart)](/igdatachart-visual-elements.mdx): This topic lists all configurable visual elements of the `igDataChart` control and the properties that manage them. + +- [jQuery and MVC API Reference Links (igDataChart)](/igdatachart-api-links.mdx): References to the jQuery API reference of `igDataChart` and contains a reference table with all MVC helper properties with code snippets. + +- [Binding igDataChart to Data](/igdatachart-databinding.mdx): Shows how to bind data from various data sources to a chart control. This includes JavaScript arrays, JSON, WCF service. Shows how a big volume of data can be data bound to a chart control. + +- [Styling igDataChart](/styling/igdatachart-styling-themes.mdx): Shows how to apply different styles and themes to a chart control and how to alter elements of standard themes. + + +### Samples + +The following samples provide additional information related to this topic. + + +- [JSON Binding]({environment:SamplesUrl}/data-chart/json-binding): This sample shows how the `igDataChart` binds to JSON data. + +- [Bar and Column Series]({environment:SamplesUrl}/data-chart/bar-and-column-series): Demonstrates how bar and column charts can be implemented using the `igDataChart` control. + +- [Chart Navigation](../04_Configuring/10_igDataChart_Configuring_Navigation_Features.mdx#example): Demonstrates user interaction with a chart including zoom, panning, dragging, and how these can be controlled from the API. + +- [Binding Real-Time Data]({environment:SamplesUrl}/data-chart/binding-real-time-data): Demonstrates how real-time data can by dynamically bound to a data chart. + + + + + + + diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/overview/series-types.mdx b/docs/jquery/src/content/en/topics/controls/igdatachart/overview/series-types.mdx new file mode 100644 index 0000000000..bfcdb933bc --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igdatachart/overview/series-types.mdx @@ -0,0 +1,228 @@ +--- +title: "Series Types (igDataChart)" +slug: igdatachart-series-types +--- +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# Series Types (igDataChart) + + +##Topic Overview + + +### Purpose + +This topic explains conceptually the kinds of chart series that can be produced with the `igDataChart`™ control. + +### Required Background + +The following topics are prerequisite to understanding this topic: + + +- [igDataChart Overview](/igdatachart-overview.mdx) + +This topic provides conceptual information about the `igDataChart` control including its main features, minimum requirements for using charts and user functionality. + + +#### In This Topic + +This topic contains the following sections: + +- [Chart Series Types](#chart-series-types) + - [Supported chart types summary](#supported-chart-types) + - [Supported chart types table](#supported-chart-types-table) + - [Bar and Column series](#bars-and-columns) + - [Bubble series](#bubble) + - [Category series](#category-series) + - [Financial series](#financial-series) + - [Polar series](#polar-series) + - [Radial series](#radial-series) + - [Range Category series](#range-series) + - [Scatter series](#scatter-series) +- [Composite Charts](#composite) +- [Related Content](#related-content) + - [Topics](#topics) + - [Samples](#samples) + + +##Chart Series Types + + +### Supported chart types summary + +The `igDataChart` control allows for a variety of series types to be implemented for different visualization purposes. + +See the next block for detailed information on supported series types and basic configuration information. + +>**Note:** Pie charts can be created using the separate `igPieChart` control. For details see [igPieChart Overview](//igpiechart/overview.mdx). + +### Supported chart types table + + +| Chart type | Series type | Description | `Series.type` property setting | Data binding properties | +| --- | --- | --- | --- | --- | +| [Bar and Column](./00_igDataChart_Series_Types.mdx#bars-and-columns) | Bar | Visualizes categorized data with horizontal bars. | `bar` | | +| | Column | Visualizes categorized data with vertical columns. | `column` | | +| | Stacked Bar | Visualize categorized data with horizontal bars containing horizontally stacked segments. | `stackedBar` | | +| | Stacked 100 Bar | Visualize categorized data with horizontal bars containing horizontally stacked segments normalized to percentage values. | `stacked100Bar` | | +| | Stacked Column | Visualize categorized data with vertically stacked columns. | `stackedColumn` | | +| | Stacked 100 Column | Visualize categorized data with vertically stacked columns where the values are normalized to percentages. | `stacked100Column` | | +| [Bubble](./00_igDataChart_Series_Types.mdx#bubble) | Bubble | Visualizes data described by multiple parameters with colored circles with different diameter. | `bubble` | | +| [Category](./00_igDataChart_Series_Types.mdx#category-series) | Line | Visualizes categorized data with a line with sharp edges on data points. | `line` | | +| | Area | Visualizes categorized data with colored area below a line with sharp edges on data points. | `area` | | +| | Spline | Visualizes categorized data with a line with smooth edges on data points. | `spline` | | +| | Spline Area | Visualizes categorized data with colored area below a line with smooth edges on data points. | `splineArea` | | +| | Waterfall | Visualizes categorized data with vertical columns where the first column for the first category starts from the x-axis and each next category starts where the previous one ends. | `waterfall` | | +| | Point | Visualize categorized data with individually plotted point markers. | `point` | | +| | Stacked Area | Visualize categorized data with stacked colored area below a line with sharp edges on data points. | `stackedArea` | | +| | Stacked Line | Visualize categorized data in stacked lines with sharp edges on data points. | `stackedLine` | | +| | Stacked Spline | Visualize categorized data in stacked lines with smooth edges on data points | `stackedSpline` | | +| | Stacked Spline Area | Visualize categorized data with stacked colored area below a line with smooth edges on data points. | `stacked100Bar` | | +| | Stacked 100 Area | Visualize categorized data with stacked colored area below a line with sharp edges on data points where the values are normalized to percentages. | `stacked100Area` | | +| | Stacked 100 Line | Visualize categorized data in stacked lines with sharp edges on data points where the values are normalized to percentages. | `stacked100Line` | | +| | Stacked 100 Spline | Visualize categorized data in stacked lines with smooth edges on data points where the values are normalized to percentages. | `stacked100Spline` | | +| | Stacked 100 Spline Area | Visualize categorized data with stacked colored area below a line with smooth edges on data points where the values are normalized to percentages. | `stacked100SplineArea` | | +| [Financial](./00_igDataChart_Series_Types.mdx#financial-series) | Candlestick | Displays opening, closing, highest and lowest value of a financial (investment) instrument in the form of a candlestick. | `candlestick` | | +| | OHLC | Abbreviation for Open, High, Low, Close. Displays opening, closing, highest and lowest value of a financial (investment) instrument in the form of vertical lines with markings for opening and closing values. | `ohlc` | | +| [Polar](./00_igDataChart_Series_Types.mdx#polar-series) | Polar Scatter | Visualizes data with dots (or other types of markers) in a polar coordinate system. | `polarScatter` | | +| | Polar Line | Visualizes data with a line with sharp edges on data points in a polar coordinate system. | `polarLine` | | +| | Polar Area | Visualizes data with colored area below a line with sharp edges on data points in a polar coordinate system. | `polarArea` | | +| | Polar Spline | Visualize data with a spline displaying Bezier-curved transitions between data points in a polar coordinate system. | `polarSpline` | | +| | Polar Spline Area | Visualize data with colored area below a spline displaying Bezier-curved transitions between data points in a polar coordinate system. | `polarSplineArea` | | +| [Radial](./00_igDataChart_Series_Types.mdx#radial-series) | Radial Line | Visualizes categorized data with a line with sharp edges on data points with all categories distributed in a circle. | `radialLine` | | +| | Radial Column | Visualizes categorized data with columns starting from a common center and turned on different angles. | `radialColumn` | | +| | Radial Pie | Visualizes categorized data with pie-slice shaped elements starting from a common center and turned on different angles. | `radialPie` | | +| | Radial Area | Visualize categorized data with colored area below a line with sharp edges on data points with all categories distributed in a circle. | `radialArea` | | +| [Range Category](./00_igDataChart_Series_Types.mdx#range-series) | Range Area | Visualizes categorized data in ranges between two values with colored area between two lines with sharp edges on data points. | `rangeArea` | | +| | Range Column | Visualizes categorized data in ranges between two values with columns. | `rangeColumn` | | +| [Scatter](./00_igDataChart_Series_Types.mdx#scatter-series) | Scatter | Visualizes data with dots in Cartesian coordinate system. | `scatter` | | +| | Scatter Line | Visualizes data with a line with sharp edges on data points in Cartesian coordinate system. | `scatterLine` | | +| | Scatter Spline | Visualize data with a spline displaying Bezier-curved transitions between data points in Carthesian coordinate system. | `scatterSpline` | | +| | Scatter Area | Visualize data as a colored 2D surface based on a triangulation of X+Y+Value points in a Cartesian coordinate system. | `scatterArea` | | +| | Scatter Contour | Visualize data as isarithmic contours based on a triangulation of X+Y+Value points in a Cartesian coordinate system. | `scatterContour` | | +| | Scatter Polygon | Visualize data as a series of polygons in a Cartesian coordinate system. | `scatterPolygon` | | +| | Scatter Polyline | Visualize data as a series of polylines in a Cartesian coordinate system. | `scatterPolyline` | | + + +### Bar and Column series + +Bar and column charts visualize data with the help of filled rectangles where the larger size corresponds to the visualized value. + +![](images/igDataChart_Types_1.png) + +Technically, bar and column charts mean one and the same but we make a distinction that bar charts have bars span horizontally and column charts have bars span vertically. + +Bar charts are used to display data of separate functions for a discrete category axis values. For example the figure below shows a bar chart with the volume of car sales from three manufacturers (separate functions, i.e. single manufacturer sales as a function of region) for different geographical regions (discrete category axis values). + +### Bubble series + +Bubble charts represent data entities with four independent numeric parameters in the form of (typically) filled circles. + +![](images/igDataChart_Types_2.png) + +The coordinates of the center of each circle represent the common x- and y-coordinate parameters of each entity. The radius of the bubble represents the third parameter. Part of the bubbles can be filled with different color to represent a possible fourth parameter of the data series. The fourth parameter is not mandatory and if skipped all bubbles will be depicted with the same color. There is also an additional fifth parameter that can be used as a label for each data point. + +### Category series + +Category series charts are a range of series types for the `igDataChart` control that allow data for separate distinct category axis values to be plotted. This various types are: area, column, line, spline, spline area, step area, step line and waterfall. For more details you can investigate the topic dedicated on category series charts. + +Following is an example of a waterfall chart. + +![](images/igDataChart_Types_7.png) + +### Financial series + +Financial charts (also called candlestick charts) are a variation of bar charts which allows for more variables to be depicted. + +![](images/igDataChart_Types_3.png) + +They are mainly used to visualize stock market movements of a particular commodity, currency or stock representing opening, closing, minimum and maximum price for a particular period. Each “candlestick” stands for a specific time period (for example, a day), the lowest point of the candlestick is the lowest price, the highest point is the highest price, and the lower and higher end of the bar are the closing and opening prices, correspondingly. + +Usually these charts are combined with trend lines which are derived by using some mathematical function applied on the data series to calculate approximation and extrapolation of the data. For example, average, quadratic, or logarithmic functions. + +### Polar series + +Polar scatter charts are plotted in polar coordinate system where the first coordinate is expressed in angle units (degrees, radians) and the second as distance from center (radius). The chart shows discrete points which are not connected and is useful to assess the “density” of the points (for example, measurement samples) in a certain area on the chart. + +![](images/igDataChart_Types_4.png) + +It is also possible to plot polar line or area depending on the purpose. + +### Radial series + +Radial line charts are similar to polar scatter charts but it is a category type series, i.e. it lacks angle coordinate and instead data is divided into categories that are spread evenly across a full circle. The distance from the center depicts the visualized value. + +![](images/igDataChart_Types_5.png) + +It is usually used to visualize small datasets and to compare quantitatively between multiple aspects of one object. For example, it is used for player statistics in sports regarding different aspects like agility, speed, effectiveness, etc. + +### Range Category series + +Range category charts are used to depict the spread between two values that fall in a certain category. The variables used to plot the chart are the category coordinate, and two values in the same measurement unit for the category. + +![](images/igDataChart_Types_8.png) + +This chart was invented by stock market traders and used primarily in that industry. The specific feature is that these charts are not time based but rather *movement* based, i.e. two different values on the category (x) axis represent two different movements and the change between deals can be tracked. + +Using `igDataChart` you can implement range area and range column charts, and the sample chart above is a range area chart. + +### Scatter series + +Scatter charts depict individual points in orthogonal (Cartesian) coordinate system, and is sometimes also called XY-chart. It is possible to plot only discrete points or points connected with lines. + +![](images/igDataChart_Types_6.png) + +Scatter charts are used to represent scientific measurement or other data collection for the relation of two variables and easily shows the density of samples in particular area of the measurement, and it is possible to spot trends in the distribution of data. + +Two of the scatter types, `scatterPolygon` and `scatterPolyline`, depict data differently than the other types. They depict collections of points as two-dimensional shapes where each point makes up one corner, or vertex, of the shape. For example, a rectangle is produced by having 4 points, one in each corner. The `scatterPolygon` type depicts a filled shape while the `scatterPolyline` type depicts the point collection as line segments connecting each point. + +![](images/igDataChart_Types_10.png) + +## Composite Charts + + +### Composite charts summary + +Composite charts plot at least two data series that either use different axis ranges or are visualized by two different types of graphs. That means that, for example, one function spans between 1 and 100, and the other between 5 and 500, or even has a logarithmic scale, or one function is depicted by columns and the other by line. + +This sample demonstrates how to configure a composite chart with two Y-axes with different range and two different data series types: column and line series. +There are no specific settings for creating composite charts but rather you can mix different series types and use multiple axes. +
    + [Composite Chart]({environment:SamplesEmbedUrl}/data-chart/composite-chart) + ![](images/igDataChart_Types_9.png) +
    + +##Related Content + +### Topics + +The following topics provide additional information related to this topic. + + +- [Adding igDataChart](/igdatachart-adding.mdx): This topic demonstrates how to add the igDataChart control to a web page and bind it to data. + +- [](/igdatachart-api-links.mdx)[jQuery and MVC API Reference Links (igDataChart)](/igdatachart-api-links.mdx): This topic provides links to the API documentation for jQuery and {environment:ProductNameMVC} class for `igDataChart` + + +### Samples + +The following samples provide additional information related to this topic. + + +- [Bar and Column Series]({environment:SamplesUrl}/data-chart/bar-and-column-series): This sample demonstrates creating bar and column series charts. + +- [Category Series]({environment:SamplesUrl}/data-chart/category-series): This sample demonstrates creating category series charts. + +- [Composite Chart]({environment:SamplesUrl}/data-chart/composite-chart): This sample demonstrates creating a composite chart. + +- [Financial Series]({environment:SamplesUrl}/data-chart/financial-series): This sample demonstrates creating financial (or “candlestick”) charts. + +- [Polar Series]({environment:SamplesUrl}/data-chart/polar-series): This sample demonstrates creating polar charts. + +- [Radial Series]({environment:SamplesUrl}/data-chart/radial-series): This sample demonstrates creating radial charts. + +- [Range Category Series]({environment:SamplesUrl}/data-chart/range-category-series): This sample demonstrates creating range category charts. + +- [Scatter Series]({environment:SamplesUrl}/data-chart/scatter-series): This sample demonstrates creating scatter (or “XY series) charts. + +- [Stacked Series]({environment:SamplesUrl}/data-chart/stacked-series): This sample demonstrates creating Stacked series charts (XY charts). \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/overview/visual-elements.mdx b/docs/jquery/src/content/en/topics/controls/igdatachart/overview/visual-elements.mdx new file mode 100644 index 0000000000..24c21d591e --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igdatachart/overview/visual-elements.mdx @@ -0,0 +1,147 @@ +--- +title: "Configurable Visual Elements (igDataChart)" +slug: igdatachart-visual-elements +--- +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# Configurable Visual Elements (igDataChart) + + +##Topic Overview + +### Purpose + +This topic lists all configurable visual elements of the `igDataChart`™ control and the properties that manage them. + +### Required Background + +The following topics are prerequisite to understanding this topic: + + +- [igDataChart Overview](/igdatachart-overview.mdx) + +This topic provides conceptual information about the `igDataChart` control including its main features, minimum requirements for using charts and user functionality. + + +Configurable Visual Elements of the `igDataChart` Control and Related Properties + + +### Configurable visual elements summary + +The following picture demonstrates the configurable visual elements of the `igDataChart` control. A listing of the properties that manage them is available in the [Configurable visual elements and related properties](#configuring-visual-elements-properties) block below. + +![](images/igDataChart_Visual_Elements_1.png) + +**Configurable Visual Elements:** + +​1) Data series + +​2) Legend + +​3) Axis label + +​4) Axis line + +​5) Axis major line + +​6) Axis minor line + +​7) Axis strip + +​8) Overview plus detail panel + +​9) Cross-hairs and cross-hair point + +​10) Tooltip + +### Configurable visual elements and related properties + +The following table maps the visual elements of the `igDataChart` control and the properties that configure them. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Visual ElementProperty
    Data Series
    Legend
    Axis Labels







    Axis Lines
    Axis Major Lines
    Axis Minor Lines
    Axis Stripes
    Axis Ticks


    Overview Plus Detail window
    Cross-hairs
    Tooltip
    + +### Samples + +This sample configures several of the elements, available in the `igDataChart` control. +Chart elements such as axis, labels, grid lines, grid stripes, zoom bars, series, trend lines, indicators and crosshairs are all available to enhance the control's presentation. + +
    + [Chart Elements]({environment:SamplesEmbedUrl}/data-chart/chart-elements) +
    + +In addition to the settings above, the sample below demonstrates both enabling the default tooltip for the Chart’s series and configuring a custom tooltip template for the "United States" series. + +
    + [Series Tooltips]({environment:SamplesEmbedUrl}/data-chart/series-tooltips) +
    + +##Related Content + + +### Topics + +The following topics provide additional information related to this topic. + +- [Adding igDataChart](/igdatachart-adding.mdx): This topic demonstrates how to create add the `igDataChart`™ control and bind it to data. + +- [](/igdatachart-api-links.mdx)[jQuery and MVC API Reference Links (igDataChart)](/igdatachart-api-links.mdx): This topic provides links to the API documentation for jQuery and {environment:ProductNameMVC} class for `igDataChart`™ control. + + + + + + + diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/series-requirements.mdx b/docs/jquery/src/content/en/topics/controls/igdatachart/series-requirements.mdx new file mode 100644 index 0000000000..68d06f1c87 --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igdatachart/series-requirements.mdx @@ -0,0 +1,1095 @@ +--- +title: "Series Requirements" +slug: igdatachart-series-requirements +--- + +# Series Requirements + + + +The `igDataChart`™ control supports a number of various series, and some of these series require specific axis types and data mapping in order for them to render correctly on the chart plot area. + +### Overview + + +The topic is organized as follows: + +- [Requirements for Category Series](#category) +- [Requirements for Range Series](#range) +- [Requirements for Stacked Series](#stacked) +- [Requirements for Scatter Series](#scatter) +- [Requirements for Polar and Radial Series](#polar-and-radial) +- [Requirements for Financial Series](#financial) + +## Requirements for Category Series + + +The table below shows what axis types can be used with Category Series in the `igDataChart` control. This table indicates also the data members that are required by these series. + +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Axis TypesSeries Property
    Series TypenumericXnumericYcategoryXcategoryYtimeordinalTimeXpercentChangeYvalueMemberPath
    Area⏺⏺⏺⏺⏺⏺
    Bar⏺⏺⏺
    Column⏺⏺⏺⏺⏺⏺
    Line⏺⏺⏺⏺⏺⏺
    Point⏺⏺⏺⏺⏺⏺
    Spline⏺⏺⏺⏺⏺⏺
    Spline Area⏺⏺⏺⏺⏺⏺
    Step Area⏺⏺⏺⏺⏺⏺
    Step Line⏺⏺⏺⏺⏺⏺
    Waterfall⏺⏺⏺⏺⏺⏺
    +
    + + +## Requirements for Range Series + +The table below shows what axis types can be used with Range Series in the `igDataChart` control. This table indicates also the data members that are required by these series. + +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Axis TypesMemberPath Properties
    Series TypenumericYcategoryXtimeordinalTimeXpercentChangeYhighlow
    rangeArea⏺⏺⏺⏺⏺⏺⏺
    rangeColumn⏺⏺⏺⏺⏺⏺⏺
    +
    + + +## Requirements for Stacked Series + +The table below shows what axis types can be used with Stacked Series in the `igDataChart` control. This table indicates also the data members that are required by these series. + +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Axis TypesMemberPath Property
    Series TypenumericXnumericYcategoryXcategoryYtimevalue
    stackedArea⏺⏺⏺⏺
    stackedBar⏺⏺⏺
    stackedColumn⏺⏺⏺⏺
    stackedLine⏺⏺⏺⏺
    stackedSpline⏺⏺⏺⏺
    stackedSplineArea⏺⏺⏺⏺
    stacked100-Area⏺⏺⏺
    stacked100-Bar⏺⏺⏺
    stacked100-Column⏺⏺⏺⏺
    stacked100-Line⏺⏺⏺⏺
    stacked100-Spline⏺⏺⏺⏺
    stacked100-Spline Area⏺⏺⏺⏺
    +
    + + +## Requirements for Scatter Series + + +The table below shows what axis types can be used with Scatter Series in the `igDataChart` control. This table indicates also the data members that are required by these series. +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Axis TypesMemberPath Properties
    Series TypenumericYnumericXpercentChangeYxyradiusfillvalueshape
    scatterPoint⏺⏺⏺⏺⏺
    scatterLine⏺⏺⏺⏺⏺
    scatterSpline⏺⏺⏺⏺⏺
    scatterBubble⏺⏺⏺⏺⏺⏺⏺\*
    scatterHD⏺⏺⏺⏺
    scatterArea⏺⏺⏺⏺⏺
    scatterContour⏺⏺⏺⏺⏺
    scatterPolygon⏺⏺⏺
    scatterPolyline⏺⏺⏺
    +
    + +## Requirements for Polar and Radial Series + + +The table below shows what axis types can be used with Polar Series and Radial Series in the `igDataChart` control. This table indicates also the data members that are required by these series. +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Axis TypesMemberPath Properties
    Series TypenumericRadiusnumericAnglecategoryAnglevalueangleradius
    polarArea⏺⏺⏺⏺
    polarLine⏺⏺⏺⏺
    polarScatter⏺⏺⏺⏺
    polarSplineArea⏺⏺⏺⏺
    polarSpline⏺⏺⏺⏺
    radialArea⏺⏺⏺
    radialColumn⏺⏺⏺
    radialLine⏺⏺⏺
    radialPie⏺⏺⏺
    +
    + +## Requirements for Financial Series + + +The table below shows what axis types can be used with Financial Price Series and Financial Indicators in the `igDataChart` control. This table indicates also the data members that are required by these series. +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Axis TypesMemberPath Properties
    Series TypenumericYcategoryXtimeordinalTimeXpercentChangeYhighlowopenclosevolume
    FinancialPrice⏺⏺⏺⏺⏺⏺⏺⏺⏺
    AbsoluteVolumeOscillatorIndicator⏺⏺⏺⏺⏺⏺
    AccumulationDistributionIndicator⏺⏺⏺⏺⏺⏺⏺⏺⏺
    AverageDirectionalIndexIndicator⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺
    AverageTrueRangeIndicator⏺⏺⏺⏺⏺⏺⏺⏺
    BollingerBandsOverlay⏺⏺⏺⏺⏺⏺⏺⏺
    BollingerBandWidthIndicator⏺⏺⏺⏺⏺⏺⏺⏺
    ChaikinOscillatorIndicator⏺⏺⏺⏺⏺⏺⏺⏺⏺
    ChaikinVolatilityIndicator⏺⏺⏺⏺⏺⏺⏺
    CommodityChannelIndexIndicator⏺⏺⏺⏺⏺⏺⏺⏺
    DetrendedPriceOscillatorIndicator⏺⏺⏺⏺⏺⏺
    EaseOfMovementIndicator⏺⏺⏺⏺⏺⏺⏺⏺
    FastStochasticOscillatorIndicator⏺⏺⏺⏺⏺⏺⏺⏺
    ForceIndexIndicator⏺⏺⏺⏺⏺⏺⏺
    FullStochasticOscillatorIndicator⏺⏺⏺⏺⏺⏺⏺⏺
    MarkerFacilitationIndexIndicator⏺⏺⏺⏺⏺⏺⏺⏺
    MassIndexIndicator⏺⏺⏺⏺⏺⏺⏺
    MedianPriceIndicator⏺⏺⏺⏺⏺⏺⏺
    MoneyFlowIndexIndicator⏺⏺⏺⏺⏺⏺⏺⏺⏺
    MovingAverageConvergenceDivergenceIndicator⏺⏺⏺⏺⏺⏺⏺⏺
    NegativeVolumeIndexIndicator⏺⏺⏺⏺⏺⏺⏺⏺⏺
    OnBalanceVolumeIndicator⏺⏺⏺⏺⏺⏺⏺
    PercentagePriceOscillatorIndicator⏺⏺⏺⏺⏺⏺⏺⏺
    PercentageVolumeOscillatorIndicator⏺⏺⏺⏺⏺⏺
    PositiveVolumeIndexIndicator⏺⏺⏺⏺⏺⏺⏺
    PriceVolumeTrendIndicator⏺⏺⏺⏺⏺⏺⏺
    PriceChannelOverlay⏺⏺⏺⏺⏺⏺⏺
    RateOfChangeAndMomentumIndicator⏺⏺⏺⏺⏺⏺
    RelativeStrengthIndexIndicator⏺⏺⏺⏺⏺⏺
    SlowStochasticOscillatorIndicator⏺⏺⏺⏺⏺⏺⏺⏺
    StandardDeviationIndicator⏺⏺⏺⏺⏺⏺⏺⏺
    StochRSIIndicator⏺⏺⏺⏺⏺⏺
    TRIXIndicator⏺⏺⏺⏺⏺⏺
    TypicalPriceIndicator⏺⏺⏺⏺⏺⏺⏺⏺
    UltimateOscillatorIndicator⏺⏺⏺⏺⏺⏺⏺⏺
    WeightedCloseIndicator⏺⏺⏺⏺⏺⏺⏺⏺
    WilliamsPercentRIndicator⏺⏺⏺⏺⏺⏺⏺⏺
    +
    \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/styling/images/Applying_the_New_Style_1.png b/docs/jquery/src/content/en/topics/controls/igdatachart/styling/images/Applying_the_New_Style_1.png new file mode 100644 index 0000000000..6b3ea3e4c1 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdatachart/styling/images/Applying_the_New_Style_1.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/styling/images/Applying_the_New_Style_2.png b/docs/jquery/src/content/en/topics/controls/igdatachart/styling/images/Applying_the_New_Style_2.png new file mode 100644 index 0000000000..e3f1e1bdc2 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdatachart/styling/images/Applying_the_New_Style_2.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/styling/images/Using_Themes_with_igDataChart_1.png b/docs/jquery/src/content/en/topics/controls/igdatachart/styling/images/Using_Themes_with_igDataChart_1.png new file mode 100644 index 0000000000..bc6d09f68f Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdatachart/styling/images/Using_Themes_with_igDataChart_1.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/styling/images/Using_Themes_with_igDataChart_2.png b/docs/jquery/src/content/en/topics/controls/igdatachart/styling/images/Using_Themes_with_igDataChart_2.png new file mode 100644 index 0000000000..21eead66ec Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdatachart/styling/images/Using_Themes_with_igDataChart_2.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/styling/images/igDataChart_Styling_the_Chart_Series_1.png b/docs/jquery/src/content/en/topics/controls/igdatachart/styling/images/igDataChart_Styling_the_Chart_Series_1.png new file mode 100644 index 0000000000..5bba7366f0 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdatachart/styling/images/igDataChart_Styling_the_Chart_Series_1.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/styling/images/igDataChart_Styling_the_Chart_Series_2.png b/docs/jquery/src/content/en/topics/controls/igdatachart/styling/images/igDataChart_Styling_the_Chart_Series_2.png new file mode 100644 index 0000000000..f12ef77168 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdatachart/styling/images/igDataChart_Styling_the_Chart_Series_2.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/styling/images/igDataChart_Styling_the_Chart_Series_3.png b/docs/jquery/src/content/en/topics/controls/igdatachart/styling/images/igDataChart_Styling_the_Chart_Series_3.png new file mode 100644 index 0000000000..56c5ca559b Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdatachart/styling/images/igDataChart_Styling_the_Chart_Series_3.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/styling/the-chart-series.mdx b/docs/jquery/src/content/en/topics/controls/igdatachart/styling/the-chart-series.mdx new file mode 100644 index 0000000000..19a9d07f39 --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igdatachart/styling/the-chart-series.mdx @@ -0,0 +1,236 @@ +--- +title: "Styling the Chart Series (igDataChart)" +slug: igdatachart-styling-the-chart-series +--- +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# Styling the Chart Series (igDataChart) + + +##Topic Overview + +### Purpose + +This topic provides a brief overview on how to style the series of the `igDataChart`™ control and demonstrates, as an example, how to apply drop-shadow effect to the series. + +### Required background + +The following topics are prerequisites to understanding this topic: + + +- [Adding igDataChart](/igdatachart-adding.mdx) + +This topic demonstrates how to add the `igDataChart` control to a page and bind it to data. + + +### In this topic + +This topic contains the following sections: + +- [Introduction](#introduction) +- [Styling the Chart Series by Applying Linear Gradient Colors](#linear-gradient) +- [Styling the Chart Series by Applying Drop-Shadow Effect](#drop-shadow-effect) + - [Drop-shadow effect configuration summary](#drop-shadow-effect-config) + - [Shadow types](#shadow-types) + - [Drop-shadow effect configuration summary chart](#drop-shadow-effect-chart) + - [Property settings](#property-settings) + - [Example – drop-shadow effect with Monolith shadow](#example) + - [Example – drop-shadow effect with Compound shadow](#example-drop-shadow-effect) +- [Related Content](#related-content) + - [Topics](#topics) + + +##Introduction + + +### Chart series styling summary + +The igDataChart's series can be styled in many aspects, the main of which are applying different fill and outline brushes to the series. This is managed by the and properties of the series. Some other aspects of the series’ look-and-fill, such as the thickness of the outline and the opacity of the series, are configurable, too through the and properties of the series. + +In addition to managing the styling described above, [drop-shadow effect can be applied to the chart series](#drop-shadow-effect) by setting the property. + +##Styling the Chart Series by Applying Linear Gradient Colors +The linear gradient effect is achieved, by setting the type of the or to `"linearGradient"` and providing an array of `colorStops` (at least two) with color and offset for each. + +The following sample defines the chart configuration needed to achieve that effect: + +
    + [Chart Fill Gradients]({environment:SamplesEmbedUrl}/data-chart/chart-fill-gradients) +
    + + +##Styling the Chart Series by Applying Drop-Shadow Effect + +### Drop-shadow effect configuration summary + +With the drop-shadow effect, the series appear as if casting a shadow. + +
    + [Drop Shadows]({environment:SamplesEmbedUrl}/data-chart/drop-shadows) + ![](images/igDataChart_Styling_the_Chart_Series_1.png) +
    + +Applying the drop-shadow effect to the series is done by setting the property of the series to “true”. Customization of the effect in terms of [configurable shadow type](#shadow-types), blur radius, color, direction, and opacity is supported through the respective shadow-related properties of the [series](/overview/igdatachart-series-types.mdx) (See [Drop-shadow effect configuration summary chart](#drop-shadow-effect-chart), [Property settings](#property-settings), and the examples.). + +### Shadow types + +Two types of shadows are available for the drop-shadow effect depending on whether the fill shape and the outline shape of a series cast separate shadows each or the series cast single monolith shadow: + +- Monolith shadow – one shadow is displayed for the visual of the series +- Compound shadow – the fill part and outline part of the series each cast a separate shadow + +The default schedule type is Monolith. The benefit of using the Compound shadow type is in the capability to visually fine-tune the drop-shadow effect. + +>**Note:** Currently, [blur](#blur) can be applied only to Compound shadows. For details on this limitation, see [this note](#GoogleBug). + +The shadow type is controlled by the property. When this property is set to *“true”* (default), Monolith shadow is applied; when set to “false”, the shadow will be Compound. + +### Drop-shadow effect configuration summary chart + +The following table explains briefly the configurable aspects of the chart drop-shadow effect and maps them to properties that configure them. The default drop-shadow effect styling differs depending on the series type. Further details and examples about configuring the shadow type after the table. + + +| Configurable aspect | Details | Properties | +| --- | --- | --- | +| Configurable type of the shadow | Specifies whether the shadow can be configured (styled) individually for each series or only for the series visual as whole | | +| Direction and offset | The direction at which the shadow is cast as well as the horizontal and vertical offset from the series specified as X,Y offset co-ordinates relative to the top-left edge of the series’ bounds rectangle. | , | +| Color / Opacity | The color of the shadow. If a semi-transparent color is specified, a semi-transparent shadow is rendered. | | +| Blur | The definition level of the edges of the shadow (sharp/blurry). The blur level is defined by the number of pixels throughout which the contour spreads and fades out. The higher the value, the blurrier the shadow. | | + + +### Property settings + +The following table lists the configurable aspects of the drop-shadow effect to their respective property settings. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    In order to configure:Use this property:And set it to:
    Drop-shadow effect to be used\*“true”\*
    The type of the shadow“true” or “false”
    The color/opacity of the shadowThe desired color HTML name, HEX color code or RGBA color definition
    The direction and offsetThe horizontal offset of the shadow from the series visualA double value indicating the offset in pixels
    The vertical offset of the shadow from the series visualA double value indicating the offset in pixels
    The blur levelThe desired pixel double value representing the blur level. The higher the value, the blurrier the shadow.
    \*\*Note:\*\* Monolith shadows do not allow for the blur effect to be applied to them: when the useSingleShadow property is set to “true”, the shadowBlur setting is disregarded and no blur is applied to the shadow. This is a deliberate limitation due to a [Google® Chrome™ bug](https://code.google.com/p/chromium/issues/detail?id=100703) and extended to all major browsers thus ensuring consistent behavior across all of them. This behavior is subject to change once the aforementioned Chrome issue is resolved. In the meantime, if you need to apply blur to the shadow, use the Compound type of shadow (useSingleShadow:"true").
    + +### Example – drop-shadow effect with Monolith shadow + +This example demonstrates applying and styling a [Monolith](#shadow-types) drop-shadow. Since the property is "true" by default, setting it explicitly in the code is not necessary. + +The screenshot below demonstrates how a line series in an `igDataChart` control looks as a result of the following shadow-related settings: + +Property | Value +---|--- + | true + | 20 + | "darkBlue" + | 10 + | -15 + + +![](images/igDataChart_Styling_the_Chart_Series_2.png) + +Following is the code that implements this example. + +**In JavaScript:** + +```js +series: [ + { + type: "column", + isDropShadowEnabled: true, + shadowBlur: 20, + shadowColor: "darkBlue", + shadowOffsetX: 10, + shadowOffsetY: -15 + } +``` + +### Example – drop-shadow effect with Compound shadow + +This example demonstrates applying a [Compound](#shadow-types) drop-shadow with a blur. + +The screenshot below demonstrates how a column series in a `igDataChart` control looks as a result of the following shadow-related settings: + +Property | Value +---|--- + | true + | false + | 20 + | “darkBlue” + | 10 + | -15 + + +![](images/igDataChart_Styling_the_Chart_Series_3.png) + +Following is the code that implements this example. + +**In JavaScript:** + +```js +series: [ + { + type: "column", + isDropShadowEnabled: true, + useSingleShadow: false, + shadowBlur: 20, + shadowColor: "darkBlue", + shadowOffsetX: 10, + shadowOffsetY: -15, + } +``` + + +##Related Content + + +### Topics + +The following topics provide additional information related to this topic. + + +- [Styling igDataChart](/igdatachart-styling-themes.mdx): This topic demonstrates how to apply styles and themes to the `igDataChart` control. + +- [Styling and Theming in {environment:ProductName}](///general-and-getting-started/styling-and-theming/deployment-guide-styling-and-theming.mdx) + +General information and a procedure for updating styles and themes in {environment:ProductName}™ library. + + + + + + + diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/styling/themes.mdx b/docs/jquery/src/content/en/topics/controls/igdatachart/styling/themes.mdx new file mode 100644 index 0000000000..3d8246952e --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igdatachart/styling/themes.mdx @@ -0,0 +1,349 @@ +--- +title: "Styling igDataChart" +slug: igdatachart-styling-themes +--- + +# Styling igDataChart + + +##Topic Overview + + +### Purpose + +This topic demonstrates how to apply styles and themes to the `igDataChart`™ control. + +### Required Background + +**Concepts** + +- Cascading Style Sheets +- Applying themes by changing linked CSS files + +**Topics** + +- [Styling and Theming in {environment:ProductName}](///general-and-getting-started/styling-and-theming/deployment-guide-styling-and-theming.mdx): General information and a procedure for updating styles and themes in {environment:ProductName}™ library. + +**External Resources** + + +- [jQuery UI](http://jqueryui.com/): General information about the jQuery UI library. + +- [Theming jQuery UI](http://docs.jquery.com/UI/Theming): Provides information on using themes with jQuery UI library. + +- [jQuery UI CSS Framework](http://docs.jquery.com/UI/Theming/API): Provides information in the jQuery UI styling framework. + +### In This Topic + +This topic contains the following sections: + +- [Introduction](#topic-introduction) +- [Themes Summary](#themes-summary) +- [Required Cascading Style Sheets (CSS)](#required-css) + - [Required CSS summary](#required-css-summary) + - [Required CSS code: HTML](#required-css-html) + - [Required CSS code: ASPX](#required-css-aspx) +- [Chart Styles Reference](#chart-style-reference) +- [igDataChart Styling Options](#igDataChart-styling-options) + - [Introduction](#style-options-introduction) + - [igDataChart property-configurable styling aspects](#igDataChart-property-config) +- [Modifying the Chart-Specific Visual Elements Using Themes](#modify-chart-specific) + - [Introduction](#modify-chart-introduction) + - [Preview](#preview) + - [Overview](#overview) + - [Steps](#steps) +- [Related Content](#related-content) + - [Topics](#topics) + - [Resources](#resources) + + +##Introduction + + +### Introduction to themes + +The `igDataChart` uses the jQuery UI CSS Framework for the purposes of applying styles and themes. By default, the `igDataChart` uses the IG Theme, which is a jQuery UI theme provided by Infragistics for use in your application. Additionally, the IG Theme has some additional chart specific styles. That means in order to customize the looks of charts a general jQuery UI theme is not sufficient. You will need to provide additional style classes that alter chart specific elements like data series and axes. + +To customize a theme, you can use the ThemeRoller tool. This jQuery UI tool facilitates the creation of custom themes that are compatible with the jQuery UI widgets. Many prebuilt themes are available for download and use in your website. The `igDataChart` control supports the use of ThemeRoller themes. + +Detailed information for using themes with {environment:ProductName} library is available in the [Styling and Theming in {environment:ProductName}](///general-and-getting-started/styling-and-theming/deployment-guide-styling-and-theming.mdx) topic. + +Note: The base theme of {environment:ProductName} is not necessary for charts and you may safely omit it on pages only containing charts. + + +##Themes Summary + +A summary of the `igDataChart` control’s available themes. + + + + + + + + + + + + + + + + + + + + +
    ThemeDescription
    IG Theme

    Path: `{IG CSS root}/themes/Infragistics/`

    File: `infragistics.theme.css`

    		This theme defines general visual features for all {environment:ProductName} controls. Detailed information for using the IG theme is available in the Styling and Theming in {environment:ProductName} topic.
    Chart Structure

    Path: `{IG CSS root}/structure/modules/`

    File: `infragistics.ui.chart.css`

    		This theme defines visual elements specific for charts.
    + +##Required Cascading Style Sheets (CSS) + +###Required CSS summary + +The following CSS resources are necessary to correctly render charts: + +- `infragistics.theme.css` – Contains the IG Theme +- `infragistics.ui.chart.css` – Contains the Chart Structure classes + +In the code snippets that follow, it is assumed that the CSS resources are located in the `Content/ig` folder below the website or application root. + +>**Note:** The following blocks provide information on manually including required CSS files but the recommended way to load these files into your page it to use the Infragistics Loader control. + +###Required CSS code: HTML + +**In HTML:** + +```html + + +``` + +###Required CSS code: ASPX + +**In ASPX:** + +```csharp + + +``` + + +##Chart Styles Reference + + +###Style reference summary + +A summary of the `igDataChart` style’s purpose and functionality. + + +| | | +| --- | --- | +| Property | Description | +| .ui-chart-palette-1 to .ui-chart-palette-N | Sets border and background color for data series 1 to data series N. You can have as many ui-chart-palette classes as needed by your application. | +| .ui-chart-axis | Sets border and background color for chart axes. | +| .ui-chart-legend-items-list | Sets all styling options for chart legends. | +| .ui-chart-legend-item-text | Sets all styling options for legend item text. | +| .ui-chart-legend-item-badge | Sets all styling options for legend item icon. | +| .ui-chart-tooltip | Sets all styling options for chart tooltips. | + + +>**Note:** In all style classes, the border-color setting determines the outline of the corresponding element and the background-color settings determines the background or fill color of the element. + + +##igDataChart Styling Options + + +###Introduction + +The `igDataChart` control is all about visual content and it has a lot of properties and styling options for changing the layout and colors of charts. With CSS you can define: + +- colors for data series, +- colors for trend lines, +- colors for legend list items, both text and icons and +- colors, shades, fonts and other CSS properties for tooltip formatting. + +With individual chart control options you can define: + +- marker color and shape, +- color and thickness for axis stroke, major and minor stroke and +- colors for data series and trend lines. + +When set, the chart properties have precedence over style classes defined in CSS files. These properties provide for programmatically changing the looks of charts at runtime. + +###igDataChart property-configurable styling aspects + +The property configurable styling aspects of the `igDataChart` control and map them the respective properties that manage them. + + +| | | +| --- | --- | +| Configurable aspect | Property | +| Color for main axis line of the axis with name key. | axes[“key”].stroke | +| Color for major stroke of the axis with name key. | axes[“key”].majorStroke | +| Color for minor stroke of the axis with name key. | axes[“key”].minorStroke | +| Color for negative values of the data series with name key. | series[“key”].negativeBrush | +| Color for the data series with name key. | series[“key”].brush | +| Color for the marker of the data series with name key. | series[“key”].markerBrush | +| Color for the outline of the data series with name key. | series[“key”].markerOutline | +| Color for the trend line of the data series with name key. | series[“key”].trendLineBrush | +| List of colors for data series | brushes | +| List of colors for marker outline | markerOutlines | +| List of colors for markers | markerBrushes | +| Thickness of the main axis line of the axis with name key. | axes[“key”].strokeThickness | +| Thickness of the major stroke of the axis with name key. | axes[“key”].majorStrokeThickness | +| Thickness of the minor stroke of the axis with name key. | axes[“key”].minorStrokeThickness | +| Thickness of the trend line of data series with name key. | series[“key”].trendLineThickness | + + +##Modifying the Chart-Specific Visual Elements Using Themes + + +###Introduction + +Demonstrates how to alter the default settings for various visual elements of the `igDataChart` control by changing the `infragistics.ui.chart.css` chart-specific styles. + +Use an existing page with a chart, since the procedure for creating a chart is not included for this example. The example shows you how to modify the chart styles. + +In this example, we change the colors of data series. + +###Preview + +The following screenshots show the default and updated view of a sample chart. + +Default chart colors|Updated chart colors +---|--- +![](images/Using_Themes_with_igDataChart_1.png)|![](images/Using_Themes_with_igDataChart_2.png) + + +###Prerequisites + +To complete the procedure, you need the following: + +- An HTML5 web page with an existing `igDataChart` control + +###Overview + +A high level overview of the process: + +1. [Copy the default chart CSS file](#copy-default-css) +2. [Modify the styles for the chart visual elements](#modify-sryles) +3. [Change the link from the default chart CSS file to the modified file](#change-css-links) +4. [Verify the result](#final-result) + +###Steps + +Demonstrate how to modify the default IG Chart styles with your preferred settings. + +1. Copy the default chart CSS file. + + **Copy the CSS file, with the default chart styles (`infragistics.ui.chart.css`), from the {environment:ProductName} installation folder to the themes folder of your web site or application.** + + For instance, if you have a folder `Content/themes` in your web site or application where keep the CSS files used by the application, then make a copy of the default chart CSS file mentioned above in `Content/themes/MyChartTheme/ig.ui.chart.custom.css`. + +2. Modify the styles for chart visual elements + + Open the copy of the CSS file and make the desired changes to the styles. (Refer to the [Chart Styles Reference](#chart-style-reference) section for details about the individual `igDataChart` styles.) + + **In CSS:** + +```css + .ui-chart-palette-1 + { + border-color: rgb(35, 128, 168); + border-color: rgba(35, 128, 168, .8); + background-color: rgb(68, 172, 214); + background-color: rgba(68, 172, 214, .8); + } + .ui-chart-palette-2 + { + border-color: rgb(51, 51, 51); + border-color: rgba(51, 51, 51, .8); + background-color: rgb(73, 73, 73); + background-color: rgba(73, 73, 73, .8); + } + .ui-chart-palette-3 + { + border-color: rgb(128, 128, 128); + border-color: rgba(128, 128, 128, .8); + background-color: rgb(168, 168, 168); + background-color: rgba(168, 168, 168, .8); + } + .ui-chart-palette-4 + { + border-color: rgb(24, 81, 112); + border-color: rgba(24, 81, 112, .8); + background-color: rgb(33, 110, 153); + background-color: rgba(33, 110, 153, .8); + } + .ui-chart-palette-5 + { + border-color: rgb(135, 153, 34); + border-color: rgba(135, 153, 34, .8); + background-color: rgb(164, 186, 41); + background-color: rgba(164, 186, 41, .8); + } + .ui-chart-axis + { + border-color: #989EA3; + background-color: #989EA3; + } + .ui-chart-legend-items-list + { + padding: 10; + margin: 5px; + } + .ui-chart-legend-item-text + { + vertical-align: text-bottom; + } + .ui-chart-legend-item-badge + { + vertical-align: baseline; + } + .ui-chart-tooltip + { + -moz-box-shadow: 5px 5px rgba(0,0,0,0.5); + -webkit-box-shadow: 5px 5px rgba(0,0,0,0.5); + box-shadow: 5px 5px rgba(0,0,0,0.5); + } +``` + +3. Change the link from the default chart CSS file to the modified file. + + Update the link to the default chart CSS file to point to the CSS file modified in the previous step. + + **In HTML:** + +```html + +``` + + **In ASPX:** + +```csharp + +``` + +4. Verify the result. + + To verify that the chart colors and styles changed, save the web page and open it in your browser. + + +##Related Content + +###Topics + +The following topics provide additional information related to this topic. + + +- [igDataChart Overview](/overview/igdatachart-overview.mdx): Conceptual information about the `igDataChart` control including its main features, minimum requirements for using charts and user functionality. + +- [Adding igDataChart](/igdatachart-adding.mdx): Demonstrates how to create the `igDataChart` control and bind it to data. + +###Resources + +The following third party material provides additional information related to this topic. + +- [jQuery Themeroller](http://jqueryui.com/themeroller/): Provides jQuery UI themes for preview and download. + +- [Styling the Chart Series (igDataChart)](/igdatachart-styling-the-chart-series.mdx): This topic provides a brief overview on how to style the series of the `igDataChart`™ control and demonstrates, as an example, how to apply drop-shadow effect to the series. \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/controls/igdialog/accessibility-compliance.mdx b/docs/jquery/src/content/en/topics/controls/igdialog/accessibility-compliance.mdx new file mode 100644 index 0000000000..ab290ecb0f --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igdialog/accessibility-compliance.mdx @@ -0,0 +1,60 @@ +--- +title: "Accessibility Compliance (igDialog)" +slug: igdialog-accessibility-compliance +--- + +# Accessibility Compliance (igDialog) + +### Purpose + +This topic explains the `igDialog`™ accessibility features and provides advice regarding how to achieve accessibility compliance for pages containing dialog windows. + +### Required background + +The following topics are prerequisite to understanding this topic: + +- [**Accessibility Compliance Reference**](#accessibility-compliance) +- [Introduction](#accessibility-compliance-intro) +- [Accessibility compliance reference summary](#accessibility-compliance-summary) +- [**Related Content**](#related-content) +- [Topics](#topics) + + +## Accessibility Compliance Reference + +### Introduction + +All of the {environment:ProductName}™ controls and components comply with Section 508, Subpart 1194.22 of the Rehabilitation Act of 1973. Table 1 contains the specific rules of Subpart 1194.22 that pertain to the control. Also, detailed information about how the grid control complies with each rule is represented. + +To meet the requirements of each accessibility rule, in some cases you may need to interact with the control by to setting a specific property, but in other cases the control does the work for you. + +> **Note:** As jQuery controls are client-only, some of the rules are not supported and are thus marked as limitations. + +### Accessibility compliance reference summary + +The following table summarizes the accessibility compliance features of the igDialog: + +Rules | Rule Text | How We Comply +---------| -----------| ---------- +(c) | Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup. | Using client-side events, the user can change attributes of any of the control's DOM elements reflecting the current state. +(d)* | Documents shall be organized so they are readable without requiring an associated style sheet. | The control's markup is not readable without the associated style sheet because it is a client-side control and depends on the CSS rules. +(l) | When pages utilize scripting languages to display content or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology. | When the control's scripts are changing the page markup, the new created content complies with the screen reader due to the attributes described in rule (c). + + +\* - control limitations + +## Related Content + +### Topics + +The following topics provide additional information related to this topic: + +- [Accessibility Compliance](//general-and-getting-started/accessibility-compliance.mdx): Provides reference information for accessibility compliance of all {environment:ProductName} controls. +- [***igDialog* Overview**](./00_igDialog Overview.mdx): The topic introduces the user to the `igDialog` control’s main features. + + + + + + + diff --git a/docs/jquery/src/content/en/topics/controls/igdialog/adding-igdialog.mdx b/docs/jquery/src/content/en/topics/controls/igdialog/adding-igdialog.mdx new file mode 100644 index 0000000000..70abdff652 --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igdialog/adding-igdialog.mdx @@ -0,0 +1,207 @@ +--- +title: "Adding igDialog" +slug: adding-igdialog +--- +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# Adding igDialog + +## Introduction + +This procedure guides you through the process of adding an `igDialog` control to a web page. The `igDialog` is configured so that all of the header buttons are enabled – such as buttons for minimize, maximize, pin and close. + +You have the option of instantiating the control in several ways. This topic demonstrates the typical jQuery UI method, the jQuery method (by using attributes) and instantiating the control using the {environment:ProductNameMVC} Dialog. + +### Preview + +The following screenshot is a preview of the final result: + +![](images/03_Adding_igDialog_1.png) + +## Steps + +The following steps demonstrate how to add the `igDialog` control to a web page: + +### 1. Reference the required JavaScript and CSS files + +You can add the required files in two ways, one is by using individual scripts and the other is by using the [Infragistics loader component](//general-and-getting-started/using-infragistics-loader.mdx). + +The recommended approach to instantiating the `igDialog` control is to use the loader. The following code listings will demonstrate how to work with the loader manually as well as interfacing with the loader component. + +- **Reference using individual files** + + **In HTML:** + +```html + + + +``` + +- **Reference using the Infragistics loader** + + **In HTML:** + +```html + + + +``` + + **In JavaScript:** + +```js + +``` + +> **Note:** If you are using {environment:ProductNameMVC} Dialog, remember to reference the ***Infragistics.Web.Mvc*** dll into your project. + + +### 2. Instantiate igDialog + +The following code demonstrates how to initialize `igDialog` control, with full control, in the header. As you will notice, the only properties that are defined are those that need to override their default values. Properties like are `true` by default, that’s why you don’t need to configure it. + +- **Instantiate in JavaScript** + + - ​Define `DIV` HTML placeholder + + **In HTML:** + +```html +
    + igDialog Content +
    +``` + + - JavaScript initialization code + + If you are using the Infragistics loader component then you can put code from the following inside the loader’s callback function: + + **In JavaScript:** + +```js + $.ig.loader(function () { + /* Initialization code here */ + }); +``` + + If you are referencing individual files then you can bind to jQuery ready event as demonstrated by the following code listing: + + **In JavaScript:** + +```js + $(function () { + $("#igDialog1").igDialog({ + showMinimizeButton: true, + showMaximizeButton: true, + showPinButton: true, + width: "400px", + height: "500px" + }); + }); +``` + +If you want to use the `igDialog` with TypeScript, you can instantiate it using the code above. You just need to include the reference paths to the {environment:ProductFamilyName} and jQuery type definitions for TypeScript: + + **In TypeScript:** +```typescript + /// + /// + /// +``` + +>**Note:** This is needed for TypeScript versions prior to 1.5 so the compiler could include the dependencies in the program during compilation. In 1.5 and newer versions they can be defined in a separate tsconfig.json file. For more information see the [tsconfig.json wiki page](https://github.com/Microsoft/TypeScript/wiki/tsconfig.json) + +> More information on how to use the {environment:ProductName} definitions for TypeScript can be found in ["Using {environment:ProductName} with TypeScript" topic](using-ignite-ui-with-typescript.html). + +- **Razor Initialization** + + It’s important to know that the {environment:ProductNameMVC} Dialog is not like the other controls where it is expected that it will render the HTML, along with the JavaScript code that initializes the control. Because the `igDialog` content can be any HTML markup, you need to define the markup first, and then the {environment:ProductNameMVC} will define all the configurations of the control. + + - Define `DIV` HTML placeholder + + **In HTML:** + +```html +
    + igDialog Content +
    +``` + + {environment:ProductNameMVC} code: + + **In C#:** + +```csharp + @(Html + .Infragistics() + .Dialog() + .ContentID("igDialog1") + .ShowMinimizeButton(true) + .ShowMaximizeButton(true) + .ShowPinButton(true) + .Width("400px") + .Height("500px") + .Render() + ) +``` + +> **Note**: When you want to set identifier of the {environment:ProductNameMVC} Dialog, you have three different options. For more information see the [Property Reference](./03_API Reference/00_igDialog Property Reference.mdx) topic. If the defined HTML placeholder has the same ID as in the sample above – `igDialog1`, then you can use one of the following: + +> `Dialog.ContentJquerySelector("#igDialog1")` – defines the selector – the same as it is supposed to be in the jQuery. + +> `Dialog.ContentID("igDialog1")` – defines the selector without the #, which will be rendered automatically by the {environment:ProductNameMVC}. + +> `Dialog.ID(“igDialog1”)` – the same as the `ContentID(“igDialog1”)` + +> **Note**: If you want to define the HTML DIV Placeholder code using the {environment:ProductNameMVC}, then the Dialog Helper suggests the following method. Assume that you want to achieve the same effect as defining an DIV HTML placeholder, then use: `Dialog.ContentHTML("
    igDialog Content
    ")` + +- **Instantiate in AngularJS** + +The following example demonstrates how to declare a Dialog Window with an AngularJS directive: + +
    + [{environment:SamplesEmbedUrl}/dialog-window/angular]({environment:SamplesEmbedUrl}/dialog-window/angular) +
    + +> More information on how to use the {environment:ProductName} directives for AngularJS can be found in ["Using {environment:ProductName} with AngularJS" topic](../../10_AngularJS Directives/00_Using_Ignite_UI_with_AngularJS.mdx). + +## Destroy igDialog + +### Introduction + +When the igDialog is added into the browser DOM tree, then the target igDialog HTML element is removed from its original parent and is inserted into the dynamically created one. This allows absolute positioning of the igDialog. If you want to remove the control from your page dynamically, the most painless way is to use the method. This will ensure that the element is removed from the DOM tree, as well as will ensure that the target igDialog element is moved back to its original parent. + +The usage of the method can be appropriate when you want to recreate a widget. An example of this would be if you want to dynamically change the value of a property which doesn’t allow any alternate removal operation. For example is one of the properties that cannot be changed dynamically. + +### Code + +The following JavaScript snippet demonstrates how to invoke `igDialog` method: + +**In JavaScript:** + +```js +$('#igDialog).igDialog("destroy"); +``` + +## Related Content + +### Topics + +The following topics provide additional information related to this topic: + +- [igDialog Overview](./00_igDialog Overview.mdx): Introduction to `igDialog` control’s main features +- [Configuring igDialog](./02_Configuring/~Configuring igDialog.mdx): `igDialog` features and their configuration and usage +- [API Refernce](./03_API Reference/~igDialog API Reference.mdx): This topic introduces `igDialog` API categories. Within the topic you can find all the references to the control properties, methods, events and CSS classes, as well as some specific cases when the API is used. + +### Samples + +The following sample provide additional information related to this topic: + +- [Icons]({environment:SamplesUrl}/dialog-window/icons): This sample demonstrates you how to show `igDialog` icons. diff --git a/docs/jquery/src/content/en/topics/controls/igdialog/api-reference/api-reference.mdx b/docs/jquery/src/content/en/topics/controls/igdialog/api-reference/api-reference.mdx new file mode 100644 index 0000000000..803ea583b7 --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igdialog/api-reference/api-reference.mdx @@ -0,0 +1,34 @@ +--- +title: "API Reference (igDialog)" +slug: igdialog-api-reference +--- + +# API Reference (igDialog) + +## In This Group of Topics + +#### Introduction + +This topic introduces the `igDialog`™ API categories. Within this topic you can find all of the references to the control properties, methods, events and CSS classes, as well as some specific cases when the API is used. + +#### Topics + +This section contains topics covering the API of the `igDialog` control. + +- [**Property Reference (*igDialog*)**](./00_igDialog Property Reference.mdx): The topic that introduces the user to the `igDialog` control’s properties. + +- [**Method Reference (*igDialog*)**](./01_igDialog Method Reference.mdx): The topic that introduces the user to the `igDialog` control’s methods. + +- [**Event Reference (*igDialog*)**](./02_igDialog Event Reference.mdx): The topic that introduces the user to the `igDialog` control’s events. + +- [**CSS Classes Reference (*igDialog*)**](./03_igDialog Css Classes Reference.mdx): The topic that introduces the user to the `igDialog` control’s CSS classes. + + + + + + + + + + diff --git a/docs/jquery/src/content/en/topics/controls/igdialog/api-reference/css-classes-reference.mdx b/docs/jquery/src/content/en/topics/controls/igdialog/api-reference/css-classes-reference.mdx new file mode 100644 index 0000000000..e43cad5080 --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igdialog/api-reference/css-classes-reference.mdx @@ -0,0 +1,229 @@ +--- +title: "CSS Classes Reference (igDialog)" +slug: igdialog-css-classes-reference +--- +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# CSS Classes Reference (igDialog) + +## Topic Overview + +### Purpose + +The topic that introduces the user to the `igDialog`™ control’s CSS classes. + +#### In this topic + +This topic contains the following sections: + +- [Introduction](#intro) +- [CSS Classes Reference](#classes) +- [Related Content](#related-content) + + +## Introduction to the igDialog for Mobile CSS Classes + +This section explains the `igDialog` CSS classes. You can override all of the styles and create a custom `igDialog` control layout using the instructions provided. + + +## CSS Classes Reference + +The following summarizes the purpose and functionality of the `igDialog` control’s featured : + +Classes applied to the **main/top element**: + +``` +ui-igdialog +ui-dialog +ui-widget +ui-widget-content +ui-corner-all +``` + +Classes applied to the **header**: + +``` +ui-igdialog-header +ui-dialog-titlebar +ui-widget-header +ui-corner-top +ui-helper-clearfix +``` + +Classes applied to the **header in the focused state**: + +``` +ui-igdialog-header-focus +ui-state-focus +``` + +Classes applied to the **header in the minimized state**: + +``` +ui-corner-bottom +``` + +Classes applied to the **header text**: + +``` +ui-igdialog-headertext +ui-dialog-title +``` + +Extra class applied to SPAN which represents an **image in the header**, when the "image" option is set: + +``` +ui-igdialog-headerimage +``` + + +Classes applied to the **header text** when a dialog is in its **minimized state**: + +``` +ui-igdialog-headertext-minimized +``` + +Classes applied to the **buttons** located in the header: + +``` +ui-igdialog-headerbutton +ui-corner-all +ui-state-default +``` + +Classes applied to the **buttons** located in the header when a **mouse is moved over** them: + +``` +ui-igdialog-headerbutton-hover +ui-state-hover +``` + +Classes applied to the **close button** located in the header: + +``` +ui-igdialog-buttonclose +``` + +Classes applied to the **minimize button** located in the header: + +``` +ui-igdialog-buttonminimize +``` + +Classes applied to the **maximize button** located in the header: + +``` +ui-igdialog-buttonmaximize +``` + +Classes applied to the **pin button** located in the header: + +``` +ui-igdialog-buttonpin +``` + +Classes applied to the icon of the **close** button: + +``` +ui-igdialog-close-icon +ui-icon ui-icon-close +``` + +Classes applied to the icon of the **minimize** button: + +``` +ui-igdialog-minimize-icon +ui-icon +ui-icon-minus +``` + +Classes applied to the icon of the **maximize** button: + +``` +ui-igdialog-maximize-icon +ui-icon +ui-icon-extlink +``` + +Classes applied to the icon of the **restore** button: + +``` +ui-igdialog-restore-icon +ui-icon +ui-icon-copy +``` + +Classes applied to the icon of the **pin** button: + +``` +ui-igdialog-pin-icon +ui-icon +ui-icon-pin-s +``` + +Classes applied to the icon of the **unpin** button: + +``` +ui-igdialog-unpin-icon +ui-icon +ui-icon-pin-w +``` + +Classes applied to the **footer**: + +``` +ui-igdialog-footer +ui-widget-header +ui-corner-bottom +ui-helper-clearfix +``` + +Classes applied to the dialog while **resizing**: + +``` +ui-igdialog-resizing +``` + +Classes applied to the dialog while **dragging**: + +``` +ui-igdialog-dragging +``` + +Classes applied to the **header** when the dialog is in an **unmovable state** such as maximized or pinned: + +``` +ui-igdialog-unmovable +``` + +Classes applied to the **shell element** when the dialog is in a **modal state**: + +``` +ui-igdialog-overlay +ui-widget-overlay +``` + +Classes applied to the **content area** of the dialog: + +``` +ui-igdialog-content +ui-widget-contentui-dialog-content +``` + + +## Related Content + +### Topics + +The following topics provide additional information related to this topic: + +- [Property Reference (*igDialog*)](./00_igDialog Property Reference.mdx): The topic that introduces the user to the `igDialog` control’s properties. +- [Method Reference (*igDialog*)](./01_igDialog Method Reference.mdx): The topic that introduces the user to the `igDialog` control’s methods. +- [Event Reference (*igDialog*)](./02_igDialog Event Reference.mdx): The topic that introduces the user to the `igDialog` control’s events. + + + + + + + diff --git a/docs/jquery/src/content/en/topics/controls/igdialog/api-reference/event-reference.mdx b/docs/jquery/src/content/en/topics/controls/igdialog/api-reference/event-reference.mdx new file mode 100644 index 0000000000..f8d17358c1 --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igdialog/api-reference/event-reference.mdx @@ -0,0 +1,85 @@ +--- +title: "Event Reference (igDialog)" +slug: igdialog-event-reference +--- +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# Event Reference (igDialog) + +## Topic Overview + +### Purpose + +The topic that introduces the user to the `igDialog`™ control’s events. + +#### In this topic + +This topic contains the following sections: + +- [**Event Reference**](#events) +- [**Attaching Event Handlers in jQuery and MVC**](#attaching-handlers) + - [Attaching Event Handlers in jQuery](#attaching-handlers-jquery) + - [Attaching Event Handlers in MVC](#attaching-handlers-mvc) +- [**Related Content**](#related-content) + - [Topics](#topics) + + +## Event Reference + +The following table summarizes the purpose and functionality of the `igDialog` control’s featured events: + +Event | Description | Cancelable +------|-------------|----------- + | Event is raised before the state of dialog was changed. | True + | Event is raised after the state of dialog was changed. | False + | Event is raised after the end animation, when the dialog was closed or opened. | False + | Event is raised when the dialog or its content gets focus. | False + | Event is raised when the dialog or its content loses focus. | False + + +## Attaching Event Handlers in jQuery and MVC + +### Attaching Event Handlers in jQuery + +To attach to an event, just define a handler for it in the same way you define a property. Now if the event is triggered, the handler will be called. + +**In JavaScript:** + +```js +$("#igDialog1").igDialog({ + stateChanging: function (e, args) { + // Handle event + } +}); +``` + +The following example shows how this is done and it also demonstrates the use of the jQuery's [`on`](http://api.jquery.com/on/) method to attach an event handler to a selected element: + +
    + [{environment:SamplesEmbedUrl}/dialog-window/api-and-events]({environment:SamplesEmbedUrl}/dialog-window/api-and-events) +
    + +### Attaching Event Handlers in MVC + +When you attach a handler in MVC, use the jQuery User Interface (UI) pattern for attaching handlers to widget events. This means you should use jQuery’s [`on`](http://api.jquery.com/on/), [`bind`](http://api.jquery.com/bind/) or [`live`](http://api.jquery.com/live/) functions and pass the event’s name to them. The event name should be a lowercase string that is a concatenation of the name of the control and the event. You can do the same with the jQuery widget as well, but this would not be necessary because you can attach the event handlers directly when initializing the control. For more information, see the [jQuery widget factory](http://wiki.jqueryui.com/w/page/12138135/Widget%20factory). The code bellow demonstrates how to attach handlers to igDialog events when implementing a MVC solution. + +**In JavaScript:** + +```js +$("#igDialog1").live({ igdialogstatechanging: function (e, args) { + // Handle event +}}); +``` + +> **Note:** The jQuery [`live`](http://api.jquery.com/live/) function is used in case some DOM elements are added after attaching the event to the handler. + +## Related Content + +### Topics + +The following topics provide additional information related to this topic: + +- [Property Reference (*igDialog*)](./00_igDialog Property Reference.mdx): The topic that introduces the user to the `igDialog` control’s properties. +- [Method Reference (*igDialog*)](./01_igDialog Method Reference.mdx): The topic that introduces the user to the `igDialog` control’s methods. +- [CSS Classes Reference (*igDialog*)](./03_igDialog Css Classes Reference.mdx): The topic that introduces the user to the `igDialog` control’s CSS classes. + diff --git a/docs/jquery/src/content/en/topics/controls/igdialog/api-reference/method-reference.mdx b/docs/jquery/src/content/en/topics/controls/igdialog/api-reference/method-reference.mdx new file mode 100644 index 0000000000..d5b03425e7 --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igdialog/api-reference/method-reference.mdx @@ -0,0 +1,68 @@ +--- +title: "Method Reference (igDialog)" +slug: igdialog-method-reference +--- +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# Method Reference (igDialog) + +## Topic Overview + +### Purpose + +The topic that introduces the user to the igDialog™ control’s methods. + +#### In this topic + +This topic contains the following sections: + +- [Method Reference](#methods) +- [**Related Content**](#related-content) + - [Topics](#topics) + - [Samples](#samples) + + +## Method Reference + +The following table summarizes the purpose and functionality of the igDialog control’s featured methods: + +Method | Description +--- | --- + | Gets the state of the editor. + | Gets the reference to a dynamically created DIV element, which represents dialog. + | Retrieves the `igDialog` content container or sets its content to be the new content provided. This is the inner container of the dialog window excluding headers, resizing handlers, etc. + | Closes the `igDialog`, if it is opened. + | Opens the `igDialog`, if it is closed. + | Minimizes the `igDialog`, if it is opened. + | Maximizes the `igDialog`, if it is opened. + | Pins the `igDialog`, if it is not pinned. + | Unpins the `igDialog`, if it is pinned. + | Gets reference to the top modal dialog. + |Returns if dialog is modal and is currently active. + | Moves dialog to the top. + | Destroys the `igDialog` control. + +## Related Content + +### Topics + +The following topics provide additional information related to this topic: + +- [Property Reference (*igDialog*)](./00_igDialog Property Reference.mdx): The topic that introduces the user to the `igDialog` control’s properties. +- [Event Reference (*igDialog*)](./02_igDialog Event Reference.mdx): The topic that introduces the user to the `igDialog` control’s events. +- [CSS Classes Reference (*igDialog*)](./03_igDialog Css Classes Reference.mdx): The topic that introduces the user to the `igDialog` control’s CSS classes. + + +### Samples + +The following samples provide additional information related to this topic: + +- [API and Events](./02_igDialog Event Reference.mdx#attaching-handlers-jquery): This sample demonstrates how to handle events in the Dialog Window control and API usage. +- [Modal Dialog]({environment:SamplesUrl}/dialog-window/modal-dialog): This sample shows you how to create a modal dialog. + + + + + + + diff --git a/docs/jquery/src/content/en/topics/controls/igdialog/api-reference/property-reference.mdx b/docs/jquery/src/content/en/topics/controls/igdialog/api-reference/property-reference.mdx new file mode 100644 index 0000000000..235c0df907 --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igdialog/api-reference/property-reference.mdx @@ -0,0 +1,157 @@ +--- +title: "Property Reference (igDialog)" +slug: igdialog-property-reference +--- +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# Property Reference (igDialog) + +## Topic Overview + +### Purpose + +The topic that introduces the user to the `igDialog`™ control’s properties. + +### In this topic + +This topic contains the following sections: + +- [**jQuery Property Reference**](#jquery) +- [**MVC Property Reference**](#mvc) +- [**Related Content**](#related-content) + - [Topics](#topics) + - [Samples](#samples) + + +## jQuery Property Reference + +The following table summarizes the purpose and functionality of the `igDialog` control’s featured properties. All the properties can be changed dynamically, except for the and the value. + +| | | | | +| --- | --- | --- | --- | +| Property | Type | Values (**Default Value**) | Description | +| | object | **null** DOM object | This property will allow the setting and getting of the jQuery HTML DIV object, which is used as main container for dialog. Note the following restrictions is necessary when you are using that property: The container is optional and it should not contain any children. The container should not have a parent. The container should not contain attributes, which might destroy layout or appearance of dialog. Change of this option is not supported. | +| | object | **null** DOM object jQuery object | Gets or sets the HTML container element for igDialog. By default, the parent form of the original target element is used and if the parent is unavailable, then an HTML body object is used. Note that if the CSS container property “position” is not set with its value as "static", then the position value is set to "relative". | +| | string | **“opened”** “closed” “minimized” “maximized” | This property allows to you to set and get the state of the dialog. | +| | boolean | true **false** | Gets or sets the pinned state of the dialog. | +| | object | **null** [100, 200] { my: “left top”, at: “left top”, offset: “100 200” } | Gets or sets the initial position of the igDialog. That can be array of 2 numeric values which represent left/top coordinates. The other option is an object supported by jQuery [`position()`](http://jqueryui.com/demos/position/) method. | +| | boolean | true **false** | Gets or sets the modal state of the igDialog. When the window is minimized or pinned, you cannot have this state. | +| | boolean | **true** false | Gets or sets the ability to drag the igDialog control. | +| | boolean | **true** false | Gets or sets the ability to resize the igDialog. | +| | boolean | **true** false | Sets or gets the ability to process the focus and blur events of the control itself as well as its child elements, located in the dialog. | +| | boolean | **true** false | Gets or sets the ability to adjust state of header to be in focused and not-focused state. This property works only if the property is enabled. | +| | number | **0** | Gets or sets the value for the attribute applied to the igDialog main HTML element. | +| | number | **1000** | Gets or sets the value of the applied to the igDialog main HTML element. | +| | string | **null** “” | Gets or sets the temporary value for IFRAME “src” attribute. This property is used when changing the parent, if the parent of the base element is a HTML IFRAME element. This property is not obligatory, but may prevent exceptions. | +| | string / boolean | **“auto”** true false | Gets or sets the action that will happen if the igDialog header is double clicked. If the value is “false” the window will not be affected by mouse double click. However, it will react if the value is “true”. Additionally, the “auto” state implies that the igDialog will be affected by double click only if there is a maximize icon in the header. | +| | number | **null** 100 “100px” “2em” “100%” | Gets or sets initial height of the dialog in pixels for the normal state. Note that, if “%” is used than the size of the window browser object is used and it has effect only when the igDialog is opening | +| | number | **300** “300px” “2em” “100%” | Gets or sets the initial width of dialog in pixels for normal state. Note that, if “%” is used than the size of the window browser object is used and it has effect only when the igDialog is opening. | +| | number | **100** “100px” “2em” “100%” | Gets or sets the minimal height of the dialog in the normal state. | +| | number | **150** “150px” “2em” “100%” | Gets or sets the minimal width of the dialog in the normal state. | +| | number | **null** 1500 “1500px” “5em” “100%” | Gets or sets the maximal height of the dialog in the normal state. Note that the value of that option takes effect only while resizing the igDialog. | +| | number | **null** 1500 “1500px” “5em” “100%” | Gets or sets the maximal width of the dialog in the normal state. Note: that option takes effect only while resizing the dialog by end user. | +| | boolean | **true** false | Gets or sets the ability to close the dialog using the Esc key. | +| | boolean | **true** false | Gets or sets the visibility of the close button in the igDialog header. | +| | boolean | true **false** | Gets or sets the visibility of the maximize button in the igDialog header. | +| | boolean | true **false** | Gets or sets the visibility of the pin button in the header. | +| | boolean | true **false** | Gets or sets the ability to automatically pin the igDialog when the dialog was minimized. | +| | string/number | **null** “slide” “explode” 500 | Gets or sets the animation applied to the dialog when it is opened. That can be any object supported by the jQuery show() method. | +| | string/number | **null** “slide” “explode” 500 | Gets or sets the animation applied to the dialog when it is closed. That can be any object supported by the jQuery hide() method. | +| | string | **null** “container-class” | Gets or sets the name of the CSS class, which is applied to the main DIV element of the igDialog. | +| | string | **null** **“img-class”** | Gets or sets name of the CSS class, which is applied to the SPAN element, located on the left side of igDialog header. | +| | string | **null** “HEADER” | Gets or sets the text which appears in the igDialog header. | +| | boolean | **true** false | Gets or set the visibility of the igDialog header. | +| | boolean | true **false** | Gets or sets the visibility of the igDialog footer. | +| | string | **null** “FOOTER” | Gets or sets text,which appears in the igDialog footer. | +| | string | **null** “X” | Gets or sets the tooltip for close button in the igDialog. | +| | string | **null** “MIN” | Gets or sets the tooltip for minimize button in the igDialog. | +| | string | **null** “MAX” | Gets or sets the tooltip for maximize button in the igDialog. | +| | string | **null** “PIN” | Gets or sets the tooltip for pin button in the igDialog. | +| | string | **null** “UNPIN” | Gets or sets the tooltip for unpin button in the igDialog. | +| | string | **null** “RESTORE” | Gets or sets the tooltip for restore button in the igDialog. | + + +## MVC Method Reference + +The following table summarizes the purpose and functionality of * {environment:ProductNameMVC} * `Dialog`. Most of the methods correspond to the jQuery properties except for and . There are additional MVC methods that don’t have corresponding igDialog properties, such as: [`ContentJquerySelector`](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~ContentJquerySelector.html), [`ContentID`](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~ContentID.html), [`ID`](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~ID.html), [`ContentHTML`](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogWrapper~ContentHTML.html). + + +| | | | | +| --- | --- | --- | --- | +| Property | Parameter Type | Values (**Default Value**) | Description | +| [ContentJquerySelector](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~ContentJquerySelector.html) | string | “#igDialog1” | This property defines the selector for the {environment:ProductNameMVC} Dialog. This selector should be the same as the selector when the jQuery-only widget is created. For example, if your HTML placeholder has the id “igDialog1”, then the value of [ContentJquerySelector](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~ContentJquerySelector.html) should be “#igDialog”. Then, the {environment:ProductNameMVC} will render following code: $(“#igDialog”).igDialog(); | +| [ContentID](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~ContentID.html) | string | “igDialog1” | This property defines the selector for the {environment:ProductNameMVC} Dialog. In contrast to the [ContentJquerySelector](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~ContentJquerySelector.html) property, you only need to pass the id of the HTML placeholder, without the #, and the {environment:ProductNameMVC} will render it automatically. If your value in the [ContentID](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~ContentID.html) is “igDialog”, then the result will be the same as in the previous property: $(“#igDialog”).igDialog(); | +| [ID](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~ID.html) | string | “igDialog1” | This property defines the selector for the {environment:ProductNameMVC} Dialog. It’s absolutely equivalent to the [ContentID](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogWrapper~ContentID.html) property – it accepts the same format for the parameter and renders the same code. | +| [ContentHTML](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~ContentHTML.html) | string | “<div id="igDialog1”> igDialog Content </div>” | This property allows you to define the HTML placeholder of the {environment:ProductNameMVC} Dialog. This HTML code will then become the content of the igDialog. | +| [Container](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~Container.html) | string | “#idContainer” “.classContainer” | Gets or sets the HTML container element for the igDialog. By default the parent form of the original target element is used and if that parent is unavailable, then the HTML body object is used. Note that if the CSS container property “position” is not set, its value is "static", then the position value is set to "relative". | +| [State](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~State.html) | string | **DialogState.Opened** DialogState.Closed DialogState.Minimized DialogState.Maximized | This property allows you to set and get the state of the dialog. | +| [Pinned](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~Pinned.html) | bool? | true **false** | Gets or sets the pinned state of the dialog. | +| [Position](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~Position.html) | int | Position(100, 200) | Gets or sets the initial position of the igDialog. The left and top positions are passed as arguments. | +| [Modal](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~Modal.html) | bool? | true **false** | Gets or sets the modal state of the igDialog. When the window is minimized or pinned you cannot have this state. | +| [Draggable](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~Draggable.html) | bool? | **true** false | Gets or sets the ability to drag the igDialog control. | +| [Resizable](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~Resizable.html) | bool? | **true** false | Gets or sets the ability to resize the igDialog. | +| [TrackFocus](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~TrackFocus.html) | bool? | **true** false | Gets or sets the ability to process focus and blur events of child elements, located in the igDialog, in order to maintain the focused state. If that option is enabled, then the focus and blur event handlers are added to all the child elements of dialog. If dialog is modal or it can be maximized, then disabling this option is not recommended. | +| [EnableHeaderFocus](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogWrapper~EnableHeaderFocus.html) | bool? | **true** false | Gets or sets the ability to adjust the state of the header to be in focused or not-focused state. This property works only if the [trackFocus](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~TrackFocus.html) property is enabled. | +| [TabIndex](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogWrapper~TabIndex.html) | int? | **0** | Gets or sets the value for the tabIndex attribute applied to the igDialog main HTML element. | +| [ZIndex](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~ZIndex.html) | int? | **1000** | Gets or sets the value of the zIndex applied to the igDialog main HTML element. | +| [EnableDblclick](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~EnableDblclick.html) | bool? | true false | Gets or sets the action that will occur if the igDialog header is double clicked. If the value is “false,” the window will not be affected by mouse double click. Contrastingly, it will react if the value is “true”. The “auto” state means that the igDialog will only be affected by double click if there is maximize icon in the header. “Auto” is the default state, but you cannot change it dynamically through the {environment:ProductNameMVC}. | +| [Height](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~Height.html) | string | 100 “100px” “2em” “100%” | Gets or sets the initial height of the dialog in pixels for the normal state. Note that if “%” is used, then the size of the window browser object is used and it only takes effect when the igDialog is opening. | +| [Width](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~Width.html) | string | **300** “300px” “2em” “100%” | Gets or sets the initial width of the dialog in pixels for the normal state. Note that if “%” is used, then the size of the window browser object is used and it only takes effect when the igDialog is opening. | +| [MinHeight](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~MinHeight.html) | string | **100** “100px” “2em” “100%” | Gets or sets the minimal height of the dialog in the normal state. | +| [MinWidth](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~MinWidth.html) | string | **150** “150px” “2em” “100%” | Gets or sets the minimal width of the dialog in the normal state. | +| [MaxHeight](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~MaxHeight.html) | string | 1500 “1500px” “5em” “100%” | Gets or sets the maximal height of the dialog in the normal state. Note that the value of that option has effect only while resizing igDialog. | +| [MaxWidth](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~MaxWidth.html) | string | 1500 “1500px” “5em” “100%” | Gets or sets the maximal width of the dialog in the normal state. Note: that option only takes effect while resizing dialog by end user. | +| [CloseOnEscape](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~CloseOnEscape.html) | bool? | **true** false | Gets or sets the ability to close the dialog using the Esc key. | +| [ShowCloseButton](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~ShowCloseButton.html) | bool? | **true** false | Gets or sets the visibility of the close button in the igDialog header. | +| [ShowMaximizeButton](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~ShowMaximizeButton.html) | bool? | true **false** | Gets or sets the visibility of the maximize button in the igDialog header. | +| [ShowPinButton](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~ShowPinButton.html) | bool? | true **false** | Gets or sets the visibility of the pin button in the header. | +| [PinOnMinimized](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~PinOnMinimized.html) | bool? | true **false** | Gets or sets the ability to automatically pin the igDialog when the dialog was minimized. | +| [OpenAnimation](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~OpenAnimation.html) | string/int | “slide” “explode” 500 | Gets or sets animation applied to dialog when it is opened. That can be any object supported by jQuery show() method. | +| [CloseAnimation](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~CloseAnimation.html) | string/int | “slide” “explode” 500 | Gets or sets the animation applied to the dialog when it is closed. This can be any object supported by jQuery hide() method. | +| [DialogClass](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~DialogClass.html) | string | “container-class” | Gets or sets the name of the CSS class, which is applied to the main DIV element of the igDialog. | +| [ImageClass](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~ImageClass.html) | string | “img-class” | Gets or sets name of CSS class, which is applied to the SPAN element, located on the left side of the igDialog header. | +| [HeaderText](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~HeaderText.html) | string | “HEADER” | Gets or sets the text which appears in the igDialog header. | +| [ShowHeader](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~ShowHeader.html) | bool? | **true** false | Gets or sets the visibility of the igDialog header. | +| [ShowFooter](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~ShowFooter.html) | bool? | true **false** | Gets or sets the visibility of the igDialog footer. | +| [FooterText](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~FooterText.html) | string | “FOOTER” | Gets or sets the text, which appears in the igDialog footer. | +| [CloseButtonTitle](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~CloseButtonTitle.html) | string | “X” | Gets or sets the tooltip for the close button in the igDialog. | +| [MinimizeButtonTitle](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~MinimizeButtonTitle.html) | string | “MIN” | Gets or sets the tooltip for the minimize button in the igDialog. | +| [MaximizeButtonTitle](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~MaximizeButtonTitle.html) | string | “MAX” | Gets or sets the tooltip for the maximize button in the igDialog. | +| [PinButtonTitle](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~PinButtonTitle.html) | string | “PIN” | Gets or sets the tooltip for the pin button in the igDialog. | +| [UnpinButtonTitle](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~UnpinButtonTitle.html) | string | “UNPIN” | Gets or sets the tooltip for the unpin button in the igDialog. | +| [RestoreButtonTitle](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~RestoreButtonTitle.html) | string | “RESTORE” | Gets or sets the tooltip for the restore button in the igDialog. | + + +## Related Content + +### Topics + +The following topics provide additional information related to this topic: + +- [Method Reference (*igDialog*)](./01_igDialog Method Reference.mdx): The topic that introduces the user to the `igDialog` control’s methods. + +- [Event Reference (*igDialog*)](./02_igDialog Event Reference.mdx): The topic that introduces the user to the `igDialog` control’s events. + +- [CSS Classes Reference (*igDialog*)](./03_igDialog Css Classes Reference.mdx): The topic that introduces the user to the `igDialog` control’s CSS classes. + + +### Samples + +The following samples provide additional information related to this topic: + +- [Basic Usage]({environment:SamplesUrl}/dialog-window/basic-usage): This sample shows you how to configure the `igDialog` height, width and state. + +- [API and Events](./02_igDialog Event Reference.mdx#attaching-handlers-jquery): This sample demonstrates how to handle events in the Dialog Window control and API usage. + +- [ASP.NET MVC Basic Usage]({environment:SamplesUrl}/dialog-window/aspnet-mvc-helper): This example demonstrates how you can utilize the ASP.NET MVC helper for the Dialog Window. + +- [Modal Dialog]({environment:SamplesUrl}/dialog-window/modal-dialog): This sample shows you how to create a modal dialog. + +- [Loading External Page]({environment:SamplesUrl}/dialog-window/loading-external-page): This sample demonstrates how to load external content from a URL. + + + + + + + diff --git a/docs/jquery/src/content/en/topics/controls/igdialog/configuring/animations.mdx b/docs/jquery/src/content/en/topics/controls/igdialog/configuring/animations.mdx new file mode 100644 index 0000000000..0f53b3fdaf --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igdialog/configuring/animations.mdx @@ -0,0 +1,104 @@ +--- +title: "igDialog Animations" +slug: igdialog-animations +--- +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# igDialog Animations + +## Topic Overview + +### Purpose + +This topic demonstrates how to animate the `igDialog`™ when it is either opened or closed. + +### Required background + +The following topics are prerequisites to understanding this topic: + +- [***igDialog* Overview**](../00_igDialog Overview.mdx): The topic introduces the user to the `igDialog` control’s main features. + +- [**Adding *igDialog***](../01_Adding igDialog.mdx): This topic demonstrates how to add the `igDialog` control to a web page. + + +### In this topic + +This topic contains the following sections: + +- [**Control Configuration Summary**](#configuration-summary) +- [**Configuring igDialog Animation**](#configuring) + - [Property settings](#configure-properties) + - [Example with jQuery](#configure-jquery) + - [Example with MVC](#configure-mvc) +- [**Related Content**](#related-content) + - [Topics](#topics) + + +## Control Configuration Summary + +The properties that need to be configured to animate `igDialog` upon closing and opening are: + +- +- + + +## Configuring igDialog Animation + +For a better user interface experience you can create animations when the dialog is opening and closing. The value for any of the animation properties can be any parameter from the jQuery UI [`show()`](http://docs.jquery.com/UI/Effects/show)/[`hide()`](http://docs.jquery.com/UI/Effects/hide) methods. For more information about the parameters, please review jQuery documents. + +### Property settings + +The following table maps the desired animation features to property settings: + +In order to: | Use this property: | And set it to: +--- | --- | --- +Animate *igDialog* on opening | | “slide” +Animate *igDialog* on closing | | “explode” + + +### Example with jQuery + +The code below demonstrates how set the `igDialog` animations in jQuery: + +**In JavaScript:** + +```js +$("#dialog").igDialog({ + openAnimation: “slide” + closeAnimation: "explode" +}); +``` + +### Example with MVC + +The code below demonstrates how set the animations for the {environment:ProductNameMVC} Dialog: + +**In C#:** + +```csharp +<%= Html.Infragistics() + .Dialog() + .ContentID("dialog") + .OpenAnimation("slide") + .CloseAnimation("explode") + .Render() +%> +``` + + +## Related Content + +### Topics + +The following topics provide additional information related to this topic: + +- [***igDialog* Overview**](../00_igDialog Overview.mdx): The topic introduces the user to the `igDialog` control’s main features. + +- [Adding *igDialog*](../01_Adding igDialog.mdx): This topic demonstrates how to add the `igDialog` control to a web page. + + + + + + + diff --git a/docs/jquery/src/content/en/topics/controls/igdialog/configuring/external-page.mdx b/docs/jquery/src/content/en/topics/controls/igdialog/configuring/external-page.mdx new file mode 100644 index 0000000000..0ed051a62e --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igdialog/configuring/external-page.mdx @@ -0,0 +1,94 @@ +--- +title: "igDialog External Page" +slug: igdialog-external-page +--- +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# igDialog External Page + +## Topic Overview + +## Purpose + +This topic demonstrates how to make load external page into the `igDialog`™ control. + +### Required background + +The following topics are prerequisites to understanding this topic: + +- [***igDialog* Overview**](../00_igDialog Overview.mdx): The topic introduces the user to the `igDialog` control’s main features. + +- [**Adding *igDialog***](../01_Adding igDialog.mdx): This topic demonstrates how to add the `igDialog` control to a web page. + + +### In this topic + +This topic contains the following sections: + +- [**Configuring igDialog with External Page**](#configuring) + - [Overview](#overview) + - [Property Settings](#property-settings) + - [Example](#example) +- [**Related Content**](#related-content) + - [Topics](#topics) + - [Samples](#samples) + + +## Configuring igDialog with External Page + +### Overview + +You can use the `igDialog` and load not only a bunch of HTML elements, but an entire page. As you know, you can apply the `igDialog` on a HTML `DIV` element and the content that is inside that `DIV` will become the content of the dialog window. It is similar when the `igDialog` loads an external page – the difference is that the HTML container should be the `IFRAME` element. The content page of the `IFRAME` will be the content of the `igDialog`. + +**In HTML:** + + +```html + +``` + +### Property Settings + +The code from the previous paragraph is enough to load external page into the `igDialog`. The next `igDialog` properties are only recommended, because they will make the window user friendly. + +The following table maps the desired property settings. + +In order to: | Use this property: | And set it to: +--- | --- | --- +Show header text – title of the site | | “Infragistics” +Make the `igDialog` maximize- able | | true +Set a temporary `IFRAME` URL source. | | “Infragistics.com” + + +> **Note:** It is not obligatory to use the property, but using it may prevent exceptions. When the `igDialog` for the external page is created, the target element is removed from its original container and inserted into dynamically created main element. This may trigger an exception if the `IFRAME` element does not have some temporary URL as a source. If an error appears while loading external page, you can use the property, which will set impermanent source of the `IFRAME` element. + +### Example + +The screenshot below demonstrates how the `igDialog` load external page, as a result of the settings above: + +![](images/04_6_igDialog_ExternalPage_1.png) + + +## Related Content + +### Topics + +The following topics provide additional information related to this topic: + +- [***igDialog* Overview**](../00_igDialog Overview.mdx): The topic introduces the user to the `igDialog` control’s main features. + +- [**Adding *igDialog***](../01_Adding igDialog.mdx): This topic demonstrates how to add the `igDialog` control to a web page. + + +### Samples + +The following samples provide additional information related to this topic: + +- [Loading External Page]({environment:SamplesUrl}/dialog-window/loading-external-page): This sample demonstrates how to load external content from a URL. + + + + + + + diff --git a/docs/jquery/src/content/en/topics/controls/igdialog/configuring/header-and-footer.mdx b/docs/jquery/src/content/en/topics/controls/igdialog/configuring/header-and-footer.mdx new file mode 100644 index 0000000000..340b020d46 --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igdialog/configuring/header-and-footer.mdx @@ -0,0 +1,129 @@ +--- +title: "igDialog Header and Footer" +slug: igdialog-header-and-footer +--- +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# igDialog Header and Footer + +## Topic Overview + +### Purpose + +This topic demonstrates how to enable the `igDialog`™ footer and header and how to customize them. + +### Required background + +The following topics are prerequisites to understanding this topic: + +- [***igDialog* Overview**](../00_igDialog Overview.mdx): The topic introduces the user to the `igDialog` control’s main features. + +- [**Adding *igDialog***](../01_Adding igDialog.mdx): This topic demonstrates how to add the `igDialog` control to a web page. + + +### In this topic + +This topic contains the following sections: + +- [**Control Configuration Summary**](#configuration-summary) +- [**Enable and Configure igDialog Header**](#header) + - [Property Settings](#header-property-settings) + - [Example](#header-example) +- [**Enable and Configure igDialog Footer**](#footer) + - [Property Settings](#footer-property-settings) + - [Example](#footer-example) +- [**Related Content**](#related-content) + - [Topics](#topics) + - [Samples](#samples) + + +## Control Configuration Summary + +The following table lists the configurable aspects of the `igDialog` *header and footer* control modules. Additional details are available after the table. + + +| | | | +| --- | --- | --- | +| Configurable aspects | Details | Properties | +| Enable and configure `igDialog` header | The properties that need to be configured to enable `igDialog` and customize its elements. | | +| Enable and configure `igDialog` footer | The properties that need to be configured to enable `igDialog` and customize its elements. | | + + +If you want to see how to enable and disable header buttons please review the [**Minimize and Maximize and Pin**](./01_igDialog Maximize and Minimize.mdx) topic. + + +## Enable and Configure igDialog Header + +The `igDialog` API proposes several API properties for modifying its header. + +### Property Settings + +The following table maps the desired header features to property settings: + +In order to: | Use this property: | And set it to: +--- | --- | --- +Show the igDialog header | | true +Set the igDialog header title | | “HEADER” +Set the igDialog header image | | “clsImage” +Set the igDialog close button title | | “X” +Set the igDialog minimize button title | | “MIN” +Set the igDialog maximize button title | | “MAX” +Set the igDialog pin button title | | “PIN” +Set the igDialog unpin button title | | “UNPIN” +Set the igDialog restore button title | | “RESTORE” + + +### Example + +The screenshot below demonstrates how the `igDialog` looks as a result of the settings above: + +![](images/04_5_igDialog_HeaderAndFooter_1.png) + +> **Note:** The red square at the top is there because of the `clsImage` defined in CSS: +> `.clsImage { background-color: red; width: 5px; height: 5px; }` + + +## Enable and Configure igDialog Footer + +The `igDialog` API proposes two API properties for modifying its footer. + +### Property Settings + +The following table maps the desired header features to property +settings: + +In order to: | Use this property: | And set it to: +--- | --- | --- +Show the `igDialog` footer | | true +Set the `igDialog` footer title | | “FOOTER” + + +### Example + +The screenshot below demonstrates how the `igDialog` looks as a result of the settings above, plus the header setting from the previous paragraph: + +![](images/04_5_igDialog_HeaderAndFooter_2.png) + + +## Related Content + +### Topics + +The following topics provide additional information related to this topic: + +- [***igDialog* Overview**](../00_igDialog Overview.mdx): The topic introduces the user to the `igDialog` control’s main features. + +- [**Adding *igDialog***](../01_Adding igDialog.mdx): This topic demonstrates how to add the `igDialog` control to a web page. + +### Samples + +The following samples provide additional information related to this topic: + +- [Icons]({environment:SamplesUrl}/dialog-window/icons): The sample that shows you how to show `igDialog` icons. + + + + + + + diff --git a/docs/jquery/src/content/en/topics/controls/igdialog/configuring/igdialog.mdx b/docs/jquery/src/content/en/topics/controls/igdialog/configuring/igdialog.mdx new file mode 100644 index 0000000000..e3e93017e1 --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igdialog/configuring/igdialog.mdx @@ -0,0 +1,44 @@ +--- +title: "Configuring igDialog" +slug: configuring-igdialog +--- + +# Configuring igDialog + +## In This Group of Topics + +### Introduction + +This topic references all of the main `igDialog`™ features, their configuration and their usage. + +### Topics + +This section contains topics covering features of `igDialog`: + +- [Showing and Hiding *igDialog*](./00_igDialog Show and Hide.mdx): This topic demonstrates how to configure `igDialog` so that it can be opened and closed and how to perform these actions. + +- [Maximizing and Minimizing *igDialog*](./01_igDialog Maximize and Minimize.mdx): This topic demonstrates how to configure the `igDialog` so that it can be minimized and maximized, and explains how to perform these actions. + +- [Pin *igDialog*](./02_igDialog Pin.mdx): This topic demonstrates how to configure `igDialog` so that it can be pinned and unpinned, and how to perform these actions. + +- [Position *igDialog*](./03_igDialog Position.mdx): This topic demonstrates how to position igDialog. + +- [*igDialog* Header and Footer](./04_igDialog Header and Footer.mdx): This topic demonstrates how to enable the `igDialog` footer and header and how to customize them. + +- [Load External Page in *igDialog*](./05_igDialog External Page.mdx): This topic demonstrates how to load an external page into the `igDialog` control. + +- [Modal igDialog](./06_igDialog Modal State.mdx): This topic demonstrates how to make `igDialog` modal. + +- [Multiple *igDialogs*](./07_igDialog Multiple Dialogs.mdx): This topic demonstrates how to build `igDialog` windows one inside another. + +- [*igDialog* Animations](./08_igDialog Animations.mdx): This topic demonstrates how to animate `igDialog` when it is either opened or closed. + + + + + + + + + + diff --git a/docs/jquery/src/content/en/topics/controls/igdialog/configuring/images/04_1_igDialog_ShowAndHide_1.png b/docs/jquery/src/content/en/topics/controls/igdialog/configuring/images/04_1_igDialog_ShowAndHide_1.png new file mode 100644 index 0000000000..8707ff162b Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdialog/configuring/images/04_1_igDialog_ShowAndHide_1.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igdialog/configuring/images/04_1_igDialog_ShowAndHide_2.png b/docs/jquery/src/content/en/topics/controls/igdialog/configuring/images/04_1_igDialog_ShowAndHide_2.png new file mode 100644 index 0000000000..1f3c1ef8c2 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdialog/configuring/images/04_1_igDialog_ShowAndHide_2.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igdialog/configuring/images/04_2_igDialog_MamimizeAndMinimize_1.png b/docs/jquery/src/content/en/topics/controls/igdialog/configuring/images/04_2_igDialog_MamimizeAndMinimize_1.png new file mode 100644 index 0000000000..9cd9d6e521 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdialog/configuring/images/04_2_igDialog_MamimizeAndMinimize_1.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igdialog/configuring/images/04_2_igDialog_MamimizeAndMinimize_2.png b/docs/jquery/src/content/en/topics/controls/igdialog/configuring/images/04_2_igDialog_MamimizeAndMinimize_2.png new file mode 100644 index 0000000000..493e3ec65a Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdialog/configuring/images/04_2_igDialog_MamimizeAndMinimize_2.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igdialog/configuring/images/04_2_igDialog_MamimizeAndMinimize_3.png b/docs/jquery/src/content/en/topics/controls/igdialog/configuring/images/04_2_igDialog_MamimizeAndMinimize_3.png new file mode 100644 index 0000000000..0e8b5d7ac4 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdialog/configuring/images/04_2_igDialog_MamimizeAndMinimize_3.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igdialog/configuring/images/04_2_igDialog_MamimizeAndMinimize_4.png b/docs/jquery/src/content/en/topics/controls/igdialog/configuring/images/04_2_igDialog_MamimizeAndMinimize_4.png new file mode 100644 index 0000000000..f3d81b2493 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdialog/configuring/images/04_2_igDialog_MamimizeAndMinimize_4.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igdialog/configuring/images/04_2_igDialog_MamimizeAndMinimize_5.png b/docs/jquery/src/content/en/topics/controls/igdialog/configuring/images/04_2_igDialog_MamimizeAndMinimize_5.png new file mode 100644 index 0000000000..84b049bf44 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdialog/configuring/images/04_2_igDialog_MamimizeAndMinimize_5.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igdialog/configuring/images/04_2_igDialog_MamimizeAndMinimize_6.png b/docs/jquery/src/content/en/topics/controls/igdialog/configuring/images/04_2_igDialog_MamimizeAndMinimize_6.png new file mode 100644 index 0000000000..9e2c956b20 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdialog/configuring/images/04_2_igDialog_MamimizeAndMinimize_6.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igdialog/configuring/images/04_3_igDialog_Pin_1.png b/docs/jquery/src/content/en/topics/controls/igdialog/configuring/images/04_3_igDialog_Pin_1.png new file mode 100644 index 0000000000..763702e72a Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdialog/configuring/images/04_3_igDialog_Pin_1.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igdialog/configuring/images/04_3_igDialog_Pin_2.png b/docs/jquery/src/content/en/topics/controls/igdialog/configuring/images/04_3_igDialog_Pin_2.png new file mode 100644 index 0000000000..3c678bc668 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdialog/configuring/images/04_3_igDialog_Pin_2.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igdialog/configuring/images/04_3_igDialog_Pin_3.png b/docs/jquery/src/content/en/topics/controls/igdialog/configuring/images/04_3_igDialog_Pin_3.png new file mode 100644 index 0000000000..0aef49e6af Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdialog/configuring/images/04_3_igDialog_Pin_3.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igdialog/configuring/images/04_3_igDialog_Pin_4.png b/docs/jquery/src/content/en/topics/controls/igdialog/configuring/images/04_3_igDialog_Pin_4.png new file mode 100644 index 0000000000..e5c0f09007 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdialog/configuring/images/04_3_igDialog_Pin_4.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igdialog/configuring/images/04_5_igDialog_HeaderAndFooter_1.png b/docs/jquery/src/content/en/topics/controls/igdialog/configuring/images/04_5_igDialog_HeaderAndFooter_1.png new file mode 100644 index 0000000000..cc6d510c75 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdialog/configuring/images/04_5_igDialog_HeaderAndFooter_1.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igdialog/configuring/images/04_5_igDialog_HeaderAndFooter_2.png b/docs/jquery/src/content/en/topics/controls/igdialog/configuring/images/04_5_igDialog_HeaderAndFooter_2.png new file mode 100644 index 0000000000..0927d88f3c Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdialog/configuring/images/04_5_igDialog_HeaderAndFooter_2.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igdialog/configuring/images/04_6_igDialog_ExternalPage_1.png b/docs/jquery/src/content/en/topics/controls/igdialog/configuring/images/04_6_igDialog_ExternalPage_1.png new file mode 100644 index 0000000000..13e227a2aa Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdialog/configuring/images/04_6_igDialog_ExternalPage_1.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igdialog/configuring/images/04_7_igDialog_ModalState_1.png b/docs/jquery/src/content/en/topics/controls/igdialog/configuring/images/04_7_igDialog_ModalState_1.png new file mode 100644 index 0000000000..7369e7f690 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdialog/configuring/images/04_7_igDialog_ModalState_1.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igdialog/configuring/images/04_8_igDialog_MultipleDialogs_1.png b/docs/jquery/src/content/en/topics/controls/igdialog/configuring/images/04_8_igDialog_MultipleDialogs_1.png new file mode 100644 index 0000000000..4053e628c7 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdialog/configuring/images/04_8_igDialog_MultipleDialogs_1.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igdialog/configuring/maximize-and-minimize.mdx b/docs/jquery/src/content/en/topics/controls/igdialog/configuring/maximize-and-minimize.mdx new file mode 100644 index 0000000000..e87c41bcf1 --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igdialog/configuring/maximize-and-minimize.mdx @@ -0,0 +1,212 @@ +--- +title: "igDialog Maximize and Minimize" +slug: igdialog-maximize-and-minimize +--- +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# igDialog Maximize and Minimize + +## Topic Overview + +### Purpose + +This topic demonstrates how to configure the `igDialog` so that it can be minimized and maximized, and explains how to perform these actions. + +### Required background + +The following topics are prerequisites to understanding this topic: + +- [***igDialog* Overview**](../00_igDialog Overview.mdx): This topic introduces the user to the `igDialog` control’s main features. + +- [**Adding *igDialog***](../01_Adding igDialog.mdx): This topic demonstrates how to add the `igDialog` control to a web page. + + +### In this topic + +This topic contains the following sections: + +- [**Control states**](#control-states) + - [States](#states) + - [Preview in Normal State](#normal-state) + - [Preview in Maximized State](#maximized-state) + - [Preview in Minimized State](#minimized-state) +- [**Control Configuration Summary**](#configuration-summary) +- [**Configuring Minimize and Maximize Icons**](#minimize-maximize) + - [Property Settings](#minimize-maximize-properties) + - [Example](#minimize-maximize-example) +- [**Maximize and Minimize on Double Mouse Click**](#double-click) + -[Property settings](#property-settings) +- [**Minimize igDialog**](#minimize) + - [Code](#minimize-code) + - [Example](#minimize-example) +- [**Maximize igDialog**](#maximize) + - [Code](#maximize-code) + - [Example](#maximize-example) +- [**Related Content**](#related-content) + - [Topics](#topics) + - [Samples](#samples) + + +## Control states + +### States + +As you already know, the `igDialog` has four states – opened, closed, minimized and maximized. In the context of this topic, when we talk about maximizing and minimizing, let us call the opened state normal. This will be the state when the window is neither minimized nor maximized. + +The following table summarizes all of the possible states of the control. Additional details are available in the sections below. + +State | Description +--- | --- +Normal | This is the state when the window is neither minimized nor maximized. +Minimized | In this state the `igDialog` is minimized. +Maximized | In this state the `igDialog` is maximized. + +### Preview in Normal State + +The picture below demonstrates the `igDialog` in its normal state. You can resize and move the window while in this state. + +![](images/04_2_igDialog_MamimizeAndMinimize_1.png) + +The buttons in the picture above are: + +1. Minimize button +2. Maximize button + +### Preview in Maximized State + +The picture below demonstrates the part of the `igDialog` in the maximized state. In maximized state the `igDialog` takes the full area of its parent. You cannot resize and move the window while in this state. + +![](images/04_2_igDialog_MamimizeAndMinimize_2.png) + +The buttons at the picture above are: + +1. Minimize button +2. Restore button + +### Preview in Minimized State + +The picture below demonstrates the `igDialog` in the minimized state. You cannot resize window while in this state. + +![](images/04_2_igDialog_MamimizeAndMinimize_3.png) + +The buttons at the picture above are: + +1. Restore button +2. Maximize button + + +## Control Configuration Summary + +The following table lists the configurable aspects of the `igDialog` control. Additional details are available after the table. + + +| | | | +| --- | --- | --- | +| Configurable aspects | Details | Properties and Methods | +| Configuring minimize and maximize icons | The properties that need to be configured to allow minimizing and maximizing of the *igDialog* using control UI. | | +| Maximize and minimize on double mouse click | The property that allows you to configure the *igDialog* so that it will maximize or minimize when its header is double clicked. | | +| Maximize *igDialog* | Method from *igDialog* API that allows maximization. | | +| Minimize *igDialog* | Method from *igDialog* API that allows minimization. | | + + +## Configuring Minimize and Maximize Icons + +The table below demonstrates which properties need to be configured in order to be able to minimize and maximize the `igDialog` control. By setting these properties, maximize and minimize buttons will appear in the `igDialog` header. + +### Property Settings + +The following table maps the desired functionality to property settings: + +In order to: | Use this property: | And set it to: +--- | --- | --- +Show maximize button | | true +Show minimize button | | true + + +### Example + +The screenshot below demonstrates how the `igDialog` looks as a result of the settings above: + +![](images/04_2_igDialog_MamimizeAndMinimize_4.png) + + +## Maximize and Minimize on Double Mouse Click + +If `igDialog` is configured, it can react when it is double clicked in the header. It will minimize or maximize depending on its current state. + +### Property Settings + +The following table describes the behavior of the `igDialog` depending on the value of the property: + +Value | Use this property: +--- | --- +true | If the window was minimized, it will change its state to normal.
    If the window was normal, it will change its state to maximized.
    If the window was in the maximized state, then it will be restored to normal. +false | The `igDialog` will no react on mouse double-click. +“auto” | If the property is set to true, which means igDialog window has a maximize button, the control will react the same way it would if the value of was set to true.
    If the property is set to false, which means the `igDialog` window does not have a maximize button, the control will not be affected by a mouse double click. + + +## Minimize igDialog + +As a result of the configuration from the previous paragraph, you will be able to minimize the dialog window using the button at the top right corner of the header. If you have the option disabled, then you can minimize the control using its API. + +### Code + +The following code demonstrates how to close the `igDialog` using its API: + +**In JavaScript:** + +```js +$('#igDialog).igDialog("minimize"); +``` + +### Example + +The screenshot below shows you the position of the minimize button: + +![](images/04_2_igDialog_MamimizeAndMinimize_5.png) + + +## Maximize igDialog + +As a result of the configuration from the previous paragraph, you will be able to maximize the dialog window using the button at the top right corner of the header or by double clicking on the dialog header. If you have the option disabled, then you can maximize the control using its API. + +### Code + +The following code demonstrates how to show the `igDialog` using its API: + +**In JavaScript:** + +```js +$('#igDialog).igDialog("maximize"); +``` + +### Example + +The screenshot below shows you the position of the maximize button: + +![](images/04_2_igDialog_MamimizeAndMinimize_6.png) + + +## Related Content + +### Topics + +The following topics provide additional information related to this topic: + +- [***igDialog* Overview**](../00_igDialog Overview.mdx): The topic introduces the user to the `igDialog` control’s main features. + +- [Adding *igDialog*](../01_Adding igDialog.mdx): This topic demonstrates how to add the `igDialog` control to a web page. + + +### Samples + +The following samples provide additional information related to this topic: + +- [Icons]({environment:SamplesUrl}/dialog-window/icons): The sample that shows you how to show `igDialog` icons. + + + + + + + diff --git a/docs/jquery/src/content/en/topics/controls/igdialog/configuring/modal-state.mdx b/docs/jquery/src/content/en/topics/controls/igdialog/configuring/modal-state.mdx new file mode 100644 index 0000000000..40e4a0a7c7 --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igdialog/configuring/modal-state.mdx @@ -0,0 +1,100 @@ +--- +title: "igDialog Modal State" +slug: igdialog-modal-state +--- +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# igDialog Modal State + +## Topic Overview + +### Purpose + +This topic demonstrates how to make `igDialog`™ *modal*. + +### Required background + +The following topics are prerequisites to understanding this topic: + +- [***igDialog* Overview**](../00_igDialog Overview.mdx): The topic introduces the user to the `igDialog` control’s main features. + +- [**Adding *igDialog***](../01_Adding igDialog.mdx): This topic demonstrates how to add the `igDialog` control to a web page. + + +### In this topic + +This topic contains the following sections: + +- [**Introduction**](#introduction) +- [**Control Configuration Summary**](#configuration-summary) +- [**Configuring Modal igDialog**](#configuring) + - [Property Settings](#configuring-properties) + - [Example](#configuring-example) +- [**Related Content**](#related-content) + - [Topics](#topics) + - [Samples](#samples) + + +## Introduction to the Modal igDialog + +The `igDialog` can be modal, which means that all of the content behind it will be disabled and hidden. You can show more than one modal dialog. If you have more than one modal dialog instance, then the dialog that is opened last will be at the top of the page. For handling more than one modal dialog per page, you can check out the [Multiple Dialogs](./07_igDialog Multiple Dialogs.mdx) topic. The following example will only show you how to configure one modal dialog. + +> **Note:** Modal state of the `igDialog` window is not supported when dialog is minimized or pinned. + + +## Control Configuration Summary + +The following table lists the configurable aspects of the `igDialog` control. Additional details are available after the table. + +Configurable aspects | Details | Properties +--- | --- | --- +Configuring modal `igDialog` | The properties that need to be configured to make an `igDialog` modal. | + + +## Configuring Modal igDialog + +The `igDialog` can be modal, which means all of the content behind it is to be disabled and hidden. + +> **Note:** Modal state of `igDialog` window is not supported when dialog is minimized or pinned. + +### Property Settings + +The following table maps the desired header features to property settings. The state of the dialog should be different from minimized and pinned. + +In order to: | Use this property: | And set it to: +--- | --- | --- +Make the igDialog modal | | true +Set the igDialog footer title | | false +Set the igDialog state | | “opened” + + +### Example + +The screenshot below demonstrates how the `igDialog` looks as a result of the settings above: + +![](images/04_7_igDialog_ModalState_1.png) + + +## Related Content + +### Topics + +The following topics provide additional information related to this topic: + +- [***igDialog* Overview**](../00_igDialog Overview.mdx): The topic introduces the user to the `igDialog` control’s main features. + +- [Adding *igDialog*](../01_Adding igDialog.mdx): This topic demonstrates how to add the `igDialog` control to a web page. + + +### Samples + +The following samples provide additional information related to this topic: + +- [Modal Dialog]({environment:SamplesUrl}/dialog-window/modal-dialog) : This sample shows you how to create a modal `igDialog`. + + + + + + + diff --git a/docs/jquery/src/content/en/topics/controls/igdialog/configuring/multiple-dialogs.mdx b/docs/jquery/src/content/en/topics/controls/igdialog/configuring/multiple-dialogs.mdx new file mode 100644 index 0000000000..dec5c9132a --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igdialog/configuring/multiple-dialogs.mdx @@ -0,0 +1,118 @@ +--- +title: "igDialog Multiple Dialogs" +slug: igdialog-multiple-dialogs +--- +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# igDialog Multiple Dialogs + +## Topic Overview + +### Purpose + +This topic demonstrates how to build `igDialog`™ windows one into another. + +### Required background + +The following topics are prerequisites to understanding this topic: + +- [***igDialog* Overview**](../00_igDialog Overview.mdx): The topic introduces the user to the `igDialog` control’s main features. + +- [**Adding *igDialog***](../01_Adding igDialog.mdx): This topic demonstrates how to add the `igDialog` control to a web page. + + +### In this topic + +This topic contains the following sections: + +- [**Configuring Multiple igDialogs**](#configuring) + - [Overview](#configuring-overview) + - [Code](#configuring-code) + - [Example](#configuring-example) +- [**Multiple igDialogs API**](#api) + - [Method Settings](#api-methods) + - [Code](#api-code) +- [**Related Content**](#related-content) + - [Topics](#topics) + - [Samples](#samples) + + +## Configuring Multiple igDialogs + +### Overview + +You can show multiple `igDialog` widgets on a single page and they will appear properly, without the requirement of defining a relationship between them. All you need is to create a script that will close and open those dialogs. You can use a combination of normal `igDialog` and modal dialogs. + +What the control does automatically is it detects the first HTML placeholder and initializes the first dialog widget at the bottom. Respectively, the last `igDialog` HTML placeholder will be for the top widget. The `igDialog` exposes API methods that grant access to the top dialogs and the ability to move dialogs to the top level if they are not there already. + +> **Note:** You cannot achieve this functionality using {environment:ProductNameMVC} Dialog. + +### Code + +The following code demonstrates how to define your markup so that the second dialog will be shown on the top of the first: + +**In HTML:** + +```html +
    + Child HTML markup +
    +``` + +### Example + +If you use the code above and define some additional HTML content, you can achieve the effect shown in the screenshot below. For more detailed information about the source of the image, please refer to the related sample at the bottom of the topic. + +![](images/04_8_igDialog_MultipleDialogs_1.png) + + +## Multiple igDialogs API + +The `igDialog` exposes API methods that grant access to the top modal and not modal dialogs and enables the ability to move them to the top level if they are not there already. + +### Method Settings + +The following table maps the desired functionality to the method that proposes it: + +In order to: | Use this method: | Parameters | Return type +--- | --- | --- | --- +Get reference to the top modal dialog | | None | object – reference to the `igDialog` +Check if dialog is modal and it is currently active | | None | boolean +Moves not a modal dialog to the top | | *e* – browser event | object – reference to the moved `igDialog` + + +### Code + +The code below demonstrates how to call one the above `igDialog` methods: + +``` +$(“#dialog”).igDialog(“moveToTop”, e); +``` + + +## Related Content + +### Topics + +The following topics provide additional information related to this topic: + +- [***igDialog* Overview**](../00_igDialog Overview.mdx): The topic introduces the user to the `igDialog` control’s main features. + +- [Adding *igDialog*](../01_Adding igDialog.mdx): This topic demonstrates how to add the `igDialog` control to a web page. + + +### Samples + +The following samples provide additional information related to this topic: + +- [API and Events](../03_API Reference/02_igDialog Event Reference.mdx#attaching-handlers-jquery) : This sample demonstrates how to handle events in the Dialog Window control and API usage. + + + + + + + diff --git a/docs/jquery/src/content/en/topics/controls/igdialog/configuring/pin.mdx b/docs/jquery/src/content/en/topics/controls/igdialog/configuring/pin.mdx new file mode 100644 index 0000000000..f00203077b --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igdialog/configuring/pin.mdx @@ -0,0 +1,173 @@ +--- +title: "igDialog Pin" +slug: igdialog-pin +--- +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# igDialog Pin + +## Topic Overview + +### Purpose + +This topic demonstrates how to configure the `igDialog`™ so that it can be pinned and unpinned and how to perform these actions. + +### Required background + +The following topics are prerequisites to understanding this topic: + +- [***igDialog* Overview**](../00_igDialog Overview.mdx): The topic introduces the user to the `igDialog` control’s main features. + +- [**Adding *igDialog***](../01_Adding igDialog.mdx): This topic demonstrates how to add the `igDialog` control to a web page. + + +### In this topic + +This topic contains the following sections: + +- [**Introduction**](#introduction) +- [**Control Configuration Summary**](#configuration-summary) +- [**Configuring Pin/Unpin**](#pin-unpin) + - [Property Settings](#pin-unpin-properties) + - [Example](#pin-unpin-example) +- [**Pin on Minimized**](#pin-on-minimized) + - [Property Settings](#pin-on-minimized-properties) + - [Example](#pin-on-minimized-example) +- [**Pin igDialog**](#pin) + - [Code](#pin-code) + - [Example](#pin-example) +- [**Unpin igDialog**](#unpin) + - [Code](#unpin-code) + - [Example](#unpin-example) +- [**Related Content**](#related-content) + - [Topics](#topics) + - [Samples](#samples) + + +## Introduction + +When the `igDialog` is pinned, then the whole control with its HTML content is moved to the original container and the dialog’s absolute position is removed. Pinned `igDialog` does not support modal and maximized states and it is not movable. + +> **Note:** If the parent element of the original `igDialog` container is invisible, then when dialog is pinned it also becomes invisible. + + +## Control Configuration Summary + +The following table lists the configurable aspects of the `igDialog` control. Additional details are available after the table. + +| | | | +| --- | --- | --- | +| Configurable aspects | Details | Properties and Methods | +| Configuring pin/unpin | The properties that need to be configured to allow pin and unpin of the *igDialog* using control UI. | | +| Pin on minimized | The property that allows you to configure the *igDialog* so that when the state is changed to minimized, it becomes pinned to its parent. | | +| Pin *igDialog* | Method from *igDialog* API that allows pinning. | | +| Unpin *igDialog* | Method from *igDialog* API that allows unpinning. | | + + +## Configuring Pin/Unpin + +The table below demonstrates which properties need to be configured in order to pin the `igDialog` control. Setting property will enable the pin icon in the header, while setting the property will configure the initial state of the control. + +### Property Settings + +The following table maps the desired functionality to property settings: + +In order to: | Use this property: | And set it to: +--- | --- | --- +Show pin button | | true +Pin the igDialog | | true + + +### Example + +The screenshot below demonstrates how the `igDialog` looks as a result of the settings above. The window will be pinned at the top left corner of its parent: + +![](images/04_3_igDialog_Pin_1.png) + + +## Pin on Minimized + +The `igDialog` is configured so that it will pin every time it is minimized. For the needs of this example, the `igDialog` is minimized when configured. + +### Property Settings + +The following table maps the desired functionality to the property settings: + +In order to: | Use this property: | And set it to: +--- | --- | --- +Pin on minimize | | true +Minimize igDialog | | “minimized” + + +### Example + +The screenshot below demonstrate how the `igDialog` looks as a result of the settings above. The window will be minimized and pinned at the top left corner of its parent: + +![](images/04_3_igDialog_Pin_2.png) + + +## Pin igDialog + +As a result of the configuration from the previous paragraph, you will be able to pin the dialog window when the window is unpinned and by pressing the button at the top right corner of the header. If you have the option disabled, then you can pin the control using its API. + +### Code + +The following code demonstrates how to pin the `igDialog` using its API: + +**In JavaScript:** + +```js +$('#igDialog).igDialog("pin"); +``` + +### Example + +The screenshot below shows you the position of the pin button: + +![](images/04_3_igDialog_Pin_3.png) + + +## Unpin igDialog + +As a result of the configuration from the previous paragraph, you will be able to unpin the dialog window, when the window is pinned and by pressing the button at the top right corner of the header. If you have the option disabled, then you can unpin the control using its API. + +### Code + +The following code demonstrates how to unpin the `igDialog` using its API: + +**In JavaScript:** + +```js +$('#igDialog).igDialog("unpin"); +``` + +### Example + +The screenshot below shows you the position of the unpin button: + +![](images/04_3_igDialog_Pin_4.png) + + +## Related Content + +### Topics + +The following topics provide additional information related to this topic: + +- [***igDialog* Overview**](../00_igDialog Overview.mdx): The topic introduces the user to the `igDialog` control’s main features. + +- [Adding *igDialog*](../01_Adding igDialog.mdx): This topic demonstrates how to add the `igDialog` control to a web page. + + +### Samples + +The following samples provide additional information related to this topic: + +- [Icons]({environment:SamplesUrl}/dialog-window/icons): The sample that shows you how to show `igDialog` icons. + + + + + + + diff --git a/docs/jquery/src/content/en/topics/controls/igdialog/configuring/position.mdx b/docs/jquery/src/content/en/topics/controls/igdialog/configuring/position.mdx new file mode 100644 index 0000000000..3a6a83faf5 --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igdialog/configuring/position.mdx @@ -0,0 +1,155 @@ +--- +title: "igDialog Position" +slug: igdialog-position +--- +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# igDialog Position + +## Topic Overview + +### Purpose + +This topic demonstrates how to position `igDialog`™. + +### Required background + +The following topics are prerequisites to understanding this topic: + +- [***igDialog* Overview**](../00_igDialog Overview.mdx): The topic introduces the user to the `igDialog` control’s main features. + +- [**Adding *igDialog***](../01_Adding igDialog.mdx): This topic demonstrates how to add the `igDialog` control to a web page. + + +### In this topic + +This topic contains the following sections: + +- [**Control Configuration Summary**](#configuration-summary) +- [**Configuring igDialog Position**](#position) + - [Property Formats](#position-formats) + - [Example with Object](#position-object) + - [Example with jQuery UI Object](#position-jquery-object) +- [**Configure igDialog Stack Order**](#stack-order) +- [**Related Content**](#related-content) + - [Topics](#topics) + - [Samples](#samples) + + +## Control Configuration Summary + +The following table lists the configurable aspects of the `igDialog` control. Additional details are available after the table. + +Configurable aspects | Details | Properties +--- | --- | ---- +Configuring `igDialog` Position | The properties that need to be configured to position the `igDialog`. | +Configure `igDialog` stack order | The property that specifies the stack order of the dialog. | + + +## Configuring igDialog Position + +The `igDialog` can be positioned according to its parent. The control API has a property called that can be configured and modified dynamically. The following table will show you how to use this property and what values it accepts. + +### Property Formats + +The table below demonstrates what type of format property accepts: + + +| | | | +| --- | --- | --- | +| Format | Example | Type | +| { left: leftPos, top: topPos } | { left: 100, top: 200 } | JavaScript object | +| {, my: “position”,, at: “position”,, of: “parent”,, offset: “left top”,, collision: “alternative position”, using: function(){}, } | { my: “left top”, at: “left top”, of: window, offset: “100 200”} | object (supported by jQuery UI [position()](http://jqueryui.com/demos/position/) method) | + + +### Example with Object + +The code below demonstrates how the `igDialog` can be positioned using object: + +**In JavaScript:** + +```js +$("#dialog").igDialog({ + position: { left: 100, top: 200 } +}); +``` + +**In C#:** + +```csharp +<%= Html.Infragistics() + .Dialog() + .Position(100,200) + .Render() +%> +``` + +### Example with jQuery UI Position Object + +The code below demonstrates how the `igDialog` can be positioned using specially defined objects supported by jQuery UI [`.position()`](http://api.jqueryui.com/position/): + +**In JavaScript:** + +```js +var dialogPosition = { + my: “left top”, + at: “left top”, + of: window, + offset: “100 200” +} +$("#dialog").igDialog({ + position: dialogPosition +}); +``` + + +## Configure igDialog Stack Order + +By default, the `igDialog` window appears at the top of the page stack. Its default value is 1000, which means if you don’t modify any other DOM elements with value higher than 1000, the dialog will appear at the top of the page. If you want to change this default value because you want to show the element over or underneath another element, you can do this by changing the value. + +### Example + +The code below demonstrates how to change the : + +**In JavaScript:** + +```js +$("#dialog").igDialog({ + zIndex: 1001 +}); +``` + +**In C#:** + +```csharp +<%= Html.Infragistics() + .Dialog() + .ZIndex(1001) + .Render() +%> +``` + + +## Related Content + +### Topics + +The following topics provide additional information related to this topic: + +- [***igDialog* Overview**](../00_igDialog Overview.mdx): The topic introduces the user to the `igDialog` control’s main features. + +- [**Adding *igDialog***](../01_Adding igDialog.mdx): This topic demonstrates how to add the `igDialog` control to a web page. + + +### Samples + +The following samples provide additional information related to this topic: + +- [API and Events](../03_API Reference/02_igDialog Event Reference.mdx#attaching-handlers-jquery): This sample demonstrates how to handle events in the Dialog Window control and API usage. + + + + + + + diff --git a/docs/jquery/src/content/en/topics/controls/igdialog/configuring/show-and-hide.mdx b/docs/jquery/src/content/en/topics/controls/igdialog/configuring/show-and-hide.mdx new file mode 100644 index 0000000000..ec9a109f82 --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igdialog/configuring/show-and-hide.mdx @@ -0,0 +1,136 @@ +--- +title: "igDialog Show and Hide" +slug: igdialog-show-and-hide +--- +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# igDialog Show and Hide + +## Topic Overview + +### Purpose + +This topic demonstrates how to configure the `igDialog`™ so that it can be opened and closed and how to perform these actions. + +### Required background + +The following topics are prerequisites to understanding this topic: + +- [**igDialog Overview**](../00_igDialog Overview.mdx): The topic introduces the user to the `igDialog` control’s main features. + +- [**Adding *igDialog***](../01_Adding igDialog.mdx): This topic demonstrates how to add the `igDialog` control to a web page. + + +### In this topic + +- [**Control Configuration Summary**](#configuration-summary) +- [**Configure igDialog to Allow Closing**](#allow-closing) + - [Property and Method Settings](#closing-properties-methods) + - [Example](#closing-example) +- [**Hide igDialog**](#hide) + - [Code](#hide-code) + - [Example](#hide-example) +- [**Show igDialog**](#show) + - [Code](#show-code) +- [**Related Content**](#related-content) + - [Topics](#topics) + - [Samples](#samples) + + +## Control Configuration Summary + + +The following table lists the configurable aspects of the `igDialog` control. Additional details are available after the table. + +| | | | +| --- | --- | --- | +| Configurable aspects | Details | Properties and Methods | +| Configure *igDialog* to allow closing | The properties that needs to be configured to allow the closing of the *igDialog using the control UI.* | | +| Hide *igDialog* | Method from *igDialog API that allows it to be closed.* | | +| Show *igDialog* | Method from *igDialog API that allows it to be opened.* | | + +</table> + + +## Configure igDialog to Allow Closing + +The table below demonstrates which properties need to be configured in order to be able close the `igDialog` control using the control UI. Note that both of them are set with the desired values by default. + +### Property and Method Settings + +The following table maps the desired hiding feature to property settings: + +In order to: | Use this property: | And set it to: +--- | --- | --- +Show the close button | | true +Close the *igDialog* using the keyboard | | true + + +#### Example + +The screenshot below demonstrates how the `igDialog` looks as a result of the settings above: + +![](images/04_1_igDialog_ShowAndHide_1.png) + + +## Hide igDialog + +As a result of the configuration from the previous paragraph, you will be able to close the dialog window using the button at the top right corner of the header. Using the Esc key is the other option that can be configured for the control, using the directions in the table below. + +If you have both and disabled, then you can hide the control using its API. + +#### Code + +The following code demonstrates how to close the `igDialog` using its API: + +**In JavaScript:** + +```js +$('#igDialog).igDialog("close"); +``` + +#### Example + +The screenshot below shows you the position of the close button: + +![](images/04_1_igDialog_ShowAndHide_2.png) + + +## Show igDialog + +The only possible way to show the `igDialog` is using its API. + +#### Code + +The following code demonstrates how to show the `igDialog` using its API: + +**In JavaScript:** + +```js +$('#igDialog).igDialog("open"); +``` + + +## Related Content + +### Topics + +The following topics provide additional information related to this topic: + +- [igDialog Overview](../00_igDialog Overview.mdx): The topic introduces the user to the `igDialog` control’s main features. + +- [Adding *igDialog*](../01_Adding igDialog.mdx): This topic demonstrates how to add the `igDialog` control to a web page. + + +### Samples + +The following samples provide additional information related to this topic: + +- [Basic Usage]({environment:SamplesUrl}/dialog-window/basic-usage): This sample shows you how to configure the `igDialog` height, width and state. + + + + + + + diff --git a/docs/jquery/src/content/en/topics/controls/igdialog/igdialog.mdx b/docs/jquery/src/content/en/topics/controls/igdialog/igdialog.mdx new file mode 100644 index 0000000000..cad0858f30 --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igdialog/igdialog.mdx @@ -0,0 +1,40 @@ +--- +title: "igDialog" +slug: igdialog +--- + +# igDialog + +## In This Group of Topics + +#### Introduction + +Click on the links below to find information on how to get `igDialog`™ quickly up and running and discover how to utilize it to your advantage. + +#### Topics + +This section contains topics covering the implementation of `igDialog`. + +- [*igDialog* Overview](./00_igDialog Overview.mdx): The topic introduces the user to the `igDialog` control’s main features. + +- [Adding *igDialog*](./01_Adding igDialog.mdx): This topic demonstrates how to add the `igDialog` control to a web page. + +- [Configuring *igDialog*](./02_Configuring/~Configuring igDialog.mdx): This topic references the main `igDialog` features, as well as their configuration and usage. + +- [API Reference (*igDialog*)](./03_API Reference/~igDialog API Reference.mdx): This topic introduces `igDialog` API categories. You can find all the references to the control properties, methods, events and CSS classes, as well as some specific cases when the API is used. + +- [Styling and Theming *igDialog*](./04_igDialog Styling and Theming.mdx): This topic demonstrates different approaches of styling the `igDialog`. + +- [Known Issues and Limitations (*igDialog*)](./05_igDialog Known Issues.mdx): This topic demonstrates the known issues for the `igDialog` control. + +- [Accessibility Compliance (*igDialog*)](./06_igDialog Accessibility Compliance.mdx): This topic explains the accessibility features included with `igDialog` and provides advice on how to achieve accessibility compliance for pages containing dialog windows. + + + + + + + + + + diff --git a/docs/jquery/src/content/en/topics/controls/igdialog/images/02_igDialog_Overview_1.png b/docs/jquery/src/content/en/topics/controls/igdialog/images/02_igDialog_Overview_1.png new file mode 100644 index 0000000000..cb310f47bb Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdialog/images/02_igDialog_Overview_1.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igdialog/images/03_Adding_igDialog_1.png b/docs/jquery/src/content/en/topics/controls/igdialog/images/03_Adding_igDialog_1.png new file mode 100644 index 0000000000..b662d7c7f9 Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdialog/images/03_Adding_igDialog_1.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igdialog/images/06_igDialog_Styling_And_Theming_1.png b/docs/jquery/src/content/en/topics/controls/igdialog/images/06_igDialog_Styling_And_Theming_1.png new file mode 100644 index 0000000000..10bf9a405d Binary files /dev/null and b/docs/jquery/src/content/en/topics/controls/igdialog/images/06_igDialog_Styling_And_Theming_1.png differ diff --git a/docs/jquery/src/content/en/topics/controls/igdialog/known-issues.mdx b/docs/jquery/src/content/en/topics/controls/igdialog/known-issues.mdx new file mode 100644 index 0000000000..f73803884a --- /dev/null +++ b/docs/jquery/src/content/en/topics/controls/igdialog/known-issues.mdx @@ -0,0 +1,46 @@ +--- +title: "Known Issues and Limitations (igDialog)" +slug: igdialog-known-issues +--- +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# Known Issues and Limitations (igDialog) + + +## Known Issues and Limitations Summary + +### Known issues and limitations summary chart + +The following table summarizes the known issues and limitations for the `igDialog`™ control. Detailed explanations of known issues and the possible workarounds are provided for some of the issues follow the summary table. + +Legend: | +--------|-------- +![](../../images/images/positive.png) | Workaround available +![](../../images/images/negative.png) | No known workaround +![](../../images/images/plannedFix.png) | No known workaround, fix planned + +### [igDialog](#ig-dialog) + +Issue | Description | Status +------|---------|-------- +[Controls sized incorrectly when inside an *igDialog* and their width/height is relative](#relative-width-height) | Controls inside an `igDialog` do not have correct dimensions if their width/height is relative. This is because any embedded controls are instantiated before rendering `igDialog` so their dimensions cannot be calculated correctly. | ![](../../images/images/positive.png) +[Embedded iframe (including in controls like *igHtmlEditor*) may reload and lose content](#embedded-iframe) | Maximizing and minimizing the `igDialog` can cause frame elements in the content (including in controls like the `igHtmlEditor`) to reload. This is caused by the dialog moving in the DOM to position itself under the body of the document. Depending on configuration, pinning can produce similar behavior. | ![](../../images/images/positive.png) + +## igDialog + +### Controls sized incorrectly when inside an *igDialog* and their width/ height is relative + +When a visualization control is embedded inside an `igDialog` and the width and/or height of that embedded control is set relatively (in percentages), the embedded control does not size correctly because the dialog has not been yet created so the dimensions of the embedded control cannot be calculated correctly. + +This is because the embedded control is instantiated prior to rendering the `igDialog`. + +> **Workaround** +> +If using embedded controls with relative dimensions, instantiate them after the `igDialog` is opened. + +### Embedded iframe (including in controls like *igHtmlEditor*) may reload and lose content + +This can occur during maximize/minimize operations when the element on which the `igDialog` is instantiated is nested in other elements and moves directly under the body in the DOM hierarchy. That causes the browser to reload ` +
    +``` + +Create the igDialog - we are creating the `igDialog` in closed state. Then we attach an event handler function for the `click` event to the button so that the modal dialog window will open when the button is clicked. + +**In TypeScript:** +```typescript +$(function () { + + // Initialize the open button with igButton + $("#openDialog").igButton({ labelText: "Open Dialog" }); + + // Initialize the igDialog + $("#dialog").igDialog({ + state: "closed", + modal: true, + draggable: false, + resizable: false, + height: 500, + width: 400 + }); + + $("#openDialog").on({ + click: function (e) { + // Open the igDialog + $("#dialog").igDialog("open"); + } + }); +}); +``` + +### Templating Engine Sample +This sample will demonstrate how we can use the `igTemplatingEngine` with TypeScript + +#### Preview +The following screenshot is a preview of the final result. + +![](images/igTemplating_TypeScript.png) + +####Details +Create the HTML - This sample demonstrates how to use nested templates using the Infragistics Templating Engine in TypeScript. In this example the movies collection for each actor is iterated through and a Tree is used to display the movies data. + +**In HTML:** +```html + + +
    +``` + +We are adding the classes `Movie` and `Actor`, and initialize the movies and actors data. + +**In TypeScript:** +```typescript +/// +/// +/// + +class Movie { + name: string; + year: number; + genre: string; + rating: number; + languages: string; + subtitles: string; + constructor(inName: string, inYear: number, inGenre: string, inRating: number, inLanguage: string, inSubs: string) { + this.name = inName; + this.year = inYear; + this.genre = inGenre; + this.rating = inRating; + this.languages = inLanguage; + this.subtitles = inSubs; + } +} + +class Actor { + firstName: string; + lastName: string; + nationality: Object; + movies: Movie[]; + constructor(inFirstName: string, inLastName: string, inNationality: Object, inMoviesArray: Movie[]) { + this.firstName = inFirstName; + this.lastName = inLastName; + this.nationality = inNationality; + this.movies = inMoviesArray; + } +} + +var moviesDWashington: Movie[] = []; +moviesDWashington.push(new Movie("American Gangster", 2007, "Biography, Crime, Drama", 7.9, "English, German", "Japanese, English")); + +var moviesAJolie: Movie[] = []; +moviesAJolie.push(new Movie("In the Land of Blood and Honey", 2011, "Drama, Romance, War", 3.2, "English", "English, French")); + +var moviesPCruz: Movie[] = []; +moviesPCruz.push(new Movie("Sahara", 2005, "Action, Adventure, Comedy", 5.9, "English, Spanish", "Japanese, French")); + +var moviesGClooney: Movie[] = []; +moviesGClooney.push(new Movie("Ocean's Thirteen", 2007, "Crime, Thriller", 6.9, "English", "Spanish, French")); + +var moviesJRoberts: Movie[] = []; +moviesJRoberts.push(new Movie("Eat Pray Love", 2010, "Drama, Romance", 5.3, "English, German", "Spanish, French")); + +var actors: Actor[] = []; +actors.push(new Actor("Denzel", "Washington", { key: "USA", value: "USA" }, moviesDWashington)); +``` + +After that we initialize the `igGrid` and the `igTree` controls + +**In TypeScript:** +```typescript +$(function () { + var i = 0, currentValue, limit, + imagesRoot = "http://www.igniteui.com/images/samples/templating-engine/multiConditionalColTemplate"; + + $("#resultGrid").igGrid({ + dataSource: actors, + width: "100%", + autoGenerateColumns: false, + columns: [ + { headerText: "First Name", key: "firstName", width: 100 }, + { headerText: "Last Name", key: "lastName", width: 200 }, + { headerText: "Nationality", key: "nationality", width: 100, template: " ${nationality.value} " }, + { headerText: "Movies", key: "movies", width: 500, template: $("#colTmpl").html() }, + ], + rendered: function () { + initializeInnerControls(); + }, + features: [ + { + name: "Paging", + type: "local", + pageSize: 3, + pageSizeChanged: function () { + initializeInnerControls(); + }, + pageIndexChanged: function () { + initializeInnerControls(); + } + } + ] + }); + + function initializeInnerControls() { + $(".tree").igTree({ hotTracking: false }); + limit = $('.rating').length; + for (i = 0; i < limit; i++) { + currentValue = parseFloat($($('.rating')[i]).html()); + $($('.rating')[i]).igRating({ + voteCount: 10, + value: currentValue, + valueAsPercent: false, + precision: "exact" + }); + } + } +}); +``` + +### Data Chart Sample +This sample demonstrates how to create Data Chart in TypeScript using class-based approach for configuring data. +#### Preview +The following screenshot is a preview of the final result. + +![](images/igDataChart_TypeScript.png) + +#### Details + +Create the HTML +**In HTML:** +```html +
    + +
    + Population data from:
    + U.S. Census Bureau +
    +``` + +Create the Data Source abd the `igPieChart` in TypeScript +**In TypeScript:** +```typescript +/// +/// +/// + +class CountryPopulation { + countryName: string; + population2005: number; + population1995: number; + constructor(inName: string, populationIn1995: number, populationIn2005: number) { + this.countryName = inName; + this.population2005 = populationIn2005; + this.population1995 = populationIn1995; + } + +} + +var samplePopulation: CountryPopulation[] = []; +samplePopulation.push(new CountryPopulation("China", 1216, 1297)); +samplePopulation.push(new CountryPopulation("India", 920, 1090)); +samplePopulation.push(new CountryPopulation("United States", 266, 295)); +samplePopulation.push(new CountryPopulation("Indonesia", 197, 229)); +samplePopulation.push(new CountryPopulation("Brazil", 161, 186)); + +$(function () { + $("#data-chart").igDataChart({ + width: "80%", + height: "400px", + title: "Population per Country", + subtitle: "Five largest projected populations for 1995 and 2005", + dataSource: samplePopulation, + axes: [ + { + name: "NameAxis", + type: "categoryX", + title: "Country", + label: "countryName" + }, + { + name: "PopulationAxis", + type: "numericY", + minimumValue: 0, + title: "Millions of People", + } + ], + series: [ + { + name: "1995Population", + title: "1995", + type: "column", + isDropShadowEnabled: true, + useSingleShadow: false, + shadowColor: "#666666", + isHighlightingEnabled: true, + isTransitionInEnabled: true, + xAxis: "NameAxis", + yAxis: "PopulationAxis", + valueMemberPath: "population1995", + showTooltip: true + }, + { + name: "2005Population", + title: "2005", + type: "column", + isDropShadowEnabled: true, + useSingleShadow: false, + shadowColor: "#666666", + isHighlightingEnabled: true, + isTransitionInEnabled: true, + xAxis: "NameAxis", + yAxis: "PopulationAxis", + valueMemberPath: "population2005", + showTooltip: true + }, + { + name: "categorySeries", + type: "categoryToolTipLayer", + useInterpolation: false, + transitionDuration: 150 + }, + { + name: "crosshairLayer", + title: "crosshair", + type: "crosshairLayer", + useInterpolation: false, + transitionDuration: 500 + } + ] + }); +}) +``` + +### Pie Chart Sample +This sample will demonstrate the use of TypeScript for creating Pie Chart control with a legend and different options for the layout. + +#### Preview +The following screenshot is a preview of the final result. + +![](images/igPieChart_TypeScript.png) + +#### Details + +Create the HTML - we are going to create Pie Chart with the ability to set different options for the layout, which includes label positions, lines, angles, radius and legend. + +**In HTML:** +```html +
    +
    + + +| Start Angle: | | +| --- | --- | +| Radius: | | +| Label Position: | None Center Inside End Outside End Best Fit | +| Leader Line: | Straight Arc Spline | + +``` + +Create the Data Source - we are adding the class `PieChartCountryPopulation`, and initialize the country population data. We are storing everything in the `PieChartCountryPopulation` array. + +**In TypeScript:** +```typescript +/// +/// +/// + +class PieChartCountryPopulation { + countryName: string; + population2008: number; + constructor(inName: string, populationIn2008: number) { + this.countryName = inName; + this.population2008 = populationIn2008; + } +} + +var pieChartSample: PieChartCountryPopulation[] = []; +pieChartSample.push(new PieChartCountryPopulation("China", 1333)); +pieChartSample.push(new PieChartCountryPopulation("India", 1140)); +pieChartSample.push(new PieChartCountryPopulation("United States", 304)); +pieChartSample.push(new PieChartCountryPopulation("Indonesia", 228)); +pieChartSample.push(new PieChartCountryPopulation("Brazil", 192)); +``` + +Create the igPieChart - we are creating the `igPieChart` and all other relevant controls like `igCombo` and `slider` in order to configure the layout. + +```typescript +$(function () { + $('#pieChart').igPieChart({ + dataSource: pieChartSample, + width: "430px", + height: "430px", + dataLabel: 'countryName', + dataValue: 'population2008', + explodedSlices: [2, 3, 4], + radiusFactor: .6, + startAngle: -30, + labelsPosition: "outsideEnd", + leaderLineType: "straight", + labelExtent: 40, + legend: { element: 'legend', type: "item" } + }); + + $("#angle").slider({ + slide: function (event, ui) { + $("#pieChart").igPieChart("option", "startAngle", ui.value); + }, + min: 0, + max: 360 + }); + + $("#radius").slider({ + slide: function (event, ui) { + $("#pieChart").igPieChart("option", "radiusFactor", ui.value / 1000.0); + }, + min: 0, + max: 1000, + value: 600 + }); + + $("#labelPosition").igCombo({ + enableClearButton: false, + mode: "dropdown", + selectionChanged: function (evt, ui) { + if ($.isArray(ui.items) && ui.items[0] != undefined) { + $("#pieChart").igPieChart("option", "labelsPosition", ui.items[0].data.value); + + $("#labelExtent").slider("option", "disabled", ui.items[0].data.value != "outsideEnd"); + $("#leaderLine").igCombo("option", "disabled", ui.items[0].data.value != "outsideEnd" ? true : false); + } + } + }); + + $("#leaderLine").igCombo({ + enableClearButton: false, + mode: "dropdown", + selectionChanged: function (evt, ui) { + if ($.isArray(ui.items) && ui.items[0] != undefined) { + $("#pieChart").igPieChart("option", "leaderLineType", ui.items[0].data.value); + } + } + }); +}); +``` + +### Tree Sample +This sample will demonstrate how we can use `igTree` with TypeScript. + +#### Preview +The following screenshot is a preview of the final result. + +![](images/igTree_TypeScript.png) + +#### Details +Create the HTML - we are going to create an `igTree` will represent a file explorer consisting of folders and files. + +**In HTML:** +```html +
    +``` + +Create the Data Source - we are creating a hierarchical structure consisting of folders, subfolders and files. + +**In TypeScript:** +```typescript +/// +/// +/// + +class FileType { + name: string; + type: string; + imageUrl: string; + folder: FileType[]; + constructor(inName: string, inType: string, inImageUrl: string, inFolder: FileType[]) { + this.name = inName; + this.type = inType; + this.imageUrl = inImageUrl; + this.folder = inFolder; + } +} + +function createSubfolderFiles(parentFolder: FileType, subFolders: string[], files: string[][], + folderPicture: string, filePicture: string) { + var fileIndex, subFolderIndex; + for (subFolderIndex = 0; subFolderIndex < subFolders.length; subFolderIndex++) { + parentFolder.folder.push(new FileType(subFolders[subFolderIndex], "Folder", folderPicture, [])); + + for (fileIndex = 0; fileIndex < files[subFolderIndex].length; fileIndex++) { + parentFolder.folder[subFolderIndex].folder.push(new FileType(files[subFolderIndex][fileIndex], "File", filePicture, [])); + } + } +} + +var folderMusic = new FileType("Music", "Folder", "../../images/samples/tree/book.png", []); +var musicSubFolders = ["Y.Malmsteen", "WhiteSnake", "AC/DC", "Rock"]; +var musicFiles = [["Making Love", "Rising Force", "Fire and Ice"], ["Trouble", "Bad Boys", "Is This Love"], + ["ThunderStruck", "T.N.T.", "The Jack"], ["Bon Jovi - Always"]]; +createSubfolderFiles(folderMusic, musicSubFolders, musicFiles, "../../images/samples/tree/book.png", "../../images/samples/tree/music.png"); + +... + +var folderDeleted = new FileType("Deleted", "Folder", "../../images/samples/tree/bin_empty.png", []); +var folderComputer = new FileType("Computer", "Folder", "../../images/samples/tree/computer.png", []); +folderComputer.folder.push(folderMusic); +folderComputer.folder.push(folderDocuments); +folderComputer.folder.push(folderPictures); +folderComputer.folder.push(folderNetwork); +folderComputer.folder.push(folderDeleted); + +var files = [folderComputer]; +``` + +Create the `igTree` - we are creating the `igTree` and binding it to the generated data source. + +**In TypeScript:** +```typescript +$(function () { + var options: IgTree = { + checkboxMode: 'triState', + singleBranchExpand: true, + dataSource: $.extend(true, [], files), + initialExpandDepth: 0, + pathSeparator: '.', + bindings: { + textKey: 'name', + valueKey: 'type', + imageUrlKey: 'imageUrl', + childDataProperty: 'folder' + }, + dragAndDrop: true, + dragAndDropSettings: { + allowDrop: true, + customDropValidation: function (element) { + // Validates the drop target + var valid = true, + droppableNode = $(this); + + if (droppableNode.is('a') && droppableNode.closest('li[data-role=node]').attr('data-value') === 'File') { + valid = false; + } + + return valid; + } + } + } + + $("#tree").igTree(options); +}); +``` + +### Barcode Sample +This sample will demonstrate how to use TypeScript for creating Barcode and how to configure specific settings for it. +#### Preview +The following screenshot is a preview of the final result. + +![](images/igBarcode_TypeScript.png) + +#### Details + +Create the HTML - we are going to create barcode based on some data (in our case hyperlinks to Infragistics website). `Encoding mode` and `Eci Header Display Mode` could be used in order to manipulate the barcode modes. + +**In HTML** +```html + +| | +| --- | +| Data: | +| Encoding Mode: | +| Eci Header Display Mode: | + +``` +Create the Data Source - we are adding the class `IGProducts` and initialize the Infragistics Products data. Everything is stored in the `igProductsData` array. + +**In TypeScript** +```typescript +/// +/// +/// + +class IGProducts { + id: number; + name: string; + constructor(productId: number, productName: string) { + this.id = productId; + this.name = productName; + } +} + +var igProductsData: IGProducts[] = []; +igProductsData.push(new IGProducts(1, "http://www.infragistics.com/products/ultimate")); +igProductsData.push(new IGProducts(2, "http://www.infragistics.com/products/professional")); +igProductsData.push(new IGProducts(3, "http://www.infragistics.com/products/jquery")); + +``` +Create the igBarcode - we are creating the `igBarcode` and all other relevant controls like `igCombo` in order to help with the layout configuration. + +```typescript +$(function () { + $("#barcode").igQRCodeBarcode({ + height: "300px", + width: "100%", + data: "http://www.infragistics.com/products/jquery/samples", + }); + + $("#dataInput").igTextEditor({ + width: "300px", + value: "http://www.infragistics.com/products/jquery/help" + }); + + $("#setButton").click(function () { + $("#barcode").igQRCodeBarcode("option", "data", $("#dataInput").igTextEditor("value")); + }); + + $('#combo').igCombo({ + dataSource: igProductsData, + textKey: 'Name', + valueKey: 'ID', + width: "500px", + initialSelectedItems: [{ + index: 0 + }] + }); + + $("#encodingMode").igCombo({ + enableClearButton: false, + mode: "dropdown", + selectionChanged: function (evt, ui) { + if ($.isArray(ui.items) && ui.items[0] != undefined) { + $("#barcode").igQRCodeBarcode("option", "encodingMode", ui.items[0].data.value); + } + } + }); + + $("#eciHeaderDisplayMode").igCombo({ + enableClearButton: false, + mode: "dropdown", + selectionChanged: function (evt, ui) { + if ($.isArray(ui.items) && ui.items[0] != undefined) { + $("#barcode").igQRCodeBarcode("option", "eciHeaderDisplayMode", ui.items[0].data.value); + } + } + }); +}); +``` + +### Layout Manager Sample +This sample will demonstrate how to configure Layout Manager's Grid Layout and it's ability to have items with arbitrary position in a grid with a predefined size. +#### Preview +The following screenshot is a preview of the final result. + +![](images/igLayoutManager_TypeScript.png) + +#### Details + +Create the HTML - we are going to create layout manager with Grid layout which can be use to organize content and set different container layout. + +**In HTML:** +```html +.. + + + +
    + +.. +``` +Create the `igLayoutManager` - different structure of the layout could be configured by changing `items` and `gridLayout` options. + +**In TypeScript:** +```typescript +/// +/// +/// + +$(function () { + options: IgLayoutManager = { + layoutMode: "grid", + width: "100%", + height: "600px", + gridLayout: { cols: 3, rows: 3 }, + items: [ + { rowSpan: 2, colSpan: 2, colIndex: 0, rowIndex: 0 }, + { rowSpan: 1, colSpan: 1, rowIndex: 0, colIndex: 2 }, + { rowSpan: 1, colSpan: 1, rowIndex: 1, colIndex: 2 }, + { rowSpan: 1, colSpan: 3, colIndex: 0, rowIndex: 2 } + ], + itemRendered: function(evt, ui){ + args.item.append("
    • colspan: " + args.itemData.colSpan + "
    • rowspan: " + args.itemData.rowSpan + "
    "); + + // get the element + if (args.itemData.colSpan == 2 && args.itemData.rowSpan == 2) { + args.item.css("background-color", "#eee"); + args.item.css("color", "#555"); + } else if (args.itemData.rowSpan == 1 && args.itemData.colSpan == 1) { + if (args.itemData.rowIndex == 0) { + args.item.css("background-color", "#2CBDF9"); + args.item.css("color", "#FFF"); + } else { + args.item.css("background-color", "#FFA72D"); + args.item.css("color", "#FFF"); + } + } else { + args.item.css("background-color", "#2CBDF9"); + args.item.css("color", "#FFF"); + } + } + }; + + $('#layout').igLayoutManager(options); +}); + +``` + +### Pivot View Sample +This sample will demonstrate how to use TypeScript to create igPivotView and how to assign the data using the class-based approach. +#### Preview +The following screenshot is a preview of the final result. + +![](images/igPivotView_TypeScript.png) + +#### Details + +Create the HTML - we are going to create Pivot Grid View composed of three components `igPivotGrid`, `igPivotDataSelector` and `igSplitter`. + +**In HTML:** +```html +
    +``` +Create the `igPivotView` - provides in one place needed tools for manipulating multidimensional (OLAP data) in a pivot grid. + +**In TypeScript:** +```typescript +/// +/// +/// + +class SelectorProduct { + ProductCategory: string; + SellerName: string; + Country: string; + City: string; + Date: string; + UnitPrice: number; + UnitsSold: number; + constructor(public category, public sellerName, public country, public city, + public date, public unitPrice, public unitsSold) { + this.ProductCategory = category; + this.SellerName = sellerName; + this.Country = country; + this.City = city; + this.Date = date; + this.UnitPrice = unitPrice; + this.UnitsSold = unitsSold; + } +} + +var dataView: SelectorProduct[] = []; +dataView.push(new SelectorProduct("Clothing", "Stanley Brooker", "Bulgaria", "Plovdiv", "01/01/2012", 12.81, 282)); +dataView.push(new SelectorProduct("Clothing", "Elisa Longbottom", "US", "New York", "01/05/2013", 49.57, 296)); +dataView.push(new SelectorProduct("Bikes", "Lydia Burson", "Uruguay", "Ciudad de la Costa", "01/06/2011", 3.56, 68)); +dataView.push(new SelectorProduct("Accessories", "David Haley", "UK", "London", "04/07/2012", 85.58, 293)); +dataView.push(new SelectorProduct("Components", "John Smith", "Japan", "Yokohama", "12/08/2012", 18.13, 240)); +dataView.push(new SelectorProduct("Clothing", "Larry Lieb", "Uruguay", "Ciudad de la Costa", "05/12/2011", 68.33, 456)); +dataView.push(new SelectorProduct("Components", "Walter Pang", "Bulgaria", "Sofia", "02/19/2013", 16.05, 492)); + +function saleValueCalculator(items, cellMetadata) { + var sum = 0; + $.each(items, function (index, item) { + sum += item.UnitPrice * item.UnitsSold; + }); + return (Math.round(sum * 10) / 10).toFixed(2); +}; + +dataSource = new $.ig.OlapFlatDataSource({ + dataSource: dataView, + metadata: { + cube: { + name: "Sales", + caption: "Sales", + measuresDimension: { + caption: "Measures", + measures: [ //for each measure, name and aggregator are required + { + caption: "Units Sold", name: "UnitsSold", + aggregator: $.ig.OlapUtilities.prototype.sumAggregator('UnitsSold') + }, + { + caption: "Unit Price", name: "UnitPrice", + aggregator: $.ig.OlapUtilities.prototype.sumAggregator('UnitPrice') + }, + { + caption: "Sale Value", name: "SaleValue", aggregator: saleValueCalculator + }] + }, + dimensions: [ // for each dimension + { + caption: "Date", name: "Date", /*displayFolder: "Folder1\\Folder2",*/ hierarchies: [ + $.ig.OlapUtilities.prototype.getDateHierarchy( + "Date", // the source property name + ["year", "quarter", "month", "date"], // the date parts for which levels will be generated (optional) + "Dates", // The name for the hierarchy (optional) + "Date", // The caption for the hierarchy (optional) + ["Year", "Quarter", "Month", "Day"], // the captions for the levels (optional) + "All Periods") // the root level caption (optional) + ] + }, + { + caption: "Location", name: "Location", hierarchies: [{ + caption: "Location", name: "Location", levels: [ + { + name: "AllLocations", caption: "All Locations", + memberProvider: function (item) { return "All Locations"; } + }, + { + name: "Country", caption: "Country", + memberProvider: function (item) { return item.Country; } + }, + { + name: "City", caption: "City", + memberProvider: function (item) { return item.City; } + }] + }] + }, + { + caption: "Product", name: "Product", hierarchies: [{ + caption: "Product", name: "Product", levels: [ + { + name: "AllProducts", caption: "All Products", + memberProvider: function (item) { return "All Products"; } + }, + { + name: "ProductCategory", caption: "Category", + memberProvider: function (item) { return item.ProductCategory; } + }] + }] + }, + { + caption: "Seller", name: "Seller", hierarchies: [{ + caption: "Seller", name: "Seller", levels: [ + { + name: "AllSellers", caption: "All Sellers", + memberProvider: function (item) { return "All Sellers"; } + }, + { + name: "SellerName", caption: "Seller", + memberProvider: function (item) { return item.SellerName; } + }] + }] + }] + } + }, + + rows: "[Date].[Dates]", + columns: "[Product].[Product]", + measures: "[Measures].[UnitsSold]" +}); + +$(function () { + $("#pivotView").igPivotView({ + dataSource: dataSource + }); +}); + +``` + +### Map Sample +This sample demonstrates how to use TypeScript to bind database and shape files with countries of the world to the Map control using a geographic shapes series. + +#### Preview +The following screenshot is a preview of the final result. + +![](images/igMap_TypeScript.png) + +#### Details + +Create the HTML - we are going to create a map that is showing a tooltip when a country is hovered. + +**In HTML:** +```html + + +
    +``` +Initialize the `igMap` and define the geographic shapes series. + +**In TypeScript:** +```typescript +/// +/// +/// + +class ColorPicker { + brushes: string[]; + interval: number; + constructor(_min: number, _max: number) { + this.brushes = ["#d9c616", "#d96f17", "#d1150c"]; + this.interval = (_max - _min) / (this.brushes.length - 1); + } + + getColorByIndex(val) { + var index = Math.round(val / this.interval); + if (index < 0) { + index = 0; + } else if (index > (this.brushes.length - 1)) { + index = this.brushes.length - 1; + } + return this.brushes[index]; + } +} + +var colorPicker = new ColorPicker(100000, 500000000); + +$(function () { + $("#map").igMap({ + width: "700px", + height: "500px", + windowRect: { left: 0.1, top: 0.1, height: 0.7, width: 0.7 }, + overviewPlusDetailPaneVisibility: "visible", + overviewPlusDetailPaneBackgroundImageUri: "http://www.igniteui.com/images/samples/maps/world.png", + series: [{ + type: "geographicShape", + name: "worldCountries", + markerType: "none", + shapeMemberPath: "points", + shapeDataSource: 'http://www.igniteui.com/data-files/shapes/world_countries_reg.shp', + databaseSource: 'http://www.igniteui.com/data-files/shapes/world_countries_reg.dbf', + opacity: 0.8, + outlineThickness: 1, + showTooltip: true, + tooltipTemplate: "geoShapeTooltip", + shapeStyleSelector: { + selectStyle: function (s, o) { + var pop = s.fields.item("POP2005"); + var popInt = parseInt(pop); + var colString = colorPicker.getColorByIndex(popInt); //getColorValue(popInt); + return { + fill: colString, + stroke: "gray" + }; + } + } + }] + }); + $("#map").find(".ui-widget-content").append("© OpenStreetMap contributors"); +}); +``` + +### Loader Sample +This sample demonstrates how to use TypeScript to load multiple components and features with the Infragistics Loader. Using a Combo Box can be chosen what is the type for the Data Chart that will be displayed. A legend for the Data Chart is included as well. + +#### Preview +The following screenshot is a preview of the final result. + +![](images/igLoader_TypeScript.png) + +#### Details + +Create the HTML. + +**In HTML:** +```html +
    + +
    + +
    +
    +``` + +In TypeScript we create the Data, the `igLoader`, 'igDataChart' and 'igCombo'. +**In TypeScript:** +```typescript +/// +/// +/// + +class DepartmentData { + label: string; + budget: number; + spending: number; + constructor(_label: string, _budget: number, _spending: number) { + this.label = _label; + this.budget = _budget; + this.spending = _spending; + } +} + +var companyData: DepartmentData[] = []; +companyData.push(new DepartmentData("Administration", 75, 35)); +companyData.push(new DepartmentData("Sales", 30, 80)); +companyData.push(new DepartmentData("IT", 60, 20)); +companyData.push(new DepartmentData("Marketing", 50, 70)); +companyData.push(new DepartmentData("Development", 80, 40)); +companyData.push(new DepartmentData("Support", 20, 45)); + +$.ig.loader({ + scriptPath: "http://www.igniteui.com/igniteui/js/", + cssPath: "http://www.igniteui.com/igniteui/css/", + resources: "igDataChart.Radial,igCombo, igChartLegend" +}); + +// jQuery's ready event can be used with the loader. +// The loader calls holdReady until all JS and CSS files are loaded. +$(function () { + + $("#chart").igDataChart({ + width: "500px", + height: "500px", + dataSource: companyData, + legend: { element: "legend" }, + axes: [{ + name: "angleAxis", + type: "categoryAngle", + label: "label", + interval: 1 + }, { + name: "radiusAxis", + type: "numericRadius", + innerRadiusExtentScale: .1, + maximumValue: 100, + minimumValue: 0, + interval: 25, + radiusExtentScale: .6 + }], + series: [{ + name: "series1", + title: 'Budget', + type: "radialLine", + angleAxis: "angleAxis", + valueAxis: "radiusAxis", + valueMemberPath: "budget", + thickness: 5, + markerType: "circle" + }, { + name: "series2", + title: 'Spending', + type: "radialLine", + angleAxis: "angleAxis", + valueAxis: "radiusAxis", + valueMemberPath: "spending", + thickness: 5, + markerType: "circle" + }], + horizontalZoomable: true, + verticalZoomable: true, + windowResponse: "immediate" + }); + + $("#seriesType").igCombo({ + selectionChanged: function (evt, ui) { + if (ui.items[0].data.value != undefined) { + $("#chart").igDataChart("option", "series", [{ + name: "series1", remove: true + }, { + name: "series2", remove: true + }, { + name: "series1", + title: "Budget", + type: ui.items[0].data.value, + angleAxis: "angleAxis", + valueAxis: "radiusAxis", + valueMemberPath: "budget", + thickness: 5, + markerType: "circle" + }, { + name: "series2", + title: 'Spending', + type: ui.items[0].data.value, + angleAxis: "angleAxis", + valueAxis: "radiusAxis", + valueMemberPath: "spending", + thickness: 5, + markerType: "circle" + }]); + } + } + }); +}); +``` + +### Related Content +The following topic provides additional information related to this one: + +[Using {environment:ProductName} with TypeScript](Using-Ignite-UI-with-TypeScript.html) - This topic contains an overview for using the {environment:ProductName} type definitions for TypeScript. diff --git a/docs/jquery/src/content/en/topics/typescript-definitions/using-ignite-ui-with-typescript.mdx b/docs/jquery/src/content/en/topics/typescript-definitions/using-ignite-ui-with-typescript.mdx new file mode 100644 index 0000000000..b0912d0e9c --- /dev/null +++ b/docs/jquery/src/content/en/topics/typescript-definitions/using-ignite-ui-with-typescript.mdx @@ -0,0 +1,142 @@ +--- +title: "Using {environment:ProductName} with TypeScript" +slug: using-ignite-ui-with-typescipt +--- + +# Using {environment:ProductName} with TypeScript + +## Topic Overview + +This topic is an overview for using the {environment:ProductName} type definitions for TypeScript. + +### Required background + +The following table lists the materials required as a prerequisite to understanding this topic: + +**Concepts** + +- jQuery, jQuery UI +- [TypeScript](http://www.typescriptlang.org/) + +**Topics** + +- [{environment:ProductName} Overview](/igniteui-for-jquery-overview.mdx) + + +### In this topic + +This topic contains the following sections: + +- [Introduction](#introduction) +- [Syntax](#syntax) +- [Creating TypeScript App with {environment:ProductName}](#creating-app) +- [Related Content](#related-content) + +## Introduction + +{environment:ProductName}® provides type definitions for TypeScript allowing you to take advantage of strong typing, compile time checking and intellisense features. + +The definitions for the controls can be installed via NPM with the following command `npm install @types/ignite-ui`. They extend the jQuery and jQuery UI definitions for TypeScript and thus it depends on them. + +## Syntax + +Syntax for using {environment:ProductName} controls in TypeScript application is the same as you write vanilla JavaScript application. This means that you can refer to the [{environment:ProductName} API documentation](https://www.igniteui.com/help/api/2025.1) for code snippets reference. + +## Creating TypeScript App with {environment:ProductName} + +### Requirements + +When considering the required resources the same requirements and options apply as described in the ["Using JavaScript Resources in {environment:ProductName}"](/general-and-getting-started/deployment-guide-javascript-resources.mdx) documentation in addition to loading the {environment:ProductName} Angular directives module afterwards. This means that along with some styles the application would also need to include: + +- [jQuery](http://www.jquery.com/) 1.9 and later +- [jQuery UI](http://jqueryui.com/) 1.10 and later +- [TypeScript](http://www.typescriptlang.org/) 1.4 and later +- [{environment:ProductName}](http://www.igniteui.com/) 15.1 and later + +### Steps + +1. Create a new HTML App with TypeScript in Visual Studio. +2. Include the {environment:ProductName} theme and structural files: + + **In HTML:** +```html + + + +``` + +3. Add the JavaScript libraries ([modernizr](http://modernizr.com/) is optional): + + **In HTML:** +```html + + + + +``` +4. Include {environment:ProductName} scripts. Preferably use a custom download, but you can also check ["Using JavaScript Resources in {environment:ProductName}"](/general-and-getting-started/deployment-guide-javascript-resources.mdx) topic for other methods. + + **In HTML:** +```html + + + + + +``` + +5. Add reference path to where the TypeScript file for your application is located: + + **In HTML:** +```html + +``` + +6. Include the reference paths to the {environment:ProductName} and jQuery type definitions for TypeScript: + + **In TypeScript:** +```typescript + /// + /// + /// +``` + +>**Note:** This is needed for TypeScript versions prior to 1.5 so the compiler could include the dependencies in the program during compilation. In 1.5 and newer versions they can be defined in a separate tsconfig.json file. For more information see the [tsconfig.json wiki page](https://github.com/Microsoft/TypeScript/wiki/tsconfig.json) + +7. In your view you need to instruct where your application runs. For example: + + **In HTML:** +```typescript + + +
    + + +``` + +8. And finally add the desired control, for example an igDialog: + + **In TypeScript:** +```typescript + $(function () { + // Initialize the igDialog + $("#sampleAppID").igDialog({ + state: "closed", + modal: true, + draggable: false, + resizable: false, + height: 500, + width: 400 + }); + }); +``` + +## Related Content + +### Samples + +The following samples provide additional information related to this topic. + +- [igHierarchicalGrid TypeScript]({environment:SamplesUrl}/hierarchical-grid/typescript) +- [igTreeGrid TypeScript]({environment:SamplesUrl}/tree-grid/typescript) +- [igPivotGrid TypeScript]({environment:SamplesUrl}/pivot-grid/typescript) diff --git a/docs/jquery/src/content/en/topics/whats-new/00-general-changelog.mdx b/docs/jquery/src/content/en/topics/whats-new/00-general-changelog.mdx new file mode 100644 index 0000000000..78360fac19 --- /dev/null +++ b/docs/jquery/src/content/en/topics/whats-new/00-general-changelog.mdx @@ -0,0 +1,160 @@ +--- +title: "Changelog" +slug: general-changelog +--- + +# Changelog + +- **Released Versions** + - December 2025 + - [25.1.2](#2512) + - July 2025 + - [24.2.12](#24212) + - [24.1.16](#24116) + - [24.2.10](#24210) + - May 2025 + - [24.2.8](#2428) + - [24.1.14](#24114) + - April 2025 + - [24.2.7](#2427) + - [24.1.12](#24112) + - February 2025 + - [24.2.6](#2426) + - [24.1.11](#24111) + - [23.2.60](#23260) + - January 2025 + - [24.2.3](#2423) + - September 2024 + - [24.1.9](#2419) + - [23.2.58](#23258) + +## 25.1.2 + +### Added + +- Infragistics {environment:ProductNameASPNETCore} now supports ASP.NET Core for .NET 10 projects. For more information see the [Using {environment:ProductNameASPNETCore}](Using-IgniteUI-Controls-in-ASP.NET-Core-project.html) topic. + +### Breaking Changes + +- Infragistics {environment:ProductNameASPNETCore} no longer supports ASP.NET Core 3.1. + +## 24.2.12 + +### Fixed + +- Bug #36448 - Radial label format properties do not work. (eg. Title, SubTitles) +- Bug #37244 - Excel Library - Custom DataValidation not working +- Bug #37023 - DataChart - Tooltips are cut-off/offscreen if overflow is set to hidden +- Bug #37685 - Spreadsheet - Poor rendering of numbers formatted with Arial font + +## 24.1.16 + +### Fixed + +- Bug #36448 - Radial label format properties do not work. (eg. Title, SubTitles) +- Bug #37244 - Excel Library - Custom DataValidation not working + +## 24.2.10 + +### Refactored + +- Separated `igTemplating` into two modules. The original `igTemplating` no longer allows conditions and iterations (`{{if}}` and `{{each}}` clauses). This allows it to be CSP-compliant as it doesn't rely on the creation of dynamic functions. To use conditions and iterations, you need to include the new `igAdvancedTemplating` in your loader config or as a file `infragistics.templating.advanced.js`. The `infragistics.core.js` bundle continues to include both modules and therefore the full functionality of `igTemplating`. + +## 24.2.8 + +### Fixed + +- Replaced usage of left-over deprecated jQuery API functions +- String functions such as `startsWith` and `endsWith` are now not replaced by a polyfill in modern browsers + +## 24.1.14 + +### Fixed + +- Replaced usage of left-over deprecated jQuery API functions +- String functions such as `startsWith` and `endsWith` are now not replaced by a polyfill in modern browsers + +## 24.2.7 + +### Fixed + +- Replaced usage of additional deprecated jQuery API functions such as + - setting `outline` to 0 through `jQuery.css` + - `jQuery.isArray` + - shorthand functions such as `keydown`, `mousedown`, `dblclick`, `focus`, `select` + +## 24.1.12 + +### Fixed + +- Replaced usage of additional deprecated jQuery API functions such as + - setting `outline` to 0 through `jQuery.css` + - `jQuery.isArray` + - shorthand functions such as `keydown`, `mousedown`, `dblclick`, `focus`, `select` + +## 24.2.6 + +### Fixed + +- Replaced usage of deprecated jQuery API from various 3.x releases + +## 24.1.11 + +### Fixed + +- Replaced usage of deprecated jQuery API from various 3.x releases + +## 23.2.60 + +### Fixed + +- Replaced usage of deprecated jQuery API from various 3.x releases + +## 24.2.3 + +### Added + +- Infragistics {environment:ProductNameASPNETCore} now supports ASP.NET Core for .NET 9 projects. For more information see the [Using {environment:ProductNameASPNETCore}](Using-IgniteUI-Controls-in-ASP.NET-Core-project.html) topic. + +- Infragistics {environment:ProductName} now supports the recently released jQuery 3.7 and jQuery UI 1.14. + +- igGrid and igHierarchicalGrid + - new property `rowAttributeTemplate` allows for adding arbitrary attributes to rows [#2249](https://github.com/IgniteUI/ignite-ui/issues/2249) + +- igGridFiltering + - new property `filterCellLabelTemplate` (overridable per column through the corresponding column setting) allows for displaying visual labels in header cells providing additional information regarding the column filter [#2244](https://github.com/IgniteUI/ignite-ui/issues/2244) + +## 24.1.9 + +### Fixed + +- Grid Filtering - Conditions dropdown can now be navigated when using an accessibility tool [#2245](https://github.com/IgniteUI/ignite-ui/issues/2245) + +### Added + +- Grid Filtering - ARIA attributes indicating expand/collapse state of the conditions dropdown [#2241](https://github.com/IgniteUI/ignite-ui/issues/2241), [#2243](https://github.com/IgniteUI/ignite-ui/issues/2243) +- Grid Filtering - ARIA roles for buttons in the filtering row [#2240](https://github.com/IgniteUI/ignite-ui/issues/2240) +- Grid Filtering - more verbose ARIA label for filter inputs [#2242](https://github.com/IgniteUI/ignite-ui/issues/2242) + +### Changed + +- Grid - the grid's container element is no longer focusable [#2251](https://github.com/IgniteUI/ignite-ui/issues/2251) + + +## 23.2.58 + +### Fixed + +- Grid Filtering - Conditions dropdown can now be navigated when using an accessibility tool [#2245](https://github.com/IgniteUI/ignite-ui/issues/2245) + +### Added + +- Grid Filtering - ARIA attributes indicating expand/collapse state of the conditions dropdown [#2241](https://github.com/IgniteUI/ignite-ui/issues/2241), [#2243](https://github.com/IgniteUI/ignite-ui/issues/2243) +- Grid Filtering - ARIA roles for buttons in the filtering row [#2240](https://github.com/IgniteUI/ignite-ui/issues/2240) +- Grid Filtering - more verbose ARIA label for filter inputs [#2242](https://github.com/IgniteUI/ignite-ui/issues/2242) + +### Changed + +- Grid - the grid's container element is no longer focusable [#2251](https://github.com/IgniteUI/ignite-ui/issues/2251) + + diff --git a/docs/jquery/src/content/en/topics/whats-new/images/chartDefaults1.png b/docs/jquery/src/content/en/topics/whats-new/images/chartDefaults1.png new file mode 100644 index 0000000000..7557024881 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/images/chartDefaults1.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/images/chartDefaults2.png b/docs/jquery/src/content/en/topics/whats-new/images/chartDefaults2.png new file mode 100644 index 0000000000..106ca77a8d Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/images/chartDefaults2.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/images/chartDefaults3.png b/docs/jquery/src/content/en/topics/whats-new/images/chartDefaults3.png new file mode 100644 index 0000000000..3f6933734e Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/images/chartDefaults3.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/images/chartDefaults4.png b/docs/jquery/src/content/en/topics/whats-new/images/chartDefaults4.png new file mode 100644 index 0000000000..f266afc053 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/images/chartDefaults4.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/jquery-whats-new-landing-page.mdx b/docs/jquery/src/content/en/topics/whats-new/jquery-whats-new-landing-page.mdx new file mode 100644 index 0000000000..1071066bfa --- /dev/null +++ b/docs/jquery/src/content/en/topics/whats-new/jquery-whats-new-landing-page.mdx @@ -0,0 +1,19 @@ +--- +title: "What's New" +slug: jquery-whats-new-landing-page +--- + +# What's New + + +### Introduction + +The topics in this group provide information about the new controls and features introduced in the various versions of the {environment:ProductName}™ library of controls. + +### Topics + +Detailed information regarding what new controls and features are introduced is covered in the following topics: + +- [General Changelog](/general-changelog.mdx): This topic encapsulates all changes introduced in both major and minor versions of the {environment:ProductName} library since the 2024 Volume 1 release. + +- [Revision History](./02_Revision History/~jQuery_Whats_New_Revision_History.mdx): This is an archive of all What’s New topics for earlier versions. diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/00-whats-new-in-2023-volume2.mdx b/docs/jquery/src/content/en/topics/whats-new/revision-history/00-whats-new-in-2023-volume2.mdx new file mode 100644 index 0000000000..dfac062182 --- /dev/null +++ b/docs/jquery/src/content/en/topics/whats-new/revision-history/00-whats-new-in-2023-volume2.mdx @@ -0,0 +1,15 @@ +--- +title: "What's New in 2023 Volume 2" +slug: whats-new-in-2023-volume2 +--- + +# What's New in 2023 Volume 2 + +This topic presents the new features for the {environment:ProductFamilyName}™ 2023 Volume 2 release. + +### {environment:ProductNameASPNETCore} +Infragistics {environment:ProductNameASPNETCore} now supports ASP.NET Core for .NET 8 projects. For more information see the [Using {environment:ProductNameASPNETCore}](Using-IgniteUI-Controls-in-ASP.NET-Core-project.html) topic. + + +### {environment:ProductNameASPNETCore} Tag Helpers +{environment:ProductNameASPNETCore} Tag Helpers now support ASP.NET Core for .NET 8 projects. For more information see the [Using {environment:ProductNameASPNETCore} Tag Helpers](using-ignite-ui-tag-helpers.html) topic. diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/01-whats-new-in-2022-volume2.mdx b/docs/jquery/src/content/en/topics/whats-new/revision-history/01-whats-new-in-2022-volume2.mdx new file mode 100644 index 0000000000..8b3fc46a4f --- /dev/null +++ b/docs/jquery/src/content/en/topics/whats-new/revision-history/01-whats-new-in-2022-volume2.mdx @@ -0,0 +1,32 @@ +--- +title: "What's New in 2022 Volume 2" +slug: whats-new-in-2022-volume2 +--- + +# What's New in 2022 Volume 2 + +This topic presents the new features for the {environment:ProductFamilyName}™ 2022 Volume 2 release. + +### {environment:ProductNameASPNETCore} +Infragistics {environment:ProductNameASPNETCore} now supports ASP.NET Core for .NET 7 projects. For more information see the [Using {environment:ProductNameASPNETCore}](Using-IgniteUI-Controls-in-ASP.NET-Core-project.html) topic. + + +### {environment:ProductNameASPNETCore} Tag Helpers +{environment:ProductNameASPNETCore} Tag Helpers now support ASP.NET Core for .NET 7 projects. For more information see the [Using {environment:ProductNameASPNETCore} Tag Helpers](using-ignite-ui-tag-helpers.html) topic. + +## Chart Improvements + +Added significant improvements to default behaviors, and refined the Category Chart API to make it easier to use. + +These new chart improvements include: + +* Responsive layouts for horizontal label rotation based on browser / screen size. +* Enhanced rendering for rounded labels on all platforms. +* Added marker properties to StackedFragmentSeries. +* Added `ShouldPanOnMaximumZoom` property. +* New Category Axis Properties: + + - `ZoomMaximumCategoryRange` + - `ZoomMaximumItemSpan` + - `ZoomToCategoryRange` + - `ZoomToItemSpan` diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/02-whats-new-in-2022-volume1.mdx b/docs/jquery/src/content/en/topics/whats-new/revision-history/02-whats-new-in-2022-volume1.mdx new file mode 100644 index 0000000000..95ba74b7ef --- /dev/null +++ b/docs/jquery/src/content/en/topics/whats-new/revision-history/02-whats-new-in-2022-volume1.mdx @@ -0,0 +1,49 @@ +--- +title: "What's New in 2022 Volume 1" +slug: whats-new-in-2022-volume1 +--- + +# What's New in 2022 Volume 1 + +This topic presents the new features for the {environment:ProductFamilyName}™ 2022 Volume 1 release. + +## Data Legend + +The `igDataLegend` is a new component that works much like the `Legend`, but it shows values of series and provides many configuration properties for filtering series rows and values columns, styling and formatting values. This legend updates when moving the mouse inside of the plot areas the various Ignite UI chart controls. + +The full documentation topics for the `igDataLegend` can be found at the following links: + +- [igCategoryChart Data Legend](category-chart-data-legend.md) +- [igDataChart Data Legend](data-chart-data-legend.md) +- [igFinancialChart Data Legend](financial-chart-data-legend.md) + +## Data Tooltip Layer + +The `DataToolTipLayer` is a new annotation layer that displays values and titles of series as well as legend badges of series in a tooltip. In addition, it provides many configuration properties of the XamDataLegend for filtering series rows and values columns, styling, and formatting values. The tooltip's value updates while moving the mouse inside of the plot area of the various Infragistics chart controls. + +The `DataToolTipLayer` is now the default tooltip type for each of the Infragistics chart controls. Each of the properties that exist on the `DataToolTipLayer` in the XamDataChart is available on the `igCategoryChart`, `igFinancialChart` and `igShapeChart` controls as well, and is prefixed by `DataTooltip`. + +The full documentation topics for the `DataToolTipLayer` can be found at the following links: + +- [igCategoryChart Data Legend](category-chart-data-tooltip.md) +- [igDataChart Data Legend](data-chart-data-tooltip.md) +- [igFinancialChart Data Legend](financial-chart-data-tooltip.md) + +## Chart Features + +* Data Chart: + + * Added animation and transition-in support for Stacked Series. Animations can be enabled by setting the `IsTransitionInEnabled` property to true. From there, you can set the `TransitionInDuration` property to determine how long your animation should take to complete and the `TransitionInMode` to determine the type of animation that takes place. + +* Category Chart, Financial Chart, DataChart + * Added `AssigningCategoryStyle` event, is now available to all series in DataChart. This event is handled when you want to conditionally configure aspects of the series items such as `Fill` background-color and highlighting. + * New `AllowedPositions` enumeration property for CalloutLayer. Used to limit where the callouts are to be placed within the chart. By default, the callouts are intelligently placed in the best place but this used to force for example TopLeft, TopRight, BottomLeft or BottomRight. + * New corner radius properties added for Annotation Layers; used to round-out the corners of each of the callouts. Note, a corner radius has now been added by default. + - `CalloutCornerRadius` for CalloutLayer + - `AxisAnnotationBackgroundCornerRadius` for FinalValueLayer + - `XAxisAnnotationBackgroundCornerRadius` and `YAxisAnnotationBackgroundCornerRadius` for CrosshairLayer + * New `HorizontalViewScrollbarMode` and `VerticalViewScrollbarMode` enumeration properties to enable scrollbars in various ways. When paired with `IsVerticalZoomEnabled` or `IsHorizontalZoomEnabled`, you'll be able to persist or fade-in and out the scrollbars along the axes to navigate the chart. + * New `FavorLabellingScaleEnd`, determines whether the axis should favor emitting a label at the end of the scale. Only compatible with Numeric axes (e.g. NumericX, NumericY, PercentChangeY). + * New `IsSplineShapePartOfRange` determines whether to include the spline shape in the axis range requested of the axis. + * New `XAxisMaximumGap`, determines the maximum allowed value for the plotted series when using `XAxisGap`. The gap determines the amount of space between columns or bars of plotted series. + * New `XAxisMinimumGapSize`, determines the minimum allowed pixel-based value for the plotted series when using XAxisGap to ensure there is always some spacing between each category. diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/03-whats-new-in-2021-volume2.mdx b/docs/jquery/src/content/en/topics/whats-new/revision-history/03-whats-new-in-2021-volume2.mdx new file mode 100644 index 0000000000..c0624b9a0c --- /dev/null +++ b/docs/jquery/src/content/en/topics/whats-new/revision-history/03-whats-new-in-2021-volume2.mdx @@ -0,0 +1,46 @@ +--- +title: "What's New in 2021 Volume 2" +slug: whats-new-in-2021-volume2 +--- + +# What's New in 2021 Volume 2 + +This topic presents the new features for the {environment:ProductFamilyName}™ 2021 Volume 2 release. + +### {environment:ProductNameASPNETCore} +Infragistics {environment:ProductNameASPNETCore} now supports ASP.NET Core for .NET 6 projects. For more information see the [Using {environment:ProductNameASPNETCore}](Using-IgniteUI-Controls-in-ASP.NET-Core-project.html) topic. + + +### {environment:ProductNameASPNETCore} Tag Helpers +{environment:ProductNameASPNETCore} Tag Helpers now support ASP.NET Core for .NET 6 projects. For more information see the [Using {environment:ProductNameASPNETCore} Tag Helpers](using-ignite-ui-tag-helpers.html) topic. + + +### Infragistics Documents +Infragistics Documents assemblies are now available for ASP.NET Core for .NET 6 projects. + +### {environment:ProductName} +{environment:ProductName} now supports the recently released jQuery UI 1.13.0 . + +## Chart Features + +This release introduces several new and improved visual design and configuration options for all of the chart components. e.g. Data Chart, Category Chart, and Financial Chart. + +This release introduces a few improvements and simplifications to visual design and configuration options for the geographic map and all chart components. + +* Added crosshair lines by default in `FinancialChart` and `CategoryChart` +* Added crosshair annotations by default in `FinancialChart` and `CategoryChart` +* Added final value annotation by default in `FinancialChart` +* Added new properties in Category Chart and Financial Chart: + - `CrosshairsLineThickness` and other properties for customizing crosshairs lines + - `CrosshairsAnnotationXAxisBackground` and other properties for customizing crosshairs annotations + - `FinalValueAnnotationsBackground` and other properties for customizing final value annotations + - `AreaFillOpacity` that allow changing opacity of series fill (e.g. Area chart) + - `MarkerThickness` that allows changing thickness of markers +* Added new properties in Category Chart, Financial Chart, Data Chart, and Geographic Map: + - `MarkerAutomaticBehavior` that allows which marker type is assigned to multiple series in the same chart + - `LegendItemBadgeShape` for setting badge shape of all series represented in a legend + - `LegendItemBadgeMode` for setting badge complexity on all series in a legend +* Added new properties in Series in Data Chart and Geographic Map: + - `LegendItemBadgeShape` for setting badge shape on specific series represented in a legend + - `LegendItemBadgeMode` for setting badge complexity on specific series in a legend +* Simplified shapes of series in chart's legend to display only circle, line, or square. This can be reverted by setting chart's `LegendItemBadgeMode` property to `MatchSeries` enum value \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/04-whats-new-in-2021-volume1.mdx b/docs/jquery/src/content/en/topics/whats-new/revision-history/04-whats-new-in-2021-volume1.mdx new file mode 100644 index 0000000000..4384725f92 --- /dev/null +++ b/docs/jquery/src/content/en/topics/whats-new/revision-history/04-whats-new-in-2021-volume1.mdx @@ -0,0 +1,101 @@ +--- +title: "What's New in 2021 Volume 1" +slug: whats-new-in-2021-volume1 +--- +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# What's New in 2021 Volume 1 + +This topic presents the new features for the {environment:ProductFamilyName}™ 2021 Volume 1 release. + +## Chart Features + +This release introduces several new and improved visual design and configuration options for all of the chart components. e.g. Data Chart, Category Chart, and Financial Chart. + +### Redesigned Chart Defaults: + +* New color palette for series/markers in all charts + +![](../images/chartDefaults1.png) | ![](../images/chartDefaults2.png) +------------- | ------------- +![](../images/chartDefaults3.png) | ![](../images/chartDefaults4.png) + + +* Changed Bar/Column/Waterfall series to have square corners instead of rounded corners + +* Changed Scatter High Density series’ colors for min/max heat properties + +* Changed Financial/Waterfall series’ colors for negative fill of their visuals + +* Changed marker's thickness to 2px from 1px + +* Changed marker's fill to match the marker's outline for PointSeries, BubbleSeries, ScatterSeries, PolarScatterSeries + +Note, you can use set property to Normal to undo this change + +* Compressed labelling for the TimeXAxis and OrdinalTimeXAxis + +* New Marker Properties: + + - - Can be set to 'MatchMarkerOutline' so the marker depends on the outline + - - Can be set to a value 0 to 1 + - - Can be set to 'MatchMarkerBrush' so the marker's outline depends on the fill brush color + +* New Series Property: + +Can be set to toggle the series outline visibility. Note, for Data Chart, the property is on the series + +* New Plot Area Margin Properties: + + The plot area margin properties define the bleed over area introduced into the viewport when the chart is at the default zoom level. A common use case is to provide space between the axes and first/last data points. Note, the , listed below, will automatically set the margin when markers are enabled. The others are designed to specify a `Number` to represent the thickness, where PlotAreaMarginLeft etc. adjusts the space to all four sides of the chart. These new properties were added: + + - + - + - + - + - + +* New Highlighting Properties + + Several configurations to the series highlighting as been added. In previous releases the highlighting was limited to fade on hover. These new properties were added: + + - - Sets whether hovered or non-hovered series to fade, brighten + - - Sets whether the series highlights depending on mouse position eg. directly over or nearest item + +* Added Highlighting for the following series: + + - Stacked + - Scatter + - Polar + - Radial + - Shape + +* Added Annotation layers to the following series: + + - Stacked + - Scatter + - Polar + - Radial + - Shape + +* Added support for overriding the data source of individual stack fragments within a stacked series + +* Added custom style events to Stacked, Scatter, Range, Polar, Radial, and Shape series + +* Added support to automatically expanding the horizontal margins of the chart based on the initial labels displayed + +### Chart Legend Features: + +* - Enables series highlighting when hovering over legend items + +### Geographic Map Features (CTP): + +* Added support for wrap around display of the map (scroll infinitely horizontally) + +* Added support for shifting display of some map series while wrapping around the coordinate origin + +* Added support for highlighting of the shape series + +* Added support for some annotation layers for the shape series + + diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/05-whats-new-in-2020-volume2.mdx b/docs/jquery/src/content/en/topics/whats-new/revision-history/05-whats-new-in-2020-volume2.mdx new file mode 100644 index 0000000000..664fdff523 --- /dev/null +++ b/docs/jquery/src/content/en/topics/whats-new/revision-history/05-whats-new-in-2020-volume2.mdx @@ -0,0 +1,19 @@ +--- +title: "What's New in 2020 Volume 2" +slug: whats-new-in-2020-volume2 +--- + +# What's New in 2020 Volume 2 + +This topic presents the new features for the {environment:ProductFamilyName}™ 2020 Volume 2 release. + +### {environment:ProductNameASPNETCore} +Infragistics {environment:ProductNameASPNETCore} now supports ASP.NET Core for .NET 5 projects. For more information see the [Using {environment:ProductNameASPNETCore}](Using-IgniteUI-Controls-in-ASP.NET-Core-project.html) topic. + + +### {environment:ProductNameASPNETCore} Tag Helpers +{environment:ProductNameASPNETCore} Tag Helpers now support ASP.NET Core for .NET 5 projects. For more information see the [Using {environment:ProductNameASPNETCore} Tag Helpers](using-ignite-ui-tag-helpers.html) topic. + + +### Infragistics Documents +Infragistics Documents assemblies are now available for ASP.NET Core for .NET 5 projects. diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/06-whats-new-in-2019-volume2.mdx b/docs/jquery/src/content/en/topics/whats-new/revision-history/06-whats-new-in-2019-volume2.mdx new file mode 100644 index 0000000000..4ff9d6441f --- /dev/null +++ b/docs/jquery/src/content/en/topics/whats-new/revision-history/06-whats-new-in-2019-volume2.mdx @@ -0,0 +1,19 @@ +--- +title: "What's New in 2019 Volume 2" +slug: whats-new-in-2019-volume2 +--- + +# What's New in 2019 Volume 2 + +This topic presents the new features for the {environment:ProductFamilyName}™ 2019 Volume 2 release. + +### {environment:ProductNameASPNETCore} +Infragistics {environment:ProductNameASPNETCore} now supports ASP.NET Core 3 projects. For more information see the [Using {environment:ProductNameASPNETCore}](Using-IgniteUI-Controls-in-ASP.NET-Core-project.html) topic. + + +### {environment:ProductNameASPNETCore} Tag Helpers +{environment:ProductNameASPNETCore} Tag Helpers now support ASP.NET Core 3 projects. For more information see the [Using {environment:ProductNameASPNETCore} Tag Helpers](using-ignite-ui-tag-helpers.html) topic. + + +### Infragistics Documents +Infragistics Documents assemblies are now available for ASP.NET Core 3 projects. diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/07-whats-new-in-2018-volume2.mdx b/docs/jquery/src/content/en/topics/whats-new/revision-history/07-whats-new-in-2018-volume2.mdx new file mode 100644 index 0000000000..ad344668bf --- /dev/null +++ b/docs/jquery/src/content/en/topics/whats-new/revision-history/07-whats-new-in-2018-volume2.mdx @@ -0,0 +1,328 @@ +--- +title: "What's New in 2018 Volume 2" +slug: whats-new-in-2018-volume2 +--- + +# What's New in 2018 Volume 2 + +This topic presents the controls and the new and enhanced features for the {environment:ProductFamilyName}™ 2018 Volume 2 release. + +### Overview + +The following table summarizes what’s new in 2018 Volume 2 and additional details follow. + +### Infragistics Javascript Excel Library +Feature | Description +---|--- +[Chart Support](#ChartSupport) | 70 new chart types +[Sparkline Support](#SparklineSupport) | 3 different types + +### igGrid +Feature | Description +---|--- +[Time Column](#TimeColumn) | New Time Column in igGrid +[Custom Editor Provider for Filter Cell](#FilteringCustomProvider) | Custom editor provider can be implemented for the filter cell in igGrid + +### igSpreadsheet +Feature | Description +---|--- +[Custom Sort Dialog](#SortDialog)| Add sort conditions to tables, worksheets and filter regions. +[Top 10 Filter Dialog](#Top10Dialog)| Filter list of numbers for top percentage. +[Filtering and Sorting Improvements](#FilteringandSortingImprovements)| New AutoFilter dropdown +[Filtering Menu](#FilteringMenu)| New Filter Context Menu +[Sorting Menu](#SortingMenu)| New Sorting Context Menu +[Deselect A Selection](#Deselect)| Deselect a range of cells. +[FormatCells Dialog](#FormatCellsDialog)| Spreadsheet FormatCells Dialog + +### igFinancialChart +Feature | Description +---|--- +[New Legend](#NewLegend)| New legend displays between the toolbar and plotting area. +[X-Axis Scale Breaks](#ScaleBreaks)| Exclude custom ranges of data. +[Callouts Annotation](#CalloutsAnnotationFinancial)| Annotate important data points. +[Crosshairs Layer](#CrosshairsLayerFinancial)| Display horizontal or vertical lines along the plot area at the location of the mouse cursor. +[Final Value Annotation](#FinalValueAnnotationFinancial)| Annotate the last data point in your data source(s). +[Tooltip Types](#TooltipTypesFinancial)| Category Tooltip & Item Tooltip + +### igCategoryChart +Feature | Description +---|--- +[Highlight Annotation](#HighlightAnnotationCategory)| Category Highlight Layer & Item Highlight Layer +[Callouts Annotation](#CalloutsAnnotationCategory)| Annotate important data points. +[Crosshairs Layers](#CrosshairsLayerCategory)| Display horizontal or vertical lines along the plot area at the location of the mouse cursor. +[Final Value Annotation](#FinalValueAnnotationCategory)| Annotate the last data point in your data source(s). +[Tooltip Types](#TooltipTypesCategory)| Category Tooltip & Item Tooltip + +### igDataChart +Feature | Description +---|--- +[Callouts Annotation](#CalloutsAnnotationDataChart)| Annotate important data points. +[Crosshairs Layers](#CrosshairsLayersDataChart)| Display horizontal or vertical lines along the plot area at the location of the mouse cursor. +[Final Value Annotation](#FinalValueAnnotationDataChart)| Annotate the last data point in your data source(s). + +## Infragistics Javascript Excel Library + +### + +![](images/whats_new_excel_charts.png) + +Time to bring out your inner executive with the addition of charting support in the Excel Library. With support for 70 different chart types, you can now create dashboard reports that visualize data in a clear and easily digestible manner. This brand-new Excel Charting API gives you complete control over how your charts are rendered with the ability to include a legend, a title, axis titles, and a vast number of options for styling such as gridlines, tick marks, colors and more. You have the full power of Excel charts at the tips of your fingers. The best part, you don’t even need to have MS Excel installed! + +Adding a chart to an Excel document is easy. Using the Infragistics Excel Library, create or get an instance of the Worksheet object, and then simply call the AddChart method on the Shapes collection. Supply the type of chart you wish to create (choose from 70), provide the size and location of the chart, and then provide the data and any other formatting settings you want to apply to the chart. + +#### Related Topic +- [Adding a Chart to a Worksheet](../../09_JavaScript Excel Library/01_Using/JavaScript_Excel_Library_Worksheet_Charts.mdx) + +### Sparkline Support + +![](images/whats_new_excel_sparklines.png) + +A sparkline is a tiny chart in a worksheet cell that provides a visual representation of data. Sparklines are used to show trends in a series of values, such as seasonal increases or decreases, economic cycles, or to highlight maximum and minimum values. Showing trends in your worksheet data can be useful, especially when you’re sharing your data with other people. + +Once you have an instance of the Infragistics Worksheet, simply call the Add method on the SparklineGroups collection. Supply the type of sparkline you wish to create (Column, Line, or Stacked), provide the cell you wish to insert the sparkline, and then provide the range of cells that represent the data the sparkline will use. + +After you have created your sparkline, the Infragistics Excel Library gives you an intuitive API that you can use to style various aspects of the sparkline to meet your visualization requirements. The API allows you to enable and control the colors of high and low points, negative points, the first point, the last point, and all markers to name a few. + +#### Related Topic +- [Working with Sparklines](../../09_JavaScript Excel Library/01_Using/JavaScript_Excel_Library_Adding_a_Sparkline_to_an_excel_worksheet.mdx) + +## igGrid + +### Time Column + +![](images/time_column.png) + +A new column type is added to the igGrid control - time column. In order to use it, it is necessary to set the column `dataType` to `time`. In this way, you can filter and update time data using the build-in time picker editor. + +### Custom Editor Provider for the Filter Cell + +Now, it is possible to create custom editor provider for the filter cell. This means that you can extend the igEditorProvider class and set your own editor to filter the igGrid content. For more information, check the sample below. + +### Sample +[Excel-style Filtering]({environment:SamplesUrl}/grid/filtering-combo-editor-provider) + +## igSpreadsheet + +### Custom Sort Dialog + +![](images/spreadsheet_sort_dialog_whats_new.png) + +Since sorting is so important in any Excel document, we added the very useful Custom Sort Dialog to give you full control over how you want to sort your Excel data. For example, if you have a Department column and an Employee column, you can first sort by Department (to group all the employees in the same department together), and then sort by name (to put the names in alphabetical order within each department). + +For more information about the Sort Dialog in the igSpreadsheet, please see the following topic: + +#### Related Topic +- [Custom Sort Dialog](igspreadsheet-sort-dialog) + +### Top 10 Filter Dialog + +![](images/whats_new_excel_top_10.png) + +When you filter a list using the Top 10 feature, only the top number or the top percent of records remain. You can also filter to display the bottom number or the bottom percent of records. For example, if you want to list the top wage earners in the company, you can filter the Salary column to display only those records with the top ten salaries. If you filter for the top ten percent of wage earners, however, your list would include only those personnel whose salaries together equaled ten percent of the total. + +Although called Top 10, you can filter for any number or percentage of items you desire. + +### Filtering and Sorting Improvements + +In 18.1, we added the AutoFilter dropdown to the spreadsheet. The dropdown had menu items for sorting ascending/descending, clearing a filter applied to the column and to apply a numeric/date/text filter. However, it didn’t have a way to apply a sort or filter based on the forecolor, fill or icon. In 18.2, that dropdown contains items to allow filtering or sorting based on the foreground, fill or icon of the cells within that column. + +### Filtering Menu + +![](images/whats_new_excel_filter_menu.png) + +### Sorting Menu + +![](images/whats_new_excel_sorting_menu.png) + +### Deselect a Selection + +Sometimes when you're selecting multiple cells or ranges in Excel, you accidentally select one or more that you didn't intend. Now you can deselect any cells within the selected range with the Deselect Feature. Pressing the Ctrl key, you can click, or click-and-drag, to deselect any cells or ranges within a selection. If you need to reselect any of those cells, continue holding the Ctrl key and reselect those cells. + +### FormatCellsDialog + +The igSpreadsheet lets you change many of the ways it displays data in a cell. For example, you can specify the number of digits to the right of a decimal point, or you can add a pattern and border to the cell. You can access and modify the majority of these settings in the Format Cells dialog box (right-click the cell and select Format Cells). + +- Number Tab + +By default, all worksheet cells are formatted with the General number format. With the General format, anything you type into the cell is usually left as-is. For example, if you type 36526 into a cell and then press ENTER, the cell contents are displayed as 36526. This is because the cell remains in the General number format. However, if you first format the cell as a Currency, then the number 36526 will be displayed as $36,526.00. + +![](images/Format_Cells_Dialog_Number.png) + +- Alignment Tab + +You can position text and numbers, change the orientation and specify text control in cells by using the Alignment tab + +![](images/Format_Cells_Dialog_Alignment.png) + +- Font Tab + +The term font refers to a typeface (for example, Arial), along with its attributes (point size, font style, underlining, color, and effects). Use the Font tab in the Format Cells dialog box to control these settings. You can see a preview of your settings by reviewing the Preview section of the dialog box. + +![](images/Format_Cells_Dialog_Font.png) + +- Border Tab + +In Excel, you can put a border around a single cell or a range of cells. You can also have a line drawn from the upper-left corner of the cell to the lower-right corner, or from the lower-left corner of the cell to the upper-right corner. You can customize these cells' borders from their default settings by changing the line style, line thickness or line color. + +![](images/Format_Cells_Dialog_Border.png) + +- Fill Tab + +Use the Fill tab in the Format Cells dialog box to set the background color of the selected cells. You can also use the Pattern list to apply two-color patterns or shading for the background of the cell. + +![](images/Format_Cells_Dialog_Fill.png) + +- Protection Tab + +The Protection tab allows you to lock your worksheet to protect your data and formulas. This option does not take effect unless you also protect your worksheet. + +![](images/Format_Cells_Dialog_Protection.png) + + +## igFinancialChart + +### New Legend + +![](images/whats_new_financial_chart_legend.png) + +The Financial Chart now comes built-in with a new legend displayed between the toolbar and plotting area. This legend show titles of the data sources and it also shows the last value and percentage change between first data item and the last data item. + +### Callouts Annotation + +![](images/whats_new_financial_chart_callouts.png) + + +With the Callouts Annotation, you can annotate important data points in Financial Chart or even customize values in callout boxes based on your logic. For example, show stock split, dividends, or calculate maximum price in your data source. + +#### Related Topic +- [Annotation and Interaction Layers](financial-chart-annotation-and-interaction-layers.html#CalloutLayer) + +### Crosshairs Layer + +![](images/whats_new_financial_chart_crosshair.png) + + +You can configure crosshairs to display as a horizontal line, vertical line or both lines at the location of the mouse cursor. In addition, the Crosshairs Annotation can show values of data points at location of mouse cursor and render these values in colored boxes over the X-Axis and Y-Axis labels. + +#### Related Topic +- [Annotation and Interaction Layers](financial-chart-annotation-and-interaction-layers.html#CrosshairLayer) + +### Final Values + +![](images/whats_new_financial_chart_final_values.png) + +In Financial Chart, you can use the Final Values annotation to show values of the last data point in your data source(s). This annotation is rendered as a colored box for each data source over the Y-Axis label. + +#### Related Topic +- [Annotation and Interaction Layers](financial-chart-annotation-and-interaction-layers.html#FinalValueLayer) + +### Tooltip Types + +![](images/whats_new_financial_chart_tooltips.png) + +The Financial Chart has a new ToolTipType property that adds two new types of tooltips: + +* Category Tooltip which renders combined tooltips for all series at a given date + +* Item Tooltip which renders an individual tooltip for each series at a given date + +#### Related Topic +- [Annotation and Interaction Layers](financial-chart-annotation-and-interaction-layers.html#CategoryTooltipLayer) + +### X-Axis Scale Breaks + +![](images/whats_new_financial_chart_scale_breaks.png) + +In Financial Chart, you can define scale breaks on X-Axis to exclude custom ranges in your data source or any day of week. For example, exclude all data items that fall on weekends. + +#### Related Topic +- [Configuring XAxis Scale Breaks](financial-chart-configuring-axis-scale-breaks.html) + +## igCategoryChart + +### Highlight Layer + +![](images/whats_new_category_chart_highlight.png) + + +The Category Chart can display two new highlight layers when a user hovers over plotted data points. + +* Category Highlight Layer renders a vertical rectangle that stretches from the start to end of the category that is closest to the mouse cursor. This rectangle is filled with semi-transparent gray color by default. + +* Item Highlight Layer renders a vertical rectangle for each data item in a category that is closest to the mouse cursor. This rectangle is filled with semi-transparent color that matches color of the series by default. + +#### Related Topics +- [Category Highlight Layer](//controls/igcategorychart/annotations-and-interactions/category-highlight-layer.mdx) +- [Item Highlight Layer](//controls/igcategorychart/annotations-and-interactions/item-highlight-layer.mdx) + +### Callouts Annotation + +![](images/whats_new_category_chart_callouts.png) + + +With the Callouts Annotation, you can annotate important data points in Category Chart or even customize values in callout boxes based on your logic. For example, calculate maximum values in your data source. + +#### Related Topic +- [Callouts Layer](//controls/igcategorychart/annotations-and-interactions/callouts-layer.mdx) + +### Crosshairs Layer + +![](images/whats_new_category_chart_crosshair.png) + + +You can configure crosshairs to display as horizontal line, vertical line or both lines at the location of the mouse cursor. In addition, the Crosshairs Annotation can show values of data points at the location of the mouse cursor and render these values in colored boxes over the X-Axis and Y-Axis labels. + +#### Related Topic +- [Crosshairs Layer](//controls/igcategorychart/annotations-and-interactions/crosshairs-layer.mdx) + +### Final Values + +![](images/whats_new_category_chart_final_value.png) + +In Category Chart, you can use the Final Values annotation to show values of the last data point in your data source(s). This annotation is rendered as a colored box for each data source over the Y-Axis labels. + +#### Related Topic +- [Final Value Layer](//controls/igcategorychart/annotations-and-interactions/final-value-layer.mdx) + +### Tooltip Types + +![](images/whats_new_category_chart_tooltip.png) + +The Category Chart has a new ToolTipType property that adds two new types of tooltips: + +* Category Tooltip which renders the combined tooltips for all series in data category + +* Item Tooltip which renders individual tooltip for each series in data category + +#### Related Topics +- [Category ToolTip Layer](//controls/igcategorychart/annotations-and-interactions/category-tooltip-layer.mdx) +- [Item ToolTip Layer](//controls/igcategorychart/annotations-and-interactions/item-tooltip-layer.mdx) + +## igDataChart + +### Callouts Annotation + +![](images/whats_new_datachart_callout.png) + +Callouts Layer is a new feature of Data Chart that you can use to annotate important data points or display their values. Callouts Layer can target multiple data series or individual data series. Also, you can customize appearance of these callout layers and bind callout labels to data items or calculate changes between consecutive data points. + +#### Related Topic +- [Callouts Layer](../../02_Controls/igDataChart/04_Configuring/04_Hover Interactions/06_HoverInteractions_Callout_Layer.mdx) + +### Crosshairs Layer + +![](images/whats_new_datachart_crosshair.png) + +In Crosshair Layer has a new annotation feature can now show values of data points at the location of the mouse cursor and render these values in colored boxes over the X-Axis and Y-Axis labels. + +#### Related Topic +- [Crosshair Layer](../../02_Controls/igDataChart/04_Configuring/04_Hover Interactions/03_HoverInteractions_Crosshair_Layer.mdx) + +### Final Values Annotation + +![](images/whats_new_datachart_final_value.png) + +Final Values Layer is a new annotation layer that shows values of the last data point in your data source(s). This annotation is rendered as a colored box for each data source over the Y-Axis labels + +#### Related Topic +- [Final Value Layer](../../02_Controls/igDataChart/04_Configuring/04_Hover Interactions/05_HoverInteractions_Final_Value_Layer.mdx) \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/08-whats-new-in-2018-volume1.mdx b/docs/jquery/src/content/en/topics/whats-new/revision-history/08-whats-new-in-2018-volume1.mdx new file mode 100644 index 0000000000..c7f11b4142 --- /dev/null +++ b/docs/jquery/src/content/en/topics/whats-new/revision-history/08-whats-new-in-2018-volume1.mdx @@ -0,0 +1,151 @@ +--- +title: "What's New in 2018 Volume 1" +slug: whats-new-in-2018-volume1 +--- +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# What's New in 2018 Volume 1 + +This topic presents the controls and the new and enhanced features for the {environment:ProductFamilyName}™ 2018 Volume 1 release. + + +### Overview + +The following table summarizes what’s new in 2018 Volume 1 and additional details follow. + +### Spreadsheet +Feature | Description +---|--- +[Sorting](#SpreadSheetSorting)| Worksheet Level Sorting. +[Conditional Formatting](#ConditionalFormattingSpreadsheet)| Support for displaying Worksheet conditional formats. +[Worksheet Filtering](#WorksheetFiltering)| Worksheet Level Filtering. +[Table Improvements](#TableImprovments)| Many new improvements. + +### Excel Engine +Feature | Description +---|--- +[Conditional Formatting](#ConditionalFormattingExcel)| Support for creating, saving, and loading conditional formats. +[Worksheet Filtering and Sorting](#ExcelWorksheetFiltering)| Worksheet Level Filtering and Sorting. +[More Excel function support](#ExcelFunctions)| More supported Excel functions. + +### igFinancialChart + +Feature | Description +---|--- +[Financial Chart](#financialChart)| A new financial chart is added this release. + +### igTimePicker + +Feature | Description +---|--- +[Time Picker](#timepicker)| The igTimePicker control is an editor with time-only input and a drop-down with listed hours:minutes values. + +### igUpload + +Feature | Description +---|--- +[Use Single Request to Upload Multiple Files](#useSingleRequest)| Allows the control to upload multiple files using a single HTTP request. + +## Excel + +### Support for creating, saving, and loading conditional formats +Conditional formatting allows you to automatically apply formatting — such as colors, icons, and data bars — to one or more cells based on the cell value. To do this, you’ll need to create a conditional formatting rule. For example, a conditional formatting rule might be if the value is less than $2000, color the cell red. By applying this rule, you would be able to quickly see which cells contain values less than $2000. + +#### Related Topic +- [Excel Engine Conditional Formatting](../../09_JavaScript Excel Library/01_Using/JavaScript_Excel_Library_Conditional_Formatting.mdx) + +### Worksheet Level Filtering and Sorting +We already had support in our engine for sorting and filtering within a WorksheetTable. Excel also has the ability to define a single area within the worksheet outside of a table that you can do sorting and filtering within and you can also define one other area within a worksheet that is sorted. Therefore, we added support for these worksheet level sorting and filtering operations to our Excel Engine. In addition we made the icon sorting/filtering classes public. Previously these were internal because the only way to specify an icon is via an iconset conditional format and we didn’t support conditional formatting. + +#### Related Topics +- [Excel Engine Worksheet Filtering](javascript-excel-library-worksheet-level-filtering.html) +- [Excel Engine Worksheet Sorting](javascript-excel-library-worksheet-level-sorting.html) + +### More Excel function support + +We added over 100 new functions for Excel. + +- [Supported Functions for the Infragistics Excel Engine](ExcelEngine-List-of-Supported-Built-in-Functions) + +- [Supported Functions for the JavaScript Excel Library](JavaScript-Excel-Library-List-of-Supported-Built-in-Functions.html) + +## Spreadsheet + +### Spreadsheet Worksheet Level Sorting + +In this release, for the igSpreadsheet control, we added sorting to the Worksheet object. + +You can sort columns or rows in ascending or descending order. + +#### Related Topics +[igSpreadsheet Sorting](javascript-excel-library-worksheet-level-sorting.html) + +### Spreadsheet Conditional Formatting + +With the addition of the conditional formatting feature in the Excel Engine, we can now leverage this in the spreadsheet. The spreadsheet supports rendering all conditional formatting features available in Microsoft Excel. Microsoft Excel has several predefined styles — or presets — you can use to quickly apply conditional formatting to your data. They are grouped into three categories: +- Data Bars are horizontal bars added to each cell, much like a bar graph. +- Color Scales change the color of each cell based on its value. Each color scale uses a two- or three-color gradient. For example, in the Green-Yellow-Red color scale, the highest values are green, the average values are yellow, and the lowest values are red. +- Icon Sets add a specific icon to each cell based on its value + +#### Related Topic +- [Conditional Formatting](//controls/igspreadsheet/conditional-formatting.mdx) + +### Worksheet Level Filtering + +By filtering information in a worksheet, you can find values quickly. You can filter on one or more columns of data. With filtering, you can control not only what you want to see, but what you want to exclude. You can filter based on choices you make from a list, or you can create specific filters to focus on exactly the data that you want to see. When you filter data, entire rows are hidden if values in one or more columns don’t meet the filtering criteria. You can filter on numeric or text values, or filter by color for cells that have color formatting applied to their background or text. +Filtering options are available on the context menu of cells in the igSpreadsheet. After applying a filter, users can select the Custom Filter…​ option in the filter dropdown to open a dialog that has even more filtering options. + +#### Related Topic +- [Conditional Formatting](//controls/igspreadsheet/conditional-formatting.mdx) + +### AutoFilter + +The headers of a WorksheetTable and the header cells of the worksheet level filtering region will display a dropdown button that displays the filter related menu. The buttons show the sort and filter state and the tooltip displays a friendly description of the filter for that column. The menu displays various options for sorting and filtering. The filter options displayed are dependent on the data types in the column as they are in excel. So you’ll see one of the following: +- Text Filters +- Number Filters +- Date Filters + +### Many new improvements + +#### Copy/Paste +Tables will now be copied when the source selection encompasses the entire table. So select an entire table (e.g. click in a cell, press ctrl+a two times), copy it to the clipboard and then paste elsewhere and a new copy of that table is created. Pasting within a WorksheetTable will automatically expand the table to encompass the area of the paste. + +#### Editing +Typing/editing immediately adjacent to the bottom/right edge of a WorksheetTable will expand the table (in a separate undoable operation similar to what Excel does). + +#### Tab Navigation +Tab Navigation within a table will navigate within the table wrapping to the next/previous row. Similar to Excel the table will also be automatically expanded when tabbing from the last visible cell of the table. + +#### Total Row Formulas +In Excel when a cell in total row of a table is active, a dropdown button is displayed that lets you choose a common formula for a table. We differ from Excel in that they include an option to show another dialog for other formulas but it’s still useful without that. It can be shown by clicking the dropdown button or pressing Alt+Down when the cell is active. + +#### Context Menu Improvements +Additional context menu items were added. This includes menu items for inserting and adding rows and columns to the table, selecting the table row/column, toggling the total row, converting the table to a range, etc. +The table cell context menu is similar to the cell context menu except it is displayed when the active cell is part of a WorksheetTable. That menu also has a number of new commands that relate to affecting the table. Note there is now an ActiveTable exposed as well when the ActiveCell is part of a table. + +#### List Validation +In Excel you can define a special type of data validation called a list data validation that either contains an explicit list of values or points to a range of cells that contains the values. There is an option on that validation for whether to show a cell dropdown. The data validation class has been in our excel engine for a long time and the spreadsheet has honored using the validation during editing for a while now too but we never showed a list so the end users had to know the list of valid values. Now we support showing a dropdown button (when the ShowDropdown is true) that will display a drop down list of the values. It can be shown by clicking the dropdown button or pressing Alt+Down when the cell is active. + +#### Cell Dropdown +There are 2 ways to show the Cell Dropdown. One is via the context menu for a cell using the Pick From Drop-down List… item and the other is by pressing Alt+Down. This displays a dropdown of the text/string values immediately above and below the active cell. So you’re not explicitly defining the contents of the list like you do with a list data validation – it’s implicitly populated based on the cells above/below in the same manner as Excel. Note igSpreadsheet differs from Excel in that this dropdown will not be shown while in edit mode. As with Excel it ignores numerical values, stops at blanks and table boundaries, etc. + +## igFinancialChart +The igFinancialChart is a lightweight, high-performance chart. This chart can be easily configured to display financial data using an extremely simple and intuitive API. All you need to do is bind your data (a collection or a collection of collections) and the chart takes care of everything else. The chart offers multiple ways for the user to visualize and interpret the data, including several display modes for price and volume, and many financial indicators. The chart also makes use of label formatting to give the data context. + +#### Related Topic +- [Financial Chart](financial-chart-overview.html) + +## igTimePicker +The igTimePicker control allows you to have an editor with time-only input and a drop-down with listed hours:minutes values. By default, the listed time values are with 30 minutes delta. The igTimePicker input and display format are configurable. By default, the control uses a 12-hour format. + +#### Related Topic +- [igTimePicker Overview](//controls/igeditors/igtimepicker/overview.mdx) + +## igUpload + +### Use Single Request to Upload Multiple Files + +The option is used to configure the multiple files upload process. + +#### Related Topics +- [Configuring igUpload](../../02_Controls/igUpload/01_Working with igUpload/00_igUpload_Configuring_igUpload.mdx) \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/09-whats-new-in-2017-volume2.mdx b/docs/jquery/src/content/en/topics/whats-new/revision-history/09-whats-new-in-2017-volume2.mdx new file mode 100644 index 0000000000..5c7c7bd079 --- /dev/null +++ b/docs/jquery/src/content/en/topics/whats-new/revision-history/09-whats-new-in-2017-volume2.mdx @@ -0,0 +1,306 @@ +--- +title: "What's New in 2017 Volume 2" +slug: whats-new-in-2017-volume2 +--- +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# What's New in 2017 Volume 2 + +This topic presents the controls and the new and enhanced features for the {environment:ProductFamilyName}™ 2017 Volume 2 release. + + +### Overview + +The following table summarizes what’s new in 2017 Volume 2 and additional details follow. + +Feature | Description +---|--- +[New bundled files](#bundledFiles)| New bundled files for excel, spreadsheet and scheduler. +[New Localization and Globalization settings](#localization) | Globalization and Localizations options can now be set for all localizable components, either globally (for all controls on the page) or per control both on initialization or runtime. +.NET Core 2.0 support | IgniteUI MVC wrappers are now compatible with .NET Core 2.0 and Razor Pages. + +### Spreadsheet +Feature | Description +---|--- +[Editing](#spreadsheetEditing)| Editing of spreadsheet content. +[MVC Wrapper](#spreadsheetMVCWrapper)| MVC wrapper for the spreadsheet control. + +### Editors + +Feature | Description +---|--- +[Suppress Keyboard](#suppressKeyboard)| Prevents onscreen keyboard from showing when the dropdown button is clicked/tapped. + +### igDateEditor/igDatePicker + +Feature | Description +---|--- +[Spin Delta as Object](#spinDeltaObject)| Spin delta can be configured as an object, which defines specific values for each time period. + +### igValidator + +Feature | Description +---|--- +[Execute all rules](#execute-all-rules)| New option allows multiple rules to run and display multiple error messages. + +### igShapeChart + +Feature | Description +---|--- +[New control igShapeChart](#igshapechart-control)| New lightweight, highly performant chart. + + +### igDataChart + +Feature | Description +---|--- +[New Axis TimeXAxis](#time-x-axis)| New axis type for igDataChart. +[New Series Types](#new-series)| More series types are available in the igDataChart now. + +### igGrid + +Feature | Description +---|--- +[Physical Cell Merging](#cell-merging) | The igGrid Cell Merging feature now supports physical cell merging. +### igScheduler +Feature | Description +---|--- +[Week View](#weekView)| Visualizing the activities by rendering them in a vertical list with time slots.| +[Day View](#dayView)| Visualizing the activities by rendering them in a vertical list with time slots. The time slots' duration can be configured.| +[Recurrent Activity](#recurrentActivity)| Used when you need to have repetitions of an activity following a specific recurrence pattern (for example each day at a specific hour or each month at a specific date). +[Scheduler MVC wrapper](//controls/igscheduler/configuring/04igscheduler-configure-asp-net-mvc.mdx) | Build ASP.NET MVC wrapper for `igScheduler`. + + +## General + +### New bundled files +New bundled files for excel, spreadsheet and scheduler have been included in 17.2 release. You can use them instead of defining individual required resources, or instead of using the igLoader. In order to run excel, spreadsheet or scheduler, it is needed to define the following bundled resources: + +igGrid excel exporting using igExcel +``` + + + + +``` + +igSpreadsheet +``` + + + + +``` + +igScheduler +``` + + + +``` +### New Localization and Globalization settings + +The following new options and methods have been introduced in order to allow setting and/or changing at runtime the current language/regional for all localizable components on the page or per control. + +#### Global settings and APIs +##### settings + +Option Name | Description| Default value +------------|----------- |-------------- +$.ig.util.language | Gets/Sets global language used for all controls on initialization. | en +$.ig.util.regional | Gets/Sets global regional used for all controls on initialization. | en-US + +##### APIs + +Method Name | Description +------------|----------- +$.ig.util.changeGlobalLanguage | Changes the language for all controls on the page. +$.ig.util.changeGlobalRegional | Changes the regional for all controls on the page. + + +#### Control specific settings + +Option Name | Description| Default value +-------------|------------| ------------- +language | Sets/Gets the locale language setting for the widget.| en +regional | Sets/Gets the regional setting for the widget. | en-US +locale | Sets/Gets the locale setting for the widget. | null + +## Spreadsheet + +### Editing of the spreadsheet content + +Version 17.2 of the product adds support for editing of the spreadsheet's cells, extending the inaugural features of the Spreadsheet control. There are several new API events, methods and options that can be used when manipulating spreadsheet content. + +New events: +- - Invoked when the Spreadsheet is about to start in-place editing of the . +- - Invoked when the Spreadsheet has started in-place editing of the . +- - Invoked when the Spreadsheet is about to end the in-place editing of the . +- - Invoked when the Spreadsheet has ended the in-place editing of the . +- - Invoked when the Spreadsheet is exiting edit mode and the new value for the is not valid based on the criteria of that cell's . + + +New methods: +- - Indicates if the control is currently editing the value of the . +- - Returns an enumeration used to indicate the current edit mode state. + +New options: +- - Indicates whether a fixed decimal place is automatically added when a whole number is entered while in edit mode. +- - Number of decimal places by which a whole number typed in during edit mode should be adjusted. + +#### Related Topics +- [igSpreadsheet Overview](//controls/igspreadsheet/igspreadsheet-overview/overview.mdx) +- [Editing API (igSpreadsheet)](//controls/igspreadsheet/igspreadsheet-overview/editing.mdx) + +#### Related Samples +- [Overview]({environment:SamplesUrl}/spreadsheet/overview) +- [View Configuration]({environment:SamplesUrl}/spreadsheet/create-view-save) +- [Import Data From Excel File]({environment:SamplesUrl}/spreadsheet/loading-data) + +## Editors + +### Suppress Keyboard + +The option prevents the onscreen keyboard (if available on device) to be shown when the dropdown button is clicked/tapped. This option prevents initial focus or removes it when the drop button is clicked/tapped. + +## igDateEditor/igDatePicker + +### Spin Delta as Object + +The option can be configured as an object, which defines specific values for each time period. +Accepted values for client-side widget's deltas are positive integer numbers, and the fractional portion of floating point numbers is ignored. +Accepted values for MVC wrapper's deltas are integer numbers. + +The option can accept the following format: + +``` +$("#editor").igDateEditor({ + value: new Date(2017, 11, 8, 1, 1, 1), + dateInputFormat: "dateTime", + spinDelta: { + year: 4, + month: 3, + day: 10, + hours: 12, + minutes: 15, + seconds: 10, + milliseconds: 100 + } +}); +``` + +In MVC: +``` +@(Html.Infragistics() + .DateEditor() + .Value(new DateTime(2017, 11, 8, 1, 1, 1)) + .DateInputFormat("dateTime") + .SpinDelta(deltas => + { + deltas.Year(4); + deltas.Month(3); + deltas.Day(10); + deltas.Hours(12); + deltas.Minutes(15); + deltas.Seconds(10); + deltas.Milliseconds(100); + }) + .Render()) +``` + +## igValidator + +### Execute all rules +The `igValidator` now supports a new option that allows multiple rules to run even if one has already failed and thus produce and display multiple error messages. + +![](../../controls/igvalidator/images/igValidator-execute-all-rules.png) + +Error related events like and now also provide `ui.rules` and `ui.messages` array arguments, listing in order each rule that did not pass and its message. + +With this execution process change, rules also specify if they should run for empty values and the rule is now allowed to run without one. This allows for scenarios where validation based on external factors can be applied on the empty value independently of the `required` option. + +#### Related Topics +- [Validation Rules](//controls/igvalidator/validation-rules.mdx) + + +## igShapeChart + +The `igShapeChart` is a lightweight, highly performant chart. This chart can be easily configured to display scatter X/Y points, shape files or any custom shape that you can define using an array of arrays of X/Y points. The `igShapeChart` control is using a smart data adapter in order to analyze bound data and select an appropriate visualization to render. However, it is possible to specify which chart type the `igShapeChart` will use by setting the `chartType` property to one of the following values: `Area`,`Bubble`,`Contour`,`HighDensity`,`Point`,`Line`, `Spline`, `Polygon`, or `Polyline`. + +![](../../controls/igshapechart/images/shapechart_overview.png) + +In addition, this chart can render break-even data as long as at least one data item has `FixedCost`, `VariableCost`, `SalesRevenue`, and `SalesUnits` data columns. + +![](../../controls/igshapechart/images/shapechart-breakeven-01.png) + +#### Related Topics +- [igShapeChart Overview](//controls/igshapechart/shapechart-overview.mdx) +- [Getting Started with Shapechart](//controls/igshapechart/shapechart-getting-started-with-shapechart.mdx) + +## igDataChart + +### TimeXAxis + +A new axis, time x-axis, is added to the igDataChart this release. By default, this axis will automatically apply label formats which dynamically change as the user zooms into data. In addition, axis breaks may be configured to omit dates within a range. For example, weekends can be skipped, or any range of dates considered insignificant can be skipped. The axis can also be configured to override the default label-formatting scheme for custom configuration of labels at varying visible date ranges. + +#### Related Topics +- [Configuring TimeXAxis (igDataChart)](//controls/igdatachart/configuring/configuring-timexaxis.mdx) + +### New Series Types + +The following series types can be used with the igDataChart control: + +* [Scatter Area Series](../../02_Controls/igDataChart/04_Configuring/05_Triangulation Series/00_TriangulationSeries_Area_Series.mdx) +* [scatter Contour Series](../../02_Controls/igDataChart/04_Configuring/05_Triangulation Series/01_TriangulationSeries_Contour_Series.mdx) +* [scatter Polyline Series](../../02_Controls/igDataChart/04_Configuring/06_Shape Series/01_ShapeSeries_Polyline_Series.mdx) +* [scatter Polygon Series ](../../02_Controls/igDataChart/04_Configuring/06_Shape Series/00_ShapeSeries_Polygon_Series.mdx) + +![](images/chart_scatter_series.png) + +## igScheduler + +### Week View +This view is visualizing the activities by rendering them in a vertical list with time slots. It is possible to show all seven week days or only the working days by using `weekViewDiplayMode` property. +Configuration to show all 24 hours or only the working hours is also possible. + +### Day View +Visualizing the activities by rendering them in a vertical list with time slots. Each activity occupies only the time slots between its start and end time. +This view has the ability to show up to 7 days. You can configure the day view to display all 24 hours or only the working hours. + +### Recurrent Activity +The activity recurrence is used when you need to have repetitions of an activity following a specific recurrence pattern (for example each day at a specific hour or each month at a specific date). + +## igGrid + +### igGrid Physical Cell Merging + +The igGrid Cell Merging feature now supports physical cell merging. The merging mode is specified via the option. + +**Enabling physical merging** + +```js +$("#grid").igGrid({ + features: [ + { + name: "Sorting" + }, + { + name: "CellMerging", + mergeType: "physical" + } + ] +}); + +``` +With this mode the cell DOM elements are physically merged into one cell with a corresponding rowSpan attribute as opposed to the "visual" merge mode where the DOM cells retain their DOM structure and are visually merged via css. + +The following additional options have been added in order to allow further customization of the merging behavior: + + Option Name | Description | Default value +-------------|-------------|--------------- + | Defines when merging should be applied. | "sorting" + | Defines the rules merging is based on. | "duplicate" + | A list of column settings that specifies hiding options on a per column basis. | [ ] + +#### Related Topics +- [Cell Merging Overview (igGrid)](../../02_Controls/igGrid/03_Features/07_Cell Merging/00_igGrid_CellMerging_Overview.mdx): This topic explains the `igGrid` control’s Cells Merging feature and its functionality. It contains code examples demonstrating how to enable and configure cell merging in the `igGrid`. \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/10-whats-new-in-2017-volume1.mdx b/docs/jquery/src/content/en/topics/whats-new/revision-history/10-whats-new-in-2017-volume1.mdx new file mode 100644 index 0000000000..56fdd22d57 --- /dev/null +++ b/docs/jquery/src/content/en/topics/whats-new/revision-history/10-whats-new-in-2017-volume1.mdx @@ -0,0 +1,336 @@ +--- +title: "What's New in 2017 Volume 1" +slug: whats-new-in-2017-volume1 +--- +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# What's New in 2017 Volume 1 + +This topic presents the controls and the new and enhanced features for the {environment:ProductFamilyName}™ 2017 Volume 1 release. + + +## What’s New Summary + +The following summarizes what’s new in 2017 Volume 1. Additional details follow. + +### igSpreadsheet + +Feature | Description +---|--- +[New control igSpreadsheet](#spreadsheet)| The igSpreadsheet is a jQuery widget that visualize excel documents in all modern browsers. + +### igScheduler + +Feature | Description +---|--- +[New control igScheduler](#scheduler)| The igScheduler is a jQuery widget that provides a common scheduling solution for presenting and managing time periods and the associated activities. + +### igDataSource + +Feature | Description +---|--- +[Filter By Text](#filterbytext)| The igDataSource component provides a way to search for a specific words or phrases in all of its fields. + +### igGrid + +Feature | Description +---|--- +[Date Handling](#griddatehandling)| The igGrid provides a way to control the display and edit of date values for clients in different time zones. +[More Flexible Caption](#gridcaption)| igGrid's new caption is designed to be more flexible and customizable. +[GroupBy Summaries](#groupSummaries)| The GroupBy feature now allows a summary row to be displayed below and/or above each group data island. + +### igCombo + +Feature | Description +---|--- +[Knockout Disable Handler](#comboKnockoutDisable)| Knockout Disable binding handler has been implemented for the combo. + +### Editors + +Feature | Description +---|--- +[Knockout Disable Handler](#editorsKnockoutDisable)| Knockout Disable binding handler has been implemented for the editors. + + +### igNumericEditor + +Feature | Description +---|--- +[Round Decimals](#roundDecimals)| The numeric editor introduces new option that allows to round values with decimal point. + +### igDateEditor/igDatePicker + +Feature | Description +---|--- +[Date Handling](#dateHandling)| New editors' settings are needed when handling date transfers. + +### igDatePicker + +Feature | Description +---|--- +[Date Picker Options MVC wrapper](#pickerOptionsWrapper) | When using DatePicker MVC wrapper, now additional wrapper for the date picker options is available. + +### igDataChart + +Feature | Description +---|--- +[Zoom Enabling Options](#zoomEnablingProperties) | New options called and have been added which control whether zooming is allowed on either the horizontal or vertical axis. + +### igMap + +Feature | Description +---|--- +[OpenStreet Tile Path](#tilePathProperty) | The option called has been added to the option for the OpenStreet tile source. + +### igRadialGauge, igLinearGauge, igBulletGraph +Feature | Description +---|--- +[Design Changes](#gaugeDesignChanges) | The visuals for the gauges have been updated. + + +## igSpreadsheet + +In version 2017.1 we introduce the igSpreadsheet control. It is a jQuery widget that visualize excel documents in all modern browsers. For MVP version, the control has the following areas and features available: + +- Configurable component areas + - Formula Bar + - Context Menu + - Tab Bar Area + - Headers + +- Control manipulations + + - Selection + - Resizing + - Hiding + - Freezing Panes + - Splitting Panes + - Zooming + +- Data manipulations + - Inserting and Deleting Cells, Columns and Rows + - Undo and Redo + - Copy and Paste + - Data Validation + - Worksheets + - Hyperlinks + +- Visual configurations + - Gridlines + - Cell Alignment + - Cell Borders + - Font Styles + + +![](images/spreadsheet.png) + +#### Related Topics +- [igSpreadsheet Overview](//controls/igspreadsheet/igspreadsheet-overview/overview.mdx) +- [Adding igSpreadsheet](//controls/igspreadsheet/adding-igspreadsheet.mdx) +- [Configuring igSpreadsheet](//controls/igspreadsheet/configuring-igspreadsheet.mdx) + + +#### Related Samples +- [Overview]({environment:SamplesUrl}/spreadsheet/overview) +- [View Configuration]({environment:SamplesUrl}/spreadsheet/create-view-save) +- [Import Data From Excel File]({environment:SamplesUrl}/spreadsheet/loading-data) + +## igScheduler +### New Control + +The `igScheduler`™ control provides a common scheduling solution for presenting and managing time periods and the associated activities. + +### Supported features: +- Creating, editing and deleting of appointment. + - Configurable appointments display mode in the month view calendar (indicator or event subject). + - Assigning appointments to color themed resources. +- Using different views (month and agenda view). + - Month and agenda views switching support + - Agenda view in month view support. + - Configurable agenda view days display range. +- All day events supported. +- Desktop, tablet and phone layout. +- Responsive design. + - Desktop environment optimized UI. +- Resources color scheme support. +- Keyboard navigation support. +- Localization support. + +![](../../controls/igscheduler/images/scheduler.PNG) + +#### Related Topics +- [igScheduler Overview](//controls/igscheduler/overview.mdx) +- [Configuring igScheduler](//controls/igscheduler/configuring/configuring.mdx) +- [Adding igScheduler](//controls/igscheduler/adding-igscheduler.mdx) +- [Configuring igScheduler](//controls/igscheduler/configuring/configuring.mdx) +- [Styling igScheduler](//controls/igscheduler/using-themes.mdx) +- [Accessibility Compliance (igScheduler)](//controls/igscheduler/accessibility-compliance.mdx) +- [Known Issues and Limitations (igScheduler)](//controls/igscheduler/known-limitations.mdx) + +#### Related Samples + +- [igScheduler Agenda View]({environment:SamplesUrl}/scheduler/agenda-view) +- [igScheduler Appointment Indicators]({environment:SamplesUrl}/scheduler/appointment-indicators) + +## igDataSource + +### Filter By Text + +The igDataSource component provides a way to search for a specific words or phrases in all of its fields via the method. + +#### Related Topics +- [igDataSource Overview](//data-sources/igdatasource/igdatasource-overview.mdx) + + +#### Related Samples +- [Simple Filtering]({environment:SamplesUrl}/grid/simple-filtering) + +## igGrid + +### Date Handling + +The now have new function. It affects only the dates serialization. Dates are now serialized as [UTC ISO 8061](https://en.wikipedia.org/wiki/ISO_8601#UTC) string instead of using the local time and zone values. + +In order to handle the displaying of the dates a new option is introduced in the grid column's definition and it works only for columns of type `date`. + +#### Related Topics +- [Migrating enableUTCDates option after 17.1](//controls/iggrid/migrating-enableutcdates-option-in-17-1.mdx) + + +### Grid's Caption + +The igGrid's caption now provides the ability to render HTML elements in it in order to give the user more customizability and flexibility. It also comes with useful events for full control of its initialization. + +### GroupBy Summaries + +The GroupBy Summaries feature allows an additional summary row to be displayed below and/or above each group data island that displays summary information for the data columns in that island. The summary row is visible only when the related group is expanded. + +![](images/group-summaries.png) + +#### Related Topics +- [GroupBy Summaries Feature Overview (igGrid)](//controls/iggrid/features/columns/grouping/groupby-summaries.mdx) + +#### Related Samples +- [Grouping with summaries]({environment:SamplesUrl}/grid/grouping) + + +## igCombo + +### Knockout Disable Handler + +If a developer wants to apply the Knockout [`disabled`](http://knockoutjs.com/documentation/disable-binding.html) binding handler to the combo control, it will not work and will not automatically enables/disables it. This is because combo has a special logic that handles enabling/disabling of the control. For that purpose additional `igComboDisable` binding handler is created, which implements the behavior, expected, when using the Knockout `disabled` handler. + +#### Related Topics +- [Configuring Knockout Support (igCombo)](../../02_Controls/igCombo/04_Configuring/04_igCombo_KnockoutJS_Support.mdx#) + +## Editors + +### Knockout Disable Handler + +If a developer wants to apply the Knockout [`disabled`](http://knockoutjs.com/documentation/disable-binding.html) binding handler to the editors, it will not work and will not automatically enables/disables them. This is because editors have a special logic that handles enabling/disabling of the control. For that purpose additional `igEditorDisable` binding handler is created, which implements the behavior, expected, when using the Knockout `disabled` handler. + +#### Related Topics +- [Configuring Knockout Support (Editors)](../../02_Controls/igEditors/Config/02_Configuring Knockout Support (Editors).mdx) + + +## igNumericEditor + +### Round Decimals + +In previous versions of the product, if user sets or enters a value in a numeric editor that has more decimal places than the one defined in the `maxDecimals` option, then the value was truncated. E.g. If an editor with defined 'maxDecimals' to `3`, receives a value `123.4567`, then it will be truncated to `123.456`. With version 17.1 of the product, a new option is introduced, which is enabled by default and rounds the numeric values, using the JavaScript `Math.round()` function. This means that the value of `123.4567` will be rounded and displayed in the editor as `123.457`. If the is disabled, then it will truncate the value and will show it as `123.456`, like in the old versions. + +## igDateEditor/igDatePicker + +### Date Handling + +When the dates in the editors are transferred from the client to the server аnd vice versa, the options and can be used to configure the editоrs and to properly handle date transfer. + +#### Related Topics +- [Migrating date handling in 17.1](//controls/igeditors/igdateeditor/migrating-date-handling-in-17-1.mdx) +- [{environment:ProductName} controls in different time zones](//general-and-getting-started/using-igniteui-controls-in-different-time-zones.mdx) + +## igDatePicker + +### Date Picker Options MVC wrapper + +The DatePicker MVC wrapper is extended to allow the definition of the date picker options, using additional MVC wrapper. The new wrapper contains all the jQuery UI datepicker options that can be applied to our igDatePicker. Here is an example of how it can be configured in MVC: + +``` +@(Html.Infragistics() + .DatePicker() + .DropDownAnimationDuration(1000) + .DatePickerOptions(options => { + options.DefaultDate("+8"); + options.MinDate("-5d"); + options.MaxDate("+10d"); + + options.FirstDay(FirstWeekDay.Monday); + options.ShowWeek(true); + + options.ShowOtherMonths(true); + options.SelectOtherMonths(true); + + options.ChangeMonth(true); + options.ChangeYear(true); + options.AddClientEvent("onChangeMonthYear", "onChangeMonthYearHandler"); + + options.ShowButtonPanel(true); + options.GoToCurrent(true); + + options.ShowAnim(AnimationEffect.Show); + + options.AddClientEvent("onSelect", "onSelectHandler"); + options.AddClientEvent("onClose", "onCloseHandler"); + }) + .Render()) +``` + +## igDataChart +### Zoom Enabling Options + +New options called and were added, deprecating the existing and options respectively. The older options are being left as-is in this release for backwards compatibility with existing applications. + +## igMap +### OpenStreet Tile Path + +Open Street Map can now accept custom tile source by re-purposing the option off of the object. + +**In JavaScript** + + $(function () { + $("#map").igMap({ + width: "700px", + height: "500px", + windowRect: { left: 0.1, top: 0.1, height: 0.7, width: 0.7 }, + // specifies imagery tiles from OpenStreetMap + backgroundContent: { + type: "openStreet", + tilePath: "tile.openstreetmap.org/{Z}/{X}/{Y}.png" + } + }); + }); + +Before this change was only relevant to the Bing Map. After the change it is applicable to the Open Street Map as well. + +Omitting the protocol specifier (*http:* or *https:*) in the URL allows for the control to detect and use the protocol of the hosting web site. It is also possible to force the control into desired protocol by explicitely setting it in the *tilePath* option: + +**In JavaScript** + + tilePath: "https://tile.openstreetmap.org/{Z}/{X}/{Y}.png" + +*{Z}*, *{X}*, and *{Y}* tokens are replaced during tile rendering by Zoom, Horizontal location, and Vertical location of each tile respectively. + + +## igRadialGauge, igLinearGauge, igBulletGraph +### Design Changes + +The igRadialGauge, igLinearGauge and igBulletGraph have new styling provided when you include `infragistics.theme.css`. The new styling looks as follows: + +#### igRadialGauge: +![](images/radialgauge_igtheme_17_1.png) + +#### igLinearGauge: +![](images/lineargauge_igtheme_17_1.png) + +#### igBulletGraph: +![](images/bulletgraph_igtheme_17_1.png) \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/11-whats-new-in-2016-volume2.mdx b/docs/jquery/src/content/en/topics/whats-new/revision-history/11-whats-new-in-2016-volume2.mdx new file mode 100644 index 0000000000..8ab42a26b4 --- /dev/null +++ b/docs/jquery/src/content/en/topics/whats-new/revision-history/11-whats-new-in-2016-volume2.mdx @@ -0,0 +1,581 @@ +--- +title: "What's New in 2016 Volume 2" +slug: whats-new-in-2016-volume2 +--- +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +#What's New in 2016 Volume 2 + +This topic presents the controls and the new and enhanced features for the {environment:ProductFamilyName}™ 2016 Volume 2 release. + + +##What’s New Summary + +The following summarizes what’s new in 2016 Volume 2. Additional details follow. + +### General + +Feature | Description +---|--- +{environment:ProductName} OSS | A big part of the {environment:ProductName} toolset is now open source. Checkout the repository on [GitHub](https://github.com/IgniteUI/ignite-ui)| +{environment:ProductName} directives for Angular 2 (RTM) | {environment:ProductName} widgets have component wrappers for Angular 2. For detailed information visit [{environment:ProductName} Angular 2 GitHub](https://github.com/IgniteUI/igniteui-angular-wrappers) page.| +{environment:ProductName} Components for React (CTP) | {environment:ProductName} widgets have component wrappers for [React](https://facebook.github.io/react/). For detailed information visit [{environment:ProductName} Components for React](https://github.com/IgniteUI/igniteui-react) page.| +ASP.NET Core 1.0 MVC Helpers | {environment:ProductName} MVC Helpers now support ASP.NET Core 1.0. Checkout the [Using {environment:ProductName} controls in ASP.NET Core 1.0](Using-IgniteUI-Controls-in-ASP.NET-Core-1.0-project.html) topic.| +ASP.NET Core 1.0 MVC Tag Helpers | {environment:ProductName} now provides Tag Helpers for ASP.NET Core 1.0. Checkout the [Using {environment:ProductName} Tag Helpers](Using-Ignite-UI-Tag-Helpers.html) topic.| +[New Javascript file breakdown](#javascript-file-breakdown) | The goal is to reduce the amount of code required in order to load a specific feature. | +DPI Scaling | High DPI Scaling is enabled by default now which makes the components look much sharper and crisper than before. Components that have the DPI Scaling by default now are - igDataChart, igPieChart, igFunnelChart, igDoughnutChart, igRadialGauge, igLinearGauge, igBulletGraph, igSparkline, igRadialMenu. | +Standard moduling support | All of IgniteUI JavaScript files contain AMD module definitions. Therefore these files can be loaded using standard module loaders such as Require.JS, System.JS etc.| +[{environment:ProductName} NuGet packages](#ignite-ui-nuget-packages) | New {environment:ProductName} NuGet packages are available, including a package for creating .NET Core applications. | + + +### igCategoryChart + +Feature | Description +---|--- +[New Control](#igcategorychart)| With a simplified API this control can be easily configured to display category data. | + +### igDataChart + +Feature | Description +---|--- +[New property](#new-chart-property) | A new property ConsolidatedColumnVerticalPosition is added, which determines the positioning logic to use for columns which have been consolidated into a single visual element. | +[Performance Enhancements](#performance-enhancements)| In the Infragistics 2016 volume 2 release, we significantly improved the performance of the igDataChart control. | +[Design Changes](#design-changes) | We redesigned the defaults of the igDataChart, igPieChart, igFunnelChart, igDoughnutChart, igRadialGauge, igLinearGauge, igBulletGraph, and igSparkline control.| +[File Size Reduction](#file-size-reduction) | The size has been reduced for loading a category chart, and we also modularized the igDataChart control.| + +### igDataSource + +Feature | Description +---|--- +New grouping functionality| The igDataSource now handles grouping and persists the grouping expand and collapse state. | +Sorting performance optimizations | Local sorting is now up to 10x faster. | + +### igFunnelChart + +Feature | Description +---|--- +[Label Styling](#funnel-styling) | You can now specify the color of the funnel chart's inner and outer labels. + +### igGrid + +Feature | Description +---|--- +[Group By Improvements](#groupby-improvements) | Group By now features improved Virtualization support and APIs to expand/collapse rows. | +Sorting performance optimizations | Local sorting is now up to 10x faster. | +[Inline editing for Multi-Row Layout](#mrl-inline-editing)| The Multi-Row Layout feature now supports inline row and cell editing. | +Multi-Column Headers collapsible column groups | Collapsible Column Groups is a feature that provides an option to collapse/expand a Multi-Column Header to a smaller set of data. | +Column setter | Column collection now can be changed at runtime. | +igGrid Modal Dialog extensibility| Grid features that include dialogs (Updating, Filtering, Sorting, Hiding, GroupBy, Column Moving) now add a new `dialogWidget` option allowing for custom dialog implementations - [view sample]({environment:SamplesUrl}/grid/custom-modal-dialog) and [topic](Extending_igGrid_Modal_Dialog.html). | +Binding Real-Time Data sample| A new sample is added that demonstrates binding igGrid to real-time data - [view sample]({environment:SamplesUrl}/grid/binding-real-time-data). | +Performance Options sample| A new sample is added that demonstrates the performance options provided by the igGrid - [view sample]({environment:SamplesUrl}/grid/grid-performance). | + + +### igPieChart + +Feature | Description +---|--- +[Slice Selection](#slice-selection) | You can now select a pie slice on the igPieChart control.| +[New Event](#pie-event)| New event that fires when a label is clicked. | +[Label Coloring](#pie-label-coloring) | You can now specify the color of the pie's inner and outer labels.| +[Data Path Options Renamed](#pie-data-path-renaming) | The valueMemberPath and labelMemberPath options are renamed.| + +### igScroll + +Feature | Description +---|--- +[New Control](#igscroll)| The igScroll™ control unifies scrolling experience between browsers and devices. | + +### igZoombar + +Feature | Description +---|--- +Integration with Custom Components| The igZoombar now exposes a pluggable integration mechanism for third-party custom components. Checkout the [igZoombar Integration with Custom Components](igZoombar-Integration-with-Custom-Components.html) topic.| + +## igCategoryChart + +### New Control + +A new control, the Category Chart, is added in this 2016 volume 2 release. This chart can be easily configured to display category data using a simple API. All you need to do is bind your data (a collection or a collection of collections). + +By using a smart Data Adapter, the data is analyzed and the appropriate visualization is rendered. For example, if the chartType is set to "Auto", the control can determine that if it is provided a small data set then a column chart should be plotted, while a larger data set will draw a line chart. + +However, you can also explicitly specify the chart type by setting the chartType to line, area, column, point, spline, splineArea, stepArea, stepLine, or waterfall. + +Another example of the intuitive behavior of the Category Chart control is that you do not need to explicitly set the labels. The Category Chart will use the first appropriate string property that it finds and will use that for the labels. + +Built to be easily configurable, it uses the igDataChart control as its engine, which means that it benefits from the high performing and powerful Data Chart features. + +#### Related Topic: +- [igCategoryChart Overview](//controls/igcategorychart/categorychart-overview.mdx) + + +### New Javascript File Breakdown + +The igDataChart, igPieChart, igFunnelChart, igDoughnutChart, igRadialGauge, igLinearGauge, igBulletGraph and igMap controls all have breaking changes in terms of the js files required. The goal is to reduce the amount of code required in order to load a specific feature. The script combiner has been updated to help you download a combined file with only the files you need and in the correct order depending on required features. The igLoader has also been updated to load the correct files depending on the features requested. + +The following lists the files required if you want to load the files manually: + +igDataChart, igCategoryChart, igPieChart, igFunnelChart, igDoughnutChart, igRadialGauge, igLinearGauge, igBulletGraph and igMap you first need: + +* infragistics.util.js + +* infragistics.util.jquery.js + +* infragistics.ext_core.js + +* infragistics.ext_collections.js + +* infragistics.ext_ui.js + +* infragistics.dv_core.js + +igDataChart, igCategoryChart, igPieChart, igDoughnutChart, igRadialGauge, igLinearGauge, igBulletGraph and igMap you then need: + +* infragistics.dv_geometry.js + +If you want to load igRadialGauge you need: + +* infragistics.radialgauge.js + +* infragistics.ui.radialgauge.js + +If you want to load igLinearGauge you need: + +* infragistics.lineargauge.js + +* infragistics.ui.lineargauge.js + +If you want to load igBulletGraph you need: + +* infragistics.bulletgraph.js + +* infragistics.ui.bulletgraph.js + +If you want to load igPieChart you need: + +* infragistics.piechart.js + +* infragistics.dvcommonwidget.js + +* infragistics.ui.piechart.js + +If you want to load igDoughnutChart you need everything for pie chart and in addition: + +* infragistics.doughnutchart.js + +* infragistics.ui.doughnutchart.js + +If you want to load igFunnelChart you need: + +* infragistics.funnelchart.js + +* infragistics.ui.funnelchart.js + +If you want to load any igDataChart or igMap features, you need: + +* infragistics.datachart_core.js + +If you want to load igMap you need: + +* infragistics.ext_text.js + +* infragistics.ext_io.js + +* infragistics.ext_web.js + +* infragistics.dv_geo.js + +* infragistics.datachart_scatter.js + +* infragistics.dvcommonwidget.js + +* infragistics.geographicmap.js + +* infragistics.ui.geographicmap.js + +If you want to load the igDataChart, after loading the appropriate chart features, you need: + +* infragistics.datachart.js + +* infragistics.ui.chart.js + +If you want to load any category series (column, area, line, spline, splineArea, stepLine, stepArea, point, waterfall) into the chart you need: + +* infragistics.datachart_categorycore.js + +* infragistics.datachart_category.js + +If you want to load vertical category series (bar) into the chart you need: + +* infragistics.datachart_categorycore.js + +* infragistics.datachart_category.js + +* infragistics.datachart_verticalcategory.js + +If you want to load scatter series (scatter, scatterLine, scatterSpline, highDensityScatter, bubble) into the chart you need: + +* infragistics.datachart_scatter.js + +If you want to load range category series (rangeColumn, rangeArea) you need: + +* infragistics.datachart_categorycore.js + +* infragistics.datachart_rangecategory.js + +If you want polar series (polarLine, polarArea, polarScatter, polarSpline, polarSplineArea) you need: + +* infragistics.datachart_extendedaxes.js + +* infragistics.datachart_polar.js + +If you want radial series (radialColumn, radialLine, radialPie, radialArea) you need: + +* infragistics.datachart_extendedaxes.js + +* infragistics.datachart_radial.js + +If you want stacked series you need: + +* infragistics.datachart_categorycore.js + +* infragistics.datachart_category.js + +* infragistics.datachart_stacked.js + +If you want annotation layers (crosshairLayer, itemToolTipLayer, categoryToolTipLayer, categoryHighlightLayer) you need: + +* infragistics.datachart_annotation.js + +If you want to use the chart legend you need: + +* infragistics.legend.js + +* infragistics.ui.chartlegend.js + +If you want to load the new igCategoryChart control you need everything you need for loading category series in the data chart and in addition: + +* infragistics.dv_dataseriesadapter.js + +* infragistics.categorychart.js + +* infragistics.dvcommonwidget.js + +* infragistics.ui.basechart.js + +* infragistics.ui.categorychart.js + +### {environment:ProductName} NuGet packages + +Three new {environment:ProductName} NuGet packages are added in this 2016 volume 2 release. Those packages can boost your productivity allowing you to setup your application faster. They will automatically include the {environment:ProductName} files and references you need to your project. + +With the new ASP.NET most modules are now wrapped as NuGet packages. Having this in mind our new MVC wrappers built on top of ASP.NET Core are also available as a NuGet package. + +The NuGet packages are installed with the product`s installer and during the installation a new local feed is created, meaning that you don`t need to setup your NuGet Package Manager. You will find the local NuGet feed Infragistics (Local) the next time you run your Visual Studio. + +#### Related Topic: +- [Using {environment:ProductName} NuGet packages](//general-and-getting-started/using-ignite-ui-nuget-packages.mdx) + +## igDataChart + +### New Chart Option + +A new option, consolidatedColumnVerticalPosition, is introduced in this release in order to determine the positioning logic to use for columns which have been consolidated into a single visual element. + +It accepts the following values: + +*Minimum* - Consolidated Items should be positioned using their minimum value. + +*Maximum* - Consolidated Items should be positioned using their maximum value. + +*Median* - Consolidated Items should be positioned using their median value. + +*RelativeMinimum* - Consolidated Items should be positioned using the value nearest to the reference value of the corresponding axis. + +*RelativeMaximum* - Consolidated Items should be positioned using the value farthest from the reference value of the corresponding axis. + +#### Related Topic: +- [Series Types](//controls/igdatachart/overview/series-types.mdx) + +### Performance Enhancements +Performance of the igDataChart control has been significantly enhanced this release. +When testing the igDataChart in a live updating scenario, with a data set of 50,000 points, where points are added to the end of the bound data set and removed from the beginning every 10ms, these differences can be observed between 16.1 and 16.2: + +**Chrome:** + +16.1: 70fps (frames per second) + +16.2: 144fps + +**Edge:** + +16.1 55fps + +16.2: 105fps + +**Internet Explorer:** + +16.1: 44fps + +16.2: 100fps + +Based on these numbers you can see that the igDataChart in 16.2 is approximately twice as fast for this raw throughput scenario than in 16.1. + +### Design Changes +In the Infragistics 2016 volume 2 release, we redesigned the defaults of the igDataChart, igPieChart, igFunnelChart, igSparkline, igRadialGauge, igLinearGauge, igBulletGraph controls. + +The following screenshots are some examples comparing the new and previous defaults: + +#### Column Chart + +**New** + + +![](images/chart_design_column_new.png) + + +**Previous** + + +![](images/chart_design_column_previous.png) + + +#### Legend + +**New** + + +![](images/chart_design_legend_new.png) + + +**Previous** + + +![](images/chart_design_legend_previous.png) + + +#### Stacked Area + +**New** + +![](images/chart_design_gallery_new.png) + +**Previous** + + +![](images/chart_design_gallery_previous.png) + +#### Financial Charts + +**New** + +![](images/chart_design_financial_new.png) + +**Previous** + +![](images/chart_design_financial_previous.png) + +#### Pie Chart + +**New** + +![](images/chart_design_pie_new.png) + +**Previous** + +![](images/chart_design_pie_previous.png) + +#### Funnel Chart + +**New** + +![](images/chart_design_funnel_new.png) + +**Previous** + +![](images/chart_design_funnel_previous.png) + +#### Doughnut Chart + +**New** + +![](images/chart_design_doughnut_new.png) + +**Previous** + +![](images/chart_design_doughnut_previous.png) + + +#### Radial Gauge + +**New** + +![](images/chart_design_radial_gauge_new.png) + +**Previous** + +![](images/chart_design_radial_gauge_previous.png) + +#### Linear Gauge + +**New** + +![](images/chart_design_linear_gauge_new.png) + +**Previous** + +![](images/chart_design_linear_gauge_previous.png) + +#### Bullet Graph + +**New** + +![](images/chart_design_bullet_graph_new.png) + +**Previous** + +![](images/chart_design_bullet_graph_previous.png) + +#### Sparkline + +**New** + +![](images/chart_design_sparkline_new.png) + +**Previous** + +![](images/chart_design_sparkline_previous.png) + +### File Size Reduction +The size of files required for loading a category series in igDataChart (column, area, line, spline, splineArea, stepLine, stepArea, waterfall) has dropped 24% between 16.1 and 16.2. + +Additionally, the features in igDataChart are broken into more individual modules than they were before, so it is possible to have finer grained control over exactly which features are loaded to reduce payload size. Chart feature modules no longer have any overlap between them, further conserving payload size when loading multiple feature sets. + +## igFunnelChart +### New Styling Properties Added + +You can now specify the color of the labels depending on whether they are rendered inside or outside of the funnel chart using the and options. You can also style the text of both the inner and outer labels using the and options. +The following screenshot demostrates how to change the text color and style of the inner and outer labels. + +![](images/funnelchart_text_style.png) + +**Related topics:** + +- + +- + +- + +- + +## igGrid + +### Group By Improvements + +Group By has improved integration with Virtualization feature. Now it persist the grouped rows expand state between virtualization frames improving the end user experience. +Also two new API methods are added to and group rows. +Local grouping performance is optimized and now can be up to 10x faster. + +#### Related Topics +- [Column Grouping Overview (igGrid)](../../02_Controls/igGrid/03_Features/00_Columns/01_Grouping/00_igGrid_GroupBy_Overview.mdx#api-usage) + +#### Related Samples +- [Continuous Virtualization]({environment:SamplesUrl}/grid/virtualization-continuous) +- [Grouping API]({environment:SamplesUrl}/grid/grouping-api) + +### Inline editing for Multi-Row Layout + +Updating feature now works in row and cell edit mode when Multi-Row Layout is configured. Use option to configure the tab order of the editors when in edit mode. + +![](images/mrl-inline-editing.png) + +#### Related Topics +- [Grid Multi-Row Layout](../../02_Controls/igGrid/03_Features/16_igGrid_MultiRowLayout.mdx#features-integration) + +#### Related Samples +- [Multi-Row Layout Inline Editing]({environment:SamplesUrl}/grid/multi-row-layout-inline-editing) + + +## igPieChart + +### Slice Selection + +You can now select a pie slice on the igPieChart control. This feature is enabled by default. You can set the option in order to support single or multiple slice selection and then check the or options in order to see what data items are associated with those selected slices. + +We also added new selection events, some of which are cancelable, so you can stop selection of particular slices from occurring. These events are: + +* +* +* +* + +You can see which pie slice is selected as it has a different style. The following screenshot shows the Marketing slice selected. + +![](images/piechart_slice_selection.png) + +#### Related topics: +[igPieChart](//controls/igpiechart/igpiechart.mdx) + +### New Event for the Pie Chart + +The igPieChart control now has a that fires when the labels of the pie slices are clicked. + +#### Related topics: +[igPieChart Overview](//controls/igpiechart/overview.mdx) + +### Label Coloring + +You can now specify the color of the labels depending on whether they are rendered inside or outside of a pie slice, by setting the following options: +- +- + +![](images/piechart_inner_outer_label_color.png) + +#### Related topics: + +- +- + + +### Data Path Options Renamed +Two new options are added to the igPieChart control, these are intended to replace the existing and options. The new options are and . With the addition of these options, and are now deprecated. + +## igScroll + +### New Control + +The igScroll is a stand-alone JQueryUI widget that allows enabling custom scrollbars with fluid scrolling functionality for desktop, hybrid and mobile environments. +It allows you to create a consistent scrolling experience across all scrolling containers on all devices. + +![](images/igscroll-basic.png) + + +#### Related Topics +- [igScroll Overview](//controls/igscroll/overview.mdx) +- [Configuring igScroll](Configuring-igScroll.html) + +#### Related Samples +- [Basic Usage]({environment:SamplesUrl}/scroll/basic-usage) +- [Scrolling multiple containers at once]({environment:SamplesUrl}/scroll/scrolling-multiple-containers) +- [Configuration Options]({environment:SamplesUrl}/scroll/configuration-options) + + +## igValidator + +### Adding Credit Card check + +Adding option and validation rule. + +#### Related topics: +[Validation Rules](//controls/igvalidator/validation-rules.mdx) + + +## igEditors + +### Adding EmailAddress and Compare Data Annotation Validation Attributes + +Feature | Description +---|--- +EmailAddress | Validate text editor against a standard MVC email pattern.| +Compare | Use for comparison between linked editors. Often used in a password fields matching scenario.| \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/12-whats-new-in-2016-volume1.mdx b/docs/jquery/src/content/en/topics/whats-new/revision-history/12-whats-new-in-2016-volume1.mdx new file mode 100644 index 0000000000..a22031d0e2 --- /dev/null +++ b/docs/jquery/src/content/en/topics/whats-new/revision-history/12-whats-new-in-2016-volume1.mdx @@ -0,0 +1,140 @@ +--- +title: "What's New in 2016 Volume 1" +slug: whats-new-in-2016-volume1 +--- +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +#What's New in 2016 Volume 1 + +This topic presents the controls and the new and enhanced features for the {environment:ProductFamilyName}™ 2016 Volume 1 release. + + +##What’s New Summary + +The following summarizes what’s new in 2016 Volume 1. Additional details follow. + +### General + +Feature | Description +---|--- +New Bootstrap 4 theme | A new Bootstrap 4 compatible theme is now shipped with {environment:ProductName} - [view sample]({environment:SamplesUrl}/themes/bootstrap4-default). +Angular 2 Components (CTP) | {environment:ProductName} widgets have component wrappers for Angular 2. For detailed information visit [{environment:ProductName} Angular 2 GitHub](https://github.com/IgniteUI/igniteui-angular-wrappers) page.| +New scalable font icons | The default Infragistics theme now uses [jQuery UI font icons](https://github.com/mkkeck/jquery-ui-iconfont) instead of image icons. | +Modernizr 3.x support | {environment:ProductName} uses Modernizr library to detect touch environments (see [Touch Support for {environment:ProductName} Controls](//general-and-getting-started/touch-support-for-igniteui-for-jquery-controls.mdx)). [Mordernizr 3.x](https://modernizr.com/) is now supported along with older Modernizr versions. | + +### igTileManager + +Feature | Description +---|--- +Splitter Options| `splitterOptions` now replaces the `showSplitter` option. Besides showing and hiding, additional functionalities are added. You can configure the splitter to be collapsible as well as attach to its collapsed/expanded events. Since `showSplitter` option will no longer be available, you can refer to the following sample to see how the new option can be used - [view sample]({environment:SamplesUrl}/tile-manager/collapsible-splitter). + +### igDataSource + +Feature | Description +---|--- +New field option - `mapper`| For field with dataType="object" we now allow setting a function, which can be used for complex data extraction from complex objects, whose return value will be used for all data operations executed on the specific field.
    You can find more detailed information in the following topic: [igDataSource Overview](../../04_Data-Sources/igDataSource/00_igDataSource_igDataSource_Overview.mdx#schema-fields-mapper)| + +### igGrid + +Feature | Description +---|--- +New column option - mapper| For columns with dataType="object" we now allow setting a mapper function, which can be used for complex data extraction from complex objects, whose return value will be used for all data operations executed on the specific column.- [view sample]({environment:SamplesUrl}/grid/handling-complex-objects).
    You can find more detailed information in the following topic: [Columns and Layout](../../02_Controls/igGrid/03_Features/12_igGrid_Columns_and_Layout.mdx#defining-mapper)| +The ColumnFixing feature now works with grid width set in percentage| The ColumnFixing feature now works when the grid width is set in percentage.
    **Note**: The column widths should still be defined in pixels units (either explicitly or using the option).| +[Multi-Row Layout feature](#multi-row-layout)| The Multi-Row Layout feature enables you to create complex grid record layouts, that contain multiple rows with cells in them spanning multiple columns and rows. | +[Checkbox Appearance](#checkbox-appearance)| Checkbox column visual appearance have changed to indicate that the checkmarks are not interactable in display mode. | +Paste from Excel sample| A new sample is added that demonstrates pasting Excel clipboard data into igGrid - [view sample]({environment:SamplesUrl}/grid/paste-from-excel). | + +### igTreeGrid + +Feature | Description +---|--- +[Improved Updating feature](#treegrid-updating) | igTreeGrid Updating feature now adds the UI for adding root and child level rows. + +### TypeScript Support + +Starting with 16.1 release {environment:ProductName} the minimum supported TypeScript version is 1.4. + +Feature | Description +---|--- +[Support for union types](#union-types) | widget members now support union types which greatly improves type checking. +[Intellisense improvements](#intellisense-improvements) | Intellisense is improved for options and methods. +[Member descriptions](#member-descriptions) | All members now have a description. + +## igGrid + +### Multi-Row Layout feature + +The Multi-Row Layout feature enables you to create complex grid record layouts, that contain multiple rows with cells in them spanning multiple columns and rows. Such structure allows for greater rendering flexibility for grids with many columns that would otherwise require a horizontal scrollbar or when the data shown is better presented in a non-tabular fashion. +Initializing the Multi-Row Layout is done entirely through the igGrid's column collection. Four new properties are added to the column definition that specify the position and size of the column - , , and . + +![](images/iggrid-multi-row-layout.png) + +#### Related Topics +- [Grid Multi-Row Layout](//controls/iggrid/features/multirowlayout.mdx) + +#### Related Samples +- [Multi-Row Layout]({environment:SamplesUrl}/grid/multi-row-layout) + +### Checkbox Appearance +Checkbox column visual appearance have changed and it's square box is not going to be rendered when the grid is in display mode. What would be provided is only a plain checkmark. This change is due to refinement of the experience for the end-users, who naturally perceived that this was an interactive element, which they can click to toggle. + +![](images/iggrid-checkbox.png) + +#### Related Topics +- [Rendering Checkboxes on a Column](../../02_Controls/igGrid/03_Features/12_igGrid_Columns_and_Layout.mdx#checkboxes) + +#### Related Samples +- [Checkbox Column]({environment:SamplesUrl}/grid/checkbox-column) + +## igTreeGrid + +### Improved Updating feature + +The "Add new row" user interface is now enabled and along with it TreeGrid Updating supports adding new records not only directly to the root level, but also adding a child records to a specified level as through the UI, as well through the API. +The "Add child row" button is available next to the "Delete row" button when a row is hoovered with the mouse or swiped left or right when on touch enabled device. +![](images/igtreegrid-updating.png) + +The add new row UI is rendered inline next to its parent. + +![](images/igtreegrid-updating-add-child.png) + +#### Related Topics +- [Updating (igTreeGrid)](//controls/igtreegrid/features/updating.mdx) + +#### Related Samples +- [Updating]({environment:SamplesUrl}/tree-grid/updating) + +## TypeScript Support + +### Support for union types + +[Union types](https://github.com/Microsoft/TypeScript/blob/master/doc/spec.md#3.4) introduced in TypeScript 1.4 allows for a variable or a member to have one of a set of several types. Previously members that were declared as type `any` now use union types to declare a more specific type. + +![](images/union-types.png) + +### Intellisense improvements + +Intellisense is improved for options and methods to suggest all widget`s overloads. + +#### Option overloads + +All possible options with getters and setters are now listed in the intellisense. + +![](images/option-overloads.png) + +#### Method overloads + +All possible methods with their parameters are now listed in the intellisense. + +![](images/method-overloads.png) + +#### Methods intellisense on the widget's `data` +In jQuery UI syntax the widget methods can be invoked from the widget's data: $(".selector").data('widgetName'). This is now possible with the {environment:ProductName} TypeScript directives. + +![](images/method-data-overloads.png) + +### Member descriptions + +Widget options, events and methods now feature descriptions. The description can be seen in intellisense suggestions for improved usability of the widgets. + +![](images/member-descriptions.png) \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/13-whats-new-in-2015-volume2.mdx b/docs/jquery/src/content/en/topics/whats-new/revision-history/13-whats-new-in-2015-volume2.mdx new file mode 100644 index 0000000000..47d28905df --- /dev/null +++ b/docs/jquery/src/content/en/topics/whats-new/revision-history/13-whats-new-in-2015-volume2.mdx @@ -0,0 +1,308 @@ +--- +title: "What's New in 2015 Volume 2" +slug: whats-new-in-2015-volume2 +--- +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +#What's New in 2015 Volume 2 + +This topic presents the controls and the new and enhanced features for the {environment:ProductFamilyName}™ 2015 Volume 2 release. + + +##What’s New Summary + +The following summarizes what’s new in 2015 Volume 2. Additional details follow. + +### General + +Feature | Description +---|--- +[New {environment:ProductName} Scaffolder for MVC](#igniteui-scaffolder) | New scaffolder for {environment:ProductName} widgets. +Full support for ASP.NET MVC 6 for all {environment:ProductName} widgets | The Infragistics.Web.Mvc.dll now includes version build against ASP.NET MVC 6. +{environment:ProductName} TypeScript 1.5 definitions | The {environment:ProductName} TypeScript definitions now support TypeScript 1.5. Intellisense is added for widget methods. + +### igCombo +Feature | Description +---|--- +Auto complete | Typing in the combo will now suggests the first matching result from the list. [View sample]({environment:SamplesUrl}/combo/filtering) +[Grouping](#combo-grouping) | You can now group items in the combo list. [View sample]({environment:SamplesUrl}/combo/grouping) +Header and Footer Templates | Header and footer can now be configured in the combo using templates. [View sample]({environment:SamplesUrl}/combo/templates) +RTL Support | Added support for right-to-left languages. +[Dropdown Orientation](#combo-dd-orientation) | By default the dropdown list will automatically display on top or bottom depending on the available space. You can also explicilty configure its behavior with the `dropDownOrientation` option. +Custom Values | The option `allowCustomValue` to set custom values in combo’s text input was dropped in 15.1, but we listened to your feedback and we are enabling this back in this release. [View sample]({environment:SamplesUrl}/combo/editing) +Performance Improvements | We ensure all interactions with the combo work smoothly with more than 10 000 records. Initial loading time, dropdown opening and closing animations, selection, typing with auto complete and auto select – it all works blazing fast. + +### igDataChart + +Feature | Description +---|--- +[New Axis Intervals](#chart-axis-intervals) | The Major and Minor intervals feature of the `igDataChart` control allows you to apply intervals with the specified color and thickness to the x and y axes of the `igDataChart` control. + +### Editors + +Feature | Description +---|--- +[New editors](#new-editors)| In 15.2, we are shipping a brand new editors that are more robust, feature rich and performant. + +### igGrid + +Feature | Description +---|--- +[Refactored Updating](#grid-refactored-updating) | The refactored grid Updating feature takes advantage of the new editors and validation mechanisms and offers a re-designed dialog edit mode experience. +Column Auto Sizing | Grid columns now support automatic resizing based on the width of cell content. To enable auto-sizing use the `*` as a value of a column's option. +[Filtering Improvements](#grid-filtering-improvements) | You can now add a custom filter condition and choose the filtering conditions for a specific column. +Improved KnockoutJS support | Responsive Vertical Column rendering is now supported with KnockoutJS. +JavaScript-based Excel Grid Exporter (RTM) | JavaScript-based Excel Grid Exporter is now RTM and supports igGrid, igTreeGrid and igHierarchicalGrid. +ARIA support | We now comply with the W3C WAI-ARIA specification to ensure our customers can provide their disabled users with satisfactory experience. +[RowSelectors Improvements](#grid-row-selectors-improvements) | You can now enabled selection across all pages when Row Selectors with checkboxes and Paging are enabled. + + +### igHierarchicalGrid + +Feature | Description +---|--- +JavaScript-based Excel Grid Exporter (RTM) | JavaScript-based Excel Grid Exporter is now RTM and supports igGrid, igTreeGrid and igHierarchicalGrid. +ARIA support | We now comply with the W3C WAI-ARIA specification to ensure our customers can provide their disabled users with satisfactory experience. + +### igTreeGrid + +Feature | Description +---|--- +[Row Selectors](#treegrid-row-selectors) | TreeGrid Row Selectors feature inherits the functionality from the igGrid Row Selectors feature and add additional tri-state mode. +[Remote Sorting, Paging, Filtering and Load on Demand in the TreeGrid MVC Wrapper](#treegrid-remote-mvc-features) | All the standard sorting, paging, filtering and load on deamand functionalities now work out of the box within the MVC wrapper in a remote scenario. +Column Moving | TreeGrid now features Column Moving feature which inherits from its igGrid counterpart. +Resizing | TreeGrid now features Resizing feature which inherits from its igGrid counterpart. +Keyboard Navigation | Keyboard navigation in TreeGrid is improved. +[Paging Context Row](#treegrid-paging-context-row) | Paging context row is added to communicate the context of a leaf level row. +JavaScript-based Excel Grid Exporter (RTM) | JavaScript-based Excel Grid Exporter is now RTM and supports igGrid, igTreeGrid and igHierarchicalGrid. +ARIA support | We now comply with the W3C WAI-ARIA specification to ensure our customers can provide their disabled users with satisfactory experience. + +### igNotifier +Feature | Description +---|--- +[New component](#notifier) | The Notifier component is an extension of the popover component, which specializes in providing the end user with notification information. + +### igValidator +Feature | Description +---|--- +[Refactored Validator](#validator) | The Validator is reworked to allow flexible validation on an array of {environment:ProductName} components, as well as standard input form elements + +### igUpload + +Feature | Description +---|--- +Sending additional data between the client and server during file uploading | You can now transmit data between client and server during the file uploading process. + +##General + +### New {environment:ProductName} Scaffolder for MVC + +We release a brand new Scaffolder for {environment:ProductName} widgets. With this we boost developer productivity greatly by providing code generation and templates to quickly target standard data scenarios like creating, reading, updating and deleting data. With a few clicks you can completely configure a Grid, generate a controller and save time on manual coding. Configuring other widgets as HierarchicalGrid, TreeGrid, Data Chart and others are already in the works. +Along with the standard templates for create, edit, delete, details and list that ship with ASP.NET MVC, we provide customized {environment:ProductName} templates that use the new editor widgets. + +![](images/igniteui_scafolder.png) + +#### Related Topics + +- [{environment:ProductName} Scaffolder Visual Studio extension](//asp-net-mvc/mvcscaffolding/mvc-scaffolding.mdx) + +## igCombo +### +####Grouping +All new Grouping functionality will provide a way items to be grouped and distinguished according to categories they belong, like an employee and the department that he belongs to. + +![](images/combo-grouping.png) + +### +####DropDown orientation +By default the dropdown orientation is set to 'auto' and this means that according to the available space above and below the combo, the dropdown position will be calculated automatically. You can set the value to be 'bottom' in order to open in below, and 'top' for above. + +#### Related Samples + +- [Auto Complete]({environment:SamplesUrl}/combo/filtering) +- [Grouping]({environment:SamplesUrl}/combo/grouping) +- [Header and Footer Templates]({environment:SamplesUrl}/combo/templates) +- [Custom Values]({environment:SamplesUrl}/combo/editing) + + +## igDataChart + +### New Axis Intervals + +The igDataChart now allows you to implement both Major and Minor intervals for all Numeric and Category type axes, via the Interval and MinorInterval properties. This feature also includes the ability to customize the color and thickness for intervals via the MajorStroke, MajorThickness, MinorStroke and MinorThickness properties, exposed from the chart axes. + +The following example demonstrates the use of Major and Minor Axis Intervals on the NumericX Axis of an igDataChart LineSeries. + +![](images/jQuery_AxisIntervals_NumericX_X_Intervals.png) + +This example demonstrates the use of Major and Minor Axis Intervals on the NumericY Axis of an igDataChart LineSeries. + +![](images/jQuery_AxisIntervals_NumericY_Y_Intervals.png) + +#### Related Topics + +- [igDataChart Overview](//controls/igdatachart/overview/overview.mdx) +- [Configuring Axis Intervals (igDataChart)](//controls/igdatachart/configuring/axis-intervals.mdx) + +#### Related Samples + +- [NumericAxesIntervals](igDataChart-Axis-Intervals.html#preview) : This sample demonstrates the use of Major and Minor Axis Intervals on the ScatterLineSeries, using NumericX and NumericY Axes. +- [CategoryXAxisIntervals](igDataChart-Axis-Intervals.html#categoryxexample) : This sample demonstrates the use of Major and Minor Axis Intervals on the ColumnSeries, using CategoryXAxis. + +## Editors + +### New Editors + +One of our main goals with this release was to provide you with more robust, feature rich and excellent performing editor widgets. Our editor components offer a lot of functionality, backed by a significant amount of code. This latest release marked another major development campaign for the editor suite, since our dev teams re-architected all editors to optimize their usability and also added a new component – the Checkbox widget. +Here are some of the main goals of the new editors: + - Superior User Experience - We revisited the whole UX of every editor so now we provide much better experience out of the box. We include HTML5 editing benefits, modern look and feel and touch-friendly interface. We took care of every detail from label positioning to validation and interaction in different states. + - More Intuitive API - No need to look at the help topics again. We made it so intuitive, so discoverable that you basically sit and code like it was you who wrote the control. The new API talks more for itself and is freed from unnecessary methods and options. + - Improved Reliability - Reduced code complexity, increased performance and high testability are just part of the overall higher quality we ship with this new release. + +![](images/new_editors.png) + +For information on how to migrate to the new editors see the "Related Topics" section below. + +#### Related Topics + +- [Migrating to the new igCurrencyEditor](//controls/igeditors/igcurrencyeditor/migrating-to-the-new-igcurrencyeditor.mdx) +- [Migrating to the new igDateEditor](//controls/igeditors/igdateeditor/migrating-to-the-new-igdateeditor.mdx) +- [Migrating to the new igMaskEditor](//controls/igeditors/igmaskeditor/migrating-to-the-new-igmaskeditor.mdx) +- [Migrating to the new igNumericEditor](//controls/igeditors/ignumericeditor/migrating-to-the-new-ignumericeditor.mdx) +- [Migrating to the new igPercentEditor](//controls/igeditors/igpercenteditor/migrating-to-the-new-igpercenteditor.mdx) +- [Migrating to the new igTextEditor](//controls/igeditors/igtexteditor/migrating-to-the-new-igtexteditor.mdx) +- [Migrating to the new igDatePicker](//controls/igeditors/igdatepicker/migrating-to-the-new-igdatepicker.mdx) + +#### Related Samples + +- [New Text Editor]({environment:SamplesUrl}/editors/text-editor) +- [Credit]({environment:SamplesUrl}/editors/credit) +- [Numeric Editor]({environment:SamplesUrl}/editors/numeric-editor) +- [Mask Editor]({environment:SamplesUrl}/editors/mask-editor) +- [Checkbox Editor]({environment:SamplesUrl}/editors/checkbox-editor) +- [Date Editor]({environment:SamplesUrl}/editors/date-editor) + +## igGrid + +### Refactored Updating +The newly refactored grid Updating feature takes advantage of the new Editors and validation mechanisms. Also new is the refactored dialog edit mode (now renamed to "Row Edit Dialog" to better reflect its purpose), which offers a redesigned look and a new architecture, which makes it very easy to customize it. See [Migrating to the new Updating (igGrid)](//controls/iggrid/features/updating/updating-migrating-to-the-new-updating.mdx) for information on how to migrate to the refactored Updating feature. +Last, but not least, the new updating functionality of the grid component has been refactored to make the code lighter, more flexible and optimized. + +![](images/updating_row_edit_dialog.png) + +#### Related Topics +- [Migrating to the new Updating (igGrid)](//controls/iggrid/features/updating/updating-migrating-to-the-new-updating.mdx) +- [Row Edit Dialog Overview (igGrid)](//controls/iggrid/features/updating/row-template/updating-roweditdialog.mdx) +- [Configuring the Row Edit Dialog (igGrid)](iggrid-updating-roweditdialog-configuring.html) + +#### Related Samples +- [Row Edit Dialog]({environment:SamplesUrl}/grid/row-edit-dialog) +- [Editing: Custom Editor Provider]({environment:SamplesUrl}/grid/editing-custom-editor-provider) + +### Filtering Improvements + +You can now add a custom filter condition and choose the filtering conditions for a specific column. + +Two new options are introduced in the Filtering feature: +- - an array of objects defining custom condtions per column basis. + +![](images/filtering_custom_conditions.png) + +- - an array of consitions to be enabled per column basis. + +#### Related Samples +- [Filtering]({environment:SamplesUrl}/grid/custom-conditions-filtering) + +### RowSelectors Improvements +When Paging feature is enabled in combination with Row Selectors an additional UI is introduced to allow users to select all rows across all pages. + +![](images/grid_improvements_row_selectors.png) + +This functionality can be enabled via the option together with and options. + +#### Related Topics +- [Configuring Row Selectors(igGrid)](../../02_Controls/igGrid/03_Features/02_Row Selectors/01_igGrid_Configuring_Row_Selectors.mdx) + +## igTreeGrid + +### Row Selectors + +The Row Selectors feature for the igTreeGrid is extended from the igGrid RowSelectors. +The feature is customized to ease selection in hierarchical data by introducing two new functionalities: hierarchical numbering mode and tri-state checkboxes. +In hierarchical numbering mode row number includes the counters for each level in the hierarchy. The functionality is controlled by the option. + +![](images/tregrid_row_selectors_hierarchical_numbering_mode.png) + +Tri-state checkboxes introduces a partially checked state to indicate that a partent row has checked child rows. The functionality is controlled by the option. + +![](images/tregrid_row_selectors_tri_state_checkboxes.png) + +Additionally when Paging feature is enabled in combination with Row Selectors an additional UI is introduced to allow users to select all rows across all pages. + +![](images/tregrid_row_selectors_paging.png) + +#### Related Topics +- [Row Selectors (igTreeGrid)](//controls/igtreegrid/features/row-selectors.mdx) + +#### Related Samples +- [Row Selectors]({environment:SamplesUrl}/tree-grid/row-selectors) + +### Remote Sorting, Paging, Filtering and Load on Demand in the TreeGrid MVC Wrapper + +TreeGrid MVC Wrapper now handles the Sorting, Paging, Filtering and Load on Demand remote operations out of the box. +You just need to decorate the action that handles the remote features with the `TreeGridDataSourceAction` attribute. + +#### Related Topics +- [Remote Features (igTreeGrid)](//controls/igtreegrid/features/remote-features.mdx) + +#### Related Samples +- [Remote Features]({environment:SamplesUrl}/tree-grid/remote-features) + +### Paging Context Row + +With large hierarchical data sets sometimes you might find yourself in trouble figuring out where you are in the hierarchy. We add a new paging context row to communicate the context of a leaf level row. This shows a trail representing the full path of the leaf through all ancestors. The available contexts are: + - none - context row is not rendered. + - parent - renders a read-only representation of the immediate parent row. + - breadcrumb - renders a read-only breadcrumb trail representing the full path through all ancestors. +The functionality is controlled by the option. + +![](images/treegrid_paging_context_row.png) + +#### Related Topics +- [Paging (igTreeGrid)](//controls/igtreegrid/features/paging.mdx) + +#### Related Samples +- [Paging]({environment:SamplesUrl}/tree-grid/paging) + +## igNotifier + +### New component + +The Notifier component is an extension of the Popover component, which specializes in providing the end user with notification information. There are four predefined states of notification - success, info, warning, and error. +The component supports a popover mode, as well as simple inline-style messaging. In addition to this, there is automatic pairing with editor widgets to allow detection of erroneous input, which is outside of the predefined range. +Whether used with an {environment:ProductName} widget or on its own, the Notifier component provides an easy and intuitive way to improve user experience. + +![](images/notifier.png) + +#### Related Topics +- [igNotifier Overview](//controls/ignotifier/overview.mdx) + +#### Related Samples +- [Basic Usage]({environment:SamplesUrl}/notifier/basic-usage) +- [Inline messages]({environment:SamplesUrl}/notifier/inline-messages) +- [Notifier with igEditors]({environment:SamplesUrl}/editors/with-igEditors) + +## igValidator + +### Refactored Validator + +The refactored igValidator component allows flexible validation on an array of {environment:ProductName} components, as well as standard input form elements. The mechanism uses the igNotification component capabilities to both handle the validation process and display flexible and visually appealing notifications to the end user. See [Migrating to the new igValidator control](//controls/igvalidator/migration-topic.mdx) for information on how to migrate to the refactored igValidator. + +![](images/validator.png) + +#### Related Topics +- [igValidator Overview](//controls/igvalidator/overview.mdx) +- [Migrating to the new igValidator control](//controls/igvalidator/migration-topic.mdx) + +#### Related Samples +- [Basic Usage]({environment:SamplesUrl}/validator/basic-usage) diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/14-whats-new-in-2015-volume1.mdx b/docs/jquery/src/content/en/topics/whats-new/revision-history/14-whats-new-in-2015-volume1.mdx new file mode 100644 index 0000000000..5d2024478e --- /dev/null +++ b/docs/jquery/src/content/en/topics/whats-new/revision-history/14-whats-new-in-2015-volume1.mdx @@ -0,0 +1,254 @@ +--- +title: "What's New in 2015 Volume 1" +slug: whats-new-in-2015-volume1 +--- +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +#What's New in 2015 Volume 1 + +This topic presents the controls and the new and enhanced features for the {environment:ProductFamilyName}™ 2015 Volume 1 release. + + +##What’s New Summary + +The following summarizes what’s new in 2015 Volume 1. Additional details follow. + +### General + +Feature | Description +---|--- +[New {environment:ProductName} Help Viewer](#help-viewer) | We have a brand new, modernized help viewer for {environment:ProductName}. + +### {environment:ProductName} Page Designer + +Feature | Description +---|--- +[Out-of-the-Box Theming Support](#page-designer-theming-support) | Added support for other {environment:ProductName} themes and common Bootstrap-based themes that you can easily select with the built-in theme picker. +[Improved Data Sources Experience](#page-designer-datasource-expirience) | Added explicit support for JSONP data source and local data source as well as a new data source editor. +[Intellisense support for Ace](#page-designer-intellisense-support) | Added support for showing intellisense when the designer is in code view and the user starts typing +[Remote data source – user friendly errors](#page-designer-remote-dataSource) | Web designer now has user interface for showing detailed information for the possible problem, while connecting to the remote data source + + +### Infragistics JavaScript Excel Library + +Feature | Description +---|--- +[New Library (RTM)](#new-javascript-excel-library)|100% pure JavaScript client-side Excel library that can be used for creating, loading, and editing Excel documents in the browser. + +### igGrid + +Feature | Description +---|--- +[JavaScript-based Excel Grid Exporter (CTP)](#grid-excel-exporter) | You can export what users are looking at into an Excel file without any round-tripping to the server. +Column Fixing works with Column Moving | Now you can enable both Column Fixing and Column Moving in the grid. +Improved Column Fixing API | Now you can fix a column at specific position in the grid by supplying the target key of the column to its destination position in the grid. +More Flexibility in the Selection Feature | Multiple region selection is now possible with the Ctrl + Mouse Drag action. Selection regions may be non-contiguous. +Paging Persistence | The persist option is now added to the Paging feature. +[Responsive Feature Improvements](#grid-responsive-feature-improvements) | A new single column template mode is added. +[Column Styling](#grid-column-styling) | We’ve added a new settings so that you can specify custom header and column CSS classes for igGrid columns configuration. + + +### igTreeGrid + +Feature | Description +---|--- +[New Control (RTM)](#tree-grid) | The igTreeGrid™ control is now RTM. The igTreeGrid™ control allows you to visualize hierarchical data with common data schema into a single set of columns. +[Tree-Specific Filtering](#tree-grid-filtering) | The igTreeGrid features a specialized filtering visualization that clearly shows context in filter results in the grid. +Tree-Specific Paging | When paging data in the grid, you have the option to page either visible data at just the root level or all visible levels. +Enhanced Expansion Options | In order to maintain flexibility, the tree grid features a configurable expansion indicator, which can be rendered inline in the first data column or in a standalone column. The expansion indicator can also be customized with a different look-and-feel to achieve custom visualizations. +Virtualization | The igTreeGrid includes continuous virtualization which allows you to bind the grid to large sets of hierarchical data while maintaining a high-performance experience. +[Remote Load on Demand](#tree-grid-remote-load-on-demand) | Sometimes large sets of data are rendered in the grid and you only want to supply the page with small sets of data at a time. By using remote load on demand, the igTreeGrid is able to add portions of the overall data to the grid as requested by the user. +Local Load on Demand | To further maintain a high-performance grid, the igTreeGrid features local load on demand which ensures that only expanded nodes are rendered in the browser. As a user expands a parent node, then new elements are created on-the-fly in the page to support new data shown to the user. + + +### igCombo + +Feature | Description +---|--- +[Rewritten Control](#combo)| In 15.1, we are shipping a brand new combo that is built with great UX and reliability as top priority. +Improved Styling| The new combo does not use inline CSS styling for positioning and sizing, which means it can rely on browser rendering optimizations more. +Improved Defaults| In some areas we have changed the defaults to provide a better UX out of the box, which also reduces the code necessary on your part to get to those optimal experiences for your end users. +New Keyboard Interactions| The old combo had the basics, but we have dramatically expanded what you can do with the keyboard, which makes it more efficient and natural for end users to navigate, select, expand, etc. without having to switch back and forth between the mouse and keys. +Improved Reliability| We've stripped down the size of the Combo with 44% reducing the code complexity as well as increasing the automation code coverage much higher. +API Improvements| We also took this opportunity to revisit some less-than-optimal API choices to improve discoverability and understandability of the API. +[Knockout Extension Improvements](#combo_ko)| Now the igCombo has a fully functional Knockout Extension which supports two-way data binding between a Knockout observable collection and the igCombo list, as well as two-way data binding for selected items in the combo. + +### Mobile Controls + +Feature | Description +---|--- +jQuery Mobile 1.4+ Support | {environment:ProductName} mobile controls are now compatible with the most recent version of jQuery Mobile, 1.4+. + + +##General + +### New {environment:ProductName} Help Viewer + +We have a brand new, modernized help viewer for {environment:ProductName}. This makes it much easier to navigate through and share individual topics, and you can also easily switch between product versions (for version 14.1 and up) directly in a topic. +Beyond making the experience easier to use, the actual topics themselves are now available on GitHub in Markdown. This means that you can easily report issues on topics or perhaps even submit additions or changes to a topic via a GitHub pull request. + +#### Related Content + +- [{environment:ProductName} Help Topics on GitHub](https://github.com/IgniteUI/help-topics) + +##{environment:ProductName} Page Designer + +### Out-of-the-Box Theming Support +Selecting a theme from the list changes the theme for all the components already dropped on the design surface. + +![](images/Whats_New_In_Ignite_UI_2015_Volume_1_2.png) +### Improved Data Sources Experience +Page designer contains three predefined data source types - local, remote and Northwind. Both local and remote types provide different adorners for configuration settings. The NorthWind data source is a remote data source with predefined configuration pointing to the Northwind odata service requesting Customers with specific columns. + +####Local data source +![](images/Whats_New_In_Ignite_UI_2015_Volume_1_local_dataSource.png) +####Remote data source +![](images/Whats_New_In_Ignite_UI_2015_Volume_1_remote_dataSource.png) +####NorthWind data source +![](images/Whats_New_In_Ignite_UI_2015_Volume_1_northwind_dataSource.png) + +### Intellisense support for Ace +The web designer now supports intellisense when the designer is in code mode and the cursor is inside a component. When the user starts typing the suggestions based on predefined options related to the widget + +![](images/Whats_New_In_Ignite_UI_2015_Volume_1_intellisense.png) +### Remote data source - user friendly errors +When data source is bound to a remote data, an error coming from the remote request may occur. Web designer now has user interface for showing detailed information for the possible problem, while connecting to the remote data source. The user can find important information for the response status, error, data type and content, without the need to investigate the problem using the browser tools. + +##Infragistics JavaScript Excel Library + + +### New Library (RTM) + +In 14.2, we CTP’d the first version of the "Client-Side Excel Library" which is now named "Infragistics JavaScript Excel Library". The RTM version includes smaller file size as well as enhanced browsers compatibility. + +#### Related Topics + +- [Understanding the Infragistics JavaScript Excel Library](../../09_JavaScript Excel Library/00_Understanding/~Understanding_the_Infragistics_JavaScript_Excel_Library.mdx) +- [Using the {environment:ProductName} JavaScript Excel Library](../../09_JavaScript Excel Library/01_Using/~Using_The_JavaScript_Excel_Library.mdx) + +#### Related Samples + +- [Excel Table]({environment:NewSamplesUrl}/javascript-excel-library/excel-table) +- [Excel Formatting]({environment:NewSamplesUrl}/javascript-excel-library/excel-formatting) +- [Excel Formulas]({environment:NewSamplesUrl}/javascript-excel-library/excel-formulas) + + +## igGrid + +### JavaScript-based Excel Grid Exporter (CTP) + +The igGridExcelExporter component allows you to export data from the igGrid into a Microsoft Excel document. The export can support themes and workbook customization while reflecting data manipulated in the grid through features sorting, filtering, paging, etc. The following screenshot demonstrates what an exported igGrid looks like in Excel. + +#### Related Topics + +- [Grid Excel Exporter Overview](../../02_Controls/igGrid/05_igGridExcelExporter Overview.mdx) + +#### Related Samples + +- [Export Basic Grid to Excel]({environment:NewSamplesUrl}/grid/export-basic-grid) +- [Exporting Grid to Excel with Features]({environment:NewSamplesUrl}/grid/export-feature-rich-grid) +- [Customizing Grid Excel Export]({environment:NewSamplesUrl}/grid/export-client-events) +- [Exporting Grid to Excel with Progress Indicator]({environment:NewSamplesUrl}/grid/export-grid-loading-indicator) + + +### Responsive Feature Improvements + +А new option is added to the Responsive Web Design Mode enabling you to define a single column template for a specific profile. + +![](images/Whats_New_In_Ignite_UI_2015_Volume_1_3.png) + +#### Related Samples + +- [Responsive Single Column Template]({environment:NewSamplesUrl}/grid/responsive-single-column-template) + +### Column Styling +With the new and column settings you can apply CSS classes to both the header and the column data cells as shown in the screenshot below. +![](images/Whats_New_In_Ignite_UI_2015_Volume_1_column_styling.png) + + +##igTreeGrid + +### New Control (RTM) + +The `igTreeGrid`™ control allows you to visualize a hierarchical data with common data schema into a single set of columns. + +Supported features in the RTM are: + +- Column Fixing +- Hiding +- Filtering +- Sorting +- Updating +- Paging +- Selection +- Tooltips +- Multi-Column Headers + +![](images/Whats_New_In_Ignite_UI_2015_Volume_1_TreeGrid.png) + +#### Related Topics + +- [Overview (igTreeGrid)](//controls/igtreegrid/overview.mdx) + +#### Related Samples + +- [JSON Binding]({environment:NewSamplesUrl}/tree-grid/json-binding) +- [Balance Sheet]({environment:NewSamplesUrl}/tree-grid/balance-sheet) + +### Tree-Specific Filtering + +The igTreeGrid specific filtering gives you fine control on how the matching results are presented to the user. The new property controls how filtered results appear in the grid. The default is `"showWithAncestors"` which renders matches in full opacity along with their parent nodes with lower opacity (See image below). +The other available mode is `"showWithAncestorsAndDescendants"` which in addition to the default also renders child records, even if child records don't match the filtering conditions. + +![](images/Whats_New_In_Ignite_UI_2015_Volume_1_TreeGrid_Filtering.png) + +#### Related Topics + +- [Filtering (igTreeGrid)](//controls/igtreegrid/features/filtering.mdx) + +#### Related Samples + +- [File Explorer]({environment:NewSamplesUrl}/tree-grid/file-explorer) + +### Remote Load on Demand + +The Load on Demand functionality enables the tree grid to request the data for the child nodes from the server as the user interacts with the grid (expands a node). This type of interaction allows for a faster page load, faster Tree Grid binding, a lighter initial footprint and potential for presenting the the most up-to-date data. + +![](images/Whats_New_In_Ignite_UI_2015_Volume_1_TreeGrid_Load_on_Demand.png) + +#### Related Topics + +- [Load on Demand (igTreeGrid)](//controls/igtreegrid/features/load-on-demand.mdx) + +#### Related Samples + +- [Load on Demand]({environment:NewSamplesUrl}/tree-grid/load-on-demand) + +##igCombo + +### Rewritten Control + +Our original jQuery-based combo that we shipped almost four years ago was very functional, but over the years we’ve seen that it started showing its age. In 15.1, we are shipping a brand new combo that is built with great UX and reliability as top priority. While it has much improved, we’ve also minimized API changes so that you can drop and replace with minimal effort to start benefitting from the new combo. + +![](images/Whats_New_In_Ignite_UI_2015_Volume_1_Combo.png) + +#### Related Topics + +- [igCombo Overview](//controls/igcombo/overview.mdx) +- [Migrating to the new combo](//controls/igcombo/migrating-to-the-new-combo.mdx) + +#### Related Samples + +- [JSON Binding]({environment:NewSamplesUrl}/combo/json-binding) +- [Selection and Checkboxes]({environment:NewSamplesUrl}/combo/selection-and-checkboxes) +- [Filtering]({environment:NewSamplesUrl}/combo/filtering) +- [Load-On-Demand]({environment:NewSamplesUrl}/combo/load-on-demand) +- [Keyboard Navigation]({environment:NewSamplesUrl}/combo/keyboard-navigation) + +### Rewritten Knockout Extension + +The Knockout extension for the igCombo was adapted to meet the requirements of the new igCombo. This means that some of the options were removed and other were introduced. All the changes help the user to easily configure the igCombo, when it is bound to Knockout View-Model. + +#### Related Samples + +- [KnockoutJS Binding]({environment:NewSamplesUrl}/combo/bind-combo-with-ko) diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/15-whats-new-in-2014-volume2.mdx b/docs/jquery/src/content/en/topics/whats-new/revision-history/15-whats-new-in-2014-volume2.mdx new file mode 100644 index 0000000000..d808d78353 --- /dev/null +++ b/docs/jquery/src/content/en/topics/whats-new/revision-history/15-whats-new-in-2014-volume2.mdx @@ -0,0 +1,253 @@ +--- +title: "What's New in 2014 Volume 2" +slug: whats-new-in-2014-volume2 +--- + +#What's New in 2014 Volume 2 + +This topic presents the controls and the new and enhanced features for the {environment:ProductFamilyName}™ 2014 Volume 2 release. + + +##What’s New Summary + +The following summarizes what’s new in 2014 Volume 2. Additional details follow. + +### General + +Feature | Description +---|--- +[AngularJS directives](#angular-directives) | Now {environment:ProductName} controls feature custom directives for AngularJS. + + +### {environment:ProductName} Page Designer + +Feature | Description +---|--- +[WYSIWYG for HTML5](#wysiwyg) | New drag-n-drop UI design surface for Modern Web using {environment:ProductName} controls. +Responsive Web Design (RWD) | Visualize and manage breakpoints to make responsive design easier. +Clean Code Editor | See, edit, and copy clean code to incorporate into your projects. +Easier Data Access | Easily configure {environment:ProductName} data source components to connect your controls to your data. +Integrated API Help | See help for API members in both the component editor and in the code editor. + + +### Client-Side Excel Library + +Feature | Description +---|--- +[New Library (CTP)](#new-library)|100% pure JavaScript client-side Excel library that can be used for creating, loading, and editing Excel documents in the browser. + + +### igGrid + +Feature | Description +---|--- +[Column Fixing works with row virtualization](#column-fixing-row-virtualization) | Now you can enable both Column Fixing and row virtualization in the grid. +[Append Rows on Demand (RTM)](#append-rows-on-demand) | Load on Demand feature is RTM and renamed to Append Rows on Demand. +[Selection feature improvements](#selection-feature-improvements) |Selection feature codebase is completely reworked. + + +### igTreeGrid + +Feature | Description +---|--- +[New Control (CTP)](#new-control) | The igTreeGrid™ control allows you to visualize hierarchical data with common data schema into a single set of columns. + + +### igPivotGrid + +Feature | Description +---|--- +[Tree layout](#tree-layout)|The `igPivotGrid`™ control now allows you to visualize the row hierarchies in a tree-like structure. + + +### Theming + +Feature | Description +---|--- +[Bootstrap theming](#bootstrap-theming) | {environment:ProductName} controls now support Bootstrap theming. +[New theme (RTM)](#new-theme) | The iOS 7-style theme is now RTM and renamed to just iOS theme—replaces prior iOS6-style theme. The theme also added support for the jQuery Mobile 1.4 + controls. +[Updated themes to support jQuery UI 1.11+](#update-themes) | New theme files are added in order to support jQuery UI 1.11+ own controls. + + +##General + +### AngularJS directives + +We launched a preview of AngularJS directives last release on our GitHub repo; they are now officially in the product as well and are considered RTM. + +All of the {environment:ProductName} controls can be instantiated declaratively with custom tags or from the controller or via controller options. Further, the following controls support two-way data binding: + +- igGrid +- igCombo +- igEditors +- igTree +- igDataChart + +#### Related Content + +[AngularJS Directives](../../10_AngularJS Directives/~AngularJS_Directives.mdx) + +[{environment:ProductName} directives for AngularJS on GitHub](https://github.com/IgniteUI/igniteui-angularjs) + +#### Related Samples + +[{environment:ProductName} directives for AngularJS samples](http://igniteui.github.io/igniteui-angularjs/) + + +##{environment:ProductName} Page Designer + + +### WYSIWYG for HTML5 + +Leverage common HTML elements, Bootstrap components, and of course {environment:ProductName} components to lay out and jumpstart your modern LOB pages. It’s the best way to learn to use {environment:ProductName} and more quickly configure {environment:ProductName} controls to then copy into your projects. + +**Use it now at [{environment:DesignerUrl}]({environment:DesignerUrl}) !** + + +![](images/Whats_New_In_Ignite_UI_2014_Volume_2_1.png) + +### Responsive Web Design (RWD) + +Visualize and edit your responsive CSS breakpoints and jump into editing the CSS for breakpoints easily. You can also use Bootstrap row components or {environment:ProductName} layout components to easily defing a grid layout for your responsive page. + +![](images/Whats_New_In_Ignite_UI_2014_Volume_2_2.png) + +### Clean Code Editor + +We built on top of the world-class ACE code editor to help you see, edit, and copy clean code for your projects as well as help you define component options. + +![](images/Whats_New_In_Ignite_UI_2014_Volume_2_3.png) + +### Easier Data Access + +The {environment:ProductName} data source components make it easier to connect your controls to your data, and the Page Designer makes those easier to use with custom component editors and letting you easily set your data sources on components that use them. You can pick a data source from a list in the component editor or just drop a data source onto controls like the grid to get started. + +### Integrated API Help + +Throughout the designer, we incorporate API help so that you don’t have to go digging for it. We do it in the code editor as well as in the component editor: + +1. For {environment:ProductName} componets, you can click the ? link in the component editor to go directly to the API docs for that component. +2. When hovering over properties and events, we show you the related API docs right there. + +![](images/Whats_New_In_Ignite_UI_2014_Volume_2_4.png) + + +##Client-Side Excel Library + + +### New Library (CTP) + +Our new Excel Library is a 100% pure JavaScript client-side library that supports loading and saving in Excel 2003 and later formats in the browser. From JavaScript you have the ability to control cell formats and styles, formula solving, merged cells, tables, data validations, and more. + +#### Related Topics + +- [{environment:ProductName} Client-Side Excel Library Overview](../../09_JavaScript Excel Library/00_Understanding/JavaScript_Excel_Library_Overview.mdx) +- [Using the {environment:ProductName} Client-Side Excel Library](../../09_JavaScript Excel Library/01_Using/~Using_The_JavaScript_Excel_Library.mdx) + +#### Related Samples + +- [JavaScript Excel Overview]({environment:NewSamplesUrl}/javascript-excel-library/overview) + + +## igGrid + +### Column Fixing works with row virtualization + +Now you can enable fixed or continuous virtualization along with column fixing. + +![](images/Whats_New_In_Ignite_UI_2014_Volume_2_5.png) + +### Append Rows on Demand (RTM) + +The previously known Load on Demand feature is now renamed to Append Rows on Demand in order to better communicate what it does and differentiate from the features with the similar names in other controls. + +![](images/Whats_New_In_Ignite_UI_2014_Volume_2_6.png) + +#### Related Topics + +[Append Rows on Demand Overview (igGrid)](//controls/iggrid/features/append-rows-on-demand-overview.mdx) + +### Selection feature improvements + +The `igGrid`™ Selection feature is completely reworked. As a result the codebase is reduced with 30% and some of the most resource intensive operations like selecting all the rows in a grid are optimized and now take less time to complete. + + +##igTreeGrid + +### New Control (CTP) + +The `igTreeGrid`™ control allows you to visualize a hierarchical data with common data schema into a single set of columns. We’d love your feedback, so please let us know what you think! + +Supported features in the CTP are: + +- Column Fixing +- Hiding +- Filtering +- Sorting +- Updating +- Paging +- Resizing +- Selection +- Tooltips +- Multi-Column Headers + +![](images/Whats_New_In_Ignite_UI_2014_Volume_2_7.png) + +#### Related Topics + +- [igTreeGrid Overview](//controls/igtreegrid/overview.mdx) + +#### Related Samples + +- [File Explorer]({environment:NewSamplesUrl}/tree-grid/file-explorer) +- [Balance Sheet]({environment:NewSamplesUrl}/tree-grid/balance-sheet) + + +##igPivotGrid + +### Tree layout + +The `igPivotGrid`™ control now allows you to visualize the row hierarchies in a tree-like structure. When multiple hierarchies are added, the members of each hierarchy are listed above or below each of the members of the previous hierarchy. + +![](images/Whats_New_In_Ignite_UI_2014_Volume_2_8.png) + +#### Related Samples + +- [Layout Modes]({environment:NewSamplesUrl}/pivot-grid/layout-modes) + +##Theming + +### Bootstrap theming + +This release adds a mechanism to apply any Bootstrap theme (which uses LESS variables defined by Bootstrap) look and feel to the {environment:ProductName} controls. The resulting themes are standalone and can be used with or without Bootstrap. + +The product comes with four preset themes “Bootstrap” (equivalent to the default Bootstrap theme), “Superhero”, “Yeti”, “Flatly” which are compiled against the respective themes taken from [bootswatch.com](http://bootswatch.com/) site. + +There is also a new site which helps you create and customize themes. + +![](images/Whats_New_In_Ignite_UI_2014_Volume_2_9.png) + +Note: The four preset themes as well as the LESS files used to generate them are compatible only with jQuery UI 1.11+ controls (This is because jQuery UI 1.11 introduced some breaking changes in the CSS structure of their controls). + +#### Related content + +- [Bootstrap Theme Generator]({environment:NewSamplesUrl}/bootstrap-theme-generator) + +### New theme (RTM) + +The previously named iOS7 theme has been renamed to just iOS and replaces the prior iOS6-style theme. The iOS theme is now RTM and adds support for the {environment:ProductName} Mobile Controls. + +![](images/Whats_New_In_Ignite_UI_2014_Volume_2_10.png) + +>**Note:** The mobile iOS theme supports jQuery Mobile 1.4.2+. The igListView control doesn’t support jQuery Mobile 1.4 and is not compatible with this theme. + +#### Related samples + +- [iOS theme]({environment:NewSamplesUrl}/themes/ios) + +### Updated themes to support jQuery UI 1.11+ + +We updated our themes to support the jQuery UI 1.11+ own controls. However, because there are some breaking changes in the CSS structure in jQuery UI, you may see some minor issues in the look and feel of native jQuery UI controls when using {environment:ProductName} themes. + + + \ No newline at end of file diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/16-whats-new-in-2014-volume1.mdx b/docs/jquery/src/content/en/topics/whats-new/revision-history/16-whats-new-in-2014-volume1.mdx new file mode 100644 index 0000000000..3439b9f58f --- /dev/null +++ b/docs/jquery/src/content/en/topics/whats-new/revision-history/16-whats-new-in-2014-volume1.mdx @@ -0,0 +1,371 @@ +--- +title: "What's New in 2014 Volume 1" +slug: whats-new-in-2014-volume1 +--- +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# What's New in 2014 Volume 1 + +## Topic Overview + +This topic presents the controls and the new and enhanced features for the {environment:ProductFamilyName}™ 2014 Volume 1 release. + + +## What’s New Summary + +The following table summarizes what’s new in 2014 Volume 1. Additional details follow the summary table. + +### General + +Feature | Description +---|--- +[New Visual Studio templates](#new-vs-template) | You can find a new set of Infragistics templates in the File - New Project dialog of Microsoft® Visual Studio®. +[New theme (CTP)](#new-theme) | A new theme named iOS 7 has been added. The theme is inspired by Apple’s iOS 7 design. + + +### igDataChart + +Feature | Description +---|--- +[New default style](#igdatachart-new-default-style) | This style features multiple visual changes making the charts look more impressive and streamlined. + + +### igColorPicker + +Feature | Description +---|--- +[New control (CTP)](#igcolorpicker-new-control) | The `igColorPicker`™ control allows users to select pre-defined colors or to define their own color palettes. + + +### igGrid + +Feature | Description +---|--- +[Column Fixing works with hidden columns](#column-fixing-hidden-columns)|Now you can have both fixed and hidden columns in the grid. +[Feature state persistence](#feature-persistence)|Feature state persistence means persisting states of the grid features between re-bindings. +[Improved delete row on touch devices](#improved-delete-row-mobile)|The delete row user experience on touch-enabled devices has improved. + + +### igHierarchicalGrid + +Feature | Description +---|--- +[Feature state persistence](#ighierarchicalgrid-feature-persistence)| Feature state persistence means persisting states of the hierarchical grid features between re-bindings. +[Improved delete row on touch devices](#ighierarchicalgrid-improved-delete-row-mobile) | The delete row user experience on touch-enabled devices has improved. + + +### igHtmlEditor + +Feature | Description +---|--- +[New Default Style](#htmleditor-default-style)|A new look-and-feel of the toolbar and the buttons. + + +### igPivotGrid, igPivotDataSelector, igOlapXmlaDataSource + +Feature|Description +---|--- +[KPIs support](#kpi-support)|The `igOlapXmlaDataSource`™ has now built-in support for displaying KPIs defined in a cube. The KPIs supplied by the data source are visualized in the `igPivotDataSelector`™ and `igPivotGrid`™. +[Remote ADOMD.NET data provider support](#remote-adomnet-data-provider)|The `igOlapXmlaDataSource` now supports one more remote configuration where ADOMD.NET is used for communication with the SSAS server. + + +### igPopover + +Feature|Description +---|--- +[New control (RTM)](#igpopover-newcontrol)|The `igPopover`™ control, now RTM, adds tooltip-like functionality to DOM elements. + + +### igRadialMenu + +Feature|Description +---|--- +[New control (RTM)](#igradialmenu-new-control)|The `igRadialMenu`™ control is a context menu presenting its items in a circular arrangement around a center button. + + +### igSplitButton + +Feature | Description +---|--- +[New control (CTP)](#igsplitter-new-control)|`igSplitButton` is a drop-down button with which the user can select a default value bound to a primary button, or select from a list of values displayed in a drop-down list bound to a secondary button. It is useful when you want to provide a default action/command for a button but also need to supply other, secondary options. + + +### igToolbar + +Feature|Description +---|--- +[New control (CTP)](#igtoolbar)|The `igToolbar`™ control allows you to create custom toolbars like those in the `igHtmlEditor`™. + + +### igUpload + +Feature |Description +---|--- +[Support for Web Farms / Web Gardens](#igupload-support-web-gardens)|The `igUpload`™ control now supports Web Farm / Web Garden Internet Information Services (IIS) configurations. + + +## General +### New Visual Studio templates + +You can find a new set of Infragistics templates in the File - New Project dialog of Visual Studio 2012 and later. These templates are designed to help you get started with a functional, well-designed, and fully-styled application. + +Each template includes documentation and more templates will appear in the Infragistics Template Gallery over time to address a wide range of application scenarios. + +![](images/Whats_New_Project_Dialog.png) + +Note: In previous versions of {environment:ProductName}, the starter templates were installed with the product installer. They are now accessible through the Infragistics Template Gallery. + +### New theme (CTP) + +A new theme named iOS 7 has been added. The theme is inspired by Apple’s +iOS 7 design. + +![](images/Whats_New_In_Ignite_UI_2014_Volume_1_16.png) + +#### Related samples + +- [iOS 7 theme]({environment:SamplesUrl}/themes/ios) + + +## Charts Common Features +### New default style + +A new default style has been applied to the chart controls aiming to make the charts look more streamlined. (If necessary, you can revert the chart controls to the previous default style using the `legacy.css` style file.) + +Old Default Style + +![](images/Whats_New_In_Ignite_UI_2014_Volume_1_1.png) + + +New Default Style + +![](images/Whats_New_In_Ignite_UI_2014_Volume_1_2.png) + + +### Supported controls + +- igDataChart +- igDoughnutChart +- igFunnelChart +- igPieChart + +#### Related topic + +- [New Default Style](igDataChart-New-Default-Style.html) + + +## igColorPicker +### New control (CTP) + +The `igColorPicker` control allows users to select pre-defined colors or to define their own color palettes. + +![](images/Whats_New_In_Ignite_UI_2014_Volume_1_3.png) + + +## igGrid +### Column Fixing works with hidden columns + +Now you can have both fixed and hidden columns in the grid. (The Column Fixing feature is now integrated with Column Hiding feature. + +![](images/Whats_New_In_Ignite_UI_2014_Volume_1_4.png) + +### Feature state persistence + +Feature state persistence means persisting states of the grid features +between re-bindings. + +### Supported features + +- Filtering +- GroupBy +- RowSelectors +- Selection +- Sorting + +A new property – – has been added to those features. Feature state persistence is enabled by default. + +### Related Topics + +- [Selection Overview](//controls/iggrid/features/selection/selection-overview.mdx) +- [Column Grouping Overview](//controls/iggrid/features/columns/grouping/groupby-overview.mdx) +- [Filtering](//controls/iggrid/features/columns/filtering.mdx) +- [Sorting Overview](//controls/iggrid/features/columns/sorting/sorting-overview.mdx) + +#### Related Samples + +- [Feature Persistence]({environment:SamplesUrl}/grid/feature-persistence) + +### Improved delete row on touch devices + +The delete row user experience on touch-enabled devices has improved. + +In Cell Edit mode, swiping to the left or to the right displays the Delete Row button. + +![](images/Whats_New_In_Ignite_UI_2014_Volume_1_5.png) + +In Row Edit mode, the Delete Row button is available along with the Cancel and Done buttons. + +![](images/Whats_New_In_Ignite_UI_2014_Volume_1_6.png) + +>**Note:** The Modernizr library is required for this feature to work. + +#### Related Samples + +- [Basic Editing]({environment:SamplesUrl}/grid/basic-editing) + + +## igHierarchicalGrid +### Feature state persistence + +Feature state persistence means persisting states of the grid features +between re-bindings. + +### Supported features + +- Filtering +- GroupBy +- RowSelectors +- Selection +- Sorting + +A new property – + +– has been added to those features. Feature state persistence is enabled +by default. + +#### Related Topics + +- [Selection Overview](//controls/iggrid/features/selection/selection-overview.mdx) +- [Column Grouping Overview](//controls/iggrid/features/columns/grouping/groupby-overview.mdx) +- [Filtering](//controls/iggrid/features/columns/filtering.mdx) +- [Sorting Overview](//controls/iggrid/features/columns/sorting/sorting-overview.mdx) + +#### Related Samples + +- [Feature Persistence]({environment:SamplesUrl}/grid/feature-persistence) + +### Improved delete row on touch devices + +The delete row user experience on touch-enabled devices has improved. + +In Cell Edit mode, swiping to the left or to the right displays the +Delete Row button. + +![](images/Whats_New_In_Ignite_UI_2014_Volume_1_7.png) + +In Row Edit mode, the Delete Row button is available along with the +Cancel and Done buttons. + +![](images/Whats_New_In_Ignite_UI_2014_Volume_1_8.png) + + +## igHtmlEditor +### New default style + +The new default style provides `igHtmlEditor`‘s toolbar and buttons with a new look-and-feel. + +Old Default Style + +![](images/Whats_New_In_Ignite_UI_2014_Volume_1_9.png) + + +New Default Style + +![](images/Whats_New_In_Ignite_UI_2014_Volume_1_10.png) + + +## igPivotGrid, igPivotDataSelector, igOlapXmlaDataSource +### KPIs support + +The `igOlapXmlaDataSource` has now built-in support for displaying KPIs defined in a cube. The KPIs supplied by the data source are visualized in the `igPivotDataSelector` and `igPivotGrid`. + +![](images/Whats_New_In_Ignite_UI_2014_Volume_1_11.png) + +#### Related topics + +- [Key Performance Indicators Support (igPivotGrid, igPivotDataSelector, igOlapXmlaDataSource)](//controls/igpivotgrid/kpi-support.mdx) + +#### Related samples + +- [Binding to Xmla Data Source]({environment:SamplesUrl}/pivot-grid/binding-to-xmla-data-source) + +### Remote ADOMD.NET data provider support + +The `igOlapXmlaDataSource` now supports one more remote configuration +where ADOMD.NET is used for communication with the SSAS server. + +#### Related topics + +- [Data Provider Configuration Overview (igOlapXmlaDataSource)](../../04_Data-Sources/OLAP/02_Xmla/02_Config/00_Data Provider/00_igOlapXmlaDataSource_Data_Provider_Configuration_Overview.mdx) + +#### Related samples + +- [Remote ADOMD.NET Provider]({environment:SamplesUrl}/pivot-grid/remote-adomd-provider) + + +## igPopover +### New control (RTM) + +The `igPopover` control, now RTM, adds tooltip-like functionality to DOM elements. `igPopover` is context-sensitive and displays dynamic content, detailed information, overlaid forms, or just about anything that should appear over a given element. The popover area is customizable and can be loaded on demand. You can configure its content, activation, and position. + +![](images/Whats_New_In_Ignite_UI_2014_Volume_1_12.png) + +#### Related topics + +- [igPopover](//controls/igpopover/landingpage.mdx) + +#### Related samples + +- [Basic Usage]({environment:SamplesUrl}/popover/basic-popover) + + +## igRadialMenu +### New control (RTM) + +The `igRadialMenu` control is a context menu presenting its items in a circular arrangement around a center button. The circular arrangement of the items speeds up items selection, because each item is equally positioned in relation to the center. The `igRadialMenu` supports different item types for choosing numerical values, color values, or performs actions. Sub-Items are also supported. + +![](images/Whats_New_In_Ignite_UI_2014_Volume_1_13.png) + +#### Related topics: + +- [igRadialMenu](//controls/igradialmenu/igradialmenu.mdx) + +#### Related samples + +- [Button Items]({environment:SamplesUrl}/radial-menu/button-items) + + +## igSplitButton +### New control (CTP) + +The `igSplitButton` control is a drop-down button with which the user can select a default value bound to a primary button, or select from a list of values displayed in a drop-down list bound to a secondary button. It is useful when you want to provide a default action/command for a button but also need to supply other, secondary options. + +![](images/Whats_New_In_Ignite_UI_2014_Volume_1_14.png) + +#### Related samples + +- [Split button basics]({environment:SamplesUrl}/split-button/change-shapes) + + +## igToolbar +### New control (CTP) + +The `igToolbar` control allows you to create custom toolbars like those in the `igHtmlEditor`. + +![](images/Whats_New_In_Ignite_UI_2014_Volume_1_15.png) + +#### Related samples + +- [Standalone Toolbar]({environment:SamplesUrl}/html-editor/standalone-toolbar) + + +## igUpload +### Support for Web Farms / Web Gardens + +The `igUpload` control now supports Web Farm / Web Garden Internet Information Services (IIS) configurations. It has an application-wide `CustomDictionaryProvider` option which enables third-party provider for `igUpload`’s data structures. The value for the option is a type name implementing `ISafeDictionary` interface. Implementing a type allows for storing and reading the common data for the uploaded files from a single source. + + + + + + diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/17-whats-new-in-2013-volume2.mdx b/docs/jquery/src/content/en/topics/whats-new/revision-history/17-whats-new-in-2013-volume2.mdx new file mode 100644 index 0000000000..33d8d5ff8b --- /dev/null +++ b/docs/jquery/src/content/en/topics/whats-new/revision-history/17-whats-new-in-2013-volume2.mdx @@ -0,0 +1,613 @@ +--- +title: "What's New in 2013 Volume 2" +slug: whats-new-in-2013-volume2 +--- + +# What's New in 2013 Volume 2 + +## Topic Overview +### Purpose + +This topic provides an overview of the new features of {environment:ProductName}™ 2013 Volume 2 release. + +## New Features +### New features summary chart + +The following table summarizes the new features for the {environment:ProductName} 2013 Volume 2 release. Additional details are available after the summary table. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    ControlFeatureDescription
    {environment:ProductName}Custom downloadsA new tool for creating custom downloads is available. Select the controls you want to use and the tool creates a download package containing a customized, combined, and minified JavaScript file and theme files. Find out more on [the download page]({environment:SamplesUrl}/download).
    [igBulletGraph](#igbulletgraph)[New control](#igbulletgraph-new-control)The `igBulletGraph` control is a data visualization control for visualizing data in the form of a bullet graph.
    [igDataChart](#igdatachart)[Title and subtitle](#title-subtitle)You can now add a title and/or subtitle to the top section of the chart.
    [Axis title and subtitle](#axis-title-subtitle)You can now add title and/or subtitle to the x- and y-axes of the control.
    [Series highlighting](#series-highting)You can now highlight an entire series or some individual items within the series.
    [Animated transitions](#animation-transition)The series can now appear with animation effect when the chart is initially loaded.
    [Hover interactions](#hover-interactions)Hover interactions enable you to display annotations over the series of the chart. These annotations are implemented through configurable hover interaction layers that are dependent on the cursor position.
    [Axis ticks](#axis-ticks)You can now display tick marks for the labels of vertical and horizontal axes.
    [Color gradients](#color-gradients)You can now use gradient colors in the chart.
    [Default tooltips](#default-tooltips)Default tooltips are now available meaning that a tooltip is displayed for the series without any additional configuration being necessary.
    [Drop shadow](#drop-shadow)Drop-shadow effect can be now applied to the series’ visual.
    [New CSS style](#new-css-style)There is a new CSS style for the `igDataChart` control. The style features multiple visual changes making the chart look better.
    [Knockout support](#knockout-support)You have now support for the Knockout library in the `igDataChart` control.
    igDataSourceoData filtering by dateWhen bound to an oData service, the `igDataSource` is able to filter date columns.
    [igDoughnutChart](#igdoughnutchart)[New control](#igdoughnutchart-new-control)The `igDoughnutChart` is a data visualization control for displaying data in the form of a doughnut chart.
    [igGrid](#iggrid)[Column fixing](#iggrid-column-fixing)Previously CTP, the Column Fixing feature has now been released to the market and is fully documented. This feature enables fixing a column on the left or on the right of the grid, so that it cannot get out of user view when scrolling horizontally.
    [jsRender integration](#jsrender-integration)The `igGrid` control now supports the jsRender templating engine.
    [RWD Mode Vertical Column Rendering](#vertical-column-rendering)Vertical Column Rendering is a new feature that renders the grid in two columns as a Responsive Web Design (RWD) to changing the width of the browsers viewport. The first column displays the column captions, and the second column – the data.
    [New design of the Feature Chooser](#feature-chooser-new-design)The Feature Chooser has now a new design that provides better support for touch-enabled devices.
    [Load-on-Demand (CTP)](#load-on-demand)With the `igGrid` Load-on-Demand feature, currently in CTP, the data is not loaded to the grid until the requested data is needed in view. This greatly improves the grid performance with large data sets.
    [igLayoutManager](#iglayoutmanager)[New control](#iglayoutmanager-new-control)igLayoutManager is now RTM.
    [igLinearGauge](#iglineargauge)[New control](#iglineargauge-new-control)The `igLinearGauge` control visualizes data in the form of a linear gauge. It provides a simple and concise view of a performance value compared against a scale and one or more comparative ranges.
    [igMap](#igmap)[High density scatter series](#high-density-scatter-series)The new geographic High-Density Scatter series allows you to bind and show scatter data ranging from hundreds to millions of data points requiring exceedingly little loading time.
    [igPieChart](#igpiechart)[Curved label callout lines](#curved-label)You can now add two types of curves to the lines in the label callouts in the `igPieChart`.
    [igPopover](#igpopover)[New control (CTP)](#igpopover-new-control)The `igPopover` control, currently in CTP, adds tooltip-like functionality to the DOM elements.
    [igQRCodeBarcode](#qrcode)[New control](#qrcode-new-control)The `igQRCodeBarcode` control generates QR (Quick Response) barcode images for use in your web application.
    [igRadialGauge](#igradialgauge)[New control](#igradialgauge-new-control)`igRadialGauge` is a data visualization control for displaying a gauge containing a number of visual elements, such as a scale with tick marks and labels, a needle, and a number of ranges.
    [igTileManager](#igtilemanager)[New control](#igtilemanager-new-control)Previously CTP, the `igTileManager` control has now been released to the market and is fully documented. The `igTileManager` is a layout control for rendering and managing data into tiles.
    [igZoombar](#igzoom)[New control](#igzoom-new-control)`igZoombar` control adds zooming functionality to range enabled controls like `igDataChart`.
    + + +## igBulletGraph +### New control + +The `igBulletGraph` control is a data visualization control for visualizing data in the form of a bullet graph. Linear by design, it provides a simple and concise view of a performance bar compared against a scale and, optionally, some other measures. + +![](../../controls/igbulletgraph/images/igBulletGraph.png) + +#### Related Topic + +- [igBulletGraph](//controls/igbulletgraph/igbulletgraph.mdx) + +#### Related Sample + +- [Basic Configuration]({environment:SamplesUrl}/bullet-graph/basic-configuration) + + +## igDataChart +### Title and subtitle + +You can now add a title and/or subtitle to the top section of the chart. When a title/subtitle is added, the content of the chart is re-sized automatically to allow for the title/subtitle content. + +![](images/Whats_New_In_Ignite_UI_2013_Volume_2_2.png) + +#### Related Topic + +- [**Configuring the Chart Title and Subtitle (igDataChart)**](//controls/igdatachart/configuring/chart-titles-and-subtitles.mdx) + +#### Related Sample + +- [Title and Subtitle]({environment:SamplesUrl}/data-chart/chart-title) + +### Axis title and subtitle + +You can now add a title and/or subtitle to the x- and y-axes of the control. + +![](images/Whats_New_In_Ignite_UI_2013_Volume_2_3.png) + +#### Related Topic + +- [**Configuring the Axis Title (igDataChart)**](//controls/igdatachart/configuring/axis-title.mdx) + +#### Related Sample + +- [Axis Title and Subtitle]({environment:SamplesUrl}/data-chart/axis-title) + +### Series highlighting + +You can now highlight an entire series or some individual items within +the series. + +The highlighting capabilities are series-specific. With single-shape series, such as Line, series the entire line is highlighted, while with series consisting of multiple shapes, such as Column series, each individual shape (column) can be highlighted. In all supported series, individual markers can be highlighted. + +Highlighting is supported with the mouse only. + +Series highlighting is supported for the following series types: + +- Category Series +- Range Category Series +- Financial Price Series +- Financial Indicators + +#### Related Topic + +- [Configuring the Series Highlighting (igDataChart)](//controls/igdatachart/configuring/series-highlighting.mdx) + +#### Related Sample + +- [Series Highlighting](../../02_Controls/igDataChart/04_Configuring/03_igDataChart_Series_Highlighting.mdx#series-highlighting-examples) + +### Animated transitions + +This feature allows the series to animate during the initialization of the `igDataChart` control. + +#### Related Topic + +- [Transitions In Animations](//controls/igdatachart/configuring/igchart-transitions-in-animations.mdx) + +#### Related Samples + +- [Transition Animations]({environment:SamplesUrl}/data-chart/transition-animation) +- [Transition Animations (Financial)](../../02_Controls/igDataChart/04_Configuring/08_igChart_Transitions_In_Animations.mdx#transition-example) + +### Hover interactions + +Hover interactions enable you to display annotations over the series of the chart. These annotations are implemented through configurable hover interaction layers that are dependent on the cursor position. + +![](images/Whats_New_In_Ignite_UI_2013_Volume_2_4.png) + +Hover interaction layers are actually series that are added to the series collection and are dependent on the cursor position. Adding hover interaction layers to the `igDataChart` control disables the default behavior of the crosshairs, tooltips, or both (depending on which type of layer is added). + +#### Related Topic + +- [**Configuring Hover Interactions (igDataChart)**](../../02_Controls/igDataChart/04_Configuring/04_Hover Interactions/~HoverInteractions_Hover_Interactions.mdx) + +#### Related Samples + +- [**Category Highlight Layer**](../../02_Controls/igDataChart/04_Configuring/04_Hover Interactions/03_HoverInteractions_Crosshair_Layer.mdx#example) +- [**Category Item Highlight Layer**](../../02_Controls/igDataChart/04_Configuring/04_Hover Interactions/01_HoverInteractions_Category_Item_Highlight_Layer.mdx#example) +- [**Category Tooltip Layer**](../../02_Controls/igDataChart/04_Configuring/04_Hover Interactions/02_HoverInteractions_Category_Tooltip_Layer.mdx#example) +- [**Crosshair Layer**](../../02_Controls/igDataChart/04_Configuring/04_Hover Interactions/04_HoverInteractions_Item_Tooltip_Layer.mdx#example) +- [**Item Tooltip Layer**](../../02_Controls/igDataChart/04_Configuring/04_Hover Interactions/03_HoverInteractions_Crosshair_Layer.mdx#example) + +### Axis ticks + +You can now display axis tick marks outside the chart plot area. This allows displaying ticks for each of the labels and may serve for simplifying the chart look by replacing the axes gridlines with ticks. + +![](images/Whats_New_In_Ignite_UI_2013_Volume_2_5.png) + +#### Related Topic + +- [Configurable Visual Elements](//controls/igdatachart/overview/visual-elements.mdx) + +### Color gradients + +You can now use gradient colors in the chart. + +![](images/Whats_New_In_Ignite_UI_2013_Volume_2_6.png) + +#### Related Topic + +- [Using Gradient Colors in Data Visualizations](//general-and-getting-started/styling-and-theming/using-gradient-colors-in-data-visualizations.mdx) + +#### Related Sample + +- [Color Gradients]({environment:SamplesUrl}/data-chart/chart-fill-gradients) + +### Default tooltips + +Default tooltips are now available meaning that a tooltip is displayed for the series without any additional configuration being necessary. The default tooltip templates are different for the different series types in order to present information optimally. + +![](images/Whats_New_In_Ignite_UI_2013_Volume_2_7.png) + +#### Related Topic + +- [**Configurable Visual Elements**](//controls/igdatachart/overview/visual-elements.mdx) + +#### Related Sample + +- [Series Tooltips](../../02_Controls/igDataChart/00_Overview/01_igDataChart_Visual_Elements.mdx#samples) + +### Drop shadow + +Drop-shadow effect can be applied to the series’ visual. + +![](images/Whats_New_In_Ignite_UI_2013_Volume_2_8.png) + +#### Related Topic + +- [Styling the Chart Series (igDataChart)](//controls/igdatachart/styling/styling-the-chart-series.mdx) + +### New CSS style + +There is a new CSS style for the `igDataChart` control. The style features multiple visual changes and settings to improve the overall chart look and feel. + +### Old Style + +![](../../controls/igdatachart/styling/images/Applying_the_New_Style_1.png) + +### New Style + +![](../../controls/igdatachart/styling/images/Applying_the_New_Style_2.png) + +#### Related Topic + +- New Default Style (`igDataChart`) + +### Knockout support + +You have now support for the Knockout library in the `igDataChart` control. This makes it easier to use the Knockout library and its declarative syntax to instantiate and configure `igDataChart`. + +#### Related Topic + +- [**Configuring Knockout Support (igDataChart)**](//controls/igdatachart/configuring/knockoutjs-support.mdx) + + +## igDoughnutChart +### New control + +The `igDoughnutChart` is a data visualization control for displaying data in the form of a doughnut chart. It allows for proportionally illustrating the occurrences of a variable. The inner radius of the control is configurable, and the Doughnut Chart’s series provides a built-in support for selecting and exploding its slices. + +Visualizing the occurrence of multiple variables (adding multiple series) is possible, using concentric rings. The chart can be styled by configuring its properties or applying themes. + +![](images/Whats_New_In_Ignite_UI_2013_Volume_2_11.png) + +#### Related Topic + +- [igDoughnutChart](//controls/igdoughnutchart/igdoughnutchart.mdx) + +#### Related Sample + +- [Doughnut Chart]({environment:SamplesUrl}/doughnut-chart/overview) + + +## igGrid +### Column fixing + +Previously CTP, the Column Fixing feature has now been released to the market and is fully documented. This feature enables fixing a column on the left or on the right of the grid, so that it cannot get out of user view when scrolling horizontally. This can be performed either by the user from the grid interface or programmatically through the API of the Column Fixing feature. When Column Fixing is activated, the fixed/fixable columns are indicated with a pin button in their headers. + +![](images/Whats_New_In_Ignite_UI_2013_Volume_2_12.png) + +#### Related Topic + +- [**Column Fixing Overview (igGrid)**](//controls/iggrid/features/columns/fixing/columnfixing-overview.mdx) + +#### Related Sample + +- [Column Fixing]({environment:SamplesUrl}/grid/column-fixing) + +### jsRender integration + +The `igGrid` control now supports the jsRender templating engine. + +#### Related Topic + +- [**jsRender Integration (igGrid)**](//controls/iggrid/features/jsrender-integration.mdx) + +#### Related Sample + +- [**jsRender integration**]({environment:SamplesUrl}/grid/jsrender-integration) + +### RWD Mode Vertical Column Rendering + +Vertical Column Rendering is a new feature that renders the grid in two columns as a Responsive Web Design (RWD) to changing the width of the browsers viewport. The first column is the header column where the column captions reside. The second column contains row data. + +![](images/Whats_New_In_Ignite_UI_2013_Volume_2_13.png) + +#### Related Topic + +- [**Configuring Vertical Column Rendering (RWD Mode, igGrid)**](//controls/iggrid/features/responsive/configure/responsive-web-design-mode-configuring-vertical-column-rendering.mdx) + +#### Related Sample + +- [**Responsive Vertical Rendering**]({environment:SamplesUrl}/grid/responsive-vertical-rendering) + +### New design of the Feature Chooser + +The Feature Chooser has now a new design that provides better support +for touch-enabled devices. + +![](images/Whats_New_In_Ignite_UI_2013_Volume_2_14.png) + +#### Related Topic + +- [Feature Chooser](//controls/iggrid/features/feature-chooser.mdx) + +#### Related Sample + +- [Feature Chooser]({environment:SamplesUrl}/grid/feature-chooser) + +### Load-on-Demand (CTP) + +With the `igGrid` Load-on-Demand feature, currently in CTP, the data is not loaded to the grid until the requested data is needed in view. This greatly improves the grid performance with large data sets. Load-on-Demand can operate in two alternative modes: Automatic and Manual. + +- In Automatic mode, the data is appended as needed when the user scrolls down the grid. +- In Manual mode, the data is appended when the user presses the Load more data button located at the bottom of the grid. + +![](images/Whats_New_In_Ignite_UI_2013_Volume_2_15.png) + +#### Related Sample + +- [Load-on-Demand]({environment:SamplesEmbedUrl}/grid/append-rows-on-demand) + + +## igLayoutManager +### New control + +The `igLayoutManager` is a layout control for managing the overall HTML page layout in Web applications by arranging the page elements in pre-defined (but customizable) layout patterns (called “layouts”). + +![](images/Whats_New_In_Ignite_UI_2013_Volume_2_16.png) + +#### Related Topic + +- [igLayoutManager](//controls/iglayoutmanager/landing-page.mdx) + +#### Related Samples + +- [Responsive Column Layout]({environment:SamplesUrl}/layout-manager/column-layout-markup) +- [Responsive Flow Layout]({environment:SamplesUrl}/layout-manager/flow-layout) + + +## igLinearGauge +### New control + +The `igLinearGauge` control visualizes data in the form of a linear gauge. +It provides a simple and concise view of a performance value compared +against a scale and one or more comparative ranges. + +![](../../controls/iglineargauge/images/igLinearGauge.png) + +#### Related Topic + +- [igLinearGauge](//controls/iglineargauge/iglineargauge.mdx) + +#### Related Sample + +- [Basic Configuration]({environment:SamplesUrl}/linear-gauge/basic-configuration) + + +## igMap +### High density scatter series + +The new geographic High-Density Scatter series allows you to bind and +show scatter data ranging from hundreds to millions of data points +requiring exceedingly little loading time. + +Because of the sheer number of data points, the series displays the scatter data as tiny dots (as opposed to full-size markers) and the areas the most data-intensive areas – higher color density representing clusters of data points. + +![](images/Whats_New_In_Ignite_UI_2013_Volume_2_18.png) + +#### Related Topic + +- [**Configuring Geographic High-Density Scatter Series (igMap)**](//controls/igmap/configuring/series/using-geographic-high-density-scatter-series.mdx) + +#### Related Sample + +- [High Density Scatter Series]({environment:SamplesUrl}/map/geo-high-density-scatter-series) + + +## igPieChart +### Curved label callout lines + +You can now add two types of curves to the lines in the label callouts in the `igPieChart`. You can choose whether to use a straight line or one of the curves and specify the line style and the spacing between the label and the end of the line. + +![](images/Whats_New_In_Ignite_UI_2013_Volume_2_19.png) + +#### Related Sample + +- [Layout Configuration]({environment:SamplesUrl}/pie-chart/layout-configuration) + + +## igPopover +### New control (CTP) + +The `igPopover` control, currently in CTP, adds tooltip-like functionality to the DOM elements. It makes possible various customizations to tooltips, such as: + +- Displaying of HTML content +- Custom positioning – left, right, top, bottom +- Custom look-and-feel +- Custom trigger – the event on which the `igPopover` will be shown +- Multiple elements instantiation +- Touch support + +![](images/Whats_New_In_Ignite_UI_2013_Volume_2_20.png) + +#### Related Samples + +- [Basic Popover]({environment:SamplesUrl}/popover/basic-popover) + + +## igQRCodeBarcode +### New control + +The `igQRCodeBarcode` control generates QR (Quick Response) barcode images for use in your web application. The following screenshot shows a sample `igQRCodeBarcode` control with the “http://www.infragistics.com” data encoded. + +![](images/Whats_New_In_Ignite_UI_2013_Volume_2_21.png) + +#### Related Topics + +- [igQRCodeBarcode](//controls/igqrcodebarcode/igqrcodebarcode.mdx) + +#### Related Samples + +- [QR Barcode Basic Configuration]({environment:SamplesUrl}/barcode/basic-configuration) + + +## igRadialGauge +### New control + +`igRadialGauge` is a data visualization control for displaying a gauge containing a number of visual elements, such as a scale with tick marks and labels, a needle, and a number of ranges. The control also supports ranges, which provides visual cues for the scale. + +![](images/Whats_New_In_Ignite_UI_2013_Volume_2_22.png) + +#### Related Topics + +- [igRadialGauge](//controls/igradialgauge/igradialgauge.mdx) + +#### Related Samples + +- [igRadialGauge]({environment:SamplesUrl}/radial-gauge/overview) + + +## igTileManager +### New control + +Previously CTP, the `igTileManager` control has now been released to the +market and is fully documented. + +The `igTileManager` is a layout control for rendering and managing data into tiles. The tiles are displayed in a responsive grid layout (for example, dashboard with a set of different components such as grid, chart, map, and etc.). + +![](images/Whats_New_In_Ignite_UI_2013_Volume_2_23.png) + +#### Related Topics + +- [igTileManager](//controls/igtilemanager/landing-page.mdx) + +#### Related Samples + +- [ASP.NET MVC Basic Usage]({environment:SamplesUrl}/tile-manager/aspnet-mvc-helper) +- [Binding to JSON Data]({environment:SamplesUrl}/tile-manager/bind-json) +- [Item Configurations]({environment:SamplesUrl}/tile-manager/item-configurations) +- [Leading Tile Configuration]({environment:SamplesUrl}/tile-manager/leading-tile) + + +## igZoombar +### New control + +The `igZoombar` control provides zooming functionality to range-enabled controls. The `igZoombar` features a horizontal scroll bar, a thumbnail of the whole range, and a resizable zoom-range window. The `igZoombar` integrates out-of-the-box with the `igDataChart` control. + + ![](images/Whats_New_In_Ignite_UI_2013_Volume_2_24.png) + +#### Related Topics + +- [igZoombar](//controls/igzoombar/landingpage.mdx) + +#### Related Samples + +- [Zoombar Financial Chart]({environment:SamplesUrl}/zoombar/financial-chart) + + + + + + + diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/18-whats-new-in-2013-volume1.mdx b/docs/jquery/src/content/en/topics/whats-new/revision-history/18-whats-new-in-2013-volume1.mdx new file mode 100644 index 0000000000..3682f5ba20 --- /dev/null +++ b/docs/jquery/src/content/en/topics/whats-new/revision-history/18-whats-new-in-2013-volume1.mdx @@ -0,0 +1,672 @@ +--- +title: "What's New in 2013 Volume 1" +slug: whats-new-in-2013-volume1 +--- + +# What's New in 2013 Volume 1 + +## Topic Overview +### Purpose + +This topic provides an overview of the new features of {environment:ProductName}® 2013 Volume 1 release. + + +## New Features +### New Features summary chart + +The following table summarizes the new features for the {environment:ProductName}® 2013 Volume 1 release. Additional details are available after the summary table. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    ControlFeatureDescription
    igCombo™[Knockout Support](//controls/igcombo/configuring/knockoutjs-support.mdx)The support for the Knockout library in the `igCombo` control is intended to provide easy means for developers to use the Knockout library and its declarative syntax to instantiate and configure combo controls.
    igDataChart™[New Series](#igdatachart-new-series)The `igDataChart` now supports over 40 chart types and has added 17 new chart types this release including point, various spline charts, area charts, and stacked charts.
    igEditors™[Knockout Support](#igeditors-knockout-support)The support for the Knockout library in {environment:ProductName} editor controls is intended to provide easy means for developers to use the Knockout library and its declarative syntax to instantiate and configure {environment:ProductName} editors.
    igFunnelChart™[New Control](#igfunnelchart)The `igFunnelChart`™ is a new funnel chart control that displays data in a funnel shape. It displays sections in a top-down composition each representing the data of slices ranging from largest value to the smallest value.
    igGrid™[Column Moving feature is RTM](#iggrid-column-moving)Column Moving feature for `igGrid`/`igHierarchicalGrid` is now RTM.
    [Cell Merging is RTM](#cell-merging-rtm)Cell Merging feature for `igGrid`/`igHierarchicalGrid` is now RTM.
    [Responsive Web Design Mode](#responsive-web-design)`igGrid` Responsive Web Design (RWD) Mode feature helps you in configuring `igGrid` in Responsive Web Design web sites.
    [Column Fixing (CTP)](#column-fixing-ctp)The `igGrid` Column Fixing feature allows you to pin the columns on the left or the right of the grid so that they are always visible.
    [Knockout Support is RTM](#knockout-support)The support for the Knockout library in {environment:ProductName} `igGrid` controls is intended to provide easy means for developers to use the Knockout library and its declarative syntax to instantiate and configure {environment:ProductName} grids.
    igHierarchicalGrid™[Column Moving feature is RTM](#hierarchicalgrid-column-moving-features-rtm)Column Moving feature for `igHierarchicalGrid`™ is now RTM.
    [Cell Merging is RTM](#hierarchicalgrid-cell-merging-rtm)Cell Merging feature for `igHierarchicalGrid`™ is now RTM.
    [Knockout Support is RTM](#hierarchicalgrid-knockout-support)The support for the Knockout library in {environment:ProductName} `igHierarchicalGrid`™ controls is intended to provide easy means for developers to use the Knockout library and its declarative syntax to instantiate and configure {environment:ProductName} grids.
    igListView™[Collapsible Grouping](#iglist-collapsible-grouping)The `igListView`™ mobile list control now supports collapsible groups.
    igOlapFlatDataSource™[New Component](#igolapflatdatasource-new-component)An OLAP data source component enabling OLAP-like data analysis on flat data collections.
    igOlapXmlaDataSource™[New Component](#igolapxmladatasource-new-component)An OLAP data source component facilitating communication with an MS SSAS OLAP server.
    igPivotDataSelector™[New Control](#igpivotdataselector-new-control)`igPivotDataSelector` is an interactive UI control (a jQuery UI widget) that enables users to select data slices, typically, when data is being visualized in an [igPivotGrid](//controls/igpivotgrid/igpivotgrid.mdx)™.
    igPivotGrid™[New Control](#igpivotgrid-new-component)The `igPivotGrid` control is a data presentation control for displaying data in a pivot table. It enables users to perform complex analysis on the supplied data.
    igPivotView™[New Control](#igpivorview-new-control)`igPivotView` is a control that provides all needed tools for manipulating multidimensional (OLAP data) in a pivot grid in one place.
    igSparkline™[New Control](#igsparkline-new-control)The `igSparkline`™ is a new jQuery UI Sparkline control that has several visual elements and corresponding features through which these elements can be configured and customized.
    igSplitter™[New Control](#igsplitter-new-control)The `igSplitter`™ is a container control for managing layouts in HTML5 Web applications and sites by dividing the layout into two separate panels.
    igTree™[Knockout Support](#igtree-knockout-support)The support for the Knockout library in {environment:ProductName} editor controls is intended to provide easy means for developers to use the Knockout library and its declarative syntax to instantiate and configure {environment:ProductName} editors.
    igUpload™[General Improvements](#igupload-general-improvements)In HTML 5 enabled browsers `igUpload`™ uses [XMLHttpRequest Level 2](http://www.w3.org/TR/XMLHttpRequest2/) to get the status of the uploading.
    [Saving Files as MemoryStream](#saving-files-as-memorystream)igUpload™ allows you to process files as MemoryStream object.
    [Selecting multiple files at once for upload](#selecting-multiple-files)`igUpload`™ allows to select multiple files at once either from the browser’s open file dialog or by drag and drop. This feature works for HTML 5 enabled browsers.
    {environment:ProductNameMVC}[Support for Adding Events](#support-adding-events)You can now add client events to the {environment:ProductNameMVC} controls’ by using the `AddClientEvent` helper method. Provide an event name and function name to the helper and it renders the required JavaScript on the client to handle the event.
    TypeScript Definition File[New Feature (CTP)](#typescript-new-feature)TypeScript is a language for adding a typed layer to JavaScript aiding in the development of JavaScript applications. {environment:ProductName} now includes a TypeScript definition file, `igniteui.d.ts`, providing type definitions for all controls.
    igDoughnutChart™[New Control (CTP)](#igDoughnutchart-new-control)The `igDoughnutChart`™ control is similar to the `igPieChart` –proportionally illustrating the occurrences of a variable. The `igDoughnutChart` can display multiple variables in concentric rings, and provides built-in support for visualizing hierarchical data.
    igLayoutManager™[New Control (CTP)](#iglayoutmanager-new-control)The `igLayoutManager`™ is a layout control for managing general layout in HTML Web applications. The control supports grid, column, flow, border and vertical layouts.
    igTileManager™[New Control (CTP)](#igtilemanager-newcontrol)The `igTileManager`™ is a layout control for rendering and managing data into tiles. The tiles are displayed in a responsive grid layout.
    igRadialGauge™[New Control (CTP)](#igradialgauge-new-control)The `igRadialGauge`™ control represents a range of values arranged in a circular fashion. The `igRadialGauge` control usually contains one or more scales that represent a specific range of values. The needles then move along the scale to indicate values.
    + + +## igCombo +### Knockout Support + +The support for the Knockout library in the `igCombo` control is intended to provide easy means for developers to use the Knockout library and its declarative syntax to instantiate and configure combo controls. + +The Knockout support is implemented as a Knockout extension which is invoked initially when Knockout bindings are applied to a page and during the page life (when external updates to the View-Model take place). + +#### Related Topics + +[Configuring Knockout Support (igCombo)](//controls/igcombo/configuring/knockoutjs-support.mdx) + + +## igDataChart +### New Series + +The `igDataChart` control now supports over 40 chart types. The following new chart types have been added to the `igDataChart`™ control: + +- Bar and Column Series +- Stacked Bar +- Stacked 100 Bar +- Stacked Column +- Stacked 100 Column +- Category Series +- Point +- Stacked Area +- Stacked Line +- Stacked Spline +- Stacked Spline Area +- Stacked 100 Area +- Stacked 100 Line +- Stacked 100 Spline +- Stacked 100 Spline Area +- Polar Series +- Polar Spline +- Polar Spline Area +- Radial Series +- Radial Area +- Scatter Series +- Scatter Spline + +#### Related Samples + +- [Category Series]({environment:SamplesUrl}/data-chart/category-series) +- [Polar Series]({environment:SamplesUrl}/data-chart/polar-series) +- [Radial Series]({environment:SamplesUrl}/data-chart/radial-series) +- [Scatter Series]({environment:SamplesUrl}/data-chart/scatter-series) +- [Stacked Series]({environment:SamplesUrl}/data-chart/stacked-series) + + +## igEditors +### Knockout Support + +The support for the Knockout library in {environment:ProductName} editor controls is +intended to provide easy means for developers to use the Knockout +library and its declarative syntax to instantiate and configure Ignite +UI editors. + +The Knockout support is implemented as a Knockout extension which is invoked initially when Knockout bindings are applied to a page and during the page life when external updates to the View-Model occur the Knockout support is implemented as a Knockout extension which is. You can specify any of the editor control options that have relevance for your business case in the data-bind attribute. + +#### Related Topics + +[Configuring Knockout Support](../../02_Controls/igEditors/Config/02_Configuring Knockout Support (Editors).mdx) + + +## igFunnelChart +### New Control + +The `igFunnelChart` is a data-bound control which displays data in sorted amounts to show the relationship between sizes of category data. The chart supports tooltips, Bezier curves, selection, a chart legend, and a full range of visual customization. + +![](images/Whats_New_In_Ignite_UI_2013_Volume_1_1.png) + +#### Related Topics + +[igFunnelChart Overview](//controls/igfunnelchart/overview.mdx) + + +## igGrid +### Column Moving feature is RTM + +Column Moving is a feature of the `igGrid`/`igHierarchicalGrid` that enables changing the position of a column in the grid and, in effect, reordering of the grid’s columns. This can be performed either by the user from the grid interface or programmatically through the API of the Column Moving feature. The user can move columns by either dragging them or through selecting the desire column position from a special column moving interface (invoked with a button in the column header). Dragging is not supported on touch-enabled devices. + +![](images/Whats_New_In_Ignite_UI_2013_Volume_1_2.png) + +#### Related Topics + +[Column Moving Overview (igGrid)](//controls/iggrid/features/columns/moving/columnmoving-overview.mdx) + +### Cell Merging is RTM + +Cell Merging is a feature of `igGrid`/`igHierarchicalGrid` which allows users to merge the cells in the column visually when they have the same value (display text). + +![](images/Whats_New_In_Ignite_UI_2013_Volume_1_3.png) + +#### Related Topics + +[**Cell Merging Overview (igGrid)**](../../02_Controls/igGrid/03_Features/07_Cell Merging/00_igGrid_CellMerging_Overview.mdx) + +### Responsive Web Design Mode + +The Responsive Web Design (RWD) Mode feature of the `igGrid` control adopts the concepts of [Responsive Web Design](http://alistapart.com/article/responsive-web-design) in order to improve the user experience on different devices. Responsive Web Design mode allows you to support multiple screen sizes and form factors with a single code base and design. + +In RWD mode, the grid’s adaptation to the devices’ screen can be configured to be either: + +- Auto-hiding of columns + +This is configured through the RWD mode feature’s column hiding functionality. + +- Any structural and formatting change that can be implemented through a grid template + +To this end, the RWD Mode feature supports a set of pre-defined grid templates which replace the `igGrid` template once the RWD mode feature is enabled. Using templates allows for a wide scope of adaptations, including row hiding, using different fonts and font sizes, merging several rows/columns in one row/column, and many others. + +#### Related Topics + +[**Responsive Web Design (RWD) Mode Overview (igGrid)**](//controls/iggrid/features/responsive/responsive-web-design-mode-overview.mdx) + +### Knockout Support is RTM + +The support for the Knockout library in {environment:ProductName} `igGrid` controls is +intended to provide easy means for developers to use the Knockout +library and its declarative syntax to instantiate and configure Ignite +UI grids. + +The Knockout support is implemented as a Knockout extension which is invoked initially when Knockout bindings are applied to a page and during the page life when external updates to the View-Model happen. You can specify any of the editor control options that have relevance for your business case in the data-bind attribute. + +#### Related + +[**Grid Knockoutjs Integration**](//controls/iggrid/features/configuring-knockout-support.mdx) + +### Column Fixing (CTP) + +The `igGrid`™ Column Fixing feature allows you to pin the columns on the left or the right of the grid so that they are always visible. + +![](images/Whats_New_In_Ignite_UI_2013_Volume_1_4.png) + +#### Related Samples + +[**Column Fixing (igGrid)**]({environment:SamplesUrl}/grid/column-fixing) + + +## igHierarchicalGrid +### Column Moving feature is RTM + +Column Moving is a feature of the `igHierarchicalGrid` that enables changing the position of a column in the grid and, in effect, reordering of the grid’s columns. This can be performed either by the user from the grid interface or programmatically through the API of the Column Moving feature. The user can move columns by either dragging them or through selecting the desire column position from a special column moving interface (invoked with a button in the column header). Dragging is not supported on touch-enabled devices. + +![](images/Whats_New_In_Ignite_UI_2013_Volume_1_2.png) + +#### Related Topics + +[Column Moving Overview (igGrid)](//controls/iggrid/features/columns/moving/columnmoving-overview.mdx) + +### Cell Merging is RTM + +Cell Merging is a feature of `igHierarchicalGrid` which allows users to merge the cells in the column visually when they have the same value (display text). + +![](images/Whats_New_In_Ignite_UI_2013_Volume_1_3.png) + +#### Related Topics + +[Cell Merging Overview (igGrid)](../../02_Controls/igGrid/03_Features/07_Cell Merging/00_igGrid_CellMerging_Overview.mdx) + +### Column Fixing (CTP) + +The `igGrid`™ Column Fixing feature allows you to pin the columns on the +left or the right of the grid so that they are always visible. + +![](images/Whats_New_In_Ignite_UI_2013_Volume_1_4.png) + +#### Related Samples + +[**Column Fixing (igGrid)**]({environment:SamplesUrl}/grid/column-fixing) + +### Knockout Support is RTM + +The support for the Knockout library in {environment:ProductName} `igHierarchicalGrid` controls is intended to provide easy means for developers to use the Knockout library and its declarative syntax to instantiate and configure {environment:ProductName} grids. + +The Knockout support is implemented as a Knockout extension which is +invoked initially when Knockout bindings are applied to a page and +during the page life when external updates to the View-Model happen. You +can specify any of the editor control options that have relevance for +your business case in the data-bind attribute. + +#### Related Samples + +[**Hierarchical Grid Knockoutjs Integration**]({environment:SamplesUrl}/hierarchical-grid/bind-hgrid-with-ko) + + +## igListView +### Collapsible Grouping + +The `igListView` adds collapsible grouping to the default grouping functionality in this release. Users now can expand and collapse groups to view the sections of the data that are important to them. + +![](images/Whats_New_In_Ignite_UI_2013_Volume_1_8.png) + +#### Related Samples + +[Custom Groups]({environment:SamplesUrl}/mobile-list-view/custom-groups) + + +## igOlapFlatDataSource +### New Component + +The `igOlapFlatDataSource` component enables multi-dimensional (OLAP-like) analysis to be performed on flat data collections. Given a data collection or an [igDataSource](//data-sources/igdatasource/igdatasource.mdx)™ instance and based on the user configuration, `igOlapFlatDataSource` extracts the necessary metadata in order to create dimensions of hierarchies and measures. + +#### Related Topics + +[igOlapFlatDataSource Overview](//data-sources/olap/flat/igolapflatdatasource-overview.mdx) + + +## igOlapXmlaDataSource +### New Component + +The `igOlapXmlaDataSource` component handles the communication between a JavaScript client application and a Microsoft® SQL Server Analysis Services (SSAS) server configured with the `msmdpump.dll` HTTP data provider. It exposes a user-friendly way for obtaining data from Microsoft SQL Server Analysis Services (MS SASS) + +#### Related Topics + +[igOlapXmlaDataSource Overview](//data-sources/olap/xmla/igolapxmladatasource-overview.mdx) + + +## igPivotDataSelector +### New Control + +`igPivotDataSelector` is an interactive UI control (a jQuery UI widget) that enables users to select data slices, typically, when data is being visualized in an [igPivotGrid](//controls/igpivotgrid/igpivotgrid.mdx)™. + +![](images/Whats_New_In_Ignite_UI_2013_Volume_1_9.png) + +#### Related Topics + +[igPivotDataSelector Overview](//controls/igpivotdataselector/overview.mdx) + + +## igPivotGrid +### New Control + +The `igPivotGrid` control is a data presentation control for displaying data in a [pivot table](http://en.wikipedia.org/wiki/Pivot_table). It enables users to perform complex analysis on the supplied data. The `igPivotGrid` uses the Online Analytical Processing (OLAP) approach to present the results of multi-dimensional queries in an easy to comprehend manner. The `igPivotGrid` control uses an instance of either `igOlapFlatDataSource`™ or `igOlapXmlaDataSource`™ component as data source. + +![](images/Whats_New_In_Ignite_UI_2013_Volume_1_10.png) + +#### Related Topics + +[igPivotGrid Overview](//controls/igpivotgrid/overview.mdx) + + +## igPivotView +### New Control + +`igPivotView` is a two-panel control that combines a pivot grid and a data selector separated with a splitter. It is a construction of three individual components – [igPivotGrid](//controls/igpivotgrid/igpivotgrid.mdx)™, [igPivotDataSelector](//controls/igpivotdataselector/igpivotdataselector.mdx)™, and [igSplitter](//controls/igsplitter/igsplitter.mdx)™ – assembled together to provide in one place all needed tools for manipulating multidimensional (OLAP data) in a pivot grid. + +![](images/Whats_New_In_Ignite_UI_2013_Volume_1_11.png) + +#### Related Topics + +[igPivotView Overview](//controls/igpivotview/overview.mdx) + + +## igSparkline +### New Control + +The `igSparkline` is a new data-bound control used to embed data visualizations in line with text or tabular data. The control supports several different chart types, tooltips, normal range visualizations, markers, trend lines, and a full range of visual customization. + +![](images/Whats_New_In_Ignite_UI_2013_Volume_1_12.png) + +#### Related Topics + +[igSparkline Overview](//controls/igsparkline/overview.mdx) + + +## igSplitter +### New Control + +The `igSplitter` is a container control for managing layouts in HTML5 Web applications and sites by dividing the layout into two separate panels. The panels can be resized, collapsed or expanded. + +![](images/Whats_New_In_Ignite_UI_2013_Volume_1_13.png) + +#### Related Topics + +[igSplitter Overview](//controls/igsplitter/overview.mdx) + + +## igTree +### Knockout Support + +The support for the Knockout library in {environment:ProductName} editor controls is +intended to provide easy means for developers to use the Knockout +library and its declarative syntax to instantiate and configure Ignite +UI editors. + +The Knockout support is implemented as a Knockout extension which is +invoked initially when Knockout bindings are applied to a page and +during the page life when external updates to the View-Model happen. You +can specify any of the editor control options that have relevance for +your business case in the data-bind attribute. + +#### Related Topics + +[Configuring Knockout Support (igTree)](//controls/igtree/knockoutjs-support.mdx) + + +## igUpload +### General Improvements + +`igUpload` uses [XMLHttpRequest Level 2](http://www.w3.org/TR/XMLHttpRequest2/) to get the status of the uploading file on browsers which implement this specification. HTTP Handler is not used in this case. + +### Saving Files as MemoryStream + +A new application wide option `FileSaveType` is added for the `igUpload` MVC Wrapper. This option accepts 2 values: filestream and memorystream. By default, the option is set to filestream. This mode enables the functionality available so far in the `igUpload` MVC Wrapper. + +The new memorystream option enables saving a file as memory stream functionality. In this mode, you can process the uploaded files as `MemoryStream` objects by handling the `FileUploading` event. + +#### Related Topics + +[Saving Files as Stream (igUpload)](../../02_Controls/igUpload/01_Working with igUpload/04_igUpload_Saving_Files_as_Stream.mdx) + +### Selecting multiple files at once for upload + +You can configure whether users, when selecting the files to upload, will be able to select multiple files or only one file at a time. This functionality is managed by the file selection mode of `igUpload`. The file selection mode can be either Single File (users can select only one file at one pass) or Multiple Files (users can select multiple files at one pass). + +Multiple files selection leverages the [HTML 5 multiple attribute](http://www.w3.org/TR/html-markup/input.file.html#input.file.attrs.multiple) of the input element. + +User can add multiple files to `igUpload` in two ways: + +- From an “Open file” dialog +- By drag-and-drop on the `igUpload` control + +The functionality is available only in the browsers which support multiple attribute of the input element. + +![](images/Whats_New_In_Ignite_UI_2013_Volume_1_14.png) + +#### Related Topics + +[Configuring igUpload](../../02_Controls/igUpload/01_Working with igUpload/00_igUpload_Configuring_igUpload.mdx) + + +## {environment:ProductNameMVC} +### Support for Adding Events + +You can now add events to {environment:ProductName} controls by adding them to the ASP.NET MVC helper. Use the `AddClientEvent` method to supply the event name and a handler function name. The helper will render to the appropriate instantiation JavaScript on the client to fire the event. + +**In ASPX:** + +```csharp +<%= Html.Infragistics().Combo() + .DataSource(Model) + .TextKey("DisplayText") + .ValueKey("Value") + .AddClientEvent("selectionChanged", "comboSelectionChanged") + .Render() +%> +``` + +Note: `igUpload`, `igGrid`/`igHierarchicalGrid` and their features will get this functionality in the first service release for 13.1. + + +## TypeScript Definition File +### New Feature (CTP) + +TypeScript is a language for adding a typed layer to JavaScript aiding +in the development of JavaScript applications. {environment:ProductName} now includes a +TypeScript definition file, `igniteui.d.ts`, providing type definitions +for all controls. + +You can find the definition file in the {environment:ProductName} installation directory under `{Installation Directory}typingsigniteui.t.ds.` Refer to the following articles for additional information. + +### Related Articles + +- [Download TypeScript](http://www.typescriptlang.org/#Download) +- [Introducing TypeScript Support for {environment:ProductName}](http://www.infragistics.com/community/blogs/angel_todorov/archive/2012/10/27/introducing-typescript-support-for-ignite-ui.aspx) +- [TypeScript Tutorial](http://www.typescriptlang.org/Tutorial/) +- [TypeScript: Add Productivity and Manageability to your JavaScript Apps – Part 2](http://msdn.microsoft.com/en-us/magazine/jj983351.aspx) + + +## igDoughnutChart +### New Control (CTP) + +Released as CTP in this version, the `igDoughnutChart` displays data similar to a pie chart and can display multiple sets of data around a common center. + +![](images/Whats_New_In_Ignite_UI_2013_Volume_1_15.png) + +#### Related Samples + +- [Bind to JSON]({environment:SamplesUrl}/doughnut-chart/bind-json) +- [Bind to Collection]({environment:SamplesUrl}/doughnut-chart/bind-to-collection) + + +## igLayoutManager +### New Control (CTP) + +The `igLayoutManager` is a layout control for managing general layout in HTML Web applications. The control supports grid, column, flow, border and vertical layouts. The control will position containers in the corresponding application according to the desired layout. + +![](images/Whats_New_In_Ignite_UI_2013_Volume_1_16.png) + +#### Related Samples + +- [Border Layout from HTML Markup]({environment:SamplesUrl}/layout-manager/border-layout-markup) +- [Responsive Column Layout]({environment:SamplesUrl}/layout-manager/column-layout-markup) +- [Responsive Flow Layout]({environment:SamplesUrl}/layout-manager/flow-layout) +- [Responsive Vertical Layout]({environment:SamplesUrl}/layout-manager/vertical-layout) +- [Grid Layout with Column Spans and Row Spans]({environment:SamplesUrl}/layout-manager/grid-layout) + + +## igTileManager +### New Control (CTP) + +The `igTileManager` is a layout control for rendering and managing data into tiles. The tiles are displayed in a responsive grid layout, and the control provides corresponding layout configurations for each tile in terms to position (row and column spans) and dimensions (row and column position). + +![](images/Whats_New_In_Ignite_UI_2013_Volume_1_17.png) + +#### Related Samples + +- [Binding to JSON]({environment:SamplesUrl}/tile-manager/bind-json) +- [ASP.NET MVC Basic Usage]({environment:SamplesUrl}/tile-manager/aspnet-mvc-helper) +- [Item Configurations]({environment:SamplesUrl}/tile-manager/item-configurations) + + +## igRadialGauge +### New Control (CTP) + +The `igRadialGauge`, released as CTP, is a gauge control to show numerical values along a scale. It has a wide range of visual customization and supports a motion framework to dynamically change the control’s rendering with fluid animations. + +![](images/Whats_New_In_Ignite_UI_2013_Volume_1_18.png) + +#### Related Samples + +- [MVC Initialization]({environment:SamplesUrl}/radial-gauge/mvc-initialization) +- [Gauge Animation]({environment:SamplesUrl}/radial-gauge/motion-framework) + + +##Related Content + +###Topics + +The following topics provide additional information related to this topic. + +- [Configuring Knockout Support (igCombo)](//controls/igcombo/configuring/knockoutjs-support.mdx): This topic explains how to configure the `igCombo`™ control to bind it to View-Model objects managed by the Knockout library. + +- [Configuring Knockout Support (igEditors)](../../02_Controls/igEditors/Config/02_Configuring Knockout Support (Editors).mdx): This topic explains how to configure {environment:ProductName}® editor controls to bind to View-Model objects using the Knockout library. + +- [igFunnelChart Overview](//controls/igfunnelchart/overview.mdx): This topic provides conceptual information about the `igFunnelChart`™ control including its main features, minimum requirements, and user functionality. + +- [Column Moving Overview (igGrid)](//controls/iggrid/features/columns/moving/columnmoving-overview.mdx): This topic explains conceptually the Column Moving feature of the `igGrid`™ and the functionalities this feature provides. + +- [Cell Merging Overview (igGrid)](../../02_Controls/igGrid/03_Features/07_Cell Merging/00_igGrid_CellMerging_Overview.mdx): This topic explains the `igGrid`™ control’s Cells Merging feature and its functionality. It contains code examples demonstrating how to enable and configure cell merging in the `igGrid`. + +- [Responsive Web Design (RWD) Mode Overview (igGrid)](//controls/iggrid/features/responsive/responsive-web-design-mode-overview.mdx): This topic explains conceptually the Responsive Web Design (RWD) Mode feature of the `igGrid`™ control and the functionalities this feature provides. + +- [igOlapFlatDataSource Overview](//data-sources/olap/flat/igolapflatdatasource-overview.mdx): This topic provides an overview of the `igFlatDataSource`™ component and its main features. + +- [igOlapXmlaDataSource Overview](//data-sources/olap/xmla/igolapxmladatasource-overview.mdx): This topic provides an overview of the `igXmlaDataSource`™ component and its main features. + +- [igPivotDataSelector Overview](//controls/igpivotdataselector/overview.mdx): This topic provides conceptual information about the `igPivotDataSelector`™ control including its main features, minimum requirements, and user functionality. + +- [igPivotGrid Overview](//controls/igpivotgrid/overview.mdx): This topic provides conceptual information about the `igPivotGrid`™ control including its main features, minimum requirements, and user functionality. + +- [igPivotView Overview](//controls/igpivotview/overview.mdx): This topic provides conceptual information about the `igPivotView`™ control including its main features, minimum requirements, and user functionality. + +- [igSparkline Overview](//controls/igsparkline/overview.mdx): This topic provides an overview of the `igSparkline`™ control, its benefits, and the supported chart types. + +- [igSplitter Overview](//controls/igsplitter/overview.mdx): This topic provides conceptual information about the `igSplitter`™ control including its features and user functionality. + +- [Configuring Knockout Support (igTree)](//controls/igtree/knockoutjs-support.mdx): This topic explains how to configure the `igTree`™ control to bind to View-Model objects managed by the Knockout library. + +- [Saving Files as Stream (igUpload)](../../02_Controls/igUpload/01_Working with igUpload/04_igUpload_Saving_Files_as_Stream.mdx): This topic explains how to process and save upload files as either file or memory streams. A detailed procedure is provided on saving files as memory stream by individual processing of each uploaded file chunk. + +- [Configuring igUpload](../../02_Controls/igUpload/01_Working with igUpload/00_igUpload_Configuring_igUpload.mdx): This topic explains, with code examples, how to configure the `igUpload`™ control. + + + + + + + diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/19-whats-new-in-2012-volume2.mdx b/docs/jquery/src/content/en/topics/whats-new/revision-history/19-whats-new-in-2012-volume2.mdx new file mode 100644 index 0000000000..3c9d3f8089 --- /dev/null +++ b/docs/jquery/src/content/en/topics/whats-new/revision-history/19-whats-new-in-2012-volume2.mdx @@ -0,0 +1,374 @@ +--- +title: "What's New in 2012 Volume 2" +slug: whats-new-in-2012-volume2 +--- + +# What's New in 2012 Volume 2 + +## New Features +### Features overview + +The following table summarizes the new features for the {environment:ProductName}™ 2012 Volume 2 release. Additional details are available after the summary table. + +- [igHtmlEditor control](#ightmleditor-control): The new `igHtmlEditor`™ is a jQuery WYSIWYG control and provides HTML editing capabilities in the web browser. + +- [igDialog control](#igdialog-control): The Infragistics® `igDialog`™ is a widget based on jQuery UI that provides a robust dialog layout for your application. + +- [Cascading igCombo](#cascading-igcombo): The cascading functionality of the `igCombo`™ control requires configuring at least two instances of the control bound together in parent-child relationships. When a value from the parent `igCombo` is selected, then the values in the child are filtered. + +- [Adding and Removing Nodes from igTree](#add-remove-nodes-igtree): The Adding and Removing features of the `igTree`™ control enables users to add and remove tree nodes. + +- [Drag-and-Drop for igTree](#drag-drop-tree): The Drag-and-Drop feature of the `igTree` control enables users to drag-and-drop tree nodes. Dragging and dropping can be performed within the same tree or between two different trees. + +- [Multi-Column Headers](#multi-column-headers): Multi-Column Headers feature is available for the `igGrid` and `igHierarchicalGrid`™. + +- [REST Support](#rest-support): Binding to REST Services is available for the `igGrid` and `igHierarchicalGrid` + +- [Column moving (CTP)](#column-moving-ctp): Column moving allows you to reorder columns. + +- [DataTable and DataSet binding for igGrid and igHierarchicalGrid](#datatable-dataset-binding): Binding to a DataTable or DataSet is available for the `igGrid` and `igHierarchicalGrid` + +- [Unbound columns](#unbound-columns): The unbound column provides a way to define a column in the `igGrid` and `igHierarchicalGrid` which is not bound to a data source and can be used for rendering calculated or otherwise custom values + +- [Row Edit Template](#row-edit-template): Starting with version 12.2, the updating feature of the `igGrid` provides Row Edit Template and allows the user to edit records in a pop up dialog, as compared to inline editing. + +- [Grouping Dates](#grouping-dates): The grid’s grouping feature now supports richer functionality when grouping date values. + +- [ExcelNavigationMode & HorizontalMoveOnEnter](#excel-navigation-mode): In the `igGrid` and `igHierarchicalGrid` `updating` feature provides two new properties. `ExcelNavigationMode` allows you to position the cursor inside the edited cell using the arrows keys. `HorizontalMoveOnEnter` enables moving to the next cell when pressing the Enter key while editing a cell. + +- [igMap Control is RTM](#igmap-rtm): The `igMap`™ control is released for displaying geographic maps. + +- [Financial indicators added to the igDataChart control](#financial-indicators): The `igDataChart`™ control now supports 35 new financial series for displaying different financial indicators about stock prices. + +- [Hover and Null Support for igRating (Mobile)](#hover-null-support-igrating): It’s possible to set the value of the `igRating`™ Mobile control to null, if the control has been rated previously. When you use the `igRating`™ Mobile control in a Desktop Browser, the rating displays a mouse hover style. + +- [Generating Direct Links to Child Layouts in igListView](#generating-direct-links): The `igListView`™ control contains new functionality allowing you to generate static links for its child layouts + +- [Mobile Button](#mobile-button): The Button ASP.NET MVC helper is a server-side helper that renders the widget. + +- [Mobile CheckBox](#mobile-checkbox): The CheckBox ASP.NET MVC helper is a server-side helper that renders the widget. + +- [Mobile CheckBoxGroup](#mobile-checkbox-group): The CheckBoxGroup ASP.NET MVC helper allows you to combine several individual check boxes under one context. + +- [Mobile Collapsible](#mobile-collapsible): The Collapsible ASP.NET MVC helper produces a collapsible block of content. + +- [Mobile CollapsibleSet](#mobile-collapse-set): The Collapsible Set ASP.NET MVC helper produces a collapsible block of content which consist of collapsible controls inside. + +- [Mobile Link](#mobile-link): The Link ASP.NET MVC helper is used to render a HTML reference. It has several additional methods for customizing the Link. + +- [Mobile NavBar](#mobile-navbar): The NavBar ASP.NET MVC helper defines a menu of items that reference external pages or internal page blocks. + +- [Mobile Page, PageContent, PageFooter, PageHeader](#mobile-page): The {environment:ProductNameMVC} allow you to create jQuery Mobile pages using Razor or ASPX syntax. + +- [Mobile Popup](#mobile-popup): Popup is a widget that allows you to display HTML content in a popup window. + +- [Mobile RadioButtonGroup](#mobile-radio-button): The RadioButtonGroup ASP.NET MVC helper renders a set of options but only allows you to select one of them. + +- [Mobile SelectMenu](#mobile-select-menu): The SelectMenu ASP.NET MVC helper produces a jQuery Mobile selectmenu widget based on a native select element. + +- [Mobile Slider](#mobile-slider): The Slider ASP.NET MVC helper is used to render a jQuery Mobile slider widget in an ASP.NET view. + +- [Mobile TextBox](#mobile-textbox): The TextBox ASP.NET MVC helper renders standard HTML inputs. + +- [Mobile ToggleSwitch](#mobile-toggle-switch): The Toggle Switch ASP.NET MVC helper produces a binary “flip switch” that is used for on/off or true/false data input. + + +## igHtmlEditor control + +The `igHtmlEditor` control is a jQuery HTML editor control that features standard HTML editing capabilities. Formatting options include font face, font size, text and image alignment and link and table support. Further information regarding the classes, options, events, methods and themes of this API are available under the associated tabs above. + +![](images/Whats_New_in_2012_Volume_2_Latest2_1.png) + +###Related Topics: + +- [igHtmlEditor Overview](//controls/ightmleditor/overview.mdx) + +## igDialog control + +Infragistics `igDialog` is a widget based on jQuery UI that provides the ability to show target elements as the content of a dialog. The content of the `igDialog` can be any valid HTML code as well as other dialog windows. The `igDialog` widget is applied on a HTML DIV or IFRAME element and the content that is inside that DIV/IFRAME will be the content of the dialog window. + +**In HTML:** + +```html +
    + igDialog Content +
    +``` + +![](images/Whats_New_in_2012_Volume_2_Latest2_2.png) + +### Related Topics: + +- [igDialog Overview](../../02_Controls/igDialog/00_igDialog Overview.mdx) + +## Cascading igCombo + +The cascading functionality of the `igCombo` control requires configuring at least two instances of the control bound together in parent-child relationships. When a value from the parent `igCombo` is selected, then the values in the child are filtered. This is functionality that the `igCombo` delivers “out of the box”: all you need is to configure parent and child `igCombos` and their data sources. + +![](images/Whats_New_in_2012_Volume_2_Latest2_3.png) + +## Adding and Removing Nodes from igTree + +The Adding and Removing feature of `igTree` control enables users to add and remove tree nodes. + +![](images/Whats_New_in_2012_Volume_2_Latest2_4.png) + +![](images/Whats_New_in_2012_Volume_2_Latest2_5.png) + +### Related Topics: + +- [Adding and Removing Nodes Overview and Examples (igTree)](../../02_Controls/igTree/06_Adding and Removing Nodes/00_igTree_Adding_Removing_Nodes_Overview_Examples.mdx) + +## Drag-and-Drop for igTree + +Dragg-and-drop can be performed within the same `igTree` control or between two `igTree` controls. The latter is configured in addition to the “normal” (within the same tree) drag-and-drop. You can specify the way in which you want the Drag-and-Drop feature to operate. This is managed by configuring one of the several supported [Drag-and-Drop modes](../../02_Controls/igTree/07_Drag and Drop/00_igTree_Drag-and-Drop_Overview.mdx#drag-drop-modes). + +![](images/Whats_New_in_2012_Volume_2_Latest2_6.png) + +### Related Topics: + +- [Drag-and-Drop Overview (igTree)](../../02_Controls/igTree/07_Drag and Drop/00_igTree_Drag-and-Drop_Overview.mdx) + +## Multi-Column Headers + +The `igGrid` and `igHierarchicalGrid` now feature multi-column headers. The multi-column headers feature provides header grouping and it’s well integrated with Hiding, Resizing and Column Moving features. + +![](images/Whats_New_in_2012_Volume_2_Latest2_7.png) + +### Related Topics: + +[Multi-Column Headers (igGrid)](//controls/iggrid/features/columns/multi-headers/multicolumnheaders-landingpage.mdx) + +[Multi-Column Headers (igHierarchicalGrid)](//controls/ighierarchicalgrid/features/multicolumnheaders-configuring.mdx) + +## REST Support + +The new type `$.ig.RESTDataSource` which inherits from `$.ig.DataSource` provides REST support. The `igGrid` and `igHierarchicalGrid` support REST binding using the `$.ig.RESTDataSource` internally. They inherit all `$.ig.RESTDataSource` options, meaning these options can be set directly on the grid. + +![](images/Whats_New_in_2012_Volume_2_Latest2_8.png) + +### Related Topics: + +[REST Updating (igGrid)](//controls/iggrid/features/rest-updating.mdx) + +[Binding igHierarchicalGrid to REST Services](//controls/ighierarchicalgrid/bind/binding-to-rest-services.mdx) + +## Column moving (CTP) + +Column moving allows you to reorder columns. It has two modes. + +Immediate mode moves the column header while you are dragging it and animatedly swaps the other column. Actual moving of the column contents is performed when you drop the column header. + +Deferred mode shows arrows which show the position where the column will be placed if you drop it. + +In the screenshot below you can see the column moving feature woring in immediate mode. + +![](images/Whats_New_in_2012_Volume_2_Latest2_9.png) + +### Related Samples: + +[Column moving (igGrid)]({environment:SamplesUrl}/grid/column-moving) + +## DataTable and DataSet binding for igGrid and igHierarchicalGrid + +Binding to ADO.NET DataTable and DataSet is available for `igGrid` and `igHierarchicalGrid`. There is a new property introduced the `igGrid` ASP.NET MVC helper: `DataMember`. When set, the grid looks for the name of the DataTable matching the `DataMember` value from the DataSet to which the grid is bound. The property is useful when `AutoGenerateLayouts` is False and the layouts are defined manually. + +Another change made in v12.2 is that `AutogenerateLayouts` is false by default. + +![](images/Whats_New_in_2012_Volume_2_Latest2_10.png) + +###Related Topics: + +[Binding igGrid to DataTable (igGrid)](//controls/iggrid/binding/binding-to-datatable.mdx) + +[Binding igHierarchialGrid to DataSet (igHierarchialGrid)](//controls/ighierarchicalgrid/bind/binding-to-dataset.mdx) + +## Unbound columns + +The unbound column provides a way to define a column in the `igGrid` and `igHierarchicalGrid` which is not bound to a data source and can be used for rendering calculated or otherwise custom values. There is a new property introduced the `igGrid` : `MergeUnboundColumns`. It defines how the unbound columns are sent to the client when the type of the data source is remote. + +When `MergeUnboundColumns` is true then the unbound values are merged into the data rows inside JSON response. Otherwise the unbound values are saved in the metadata property of the JSON response. + +When `MergeUnboundColumns` =true and you haven’t set unbound values through `SetUnboundValues` then the whole data source is traversed and all values are set with the default value (null value) for the unbound columns. + +![](images/Whats_New_in_2012_Volume_2_Latest2_11.png) + +### Related Samples: + +[Unbound Columns(igGrid)]({environment:SamplesUrl}/grid/unbound-column) + +[Unbound Columns(igHierarchicalGrid)]({environment:SamplesUrl}/hierarchical-grid/unbound-column) + +## Row Edit Template + +Starting with version 12.2, the updating feature of the `igGrid` provides Row Edit Templates and allows the end user to edit records in a pop up dialog, as compared to inline editing. + +The feature is implemented as part of grid updating. The `editMode` option has a new value added: “`rowEditTemplate`”, apart from the “row” and “cell” which exist currently. + +When the row edit template is automatically generated, it is based on the data types of the columns. It uses the columnSettings for updating feature in order to determine what kind of editor will be rendered. + +You can define a row edit template also by specifying as a template string using `rowEditDialogRowTemplate` option or referencing a template element using `rowEditDialogRowTemplateID` option. These options can be used to format and style the row edit dialog. + +There is validation integration in the row edit template. + +![](images/Whats_New_in_2012_Volume_2_Latest2_12.png) + +### Related Topics: + +[Row Edit Template(igGrid)](igGrid-Updating-RowEditTemplate.html) + +[Configure Row Edit Template(igGrid)](igGrid-Updating-RowEditTemplate-Configuring.html) + +## Group by Dates + +The `groupBy` feature now allows the user to group by dates, taking into account the format. The improvement applies to both remote and local grouping. + +With this new functionality, the date appears using the format “*yyyy/dd/mm*” and it is grouped by comparing the year, day, and month. If the date is formatted as “*yyyy/dd/mm hh:mm*”, it will be compared using those values and grouped accordingly. + +## ExcelNavigationMode & HorizontalMoveOnEnter + +In the `igGrid` and `igHierarchicalGrid` updating feature provides two new options. ExcelNavigationMode allows you to position the cursor inside the edited cell using the arrows keys. Its default value is “false”. + +HorizontalMoveOnEnter enables moving to the next editable cell when pressing the Enter key while editing a cell. Its default value is “false”. + +## igMap Control is RTM + +The `igMap` control for displaying geographic maps is released. It facilitates drawing maps with custom overlays in HTML5 web applications and sites. It uses the Canvas tag in HTML5 to plot the actual maps and visualize data on the maps. The control allows various geographic visualizations by providing five geographic series types: + +- Geographic Symbol series +- Geographic Shape series +- Geographic Polyline series +- Geographic Scatter Area series +- Geographic Contour Line series + +The following is an example of a geographic map showing the World with all countries colored depending on their population size using a Geographic Shape series. + +![](images/Whats_New_in_2012_Volume_2_Latest2_13.png) + +### Related Topics: + +- [igMap Overview ](//controls/igmap/overview-igmap.mdx) + +## Financial indicators added to the igDataChart control + +The `igDataChart` control now supports 35 new financial series for displaying different financial indicators.. The financial indicator series accepts data in the same format as the existing financial series, i.e. records have properties like Open, Close, High and Low [price] for depicting a stock price during a certain period of time. Financial indicators show different characteristics of price changes and provide additional information and insight to financial analysts. + +The followingis a picture of a regular financial chart along with a chart displaying on of the new supported financial indicators. + +![](images/Whats_New_in_2012_Volume_2_Latest2_14.png) + +### Related Samples: + +- [Financial Indicators](//controls/igdatachart/databinding.mdx) + +## Hover and Null Support for igRating (Mobile) + +It’s possible to set the value of the `igRating` Mobile control to null if the control has been rated before. This can be achieved by using the swipe events. If you swipe by starting from the current value and ending at the beginning of the control, the rating value will be set to null. This is not achievable under the desktop environment, when the mouse is used. + +When you use the `igRating`™ Mobile control in a Desktop Browser, the +rating displays a mouse hover style. + +### Related Topics: + +- [igRating Overview ](//controls/igrating/overview.mdx) + +## Generating Direct Links to Child Layouts in igListView + +The `igListView` control enables you to generate static links for its child layouts. Having static links for child layouts makes it possible to navigate directly to them from some external web page. + +![](images/Whats_New_in_2012_Volume_2_Latest2_15.png) + +### Related Topics: + +- [Generating Direct Links to Child Layouts](igListView-Generating-Direct-Links-to-Child-Layouts.html) + +## Mobile Button + +The Button ASP.NET MVC helper is a server-side helper that renders the control. It allows you to add a button into your ASP.NET MVC application and configure its state either on the client or on the server. + +![](images/Whats_New_in_2012_Volume_2_Latest2_16.png) + +## Mobile CheckBox + +The CheckBox ASP.NET MVC helper is a server-side helper that renders the control. It allows you to add a check box in your ASP.NET MVC application and configure its state either on the client or on the server. This means that you can use the jQuery Mobile plugin to dynamically modify the checkbox. + +![](images/Whats_New_in_2012_Volume_2_Latest2_17.png) + +## Mobile CheckBoxGroup + +The CheckBoxGroup ASP.NET MVC helper allows you to combine several individual check boxes under one context. This means that you can use the jQuery Mobile plugin to dynamically modify the checkboxes. For more information about configuring and using the individual check box, review the [CheckBox](CheckBox.html) topic. + +![](images/Whats_New_in_2012_Volume_2_Latest2_18.png) + +## Mobile Collapsible + +The Collapsible ASP.NET MVC helper produces a collapsible block of +content. + +![](images/Whats_New_in_2012_Volume_2_Latest2_19.png) + +There is an option to set the header of the collapsible block to look like a clickable button. The content of the collapsible block can contain any HTML content. + +## Mobile CollapsibleSet + +The CollapsibleSet ASP.NET MVC helper produces a collapsible layout container. It groups the collapsible controls and allows only one collapsible of the group to be expanded at one time. If a collapsed item isexpanded, the previous one gets collapsed automatically. + +## Mobile Link + +The Link ASP.NET MVC helper is used to render an HTML hyperlink. It has several additional methods that allow configuring the Link and customizing it. + +![](images/Whats_New_in_2012_Volume_2_Latest2_20.png) + +![](images/Whats_New_in_2012_Volume_2_Latest2_21.png) + +## Mobile NavBar + +The NavBar ASP.NET MVC helper defines a menu of items that are a reference to external pages or internal page blocks. The control has an API for configuring and styling individual items as well as the NavBar as a whole. The NavBar helper renders a jQuery Mobile widget. + +![](images/Whats_New_in_2012_Volume_2_Latest2_22.png) + +## Mobile Page, PageContent, PageFooter, PageHeader + +The Page ASP.NET MVC helper is used to define the container for a single Page in the context of . Between the opening and closing fragments of the Page wrapper, you can define the Page HTML content, as well as define [Page Content](PageContent.html), [Page Footer](PageFooter.html), [Page Header](PageHeader.html) or other jQuery mobile controls. You can define several pages in a MVC View, but only the first one will be active. If you want to change the page you will need to do this manually. The Page MVC helper renders a jQuery Mobile [Page](Page.html) widget. For more information about page anatomy and page transition, please review this [list of tutorials](http://jquerymobile.com/demos/1.1.1/docs/pages/index.html), provided by jQuery Mobile. + +## Mobile Popup + +The Popup is a widget that allows you to display HTML content in a popup window. The content can be any HTML content. You can use HTML anchors to easily open the popup and it has a set of features that can be used right out of the box. + +![](images/Whats_New_in_2012_Volume_2_Latest2_23.png) + +## Mobile RadioButtonGroup + +The RadioButtonGroup ASP.NET MVC helper renders a set of options but only allows you to select one of them. Similar to some other controls, the RadioButtonGroup ASP.NET MVC helper uses a standard HTML input element and then adds additional markup and functionality to support a touch environment. For example, rather than the normal vertical positioning of all the radio buttons, RadioButtonGroup ASP.NET MVC helper allows you to have a horizontal list of buttons as well. You can also access any of the radio buttons using the jQuery Mobile widget. + +![](images/Whats_New_in_2012_Volume_2_Latest2_24.png) + +## Mobile SelectMenu + +The SelectMenu ASP.NET MVC helper produces a jQuery Mobile selectmenu +widget based on a native select element. + +## Mobile Slider + +The Slider ASP.NET MVC helper is used to render a jQuery Mobile slider widget in an ASP.NET view. A slider is a common UI element on mobile devices used for numeric data input. The following screenshot shows a slider with default options and values: + +![](images/Whats_New_in_2012_Volume_2_Latest2_25.png) + +## Mobile TextBox + +The TextBox ASP.NET MVC helper renders standard HTML inputs. Once rendered, jQuery Mobile optimizes them for mobile and touch devices. This means that you can use the jQuery Mobile plugin to dynamically modify the inputs. + +![](images/Whats_New_in_2012_Volume_2_Latest2_26.png) + +## Mobile ToggleSwitch + +The Toggle Switch ASP.NET MVC helper produces a binary “flip switch” that is used for on/off or true/false data input. Such virtual switches are common User Interface (UI) elements in mobile devices. The Toggle Switch is a track slider with two alternative positions (left and right) representing the two states of the “switch” (Enabled and Disabled). There is also a label indicating the current state and different color schemes for each of the states. + +![](images/Whats_New_in_2012_Volume_2_Latest2_27.png) + + + + + + + diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/20-jquery-whats-new-12-1-landing-page.mdx b/docs/jquery/src/content/en/topics/whats-new/revision-history/20-jquery-whats-new-12-1-landing-page.mdx new file mode 100644 index 0000000000..f23e7e7acd --- /dev/null +++ b/docs/jquery/src/content/en/topics/whats-new/revision-history/20-jquery-whats-new-12-1-landing-page.mdx @@ -0,0 +1,257 @@ +--- +title: "What's New in 2012 Volume 1" +slug: jquery-whats-new-12-1-landing-page +--- + +# What's New in 2012 Volume 1 + +## New Features + +The following table summarizes the new features of {environment:ProductName}™ 2012 Volume 1 release. Additional details are available after the summary table. + +- [Hierarchical grid GroupBy](#hierarchical-grid-grouping): The grouping functionality available for flat grids is now fully supported for hierarchical grids. + +- [Hierarchical grid selection](#hierarchical-grid-selection): The selection functionality available for flat grids is now fully supported for hierarchical grids. + +- [Hierarchical grid row selectors](#hierarchical-grid-row-selectors): The row selection functionality for flat grids is now fully supported for hierarchical grids. + +- [Checkbox editor for igGrid](#checkbox-editor): Checkbox editors are now available for the `igGrid`™ control for Boolean data type columns. + +- [Grid net transactions](#grid-net-transactions): The grid editing functionality has been optimized to report only net transactions from the control when data is updated, added or deleted. + +- [Grid Virtualization](#grid-virtualization): Virtualization is now supported for hierarchical grids and in GroupBy mode to allow better user interface performance. + +- [AutoGenerateColumns property in the Grid MVC wrapper](#autogeneratecolumns-mvc): The behavior of the AutoGenerateColumns property is changed: if set to true along with explicitly defined columns with individual column options the Grid MVC wrapper first renders the defined columns and then automatically binds new columns to all the data source fields, and renders them after the defined columns. + +- [igHierarchicalGrid binding to OData](#hierarchical-grid-odata): When binding `igHierarchicalGrid` to OData service you do not need to use JSONPDataSource as middle layer and instead you can directly set the OData Service URL as grid data source. + +- [Charting](#charting): The `igDataChart`™, `igPieChart`™ and `igChartLegend`™ controls are new charting controls rendering rich data visualizations on an HTML5 canvas. + +- [Charts Motion Framework](#charts-motion-framework): The charting controls support the new Motion Framework which allows chart contents to be animated in different ways. + +- [Templating engine for jQuery controls](#templating-engine): The new `igTemplating`™ engine has been added to the {environment:ProductName} bundle. The `igTemplating` engine exposes powerful capabilities to create templates for dynamic text rendering inside jQuery controls. + +- [Mobile list view control](#mobile-list): The new `igListView`™ control provides list display and interaction functionality for jQuery Mobile platform. + +- [Mobile rating control](#mobile-rating): The new `igRating`™ control for mobile devices has been implemented separately from the existing `igRating` control to address unique requirements of mobile and touch device environments. + +- [iOS theme for mobile controls](#mobile-ios-theme): The new iOS theme for iPhone applications has been added to the {environment:ProductName} library to provide better looks for mobile device applications. + +- [Touch support](#touch-support): All controls in the {environment:ProductName} library had been designed and tested to support touch interface for mobile devices. + +- [Combo box load on demand](#combo-load-on-demand): Combo box load on demand is a new feature which improves `igCombo`™ performance by loading large sets of remote data on batches and not all at once. + +- [Support for MVC validation](#mvc-validation): Support for MVC validation using data annotations has been incorporated into combo and editor controls. + +- [New jQuery themes & JavaScript resources structure](#themes-resources-structure): All JavaScript and CSS resources in the {environment:ProductName} library have been organized in a new folder structure and some of them have been renamed so that it is easier for developers using the library to figure out the purpose and location of each item. Note that this is a breaking change. + +- [CSS/JS resources loader](#resources-loader): The new `igLoader` control has been added to allow easier JavaScript and CSS resources loading into web pages and in relation to the new resources structure. + +- [Metro theme](#metro-theme): The new Metro theme has been added to allow better integration of {environment:ProductName} controls into the new Metro UI for upcoming versions of Microsoft® Windows®. + + +## Hierarchical grid GroupBy + +The grouping functionality available for flat grids is now fully supported for hierarchical grids. It allows flexible grouping of rows based on one or more columns, calculation of summary values (subtotals) and configuring UI elements like expand/collapse button tooltips, group header row template and others. On the screenshot below you can see highlighted the main elements of the GroupBy feature: the grouping area at the top, and group header rows on root and child level. Note how grouped columns in child layouts are prefixed by the child layout name in the group-by area. + +![](images/Whats_New_in_2012_Volume_1_1.png) + +### Related Topics: + +- [igHierarchicalGrid Grouping Overview](//controls/ighierarchicalgrid/features/grouping/grouping-overview.mdx) + +## Hierarchical grid selection + +The selection feature enables the selection of the rows and cells in the `igHierarchicalGrid`™ control. Its functionality closely follows the Microsoft® Windows Explorer™ and Microsoft® Excel™ selection and activation behaviors. It is possible to configure single only or multiple item selection. If multiple selection is enabled in a hierarchical grid the user can select multiple items in a single layout only. On the screenshot below you can see a hierarchical grid with some selected cells. + +![](images/Whats_New_in_2012_Volume_1_2.png) + +### Related Topics: + +- [igHierarchicalGrid Selection Overview](//controls/ighierarchicalgrid/features/selection/jquery-ighierarchical-grid-selection-overview.mdx) + +## Hierarchical grid row selectors + +The row selection feature provides the user with the functionality to select entire rows by clicking on the row selector column placed on the left side of the first grid column. This functionality is provided by the `igRowSelectors`™ widget. In addition, to this main functionality, the widget provides optional row numbering and checkboxes for row selection. This widget works closely with the Selection feature but can also be used separately for its row numbering capability. There is a new option `showCheckBoxesOnFocus` which when enabled allows checkbox behavior to be modified: checkboxes do not appear initially and when the user clicks to select a row checkboxes show to make multiple selection easier. On the screenshot below you can see a grid with row selection column highlighted and one row selected. + +![](images/Whats_New_in_2012_Volume_1_3.png) + +### Related Topics: + +- [Enabling Row Selectors for igHierarchicalGrid](//controls/ighierarchicalgrid/features/row-selectors/enabling-rowselectors.mdx) + +## Checkbox editor for igGrid + +Boolean data columns can be rendered with checkboxes in flat and hierarchical grids. This provides user-friendly experience for dealing with Boolean type data. On the screenshot below you can see a grid with a Boolean column with checkbox editors. + +![](images/Whats_New_in_2012_Volume_1_4.png) + +### Related Topics: + +- [igGrid Columns and Layout](//controls/iggrid/features/columns-and-layout.mdx) +- [igHierarchicalGrid Columns and Layouts](//controls/ighierarchicalgrid/features/columns-and-layouts.mdx) + +## Grid net transactions + +The grid editing functionality has been improved to report only net transactions from the grid control when data is updated, added or deleted. That means transactions which mutually cancel each other will not be reported and the client applications will get only the effective changes on the underlying data. For example. If a row is added and then deleted neither insert, nor delete transaction will be reported. On the picture below you can see a grid with an updated and deleted row. + +![](images/Whats_New_in_2012_Volume_1_5.png) + +### Related Topics: + +- [igGrid Updating](//controls/iggrid/features/updating/updating.mdx) + +## Grid Virtualization + +The virtualization technology used for better performance when displaying large data sets has been improved to support hierarchical grids and GroupBy mode for hierarchical grids. Now there are two virtualization modes: fixed and continuous. Fixed mode is the existing virtualization embedded in {environment:ProductName} controls. Continuous mode is a new development that supports hierarchical grid and the group by feature to handle situations with variable child row count. + +### Related Topics: + +- [igGrid Virtualization Overview](//controls/iggrid/features/virtualization/virtualization-overview.mdx) +- [igHierarchicalGrid Virtualization Overview](//controls/ighierarchicalgrid/features/virtualization/virtualization-overview.mdx) + +## AutoGenerateColumns property in the Grid MVC wrapper + +Now the `AutoGenerateColumns` property in the MVC wrapper behaves the in the same way as the corresponding property in the `igGrid` widget. If you have `AutoGenerateColumns` property set to true along with defined columns settings array describing the individual column options the Grid MVC wrapper first renders the explicitly defined columns and then automatically binds all other columns to all the data source fields, and renders them after the defined columns. This is different from the Grid MVC behavior from the previous 11.2 release. There if you have definition of column settings and `AutoGenerateColumns` property set to true, only the defined columns are taken in an account. + +Note: This change is present from the 11.2 Service Release. + +## igHierarchicalGrid binding to OData + +When binding `igHierarchicalGrid` to OData service you do not need to use `JSONPDataSource` as middle layer and instead you can directly set OData Service URL as a grid data source. If you are not using this approach it is possible to encounter some of the following problems due to the complex nested schema: + +- Root remote feature does not work +- Children from second level may not appear at all, accompanied by JavaScript error. + +Note: This change is present from the 11.2 Service Release. + +## Charting + +A new set of controls: `igDataChart`™, `igPieChart`™ and `igChartLegend`™ have been added to the library to address needs for working with charts in web pages. The controls are based on the HTML5 Canvas element and Canvas API. + +- `igDataChart` -allows various types of data series to be represented like financial, bar/column, scatter, polar and radial. +- `igPieChart` -designed to provide pie charts +- `igChartLegend` - used internally to produce legends for charts. + +On the screenshot below you can see a column chart with three data series. + +![](images/Whats_New_in_2012_Volume_1_6.png) + +### Related Topics: + +- [igDataChart Overview](//controls/igdatachart/overview/overview.mdx) +- [igPieChart Overview](//controls/igpiechart/overview.mdx) + +## Charts Motion Framework + +The Motion Framework for charts allows developers using the {environment:ProductName} chart controls to animate the contents of a chart to increase visual appeal and imply trends or other meaning behind the data. The basic principle behind the framework is that whenever data behind the chart is updated the corresponding API method of the `igDataChart` control is called to initiate chart animation. + +### Related Topics: + +- [Motion Framework for Charts](//controls/igdatachart/configuring/animating/motion-framework.mdx) + +## Templating engine for jQuery controls + +The new `igTemplating` engine exposes to developers powerful capabilities to create templates for dynamic content rendering inside {environment:ProductName} controls. This engine is used throughout the {environment:ProductName} library instead of the jQuery templating plugin wherever the text in UI elements can be customized to display contents dynamically. On the screenshot below a template is applied on the first two columns of a data grid. + +![](images/Whats_New_in_2012_Volume_1_7.png) + +### Related Topics: + +- [igTemplating Overview](../../06_Infragistics-Templating-Engine/01_igTemplating Overview.mdx) + +## Mobile list view control + +The new `igListView`™ control provides list display and interaction functionality for jQuery Mobile platform. The mobile list view control can be bound to all the data sources available to `igDataSource` as well as to UL or OL HTML elements. The control supports hierarchical navigation following the jQuery Mobile navigation concepts. Templates can be used to customize the display and layout of list elements. Sorting, filtering and grouping functionality are also available. The mobile list view control supports load on demand to improve performance at runtime. + +![](images/Whats_New_in_2012_Volume_1_8.png) + +### Related Topics: + +- [igListView Overview](igListView-Overview.html) + +## Mobile rating control + +The new `igRating` control for mobile devices has been implemented to support mobile and touch applications when customer ratings of items are a requirement. This is a separate control from the existing `igRating` control and its target is mobile devices with touch capability. + +![](images/Whats_New_in_2012_Volume_1_9.png) + +### Related Topics: + +- [igRating (Mobile) Overview](igRating%28Mobile%29-Overview.html) + +## iOS theme for mobile controls + +The new iOS theme for the mobile {environment:ProductName} controls has been implemented to target mobile devices. Its purpose is to provide more consistent look and better integration into iPhone and iPad mobile and touch capable applications. + +![](images/Whats_New_in_2012_Volume_1_10.png) + +## Touch support + +All the Infragistics jQuery controls support touch interaction. New features and components have been added so that all the controls are touch interface compatible. The concept behind Infragistics jQuery controls is that they should look and behave the same way under Desktop and Touch platforms. + +![](images/Whats_New_in_2012_Volume_1_11.png) + +### Related Topics: + +- [Touch Support for {environment:ProductName} Controls](//general-and-getting-started/touch-support-for-igniteui-for-jquery-controls.mdx) + +## Combo box load on demand + +The `igCombo` control supports configurable Load-on-Demand feature. Enabling load-on-demand significantly reduces the bandwidth and processing overhead on both the server and the client. + +If Load-on-Demand is enabled, the user should first be able to see a scrollbar in the drop-down container, and if they scroll to the end of the list more items are fetched and appended at the bottom of the list through asynchronous callbacks. + +### Related Topics: + +- [Load-on-Demand (igCombo)](//controls/igcombo/configuring/load-on-demand.mdx) + +## Support for MVC validation + +MVC style validation with data annotations is incorporated into combo and editor controls. That feature allows seamless integration of {environment:ProductName} validation capabilities with existing applications using data annotations. + +![](images/Whats_New_in_2012_Volume_1_12.png) + +### Related Topics: + +- [Configuring ASP.NET MVC Validation](../../02_Controls/igEditors/Config/00_Configuring ASP.NET MVC Validation.mdx) + +## New jQuery themes & JavaScript resources structure + +All JavaScript and CSS resources in the {environment:ProductName} library have been organized in a new folder structure and some of them have been renamed so that it is easier for developers using the library to figure out the purpose and location of each item. The new structure allows much faster script and resource loading by allowing applications to load only essentially required resources. Combined and minified version of the resources is still available. + +Note:This is a breaking change. + +![](images/Whats_New_in_2012_Volume_1_13.png) + +### Related Topics: + +- [JavaScript Files in {environment:ProductName}](//general-and-getting-started/deployment-guide-javascript-files.mdx) +- [Upgrading Projects to the Latest {environment:ProductName} Version](//general-and-getting-started/manually-updating-previous-versions.mdx) + +## CSS/JS resources loader + +The new `igLoader` control has been added to allow easier JavaScript and CSS resources loading into web pages and in relation to the new resources structure. The control automates loading necessary resources and requires the application to specify the location of the {environment:ProductName} JavaScript and CSS files. For pure HTML/jQuery pages it is required to specify which controls and which features will be instantiated on the page, for example. “`igGrid`.*” for all features of the flat grid, or “`igDataChart.Category`” for plotting category charts only. The MVC counterpart of the loader does not require applications to specify needed resources as it automatically detects which scripts and CSS files must be loaded. + +The `igLoader` control is the easiest and recommended way to upgrade from previous versions and prevents the need to specify multiple JS and CSS files in the head part of web pages. + +### Related Topics: + +- [Upgrading Projects to the Latest {environment:ProductName} Version](//general-and-getting-started/manually-updating-previous-versions.mdx) + +## Metro theme + +The new Metro theme is a result of research efforts to give native Metro UI look and feel to {environment:ProductName} controls for upcoming versions of Microsoft® Windows®. It aims not only styling and colors but also behavior and touch friendly user interface. On the picture below you can see a flat grid with the Metro theme applied. + +![](images/Whats_New_in_2012_Volume_1_14.png) + +### Related Topics: + +- [Styling and Theming in {environment:ProductName}](//general-and-getting-started/styling-and-theming/deployment-guide-styling-and-theming.mdx) + + + + + + + diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/21-whats-new-in-2011-volume2.mdx b/docs/jquery/src/content/en/topics/whats-new/revision-history/21-whats-new-in-2011-volume2.mdx new file mode 100644 index 0000000000..2b1374fbe3 --- /dev/null +++ b/docs/jquery/src/content/en/topics/whats-new/revision-history/21-whats-new-in-2011-volume2.mdx @@ -0,0 +1,142 @@ +--- +title: "What's New in 2011 Volume 2" +slug: whats-new-in-2011-volume2 +--- + +# What's New in 2011 Volume 2 + +## Topic Overview +This topic provides an overview of the new functionalities and components introduced with the {environment:ProductName}™ 2011 Volume 2. + +### In this topic +This document contains the following sections: + +- [New Functionalities and Components](#new-functionalities) +- [igHierarchicalGrid (New Control)](#ighierarchicalgrid) +- [igTree (New Control)](#igtree) +- [igComboBox (New Control)](#igcombobox) +- igGrid (New Features) + - [igGrid - Updating](#updating) + - [igGrid - Outlook GroupBy](#groupby) + - [igGrid - Column Hiding](#column-hiding) + - [igGrid - Column Resizing](#column-resizing) + - [igGrid - Row Selectors](#row-selectors) + - [igGrid - Tooltips](#tooltips) + - [igGrid - Column Summaries](#column-summaries) + - [igGrid Model Metadata enhancement](#metadata) + + + +## New Functionalities and Components +### igHierarchicalGrid™ +The `igHierarchicalGrid` control is a new grid control used to render hierarchical data and internally uses the flat `igGrid`™ control. As you expand a grid row, an instance if the `igGrid` is created for the child layout. In order to optimize performance, the `igHierarchicalGrid` control never creates instances of child grids before a row is expanded. To learn more about how to configure the `igHierarchicalGrid` control, read the Getting Started with `igHierarchicalGrid` topic. + +![](images/JQuery_Whats_New_11.2_Pic1.png) + +#### Related Topics +[Initializing the igHierarchicalGrid](//controls/ighierarchicalgrid/initializing.mdx) + +### igTree™ +The {environment:ProductName} 2011 Volume 2 release now features a tree control. The `igTree` control comes equipped with a number of valuable features. The control supports load-on-demand to enable an optimized performance profile. Multiple selection scenarios are supported including bi-state and tri-state selection. The Selection feature is driven by a configurable set of selection options including checkboxes, keyboard input and individual selection. Node images are customizable and you have the option of configuring image through CSS, directly through bindings or by providing explicit URL paths to an image. The control may be created and managed through a pure JavaScript context or via the ASP.NET MVC helper. + +![](images/JQuery_Whats_New_11.2_Pic2.png) + +#### Related Topics +[Getting Started with igTree](//controls/igtree/getting-started.mdx) + +### igCombo™ +The {environment:ProductName} 2011 Volume 2 release now features a combo control. The `igCombo` control comes equipped with a number of valuable features. User interface virtualization support includes the ability of the control to only create HTML elements for data items that are within the viewable area of the control. As additional data is required beyond what is visible, the control reuses existing HTML elements and keeps the scrollbar position in sync with the relative data position. The auto-complete feature allows users to begin typing in the combo box and matching selections begin to appear within the entry box to allow for easy selection. The auto-suggest feature allows users to begin typing in the entry box and the control will return a list of possible matches based on the entered text for selection. The selection features allow users to select single or multiple items via checkboxes, keyboard input or standard click-selection. + +![](images/JQuery_Whats_New_11.2_Pic3.png) + +#### Related Topics +[Getting Started with igCombo](//controls/igcombo/getting-started.mdx) + +### igGrid™ – Updating +The `igGrid` control Updating feature includes three separate behaviors: editing, adding new row, deleting row. Editing is available for whole rows or individual cells. If row editing is enabled, then all cells in a row enter edit mode. To discard changes to grid data, the cancel-key ends edit mode and the grid is not updated. If edit mode is ended by the Enter key, then grid is updated and next row (or cell) enters edit mode. If editing mode is “cell”, then the edit mode can be ended by the Tab key. When the Tab key is used to end editing, the cell on the right enters edit mode. If the previously edited cell is last in the row, then first cell in next row enters edit mode. + +#### Related Topics +[igGrid Updating](//controls/iggrid/features/updating/updating.mdx) + +### igGrid - Outlook GroupBy +The `igGrid` Group By feature allows you to group a series of columns. The grid allows you do drag and drop a column to group by into the “group by” area of the grid. When the column is dropped into the group area, the grid is rearranged with as many row groups as there are distinct values in the grouped column. You can have multiple groups, where nested groups appear under the primary group. You can also customize the grouping feature by defining a custom grouping method. To learn more about grouping read the topic Grid Group By Getting Started. + +![](images/JQuery_Whats_New_11.2_Pic4.png) + +#### Related Topics +[Enabling igGrid Outlook GroupBy](//controls/iggrid/features/columns/grouping/enabling-groupby.mdx) + +### igGrid Column Hiding +The {environment:ProductName} 2011 Volume 2 release now includes `igGrid` control column hiding. With this feature, you can hide columns from users before and after the grid is rendered. Further, columns can be hidden either programmatically or using UI elements in the column header. The image below depicts an `igGrid` control with a hidden column. The red arrow is pointing to the hidden column indicator: + +![](images/JQuery_Whats_New_11.2_Pic5.png) + +#### Related Topics +[Enabling Column Hiding](//controls/iggrid/features/columns/hiding/column-hiding-enabling-column-hiding.mdx) + +### igGrid Column Resizing +The {environment:ProductName} 2011 Volume 2 release now includes `igGrid` column resizing. The column resizing feature enables users to change the width of the columns in the grid. The effect of the resizing action can be applied to the grid either after the resize action has finished or simultaneously as it happens. The column resizing functionality has several features that are available for configuration in code including the levels at which resizing is allows– for the entire grid and for individual columns. The image below depicts a grid where the Color column is being resized by the user. + +![](images/JQuery_Whats_New_11.2_Pic6.png) + +#### Related Topics +[igGrid Column Resizing](//controls/iggrid/features/columns/column-resizing.mdx) + +### igGrid Row Selectors +The {environment:ProductName} 2011 Volume 2 release now includes `igGrid` row selectors. The row selectors feature exposes options to enable checkboxes, row numbering and combine with the multiple selection feature of `igGrid` control (see the image below): + +![](images/JQuery_Whats_New_11.2_Pic7.png) + +#### Related Topics +[Enabling Row Selectors](../../02_Controls/igGrid/03_Features/02_Row Selectors/00_igGrid_Enabling_Row_Selectors.mdx) + +### igGrid Tooltips +The {environment:ProductName} 2011 Volume 2 release now includes `igGrid` tooltips. This feature enables tooltips to appear over grid cells. The purpose of the tooltips is to make the whole cell content visible and enable users to select and copy the text that is inside the tooltip container. + +![](images/JQuery_Whats_New_11.2_Pic8.png) + +#### Related Topics +[Enabling igGrid Tooltips](//controls/iggrid/features/tooltips/enabling-tooltips.mdx) + +### igGrid Column Summaries +The {environment:ProductName} 2011 Volume 2 release now includes `igGrid` column summaries. The column summaries feature exposes the option to calculate summaries based on column data. The grid includes a number of default summary functions, as well as giving you the ability to define custom functions to calculate the summaries. Further, options exist which allow you to choose whether summaries are calculated remotely or local. The following image depicts a grid with summaries enabled. + +![](images/JQuery_Whats_New_11.2_Pic9.png) + +#### Related Topics +[Enabling Column Summaries](../../02_Controls/igGrid/03_Features/00_Columns/05_Summaries/00_igGrid_Enabling _Column_Summaries.mdx) + +### igGrid Model Metadata enhancement +The {environment:ProductName} 2011 Volume 2 release now includes the ability of the `igGrid` MVC helper to recognize the `DisplayName` attribute. Use of the `DisplayName` attribute allows the MVC helper to automatically use this attribute as `headerText` for a specified column. Keep in mind that if `headerText` is set explicitly in the grid, the value from the `DisplayName` is overwritten. The following example shows simple model and `igGrid` which automatically binds the `headerText` to the `DisplayName` attribute value. + + + +**MVC Model:** + +```csharp +class Customer + { + [DisplayName("First Name")] + public string FirstName { get; set; } + [DisplayName("Family Name")] + public string FamilyName { get; set; } + } +``` + + + +**MVC ASPX View:** + +```csharp +<%= Html.Infragistics().Grid(Model).ID("grid").Columns(column => { + column.For(c => c.FirstName); + column.For(c => c.FamilyName); + }) + %> +``` + + + + + + diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/ExcelChart_Sparklines.PNG b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/ExcelChart_Sparklines.PNG new file mode 100644 index 0000000000..32d542a79b Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/ExcelChart_Sparklines.PNG differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Format_Cells_Dialog_Alignment.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Format_Cells_Dialog_Alignment.png new file mode 100644 index 0000000000..5047009f6e Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Format_Cells_Dialog_Alignment.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Format_Cells_Dialog_Border.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Format_Cells_Dialog_Border.png new file mode 100644 index 0000000000..5a170ce597 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Format_Cells_Dialog_Border.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Format_Cells_Dialog_Fill.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Format_Cells_Dialog_Fill.png new file mode 100644 index 0000000000..ed38d4b0d5 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Format_Cells_Dialog_Fill.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Format_Cells_Dialog_Font.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Format_Cells_Dialog_Font.png new file mode 100644 index 0000000000..ef1e7acedb Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Format_Cells_Dialog_Font.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Format_Cells_Dialog_Number.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Format_Cells_Dialog_Number.png new file mode 100644 index 0000000000..3ca164bff1 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Format_Cells_Dialog_Number.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Format_Cells_Dialog_Protection.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Format_Cells_Dialog_Protection.png new file mode 100644 index 0000000000..a5177cfbf3 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Format_Cells_Dialog_Protection.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/JQuery_Whats_New_11.2_Pic1.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/JQuery_Whats_New_11.2_Pic1.png new file mode 100644 index 0000000000..cd0a21a3b4 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/JQuery_Whats_New_11.2_Pic1.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/JQuery_Whats_New_11.2_Pic2.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/JQuery_Whats_New_11.2_Pic2.png new file mode 100644 index 0000000000..4ecc9ab40c Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/JQuery_Whats_New_11.2_Pic2.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/JQuery_Whats_New_11.2_Pic3.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/JQuery_Whats_New_11.2_Pic3.png new file mode 100644 index 0000000000..0d8767a925 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/JQuery_Whats_New_11.2_Pic3.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/JQuery_Whats_New_11.2_Pic4.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/JQuery_Whats_New_11.2_Pic4.png new file mode 100644 index 0000000000..1674d1ce94 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/JQuery_Whats_New_11.2_Pic4.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/JQuery_Whats_New_11.2_Pic5.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/JQuery_Whats_New_11.2_Pic5.png new file mode 100644 index 0000000000..383138e764 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/JQuery_Whats_New_11.2_Pic5.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/JQuery_Whats_New_11.2_Pic6.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/JQuery_Whats_New_11.2_Pic6.png new file mode 100644 index 0000000000..fc660a3154 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/JQuery_Whats_New_11.2_Pic6.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/JQuery_Whats_New_11.2_Pic7.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/JQuery_Whats_New_11.2_Pic7.png new file mode 100644 index 0000000000..d0c470085e Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/JQuery_Whats_New_11.2_Pic7.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/JQuery_Whats_New_11.2_Pic8.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/JQuery_Whats_New_11.2_Pic8.png new file mode 100644 index 0000000000..d56edc702d Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/JQuery_Whats_New_11.2_Pic8.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/JQuery_Whats_New_11.2_Pic9.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/JQuery_Whats_New_11.2_Pic9.png new file mode 100644 index 0000000000..9a5694016f Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/JQuery_Whats_New_11.2_Pic9.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_1.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_1.png new file mode 100644 index 0000000000..c6d949cf76 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_1.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_10.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_10.png new file mode 100644 index 0000000000..d11821c9b9 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_10.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_11.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_11.png new file mode 100644 index 0000000000..984ec69b6e Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_11.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_12.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_12.png new file mode 100644 index 0000000000..9d00776583 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_12.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_13.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_13.png new file mode 100644 index 0000000000..9eb7de9cf8 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_13.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_14.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_14.png new file mode 100644 index 0000000000..6e96590666 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_14.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_15.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_15.png new file mode 100644 index 0000000000..4771b676bc Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_15.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_16.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_16.png new file mode 100644 index 0000000000..6a8a486278 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_16.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_17.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_17.png new file mode 100644 index 0000000000..536f69924e Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_17.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_18.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_18.png new file mode 100644 index 0000000000..77ee25a1c4 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_18.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_2.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_2.png new file mode 100644 index 0000000000..51c725f3ab Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_2.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_3.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_3.png new file mode 100644 index 0000000000..ee7db59da9 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_3.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_4.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_4.png new file mode 100644 index 0000000000..2ab21dd14a Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_4.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_8.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_8.png new file mode 100644 index 0000000000..86ba630602 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_8.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_9.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_9.png new file mode 100644 index 0000000000..8c1fd20e0c Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_9.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_11.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_11.png new file mode 100644 index 0000000000..efd488f3bd Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_11.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_12.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_12.png new file mode 100644 index 0000000000..77ca68f390 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_12.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_13.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_13.png new file mode 100644 index 0000000000..ec3751f2aa Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_13.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_14.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_14.png new file mode 100644 index 0000000000..e90c827739 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_14.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_15.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_15.png new file mode 100644 index 0000000000..24e7fae839 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_15.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_16.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_16.png new file mode 100644 index 0000000000..2b1124db75 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_16.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_18.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_18.png new file mode 100644 index 0000000000..bc89c42c9a Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_18.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_19.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_19.png new file mode 100644 index 0000000000..dafb6f87d4 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_19.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_2.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_2.png new file mode 100644 index 0000000000..9ffbb32be2 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_2.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_20.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_20.png new file mode 100644 index 0000000000..73a23ec169 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_20.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_21.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_21.png new file mode 100644 index 0000000000..89bee9f69b Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_21.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_22.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_22.png new file mode 100644 index 0000000000..66441c7488 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_22.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_23.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_23.png new file mode 100644 index 0000000000..6abccac4c0 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_23.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_24.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_24.png new file mode 100644 index 0000000000..415067f5d8 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_24.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_3.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_3.png new file mode 100644 index 0000000000..e95987e886 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_3.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_4.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_4.png new file mode 100644 index 0000000000..fe66eab4d4 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_4.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_5.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_5.png new file mode 100644 index 0000000000..464dfbca41 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_5.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_6.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_6.png new file mode 100644 index 0000000000..e2ba1ae817 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_6.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_7.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_7.png new file mode 100644 index 0000000000..cff4088102 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_7.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_8.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_8.png new file mode 100644 index 0000000000..181e1c3b48 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_8.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_1.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_1.png new file mode 100644 index 0000000000..69f20a50b6 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_1.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_10.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_10.png new file mode 100644 index 0000000000..51a02681eb Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_10.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_11.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_11.png new file mode 100644 index 0000000000..24e42a6ebf Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_11.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_12.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_12.png new file mode 100644 index 0000000000..fd669fae0b Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_12.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_13.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_13.png new file mode 100644 index 0000000000..23c637388d Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_13.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_14.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_14.png new file mode 100644 index 0000000000..e91255744a Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_14.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_15.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_15.png new file mode 100644 index 0000000000..1fa862493f Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_15.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_16.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_16.png new file mode 100644 index 0000000000..4d86d59635 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_16.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_2.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_2.png new file mode 100644 index 0000000000..1ed7bff4de Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_2.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_3.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_3.png new file mode 100644 index 0000000000..10c0c62c96 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_3.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_4.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_4.png new file mode 100644 index 0000000000..1591ee12cb Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_4.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_5.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_5.png new file mode 100644 index 0000000000..f8a8b7d8be Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_5.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_6.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_6.png new file mode 100644 index 0000000000..24896eea35 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_6.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_7.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_7.png new file mode 100644 index 0000000000..9e06fd800d Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_7.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_8.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_8.png new file mode 100644 index 0000000000..55dbc4eed5 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_8.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_9.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_9.png new file mode 100644 index 0000000000..1280f99756 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_9.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_2_1.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_2_1.png new file mode 100644 index 0000000000..b81566a427 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_2_1.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_2_10.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_2_10.png new file mode 100644 index 0000000000..442061426d Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_2_10.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_2_2.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_2_2.png new file mode 100644 index 0000000000..17c7cc679a Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_2_2.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_2_3.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_2_3.png new file mode 100644 index 0000000000..f96b40de26 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_2_3.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_2_4.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_2_4.png new file mode 100644 index 0000000000..01a30cb4a9 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_2_4.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_2_5.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_2_5.png new file mode 100644 index 0000000000..5f7eed5bfe Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_2_5.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_2_6.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_2_6.png new file mode 100644 index 0000000000..f3a453c092 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_2_6.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_2_7.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_2_7.png new file mode 100644 index 0000000000..41646eea04 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_2_7.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_2_8.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_2_8.png new file mode 100644 index 0000000000..66ffdc772c Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_2_8.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_2_9.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_2_9.png new file mode 100644 index 0000000000..1dd6f11d01 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_2_9.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2015_Volume_1_2.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2015_Volume_1_2.png new file mode 100644 index 0000000000..5f8ef2aa5a Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2015_Volume_1_2.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2015_Volume_1_3.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2015_Volume_1_3.png new file mode 100644 index 0000000000..60019ebae9 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2015_Volume_1_3.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2015_Volume_1_Combo.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2015_Volume_1_Combo.png new file mode 100644 index 0000000000..c80a8c036b Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2015_Volume_1_Combo.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2015_Volume_1_TreeGrid.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2015_Volume_1_TreeGrid.png new file mode 100644 index 0000000000..359eeddc2e Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2015_Volume_1_TreeGrid.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2015_Volume_1_TreeGrid_Filtering.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2015_Volume_1_TreeGrid_Filtering.png new file mode 100644 index 0000000000..d9172de9dd Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2015_Volume_1_TreeGrid_Filtering.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2015_Volume_1_TreeGrid_Load_on_Demand.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2015_Volume_1_TreeGrid_Load_on_Demand.png new file mode 100644 index 0000000000..82d41d7f32 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2015_Volume_1_TreeGrid_Load_on_Demand.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2015_Volume_1_column_styling.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2015_Volume_1_column_styling.png new file mode 100644 index 0000000000..30ea3b4e05 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2015_Volume_1_column_styling.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2015_Volume_1_intellisense.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2015_Volume_1_intellisense.png new file mode 100644 index 0000000000..5fef9be13d Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2015_Volume_1_intellisense.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2015_Volume_1_local_dataSource.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2015_Volume_1_local_dataSource.png new file mode 100644 index 0000000000..88c33afa55 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2015_Volume_1_local_dataSource.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2015_Volume_1_northwind_dataSource.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2015_Volume_1_northwind_dataSource.png new file mode 100644 index 0000000000..2e5bccbd13 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2015_Volume_1_northwind_dataSource.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2015_Volume_1_remote_dataSource.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2015_Volume_1_remote_dataSource.png new file mode 100644 index 0000000000..4a52242a1b Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2015_Volume_1_remote_dataSource.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_Project_Dialog.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_Project_Dialog.png new file mode 100644 index 0000000000..cd3fa730ad Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_Project_Dialog.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_1_1.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_1_1.png new file mode 100644 index 0000000000..b7877920a8 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_1_1.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_1_10.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_1_10.png new file mode 100644 index 0000000000..6d3adb0d53 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_1_10.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_1_11.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_1_11.png new file mode 100644 index 0000000000..013481017a Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_1_11.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_1_12.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_1_12.png new file mode 100644 index 0000000000..50baf9b81e Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_1_12.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_1_13.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_1_13.png new file mode 100644 index 0000000000..b07c0a2d74 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_1_13.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_1_14.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_1_14.png new file mode 100644 index 0000000000..20710effa7 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_1_14.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_1_2.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_1_2.png new file mode 100644 index 0000000000..6fad2cd0db Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_1_2.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_1_3.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_1_3.png new file mode 100644 index 0000000000..344f924f7a Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_1_3.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_1_4.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_1_4.png new file mode 100644 index 0000000000..ac38e937fb Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_1_4.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_1_5.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_1_5.png new file mode 100644 index 0000000000..3bf83800b3 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_1_5.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_1_6.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_1_6.png new file mode 100644 index 0000000000..b97b6d7cb2 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_1_6.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_1_7.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_1_7.png new file mode 100644 index 0000000000..f1dd3896f6 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_1_7.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_1_8.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_1_8.png new file mode 100644 index 0000000000..0e79022fbe Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_1_8.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_1_9.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_1_9.png new file mode 100644 index 0000000000..d4a13fd1cd Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_1_9.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_1.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_1.png new file mode 100644 index 0000000000..5cbb3f2188 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_1.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_10.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_10.png new file mode 100644 index 0000000000..a03e212e55 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_10.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_11.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_11.png new file mode 100644 index 0000000000..a405843bc0 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_11.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_12.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_12.png new file mode 100644 index 0000000000..37a9e8e853 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_12.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_13.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_13.png new file mode 100644 index 0000000000..dc5d44c4c2 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_13.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_14.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_14.png new file mode 100644 index 0000000000..fb515b4406 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_14.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_15.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_15.png new file mode 100644 index 0000000000..325331e222 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_15.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_16.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_16.png new file mode 100644 index 0000000000..f5d2862d06 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_16.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_17.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_17.png new file mode 100644 index 0000000000..fe0ee2ed26 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_17.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_18.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_18.png new file mode 100644 index 0000000000..976a7ed937 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_18.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_19.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_19.png new file mode 100644 index 0000000000..8d3eff8e79 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_19.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_2.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_2.png new file mode 100644 index 0000000000..9d66941045 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_2.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_20.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_20.png new file mode 100644 index 0000000000..16759d2a36 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_20.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_21.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_21.png new file mode 100644 index 0000000000..e352c29c20 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_21.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_22.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_22.png new file mode 100644 index 0000000000..e7237bb118 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_22.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_23.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_23.png new file mode 100644 index 0000000000..89f5bc4154 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_23.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_24.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_24.png new file mode 100644 index 0000000000..1994f2ee4d Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_24.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_25.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_25.png new file mode 100644 index 0000000000..55e23e623d Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_25.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_26.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_26.png new file mode 100644 index 0000000000..9c7ba81c99 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_26.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_27.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_27.png new file mode 100644 index 0000000000..d544e7e747 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_27.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_3.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_3.png new file mode 100644 index 0000000000..4859a737f4 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_3.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_4.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_4.png new file mode 100644 index 0000000000..e6248e906f Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_4.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_5.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_5.png new file mode 100644 index 0000000000..254ac787e9 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_5.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_6.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_6.png new file mode 100644 index 0000000000..7645902046 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_6.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_7.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_7.png new file mode 100644 index 0000000000..40954ff4c8 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_7.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_8.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_8.png new file mode 100644 index 0000000000..2d1e2506b0 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_8.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_9.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_9.png new file mode 100644 index 0000000000..75a72b6d3a Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_9.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/bulletgraph_igtheme_17_1.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/bulletgraph_igtheme_17_1.png new file mode 100644 index 0000000000..96afa2a43c Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/bulletgraph_igtheme_17_1.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/chart_design_bullet_graph_new.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/chart_design_bullet_graph_new.png new file mode 100644 index 0000000000..ffa5c3763c Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/chart_design_bullet_graph_new.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/chart_design_bullet_graph_previous.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/chart_design_bullet_graph_previous.png new file mode 100644 index 0000000000..a9d2436e25 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/chart_design_bullet_graph_previous.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/chart_design_column_new.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/chart_design_column_new.png new file mode 100644 index 0000000000..2fd2d104af Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/chart_design_column_new.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/chart_design_column_previous.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/chart_design_column_previous.png new file mode 100644 index 0000000000..5b990caf2c Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/chart_design_column_previous.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/chart_design_doughnut_new.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/chart_design_doughnut_new.png new file mode 100644 index 0000000000..cdbbf65a73 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/chart_design_doughnut_new.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/chart_design_doughnut_previous.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/chart_design_doughnut_previous.png new file mode 100644 index 0000000000..44b86c2af3 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/chart_design_doughnut_previous.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/chart_design_financial_new.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/chart_design_financial_new.png new file mode 100644 index 0000000000..861e9ea865 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/chart_design_financial_new.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/chart_design_financial_previous.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/chart_design_financial_previous.png new file mode 100644 index 0000000000..f122cf9c14 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/chart_design_financial_previous.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/chart_design_funnel_new.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/chart_design_funnel_new.png new file mode 100644 index 0000000000..1374acea35 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/chart_design_funnel_new.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/chart_design_funnel_previous.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/chart_design_funnel_previous.png new file mode 100644 index 0000000000..73e88ecd72 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/chart_design_funnel_previous.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/chart_design_gallery_new.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/chart_design_gallery_new.png new file mode 100644 index 0000000000..37c79da3e1 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/chart_design_gallery_new.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/chart_design_gallery_previous.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/chart_design_gallery_previous.png new file mode 100644 index 0000000000..97e78ba47d Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/chart_design_gallery_previous.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/chart_design_legend_new.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/chart_design_legend_new.png new file mode 100644 index 0000000000..aa0e42f10d Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/chart_design_legend_new.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/chart_design_legend_previous.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/chart_design_legend_previous.png new file mode 100644 index 0000000000..e29b01de9a Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/chart_design_legend_previous.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/chart_design_linear_gauge_new.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/chart_design_linear_gauge_new.png new file mode 100644 index 0000000000..59666aff16 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/chart_design_linear_gauge_new.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/chart_design_linear_gauge_previous.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/chart_design_linear_gauge_previous.png new file mode 100644 index 0000000000..25d38b4a58 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/chart_design_linear_gauge_previous.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/chart_design_pie_new.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/chart_design_pie_new.png new file mode 100644 index 0000000000..184fbc718b Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/chart_design_pie_new.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/chart_design_pie_old.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/chart_design_pie_old.png new file mode 100644 index 0000000000..6edf11e215 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/chart_design_pie_old.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/chart_design_pie_previous.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/chart_design_pie_previous.png new file mode 100644 index 0000000000..a5dd40a269 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/chart_design_pie_previous.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/chart_design_radial_gauge_new.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/chart_design_radial_gauge_new.png new file mode 100644 index 0000000000..76dc3537aa Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/chart_design_radial_gauge_new.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/chart_design_radial_gauge_previous.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/chart_design_radial_gauge_previous.png new file mode 100644 index 0000000000..7281cdb01c Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/chart_design_radial_gauge_previous.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/chart_design_sparkline_new.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/chart_design_sparkline_new.png new file mode 100644 index 0000000000..3de1f95732 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/chart_design_sparkline_new.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/chart_design_sparkline_previous.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/chart_design_sparkline_previous.png new file mode 100644 index 0000000000..d5405f129d Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/chart_design_sparkline_previous.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/chart_scatter_series.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/chart_scatter_series.png new file mode 100644 index 0000000000..e3e3eb735c Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/chart_scatter_series.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/combo-grouping.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/combo-grouping.png new file mode 100644 index 0000000000..6f39c466be Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/combo-grouping.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/filtering_custom_conditions.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/filtering_custom_conditions.png new file mode 100644 index 0000000000..3ea9ae641d Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/filtering_custom_conditions.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/funnelchart_text_style.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/funnelchart_text_style.png new file mode 100644 index 0000000000..f25b3c84a0 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/funnelchart_text_style.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/grid_improvements_row_selectors.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/grid_improvements_row_selectors.png new file mode 100644 index 0000000000..ea95307e0b Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/grid_improvements_row_selectors.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/group-summaries.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/group-summaries.png new file mode 100644 index 0000000000..c56effa33d Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/group-summaries.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/iggrid-checkbox.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/iggrid-checkbox.png new file mode 100644 index 0000000000..b724f34b5f Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/iggrid-checkbox.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/iggrid-multi-row-layout.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/iggrid-multi-row-layout.png new file mode 100644 index 0000000000..689b22e026 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/iggrid-multi-row-layout.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/igniteui_scafolder.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/igniteui_scafolder.png new file mode 100644 index 0000000000..46297793d6 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/igniteui_scafolder.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/igscroll-basic.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/igscroll-basic.png new file mode 100644 index 0000000000..a5557e72a1 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/igscroll-basic.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/igtreegrid-updating-add-child.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/igtreegrid-updating-add-child.png new file mode 100644 index 0000000000..b64d83e619 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/igtreegrid-updating-add-child.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/igtreegrid-updating.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/igtreegrid-updating.png new file mode 100644 index 0000000000..79c6774116 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/igtreegrid-updating.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/jQuery_AxisIntervals_NumericX_X_Intervals.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/jQuery_AxisIntervals_NumericX_X_Intervals.png new file mode 100644 index 0000000000..505bb588ee Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/jQuery_AxisIntervals_NumericX_X_Intervals.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/jQuery_AxisIntervals_NumericY_Y_Intervals.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/jQuery_AxisIntervals_NumericY_Y_Intervals.png new file mode 100644 index 0000000000..99cf33fb88 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/jQuery_AxisIntervals_NumericY_Y_Intervals.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/lineargauge_igtheme_17_1.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/lineargauge_igtheme_17_1.png new file mode 100644 index 0000000000..183d363c91 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/lineargauge_igtheme_17_1.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/member-descriptions.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/member-descriptions.png new file mode 100644 index 0000000000..40e311dc3b Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/member-descriptions.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/method-data-overloads.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/method-data-overloads.png new file mode 100644 index 0000000000..ec158c0359 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/method-data-overloads.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/method-overloads.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/method-overloads.png new file mode 100644 index 0000000000..6c1c86cd8c Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/method-overloads.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/mrl-inline-editing.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/mrl-inline-editing.png new file mode 100644 index 0000000000..b65a1b39d4 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/mrl-inline-editing.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/new_editors.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/new_editors.png new file mode 100644 index 0000000000..4adca6bcf2 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/new_editors.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/notifier.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/notifier.png new file mode 100644 index 0000000000..ec94cb585b Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/notifier.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/option-overloads.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/option-overloads.png new file mode 100644 index 0000000000..7b7b2f4bd6 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/option-overloads.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/piechart_inner_outer_label_color.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/piechart_inner_outer_label_color.png new file mode 100644 index 0000000000..faa255c855 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/piechart_inner_outer_label_color.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/piechart_slice_selection.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/piechart_slice_selection.png new file mode 100644 index 0000000000..68ae9fef56 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/piechart_slice_selection.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/radialgauge_igtheme_17_1.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/radialgauge_igtheme_17_1.png new file mode 100644 index 0000000000..dab52b389e Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/radialgauge_igtheme_17_1.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/spreadsheet.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/spreadsheet.png new file mode 100644 index 0000000000..17e593f904 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/spreadsheet.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/spreadsheet_sort_dialog_whats_new.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/spreadsheet_sort_dialog_whats_new.png new file mode 100644 index 0000000000..153ebdd3d6 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/spreadsheet_sort_dialog_whats_new.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/time_column.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/time_column.png new file mode 100644 index 0000000000..36d090da64 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/time_column.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/treegrid_paging_context_row.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/treegrid_paging_context_row.png new file mode 100644 index 0000000000..4c278931cb Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/treegrid_paging_context_row.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/tregrid_row_selectors_hierarchical_numbering_mode.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/tregrid_row_selectors_hierarchical_numbering_mode.png new file mode 100644 index 0000000000..a4649284b2 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/tregrid_row_selectors_hierarchical_numbering_mode.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/tregrid_row_selectors_paging.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/tregrid_row_selectors_paging.png new file mode 100644 index 0000000000..3ebab975d7 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/tregrid_row_selectors_paging.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/tregrid_row_selectors_tri_state_checkboxes.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/tregrid_row_selectors_tri_state_checkboxes.png new file mode 100644 index 0000000000..9187cee3eb Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/tregrid_row_selectors_tri_state_checkboxes.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/union-types.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/union-types.png new file mode 100644 index 0000000000..146cfdb3bc Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/union-types.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/updating_row_edit_dialog.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/updating_row_edit_dialog.png new file mode 100644 index 0000000000..04a1abfeb0 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/updating_row_edit_dialog.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/validator.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/validator.png new file mode 100644 index 0000000000..c42a8fcc72 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/validator.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/whats_new_category_chart_callouts.PNG b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/whats_new_category_chart_callouts.PNG new file mode 100644 index 0000000000..63479f1a27 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/whats_new_category_chart_callouts.PNG differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/whats_new_category_chart_crosshair.PNG b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/whats_new_category_chart_crosshair.PNG new file mode 100644 index 0000000000..ed59be338c Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/whats_new_category_chart_crosshair.PNG differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/whats_new_category_chart_final_value.PNG b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/whats_new_category_chart_final_value.PNG new file mode 100644 index 0000000000..6c3eb9e570 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/whats_new_category_chart_final_value.PNG differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/whats_new_category_chart_highlight.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/whats_new_category_chart_highlight.png new file mode 100644 index 0000000000..8efa99b79b Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/whats_new_category_chart_highlight.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/whats_new_category_chart_tooltip.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/whats_new_category_chart_tooltip.png new file mode 100644 index 0000000000..8497f3696a Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/whats_new_category_chart_tooltip.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/whats_new_datachart_callout.PNG b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/whats_new_datachart_callout.PNG new file mode 100644 index 0000000000..e9ac01e428 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/whats_new_datachart_callout.PNG differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/whats_new_datachart_crosshair.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/whats_new_datachart_crosshair.png new file mode 100644 index 0000000000..0313b339de Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/whats_new_datachart_crosshair.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/whats_new_datachart_final_value.PNG b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/whats_new_datachart_final_value.PNG new file mode 100644 index 0000000000..9a4b3f8157 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/whats_new_datachart_final_value.PNG differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/whats_new_excel_charts.PNG b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/whats_new_excel_charts.PNG new file mode 100644 index 0000000000..22e2a1d282 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/whats_new_excel_charts.PNG differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/whats_new_excel_filter_menu.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/whats_new_excel_filter_menu.png new file mode 100644 index 0000000000..3dc0952a9f Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/whats_new_excel_filter_menu.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/whats_new_excel_sorting_menu.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/whats_new_excel_sorting_menu.png new file mode 100644 index 0000000000..1342bde0a4 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/whats_new_excel_sorting_menu.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/whats_new_excel_sparklines.PNG b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/whats_new_excel_sparklines.PNG new file mode 100644 index 0000000000..b07231c349 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/whats_new_excel_sparklines.PNG differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/whats_new_excel_top_10.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/whats_new_excel_top_10.png new file mode 100644 index 0000000000..1252b6236a Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/whats_new_excel_top_10.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/whats_new_financial_chart_callouts.PNG b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/whats_new_financial_chart_callouts.PNG new file mode 100644 index 0000000000..6f17bb4c95 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/whats_new_financial_chart_callouts.PNG differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/whats_new_financial_chart_crosshair.PNG b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/whats_new_financial_chart_crosshair.PNG new file mode 100644 index 0000000000..31d53f73dd Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/whats_new_financial_chart_crosshair.PNG differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/whats_new_financial_chart_final_values.PNG b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/whats_new_financial_chart_final_values.PNG new file mode 100644 index 0000000000..154dcdb14b Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/whats_new_financial_chart_final_values.PNG differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/whats_new_financial_chart_legend.PNG b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/whats_new_financial_chart_legend.PNG new file mode 100644 index 0000000000..9b7ecdddb7 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/whats_new_financial_chart_legend.PNG differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/whats_new_financial_chart_scale_breaks.PNG b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/whats_new_financial_chart_scale_breaks.PNG new file mode 100644 index 0000000000..3bdfb481f3 Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/whats_new_financial_chart_scale_breaks.PNG differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/images/whats_new_financial_chart_tooltips.png b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/whats_new_financial_chart_tooltips.png new file mode 100644 index 0000000000..ef5eccc46f Binary files /dev/null and b/docs/jquery/src/content/en/topics/whats-new/revision-history/images/whats_new_financial_chart_tooltips.png differ diff --git a/docs/jquery/src/content/en/topics/whats-new/revision-history/jquery-whats-new-revision-history.mdx b/docs/jquery/src/content/en/topics/whats-new/revision-history/jquery-whats-new-revision-history.mdx new file mode 100644 index 0000000000..9aa1435b2c --- /dev/null +++ b/docs/jquery/src/content/en/topics/whats-new/revision-history/jquery-whats-new-revision-history.mdx @@ -0,0 +1,65 @@ +--- +title: "Revision History" +slug: jquery-whats-new-revision-history +--- + +# Revision History + +### Introduction + +The topics referred below provide information about what new controls and features are introduced in earlier versions of the {environment:ProductName}™ library of controls. + +### Topics + +Detailed information regarding what new controls and features are introduced is covered in the following topics: + +- [What's New in 2023 Volume 2](/whats-new-in-2023-volume2.mdx): This topic provides an overview of the new functionalities and components introduced with the {environment:ProductName}™ 2023 Volume 2. + +- [What's New in 2022 Volume 2](/whats-new-in-2022-volume2.mdx): This topic provides an overview of the new functionalities and components introduced with the {environment:ProductName}™ 2022 Volume 2. + +- [What's New in 2022 Volume 1](/whats-new-in-2022-volume1.mdx): This topic provides an overview of the new functionalities and components introduced with the {environment:ProductName}™ 2022 Volume 1. + +- [What's New in 2021 Volume 2](/whats-new-in-2021-volume2.mdx): This topic provides an overview of the new functionalities and components introduced with the {environment:ProductName}™ 2021 Volume 2. + +- [What's New in 2021 Volume 1](/whats-new-in-2021-volume1.mdx): This topic provides an overview of the new functionalities and components introduced with the {environment:ProductName}™ 2021 Volume 1. + +- [What's New in 2020 Volume 2](/whats-new-in-2020-volume2.mdx): This topic provides an overview of the new functionalities and components introduced with the {environment:ProductName}™ 2020 Volume 2. + +- [What's New in 2019 Volume 2](/whats-new-in-2019-volume2.mdx): This topic provides an overview of the new functionalities and components introduced with the {environment:ProductName}™ 2019 Volume 2. + +- [What's New in 2018 Volume 2](/whats-new-in-2018-volume2.mdx): This topic provides an overview of the new functionalities and components introduced with the {environment:ProductName}™ 2018 Volume 2. + +- [What's New in 2018 Volume 1](/whats-new-in-2018-volume1.mdx): This topic provides an overview of the new functionalities and components introduced with the {environment:ProductName}™ 2018 Volume 1. + +- [What's New in 2017 Volume 2](/whats-new-in-2017-volume2.mdx): This topic provides an overview of the new functionalities and components introduced with the {environment:ProductName}™ 2017 Volume 2. + +- [What's New in 2017 Volume 1](/whats-new-in-2017-volume1.mdx): This topic provides an overview of the new functionalities and components introduced with the {environment:ProductName}™ 2017 Volume 1. + +- [What's New in 2016 Volume 2](/whats-new-in-2016-volume2.mdx): This topic provides an overview of the new functionalities and components introduced with the {environment:ProductName}™ 2016 Volume 2. + +- [What's New in 2016 Volume 1](/whats-new-in-2016-volume1.mdx): This topic provides an overview of the new functionalities and components introduced with the {environment:ProductName}™ 2016 Volume 1. + +- [What's New in 2015 Volume 2](/whats-new-in-2015-volume2.mdx): This topic provides an overview of the new functionalities and components introduced with the {environment:ProductName}™ 2015 Volume 2. + +- [What's New in 2015 Volume 1](/whats-new-in-2015-volume1.mdx): This topic provides an overview of the new functionalities and components introduced with the {environment:ProductName}™ 2015 Volume 1. + +- [What's New in 2014 Volume 2](/whats-new-in-2014-volume2.mdx): This topic provides an overview of the new functionalities and components introduced with the {environment:ProductName}™ 2014 Volume 2. + +- [What's New in 2014 Volume 1](/whats-new-in-2014-volume1.mdx): This topic provides an overview of the new functionalities and components introduced with the {environment:ProductName}™ 2014 Volume 1. + +- [What’s New in 2013 Volume 2](/whats-new-in-2013-volume2.mdx): This topic provides an overview of the new functionalities and components introduced with the {environment:ProductName}™ 2013 Volume 2. + +- [What’s New in 2013 Volume 1](/whats-new-in-2013-volume1.mdx): This topic provides an overview of the new functionalities and components introduced with the {environment:ProductName}™ 2013 Volume 1. + +- [What’s New in 2012 Volume 2](/whats-new-in-2012-volume2.mdx): This topic provides an overview of the new functionalities and components introduced with the {environment:ProductName}™ 2012 Volume 2. + +- [What’s New in 2012 Volume 1](/jquery-whats-new-12-1-landing-page.mdx): This topic provides an overview of the new functionalities and components introduced with the {environment:ProductName}™ 2012 Volume 1. + +- [What's New in 2011 Volume 2](/whats-new-in-2011-volume2.mdx): This topic provides an overview of the new functionalities and components introduced with the {environment:ProductName}™ 2011 Volume 2. + + + + + + + diff --git a/docs/jquery/src/content/ja/environment.json b/docs/jquery/src/content/ja/environment.json new file mode 100644 index 0000000000..d87304b46a --- /dev/null +++ b/docs/jquery/src/content/ja/environment.json @@ -0,0 +1,50 @@ +{ + "development": { + "ProductName": "Ignite UI for jQuery", + "ProductNameMVC": "Ignite UI for ASP.NET MVC", + "ProductNameASPNETCore": "Ignite UI for ASP.NET Core", + "ProductFamilyName": "Ignite UI", + "PlatformName": "jQuery", + "ProductVersion": "24.2", + "ProductVersionShort": "24.2", + "SamplesUrl": "https://jp.infragistics.com/products/ignite-ui/dock-manager/docs/typescript/latest", + "SamplesEmbedUrl": "https://jp.infragistics.com/products/ignite-ui/dock-manager/docs/typescript/latest", + "NewSamplesUrl": "https://jp.infragistics.com/products/ignite-ui/dock-manager/docs/typescript/latest", + "jQueryApiUrl": "https://jp.igniteui.com/help/api/2025.1", + "DesignerUrl": "TODO_DESIGNER_URL", + "InstallPath": "%%InstallPath%%", + "InstallPathMVC": "%%InstallPathMVC%%" + }, + "staging": { + "ProductName": "Ignite UI for jQuery", + "ProductNameMVC": "Ignite UI for ASP.NET MVC", + "ProductNameASPNETCore": "Ignite UI for ASP.NET Core", + "ProductFamilyName": "Ignite UI", + "PlatformName": "jQuery", + "ProductVersion": "24.2", + "ProductVersionShort": "24.2", + "SamplesUrl": "https://jp.infragistics.com/products/ignite-ui/dock-manager/docs/typescript/latest", + "SamplesEmbedUrl": "https://jp.infragistics.com/products/ignite-ui/dock-manager/docs/typescript/latest", + "NewSamplesUrl": "https://jp.infragistics.com/products/ignite-ui/dock-manager/docs/typescript/latest", + "jQueryApiUrl": "https://jp.igniteui.com/help/api/2025.1", + "DesignerUrl": "TODO_DESIGNER_URL", + "InstallPath": "%%InstallPath%%", + "InstallPathMVC": "%%InstallPathMVC%%" + }, + "production": { + "ProductName": "Ignite UI for jQuery", + "ProductNameMVC": "Ignite UI for ASP.NET MVC", + "ProductNameASPNETCore": "Ignite UI for ASP.NET Core", + "ProductFamilyName": "Ignite UI", + "PlatformName": "jQuery", + "ProductVersion": "24.2", + "ProductVersionShort": "24.2", + "SamplesUrl": "https://jp.infragistics.com/products/ignite-ui/dock-manager/docs/typescript/latest", + "SamplesEmbedUrl": "https://jp.infragistics.com/products/ignite-ui/dock-manager/docs/typescript/latest", + "NewSamplesUrl": "https://jp.infragistics.com/products/ignite-ui/dock-manager/docs/typescript/latest", + "jQueryApiUrl": "https://jp.igniteui.com/help/api/2025.1", + "DesignerUrl": "TODO_DESIGNER_URL", + "InstallPath": "%%InstallPath%%", + "InstallPathMVC": "%%InstallPathMVC%%" + } +} diff --git a/docs/jquery/src/content/ja/topics/angularjs-directives/angularjs-directives.mdx b/docs/jquery/src/content/ja/topics/angularjs-directives/angularjs-directives.mdx new file mode 100644 index 0000000000..762fa4d8b4 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/angularjs-directives/angularjs-directives.mdx @@ -0,0 +1,17 @@ +--- +title: "AngularJS ディレクティブ" +slug: angularjs-directives +--- + +# AngularJS ディレクティブ +## このグループのトピックについて + +### 概要 + +AngularJS アプリケーションで {environment:ProductName}® コントロールを使用する場合に、AngularJS 用の {environment:ProductName}® ディレクティブによりデータ バインディングとビューの宣言型プログラミングを利用できます。最新のソースとサンプルは、[{environment:ProductName} の GitHub リポジトリ](https://github.com/IgniteUI/igniteui-angularjs)から入手できます。 + +### トピック + +- [AngularJS での {environment:ProductName} の使用](/using-ignite-ui-with-angularjs) - このトピックでは、AngularJS の {environment:ProductName} ディレクティブの使用方法の概要を説明します。 +- [AngularJS を使用した条件付きテンプレート化および高度なテンプレート化](/conditional-and-advanced-templating-with-angularjs) - このトピックでは、条件付きテンプレートの使用方法と、AngularJS の {environment:ProductName} ディレクティブを使用して作成されたコントロールをカイタマイズするための高度なテンプレート化の方法について説明します。 +- [AngularJS サンプル](/angularjs-samples) - このトピックは、AngularJS の {environment:ProductName} ディレクティブを使用するサンプルを含みます。 \ No newline at end of file diff --git a/docs/jquery/src/content/ja/topics/angularjs-directives/angularjs-samples.mdx b/docs/jquery/src/content/ja/topics/angularjs-directives/angularjs-samples.mdx new file mode 100644 index 0000000000..4df3b411b9 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/angularjs-directives/angularjs-samples.mdx @@ -0,0 +1,154 @@ +--- +title: "AngularJS サンプル" +slug: angularjs-samples +--- + +# AngularJS サンプル + +## トピックの概要 +このトピックは、AngularJS の {environment:ProductFamilyName} ディレクティブのサンプルについて説明します。 + +### このトピックの内容 + +このトピックは、以下のセクションで構成されます。 +- [要件](#requirements) +- [グリッド サンプル](#grid_sample) + - [プレビュー](#grid_sample_preview) + - [詳細](#grid_sample_details) +- [エディター サンプル](#editors_sample) + - [プレビュー](#editors_sample_preview) + - [詳細](#editors_sample_details) +- [タイル マネージャー サンプル](#tile_manager_sample) + - [プレビュー](#tile_manager_sample_preview) + - [詳細](#tile_manager_sample_details) +- [ダイアログ ウィンドウ サンプル](#dialog_window_sample) + - [プレビュー](#dialog_window_sample_preview) + - [詳細](#dialog_window_sample_details) +- [ツリー サンプル](#tree_sample) + - [プレビュー](#tree_sample_preview) + - [詳細](#tree_sample_details) +- [マップ サンプル](#map_sample) + - [プレビュー](#map_sample_preview) + - [詳細](#map_sample_details) +- [レイアウト マネージャー サンプル](#lm_sample) + - [プレビュー](#lm_preview) + - [詳細](#lm_details) +- [データ チャート サンプル](#dchart_sample) + - [｢プレビュー](#dchart_preview) + - [詳細](#dchart_details) +- [関連コンテンツ](#related_content) + +### 要件 +このサンプルを実行するために以下が必要です。 +- 必要となる {environment:ProductName} の JavaScript と CSS ファイル +- {environment:ProductFamilyName} AngularJS ディレクティブ + +### グリッド サンプル +このサンプルは、`igGrid` を AngularJS で使用する方法を示します。 + +#### プレビュー +以下は最終結果のプレビューです。 + +
    + [{environment:SamplesEmbedUrl}/grid/angular]({environment:SamplesEmbedUrl}/grid/angular) +
    + +#### 詳細 +このサンプルでは、更新、ページング、並べ替え機能が有効な場合に igGrid の AngularJS ディレクティブを使用する方法を紹介します。 + +### エディター サンプル +このサンプルは、`igEditors` を AngularJS で使用する方法を示します。 + +#### プレビュー +以下は最終結果のプレビューです。 + +
    + [{environment:SamplesEmbedUrl}/editors/angular]({environment:SamplesEmbedUrl}/editors/angular) +
    + +#### 詳細 +このサンプルは、AngularJS ディレクティブを使用して複数のエディターを作成する方法を紹介します。 + +### タイル マネージャー サンプル +このサンプルは、`igTileManager` を AngularJS で使用する方法を示します。 + +#### プレビュー +以下は最終結果のプレビューです。 + +
    + [{environment:SamplesEmbedUrl}/tile-manager/angular]({environment:SamplesEmbedUrl}/tile-manager/angular) +
    + +#### 詳細 +このサンプルでは、`igTileManager` AngularJS ディレクティブを使用します。データソースを保持するコントローラーの `data` 変数について説明します。`igTileManager` AngularJS ディレクティブを宣言し、`data` 変数にバインドします。 + +### ダイアログ ウィンドウ サンプル +このサンプルは、`igDialog` を AngularJS で使用する方法を示します。 + +#### プレビュー +以下は最終結果のプレビューです。 + +
    + [{environment:SamplesEmbedUrl}/dialog-window/angular]({environment:SamplesEmbedUrl}/dialog-window/angular) +
    + +#### 詳細 +このサンプルでは、`igDialog` AngularJS ディレクティブを使用します。ダイアログ ウィンドウで `headerText` および `height`オプションを設定します。 + +### ツリー サンプル +このサンプルは、`igTree` を AngularJS で使用する方法を示します。 + +#### プレビュー +以下は最終結果のプレビューです。 + +
    + [{environment:SamplesEmbedUrl}/tree-control/angular]({environment:SamplesEmbedUrl}/tree-control/angular) +
    + +#### 詳細 +このサンプルでは、`igTree` AngularJS ディレクティブを使用します。データソースを保持するコントローラーの `data` 変数について説明します。`igTree` AngularJS ディレクティブを宣言し、`data` 変数にバインドします。 + +### マップ サンプル +このサンプルは、`igMap` を AngularJS で使用する方法を示します。 + +#### プレビュー +以下は最終結果のプレビューです。 + +
    + [{environment:SamplesEmbedUrl}/map/angular]({environment:SamplesEmbedUrl}/map/angular) +
    + +#### 詳細 +以上のサンプルでは、AngularJS ディレクティブを使用してズーム可能なマップを初期化する方法を紹介します。 + +### レイアウト マネージャー サンプル +このサンプルは、`igLayoutManager` をインスタンス化するために `AngularJS` ディレクティブを使用する方法を紹介します。 + +#### プレビュー +以下は最終結果のプレビューです。 + +
    + [{environment:SamplesEmbedUrl}/layout-manager/angular]({environment:SamplesEmbedUrl}/layout-manager/angular) +
    + +#### 詳細 +このサンプルでは、`igLayoutManager` AngularJS ディレクティブを使用します。 + +### データ チャート サンプル +このサンプルは、`igDataChart` をインスタンス化するために `AngularJS` ディレクティブを使用する方法を紹介します。 + +#### プレビュー +以下は最終結果のプレビューです。 + +
    + [{environment:SamplesEmbedUrl}/data-chart/angular]({environment:SamplesEmbedUrl}/data-chart/angular) +
    + +#### 詳細 +このサンプルは、データ チャートおよびズームバー コントロールを AngularJS ディレクティブを使用してリンクする方法を紹介します。 + +### 関連コンテンツ +このトピックの追加情報については、以下のトピックも合わせてご参照ください。 + +- [AngularJS で {environment:ProductFamilyName} の使用](/using-ignite-ui-with-angularjs) - このトピックでは、AngularJS の {environment:ProductFamilyName} ディレクティブの使用方法の概要を説明します。 +- [AngularJS を使用した条件付きテンプレート化および高度なテンプレート化](/conditional-and-advanced-templating-with-angularjs) - このトピックでは、条件付きテンプレートの使用方法と、AngularJS の {environment:ProductFamilyName} ディレクティブを使用して作成されたコントロールをカスタマイズするための高度なテンプレート化の方法について説明します。 diff --git a/docs/jquery/src/content/ja/topics/angularjs-directives/conditional-and-advanced-templating-with-angularjs.mdx b/docs/jquery/src/content/ja/topics/angularjs-directives/conditional-and-advanced-templating-with-angularjs.mdx new file mode 100644 index 0000000000..7438eb119e --- /dev/null +++ b/docs/jquery/src/content/ja/topics/angularjs-directives/conditional-and-advanced-templating-with-angularjs.mdx @@ -0,0 +1,219 @@ +--- +title: "AngularJS を使用した条件付きテンプレート化および高度なテンプレート化" +slug: conditional-and-advanced-templating-with-angularjs +--- + +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +#AngularJS を使用した条件付きテンプレート化および高度なテンプレート化 + +##トピックの概要 + +このトピックでは、条件付きテンプレートの使用方法と、AngularJS の {environment:ProductName} ディレクティブを使用して作成されたコントロールをカイタマイズするための高度なテンプレート化の方法について説明します。 + +### 前提条件 + +以下の表は、このトピックを理解するための前提条件として必要な概念、トピック、および記事の一覧です。 + +- トピック + - [AngularJS での {environment:ProductName} の使用](/using-ignite-ui-with-angularjs) + - [Infragistics テンプレート エンジン](../06_Infragistics-Templating-Engine/01_igTemplating Overview.mdx) + +- 概念 + - [Angular の式](https://docs.angularjs.org/guide/expression) + +### このトピックの内容 + +このトピックは、以下のセクションで構成されます。 + +- [**概要**](#introduction) + - [コンテキストとスコープ](#context-and-scope) +- [**宣言による条件付き、および反復テンプレート**](#declarative-templates) + - [ディレクティブ内のテンプレート](#templates-within-directive) + - [外部テンプレート](#external-templates) + - [スコープ メソッドの使用](#scope-method) + - [バインド不可なディレクティブ](#non-bindable-directive) +- [**異なるテンプレート エンジンの使用**](#different-templating-engines) + - [igGrid を使用した jsRender](#jsrender-grid) + - [テンプレート関数のオーバーライド](#overriding-templating) +- [**関連コンテンツ**](#related-content) + - [トピック](#topics) + - [サンプル](#samples) + +## 概要 + +{environment:ProductName} コントロールは、テンプレート化の処理にデフォルトで [Infragistics テンプレート エンジン](../06_Infragistics-Templating-Engine/01_igTemplating Overview.mdx) を使用するため、特に宣言によってAngular アプリケーション内に {environment:ProductName} コントロールを作成する際に考慮が必要ないくつかの特徴があります。テンプレート エンジンは、`${property}` 表記を使用した一般的な置換と、二重の波括弧を使用した **条件付き演算と反復演算** (例: `{{condition / loop}}` ) の両方をサポートします。しかし後者は、バインディングと同じ構文を使用するため Angular の [式](https://docs.angularjs.org/guide/expression) の評価と直接競合ため、そのようなテンプレートを認識し、解析しようとします。これは、構文とコンテキストとの違いによって例外が発生する場合もあり、ほとんど予想される効果がありません。エラーにならない場合でも、コントロールのレンダリング処理実行時の評価で使用するテンプレートのマークアップを変更する可能性があります。このトピックでは、宣言に複合テンプレートを使用する別な方法と、異なるエンジン間でテンプレート処理全体をカスタマイズする方法を紹介します。 + +### コンテキストとスコープ + +エンジンで処理されたテンプレートは、グローバル `ウィンドウ` スコープでも評価されます。したがって、`parseInt()` または `Math` などのグローバル関数とオブジェクトを、条件節で算術演算に追加して使用できます。同様に、`$scope` プロパティはそのままでは評価に使用できません。 + +またコントロール テンプレートは、頻繁にドキュメントまたは Angular のスコープ以外のコンテキストも対象にします。たとえば、`igGrid` 列テンプレートは、描画される現在のデータ レコードのコンテキストで評価され、通常データ ソースに対して直接評価することができません。各コントロールは、データ項目を対象のテンプレートに一致させ、それらをテンプレート関数に渡す必要があります。 + +## 宣言による条件付き、および反復テンプレート + +スコープが定義されたオプションによるコントロールの初期化で、テンプレート化構文を使用することはできますが、宣言によって定義されたテンプレートの場合は常にできるとは限りません。 + +### ディレクティブ内のテンプレート + +テンプレート プロパティが定義されたディレクティブ内の場所によって異なります。たとえば、`igCombo` の のように、多くの場合テンプレートはコントロールの最上位オプションになります。 + +**HTML の場合:** +```html + +ig-combo> +``` + +この構成では、Angular によりテンプレートが解析され、**例外をスロー**しようとします。これは、カスタムタグでさえも、コントロールが使用する実際の有効な HTML タグで置換された後も、親 (例: ``) 要素からの属性が引き継がれるためです。しかし、`igDataChart` の または `igGrid` 上の は**正しく動作します。** + +**HTML の場合:** +```html + + + + + + + +``` + +![](../images/images/Conditional_and_Advanced_Templating_with_AngularJS_1.png) + +**HTML の場合:** +```html + + + + 外部テンプレート + +競合に対処する最も簡単な方法は、`ng-app` ディレクティブの外側にテンプレートを定義することですが、その場合テンプレートを {environment:ProductName} ディレクティブ オプションの一部とすることができません。それでも、外部テンプレートの使用から適切な効果を得ることができます。たとえば、コードを読みやすくする、またはコントロール間でテンプレートを共有できるようになります。どちらの場合も必要なのは、コントロールの初期化に使用するテンプレートをディレクティブが認識できることと、スコープ メソッドを使用できることです。 + +### スコープ メソッドの使用 + +Angular のスコープ内に定義された関数は、オプションの評価を通してテンプレート値の提供に使用できます。初期化のための複合タスクの実行もドキュメント内に定義されたテンプレートへのアクセスも提供することができます。コントロールによっては、テンプレート自体の提供、またはテンプレート (`igDataChart` など) を確認できるID の提供のいずれかを選択できる場合もありますが、{environment:ProductName} ディレクティブは、後の処理のために `getHtml()` 関数をスコープに登録します。 + +**JavaScript の場合:** +```js +function getHtml(selector){ + return $(selector).html(); +}; +``` + +これにより、スコープに jQuery 選択プロキシを提供します。カスタム実装が既に存在する場合、関数はオーバーライドしません。さらに、オプション評価 `getHtml()` を使用すると、テンプレートなどの任意のオプションを HTML に提供することができます。 + +**HTML の場合:** +```html + + + + + +``` + +colTemplate の ID を持つ要素が Angular アプリケーションの外側に定義されたテンプレートのコンテナーの場合: + +**HTML の場合:** +```html + +``` +### バインド不可なディレクティブ + +Angular アプリケーションのスコープ内の配置が必要な外部テンプレートを定義する場合は、[`ng-non-bindable`](https://docs.angularjs.org/api/ng/directive/ngNonBindable) ディレクティブによってテンプレート コンテナーを指定するオプションで、AngularJS に解析をスキップし、要素のコンテンツをコンパイルするように指示できます。 + +**HTML の場合:** +```html + + + +``` + +3. {environment:ProductName} とディレクティブ モジュールを含めます。必要に応じてカスタム ダウンロードを使用しますが、[いずれかの方法で {environment:ProductName} を含めることもできます](/deployment-guide-javascript-resources)。 + + **HTML の場合:** +```html + + + + +``` + +4. すべてのディレクティブがモジュール内にすべてのディレクティブをロードした時点で、独自の依存関係を明確にして、Angular のコントローラ、ファクトリ、プロバイダなどを定義できます。 + + **JavaScript の場合:** +```js + var app = angular.module('igniteui-sample', ['igniteui-directives']); + app.controller('sampleController', ['$scope', function($scope) { + $scope.header = 'Hello World!'; + }]); +``` +5. ビューで、Angular に対しアプリケーションの実行場所を指示し、コントローラにアプリケーションの使用を指示する必要があります。例： + + **HTML の場合:** +```html + + + +``` + +6. 最後に、`igDialog` などの使用するディレクティブを追加します。 + + **HTML の場合:** +```html + + + +``` + ![](../images/images/Using_Ignite_UI_with_AngularJS_2.png) + +## データ バインディング + + +{environment:ProductName} ディレクティブの主な利点の 1 つは、初期化の統合だけでなくデータ バインディングのサポートがあります。ディレクティブは自動的に AngularJS のウォッチャーを初期化時に提供される各ソースに割り当てます。そのため、スコープから`dataSource` オプションまたは `data-source` 属性を必要なプロパティに設定するだけで、データ バインディングを有効にできます。 + +**HTML の場合:** +```html + +``` + +ここでデータは、[factory provider](https://docs.angularjs.org/guide/providers) を使用してスコープ内に挿入され、次のように定義されます。 + +**JavaScript の場合:** + + app.controller('gridController', + ['$scope', 'northwind', + function ($scope, northwind) { + $scope.northwind = northwind.data; + }]); + +### TwoWay データ バインディング + +データを消費し操作できるコントロールを含む最も一般的なケースでのコントロールの場合は、TwoWay データ バインディングがサポートされます。TwoWay データ バインディングでは、対象のデータ ソースが変更された場合に、コントロール内部のデータ値が更新されます。また、変更がコントロールからビューで実行された場合、対象のデータの同期も維持されます。TwoWay データ バインディングをサポートする次のコントロールがあります: + +- igGrid +- igCombo +- igEditors +- igTree + +>**注:** 一部のコントロールでは、`igGrid` の Updating 機能のように、TwoWay データ バインディングで追加機能を有効にする必要があります。 + +### OneWay データ バインディング + +その他のメイン グループは、主にデータの可視化コントロールで構成されるコントロールで情報を編集することができませんが、バインドされたデータ ソース内の変更を引き続き反映します。この場合、ディレクティブは OneWay コネクションを作成し、データの変更内容をビュー内のウィジェットに伝播します。このグループ内には次のコントロールが含まれます: + +- igHtmlEditor +- igDataChart +- igSparkline +- igFunnelChart + +## テンプレート + +多数の {environment:ProductName} のコントロールでは、[Infragistics テンプレート エンジン](../06_Infragistics-Templating-Engine/01_igTemplating Overview.mdx) によって処理されるテンプレートをデフォルトでサポートしています。{environment:ProductName}® Templating Engine は、HTML 要素のセットにコンテンツ テンプレートを適用するための JavaScript ライブラリです。これは条件付きのロジックとネストされたテンプレートをサポートします。エンジンは、提供されたデータ内の対応するプロパティ値の置き換えに、`${property}` 表記を使用します。たとえば、以下のように、列の値をスタイルとフォーマット用に追加のマークアップでラッピングします。 + +**HTML の場合:** +```html + + + + + +``` + +![](../images/images/Using_Ignite_UI_with_AngularJS_3.png) + +または、イメージ列のように、セルに対して追加の HTML マークアップを設定します。 + +**JavaScript の場合:** +```js +app.controller('gridController', + ['$scope', 'northwindEmployees', + function ($scope, northwindEmployees) { + $scope.gridOptions = { + dataSource: $scope.northwindEmployees.data, + columns: [ + //... + { headerText: "PhotoPath", + key: "PhotoPath", + dataType: "string", + template: '' + } + ], + // ... + }; + }]); +``` + +![](../images/images/Using_Ignite_UI_with_AngularJS_4.png) + +### 宣言によるテンプレートの設定 + +テンプレート エンジンは、**条件付のテンプレート**に二重の波括弧 (`{{if condition}}` など) を使用しますが、この括弧はAngular の式で評価に使用されます。したがって、このようなテンプレートを宣言による初期化で使用すると、**競合の原因になる場合があります**。条件付テンプレートを宣言的に提供する方法や、テンプレートのプロセスをカスタマイズする方法の詳細は、[AngularJS を使用した条件付きテンプレート化および高度なテンプレート化](/conditional-and-advanced-templating-with-angularjs) のトピックを参照してください。 + +**関連項目:**[igGrid のサンプル](http://igniteui.github.io/igniteui-angularjs/samples/igGrid.html) + +## HTML コンテンツでの制御 + +HTML のコンテンツをコントロールに提供するには （またオプションとして構文解析されないようにするには)、`` エレメント内で構文解析されないようにラップおよびマークアップする必要があります。以下の例は、追加のマークアップを `igDialog` コントロールに追加する方法を示します。 + +**HTML の場合:** +```html + + +

    + +

    +     +     +``` + +![](../images/images/Using_Ignite_UI_with_AngularJS_5.png) + +この手法は、`igDialog`、`igLayoutManager`、および `igTileManager` などのコントロールに対し、追加のマークアップを適用します。 + +**関連項目:**[igDialog Angular のサンプル](http://igniteui.github.io/igniteui-angularjs/samples/igDialog.html) + +## 関連コンテンツ + +### トピック + +このトピックの追加情報については、以下のトピックも合わせてご参照ください。 + +- [AngularJS を使用した条件付きテンプレート化および高度なテンプレート化](/conditional-and-advanced-templating-with-angularjs) + +### サンプル + +このトピックについては、以下のサンプルも参照してください。 + +- [AngularJS のサンプル用の {environment:ProductName} ディレクティブ](http://igniteui.github.io/igniteui-angularjs/) +- [{environment:ProductName} コントロールの全サンプル]({environment:SamplesUrl}) + diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/03_MVC_API_Docs.stub b/docs/jquery/src/content/ja/topics/asp-net-mvc/03_MVC_API_Docs.stub new file mode 100644 index 0000000000..5f282702bb --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/03_MVC_API_Docs.stub @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/aspnet-mvc-landingpage.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/aspnet-mvc-landingpage.mdx new file mode 100644 index 0000000000..e5ba768184 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/aspnet-mvc-landingpage.mdx @@ -0,0 +1,23 @@ +--- +title: "{environment:ProductNameMVC}" +slug: asp.net-mvc-landingpage +--- + +# {environment:ProductNameMVC} + + + +- [Infragistics Excel エンジン](/win-infragistics-excel-engine) +- [Infragistics Document エンジン](/win-infragistics-document-engine) +- [Infragistics Word ライブラリ](/word-infragistics-word-library) +- [Infragistics.Web.Mvc アセンブリ](Infragistics.Web.Mvc.html) +- [Infragistics.Web.Documents.Excel アセンブリ](Infragistics.Web.Documents.Excel.html) +- [Infragistics.Web.Documents.IO アセンブリ](Infragistics.Web.Documents.IO.html) +- [Infragistics.Web.Documents.Reports アセンブリ](Infragistics.Web.Documents.Reports.html) +- [Infragistics.Web.Documents.Word アセンブリ](Infragistics.Web.Documents.Word.html) + + + + + + diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/api-overview.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/api-overview.mdx new file mode 100644 index 0000000000..f27856175e --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/api-overview.mdx @@ -0,0 +1,183 @@ +--- +title: "API の概要" +slug: documentengine-api-overview +--- + +# API の概要 +このセクションではコード ライブラリに関連する各名前空間を示します。また、このコード ライブラリでプログラミングをする時に使用するいくつかのキー クラスも示します。このページの名前空間とクラスは当社の API マニュアルに直接リンクします。 + +> **注:** 特に言及しないかぎり、Infragistics.Documents アセンブリ内のすべてのプロパティの単位は Points です。 + +Documents 名前空間:|キーインターフェイス: +---------------------|---------------- +[Infragistics.Documents.Reports](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports_namespace.html) |[ISealable](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.ISealable.html) + + +| | | | +| --- | --- | --- | +| Graphics 名前空間: [Infragistics.Documents.Reports.Graphics](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics_namespace.html) | キー クラス: [Brush](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.Brush.html) [Brushes](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.Brushes.html) [Color](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.Color.html) [Colors](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.Colors.html) [DirectBrush](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.DirectBrush.html) [Font](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.Font.html) [Fonts](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.Fonts.html) [Graphics](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.Graphics.html) [Image](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.Image.html) [IndirectBrush](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.IndirectBrush.html) [Pen](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.Pen.html) [Pens](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.Pens.html) [Point](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.Point.html) [Rectangle](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.Rectangle.html) | キーインターフェイス: [IGraphics](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.IGraphics.html) | + + + + +| | | +| --- | --- | +| HTML 名前空間: [Infragistics.Documents.Reports.HTML](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.HTML_namespace.html) | キー クラス: [Attribute](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.HTML.Attribute.html) [Comment](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.HTML.Comment.html) [Content](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.HTML.Content.html) [Element](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.HTML.Element.html) [Reader](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.HTML.Reader.html) [Scanner](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.HTML.Scanner.html) | + + + +| | | | +| --- | --- | --- | +| PDF 名前空間: [Infragistics.Documents.Reports.PDF](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.PDF_namespace.html) | キー クラス: [PdfDocument](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.PDF.PdfDocument.html) | キーインターフェイス: [IBookmark](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.PDF.IBookmark.html) [IPdfInfo](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.PDF.IPdfInfo.html) [IPermissions](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.PDF.IPermissions.html) [IViewerPreferences](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.PDF.IViewerPreferences.html) | + + + +| | | | +| --- | --- | --- | +| Report 名前空間: [Infragistics.Documents.Reports.Report](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report_namespace.html) | キー クラス: [Background](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Background.html) [Borders](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Borders.html) [ContentAlignment](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.ContentAlignment.html) [Corners](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Corners.html) [Height](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Height.html) [Margins](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Margins.html) [Paddings](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Paddings.html) [PageMargins](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.PageMargins.html) [PageSize](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.PageSize.html) [Report](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Report.html) [TextAlignment](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.TextAlignment.html) [Width](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Width.html) | キーインターフェイス: [ICanvas](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.ICanvas.html) [IChain](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.IChain.html) [ICondition](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.ICondition.html) [IContainer](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.IContainer.html) [IDrawing](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.IDrawing.html) [IGap](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.IGap.html) [IGroup](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.IGroup.html) [IImage](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.IImage.html) [IQuickImage](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.IQuickImage.html) [IRotator](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.IRotator.html) [IRule](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.IRule.html) [ISite](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.ISite.html) [IStretcher](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.IStretcher.html) | + + + +| | | +| --- | --- | +| Band 名前空間: [Infragistics.Documents.Reports.Report.Band](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Band_namespace.html) | キーインターフェイス: [IBand](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Band.IBand.html) [IBandDivider](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Band.IBandDivider.html) [IBandFooter](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Band.IBandFooter.html) [IBandHeader](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Band.IBandHeader.html) | + + + +Bookmarks 名前空間:|キーインターフェイス: +----------------------|----------------- +[Infragistics.Documents.Reports.Report.Bookmarks](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Bookmarks_namespace.html) |[IBookmarkLevel](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Bookmarks.IBookmarkLevel.html) < br />[IBookmarks](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Bookmarks.IBookmarks.html) + + + +| | | | +| --- | --- | --- | +| Flow 名前空間: [Infragistics.Documents.Reports.Report.Flow](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Flow_namespace.html) | キー クラス: [ColumnPattern](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Flow.ColumnPattern.html) [FlowPattern](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Flow.FlowPattern.html) | キーインターフェイス: [IFlow](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Flow.IFlow.html) [IFlowColumn](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Flow.IFlowColumn.html) | + + + +| | | | +| --- | --- | --- | +| Grid 名前空間: [Infragistics.Documents.Reports.Report.Grid](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Grid_namespace.html) | キー クラス [GridCellPattern](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Grid.GridCellPattern.html) [GridColumnPattern](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Grid.GridColumnPattern.html) [GridDividerPattern](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Grid.GridDividerPattern.html) [GridFooterPattern](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Grid.GridFooterPattern.html) [GridHeaderPattern](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Grid.GridHeaderPattern.html) [GridPattern](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Grid.GridPattern.html) [GridRowPattern](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Grid.GridRowPattern.html) | キーインターフェイス: [IGrid](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Grid.IGrid.html) [IGridCell](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Grid.IGridCell.html) [IGridColumn](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Grid.IGridColumn.html) [IGridDivider](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Grid.IGridDivider.html) [IGridFooter](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Grid.IGridFooter.html) [IGridHeader](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Grid.IGridHeader.html) [IGridRow](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Grid.IGridRow.html) | + + + +| | | +| --- | --- | +| Index 名前空間: [Infragistics.Documents.Reports.Report.Index](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Index_namespace.html) | キーインターフェイス: [IIndex](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Index.IIndex.html) [IIndexLevel](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Index.IIndexLevel.html) | + + + +| | | | +| --- | --- | --- | +| List 名前空間: [Infragistics.Documents.Reports.Report.List](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.List_namespace.html) | キー クラス: [Bullets](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.List.Bullets.html) [ListPattern](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.List.ListPattern.html) | キーインターフェイス: [IList](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.List.IList.html) [IListItem](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.List.IListItem.html) | + + + +| | | +| --- | --- | +| Preferences 名前空間: [Infragistics.Documents.Reports.Report.Preferences](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Preferences_namespace.html) | キーインターフェイス: [IPreferences](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Preferences.IPreferences.html) | + + + +| | | +| --- | --- | +| Preferences.PDF 名前空間: [Infragistics.Documents.Reports.Report.Preferences.PDF](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Preferences.PDF_namespace.html) | キーインターフェイス: [IEncryptor](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Preferences.PDF.IEncryptor.html) [IPassword](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Preferences.PDF.IPassword.html) [IPdfInfo](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Preferences.PDF.IPdfInfo.html) [IPdfPreferences](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Preferences.PDF.IPdfPreferences.html) [IPermissions](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Preferences.PDF.IPermissions.html) [ISignature](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Preferences.PDF.ISignature.html) [IViewer](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Preferences.PDF.IViewer.html) | + + + +| | | +| --- | --- | +| Preferences.Printing 名前空間: [Infragistics.Documents.Reports.Report.Preferences.Printing](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Preferences.Printing_namespace.html) | キーインターフェイス: [IPrintPreferences](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Preferences.Printing.IPrintPreferences.html) | + + + +| | | +| --- | --- | +| Preferences.XPS 名前空間: [Infragistics.Documents.Reports.Report.Preferences.XPS](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Preferences.XPS_namespace.html) | キーインターフェイス: [IXpsInfo](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Preferences.XPS.IXpsInfo.html) [IXpsPreferences](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Preferences.XPS.IXpsPreferences.html) | + + + +| | | +| --- | --- | +| Projection 名前空間: [Infragistics.Documents.Reports.Report.Projection](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Projection_namespace.html) | キーインターフェイス: [IProjectionPage](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Projection.IProjectionPage.html) [IProjectionPageCollection](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Projection.IProjectionPageCollection.html) | + + + +| | | +| --- | --- | +| QuickList 名前空間: [Infragistics.Documents.Reports.Report.QuickList](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.QuickList_namespace.html) | キーインターフェイス: [IQuickList](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.QuickList.IQuickList.html) [IQuickListItem](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.QuickList.IQuickListItem.html) | + + + +| | | +| --- | --- | +| QuickTable namespace: [Infragistics.Documents.Reports.Report.QuickTable](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.QuickTable_namespace.html) | キーインターフェイス: [IContainerCell](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.QuickTable.IContainerCell.html) [IImageCell](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.QuickTable.IImageCell.html) [IQuickTable](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.QuickTable.IQuickTable.html) [IQuickTableDivider](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.QuickTable.IQuickTableDivider.html) [IQuickTableFooter](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.QuickTable.IQuickTableFooter.html) [IQuickTableHeader](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.QuickTable.IQuickTableHeader.html) [IQuickTableRow](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.QuickTable.IQuickTableRow.html) [ITextCell](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.QuickTable.ITextCell.html) | + + + +| | | +| --- | --- | +| QuickText 名前空間: [Infragistics.Documents.Reports.Report.QuickText](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.QuickText_namespace.html) | キーインターフェイス: [IQuickText](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.QuickText.IQuickText.html) | + + + +| | | | +| --- | --- | --- | +| Section 名前空間: [Infragistics.Documents.Reports.Report.Section](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Section_namespace.html) | キー クラス: [PageNumbering](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Section.PageNumbering.html) | キーインターフェイス: [IDecoration](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Section.IDecoration.html) [ISection](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Section.ISection.html) [ISectionFooter](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Section.ISectionFooter.html) [ISectionHeader](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Section.ISectionHeader.html) [ISectionPage](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Section.ISectionPage.html) [IStationery](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Section.IStationery.html) | + + + +| | | +| --- | --- | +| Segment 名前空間: [Infragistics.Documents.Reports.Report.Segment](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Segment_namespace.html) | キーインターフェイス: [ISegment](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Segment.ISegment.html) [ISegmentFooter](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Segment.ISegmentFooter.html) [ISegmentHeader](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Segment.ISegmentHeader.html) | + + + +| | | +| --- | --- | +| Shapes 名前空間: [Infragistics.Documents.Reports.Report.Shapes](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Shapes_namespace.html) | キーインターフェイス: [IArc](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Shapes.IArc.html) [IEllipse](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Shapes.IEllipse.html) [ILabel](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Shapes.ILabel.html) [ILine](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Shapes.ILine.html) [IPath](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Shapes.IPath.html) [IPie](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Shapes.IPie.html) [IPolygon](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Shapes.IPolygon.html) [IPolyline](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Shapes.IPolyline.html) [IRectangle](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Shapes.IRectangle.html) [IShapes](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Shapes.IShapes.html) | + + + +| | | | +| --- | --- | --- | +| Table 名前空間: [Infragistics.Documents.Reports.Report.Table](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Table_namespace.html) | キー クラス: [TableCellPattern](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Table.TableCellPattern.html) [TableDividerPattern](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Table.TableDividerPattern.html) [TableFooterPatter](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Table.TableFooterPattern.html) [TableHeaderPattern](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Table.TableHeaderPattern.html) [TablePattern](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Table.TablePattern.html) [TableRowPattern](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Table.TableRowPattern.html) | キーインターフェイス: [ITableRowPattern](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Table.ITable.html) [ITableCell](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Table.ITableCell.html) [ITableDivider](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Table.ITableDivider.html) [ITableFooter](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Table.ITableFooter.html) [ITableHeader](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Table.ITableHeader.html) [ITableRow](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Table.ITableRow.html) | + + + +| | | | +| --- | --- | --- | +| Text 名前空間: [Infragistics.Documents.Reports.Report.Text](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Text_namespace.html) | キー クラス: [Style](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Text.Style.html) [TextPattern](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Text.TextPattern.html) | キーインターフェイス: [IText](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Text.IText.html) | + + + +| | | +| --- | --- | +| TOC 名前空間: [Infragistics.Documents.Reports.Report.TOC](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.TOC_namespace.html) | キーインターフェイス: [ILevel](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.TOC.ILevel.html) [ITOC](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.TOC.ITOC.html) | + + + +| | | | +| --- | --- | --- | +| Tree 名前空間: [Infragistics.Documents.Reports.Report.Tree](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Tree_namespace.html) | キー クラス: [TreeCaptionPattern](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Tree.TreeCaptionPattern.html) [TreeNodePattern](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Tree.TreeNodePattern.html) [TreePattern](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Tree.TreePattern.html) | キーインターフェイス: [ICaption](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Tree.ICaption.html) [INode](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Tree.INode.html) [ITree](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Tree.ITree.html) | + + + +| | | | +| --- | --- | --- | +| RTF 名前空間: [Infragistics.Documents.Reports.RTF](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.RTF_namespace.html) | キー クラス: [Character](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.RTF.Character.html) [Color](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.RTF.Color.html) [Document](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.RTF.Document.html) [Font](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.RTF.Font.html) [Info](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.RTF.Info.html) [Paragraph](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.RTF.Paragraph.html) [Reader](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.RTF.Reader.html) [Section](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.RTF.Section.html) | キーインターフェイス: [ICallback](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.RTF.ICallback.html) | + + + +| | | | +| --- | --- | --- | +| Utils 名前空間: [Infragistics.Documents.Reports.Utils](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Utils_namespace.html) | キー クラス: [Converter](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Utils.Converter.html) [FileBuffer](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Utils.FileBuffer.html) | キーインターフェイス: [IReader](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Utils.IReader.html) [IWriter](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Utils.IWriter.html) | + + + +| | | | +| --- | --- | --- | +| XPS 名前空間: [Infragistics.Documents.Reports.XPS](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.XPS_namespace.html) | キー クラス: [XpsDocument](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.XPS.XpsDocument.html) | キーインターフェイス: [IBookmark](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.XPS.IBookmark.html) [IXpsInfo](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.XPS.IXpsInfo.html) [IXpsPage](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.XPS.IXpsPage.html) | + + diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/deploying-infragistics-document-engine.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/deploying-infragistics-document-engine.mdx new file mode 100644 index 0000000000..b4b28e2a2d --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/deploying-infragistics-document-engine.mdx @@ -0,0 +1,25 @@ +--- +title: "Infragistics Document Engine の配備" +slug: documentengine-deploying-infragistics-document-engine +--- + +# Infragistics Document Engine の配備 + +.NET アプリケーションを配備する時、実行ファイルに加えて特定のファイルを配布する必要があります。アプリケーションに 1 つ以上の Infragistics 要素を含む場合、アプリケーションの一部として 1 つ以上の Infragistics アセンブリ ファイルを配布または配備する必要があります。このトピックでは、再配布する必要があるファイルの概要を述べます。 + +> **注:** このトピックで具体的に説明されていないファイルは、再配布不可能と見なしてください。Infragistics 製品に含まれているファイルで一覧にないファイルは配布できません。Infagistics 製品のライセンスのない他のマシンへのコピー、移動、共有が禁止されています。 + +アプリケーションを配備するためには、以下のファイルを再配布する必要があります。 + + + Infragistics.Web.Documents.Reports.dll + +これは Infragistics Document Engine™ コード ライブラリを含む .NET アセンブリ。 + + + + + + + + diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/getting-started-with-infragistics-document-engine.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/getting-started-with-infragistics-document-engine.mdx new file mode 100644 index 0000000000..474ced16d4 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/getting-started-with-infragistics-document-engine.mdx @@ -0,0 +1,58 @@ +--- +title: "Infragistics Document Engine を使用した作業の開始" +slug: documentengine-getting-started-with-infragistics-document-engine +--- + +# Infragistics Document Engine を使用した作業の開始 + + + +Infragistics Document Engine™ はいくつかのインターフェイスを持った複数の名前空間をそれぞれに含んでいる大きいアセンブリです。Documents アセンブリを初めて使用する場合には、その機能を完全に理解しようとして、アセンブリの大きさに若干困惑するかもしれません。このため、Infragistics Document Engine を理解し、固有のシンプルなレポートを作成するために最短のルートを進むことができるように、クイック スタートのトピックを追加しました。 + +レポートの記述は線形のプロセスであるため、以下のロードマップを使用すると、Document Engine の Document Object Model を理解しやすくなります。 + + レポート > セクション > レイアウト要素 > レポート グラフィックス > パターン コンテンツ > パブリッシュ + +## レポート +[`Report`](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Report.html) オブジェクトは、レポートを作成するために必要なすべてのオブジェクト、プロパティ、情報を含みます。レポート作成の最初のステップは、このオブジェクトをインスタンス化することです。いったんインスタンス化したら、セクションおよびレポート情報を追加し、レポート固有のプロパティを設定して、レポートを保存するか、既存のレポートをロードすることができます。プレファレンス、添付ファイル、埋め込みフォントだけでなく、レポートのブックマークにアクセスすることができます。コンテンツをレポートに追加する準備が整ったら、AddSection メソッドを使用して Section 要素を追加することができます。 + +詳細は、[`Report`](/documentengine-report) を参照してください。 + +## セクション +Report オブジェクトを取得したら、[`ISection`](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Section.ISection.html) オブジェクトの追加が完了するまで一切コンテンツを作成できません。Section 要素は、レポート自体に追加可能である唯一のレイアウト要素であるため独特な要素です。その他のすべてのレイアウト要素 (たとえば、Band、Chain、Flow、および Group) は Section 要素に追加できます。必要な数だけセクションをレポートに追加してください。複数のヘッダーとフッターを追加するだけでなく、追加のページをセクションに追加することができます。Section 要素が含むことができるレイアウト 要素およびコンテンツと、含むことができないレイアウト 要素およびコンテンツをしっかりと把握する必要があります。 + +詳細は[Section](/documentengine-section) を参照してください。 + +## レイアウト要素 +レポートのコンテンツの構成およびレイアウトを支援する 10 の要素があります。これらの要素にはテキスト、画像、表、ツリー、リストなど多くのコンテンツ 要素を含むことができます。手始めに適したレイアウト 要素は、Band 要素です。Band 要素は Section 要素と同じように、その他のほとんどのレイアウト 要素とパターン コンテンツを含むことができます。Band 要素には繰り返し可能なヘッダー、フッター、デバイダのコレクションもあります。 + +詳細は[「レポート レイアウト」](/documentengine-report-layout)のセクションを参照してください。またユーザーのニーズに最も適したレイアウト 要素については [Band](/documentengine-band) のトピックを参照してください。 + +## レポート グラフィックス +これでレポート記述の基本（レポートの作成、セクションの追加、レイアウト 要素とコンテンツをこれらのセクションに入れる）が完了したので、レポート グラフィックスを使用することで、レポートを生き生きとさせる必要があります。レポート グラフィックスは、色、グラデーション、単色塗りつぶし、異なるスタイル フォント、すべての形状とサイズの矩形を含むキャンバス、および画像を提供します（画像は百分は一見にしかずです）。Brushes と Pens でレポートのレイアウトを美しくします。Backgrounds と Borders それぞれに Brushes と Pens を使用することができ、読んで楽しいエグゼクティブ レポートを作成するという目的に大きく貢献します。 + +詳細は[「レポート グラフィックス」](/documentengine-report-graphics)を参照してください。すぐに開始したい場合には、[`Brushes`](/documentengine-brushes) と [`Pens`](/documentengine-pens) を参照してください。 + +## パターン コンテンツ +パターン コンテンツはレポートの中心です。追加したいテキストは、このグループ内の要素によって行われます。ここに Text 要素があり、任意のスタイルで任意のテキストを追加できます。DataSet からデータの Grids、Lists、Trees を使用し、[ITable](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Table.ITable.html) インターフェイスを使用します。レポートにとって重要な名前または製品のリストがありますか?[`IList`](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.List.IList.html) インターフェイスを使用してリストを作成します。これらの要素は、特定のメソッドによってそれぞれ簡単にレイアウト 要素に追加できます（ITable インターフェイスの場合は AddTable、IList インターフェイスの場合は AddList）。これらのメソッドは、ほとんどのレイアウト要素にあります。 + +詳細は[「パターン コンテンツ」](/documentengine-pattern-content)を参照してください。すぐに開始したい場合には、[Text](/documentengine-text) のトピックを参照してください。 + +## パブリッシュ +レポートの記述が終わったら、誰かと共有しなければならない場合があります。レポートをパブリッシュする方法は、いくつかの要因によって異なります。パブリッシュの方法を見てみましょう。 + +**印刷** -- 最も簡単な公開の方法です。Report オブジェクトから [Print](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Report~Print.html) を呼び出すと、レポートをローカル プリンタに直接印刷することができます。 + +**パブリッシュ** -- 「パブリッシュ」という語は、PDF または XPS ファイルにレポートを書き出すことを指します。この方法は、Adobe Acrobat® PDF Writer を使用して、 Microsoft® Word 文書を出力することと同じです。 + +**XML として保存** -- レポート コンテンツ全体を XML ファイルに保存するオプションが提供されています。これによって、完成したレポート全体を保存して後でロードすることができます。パブリッシュした後でレポートに追加や修正が必要なことが分かった場合に役に立ちます。 + +**生成** -- この公開方法は独特で若干変わっていますが非常に役に立ちます。Report オブジェクトの [`Generate`](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Report~Generate.html) メソッドを使用すると、大量のページ セットで構成されるグラフィックス オブジェクトをレポートから作成します。これらのグラフィックス オブジェクトは、レポートのページのサムネイル画像として使用することができます。 + +詳細は、[「レポートの公開」](/documentengine-publish-a-report)を参照してください。 + + + + + + diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/welcome-to-infragistics-document-engine.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/welcome-to-infragistics-document-engine.mdx new file mode 100644 index 0000000000..b05fc54bcd --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/welcome-to-infragistics-document-engine.mdx @@ -0,0 +1,30 @@ +--- +title: "Infragistics Document Engine にようこそ" +slug: documentengine-welcome-to-infragistics-document-engine +--- + +# Infragistics Document Engine にようこそ + + +Infragistics Document Engine™ は完全な必要なものを完備したコード ライブラリで、Portable Document Format（PDF）と XML Paper Specification（XPS）の両フォーマットで優れたレポートを生成することができます。Infragistics Document Engine の Document Object Model (DOM) は、すばやく起動、実行することが可能で、カスタマイズも簡単です。DOM を使用すると、効果的にレポートを作成、セクションを追加、テキストを追加、レポートをパブリッシュ、すべてを簡単な 4 行のコードで済ませることができます。 + +## [レポート要素](/documentengine-report-elements) +レポート要素を使用すると、レポートの本文の作成、レイアウトの管理、コンテンツの追加が可能なほか、目次や索引などのナビゲーション ヘルパーを追加できます。 + +## [DocumentEngine レポート レイアウト](/documentengine-report-layout) +情報のフローと情報をページでどのようにレイアウトするのかを制御します。Sections を使用して、レポート内の論理領域を定義すると、それぞれが固有のヘッダーとフッターを含むことができます。Flow 要素を使用して、列をレポートに追加します。Tables、Lists、Trees などの繰り返し可能なコンテンツを追加する手段を提供する Chain、Rotator、および Stretcher Content 要素など、より高度なレイアウト要素を使用してレポートのレイアウトをコントロールします。これらの要素は、データ ソースと適切に組み合わされます。Table 要素を使用して、DataSet から Customers の表を複製し、List 要素を使用して特定のステータスの全顧客をリストし、Tree 要素を使用して、階層データ ソースを簡略化されたバージョンで表示することができます。 + +## [クイック コンテンツ](/documentengine-quick-content) +テキスト、画像、リスト、または表を素早く追加する必要がある時には、これらの軽量の要素が最適です。十分な機能を備えた要素ほど複雑でありませんが、これらの要素は最小限の労力でジョブを完了できます。 + +## [ナビゲーション ヘルパー](/documentengine-navigation-helpers) +500 ページのレポートで不可欠な特定の要素があります。レポートが極端に長い場合、レポートのコンテンツを素早く参照し、特定のページにジャンプするための目次の設定に役立ちます。または、特定の用語を見つける必要がある場合には、Index は特定の用語が存在する全ページをリストするので便利です。Bookmarks も後で戻りたい重要なページを追跡する際の優れたナビゲーション ヘルパーです。 + +## [レポート グラフィックス](/documentengine-report-graphics) +レポートのレイアウトが決定したら、いくつかのグラフィックス 要素を使用して外観を改善します。Brushes と Pens を使用して、異なる Colors で要素を塗りつぶし、要素の境界線の外観を制御します。チャート、ロゴ、製品などの画像を追加します。Points を使用して、複雑な多角形の Shapes を作成します。Fonts 要素を使用して、レポートで使用される多数のフォントを管理します。 + + + + + + diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/win-infragistics-document-engine.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/win-infragistics-document-engine.mdx new file mode 100644 index 0000000000..1b6e65239a --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/win-infragistics-document-engine.mdx @@ -0,0 +1,18 @@ +--- +title: "Infragistics Document Engine" +slug: win-infragistics-document-engine +--- + +# Infragistics Document Engine + + + +Infragistics Document Engine は、Portable Document Format（PDF）と XML Paper Specification（XPS）の両ファイル フォーマットで優れたビジネス レポートを提供する機能です。完全な Document Object Model（DOM）を使用して、想像可能なレポートのシナリオを処理します。Infragistics Document Engine には、レポートの情報、参照およびセキュリティに対するサポートを含みます。色や個性をレポートに追加するには、膨大なグラフィックス オブジェクトもあります。 + +以下のリンクをクリックして、Infragistics Document Engine コントロールについての情報にアクセスします。 + +- [Infragistics Document Engine にようこそ](/documentengine-welcome-to-infragistics-document-engine): このトピックは、Infragistics Document Engine の非常に高レベルの概要を提供します。レポートに命を吹き込み色を付けるレポート グラフィックスだけでなく、プロフェッショナルのレポートを構築するために連動する多数のレポート 要素を紹介します。 +- [Infragistics Document Engine を使用した作業の開始](/documentengine-getting-started-with-infragistics-document-engine): Infragistics Document Engine を基本的に理解すると、このトピックはコード ライブラリの使用を開始する際に役に立ちます。このトピックは、フル レポートを作成するために作成する必要があるオブジェクトの簡単なガイドです。 +- [レポートの記述](/documentengine-writing-reports): このセクションは、Infragistics Document Engine のヘルプ重要な部分です。各レポートおよびグラフィックス要素の詳細を示します。このトピックは概念的なガイドの形になっています。ほとんどの要素は膨大で多くの機能を含んでいるからです。 +- [Infragistics Document Engine の配備](/documentengine-deploying-infragistics-document-engine): アプリケーションが Infragistics Document Engine を使用する場合、アプリケーションの一部として再配布する必要がある Infragistics .NET アセンブリのリストのトピックを参照してください。 +- [API の概要](/documentengine-api-overview): このトピックは、Infragistics Excel Engine でプログラミング中に作業する名前空間とクラスをリストします。このトピックの名前空間とクラスの一覧は、{environment:ProductName} ヘルプの API 参照ガイドへリンクします。 diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/known-issues.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/known-issues.mdx new file mode 100644 index 0000000000..665ef901e2 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/known-issues.mdx @@ -0,0 +1,38 @@ +--- +title: "既知の問題と制限 (Infragistics Document Engine)" +slug: documentengine-known-issues +--- + +# 既知の問題と制限 (Infragistics Document Engine) + +## 既知の問題点と制限の概要 +以下の表に、Infragistics Document Engine のコンポーネントの既知の問題と制限を簡単に説明します。 + +**凡例:** + +![](../../../../images/images/positive.png) - 回避策 + +![](../../../../images/images/negative.png) - 既知の回避策はありません + +![](../../../../images/images/plannedFix.png) - 既知の回避策はありません。修正予定です + +## Infragistics Document Engine +問題|説明|状態 +---|---|--- +名前空間の競合|Infragistics ASP.NET と {environment:ProductName}™ のドキュメント アセンブリを併用すると、名前空間の競合による例外が発生します。 | ![](../../../../images/images/positive.png) + + + +## 既知の問題点と制限の詳細 +Infragistics ASP.NET と {environment:ProductName} のドキュメント アセンブリを併用すると、名前空間の競合による例外が発生します。 + +### 回避方法 +アプリケーションで Infragistics ASP.NET のドキュメント アセンブリと {environment:ProductName} のドキュメント アセンブリのいずれか一方を参照します。これらのアセンブリ内のドキュメント ライブラリは同じで、どちらを使用してもかまいません。 + + + + + + + + diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/layout/advanced/advanced-layout-elements.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/layout/advanced/advanced-layout-elements.mdx new file mode 100644 index 0000000000..ebb3e0c196 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/layout/advanced/advanced-layout-elements.mdx @@ -0,0 +1,22 @@ +--- +title: "高度なレイアウト要素" +slug: documentengine-advanced-layout-elements +--- + +# 高度なレイアウト要素 +高度なレイアウト要素は、完全なレポートを作成するために必ずしも必要としない要素です。これらの要素は、レポートのレイアウトに関連した特定のタスクを実行する支援を行います。 + +高度なレイアウト 要素の詳細は以下のリンクをクリックしてください。 + +- [チェーン](/documentengine-chain) +- [ギャップ](/documentengine-gap) +- [回転器](/documentengine-rotator) +- [規則](/documentengine-rule) +- [サイト](/documentengine-site) +- [ストレッチャ](/documentengine-stretcher) + + + + + + diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/layout/advanced/chain.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/layout/advanced/chain.mdx new file mode 100644 index 0000000000..62c230976f --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/layout/advanced/chain.mdx @@ -0,0 +1,143 @@ +--- +title: "チェーン" +slug: documentengine-chain +--- + +# チェーン + +Chain 要素は、1 ページにすべてを表示するための十分なスペースがないものの、コンテンツを分割したくない場合に非常に役に立ちます。通常、Text 要素を使用する時に、コンテンツを収めるために十分なスペースがページにない場合、以下の図に表示されるように次のページに流し込まれます。 + +![](../../../../../../images/images/Chain_01.png) + +ところが、Chain 要素を使用することによって、そのコンテンツを一緒にすることができます。ページの区切りで要素のコンテンツが分割される代わりに、以下のスクリーンショットに示されるように要素全体を次ページに移動します。 + +![](../../../../../../images/images/Chain_02.png) + +これは、1 ページにテキストの段落を収めたい場合や 1 ページに画像とテキスト キャプションを一緒に収めたい場合に役に立ちます。Chain 要素は分割できないチェーンの中にすべてのコンテンツをリンクします。唯一の例外は、1 ページに収めることができるコンテンツよりも多くのコンテンツがチェーンの中にある場合です。この場合、Chain 要素はすべてのコンテンツを 1 ページに一緒に収めることができないため、コンテンツ 要素を一緒にグループ化しようとします。 + +------ + +以下のコードを使用して、[Chain](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.IChain.html) 要素を Section 要素に追加し、テキストを追加します。 + +1. **レポートを定義して、Section 要素を追加します。** + + **Visual Basic の場合:** + +```vb + ' + ' Create the report and add a Section element. + ' + Dim report As Infragistics.Documents.Reports.Report.Report = _ + New Infragistics.Documents.Reports.Report.Report() + + Dim section1 As Infragistics.Documents.Reports.Report.Section.ISection = _ + report.AddSection() + + section1.PageMargins = _ + New Infragistics.Documents.Reports.Report.Margins(50) +``` + + **C# の場合:** + +```csharp + // + // Create the report and add a section. + // + Infragistics.Documents.Reports.Report.Report report = + new Infragistics.Documents.Reports.Report.Report(); + + Infragistics.Documents.Reports.Report.Section.ISection section1 = + report.AddSection(); + + section1.PageMargins = + new Infragistics.Documents.Reports.Report.Margins(50); +``` + +2. **分割できないコンテンツを Section 要素に追加します。** + + 以下のテキストを使用して、`string1` 変数を設定します。 + + > Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Donec imperdiet mattis sem.Nunc ornare elit at justo.In quam nulla, lobortis non, commodo eu, eleifend in, elit.Nulla eleifend.Nulla convallis.Sed eleifend auctor purus.Donec velit diam, congue quis, eleifend et, pretium id, tortor.Nulla semper condimentum justo.Etiam interdum odio ut ligula.Vivamus egestas scelerisque est. Donec accumsan.In est urna, vehicula non, nonummy sed, malesuada nec, purus.Vestibulum erat.Vivamus lacus enim, rhoncus nec, ornare sed, scelerisque varius, felis.Nam eu libero vel massa lobortis accumsan.Vivamus id orci.Sed sed lacus sit amet nibh pretium sollicitudin.Morbi urna. + + **Visual Basic の場合:** + +```vb + ' + ' Add a Chain element and a Text element to the chain. + ' This content will be unbreakable. + ' + + Dim string1 As String = "Lorem ipsum..." + + For i As Integer = 0 To 7 + ' Add a Chain element to the Band element. + Dim chain1 As Infragistics.Documents.Reports.Report.IChain = _ + section1.AddChain() + + ' Add a Text element to the Chain element. + Dim chainText As Infragistics.Documents.Reports.Report.Text.IText = _ + chain1.AddText() + + ' Set some styles on the text so we can see where the + ' element begins and ends. This way, we can be sure + ' that the content is not being separated. + chainText.Background = _ + New Infragistics.Documents.Reports.Report.Background _ + (Infragistics.Documents.Reports.Graphics.Brushes.SteelBlue) + chainText.Borders = _ + New Infragistics.Documents.Reports.Report.Borders _ + (Infragistics.Documents.Reports.Graphics.Pens.Black) + chainText.Paddings = _ + New Infragistics.Documents.Reports.Report.Paddings(5) + chainText.Margins = _ + New Infragistics.Documents.Reports.Report.Margins(5) + + ' Add content to the Text element. + chainText.AddContent(string1) + chainText.AddLineBreak() + chainText.AddLineBreak() + chainText.AddContent(string1) + Next i +``` + + **C# の場合:** + +```csharp + // + // Add a Chain element and a Text element to the chain. + // This content will be unbreakable. + // + + string string1 = "Lorem ipsum..."; + + for (int i = 0; i < 8; i++) + { + // Add a Chain element to the Band element. + Infragistics.Documents.Reports.Report.IChain chain1 = + section1.AddChain(); + + // Add a Text element to the Chain element. + Infragistics.Documents.Reports.Report.Text.IText chainText = + chain1.AddText(); + + // Set some styles on the text so we can see where the + // element begins and ends. This way, we can be sure + // that the content is not being separated. + chainText.Background = + new Infragistics.Documents.Reports.Report.Background + (Infragistics.Documents.Reports.Graphics.Brushes.SteelBlue); + chainText.Borders = + new Infragistics.Documents.Reports.Report.Borders + (Infragistics.Documents.Reports.Graphics.Pens.Black); + chainText.Paddings = + new Infragistics.Documents.Reports.Report.Paddings(5); + chainText.Margins = + new Infragistics.Documents.Reports.Report.Margins(5); + + // Add content to the Text element. + chainText.AddContent(string1); + chainText.AddLineBreak(); + chainText.AddLineBreak(); + chainText.AddContent(string1); + } +``` diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/layout/advanced/gap.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/layout/advanced/gap.mdx new file mode 100644 index 0000000000..68a8cb5f20 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/layout/advanced/gap.mdx @@ -0,0 +1,70 @@ +--- +title: "ギャップ" +slug: documentengine-gap +--- + +# ギャップ + +Gap 要素は、まさにその名前が示すとおり、ギャップをコンテンツに追加します。異なるレイアウト 要素があるがページで要素を特定のスペースだけ垂直に離したい場合に、使用しなければならないのが Gap 要素です。 + +![](../../../../../../images/images/Gap.png) + +以下のコードを使用して、上記の画像のように 2 つの Gap 要素によって分割された 3 つの Text 要素を追加します。このトピックは、`section1` と呼ばれる少なくともひとつの [Section](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Report.html) 要素だけでなく、[Report](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Section.ISection.html) 要素が定義済みであることを前提としています。 + +Gap 要素は、ひとつのプロパティ、[`Height`](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.IGap~Height.html) プロパティしか公開しません。Height プロパティによって、Gap の高さを固定のポイント数で指定するか、使用可能なスペースの残りのパーセントで指定することができます。 + +## 固定の高さ +Gap 要素の高さを固定の高さに設定する時には、Height プロパティを [`FixedHeight`](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.FixedHeight.html) クラスの新しいインスタンスに設定する必要があります。ギャップを開けたいポイント数を `FixedHeight` クラスのコンストラクターに渡します。 + +## 相対的な高さ +Gap 要素の相対的な高さを使用するには、Height プロパティを [`RelativeHeight`](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.RelativeHeight.html) クラスのインスタンスに設定する必要があります。これによって、使用可能な残りスペースのパーセンテージでギャップの高さを指定できます。そのため、ページの最後に追加された Gap 要素と同じ値を持つページの最初に追加された Gap 要素は、より大きなギャップになります。これは、最初の Gap 要素はその後に残されるページの量が多いためにパーセントで指定すると数字が大きくなってしまうからです。右の画像を参照すると、この概念をよく理解できます。最初の Gap 要素は、追加された時点のページの 25% を使用しています。2 番目の Gap 要素は追加された時点のページの 50% を使用していますが、最初の Gap 要素とほぼ同じサイズになっています。 + +**Visual Basic の場合:** + +```vb +Imports Infragistics.Documents.Reports.Report +... + +Dim gapText As Infragistics.Documents.Reports.Report.Text.IText = section1.AddText() +gapText.Background = New Background(Brushes.LightSteelBlue) +gapText.AddContent("Paragraph one text...") + +Dim gap As Infragistics.Documents.Reports.Report.IGap = section1.AddGap() +gap.Height = New RelativeHeight(25) + +gapText = section1.AddText() +gapText.Background = New Background(Brushes.LightSteelBlue) +gapText.AddContent("Paragraph two text...") + +gap = section1.AddGap() +gap.Height = New RelativeHeight(50) + +gapText = section1.AddText() +gapText.Background = New Background(Brushes.LightSteelBlue) +gapText.AddContent("Paragraph three text...") +``` + +**C# の場合:** + +```csharp +using Infragistics.Documents.Reports.Report; +... + +Infragistics.Documents.Reports.Report.Text.IText gapText = section1.AddText(); +gapText.Background = new Background(Brushes.LightSteelBlue); +gapText.AddContent("Paragraph one text..."); + +Infragistics.Documents.Reports.Report.IGap gap = section1.AddGap(); +gap.Height = new RelativeHeight(25); + +gapText = section1.AddText(); +gapText.Background = new Background(Brushes.LightSteelBlue); +gapText.AddContent("Paragraph two text..."); + +gap = section1.AddGap(); +gap.Height = new RelativeHeight(50); + +gapText = section1.AddText(); +gapText.Background = new Background(Brushes.LightSteelBlue); +gapText.AddContent("Paragraph three text..."); +``` diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/layout/advanced/rotator.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/layout/advanced/rotator.mdx new file mode 100644 index 0000000000..50e0b8f5b7 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/layout/advanced/rotator.mdx @@ -0,0 +1,63 @@ +--- +title: "回転器" +slug: documentengine-rotator +--- + +# 回転器 + + +Rotator 要素は、コンテンツを時計回りに 90 度または反時計回りに 90 度のいずれかに回転します。コンテンツは、デフォルトで反時計回りに回転されますが、Backward プロパティを True に設定することによって、コンテンツを時計回りに回転することができます。コンテンツを 90 度回転することだけが必要な場合には、Rotator 要素を使用してください。コンテンツを 45 度またはその他の任意の角度回転する必要がある場合には、Site 要素を使用する必要があります。Site 要素の詳細は、「サイト」を参照してください。 + +右側の画像では、Rotator 要素内に 2 つの Text 要素があります。最初の Rotator 要素は、Backward プロパティを True に設定することによって、テキストを時計回りに 90 度回転します。テキストが左揃えだったために、Stretcher 要素も必要でした。2 番目の Rotator 要素は最初の要素と正反対です。 + +![](../../../../../../images/images/Rotator.png) + +以下のコードは、上記のスクリーンショットと同じようにレポートにページを作成します。 + +以下のテキストを使用して、`string1` 変数を設定します。 + +> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Donec imperdiet mattis sem.Nunc ornare elit at justo.In quam nulla, lobortis non, commodo eu, eleifend in, elit.Nulla eleifend.Nulla convallis.Sed eleifend auctor purus.Donec velit diam, congue quis, eleifend et, pretium id, tortor.Nulla semper condimentum justo.Etiam interdum odio ut ligula.Vivamus egestas scelerisque est. Donec accumsan.In est urna, vehicula non, nonummy sed, malesuada nec, purus.Vestibulum erat.Vivamus lacus enim, rhoncus nec, ornare sed, scelerisque varius, felis.Nam eu libero vel massa lobortis accumsan.Vivamus id orci.Sed sed lacus sit amet nibh pretium sollicitudin.Morbi urna. + +**C# の場合:** + +```csharp +using Infragistics.Documents.Reports.Report; +... +string string1 = "Lorem ipsum..."; + +// Define a Rotator element and add it to a section. +Infragistics.Documents.Reports.Report.IRotator rotator1 = section1.AddRotator(); + +// Define a Text element and add it to the rotator. +// Add content to the Text element. You may replace +// 'string1' with some text. +Infragistics.Documents.Reports.Report.Text.IText rotatorText1 = rotator1.AddText(); +rotatorText1.AddContent(string1); + +// Set standard properties to help us see the rotator +// better. The Backward property flips the content 180 +// degrees. The AddStretcher method stretches the content +// to the bottom (right side since it's rotated 90 degrees) +// of the content area. +rotator1.Backward = true; +rotator1.Background = new Background(Brushes.LightSteelBlue); +rotator1.Height = new RelativeHeight(50); +rotator1.Paddings.All = 10; +rotator1.Margins.All = 5; +rotator1.AddStretcher(); + +// Define another rotator, same as above. This time, the text +// will be rotated to the opposite direction and will be at the +// top (left side since it's rotated -90 degrees) of the content +// area. +Infragistics.Documents.Reports.Report.IRotator rotator2 = section1.AddRotator(); + +Infragistics.Documents.Reports.Report.Text.IText rotatorText2 = rotator2.AddText(); +rotatorText2.AddContent(string1); + +rotator2.Backward = false; +rotator2.Background = new Background(Brushes.LightSteelBlue); +rotator2.Height = new RelativeHeight(100); +rotator2.Paddings.All = 10; +rotator2.Margins.All = 5; +``` diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/layout/advanced/rule.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/layout/advanced/rule.mdx new file mode 100644 index 0000000000..3b1b924b26 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/layout/advanced/rule.mdx @@ -0,0 +1,53 @@ +--- +title: "規則" +slug: documentengine-rule +--- + +# 規則 + +Rule 要素は、デザイン、目的の両方において HTML の Horizontal Rule タグに非常に似ています。Rule 要素は、実線の黒の 1 ピクセル幅などのデフォルト設定を使用した、親要素の幅全体に引かれるシンプルな線です。Rule 要素はただのシンプルな線でなければならないというわけではありませんが、いくつかのプロパティを変更して強力なコンテンツ分割ツールとすることができます。 + +Rule 要素の幅は線が水平にどこまで引かれるかを定義するものではありません。線は常に親コンテナーの幅全体に引かれます。Rule 要素の幅は線の太さです。したがって、Width プロパティは要素の高さと考えた方がいいかもしれません (通常高さは垂直方向の距離と考えるからです)。 + +![](../../../../../../images/images/Rule.png) + + +以下のコードを使用して、上記の画像のようなページをセクションに作成します。以下のコードは、[Report](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Report.html) 要素が定義済みであり、少なくともひとつの [ISection](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Section.ISection.html) 要素が追加されて section1 と名前を指定されていることを前提とします。 + +**C# の場合:** + +```csharp +using Infragistics.Documents.Reports.Report; +. +. +. +section1.AddQuickText("20 pixels of space above..."); + +// Define a Rule element and provide an extra 20 pixels +// of space above and 50 pixels of space below. +Infragistics.Documents.Reports.Report.IRule rule = section1.AddRule(); +rule.Margins.Top = 20; +rule.Margins.Bottom = 50; + +section1.AddQuickText("...and 50 pixels of space below..."); + +// The Gap element helps space content out. This gap +// is specifically set to provide 20 pixels of space. +Infragistics.Documents.Reports.Report.IGap ruleGap = section1.AddGap(); +ruleGap.Height = new FixedHeight(20); + +section1.AddQuickText("...and now three pixels wide, red, and dotted."); + +// Add another Rule element to the section. +rule = section1.AddRule(); +// The Rule's color will be Red. +rule.Pen = new Pen(new Color(255, 0, 0)); +// The Rule will be 3 pixels wide. +rule.Pen.Width = 3; +// The Rule will be a dotted line. +rule.Pen.Style = DashStyle.Dot; +// The Rule will have 20 pixels of space above it and +// 50 pixels of space below. +rule.Margins.Top = 20; +rule.Margins.Bottom = 50; +``` diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/layout/advanced/site.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/layout/advanced/site.mdx new file mode 100644 index 0000000000..a32abe34cb --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/layout/advanced/site.mdx @@ -0,0 +1,49 @@ +--- +title: "サイト" +slug: documentengine-site +--- + +# サイト +Site 要素は、ページにレイアウト要素を配置する際に最高のカスタマイズ機能を提供します。Site 要素を使用すると、x 座標と y 座標を使用して要素を配置したり、任意の角度に回転することができます。 + +Site 要素はその他のレイアウト 要素と差別化する固有のプロパティを持ちません。代わりにコンテンツ 要素を追加する各メソッドは、2 つのオーバーロードを含んでいます。これらのオーバーロードによって、どこを選択したとしても、個別に各レイアウト 要素を配置することができます。 + +各レイアウト 要素 メソッドの最初のオーバーロードは、Site 要素の左側からの距離と、Site 要素の上側からの距離という 2 つのフロートを認めます。2 番目のオーバーロードは、レイアウト 要素を配置すべき角度を制御する追加のフロートを認めます。 + +![](../../../../../../images/images/Site.png) + +以下のコードは、Site 要素を Section 要素に追加し、次に Text 要素と Image 要素を Site 要素に追加します。上記の画像のように、Text 要素は 45 度回転され、Image 要素は -45 度回転されます。このトピックは、[Report](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Report.html) が定義済みで、[Section](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Section.ISection.html) 要素が追加されていることを前提としています。 + +以下のテキストを使用して、`string1` 変数を設定します。 + +> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Donec imperdiet mattis sem.Nunc ornare elit at justo.In quam nulla, lobortis non, commodo eu, eleifend in, elit.Nulla eleifend.Nulla convallis.Sed eleifend auctor purus.Donec velit diam, congue quis, eleifend et, pretium id, tortor.Nulla semper condimentum justo.Etiam interdum odio ut ligula.Vivamus egestas scelerisque est. Donec accumsan.In est urna, vehicula non, nonummy sed, malesuada nec, purus.Vestibulum erat.Vivamus lacus enim, rhoncus nec, ornare sed, scelerisque varius, felis.Nam eu libero vel massa lobortis accumsan.Vivamus id orci.Sed sed lacus sit amet nibh pretium sollicitudin.Morbi urna. + +**C# の場合:** + +```csharp +using Infragistics.Documents.Reports.Report; +. +. +. +string string1 = "Lorem ipsum..."; + +// Define a new Site element and color its background. +Infragistics.Documents.Reports.Report.ISite site = section1.AddSite(); +site.Background = new Background(Brushes.LightSteelBlue); + +// Add a Text element to the Site element. The text element +// will be placed 250 pixels to the left and 100 pixels down +// and rotated 45 degrees clockwise. +Infragistics.Documents.Reports.Report.Text.IText siteText = site.AddText(250,100,45); +// Replace string1 with some text. +siteText.AddContent(string1); +// Color the Background of the Text element. +siteText.Background = new Background(Brushes.LightSlateGray); +// The Text element will only be half the width of the Site element. +siteText.Width = new RelativeWidth(50); + +// Add an Image element to the Site element. The Image element +// will be placed 200 pixels to the left and 100 pixels down +// and rotated 45 degrees counter-clockwise. +Infragistics.Documents.Reports.Report.IImage siteImage = site.AddImage(new Image(@"C:WindowsCoffee Bean.bmp"), 200, 400, -45); +``` diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/layout/advanced/stretcher.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/layout/advanced/stretcher.mdx new file mode 100644 index 0000000000..22d71ee975 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/layout/advanced/stretcher.mdx @@ -0,0 +1,11 @@ +--- +title: "ストレッチャ" +slug: documentengine-stretcher +--- + +# ストレッチャ +`Stretcher` 要素は、ページの終わりまでコンテンツを引き伸ばすことのみを目的とした非表示のレイアウト要素です。通常レイアウト要素は、その要素がカプセル化するコンテンツを収めるためにサイズを変更します。レイアウト要素に背景色または画像を含む場合、これは好ましくない効果となる場合があります。レイアウト要素から `AddStretcher` メソッドを呼び出すと、コンテンツがページの終わりまでなくても、その要素がページの終わりまで引き伸ばされます。以下の 2 つの画像は、背景色を `LightSteelBlue` に設定された要素が Stretcher 要素がある場合とない場合でどのように見えるのかを示しています。 + +Stretcher 要素なしの場合|Stretcher 要素ありの場合 +--- | --- +![](../../../../../../images/images/Stretcher_01.png) | ![](../../../../../../images/images/Stretcher_02.png) diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/layout/band.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/layout/band.mdx new file mode 100644 index 0000000000..6473cf3a1e --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/layout/band.mdx @@ -0,0 +1,413 @@ +--- +title: "バンド" +slug: documentengine-band +--- + +# バンド + +Band 要素は、大小任意のレポートのシナリオを処理できる基本機能と高度な機能の両方を持つ標準のコンテンツ セクションです。Band 要素に追加できるレイアウト 要素の完全なリストについては、「レイアウト 要素比較表」を参照してください。 + +Band 要素は、繰り返し可能なヘッダー、フッター、デバイダを持つことができる点で固有です。これらのヘッダーとフッターはページではなくバンドを修飾します。したがって、ヘッダーとフッターはバンドのコンテンツの上下に表示されます。いくつかの追加設定を設定するだけでなく、任意の数のパターン コンテンツを挿入することも可能です。 + +以下のコンテンツ レイアウト セクションは、Band 要素固有です。 + +- **Header**: Header 要素は、新しいページで始まるコンテンツ領域の上部を修飾します。この機能を利用するためには、[`IBand`](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Band.IBand.html) オブジェクトの [`Header`](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Band.IBand~Header.html) プロパティを新しい [`IBandHeader`](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Band.IBandHeader.html) オブジェクトに設定します。もちろん、ヘッダーが不要な場合には、このプロパティを設定する必要はありません。 +- **Divider**: [`Divider`](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Band.IBand~Divider.html) 要素は、最後のページを除く全ページのフッターの前の、コンテンツ領域の下部に表示されます。これにより Divider 要素はセクションが次ページに続くことを識別するために最適な要素となっています。この機能を利用するためには、IBand オブジェクトの Divider プロパティを新しい [`IBandDivider`](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Band.IBandDivider.html) オブジェクトに設定します。Header と同様に、Divider を使用したくない場合にはこのプロパティを設定する必要はありません。 +- **Footer**: Footer 要素はコンテンツ領域の下部を修飾します。Band がページの下部までいかないうちに終了すると、フッターはページではなく、バンドの終わりに表示します。ただし、バンドがページ全体を占めるようにしたい場合には（最後のページだけでなく各ページに適用）、Band オブジェクトの [`Stretch`](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Band.IBand~Stretch.html) プロパティを True に設定してください。 + +![](../../../../../images/images/Band.png) + +## バンドがひとつの PDF ファイルを作成 + +以下の手順はヘッダー、デバイダ、フッターが付いた単一のバンドを含む PDF ファイルを作成するプロセスを説明します。 + +### 達成すること + +この詳細なガイドのコードによって、このトピックの上部にあるスクリーンショットと非常に似た PDF レポートを作成することができます。後はレポートをパブリッシュするだけです。レポートのパブリッシュについての詳細は、[「レポートをパブリッシュ」](/documentengine-publish-a-report)を参照してください。 + +### 次の手順を実行します + +1. **レポートを作成しセクションを追加します。** + + 作成する各レポートは Report オブジェクトとして開始します。いったんインスタンス化されたら、AddSection メソッドによって必要なだけセクションを Report オブジェクトに追加できます。メインの Report にひとつだけセクションを追加することができます。セクションが作成されたら、その他すべてのタイプのコンテンツを追加できます。以下のコードはレポートを作成し、セクションを追加して、そのセクションのためのいくつかのページ固有のプロパティを設定します。 + + **Visual Basic の場合:** + +```vb + ' + ' Create the report and add a section. + ' + Dim report As Infragistics.Documents.Reports.Report.Report = _ + New Infragistics.Documents.Reports.Report.Report() + + Dim section1 As Infragistics.Documents.Reports.Report.Section.ISection = _ + report.AddSection() + + section1.PagePaddings = _ + New Infragistics.Documents.Reports.Report.Paddings(50) +``` + + **C# の場合:** + +```csharp + // + // Create the report and add a section. + // + Infragistics.Documents.Reports.Report.Report report = + new Infragistics.Documents.Reports.Report.Report(); + + Infragistics.Documents.Reports.Report.Section.ISection section1 = + report.AddSection(); + + section1.PagePaddings = + new Infragistics.Documents.Reports.Report.Paddings(50); +``` + +2. **バンドをセクションに追加します。** + + メインのセクションへのバンドまたは任意のコンテンツ セクションの追加は、メソッドを呼び出すことによって実行されます。この場合、Section オブジェクトの AddBand メソッドを呼び出します。AddBand はセクションから作成された新しい IBand オブジェクトへの参照を返します。したがって、新しい IBand オブジェクトにその参照を割り当てる必要があります。以下のコードは新しい IBand オブジェクトを作成し、その Background をグレーに設定します。 + + **Visual Basic の場合:** + +```vb + ' + ' Add the band to the section. + ' + Dim band As Infragistics.Documents.Reports.Report.Band.IBand = _ + section1.AddBand() + + band.Background = _ + New Infragistics.Documents.Reports.Report.Background _ + (Infragistics.Documents.Reports.Graphics.Colors.LightGray) +``` + + **C# の場合:** + +```csharp + // + // Add the band to the section. + // + Infragistics.Documents.Reports.Report.Band.IBand band = + section1.AddBand(); + + band.Background = + new Infragistics.Documents.Reports.Report.Background + (Infragistics.Documents.Reports.Graphics.Colors.LightGray); +``` + +3. **ヘッダーをバンドに追加します。** + + メソッドの呼び出しに関連したセクションにバンドを追加することと、ヘッダーをハンドに追加することは若干異なります。バンドのヘッダー、デバイダ、フッターはすでに存在しているので、これらへの参照を取得するだけです。新しいヘッダーを作成して、Band オブジェクトの Header プロパティに設定します。この参照を取得したら、プロパティを修正できます。以下のコードはバンドのヘッダーを取得して、いくつかのレイアウトおよび視覚的プロパティを設定し、コンテンツをヘッダーに追加します。 + + **Visual Basic の場合:** + +```vb + ' + ' Add a header to the band. + ' + + ' Retrieve a reference to the band's header + ' and assign it to the bandHeader object. + Dim bandHeader As Infragistics.Documents.Reports.Report.Band.IBandHeader = _ + band.Header + + ' Cause the header to repeat on every page. + bandHeader.Repeat = True + + ' The height of the header will be 5% of + ' the page's height. + bandHeader.Height = _ + New Infragistics.Documents.Reports.Report.FixedHeight(30) + + ' The header's background color will be light blue. + bandHeader.Background = _ + New Infragistics.Documents.Reports.Report.Background _ + (Infragistics.Documents.Reports.Graphics.Colors.SteelBlue) + + ' Set the horizontal and vertical alignment of the header. + bandHeader.Alignment = _ + New Infragistics.Documents.Reports.Report.ContentAlignment _ + ( _ + Infragistics.Documents.Reports.Report.Alignment.Left, _ + Infragistics.Documents.Reports.Report.Alignment.Middle _ + ) + + ' The bottom border of the band will be a + ' solid, dark blue line. + bandHeader.Borders.Bottom = _ + New Infragistics.Documents.Reports.Report.Border _ + (Infragistics.Documents.Reports.Graphics.Pens.DarkBlue) + + ' Add 5 pixels of padding around the left and right edges. + bandHeader.Paddings.Horizontal = 5 + + ' Add textual content to the header. + Dim bandHeaderText As Infragistics.Documents.Reports.Report.Text.IText = _ + bandHeader.AddText() + bandHeaderText.AddContent("IBandHeader") +``` + + **C# の場合:** + +```csharp + // + // Add a header to the band. + // + + // Retrieve a reference to the band's header + // and assign it to the bandHeader object. + Infragistics.Documents.Reports.Report.Band.IBandHeader bandHeader = + band.Header; + + // Cause the header to repeat on every page. + bandHeader.Repeat = true; + + // The height of the header will be 5% of + // the page's height. + bandHeader.Height = + new Infragistics.Documents.Reports.Report.FixedHeight(30); + + // The header's background color will be light blue. + bandHeader.Background = + new Infragistics.Documents.Reports.Report.Background + (Infragistics.Documents.Reports.Graphics.Colors.SteelBlue); + + // Set the horizontal and vertical alignment of the header. + bandHeader.Alignment = + new Infragistics.Documents.Reports.Report.ContentAlignment + ( + Infragistics.Documents.Reports.Report.Alignment.Left, + Infragistics.Documents.Reports.Report.Alignment.Middle + ); + + // The bottom border of the band will be a + // solid, dark blue line. + bandHeader.Borders.Bottom = + new Infragistics.Documents.Reports.Report.Border + (Infragistics.Documents.Reports.Graphics.Pens.DarkBlue); + + // Add 5 pixels of padding around the left and right edges. + bandHeader.Paddings.Horizontal = 5; + + // Add textual content to the header. + Infragistics.Documents.Reports.Report.Text.IText bandHeaderText = + bandHeader.AddText(); + bandHeaderText.AddContent("IBandHeader"); +``` + +4. **バンドのデバイダを追加します。** + + デバイダは、複数の目的のために使用できます。デバイダはフッターの前のページの終わりに表示するため、デバイダを使用してバンドが次ページに続くことを示す、または一種のページ番号システムとして使用して、実際のバンドが何ページあるのかを識別することができます（ページのメイン フッターに含まれる任意のページ番号デバイスに加えて）。バンドのヘッダーから参照を取得しなければならなかったのと全く同じように、デバイダに同じことを実行する必要があります。以下のコードは、標準のプロパティを修正しコンテンツを追加するだけでなく、この作業を実行します。 + + **Visual Basic の場合:** + +```vb + ' + ' Add the band's divider. + ' + + ' Retrieve a reference to the band's Divider. + Dim bandDivider As Infragistics.Documents.Reports.Report.Band.IBandDivider = _ + band.Divider + + ' Set the height to 5% of the page's height. + bandDivider.Height = _ + New Infragistics.Documents.Reports.Report.FixedHeight(30) + + ' Align the content in the middle of the divider. + bandDivider.Alignment = _ + New Infragistics.Documents.Reports.Report.ContentAlignment _ + (Infragistics.Documents.Reports.Report.Alignment.Middle) + + ' Add text to the divider and center it on the page. + Dim bandDividerText As Infragistics.Documents.Reports.Report.Text.IText = _ + bandDivider.AddText() + bandDividerText.AddContent("Band Continued...") + bandDividerText.Alignment = _ + New Infragistics.Documents.Reports.Report.TextAlignment _ + (Infragistics.Documents.Reports.Report.Alignment.Center) +``` + + **C# の場合:** + +```csharp + // + // Add the band's divider. + // + + // Retrieve a reference to the band's Divider. + Infragistics.Documents.Reports.Report.Band.IBandDivider bandDivider = + band.Divider; + + // Set the height to 5% of the page's height. + bandDivider.Height = + new Infragistics.Documents.Reports.Report.FixedHeight(30); + + // Align the content in the middle of the divider. + bandDivider.Alignment = + new Infragistics.Documents.Reports.Report.ContentAlignment + (Infragistics.Documents.Reports.Report.Alignment.Middle); + + // Add text to the divider and center it on the page. + Infragistics.Documents.Reports.Report.Text.IText bandDividerText = + bandDivider.AddText(); + bandDividerText.AddContent("Band Continued..."); + bandDividerText.Alignment = + new Infragistics.Documents.Reports.Report.TextAlignment + (Infragistics.Documents.Reports.Report.Alignment.Center); +``` + +5. **バンドのフッターを追加します。** + + バンドのフッターは、ページの下部にある点を除き、ヘッダーと同じように動作します。ヘッダーと同じように、フッターは全ページに表示するか、最終ページのみに表示するかのいずれかを選択できます。 + + **Visual Basic の場合:** + +```vb + ' + ' Add the band's footer. + ' + + ' Retrieve a reference to the band's footer. + Dim bandFooter As Infragistics.Documents.Reports.Report.Band.IBandFooter = _ + band.Footer + + ' The band will NOT repeat on every page; + ' it will only be seen on the last page. + bandFooter.Repeat = False + + ' The footer's background color will be light blue. + bandFooter.Background = _ + New Infragistics.Documents.Reports.Report.Background _ + (Infragistics.Documents.Reports.Graphics.Colors.LightSteelBlue) + + ' The footer's height will be 5% of the page's height. + bandFooter.Height = _ + New Infragistics.Documents.Reports.Report.FixedHeight(30) + + ' Align the footer's content horizontally and vertically. + bandFooter.Alignment = _ + New Infragistics.Documents.Reports.Report.ContentAlignment _ + ( _ + Infragistics.Documents.Reports.Report.Alignment.Left, _ + Infragistics.Documents.Reports.Report.Alignment.Middle _ + ) + + ' The top border of the footer will be a + ' solid, dark blue line. + bandFooter.Borders.Top = _ + New Infragistics.Documents.Reports.Report.Border _ + (Infragistics.Documents.Reports.Graphics.Pens.DarkBlue) + + ' Add 5 pixels of padding on the left and right. + bandFooter.Paddings.Horizontal = 5 + + ' Add textual content to the footer. + Dim bandFooterText As Infragistics.Documents.Reports.Report.Text.IText = _ + bandFooter.AddText() + bandFooterText.AddContent("IBandFooter") +``` + + **C# の場合:** + +```csharp + // + // Add the band's footer. + // + + // Retrieve a reference to the band's footer. + Infragistics.Documents.Reports.Report.Band.IBandFooter bandFooter = + band.Footer; + + // The band will NOT repeat on every page; + // it will only be seen on the last page. + bandFooter.Repeat = false; + + // The footer's background color will be light blue. + bandFooter.Background = + new Infragistics.Documents.Reports.Report.Background + (Infragistics.Documents.Reports.Graphics.Colors.LightSteelBlue); + + // The footer's height will be 5% of the page's height. + bandFooter.Height = + new Infragistics.Documents.Reports.Report.FixedHeight(30); + + // Align the footer's content horizontally and vertically. + bandFooter.Alignment = + new Infragistics.Documents.Reports.Report.ContentAlignment + ( + Infragistics.Documents.Reports.Report.Alignment.Left, + Infragistics.Documents.Reports.Report.Alignment.Middle + ); + + // The top border of the footer will be a + // solid, dark blue line. + bandFooter.Borders.Top = + new Infragistics.Documents.Reports.Report.Border + (Infragistics.Documents.Reports.Graphics.Pens.DarkBlue); + + // Add 5 pixels of padding on the left and right. + bandFooter.Paddings.Horizontal = 5; + + // Add textual content to the footer. + Infragistics.Documents.Reports.Report.Text.IText bandFooterText = + bandFooter.AddText(); + bandFooterText.AddContent("IBandFooter"); +``` + +6. **コンテンツをバンドに追加します。** + + これでヘッダー、デバイダ、フッターが設定されたので、バンドの実際のコンテンツを追加する必要があります。バンドに追加しなければならないのがシンプルなテキストだけの場合、Band オブジェクトの AddText メソッドを使用するだけで十分です。この例では、以下のサンプル テキストを使用します。 + + > Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Donec + > imperdiet mattis sem.Nunc ornare elit at justo.In quam nulla, + > lobortis non, commodo eu, eleifend in, elit.Nulla eleifend.Nulla + > convallis.Sed eleifend auctor purus.Donec velit diam, congue + > quis, eleifend et, pretium id, tortor.Nulla semper condimentum + > justo.Etiam interdum odio ut ligula.Vivamus egestas scelerisque + > est. Donec accumsan.In est urna, vehicula non, nonummy sed, + > malesuada nec, purus.Vestibulum erat.Vivamus lacus enim, rhoncus + > nec, ornare sed, scelerisque varius, felis.Nam eu libero vel + > massa lobortis accumsan.Vivamus id orci.Sed sed lacus sit amet + > nibh pretium sollicitudin.Morbi urna. + + 新しい文字列を作成して、コンテンツを上記のテキストに設定します。This will + これで、FOR ループを伴ったより複雑なシナリオに関係したときにコードをより簡単に読むことができるようになります。 + 新しい IText オブジェクトを作成しますが、まだ設定しないでください。 + FOR ループで IText オブジェクトを設定します。このようにループによって、繰り返しのたびに新しいオブジェクトを作成するのではなく同じオブジェクトを再利用し続けます。 + FOR ループは同じテキストの段落を 20 回作成して、バンドに完全なボディを提供します。 + + **Visual Basic の場合:** + +```vb + ' + ' Add content to the band. + ' + Dim string1 As String = "Lorem ipsum..." + + Dim bandText As Infragistics.Documents.Reports.Report.Text.IText + + For i As Integer = 0 To 19 + bandText = band.AddText() + bandText.AddContent(string1) + bandText.Paddings.All = 5 + Next i +``` + + **C# の場合:** + +```csharp + // + // Add content to the band. + // + string string1 = "Lorem ipsum..."; + + Infragistics.Documents.Reports.Report.Text.IText bandText; + + for (int i = 0; i < 20; i++) + { + bandText = band.AddText(); + bandText.AddContent(string1); + bandText.Paddings.All = 5; + } +``` diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/layout/container-and-condition.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/layout/container-and-condition.mdx new file mode 100644 index 0000000000..49d75e5124 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/layout/container-and-condition.mdx @@ -0,0 +1,108 @@ +--- +title: "コンテナーと条件" +slug: documentengine-container-and-condition +--- + +# コンテナーと条件 + +Container 要素は以下の 2 つの目的のために設計された極めて重要で独自の要素です。 + +- Container 要素は XML によってレポート コンテンツを挿入できます。 +- Container 要素は、Condition 要素と使用した場合、すべてのコンテンツがそのページに収まるかどうかに基づいて、条件付きでコンテンツを表示できます。 + +## XML の挿入 +Container 要素によって、XML を使用してレポート コンテンツを挿入できます。[Report](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Report~Save.html) オブジェクトの [Save](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Report.html) メソッドを呼び出すことによって、レポート コンテンツを XML ファイルに出力できます。XML ファイルがある場合には、[IContainer](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.IContainer.html) インターフェイスの [Load](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.IContainer~Load.html) メソッドを使用して、コンテナーに XML をロードすることができます。ドキュメント オブジェクト モデル (DOM) を使用して作成しても、XML ファイルからロードしてもコンテンツの外観に違いはありません。Report.xml と呼ばれる XML ファイルからレポート コンテンツをロードしたい場合には、以下のようなコードを使用できます。 + +**Visual Basic の場合:** + +```vb +' Load the content of the XML file directly into the container. +container.Load((Application.StartupPath + "..Report.xml")) +``` + +**C# の場合:** + +```csharp +// Load the content of the XML file directly into the container. +container.Load(Application.StartupPath + @"..Report.xml"); +``` + +## 条件付きでコンテンツを表示 +Text 要素とその他のほとんどの[レイアウト要素](/documentengine-report-layout)を Container 要素に追加できます。Container 要素を独特な要素としているのは、この機能だけではありません。しかし Condition 要素とともに使用すると、1 ページにすべてを収めることができない場合にコンテンツを処理する方法を事前に決定できます。 + +Condition 要素のコンストラクターは以下の 2 つのパラメーターを受け付けます。 + +- 条件を適用するコンテナーの名前 +- すべてのコンテンツが 1 ページに収まらない場合に Document Engine が実行すべきことを識別するブール値 + +Container 要素を作成し、コンテンツを入れるというのが一般的なシナリオです。Container 要素が作成されたら、Condition 要素を作成し、コンテナー名を渡します。つまりテストの対象となる条件は 2 つあります（False: コンテナーのコンテンツが 1 ページに収まらない。True: コンテナーのコンテンツが 1 ページに収まる）。2 番目のパラメーターとして False を渡すことは、Container が収まらない場合に Document Engine はこの Condition 要素を示すことを意味します。したがって、テキストが収まらないことを述べるテキストまたはその他の代替えコンテンツを Condition 要素に追加したい場合があります。次に Condition 要素をもうひとつ追加する必要があります。これは 2 番目のパラメーターとして True を渡します。2 番目のパラメーターとして True を渡すと、Document Engine がコンテンツを 1 ページに収めることができたことを意味しますが、この Condition 要素のコンテンツも示します。Condition 要素を空のままにしておき単に Container 要素のコンテンツを表示する、または固有のカスタム コンテンツを Condition に追加することができます。 + +以下のコードを使用して Container 要素を作成し、次にこの Container 要素に基づいて Condition 要素を作成します。コンテナーがページに収まらない場合に限り、最初の条件が表示します。コンテナーがページに収まる場合に限り、2 番目の条件が表示します。Container 要素内のコンテンツの量を増減するために、FOR ループが実行する繰り返しの回数を変更することができます。 + +`Text` 要素のコンテンツに以下の文字列を使用します。 + +> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Donec imperdiet mattis sem.Nunc ornare elit at justo.In quam nulla, lobortis non, commodo eu, eleifend in, elit.Nulla eleifend.Nulla convallis.Sed eleifend auctor purus.Donec velit diam, congue quis, eleifend et, pretium id, tortor.Nulla semper condimentum justo.Etiam interdum odio ut ligula.Vivamus egestas scelerisque est. Donec accumsan.In est urna, vehicula non, nonummy sed, malesuada nec, purus.Vestibulum erat.Vivamus lacus enim, rhoncus nec, ornare sed, scelerisque varius, felis.Nam eu libero vel massa lobortis accumsan.Vivamus id orci.Sed sed lacus sit amet nibh pretium sollicitudin.Morbi urna. + +1. **Container 要素を作成し、コンテンツをその中に入れます。** + + **Visual Basic の場合:** + +```vb + Dim container As Infragistics.Documents.Reports.Report.IContainer = _ section1.AddContainer("Container1") + + ' Define a Text element for the container. + Dim containerText As Infragistics.Documents.Reports.Report.Text.IText = _ container.AddText() + + ' Add the same content 10 times. Lower this number to 5 + ' or less in order to fit the content on one page. + For i As Integer = 0 To 9 + containerText.AddContent("Lorem ipsum...") + containerText.AddLineBreak() + containerText.AddLineBreak() + Next i +``` + + **C# の場合:** + +```csharp + // Define a Container element. + Infragistics.Documents.Reports.Report.IContainer container = section1.AddContainer("Container1"); + + // Define a Text element for the container. + Infragistics.Documents.Reports.Report.Text.IText containerText = container.AddText(); + + // Add the same content 10 times. Lower this number to 5 + // or less in order to fit the content on one page. + for (int i = 0; i < 10; i++) + { + containerText.AddContent("Lorem ipsum..."); + containerText.AddLineBreak(); + containerText.AddLineBreak(); + } +``` + +2. **Condition 要素を作成します。** + + **Visual Basic の場合:** + +```vb + ' If the content doesn't fit, use this condition. + Dim condition As Infragistics.Documents.Reports.Report.ICondition = section1.AddCondition(container, False) + Dim conditionText As Infragistics.Documents.Reports.Report.Text.IText = condition.AddText() + conditionText.AddContent("Container doesn't fit") + + ' If the content fits, use this condition. + condition = section1.AddCondition(container, True) +``` + + **C# の場合:** + +```csharp + // If the content doesn't fit, use this condition. + Infragistics.Documents.Reports.Report.ICondition condition = section1.AddCondition(container, false); + Infragistics.Documents.Reports.Report.Text.IText conditionText = condition.AddText(); + conditionText.AddContent("Container doesn't fit"); + + // If the content fits, use this condition. + condition = section1.AddCondition(container, true); +``` diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/layout/flow.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/layout/flow.mdx new file mode 100644 index 0000000000..145c90ab79 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/layout/flow.mdx @@ -0,0 +1,204 @@ +--- +title: "フロー" +slug: documentengine-flow +--- + +# フロー + +Flow 要素はレポートで列を定義するために非常に役に立ちます。列の定義を支援する Flow 要素固有のオブジェクトは 2 つあります。 + +![](../../../../../images/images/Flow.png) + +## IFlowColumn インターフェイス +[IFlowColumn](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Flow.IFlowColumn.html) インターフェイスはフローで列を定義します。希望する数だけ列を追加することができます。列は、作成される順序で追加されます。各列はそれ自体個別のセクションを表すものではありません。Flow 要素のコンテンツがセクションでどのようにフローするのかを表すだけです。したがって、個別のコンテンツを個々の列に追加できません。ただし、[AddColumnBreak](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Flow.IFlow~AddColumnBreak.html) メソッドを使用してどの列にどのコンテンツを表示するのかをある程度制御できます。 + +## AddColumnBreak メソッド +[IFlow](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Flow.IFlow.html) オブジェクトでこのメソッドを呼び出すと、フロー内の特定の位置に列の区切りを挿入します。このメソッドを使用すると、フローに追加したさまざまなコンテンツのタイプを分割できます。テキスト、次に列の区切り、次に画像、別の列の区切り、そしてさらにテキストを追加できます。このパターンによって、画像がテキストのない中央の列に常に配置されることが保証されます。 + + +## Flow 要素の作成 +この詳細なガイドでは、列が 2 つある Flow 要素の作成を説明します。Flow 要素には、テキストの段落が 5 つ含まれており、それぞれが FOR ループに追加されています。2 番目の段落の後ろに列の区切りが追加されます (IF ステートメントによって実行されます)。この FOR ループと IF ステートメントのロジックは、コレクション内にいくつかの同じような項目がある場合に固有のレポートに適用できますが、特定の項目の後に列の区切りを追加する必要があります。 + +## 次の手順を実行します +1. **レポートとメインのセクションを作成します。** + + あらゆるレポートは、Report オブジェクトをインスタンス化することによって開始します。Report 要素を取得したら、Section 要素を追加できます。Section 要素には Flow 要素が含まれます。 + + **Visual Basic の場合:** + +```vb + Imports Infragistics.Documents.Reports.Report + . + . + . + ' Create a new report. + Dim report As Infrgistics.Documents.Reports.Report.Report = New Report() + + ' Create the main Section and add 50 pixels + ' of padding on each edge. + Dim section1 As Infragistics.Documents.Reports.Report.Section.ISection = report.AddSection() + section1.PagePaddings.All = 50 +``` + + **C# の場合:** + +```csharp + using Infragistics.Documents.Reports.Report; + . + . + . + // Create a new report. + Infragistics.Documents.Reports.Report.Report report = new Report(); + + // Create the main Section and add 50 pixels + // of padding on each edge. + Infragistics.Documents.Reports.Report.Section.ISection section1 = report.AddSection(); + section1.PagePaddings.All = 50; +``` + +2. **Flow 要素と列を作成します。** + + Section オブジェクトの AddFlow メソッドを呼び出すことによって、Flow 要素をインスタンス化します。AddFlow メソッドは新しい Flow オブジェクトを返します。Flow オブジェクトの AddColumn メソッドを呼び出すことによって、Column 要素に対して同じことを実行します。これによって、新しい列が Flow 要素に追加されます。次に 2 列の合計に対して列をもう 1 列作成します。 + + **Visual Basic の場合:** + +```vb + ' Add a Flow element to the main section + Dim flow As Infragistics.Documents.Reports.Report.Flow.IFlow = section1.AddFlow() + + ' Create a column in the Flow element. + Dim column As Infragistics.Documents.Reports.Report.Flow.IFlowColumn = flow.AddColumn() + ' The column's width will be 50% of + ' the page's width + column.Width = New RelativeWidth(50) + ' Add space to the right edge to simulate + ' a gutter. + column.Margins.Right = 10 + ' Color the background of the column gray. + column.Background = New Background(New Color(238, 238, 238)) + + ' Add another column to the Flow element. + column = flow.AddColumn() + ' The column's width will be 50% of + ' the page's width + column.Width = New RelativeWidth(50) + ' Add space to the left edge to simulate + ' a gutter. + column.Margins.Left = 10 + ' Color the background of the column gray. + column.Background = New Background(New Color(238, 238, 238)) +``` + + **C# の場合:** + +```csharp + // Add a Flow element to the main section + Infragistics.Documents.Reports.Report.Flow.IFlow flow = section1.AddFlow(); + + // Create a column in the Flow element. + Infragistics.Documents.Reports.Report.Flow.IFlowColumn column = flow.AddColumn(); + // The column's width will be 50% of the page's width. + column.Width = new RelativeWidth(50); + // Add space to the right edge to simulate a gutter. + column.Margins.Right = 10; + // Color the background of the column gray. + column.Background = new Background(new Color(238, 238, 238)); + + // Add another column to the Flow element. + column = flow.AddColumn(); + // The column's width will be 50% of the page's width. + column.Width = new RelativeWidth(50); + // Add space to the left edge to simulate a gutter. + column.Margins.Left = 10; + // Color the background of the column gray. + column.Background = new Background(new Color(238, 238, 238)); +``` + +3. **コンテンツを Flow 要素に追加します。** + + これで 2 列になったので、テキストを列に追加します。FOR ループによって 5 つのテキストの段落を追加します。FOR ループでは、IF ステートメントを使用して 2 番目の段落の後ろに列の区切りを挿入します。 + + 以下のテキストを使用して、`string1` 変数を設定します。 + + > Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Donec + > imperdiet mattis sem.Nunc ornare elit at justo.In quam nulla, + > lobortis non, commodo eu, eleifend in, elit.Nulla eleifend.Nulla + > convallis.Sed eleifend auctor purus.Donec velit diam, congue + > quis, eleifend et, pretium id, tortor.Nulla semper condimentum + > justo.Etiam interdum odio ut ligula.Vivamus egestas scelerisque + > est. Donec accumsan.In est urna, vehicula non, nonummy sed, + > malesuada nec, purus.Vestibulum erat.Vivamus lacus enim, rhoncus + > nec, ornare sed, scelerisque varius, felis.Nam eu libero vel + > massa lobortis accumsan.Vivamus id orci.Sed sed lacus sit amet + > nibh pretium sollicitudin.Morbi urna. + + **Visual Basic の場合:** + +```vb + Dim string1 As String = "Lorem ipsum..." + + ' Create a Text element. + Dim [text] As Infragistics.Documents.Reports.Report.Text.IText + + ' Create a FOR loop that iterates five times. + For i As Integer = 0 To 4 + ' On the third iteration, add a column break. + If i = 2 Then + Dim columnBreak As Infragistics.Documents.Reports.Report.Text.IText = flow.AddText() + columnBreak.Alignment = _ + New TextAlignment(Alignment.Center, Alignment.Middle) + columnBreak.AddContent("***Column Break***") + flow.AddColumnBreak() + + [text] = flow.AddText() + [text].Paddings = New Paddings(5) + [text].AddContent(string1) + Else + [text] = flow.AddText() + [text].Paddings = New Paddings(5) + [text].AddContent(string1) + End If + Next i + + ' Stretch the Flow element (not the content) + ' to the bottom of the page. + flow.AddStretcher() +``` + + **C# の場合:** + +```csharp + string string1 = "Lorem ipsum..."; + + // Create a Text element. + Infragistics.Documents.Reports.Report.Text.IText text; + + // Create a FOR loop that iterates five times. + for (int i = 0; i < 5; i++) + { + // On the third iteration, add a column break. + if (i == 2) + { + Infragistics.Documents.Reports.Report.Text.IText columnBreak = + flow.AddText(); + columnBreak.Alignment = + new TextAlignment(Alignment.Center, Alignment.Middle); + columnBreak.AddContent("***Column Break***"); + flow.AddColumnBreak(); + + text = flow.AddText(); + text.Paddings = new Paddings(5); + text.AddContent(string1); + } + else + { + text = flow.AddText(); + text.Paddings = new Paddings(5); + text.AddContent(string1); + } + } + + // Stretch the Flow element (not the content) + // to the bottom of the page. + flow.AddStretcher(); +``` diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/layout/group.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/layout/group.mdx new file mode 100644 index 0000000000..cc46cf7e61 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/layout/group.mdx @@ -0,0 +1,120 @@ +--- +title: "グループ" +slug: documentengine-group +--- + +# グループ + +Group 要素は、飾りが一切ないシンプルなコンテンツ セクションです。Group 要素は Band 要素によく似ています。2 つの要素の最大の違いは、Band 要素がヘッダー、デバイダ、フッターを含むのに対して、Group 要素は含まないことです。Group 要素を、複数のセクションを一緒にグループ化する単なるセクションとして考えることができます。一組の画像、ひとつのグリッド、表、またはリストとともにひとつまたは 2 つのバンドをひとつのグループ内に配置します。論理的なグループ化の中にその他のコンテンツ 要素を一緒にまとめることが要点です。 + +Group 要素の作成は、ほとんどのコンテンツ要素と同様に簡単な作業です。Section 要素またはその他のレイアウト要素で AddGroup メソッドを呼び出すことでこのタスクを実行します。Group を追加できるレイアウト 要素の完全なリストについては、[「レイアウト 要素比較表」](/documentengine-layout-element-comparison-table)を参照してください。Group をインスタンス化したら、ほとんど任意の Infragistics Document Engine™ コンテンツを Group に追加できます。[`Background`](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.IGroup~Background.html)、[`Borders`](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.IGroup~Borders.html)、[`Paddings`](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.IGroup~Paddings.html)、[`Margins`](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.IGroup~Margins.html)、[`Height`](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.IGroup~Height.html)、[`Width`](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.IGroup~Width.html) などカスタマイズ可能なその他の複数の標準的なプロパティもあります。 + +------ + +以下のコードは、Group 要素を Section 要素に追加して、次にテキスト、水平の罫線、画像をそのグループに追加します。 + +以下のテキストを使用して、`string1` 変数を設定します。 + +> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Donec +> imperdiet mattis sem.Nunc ornare elit at justo.In quam nulla, +> lobortis non, commodo eu, eleifend in, elit.Nulla eleifend.Nulla +> convallis.Sed eleifend auctor purus.Donec velit diam, congue quis, +> eleifend et, pretium id, tortor.Nulla semper condimentum justo.Etiam +> interdum odio ut ligula.Vivamus egestas scelerisque est. Donec +> accumsan.In est urna, vehicula non, nonummy sed, malesuada nec, +> purus.Vestibulum erat.Vivamus lacus enim, rhoncus nec, ornare sed, +> scelerisque varius, felis.Nam eu libero vel massa lobortis accumsan. +> Vivamus id orci.Sed sed lacus sit amet nibh pretium sollicitudin. +> Morbi urna. + +**Visual Basic の場合:** + +```vb +Imports Infragistics.Documents.Reports.Report +Imports Infragistics.Documents.Reports.Graphics +. +. +. +' Add a Group element to the Section element named +' section1 and assign it to group1. Set the Background +' color of the group to light blue (so you can see the +' bounds of the group). +Dim group1 As Infragistics.Documents.Reports.Report.IGroup = section1.AddGroup() +group1.Background = New Background(New Color(180, 199, 228)) + +Dim groupHeading As IText = group1.AddText() +groupHeading.Style = mainStyle2 +groupHeading.AddContent("Group") + +' Create two paragraphs of text. Put 10 pixels of padding +' at all edges of the paragrph and separate the two +' paragraphs with line breaks. +Dim string1 As String = "Lorem ipsum..." + +Dim groupText As Infragistics.Documents.Reports.Report.Text.IText = group1.AddText() +groupText.Paddings.All = 10 +groupText.AddContent(string1) +groupText.AddLineBreak() +groupText.AddLineBreak() +groupText.AddContent(string1) + +' Add a horizontal rule (solid line) after the paragraphs. +' This rule will be black and have 20 pixels of space above +' and below it. +Dim groupRule As Infragistics.Documents.Reports.Report.IRule = group1.AddRule() +groupRule.Pen = Pens.Black +groupRule.Margins.All = 20 + +' Define an Image element with black borders and 10 pixels +' of padding on each edge. This code will use an image in +' the project folder called "Coffee Bean." You can find this +' image in the Windows folder. You can also use a string to +' point to any location on your machine. +Dim groupImage As Infragistics.Documents.Reports.Report.IImage = _ group1.AddImage(New Image(Application.StartupPath + "..Coffee Bean.bmp")) +groupImage.Borders.All = New Border(Pens.Black) +groupImage.Margins.All = 10 +``` + +**C# の場合:** + +```csharp +using Infragistics.Documents.Reports.Report; +using Infragistics.Documents.Reports.Graphics; +. +. +. +// Add a Group element to the Section element named +// section1 and assign it to group1. Set the Background +// color of the group to light blue (so you can see the +// bounds of the group). +Infragistics.Documents.Reports.Report.IGroup group1 = section1.AddGroup(); +group1.Background = new Background(new Color(180, 199, 228)); + +// Create two paragraphs of text. Put 10 pixels of padding +// at all edges of the paragrph and separate the two +// paragraphs with line breaks. +string string1 = "Lorem ipsum..."; + +Infragistics.Documents.Reports.Report.Text.IText groupText = group1.AddText(); +groupText.Paddings.All = 10; +groupText.AddContent(string1); +groupText.AddLineBreak(); +groupText.AddLineBreak(); +groupText.AddContent(string1); + +// Add a horizontal rule (solid line) after the paragraphs. +// This rule will be black and have 20 pixels of space above +// and below it. +Infragistics.Documents.Reports.Report.IRule groupRule = group1.AddRule(); +groupRule.Pen = Pens.Black; +groupRule.Margins.All = 20; + +// Define an Image element with black borders and 10 pixels +// of padding on each edge. This code will use an image in +// the project folder called "Coffee Bean". You can find this +// image in the Windows folder. You can also use a string to +// point to any location on your machine. +Infragistics.Documents.Reports.Report.IImage groupImage = group1.AddImage(new Image(Application.StartupPath + @"..Coffee Bean.bmp")); +groupImage.Borders.All = new Border(Pens.Black); +groupImage.Margins.All = 10; +``` diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/layout/layout-element-comparison-table.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/layout/layout-element-comparison-table.mdx new file mode 100644 index 0000000000..5223526dc8 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/layout/layout-element-comparison-table.mdx @@ -0,0 +1,822 @@ +--- +title: "レイアウト要素比較表" +slug: documentengine-layout-element-comparison-table +--- + +# レイアウト要素比較表 + +「レポート レイアウト」のセクションで説明したレイアウト 要素を使用しなければ、レポートを作成することはできません。これらの要素は、その他のレイアウト要素だけでなく、その他のコンテンツを含みます。レイアウト要素はネストされることも可能で、これにより全く独特なカスタムのレポート作成できます。 + +レイアウト要素の数と各要素が実行可能な機能が膨大であるため、以下の表を参照すると、どのレイアウト要素がユーザーのシナリオに適しているかを判断する際に役に立ちます。各表の一番上には、ヘルプの「レポート レイアウト」のセクションで詳細に検討されたレイアウト要素が配置されており、表の左側には、各レイアウト要素が利用できる要素、コンテンツ、または追加の設定が縦に配置されています。レイアウト要素のいくつかはその要素自身に追加することができることが分かります。レイアウト 要素にレイアウト要素を追加できるのか、それともコンテンツを追加できるのかについての詳細は、列ヘッダーと行ヘッダーをそれぞれクリックしてください。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    レイアウト要素
    バンドチェーン条件コンテナーフローグループレポート回転器セクションセグメントサイト
    バンド\*\*\*\*\*\*\*\*\*\*
    チェーン\*\*\*\*\*\*\*
    条件\*\*\*\*\*\*\*\*
    コンテナー\*\*\*\*\*\*\*\*
    区分線\*
    フロー\*\*\*\*\*\*\*\*\*\*
    フッター\*\*\*
    ギャップ\*\*\*\*\*\*\*\*
    グループ\*\*\*\*\*\*\*\*\*\*
    ヘッダー\*\*\*
    メジャー\*\*\*\*
    改ページ\*\*\*\*\*\*\*
    回転器\*\*\*\*\*\*\*
    規則\*\*\*\*\*\*\*\*\*\*
    セクション\*
    セグメント\*\*
    サイト\*\*\*\*\*\*\*\*\*\*
    ストレッチャ\*\*\*\*\*\*\*\*
    + +--------------- + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    レイアウト要素
    バンドチェーン条件コンテナーフローグループレポート回転器セクションセグメントサイト
    グリッド\*\*\*\*\*\*\*\*\*\*
    リスト\*\*\*\*\*\*\*\*\*\*
    テーブル\*\*\*\*\*\*\*\*\*\*
    テキスト\*\*\*\*\*\*\*\*\*\*
    ツリー\*\*\*\*\*\*\*\*\*\*
    + +--------------- + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    レイアウト要素
    バンドチェーン条件コンテナーフローグループレポート回転器セクションセグメントサイト
    クイック画像\*\*\*\*\*\*\*\*
    クイック リスト\*\*\*\*\*\*\*\*
    クイック表\*\*\*\*\*\*\*\*
    クイック テキスト\*\*\*\*\*\*\*\*
    + +--------------- + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    レイアウト要素
    バンドチェーン条件コンテナーフローグループレポート回転器セクションセグメントサイト
    ブックマーク\*
    インデックス\*\*\*\*\*\*\*\*
    目次\*\*\*\*\*\*\*\*
    + +--------------- + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    レイアウト要素
    バンドチェーン条件コンテナーフローグループレポート回転器セクションセグメントサイト
    キャンバス\*\*\*\*\*\*\*\*\*\*
    画像\*\*\*\*\*\*\*\*\*\*
    メタファイル\*\*\*\*\*\*\*\*\*\*
    図形\*
    + +--------------- + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    レイアウト要素
    バンドチェーン条件コンテナーフローグループレポート回転器セクションセグメントサイト
    配置\*\*\*\*\*\*
    背景\*\*\*\*\*\*\*\*
    背面
    境界線\*\*\*\*\*\*\*\*
    高さ\*\*\*\*\*\*\*
    実線\*\*\*
    パッディング\*\*\*\*\*\*\*\*
    余白\*\*\*\*\*\*\*\*
    引き伸ばし\*\*
    幅\*\*\*\*\*\*\*
    diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/layout/page-break.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/layout/page-break.mdx new file mode 100644 index 0000000000..39f6603d63 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/layout/page-break.mdx @@ -0,0 +1,22 @@ +--- +title: "改ページ" +slug: documentengine-page-break +--- + +# 改ページ + +Page Break 要素は、非表示型の要素で、関連付けられたレイアウト要素内にあるすべての残りのコンテンツを次ページに移動する要素です。Page Break 要素は Microsoft® Word® のページ区切りに非常に似ています。関連付けられている `AddPageBreak` メソッドを呼び出すことによってページ区切りを以下の要素に追加できます。 + +- [バンド](/documentengine-band) +- [条件](/documentengine-container-and-condition) +- [コンテナー](/documentengine-container-and-condition) +- [フロー](/documentengine-flow) +- [グループ](/documentengine-group) +- [セクション](/documentengine-section) +- [セグメント](/documentengine-segment) + + + + + + diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/layout/report-layout.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/layout/report-layout.mdx new file mode 100644 index 0000000000..7676592225 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/layout/report-layout.mdx @@ -0,0 +1,27 @@ +--- +title: "DocumentEngine レポート レイアウト" +slug: documentengine-report-layout +--- + +# DocumentEngine レポート レイアウト + +レポート レイアウト要素によって簡単にコンテンツを追加できます。各要素にはその要素を独自なものとする特定の機能と特性があります。どのレイアウト要素がユーザーのニーズに最も適しているかを知るには、[「レイアウト要素比較表」](/documentengine-layout-element-comparison-table)を参照してください。 + +各レイアウト要素の詳細は以下のリンクをクリックしてください。 + +- [レイアウト要素比較表](/documentengine-layout-element-comparison-table) +- [高度なレイアウト要素](/documentengine-advanced-layout-elements) +- [コンテナーと条件](/documentengine-container-and-condition) +- [バンド](/documentengine-band) +- [フロー](/documentengine-flow) +- [グループ](/documentengine-group) +- [改ページ](/documentengine-page-break) +- [レポート](/documentengine-report) +- [セクション](/documentengine-section) +- [セグメント](/documentengine-segment) + + + + + + diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/layout/report/publish-a-report.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/layout/report/publish-a-report.mdx new file mode 100644 index 0000000000..df42c6f232 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/layout/report/publish-a-report.mdx @@ -0,0 +1,36 @@ +--- +title: "レポートをパブリッシュ" +slug: documentengine-publish-a-report +--- + +# レポートをパブリッシュ + +レポートのパブリッシュは、PDF または XPS ファイルを書き出すことと同義語です。レポートを作成およびデザインしたら、[Report](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Report~Publish.html) オブジェクトから [Publish](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Report.html) メソッドを使用して、パブリッシュすることができます。Publish メソッドには 2 つのオーバーロードがあります。 + +- 最初のオーバーロードの最初のパラメーターは、レポートを公開するファイル名のフル パスに対応する文字列を受け付けます。 +- 2 番目のオーバーロードの最初のパラメーターはファイル ストリームを認めます。 +- 両方のオーバーロードの 2 番目のパラメーターは、レポートとしてパブリッシュする FileFormat を認めます（PDF、XPS、プレーン テキスト）。 + +以下のコードは、現在のユーザーのマイ ドキュメント フォルダー内にあるレポート（Report オブジェクトが「レポート」として定義されることを前提とします）を PDF ファイルとしてパブリッシュします。レポートがパブリッシュされたら、System.Diagnostics 名前空間から Process.Start メソッドを使用して、新しい PDF ファイルを開くことができます。ボタン、ツールバー、メニュー、またはその他の任意のクリック可能な UI 要素から Start メソッドを呼び出すことも可能です。 + +> **注:** プロセスを開始する前にエンド ユーザーのシステムに Adobe Acrobat Reader がインストールされていることを確認してください。Acrobat Reader がインストールされていない場合には、トライ/キャッチ ブロックを使用して、例外をキャッチするといいでしょう。また、XPS ドキュメントを表示したい場合には、エンド ユーザーのシステムに .NET Framework 3.0 がインストールされている必要があります。 + +**C# の場合:** + +```csharp +// define a string that contains the path to +// the current user's My Documents folder. +string myDocuments = + System.Environment.GetFolderPath(System.Environment.SpecialFolder.MyDocuments); + +// Publish the report to the current user's +// My Documents folder with the name of Report.pdf. +// The FileFormat enum can be used to publish the report +// as an XPS or plain text file as well. Remember to +// change the file extension if you change the file format. +report.Publish(myDocuments + "Report.pdf", FileFormat.PDF); + +// The Process.Start method runs the specified file +// using the application registered to run that file. +System.Diagnostics.Process.Start(myDocuments + "Report.pdf"); +``` diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/layout/report/report-element.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/layout/report/report-element.mdx new file mode 100644 index 0000000000..4a7e2a8828 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/layout/report/report-element.mdx @@ -0,0 +1,70 @@ +--- +title: "Report 要素" +slug: documentengine-report-element +--- + +# Report 要素 + + + +Report 要素は、レポート全体を定義する最上位オブジェクトです。すべてのコンテンツは、Section 要素を介してレポートに追加する必要があります。ほとんどのレイアウト 要素は追加のネストされたレイアウト 要素を作成するためのメソッドを使用します。これは、Report 要素でも同じですが、Report 要素に追加できる唯一のレイアウト 要素 タイプは Section 要素です。この概念をオブジェクト モデル図のように視覚化するとより分かりやすくなります。たとえば、レポートのレイアウトが以下のツリーと同じ位シンプルな場合があります。 + +- レポート + - セクション + - レイアウト要素 (タイトル ページのための Group 要素) + - セクション + - ナビゲーション ヘルパー (目次のための TOC 要素) + - セクション + - レイアウト要素 (レポート コンテンツのための Band 要素) + - レイアウト要素 (複数の列の Flow 要素) + - セクション + - パターン コンテンツ (関連データを示す Table 要素) + - セクション + - ナビゲーション ヘルパー (Index) + +上記のツリーから、Section が Report 要素に追加可能な唯一のレイアウト 要素であることが分かります。Section 要素は別の Section 要素に加えて任意のコンテンツ 要素を含むことができます。論理的に、Report 要素に追加できるのが Section 要素のみの場合には、すべてを Section 要素に追加可能であることが必要となります。 + +Report 要素にもレポートの記述に重要ないくつかのその他のプロパティとメソッドがあります。以下は頻繁に使用する可能性が高いレポート機能の簡潔なリストです。 + +- **ブックマーク** -- [Bookmarks](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Report~Bookmarks.html) プロパティを使用して、ブックマークを PDF ドキュメントに追加します。 +- **情報** -- Author、Company、Copyright、Title、Subject などのレポートに関する情報を追加できます。 +- **XML の保存と読み込み** -- [Save](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Report~Save.html) メソッドを使用して完全なレポートを XML ファイルとして保存できます。後で、[Load](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Report~Load.html) メソッドを使用して、保存した XML ファイルからレポートのコンテンツをロードできます。 +- **レポートのパブリッシュ** -- レポートを完成し、レポートから PDF ドキュメントを作成する準備が整ったら、[Publish](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Report~Publish.html) メソッドを使用して PDF、XPS、またはプレーン テキスト ドキュメントを書き出します。Publish メソッドの詳細は、[「レポートをパブリッシュ」](/documentengine-publish-a-report)を参照してください。 + +------ + +以下のコードは、上記のツリーと同じ構造でレポートを作成します。この例はその他のプロパティを設定せずに、オブジェクトをインスタンス化するだけです。詳細を示す例のコードについては、個々の要素のヘルプ トピックを参照してください。 + +**C# の場合:** + +```csharp +using Infragistics.Documents.Reports.Report; +using Infragistics.Documents.Reports.Report.Section; +using Infragistics.Documents.Reports.Report.TOC; +using Infragistics.Documents.Reports.Report.Index; +using Infragistics.Documents.Reports.Report.Band; +using Infragistics.Documents.Reports.Report.Flow; +using Infragistics.Documents.Reports.Report.Table; +. +. +. +Report report = new Report(); + +ISection section1 = report.AddSection(); +IGroup group1 = section1.AddGroup(); + +ISection section2 = report.AddSection(); +ITOC tableOfContents = section2.AddTOC(); + +ISection section3 = report.AddSection(); +IReportBand band1 = section3.AddBand(); +IFlow flow1 = band1.AddFlow(); + +ISection section4 = report.AddSection(); +ITable table1 = section4.AddTable(); + +ISection section5 = report.AddSection(); +IIndex index1 = section5.AddIndex(); +``` + + diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/layout/report/report.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/layout/report/report.mdx new file mode 100644 index 0000000000..72e27a4751 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/layout/report/report.mdx @@ -0,0 +1,19 @@ +--- +title: "レポート" +slug: documentengine-report +--- + +# レポート + +Report 要素は Infragistics Document Engine™ のメイン要素です。すべてのコンテンツはレポートを介して追加され、レポート公開の主要な方法です。 + +Report 要素についての詳細は、以下のリンクを参照してください。 + +- [レポートをパブリッシュ](/documentengine-publish-a-report) +- [Report 要素](/documentengine-report-element) + + + + + + diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/layout/report/setting-pageorientation-when-publishing-a-report.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/layout/report/setting-pageorientation-when-publishing-a-report.mdx new file mode 100644 index 0000000000..008ca18c73 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/layout/report/setting-pageorientation-when-publishing-a-report.mdx @@ -0,0 +1,29 @@ +--- +title: "レポートを公開するときの PageOrientation の設定" +slug: documentengine-setting-pageorientation-when-publishing-a-report +--- + +# レポートを公開するときの PageOrientation の設定 + +PDF または XPS ドキュメントを公開するとき、ページの Orientation は、[PageOrientation](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Section.ISection~PageOrientation.html) プロパティで設定できます。[Report.Publish()](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Report~Publish.html) メソッドを使用するとき、Report に追加する各 Section の [ISection()](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Section.ISection.html) に、PageOrientation を直接設定する必要があります。 + +**C# の場合:** + +```csharp +Infragistics.Documents.Reports.Report.Report r = new Report(); + +//Adding a section to the Report +Infragistics.Documents.Reports.Report.Section.ISection s = r.AddSection(); + + s.PageOrientation = PageOrientation.Portrait; + + //Adding Text to the Section + Infragistics.Documents.Reports.Report.Text.IText t = s.AddText(); + + t.AddContent(”Test Text”); + + + string theFile = @”c:test.pdf”; + + r.Publish(theFile, FileFormat.PDF); +``` diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/layout/section/add-page-numbering.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/layout/section/add-page-numbering.mdx new file mode 100644 index 0000000000..79a8cfeeef --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/layout/section/add-page-numbering.mdx @@ -0,0 +1,96 @@ +--- +title: "ページ番号の追加" +slug: documentengine-add-page-numbering +--- + +# ページ番号の追加 + +読む人がレポートをナビゲートする際に役に立つ優れたレポート 要素はページ番号です。目次とともに使用すると、読む人は目次にすばやく目を通して、読みたい機能がどのページにあるのかを判断することができるようになります。読む人にページ番号が与えられていたら、そのページをめくる（または Adobe Acrobat Reader のビューアの下部にページ番号を入力する）のは簡単な作業です。 + +ドキュメント オブジェクト モデルの Section 要素にページ番号を追加するためのメカニズムを説明します。Section 要素の詳細は、[`「Section」`](/documentengine-section)のトピックを参照してください。ページ番号をレポートに追加するために必要とされる設定すべてを保持する、[`ISection`](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Section.PageNumbering.html) オブジェクトの [`PageNumbering`](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Section.ISection~PageNumbering.html) プロパティで使用可能な [`PageNumbering`](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Section.ISection.html) オブジェクトがあります。 + +以下のコードはレポートの右下隅にページ番号を追加します。コメントは各プロパティをより詳細に説明しているので、コメントに特に注意してください。 + +![](../../../../../../images/images/DocumentEngine_Add_Page_Numbering_01.png) + +**Visual Basic の場合:** + +```vb +' Get a reference to the section's PageNumbering object. +Dim pn As Infragistics.Documents.Reports.Report.Section.PageNumbering = _ section1.PageNumbering + +' Create a style for the page numbering font. +pn.Style = New Infragistics.Documents.Reports.Report.Text.Style(Fonts.Arial, Brushes.Black) + +' The Template property is the actual string that +' shows the page numbering. Use the [Page #] place- +' holder for the current page and the [TotalPages] +' place-holder for the total amount of pages in +' the entire document. +pn.Template = "Page [Page #] of [TotalPages]" + +' Setting SkipFirst to true does not place page +' numbering on the first page of the section. This +' is useful if the first page is a Title page. +pn.SkipFirst = False + +' The page numbering will be aligned with the +' right side of the page. Valid values off the +' Alignment enum include Left, Center, and Right. +pn.Alignment.Horizontal = Infragistics.Documents.Reports.Report.Alignment.Right + +' The page numbering will be located at the +' bottom of the page. Valid values off the +' Alignment enum include Top and Bottom. +pn.Alignment.Vertical = Infragistics.Documents.Reports.Report.Alignment.Bottom + +' The page numbering is at the extreme bottom +' of the page, so we need to change the Y Offset +' in order to bring it in line with the rest of +' the page footer text. +pn.OffsetY = -18 +``` + +**C# の場合:** + +```csharp +// Get a reference to the section's PageNumbering object. +Infragistics.Documents.Reports.Report.Section.PageNumbering pn = _ section1.PageNumbering; + +// Create a style for the page numbering font. +pn.Style = new Infragistics.Documents.Reports.Report.Text.Style(Fonts.Arial, Brushes.Black); + +// The Template property is the actual string that +// shows the page numbering. Use the [Page #] place- +// holder for the current page and the [TotalPages] +// place-holder for the total amount of pages in +// the entire document. +pn.Template = "Page [Page #] of [TotalPages]"; + +// Setting SkipFirst to true does not place page +// numbering on the first page of the section. This +// is useful if the first page is a Title page. +pn.SkipFirst = false; + +// The page numbering will be aligned with the +// right side of the page. Valid values off the +// Alignment enum include Left, Center, and Right. +pn.Alignment.Horizontal = Infragistics.Documents.Reports.Report.Alignment.Right; + +// The page numbering will be located at the +// bottom of the page. Valid values off the +// Alignment enum include Top and Bottom. +pn.Alignment.Vertical = Infragistics.Documents.Reports.Report.Alignment.Bottom; + +// The page numbering is at the extreme bottom +// of the page, so we need to change the Y Offset +// in order to bring it in line with the rest of +// the page footer text. +pn.OffsetY = -18; +``` + + + + + + diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/layout/section/section-element.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/layout/section/section-element.mdx new file mode 100644 index 0000000000..261d0dc99f --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/layout/section/section-element.mdx @@ -0,0 +1,109 @@ +--- +title: "Section 要素" +slug: documentengine-section-element +--- + +# Section 要素 + +Section 要素は、Report 要素に追加できる唯一のレイアウト要素です。このため、Section 要素は以下の点で独特なものとなっています。 + +- Section 要素にはあらゆるレイアウト 要素を含むことができます（もうひとつの Section 要素を除く）。Section 要素によって個々のページをレポートに追加できます。 + +- Section 要素には透かしやスタンプとして使用するための Stationery および Decoration 要素を含むことができます。その他の要素は、これら 2 つの要素を含むことはできません。 + +- Section 要素によって、レポートにページ番号を追加することができます。 + +- Section 要素のこのような独自の機能によって、レポート全体にいくつかの必要な設定を適用するだけでなく、高レベルでレポートを構成することができます。 + +以下のコードは、[Report](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Report.html) を定義し、単一の [ISection](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Section.ISection.html) をそれに追加します。Section には、ヘッダー、フッター、ステーショナリ、デコレーションが含まれます。 + +1. **レポートとセクションを定義します。** + + **C# の場合:** + +```csharp + using Infragistics.Documents.Reports.Report; + . + . + . + Infragistics.Documents.Reports.Report.Report report = new Report(); + + // Create the main Section and add 50 pixels of padding on each edge. + Infragistics.Documents.Reports.Report.Section.ISection section1 = + report.AddSection(); + section1.PagePaddings.Left = 50; + section1.PagePaddings.Right = 50; +``` + +2. **Header 要素を Section に追加します。** + + **C# の場合:** + +```csharp + Infragistics.Documents.Reports.Report.Section.ISectionHeader sectionHeader = section1.AddHeader(); + sectionHeader.Repeat = true; + sectionHeader.Height = 50; + + Infragistics.Documents.Reports.Report.Text.IText sectionHeaderText = sectionHeader.AddText(0, 0); + sectionHeaderText.Paddings.All = 10; + sectionHeaderText.Alignment = + new TextAlignment(Alignment.Left, Alignment.Middle); + sectionHeaderText.Height = new RelativeHeight(100); + sectionHeaderText.AddContent("Section Header"); +``` + +3. **Stationery 要素を Section に追加します。** + + **C# の場合:** + +```csharp + // Add a stationery element to the report. + // This element will read "DRAFT" in large + // letters at an angle beneath the content + // of the report. + Infragistics.Documents.Reports.Report.Section.IStationery stationery = section1.AddStationery(); + stationery.Repeat = true; + Infragistics.Documents.Reports.Report.Text.IText stationeryText = stationery.AddText(200, 400, -45); + stationeryText.Style = new Style(new Font("Verdana", 72), Brushes.Silver); + stationeryText.AddContent("DRAFT"); +``` + +4. **Decoration 要素を Section に追加します。** + + **C# の場合:** + +```csharp + // Add a decoration element to the report. + // This element will serve as a stamp that + // will say "REJECTED" in large letters + // over the content of the report. + Infragistics.Documents.Reports.Report.Section.IDecoration decoration = section1.AddDecoration(); + decoration.MasterRange = MasterRange.All; + decoration.Rear = false; + + Infragistics.Documents.Reports.Report.Text.IText decorationText = decoration.AddText(350, 650, -15); + decorationText.Style = new Style(new Font("Verdana", 40), Brushes.Red); + decorationText.Width = new RelativeWidth(35); + decorationText.Borders = + new Borders(new Pen(Colors.Red, 3, DashStyle.Solid), 10); + decorationText.AddContent("REJECTED"); +``` + +5. **Footer 要素を Section に追加します。** + + **C# の場合:** + +```csharp + Infragistics.Documents.Reports.Report.Section.ISectionFooter sectionFooter = section1.AddFooter(); + sectionFooter.Repeat = true; + sectionFooter.Height = 50; + + Infragistics.Documents.Reports.Report.Text.IText sectionFooterText = sectionFooter.AddText(0, 0); + sectionFooterText.Paddings.All = 10; + sectionFooterText.Alignment = + new TextAlignment(Alignment.Center, Alignment.Middle); + sectionFooterText.Height = new RelativeHeight(100); + sectionFooterText.Background = new Background(Brushes.Gainsboro); + sectionFooterText.AddContent("Copyright © 1996 - 2007 Infragistics, Inc." + + " All rights reserved."); +``` diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/layout/section/section.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/layout/section/section.mdx new file mode 100644 index 0000000000..d56140b05e --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/layout/section/section.mdx @@ -0,0 +1,18 @@ +--- +title: "セクション" +slug: documentengine-section +--- + +# セクション +Section 要素は、Report 要素に追加できる唯一の要素です。Section 要素によって、ページ番号ならびに特にステーショナリやデコレーションを使用してドキュメントのルック アンド フィールを操作できます。 + +Section 要素についての詳細は、以下のリンクを参照してください。 + +- [ページ番号の追加](/documentengine-add-page-numbering) +- [Section 要素](/documentengine-section-element) + + + + + + diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/layout/segment.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/layout/segment.mdx new file mode 100644 index 0000000000..e8d317cbc7 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/layout/segment.mdx @@ -0,0 +1,148 @@ +--- +title: "セグメント" +slug: documentengine-segment +--- + +# セグメント + + + +Segment 要素は、この要素が作成できるコンテンツのいくつかの完全なセグメント (またはページ) に由来して適切に命名されています。Section 要素と同じように、Segment 要素は個々のページごとに異なるヘッダー/フッターを持つことができます (ページ数がヘッダー/フッターの数を超えない場合に限ります。詳細は以下の「セグメント ヘッダーおよびフッター」のセクションを参照してください)。しかし、Section 要素と異なり、Segment のサイズを設定できません。Segment は含んでいる Section 要素のサイズに依存しています。Segment 要素と Section 要素は両方とも個々のページ上でコンテンツを引き伸ばすための [AddStretcher](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Segment.ISegment~AddStretcher.html) メソッドがあります。ただし、Segment 要素には、全ページですべてのコンテンツを引き伸ばすための [Stretch](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Segment.ISegment~Stretch.html) プロパティもあります。 + +Segment 要素は Section、Band、Group の各要素に機能が非常に似ています。これらの 4 つの要素間の主な違いは、以下の表を参照してください。 + +機能|セグメント|セクション|バンド|グループ +---- | --- | --- |--- | --- | +ヘッダー、フッター、区分線|区分線はありません。ヘッダーおよびフッターの繰り返し可能なコレクション。|区分線はありません。個々のページごとに個別のヘッダーおよびフッターを追加できます。|Band 全体に対して １ セットのヘッダー、フッター、およびデバイダ。|なし +高さと幅|設定できません。|設定できます。|設定できます。|設定できます。 +コンテンツの引き伸ばし|要素全体だけでなく、個々のページそれぞれを引き伸ばすことができます。|個々のページそれぞれを引き伸ばすことができます。|要素全体だけでなく、個々のページそれぞれを引き伸ばすことができます。|個々のページそれぞれを引き伸ばすことができます。 + +## セグメントのヘッダーとフッター +Segment 要素の最も優れた機能は、ヘッダーとフッターを使用する方法です。必要に応じた数だけヘッダーとフッターをセグメントに追加できます。ヘッダーとフッターのコレクションは、追加する順番に基づいて、特定の順番で使用されます。セグメントの各ページには個別のヘッダーとフッターが付きます（複数のヘッダーとフッターをセグメントに追加する場合）。たとえば、2 つの Header 要素をセグメントに追加して、次に 2 つの Footer 要素を追加する場合、最初のページには最初のヘッダー/フッターを含み、2 番目のページには 2 番目のヘッダー/フッターを含みます。ところが 3 番目のページには最初のヘッダー/フッターが含まれ、4 番目のページには 2 番目のヘッダー/フッターが含まれます。セグメントに含まれるページ数だけこのパターンが続きます。以下の画像はこの概念を示しています。 + +![](../../../../../images/images/DocumentEngine_Segment_01.png) + +------ + +以下の例のコードは、2 つの異なる Header および Footer 要素を使用して Segment 要素を定義します。ページ区切りが 2 つあるため、3 つの個別のページができます。3 番目のページでは、最初のヘッダー/フッターが使用されます。ページ数が Header および Footer 要素の数を超えた場合にヘッダー/フッター コレクションがループして先頭に戻るからです。 + +1. **セグメントを定義します。** + + **C# の場合:** + +```csharp + using Infragistics.Documents.Reports.Report; + . + . + . + // Add a Segment to the Section. + Infragistics.Documents.Reports.Report.Segment.ISegment segment = section1.AddSegment(); + segment.Background = new Background(Brushes.WhiteSmoke); + segment.Stretch = true; +``` + +2. **2 つのセグメント ヘッダーを定義します。** + + **C# の場合:** + +```csharp + // Add the first Header to the Segment. + Infragistics.Documents.Reports.Report.Segment.ISegmentHeader segmentHeader1 = segment.AddHeader(); + segmentHeader1.Background = new Background(Brushes.LightBlue); + segmentHeader1.Height = new FixedHeight(40); + segmentHeader1.Paddings = new Paddings(10); + + Infragistics.Documents.Reports.Report.Text.IText segmentHeaderText = segmentHeader1.AddText(); + segmentHeaderText.Style = mainStyle1; + + segmentHeaderText.AddContent("Header 1, Page #"); + segmentHeaderText.AddPageNumber(PageNumberFormat.Decimal); + + // Add the second Header to the Segment. + Infragistics.Documents.Reports.Report.Segment.ISegmentHeader segmentHeader2 = segment.AddHeader(); + segmentHeader2.Background = new Background(Brushes.LightGreen); + segmentHeader2.Height = new FixedHeight(40); + segmentHeader2.Paddings = new Paddings(10); + + segmentHeaderText = segmentHeader2.AddText(); + segmentHeaderText.Style = mainStyle1; + segmentHeaderText.AddContent("Header 2, Page #"); + segmentHeaderText.AddPageNumber(PageNumberFormat.Decimal); +``` + +3. **2 つのセグメント フッターを定義します。** + + **C# の場合:** + +```csharp + // Add the first Footer to the Segment. + Infragistics.Documents.Reports.Report.Segment.ISegmentFooter segmentFooter1 = segment.AddFooter(); + segmentFooter1.Background = new Background(Brushes.LightBlue); + segmentFooter1.Height = new FixedHeight(40); + segmentFooter1.Paddings = new Paddings(10); + + Infragistics.Documents.Reports.Report.Text.IText segmentFooterText = segmentFooter1.AddText(); + segmentFooterText.Style = mainStyle1; + + segmentFooterText.AddContent("Footer 1, Page #"); + segmentFooterText.AddPageNumber(PageNumberFormat.Decimal); + + // Add the second Footer to the Segment. + Infragistics.Documents.Reports.Report.Segment.ISegmentFooter segmentFooter2 = segment.AddFooter(); + segmentFooter2.Background = new Background(Brushes.LightGreen); + segmentFooter2.Height = new FixedHeight(40); + segmentFooter2.Paddings = new Paddings(10); + + segmentFooterText = segmentFooter2.AddText(); + segmentFooterText.Style = mainStyle1; + + segmentFooterText.AddContent("Footer 2, Page #"); + segmentFooterText.AddPageNumber(PageNumberFormat.Decimal); +``` + +4. **最初のページにテキストを追加して、次ページとのページ区切りを追加します。** + + 以下のテキストを使用して、`string1` 変数を設定します。 + + > Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Donec imperdiet mattis sem.Nunc ornare elit at justo.In quam nulla, lobortis non, commodo eu, eleifend in, elit.Nulla eleifend.Nulla convallis.Sed eleifend auctor purus.Donec velit diam, congue quis, eleifend et, pretium id, tortor.Nulla semper condimentum justo.Etiam interdum odio ut ligula.Vivamus egestas scelerisque est. Donec accumsan.In est urna, vehicula non, nonummy sed, malesuada nec, purus.Vestibulum erat.Vivamus lacus enim, rhoncus nec, ornare sed, scelerisque varius, felis.Nam eu libero vel massa lobortis accumsan.Vivamus id orci.Sed sed lacus sit amet nibh pretium sollicitudin.Morbi urna. + + **C# の場合:** + +```csharp + // Add text to the Segment. The first page of the + // Segment will use the first Header and Footer. + Infragistics.Documents.Reports.Report.Text.IText segmentText1 = segment.AddText(); + string string1 = "Lorem ipsum..."; + segmentText1.AddContent(string1); + segmentText1.Paddings.All = 5; + + // Break to the next page. + segment.AddPageBreak(); +``` + +5. **テキストを 2 番目のページに追加して、次ページとのページ区切りを追加します。** + + **C# の場合:** + +```csharp + // Add more text to the Segment. The second page of + // the Segment will use the second Header and Footer. + segmentText1 = segment.AddText(); + segmentText1.AddContent(string2); + segmentText1.Paddings.All = 5; + + // Break to the third page. + segment.AddPageBreak(); +``` + +6. **テキストを 3 ページ目に追加します。** + + **C# の場合:** + +```csharp + // Add more text to the Segment. The third page of + // the Segment will use the first Header and Footer. + segmentText1 = segment.AddText(); + segmentText1.AddContent(string1); + segmentText1.Paddings.All = 5; +``` diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/navigation/bookmarks.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/navigation/bookmarks.mdx new file mode 100644 index 0000000000..7416f35106 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/navigation/bookmarks.mdx @@ -0,0 +1,38 @@ +--- +title: "ブックマーク" +slug: documentengine-bookmarks +--- + +# ブックマーク + +Bookmarks は、Adobe® Acrobat® Reader の機能で、印刷したメディアでは何の意味もありません。ところが Acrobat Reader でレポートを表示する時にレポートの閲覧者には非常に便利です。Report 要素はブックマークの生成支援のために [`TextHeading`](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.TextHeading.html) 列挙体を使用します。Text 要素は [`Heading`](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Text.IText~Heading.html) プロパティを公開し、これによって TextHeading 列挙体に基づいて見出しを選択することができます。これらの見出しは、階層として Report 要素によって認識されます。Report 要素は、Heading プロパティを設定したレポート内のすべての Text 要素を収集し、それらに基づいてブックマークのリストを作成します。H1 見出しは最上位のブックマークで、H2 見出しは対応する H1 見出しに含まれます。このロジックは H9 まで見出しの階層全体に適用されます。このロジックは非常に似ているので、詳細は[「目次」](/documentengine-table-of-contents)を参照してください。 + +- [TextHeading](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.TextHeading.html): Web API リファレンス ガイドの TextHeading メンバーへのリンク。 +- [Heading](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Text.IText~Heading.html): Web API リファレンス ガイドの Heading メンバーへのリンク。 +- [目次](/documentengine-table-of-contents): ドキュメント エンジンで使用可能な目次ナビゲーション ヘルパーについて説明します。 + + +![](../../../../../images/images/DocumentEngine_Bookmarks_01.png) + + +以下のコードを「目次」トピックのコードに追加すると、上記のスクリーンショットに似た見出しに一致するブックマークが作成されます。 + +**Visual Basic の場合:** + +```vb +' Assuming 'report' is your main Report element. +' Passing true as AddLevel's parameter displays +' the bookmark's second level, if it exists. +report.Bookmarks.AddLevel(True) +report.Bookmarks.AddLevel() +``` + +**C# の場合:** + +```csharp +// Assuming 'report' is your main Report element. +// Passing true as AddLevel's parameter displays +// the bookmark's second level, if it exists. +report.Bookmarks.AddLevel(true); +report.Bookmarks.AddLevel(); +``` diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/navigation/index.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/navigation/index.mdx new file mode 100644 index 0000000000..54400d98d7 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/navigation/index.mdx @@ -0,0 +1,181 @@ +--- +title: "インデックス" +slug: documentengine-index +--- + +# インデックス + +Index 要素はレポート内の特定の語を見つけ出すための方法を読む人に提供します。インデックスはレポート内で見つけた語句をレポートの最後に集めてアルファベット順に並べた語句の集合です。各語句には各語句に関連した番号が付いています。この番号は、読む人がその語句を見つけることができるレポートのページです。その語が複数のページで見つかった場合には、それらのページを表す複数の番号がその語に関連付けられます。 + +![](../../../../../images/images/DocumentEngine_Index_01.png) + +[`IText`](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Text.IText~AddTarget.html) インターフェイスから [`AddTarget`](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Text.IText.html) メソッドを呼び出すことによって語をインデックスに追加できます。このメソッドには 2 つのオーバーロードがあります。ひとつはターゲット名として文字列を認め、もうひとつはターゲットおよびキャプションの名前として 2 つの文字列を認めます。Text 要素に必要な数だけターゲットを追加できます。インデックスが複数のページにあるひとつの語を認識するには、その語が属する各 Text 要素にターゲットとしてその語を追加する必要があります。Index 要素はこれらのターゲットを使用して、インデックスを作成します。したがって、AddTarget メソッドによってその語を明示的にインデックスに追加しない限り、ひとつの語が複数の場所にある場合には認識しません。 + +Index 要素は、階層を使用して作成されるという点で TOC 要素に非常に似ています。インデックスが提供する階層の数は、完全にユーザーとレポートの複雑さ次第で決定します。[`IIndex`](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Index.IIndex~AddLevel.html) インターフェイスから [`AddLevel`](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Index.IIndex.html) を呼び出すことによって階層をインデックスに追加します。最も一般的なインデックスは、2 階層で構成されます。この構成によって、複合語句を同じカテゴリにグループ化できます。たとえば、cargo container、cargo hold、cargo ship などの 3 つの複合語を索引に追加する必要があるとします。通常と全く同じように追加して、`AddTarget` を 3 回呼び出すことによって、各語に個別のターゲット名を提供します。唯一の違いはターゲットのキャプションにあります。コロン（:）を使用することによって、キャプションで索引の階層を分けます。この規則を使用すると、「cargo hold」のキャプションは「cargo:hold」になります。これによって、インデックスで「cargo」という語の下に「hold」という語が配置され、上記のスクリーンショットで示すように 2 番目の階層を使用します。語句をグループ化する方法は、完全にユーザー次第です。 + +------ + +以下のコードは、インデックスを格納するために、`Text` 要素を作成し、いくつかのターゲットを追加します。これで 2 階層のインデックスが作成されます。 + +1. **索引で使用するために 2 つの Style オブジェクトを作成します。** + + **Visual Basic の場合:** + +```vb + Imports Infragistics.Documents.Reports.Report + . + . + . + Dim mainStyle1 As New _ + Infragistics.Documents.Reports.Report.Text.Style( _ + New Font("Verdana", 18), Brushes.Black) + Dim mainStyle2 As New _ + Infragistics.Documents.Reports.Report.Text.Style( _ + New Font("Arial", 24), Brushes.SteelBlue) +``` + + **C# の場合:** + +```csharp + using Infragistics.Documents.Reports.Report; + . + . + . + Infragistics.Documents.Reports.Report.Text.Style mainStyle1 = + new Infragistics.Documents.Reports.Report.Text.Style( + new Font("Verdana", 18), Brushes.Black); + Infragistics.Documents.Reports.Report.Text.Style mainStyle2 = + new Infragistics.Documents.Reports.Report.Text.Style( + new Font("Arial", 24), Brushes.SteelBlue); +``` + +2. **インデックスに配置するために新しい Section を作成します。** + + **Visual Basic の場合:** + +```vb + Dim indexSection As Infragistics.Documents.Reports.Report.Section.ISection = _ report.AddSection() + indexSection.PageMargins = New Margins(50) +``` + + **C# の場合:** + +```csharp + Infragistics.Documents.Reports.Report.Section.ISection indexSection = report.AddSection(); + indexSection.PageMargins = new Margins(50); +``` + +3. **Text 要素を作成してターゲットをこの要素に追加します。** + + **Visual Basic の場合:** + +```vb + Dim indexText As Infragistics.Documents.Reports.Report.Text.IText = _ indexSection.AddText() + indexText.Style = mainStyle1 + + indexText.AddContent("Index targets are attached to this Text element.") + + indexText.AddTarget("Bear", "Animal:Bear") + indexText.AddTarget("Tiger", "Animal:Tiger") + indexText.AddTarget("Cat", "Animal:Cat") + indexText.AddTarget("Lion", "Animal:Lion") + indexText.AddTarget("cargo hold", "cargo:hold") + indexText.AddTarget("cargo container", "cargo:container") + indexText.AddTarget("cargo ship", "cargo:ship") + indexText.AddTarget("Coffee", "Coffee") + indexText.AddTarget("Espresso", "Espresso") + indexText.AddTarget("Capuccino", "Capuccino") + indexText.AddTarget("Energize", "Energize") +``` + + **C# の場合:** + +```csharp + Infragistics.Documents.Reports.Report.Text.IText indexText = indexSection.AddText(); + indexText.Style = mainStyle1; + + indexText.AddContent("Index targets are attached to this Text element."); + + indexText.AddTarget("Bear", "Animal:Bear"); + indexText.AddTarget("Tiger", "Animal:Tiger"); + indexText.AddTarget("Cat", "Animal:Cat"); + indexText.AddTarget("Lion", "Animal:Lion"); + indexText.AddTarget("cargo hold", "cargo:hold"); + indexText.AddTarget("cargo container", "cargo:container"); + indexText.AddTarget("cargo ship", "cargo:ship"); + indexText.AddTarget("Coffee", "Coffee"); + indexText.AddTarget("Espresso", "Espresso"); + indexText.AddTarget("Capuccino", "Capuccino"); + indexText.AddTarget("Energize", "Energize"); +``` + +4. **Text 要素とまもなく作成される予定の Index 要素間にスペースを追加するためにギャップを作成します。** + + **Visual Basic の場合:** + +```vb + Dim indexGap As Infragistics.Documents.Reports.Report.IGap = indexSection.AddGap() + indexGap.Height = New FixedHeight(50) +``` + + **C# の場合:** + +```csharp + Infragistics.Documents.Reports.Report.IGap indexGap = indexSection.AddGap(); + indexGap.Height = new FixedHeight(50); +``` + +5. **インデックスの見出しを作成します。** + + **Visual Basic の場合:** + +```vb + Dim indexHeading As Infragistics.Documents.Reports.Report.Text.IText = _ indexSection.AddText() + indexHeading.Style = mainStyle2 + indexHeading.AddContent("Index") +``` + + **C# の場合:** + +```csharp + Infragistics.Documents.Reports.Report.Text.IText indexHeading = indexSection.AddText(); + indexHeading.Style = mainStyle2; + indexHeading.AddContent("Index"); +``` + +6. **Index 要素を定義して、2 階層追加します。** + + **Visual Basic の場合:** + +```vb + Dim index As Infragistics.Documents.Reports.Report.Index.IIndex = _ indexSection.AddIndex() + index.Alphabet.Style = mainStyle2 + + Dim indexLevel As Infragistics.Documents.Reports.Report.Index.IIndexLevel = _ index.AddLevel() + indexLevel.Style = mainStyle1 + + indexLevel = index.AddLevel() + indexLevel.Style = mainStyle1 + indexLevel.Indents.Left = 30 + indexLevel.Style = _ + New Infragistics.Documents.Reports.Report.Text.Style( _ + New Font("Verdana", 14), Brushes.Black) +``` + + **C# の場合:** + +```csharp + Infragistics.Documents.Reports.Report.Index.IIndex index = indexSection.AddIndex(); + index.Alphabet.Style = mainStyle2; + + Infragistics.Documents.Reports.Report.Index.IIndexLevel indexLevel = index.AddLevel(); + indexLevel.Style = mainStyle1; + + indexLevel = index.AddLevel(); + indexLevel.Style = mainStyle1; + indexLevel.Indents.Left = 30; + indexLevel.Style = + new Infragistics.Documents.Reports.Report.Text.Style( + new Font("Verdana", 14), Brushes.Black); +``` + diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/navigation/navigation-helpers.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/navigation/navigation-helpers.mdx new file mode 100644 index 0000000000..6485f4513b --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/navigation/navigation-helpers.mdx @@ -0,0 +1,20 @@ +--- +title: "ナビゲーション ヘルパー" +slug: documentengine-navigation-helpers +--- + +# ナビゲーション ヘルパー + +ナビゲーション ヘルパーは、読む人がレポートで探している内容を見つけ出す支援をします。目次はレポートのセクションの概要を提供します。インデックスは特定の語が所在するすべての場所をリストすることができます。ブックマークは興味のある特定のページに素早く移動するオプションを読む人に提供します。 + +ナビゲーション ヘルパーの詳細は以下のリンクをクリックしてください。 + +- [ブックマーク](/documentengine-bookmarks) +- [インデックス](/documentengine-index) +- [目次](/documentengine-table-of-contents) + + + + + + diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/navigation/table-of-contents.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/navigation/table-of-contents.mdx new file mode 100644 index 0000000000..c91400831f --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/navigation/table-of-contents.mdx @@ -0,0 +1,116 @@ +--- +title: "目次" +slug: documentengine-table-of-contents +--- + +# 目次 +目次（TOC）の作成はほとんどの人が考えているよりもはるかにシンプルです。Infragistics Document Engine™ でレポートをすでに書いている場合には、目次の作成の工程の半分はすでに完了していると言えるかもしれません。TOC 要素は、レポートの構造に基づいて目次を作成します。したがって、TOC 要素を活用するためには、レポートを適切に作成することが重要となります。 + +Text 要素は、[Heading](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Text.IText~Heading.html) プロパティを公開します。このプロパティは [TextHeading](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.TextHeading.html) 列挙体に設定することができます。この列挙体の値は、H1、H2、H3 というようになります。Text 要素の見出しを設定するときに、目次の生成方法を TOC 要素に通知します。[ITOC](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.TOC.ITOC.html) インターフェイスには、[AddLevel](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.TOC.ITOC~AddLevel.html) メソッドが含まれており、このメソッドを異なる見出しとともに使用することができます。目次に追加する最初のレベルは、見出しの最初のレベルつまり H1 に対応します。目次にもうひとつのレベルを追加すると H2 に対応し、最後の見出し H9 まで続きます。したがって、見出しのラベルを適切に設定すれば、目次を生成するためにさほどの追加作業を行う必要はありません。 + +[ILevel](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.TOC.ILevel.html) インターフェイスは、目次を処理する時に一般的ないくつかのプロパティを公開します。 + +* **Indents** -- 垂直、水平、上、下、左、右のインデントおよびすべてインデントを設定することによって、TOC レベルのインデントを制御できます。これは、見出しのレベルごとに異なるインデントを指定できるようにすることによって読みやすさを向上するために役立ちます。 +* **Style** -- Style オブジェクトをこのプロパティに設定することは、見出し、リーダー、ページ番号がどのように表示されるのかを決定します。 +* **Leader** -- 引き出し線は、ほとんどの目次で点線で表示されます。この線は、ページのもう一方の側まで線を引くことによって、読む人が見出しとページ番号を結び付けやすくします。[LeaderFormat](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.LeaderFormat.html) 列挙体によって、この線を破線、点線、実線、またはスペースに設定することができます。 + +![](../../../../../images/images/DocumentEngine_Table_of_Contents_01.png) + +以下のコードは、4 つの見出しと各見出しの下の 2 つの小見出しで構成される目次を生成します。見出しは H1 で、小見出しは H2 です。 + +1. **見出しと小見出しのスタイルに対して 2 つの Style オブジェクトを宣言します。** + + **C# の場合:** + +```csharp + using Infragistics.Documents.Reports.Report; + . + . + . + Infragistics.Documents.Reports.Report.Text.Style mainStyle1 = + new Infragistics.Documents.Reports.Report.Text.Style( + new Font("Verdana", 18), Brushes.Black); + Infragistics.Documents.Reports.Report.Text.Style mainStyle2 = + new Infragistics.Documents.Reports.Report.Text.Style( + new Font("Arial", 24), Brushes.SteelBlue); +``` + +2. **目次を配置するために新しいセクションを作成します。** + + **C# の場合:** + +```csharp + // Create a new section and set the page size and margins. + Infragistics.Documents.Reports.Report.Section.ISection tocSection = report.AddSection(); + tocSection.PageSize = PageSizes.Letter; + tocSection.PageMargins.All = 35; +``` + +3. **TOC を作成して、2 つのレベルを定義します。** + + **C# の場合:** + +```csharp + // Create a title for the TOC. + Infragistics.Documents.Reports.Report.Text.IText tocText = tocSection.AddText(); + tocText.Style = mainStyle2; + tocText.Margins.Top = 10; + tocText.Margins.Bottom = 15; + tocText.AddContent("Table of contents"); + + // Create a new TOC. + Infragistics.Documents.Reports.Report.TOC.ITOC toc = tocSection.AddTOC(); + + // Add a first level to the TOC + // (corresponding to H1) + Infragistics.Documents.Reports.Report.TOC.ILevel tocLevel = toc.AddLevel(); + tocLevel.Indents.Right = 20; + tocLevel.Indents.Bottom = 5; + tocLevel.Style = mainStyle1; + tocLevel.Leader = LeaderFormat.Dots; + + // Add a second level to the TOC + // (corresponding to H2) + tocLevel = toc.AddLevel(); + tocLevel.Indents.Left = 20; + tocLevel.Indents.Right = 40; + tocLevel.Indents.Bottom = 5; + tocLevel.Style = mainStyle1; + tocLevel.Leader = LeaderFormat.Dots; +``` + +4. **目次をコンテンツと分離するために、Gap 要素を追加します。** + + **C# の場合:** + +```csharp + Infragistics.Documents.Reports.Report.IGap tocGap = tocSection.AddGap(); + tocGap.Height = new FixedHeight(50); +``` + +5. **いくつかの見出しと小見出しを追加して生成された目次を確認します。** + + **C# の場合:** + +```csharp + // Create headings to demonstrate TOC. + + Infragistics.Documents.Reports.Report.Text.IText sampleHeading; + Infragistics.Documents.Reports.Report.Text.IText sampleSubHeading; + + for (int i = 1; i < 5; i++) + { + sampleHeading = tocSection.AddText(); + sampleHeading.Heading = TextHeading.H1; + sampleHeading.Style = mainStyle2; + sampleHeading.AddContent("Heading " + i); + + for (int j = 1; j < 3; j++) + { + sampleSubHeading = tocSection.AddText(); + sampleSubHeading.Heading = TextHeading.H2; + sampleSubHeading.Style = mainStyle1; + sampleSubHeading.AddContent("Sub-Heading " + j); + } + } +``` diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/pattern/grids.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/pattern/grids.mdx new file mode 100644 index 0000000000..bdd8e8d593 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/pattern/grids.mdx @@ -0,0 +1,261 @@ +--- +title: "グリッド" +slug: documentengine-grids +--- + +# グリッド + +Grid 要素は行と列のレイアウトでコンテンツを表示します。グリッドの各セルは、追加する列と行の数で決定されるレイアウトにバインドされます。たとえば、セルの幅は列の幅で決まり、セルの高さは行の高さで決まります。 + +![](../../../../../images/images/DocumentEngine_Grids_01.png) + +各セルには [`ColSpan`](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Grid.IGridCell~ColSpan.html) プロパティと [`RowSpan`](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Grid.IGridCell~RowSpan.html) プロパティもあり、これらのプロパティによってセルは必要な列および行数だけスパンできます。したがって、グリッドの見出しが必要な場合には、行で最初のセルを追加して、ColSpan プロパティをグリッド内にある列の数に設定する必要があります。 + +Grid 要素は Header、Footer、および Divider 要素も含みます。これらの要素は、1 行と IGrid インターフェイスの [`AddColumn`](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Grid.IGrid~AddColumn.html) メソッドを使用してグリッドに追加する列の数のみで構成されます。これらの要素も Band 要素の Header、Footer、および Divider 要素と同じように動作します。ヘッダーは、[`Repeat`](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Grid.IGridHeader~Repeat.html) プロパティによって異なりますが、全ページまたは先頭ページのみのグリッドの一番上に表示します。フッターも同様ですが最終ページに適用されます。デバイダは、グリッドが次ページにまたがる場合に全ページの最後に表示します。 + +[パターン コンテンツ](/documentengine-pattern-content) ファミリーのメンバーとして、さまざまなグリッド レベルでパターンを適用することにより、さまざまなグリッド 要素のスタイルを修正できます。 + +* **グリッド パターン** -- グリッド全体をスタイルし、セル パターン以外のその他すべてのパターンへのアクセスを提供します ([GridPattern](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Grid.GridPattern.html) クラスはスタイルを [IGrid](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Grid.IGrid.html) インターフェイスに適用します)。 +* **ヘッダー パターン** -- グリッドのヘッダー要素をスタイルします ([GridHeaderPattern](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Grid.GridHeaderPattern.html) クラスはスタイルを [IGridHeader](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Grid.IGridHeader.html) インターフェイスに適用します)。 +* **区分線パターン** -- グリッドの区分線要素をスタイルします ([GridDividerPattern](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Grid.GridDividerPattern.html) クラスはスタイルを [IGridDivider](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Grid.IGridDivider.html) インターフェイスに適用します)。 +* **フッター パターン** -- グリッドのフッター要素をスタイルします ([GridFooterPattern](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Grid.GridFooterPattern.html) クラスはスタイルを [IGridFooter](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Grid.IGridFooter.html) インターフェイスに適用します)。 +* **列パターン **-- グリッドの各列をスタイルします ([GridColumnPattern](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Grid.GridColumnPattern.html) クラスはスタイルを [IGridColumn](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Grid.IGridColumn.html) インターフェイスに適用します)。 +* **行パターン** -- グリッドの各行をスタイルします ([GridRowPattern](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Grid.GridRowPattern.html) クラスはスタイルを [IGridRow](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Grid.IGridRow.html) インターフェイスに適用します)。 +* **セル パターン** -- 各セル個々を詳細にスタイルします ([GridCellPattern](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Grid.GridCellPattern.html) クラスはスタイルを [IGridCell](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Grid.IGridCell.html) インターフェイスに適用します)。 + +**** + +以下のコードは、ヘッダーとフッターを持つ 5 列 5 行で構成されるグリッドを作成します。セルの作成ループがセル 2 x 2 に遭遇すると、2 列ずつそのセルをスパンします。ループがセル 5 x 3 に遭遇すると、3 行ずつそのセルをスパンします。 + +1. **グリッド全体のパターンを作成し、次の個々のセルのパターンを作成します。** + + **Visual Basic の場合:** + +```vb + Imports Infragistics.Documents.Reports.Report + . + . + . + ' Create a new pattern for the grid as a whole. + Dim gridPattern As New Infragistics.Documents.Reports.Report.Grid.GridPattern() + gridPattern.Borders = New Borders(New Pen(New Color(0, 0, 0)), 5) + gridPattern.Background = New Background(Brushes.LightSteelBlue) + + ' Create a new pattern for each cell. + Dim cellPattern As New Infragistics.Documents.Reports.Report.Grid.GridCellPattern() + cellPattern.Paddings = New Paddings(5, 10) + cellPattern.Borders = New Borders(New Pen(New Color(0, 0, 0))) + 'cellPattern.Background = new Background(brush3); + cellPattern.Alignment = _ + New ContentAlignment(Alignment.Center, Alignment.Middle) +``` + + **C# の場合:** + +```csharp + using Infragistics.Documents.Reports.Report; + . + . + . + // Create a new pattern for the grid as a whole. + Infragistics.Documents.Reports.Report.Grid.GridPattern gridPattern = + new GridPattern(); + gridPattern.Borders = new Borders(new Pen(new Color(0, 0, 0)), 5); + + // Create a new pattern for each cell. + Infragistics.Documents.Reports.Report.Grid.GridCellPattern cellPattern = new GridCellPattern(); + cellPattern.Paddings = new Paddings(5, 10); + cellPattern.Borders = new Borders(new Pen(new Color(0, 0, 0))); + cellPattern.Background = new Background(Brushes.LightSteelBlue); + cellPattern.Alignment = + new ContentAlignment(Alignment.Center, Alignment.Middle); +``` + +2. **グリッドを作成し、グリッド パターンを適用します。** + + **Visual Basic の場合:** + +```vb + ' Create the grid and apply the GridPattern + Dim grid As Infragistics.Documents.Reports.Report.Grid.IGrid = section1.AddGrid() + grid.ApplyPattern(gridPattern) + + ' Declare a Row, and Cell object + ' for object creation. + Dim gridRow As Infragistics.Documents.Reports.Report.Grid.IGridRow + Dim gridCell As Infragistics.Documents.Reports.Report.Grid.IGridCell +``` + + **C# の場合:** + +```csharp + // Create the grid and apply the GridPattern + Infragistics.Documents.Reports.Report.Grid.IGrid grid = section1.AddGrid(); + grid.ApplyPattern(gridPattern); + + // Declare a Row, and Cell object + // for object creation. + Infragistics.Documents.Reports.Report.Grid.IGridRow gridRow; + Infragistics.Documents.Reports.Report.Grid.IGridCell gridCell; +``` + +3. **列を定義します。** + + **Visual Basic の場合:** + +```vb + ' Add five columns to the grid. + For i As Integer = 0 To 4 + grid.AddColumn() + Next i +``` + + **C# の場合:** + +```csharp + // Add five columns to the grid. + for (int i = 0; i < 5; i++) + { + grid.AddColumn(); + } +``` + +4. **ヘッダーとフッターを追加します。** + + **Visual Basic の場合:** + +```vb + ' Add a header to the grid. + Dim gridHeader As Infragistics.Documents.Reports.Report.Grid.IGridHeader = grid.Header + Dim headerCell As Infragistics.Documents.Reports.Report.Grid.IGridCell = _ + gridHeader.AddCell() + headerCell.ColSpan = 5 + cellPattern.Apply(headerCell) + Dim headerCellText As IText = headerCell.AddText() + headerCellText.Alignment = _ + New TextAlignment(Alignment.Center, Alignment.Middle) + headerCellText.AddContent("Grid Header") + + ' Add a footer to the grid. + Dim gridFooter As Infragistics.Documents.Reports.Report.Grid.IGridFooter = grid.Footer + Dim footerCell As Infragistics.Documents.Reports.Report.Grid.IGridCell = _ + gridFooter.AddCell() + footerCell.ColSpan = 5 + cellPattern.Apply(footerCell) + Dim gridFooterText As Infragistics.Documents.Reports.Report.Text.IText = _ + footerCell.AddText() + gridFooterText.Alignment = _ + New TextAlignment(Alignment.Right, Alignment.Middle) + gridFooterText.AddContent("Grid Footer") +``` + + **C# の場合:** + +```csharp + // Add a header to the grid. + Infragistics.Documents.Reports.Report.Grid.IGridHeader gridHeader = grid.Header; + Infragistics.Documents.Reports.Report.Grid.IGridCell headerCell = + gridHeader.AddCell(); + headerCell.ColSpan = 5; + cellPattern.Apply(headerCell); + Infragistics.Documents.Reports.Report.Text.IText headerCellText = headerCell.AddText(); + headerCellText.Alignment = + new TextAlignment(Alignment.Center, Alignment.Middle); + headerCellText.AddContent("Grid Header"); + + // Add a footer to the grid. + Infragistics.Documents.Reports.Report.Grid.IGridFooter gridFooter = grid.Footer; + Infragistics.Documents.Reports.Report.Grid.IGridCell footerCell = + gridFooter.AddCell(); + footerCell.ColSpan = 5; + cellPattern.Apply(footerCell); + Infragistics.Documents.Reports.Report.Text.IText gridFooterText = + footerCell.AddText(); + gridFooterText.Alignment = + new TextAlignment(Alignment.Right, Alignment.Middle); + gridFooterText.AddContent("Grid Footer"); +``` + +5. **5 行追加し各行にセルを 5 つ追加します。** + + **Visual Basic の場合:** + +```vb + For i As Integer = 0 To 4 + gridRow = grid.AddRow() + + ' Add five cells to each row. + For j As Integer = 0 To 4 + + If i = 1 AndAlso j = 1 Then + gridCell = gridRow.AddCell() + cellPattern.Apply(gridCell) + gridCell.Background = _ + New Background(Brushes.LightSlateGray) + gridCell.AddQuickText("Column Span") + + gridCell.ColSpan = 2 + + j += 1 + ElseIf i = 2 AndAlso j = 4 Then + gridCell = gridRow.AddCell() + cellPattern.Apply(gridCell) + gridCell.Background = _ + New Background(Brushes.LightSlateGray) + gridCell.AddQuickText("Row Span") + + gridCell.RowSpan = 3 + Else + gridCell = gridRow.AddCell() + cellPattern.Apply(gridCell) + gridCell.AddQuickText( _ + ("row " + i.ToString() + ", col " + j.ToString())) + End If + Next j + Next i +``` + + **C# の場合:** + +```csharp + // Add five rows to the grid. + for (int i = 0; i < 5; i++) + { + gridRow = grid.AddRow(); + + // Add five cells to each row. + for (int j = 0; j < 5; j++) + { + + if (i == 1 && j == 1) + { + gridCell = gridRow.AddCell(); + cellPattern.Apply(gridCell); + gridCell.Background = + new Background(Brushes.LightSlateGray); + gridCell.AddQuickText("Column Span"); + + gridCell.ColSpan = 2; + + j++; + } + else if (i == 2 && j == 4) + { + gridCell = gridRow.AddCell(); + cellPattern.Apply(gridCell); + gridCell.Background = + new Background(Brushes.LightSlateGray); + gridCell.AddQuickText("Row Span"); + + gridCell.RowSpan = 3; + } + else + { + gridCell = gridRow.AddCell(); + cellPattern.Apply(gridCell); + gridCell.AddQuickText( + "row " + i + ", col " + j); + } + } + } +``` diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/pattern/lists.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/pattern/lists.mdx new file mode 100644 index 0000000000..89698e7630 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/pattern/lists.mdx @@ -0,0 +1,103 @@ +--- +title: "リスト" +slug: documentengine-lists +--- + +# リスト + +List 要素は、項目のグループを番号の付いた形式または黒丸の付いた形式のいずれかで提示する時に非常に役に立ちます。リストは、レポートのフローにしたがって、必要に応じてシンプルに、または複雑になる可能性があります。リストはテキスト項目で構成されるシンプルなリストになる場合もあれば、Bands から Images、さらに Quick Text までの個別のレイアウト要素で構成される複雑な配列になる場合もあります。 + +List 要素の興味深い特徴は、パターンをリストに適用する機能です。これでこれらのパターンはスタイルの変更をリストに適用します。いくつかのパターンを単一のリストに適用することができます。パターンを適用した後で特定のスタイル プロパティを設定することによって、パターンをオーバーライドすることもできます。 + +ほとんどのレイアウト 要素から AddList メソッドを呼び出すことによってリストを作成できます。いったん List を作成したら、IList インターフェイスから AddItem メソッドを呼び出すことによって、項目をリストに追加できます。これで、別の List 要素を含み、それぞれの Add メソッドによって、ほとんどのレイアウト項目をそれぞれ個々のリストに追加できます。 + +以下のコードは 4 つの手順に分けられます。第 1 の手順は、リストの特定のスタイルを変更する 2 つのリスト パターンを作成します。第 2 の手順は、リストを作成し、第 1 のパターンを適用します。第 3 の手順は、リストをもうひとつ作成し、第 2 のパターンを適用します。最後の手順は、リスト パターンによってすでに設定されているスタイル プロパティを設定することによって、パターンをオーバーライドする方法を示します。以下のようなコードでレポートをパブリッシュすると、上記のスクリーンショットのようなページが表示されます。 + +![](../../../../../images/images/DocumentEngine_Lists_01.png) + +1. **2 つのリスト パターンを作成します。** + + **C# の場合:** + +```csharp + using Infragistics.Documents.Reports.Report; + . + . + . + // Create a list pattern. A list pattern is basically a style + // that you want to apply to a specific list. + Infragistics.Documents.Reports.Report.List.ListPattern listPattern1 = new ListPattern(); + listPattern1.Background = new Background(Brushes.LightSteelBlue); + listPattern1.Bullets = + new Infragistics.Documents.Reports.Report.List.Bullets(BulletType.WhiteCircle); + listPattern1.Borders = new Borders(new Pen(new Color(0, 0, 0))); + listPattern1.Paddings = new Paddings(5); + + // Create a second list pattern. + Infragistics.Documents.Reports.Report.List.ListPattern listPattern2 = new ListPattern(); + listPattern2.Background = new Background(Brushes.LightSlateGray); + listPattern2.Bullets = + new Infragistics.Documents.Reports.Report.List.Bullets(BulletType.BlackCircle); + listPattern2.Borders = new Borders(new Pen(new Color(0, 0, 0))); + listPattern2.Paddings = new Paddings(5); + listPattern2.Interval = 10; +``` + +2. **リストを作成して、最初のパターンを適用します。** + + **C# の場合:** + +```csharp + // Create a list and apply the first pattern to it. + Infragistics.Documents.Reports.Report.List.IList sectionList1 = section1.AddList(); + sectionList1.ApplyPattern(listPattern1); + + // Create a list item. + Infragistics.Documents.Reports.Report.List.IListItem sectionListItem1; + + // For each name in the BulletType enum, add a new list item. + foreach (string s in Enum.GetNames(typeof(BulletType))) + { + sectionListItem1 = sectionList1.AddItem(); + sectionListItem1.AddQuickText(s); + } +``` + +3. **リストをもうひとつ作成して、2 番目のパターンを適用します。** + + **C# の場合:** + +```csharp + Infragistics.Documents.Reports.Report.List.IList sectionList2 = section1.AddList(); + listPattern2.Apply(sectionList2); + + Infragistics.Documents.Reports.Report.List.IListItem sectionListItem2; + + foreach (string s in Enum.GetNames(typeof(Alignment))) + { + sectionListItem2 = sectionList2.AddItem(); + sectionListItem2.AddQuickText(s); + } +``` + +4. **3 番目のリストを作成して、最初のパターンをそのリストに適用します。** + + いったんパターンを適用したら、**Bullets** プロパティを新しい Bullets オブジェクトに設定します。これによってパターンの設定がオーバーライドされます。パターンはスタイル プロパティ変更のコレクションにすぎません。したがって個々のプロパティを変更した後で再度パターンを適用する場合には、パターンは個々のスタイル変更をオーバーライドすることができます。 + + **C# の場合:** + +```csharp + Infragistics.Documents.Reports.Report.List.IList sectionList3 = section1.AddList(); + listPattern1.Apply(sectionList3); + // Override the Pattern's style for the Bullet property. + sectionList3.Bullets = + new Infragistics.Documents.Reports.Report.List.Bullets(BulletType.BlackCircle); + + Infragistics.Documents.Reports.Report.List.IListItem sectionListItem3; + + foreach (string s in Enum.GetNames(typeof(BrushType))) + { + sectionListItem3 = sectionList3.AddItem(); + sectionListItem3.AddQuickText(s); + } +``` diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/pattern/pattern-content.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/pattern/pattern-content.mdx new file mode 100644 index 0000000000..79db7eea09 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/pattern/pattern-content.mdx @@ -0,0 +1,21 @@ +--- +title: "パターン コンテンツ" +slug: documentengine-pattern-content +--- + +# パターン コンテンツ +パターン コンテンツにはパターンを使用することによってすべてスタイル可能な要素が含まれています。これらのパターンは、パターン オブジェクトを作成して、次に関連付けられた要素に適用することによって、スタイルをグリッド、表、ツリーに適用します。これらの要素はほとんどの場合、要素を埋めるデータのソースに依存します。 + +使用可能なパターン コンテンツについては、以下のリストをクリックしてください。 + +- [グリッド](/documentengine-grids) +- [リスト](/documentengine-lists) +- [表](/documentengine-tables) +- [テキスト](/documentengine-text) +- [ツリー](/documentengine-trees) + + + + + + diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/pattern/tables.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/pattern/tables.mdx new file mode 100644 index 0000000000..49aa2daba5 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/pattern/tables.mdx @@ -0,0 +1,183 @@ +--- +title: "表" +slug: documentengine-tables +--- + +# 表 + + + +Table 要素は、Grid 要素などのように、行と列よりも行とセルに依存するグリッドを作成することができるグリッド タイプの要素です。Table 要素には、Grid 要素のようにセルの幅を決定する特定の列がありません。 + +Table 要素によって、必要に応じてあらゆるセルの幅をカスタマイズことができ、データの提示方法を完全に制御することができます。このグリッド デザインの 2 つの欠点は、列と行のスパンニングを処理しなければならないことです。特定のセルの幅を倍にすることによって列のスパンニングを「偽造」しなければなりません。行のスパンニングはできません。 + +[パターン コンテンツ](/documentengine-pattern-content) ファミリーのメンバーとして、さまざまな表レベルでパターンを適用することにより、さまざまな Table 要素のスタイルを修正できます。 + +* **表パターン** -- 表全体をスタイルし、セル パターン以外のその他すべてのパターンへのアクセスを提供します ([TablePattern](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Table.TablePattern.html) クラスはスタイルを [ITable](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Table.ITable.html) インターフェイスに適用します)。 +* **ヘッダー パターン** -- 表のヘッダー要素をスタイルします ([TableHeaderPattern](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Table.TableHeaderPattern.html) クラスはスタイルを [ITableHeader](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Table.ITableHeader.html) インターフェイスに適用します)。 +* **区別線パターン** -- 表の区分線要素をスタイルします ([TableDividerPattern](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Table.TableDividerPattern.html) クラスはスタイルを [ITableDivider](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Table.ITableDivider.html) インターフェイスに適用します)。 +* **フッター パターン** -- 表のフッター要素をスタイルします ([TableFooterPattern](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Table.TableFooterPattern.html) クラスはスタイルを [ITableFooter](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Table.ITableFooter.html) インターフェイスに適用します)。 +* **行パターン** -- 表の各行をスタイルします ([TableRowPattern](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Table.TableRowPattern.html) クラスはスタイルを [ITableRow](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Table.ITableRow.html) インターフェイスに適用します)。 +* **セル パターン** -- 各セルを個別に詳細にスタイルします ([TableCellPattern](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Table.TableCellPattern.html) クラスはスタイルを [ITableCell](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Table.ITableCell.html) インターフェイスに適用します)。 + +Table 要素は Header、Footer、および Divider 要素も含みます。これらの要素は 1 行のみで構成されます。これらの要素も Band 要素の Header、Footer、および Divider 要素と同じように動作します。ヘッダーは、[Repeat](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Table.ITableHeader~Repeat.html) プロパティによって異なりますが、全ページまたは先頭ページのみの表の上部に表示します。ヘッダーも同様ですが最終ページに適用されます。デバイダは、表が次ページに続く全ページの最後に表示します。 + +![](../../../../../images/images/DocumentEngine_Tables_01.png) + +以下のコードは、ヘッダーとフッターの付いた 3 行の表を作成します。1 行目と 3 行目は、特定のセルの幅を操作することによって、標準的なセルの幅を倍にするために列のスパンニングをシミュレートします。中間の行は、各セルの幅を表の幅の 3 分の 1 に変更することによって、完全にカスタムの行を作成する Table 要素の機能を示しています。 + +1. **表とセルのパターンを作成します。** + + **C# の場合:** + +```csharp + using Infragistics.Documents.Reports.Report; + . + . + . + // Create a new pattern for the table as a whole. + Infragistics.Documents.Reports.Report.Table.TablePattern tablePattern = + new Infragistics.Documents.Reports.Report.Table.TablePattern(); + tablePattern.Background = new Background(Brushes.LightSteelBlue); + tablePattern.Borders = new Borders(new Pen(new Color(0, 0, 0)), 5); + + // Create a new pattern for the cells. + Infragistics.Documents.Reports.Report.Table.CellPattern tableCellPattern = + new Infragistics.Documents.Reports.Report.Table.TableCellPattern(); + tableCellPattern.Borders = new Borders(new Pen(new Color(0, 0, 0))); + tableCellPattern.Background = new Background(Brushes.LightSteelBlue); + tableCellPattern.Paddings = new Paddings(5, 10); +``` + +2. **表を作成し、表パターンを適用します。** + + **C# の場合:** + +```csharp + // Create the table and apply the table pattern. + Infragistics.Documents.Reports.Report.Table.ITable table = section1.AddTable(); + table.Width = new RelativeWidth(100); + table.ApplyPattern(tablePattern); +``` + +3. **ヘッダーとフッターを作成します。** + + **C# の場合:** + +```csharp + // Create the table header. + Infragistics.Documents.Reports.Report.Table.ITableHeader tableHeader = + table.Header; + Infragistics.Documents.Reports.Report.Table.ITableCell tableHeaderCell = + tableHeader.AddCell(); + tableCellPattern.Apply(tableHeaderCell); + tableHeaderCell.AddQuickText("Table Header"); + + // Create the table footer. + Infragistics.Documents.Reports.Report.Table.ITableFooter tableFooter = + table.Footer; + Infragistics.Documents.Reports.Report.Table.ITableCell tableFooterCell = + tableFooter.AddCell(); + tableCellPattern.Apply(tableFooterCell); + tableFooterCell.AddQuickText("Table Footer"); +``` + +4. **1 行目を作成します。** + + **C# の場合:** + +```csharp + Infragistics.Documents.Reports.Report.Table.ITableRow tableRow; + Infragistics.Documents.Reports.Report.Table.ITableCell tableCell; + tableRow = table.AddRow(); + + tableCell = tableRow.AddCell(); + tableCell.Width = new RelativeWidth(100); + tableCellPattern.Apply(tableCell); + tableCell.Background = new Background(Brushes.LightSlateGray); + IText tableCellText = tableCell.AddText(); + tableCellText.Alignment = + new TextAlignment(Alignment.Center, Alignment.Middle); + tableCellText.AddContent("'Column' Span 1"); + + tableCell = tableRow.AddCell(); + tableCell.Width = new RelativeWidth(50); + tableCellPattern.Apply(tableCell); + tableCellText = tableCell.AddText(); + tableCellText.Alignment = + new TextAlignment(Alignment.Center, Alignment.Middle); + tableCellText.AddContent("Cell 2"); + + tableCell = tableRow.AddCell(); + tableCell.Width = new RelativeWidth(50); + tableCellPattern.Apply(tableCell); + tableCellText = tableCell.AddText(); + tableCellText.Alignment = + new TextAlignment(Alignment.Center, Alignment.Middle); + tableCellText.AddContent("Cell 3"); +``` + +5. **2 行目を作成します。** + + **C# の場合:** + +```csharp + tableRow = table.AddRow(); + + tableCell = tableRow.AddCell(); + tableCell.Width = new RelativeWidth(33); + tableCellPattern.Apply(tableCell); + tableCellText = tableCell.AddText(); + tableCellText.Alignment = + new TextAlignment(Alignment.Center, Alignment.Middle); + tableCellText.AddContent("33%"); + + tableCell = tableRow.AddCell(); + tableCell.Width = new RelativeWidth(33); + tableCellPattern.Apply(tableCell); + tableCellText = tableCell.AddText(); + tableCellText.Alignment = + new TextAlignment(Alignment.Center, Alignment.Middle); + tableCellText.AddContent("33%"); + + tableCell = tableRow.AddCell(); + tableCell.Width = new RelativeWidth(33); + tableCellPattern.Apply(tableCell); + tableCellText = tableCell.AddText(); + tableCellText.Alignment = + new TextAlignment(Alignment.Center, Alignment.Middle); + tableCellText.AddContent("33%"); +``` + +6. **3 行目を作成します。** + + **C# の場合:** + +```csharp + tableRow = table.AddRow(); + + tableCell = tableRow.AddCell(); + tableCell.Width = new RelativeWidth(50); + ableCellPattern.Apply(tableCell); + tableCellText = tableCell.AddText(); + tableCellText.Alignment = + new TextAlignment(Alignment.Center, Alignment.Middle); + tableCellText.AddContent("Cell 1"); + + tableCell = tableRow.AddCell(); + tableCell.Width = new RelativeWidth(50); + tableCellPattern.Apply(tableCell); + tableCellText = tableCell.AddText(); + tableCellText.Alignment = + new TextAlignment(Alignment.Center, Alignment.Middle); + tableCellText.AddContent("Cell 2"); + + tableCell = tableRow.AddCell(); + tableCell.Width = new RelativeWidth(100); + tableCellPattern.Apply(tableCell); + tableCell.Background = new Background(Brushes.LightSlateGray); + tableCellText = tableCell.AddText(); + tableCellText.Alignment = + new TextAlignment(Alignment.Center, Alignment.Middle); + tableCellText.AddContent("'Column' Span 2"); +``` diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/pattern/text.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/pattern/text.mdx new file mode 100644 index 0000000000..b153271518 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/pattern/text.mdx @@ -0,0 +1,80 @@ +--- +title: "テキスト" +slug: documentengine-text +--- + +# テキスト + + +Text 要素は高度にカスタマイズした段落コンテンツをレポートに追加します。Text 要素には、どのような場合であってもコンテンツを目立たせるいくつかのテキスト固有のプロパティを含みます。これらのプロパティのいくつかは、[「レポート グラフィックス」](/documentengine-report-graphics)のセクションで見つけることができますが、以下のようなテキスト固有のプロパティがいくつかあります。 + +* **First Letter** -- 段落の先頭文字がドロップ キャップかどうかを決定します。 +* **Heading** -- テキストに複数の異なるスタイルの見出しを提供します。 +* **Indents** -- テキストのインデントの値を決定します。 +* **Interval** -- テキスト各行間に余分のスペースを追加することができます。 +* **Line Numbering** -- 閲覧者が特定の文を指定しやすいようにテキストの各行に番号を付けることができます。 +* **Style** -- 異なるテキスト要素に同じフォントと色を繰り返し設定する時に便利です。 + +Text 要素もすべての種類のテキスト コンテンツを挿入する支援をするいくつかのメソッドを公開しています。これらのメソッドのいくつかを以下にリストします。 + +* **AddContent** -- 多数のオーバーロードで最も一般的に使用されるメソッドです。単に 1 回のオーバーロードでひとつの文字列を入力する、または別のオーバーロードでスタイル 要素を適用することが可能です。ユーザーのニーズに合わせるためにいくつかの使用可能な組み合わせがあります。 +* **AddDateTime** -- いくつかの標準的なフォーマットで現在の日時を追加することができます。 +* **AddLeader** -- 引き出し線をテキストに追加することができます。 +* **AddLineBreak** -- 改行を追加して、コンテンツが連続した行の上にひとかたまりにならないようにします。 +* **AddPageNumber** -- 十進数、文字、またはローマ数字で現在のページのベージ番号を追加します。 +* **AddRichContent** -- HTML と同様のタグを使用して限られたリッチ コンテンツを追加します。 + +![](../../../../../images/images/DocumentEngine_Text_01.png) + +以下のコードは単一の Text 要素を作成します。ひとつのパターンが Text 要素全体に適用され、2 つのスタイルが個々のコンテンツ 要素に適用されます。 + +1. **スタイルを作成します。** + + **C# の場合:** + +```csharp + using Infragistics.Documents.Reports.Report; + using Infragistics.Documents.Reports.Report.Text; + using Infragistics.Documents.Reports.Graphics; + . + . + . + Style style1 = new Style(new Font("Arial", 16), Brushes.White); + Style style2 = new Style(new Font("Verdana", 10), Brushes.Black); +``` + +2. **テキストのパターンを作成します。** + + **C# の場合:** + +```csharp + TextPattern textPattern = new TextPattern(); + textPattern.Margins = new Margins(5, 10); + textPattern.Paddings = new Paddings(5); + textPattern.Interval = 5; + textPattern.Borders = new Borders(new Pen(new Color(0, 0, 0)), 5); + textPattern.Background = new Background(Brushes.LightSteelBlue); +``` + +3. **Text 要素を作成してコンテンツを追加します。** + + 以下のテキストを使用して、`string1` 変数を設定します。 + + > Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Donec imperdiet mattis sem.Nunc ornare elit at justo.In quam nulla, lobortis non, commodo eu, eleifend in, elit.Nulla eleifend.Nulla convallis.Sed eleifend auctor purus.Donec velit diam, congue quis, eleifend et, pretium id, tortor.Nulla semper condimentum justo.Etiam interdum odio ut ligula.Vivamus egestas scelerisque est. Donec accumsan.In est urna, vehicula non, nonummy sed, malesuada nec, purus.Vestibulum erat.Vivamus lacus enim, rhoncus nec, ornare sed, scelerisque varius, felis.Nam eu libero vel massa lobortis accumsan.Vivamus id orci.Sed sed lacus sit amet nibh pretium sollicitudin.Morbi urna. + + **C# の場合:** + +```csharp + IText sectionText = section1.AddText(); + sectionText.ApplyPattern(textPattern); + + string string1 = "Lorem ipsum..."; + + sectionText.AddContent("Heading 1", style1); + sectionText.AddLineBreak(); + sectionText.AddContent(string1, style2); + sectionText.AddLineBreak(); + sectionText.AddContent("Heading 2", style1); + sectionText.AddLineBreak(); + sectionText.AddContent(string1, style2); +``` diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/pattern/trees.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/pattern/trees.mdx new file mode 100644 index 0000000000..1596fdf1f1 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/pattern/trees.mdx @@ -0,0 +1,108 @@ +--- +title: "ツリー" +slug: documentengine-trees +--- + +# ツリー +Tree 要素は、親ノード、特にルート ノードが子ノードと階層の下位にあるすべてのノードをどのように所有するかを示すことによって、階層関係を表示するために役に立ちます。Tree 要素のオブジェクト モデルは、ツリーのルート ノードを識別するために [Root](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Tree.ITree~Root.html) プロパティを設定したメインのツリー オブジェクトで構成されています。ルート ノード（タイプ [INode](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Tree.INode.html) の）への参照を取得したら、INode インターフェイスから [AddNode](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Tree.INode~AddNode.html) メソッドを呼び出して、追加ノードをツリーに追加することができます。希望の数だけノードを追加できますが、ルート ノードはひとつしかありません。 + +すべての[パターン コンテンツ](/documentengine-pattern-content)と同じように、パターンを以下のツリー 要素に追加することによって、スタイル変更を実装できます。 + +* ツリー全体（[TreePattern](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Tree.TreePattern.html) クラスはスタイルを [ITree](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Tree.ITree.html) インターフェイスに適用） +* コンテンツではなくツリーのノード ([TreeNodePattern](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Tree.TreeNodePattern.html) クラスはスタイルを [INode](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Tree.INode.html) インターフェイスを適用します)。 +* ツリー ノードのキャプション（[TreeCaptionPattern](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Tree.TreeCaptionPattern.html) クラスはスタイルを [ICaption](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Tree.ICaption.html) インターフェイスに適用） + +上記のリストから分かるように、各パターンはツリーのより詳細な階層に適用されます。それでも十分でない場合には、各ノードで特定のプロパティを設定せうることにより、各パターンをオーバーライドすることができます。 + +![](../../../../../images/images/DocumentEngine_Trees_01.png) + +以下のコードはルート ノードがひとつ、子ノードが 7 つのツリーを作成します。最初にツリー、ノード、キャプションのパターンを作成し、ツリーを作成して、次にノードを追加します。 + +1. **ツリー、ノード、キャプションのパターンを作成します。** + + **C# の場合:** + +```csharp + using Infragistics.Documents.Reports.Report; + . + . + . + // Create a new pattern for the tree as a whole. + Infragistics.Documents.Reports.Report.Tree.TreePattern treePattern = new TreePattern(); + treePattern.Background = new Background(Brushes.LightSlateGray); + treePattern.Paddings = new Paddings(5); + treePattern.Borders = new Borders(new Pen(new Color(0, 0, 0)), 5); + + // Create a new pattern for tree nodes. + Infragistics.Documents.Reports.Report.Tree.TreeNodePattern treeNodePattern = + new TreeNodePattern(); + treeNodePattern.Lines = new Lines(new Pen(new Color(0, 0, 0))); + treeNodePattern.Interval = 5; + treeNodePattern.Indent = 25; + + // Create a new pattern for captions. + Infragistics.Documents.Reports.Report.Tree.TreeCaptionPattern treeCaptionPattern = + new TreeCaptionPattern(); + treeCaptionPattern.Background = new Background(Brushes.LightSteelBlue); + treeCaptionPattern.Borders = new Borders(new Pen(new Color(0, 0, 0)), 3); + treeCaptionPattern.Paddings = new Paddings(3); +``` + +2. **ツリーを作成し、ツリー パターンを適用して、次にルート ノードのキャプションを追加します。** + + **C# の場合:** + +```csharp + // Create the tree and get a reference to the + // tree's root node. + Infragistics.Documents.Reports.Report.Tree.ITree tree = section1.AddTree(); + tree.ApplyPattern(treePattern); + tree.Width = new RelativeWidth(75); + + Infragistics.Documents.Reports.Report.Tree.INode rootNode = tree.Root; + treeNodePattern.Apply(rootNode); + + Infragistics.Documents.Reports.Report.QuickText.IQuickText nodeText; + + // Add a caption to the root node. + Infragistics.Documents.Reports.Report.Tree.ICaption rootCaption = rootNode.Caption; + nodeText = rootCaption.AddQuickText("Alignment Options"); + nodeText.Font = new Infragistics.Documents.Reports.Graphics.Font("Verdana", 24); +``` + +3. **子ノードを作成します。** + + 以下のコードは、[Alignment](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Alignment.html) [Alignment](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Alignment.html) [Alignment](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Alignment.html) [Alignment](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Alignment.html) 列挙体でループして、ツリー ノードを格納するための文字列を取得します。ループが文字列「Center」または「Middle」に遭遇すると、これらのノードのパターンをオーバーライドして背景色を白に変更します。 + + **C# の場合:** + +```csharp + INode childNode; + ICaption childNodeCaption; + + foreach (string s in Enum.GetNames(typeof(Alignment))) + { + if (s == "Center" || s == "Middle") + { + childNode = rootNode.AddNode(); + childNodeCaption = childNode.Caption; + treeCaptionPattern.Apply(childNodeCaption); + + // Override the Background of the TreeCaptionPattern + childNodeCaption.Background = new Background(Brushes.White); + + nodeText = childNodeCaption.AddQuickText(s); + nodeText.Font = + new Infragistics.Documents.Reports.Graphics.Font("Verdana", 24); + } + else + { + childNode = rootNode.AddNode(); + childNodeCaption = childNode.Caption; + treeCaptionPattern.Apply(childNodeCaption); + nodeText = childNodeCaption.AddQuickText(s); + nodeText.Font = + new Infragistics.Documents.Reports.Graphics.Font("Verdana", 24); + } + } +``` diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/quick/quick-content.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/quick/quick-content.mdx new file mode 100644 index 0000000000..1bdaf8d706 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/quick/quick-content.mdx @@ -0,0 +1,20 @@ +--- +title: "クイック コンテンツ" +slug: documentengine-quick-content +--- + +# クイック コンテンツ +必要なのが最低限の場合があります。クイック コンテンツによって、メソッドの呼び出しによってレポートの素材を素早く追加できます。たとえば、`AddQuickText` メソッドを呼び出して、引数としてテキストを渡します。シンプルなテキストをレイアウト 要素に追加するために必要なのはそれだけです。 + +軽量のクイック コンテンツ 要素の詳細は、以下のリンクをクリックしてください。 + +- [クイック画像](/documentengine-quick-image) +- [クイック リスト](/documentengine-quick-list) +- [クイック表](/documentengine-quick-table) +- [クイック テキスト](/documentengine-quick-text) + + + + + + diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/quick/quick-image.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/quick/quick-image.mdx new file mode 100644 index 0000000000..83c72c6952 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/quick/quick-image.mdx @@ -0,0 +1,22 @@ +--- +title: "クイック画像" +slug: documentengine-quick-image +--- + +# クイック画像 + +Quick Image 要素によって、わずかまたはまったく努力せずにほとんどのレイアウト 要素に画像を追加できます。画像をレポートに素早く追加するために必要なのは、画像を挿入する必要があるどのようなレイアウト要素でも AddQuickImage メソッドを呼び出すだけです。このメソッドのパラメーターは、[Infragistics.Documents.Reports.Graphics.Image](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.Image.html) の 1 つだけです。以前に作成した画像を渡す、または新しい画像をインスタンス化するのいずれかを実行できます。詳細については、「画像」を参照してください。 + +以下のコードは、[ISection](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Section.ISection~AddQuickImage.html) インターフェイスの [AddQuickImage](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Section.ISection.html) メソッドを呼び出して新しい画像を渡すことによって、Quick Image 要素を作成します。新しい画像は 2 番目のオーバーロードを使用して、画像のパスを識別するために文字列を使用します。このトピックは、Report 要素が定義済みで、この要素に少なくともひとつの Section 要素が追加されていることを前提としています。詳細は、[Report](/documentengine-report) および[Section](/documentengine-section) を参照してください。 + +**C# の場合:** + +```csharp +section1.AddQuickImage(new Image(Application.StartupPath + @"..Coffee Bean.bmp")); +``` + + + + + + diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/quick/quick-list.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/quick/quick-list.mdx new file mode 100644 index 0000000000..6a40b81822 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/quick/quick-list.mdx @@ -0,0 +1,31 @@ +--- +title: "クイック リスト" +slug: documentengine-quick-list +--- + +# クイック リスト + +Quick List 要素を使用することは、シンプルな黒丸または番号付きのリストをレポートに追加するための最も簡単な方法です。Quick List には軽量であることを維持するために基本的な機能しかありません。より詳細にカスタマイズ可能なリスト 要素が必要な場合には、[「リスト」](/documentengine-lists)を参照してください。その他の[クイック コンテンツ](/documentengine-quick-content) 要素と同じように、ほとんどのレイアウト 要素で AddQuickList メソッドを呼び出すことによって Quick List を作成します。Quick Image および Quick Text 要素と異なり、リストを作成するためにもうひとつ必要な手順があります。項目を追加しなければなりません。ただし、項目をリストに追加することは全く難しいことではありません。[IQuickList](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.QuickList.IQuickList~AddItem.html) インターフェイスから [AddItem](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.QuickList.IQuickList.html) メソッドを呼び出して、文字列を提供します。リストに黒丸を付けるか番号を付けるかを識別する [Numbered](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.QuickList.IQuickList~Numbered.html) プロパティなどのその他のオプションを使用できます。もうひとつ役に立つプロパティは、各項目間にスペースを設定する [Interval](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.QuickList.IQuickList~Interval.html) プロパティです。 + +以下のコードは、7 項目からなるリストを作成します。リストには番号が付けられ、各項目間のスペースは 10 ピクセルに設定されます。このトピックは、Report 要素が定義済みで、この要素に少なくともひとつの Section 要素が追加されていることを前提としています。詳細は、[Report](/documentengine-report) および[Section](/documentengine-section) を参照してください。 + +![](../../../../../images/images/DocumentEngine_Quick_List_01.png) + +**C# の場合:** + +```csharp +// Add a quick list +section1.AddQuickText("Quick List"); +Infragistics.Documents.Reports.Report.QuickList.IQuickList quickList = section1.AddQuickList(); +quickList.Numbered = true; +quickList.Interval = 10; + +// Add items to the list +quickList.AddItem("Red"); +quickList.AddItem("Orange"); +quickList.AddItem("Yellow"); +quickList.AddItem("Green"); +quickList.AddItem("Blue"); +quickList.AddItem("Indigo"); +quickList.AddItem("Violet"); +``` diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/quick/quick-table.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/quick/quick-table.mdx new file mode 100644 index 0000000000..81b0b4ac6c --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/quick/quick-table.mdx @@ -0,0 +1,77 @@ +--- +title: "クイック表" +slug: documentengine-quick-table +--- + +# クイック表 + + + +表には当然のことながらいくつかの要素が含まれるため、Quick Table 要素は軽量の [Quick Content](/documentengine-quick-content) 要素の中で最も重い要素となっています。以下の要素を Quick Table 要素に追加できます。 + +- 列 +- 行 +- セル +- ヘッダー +- 区分線 +- フッター + +Quick Table 要素の外観を変更するいくつかのプロパティを設定することも可能です。 + +- 背景 +- 境界線 +- パッディング +- 余白 + +Quick Table 要素は完全な Table 要素のいくつかの機能を使用します。詳細は、[表](/documentengine-tables)を参照してください。Columns、Rows、Cells はすべて繰り返し可能なコンテンツです。つまり、必要なだけこれらの要素を追加できます。ただし、Header、Divider、および Footer 要素は繰り返すことはできません。ページあたりに使用可能な Header、Divider、および Footer はひとつだけです。Header 要素と Footer 要素は繰り返し可能ではありませんが、セルは繰り返し可能です。これらの 2 つの要素はそれぞれ、追加のセルを Header 要素または Footer 要素に追加するために使用される AddCell メソッドを含んでいます。ほとんど同じようにセルを Row 要素に追加することもできます。したがって、（Header、Row、または Footer のいずれにあろうとも）セルで一杯の表を作成することはセルあたりひとつのメソッドを呼び出すのと同じように簡単です。 + +![](../../../../../images/images/DocumentEngine_Quick_Table_01.png) + +------ + +以下のコードは、シンプルな 3 x 3 の表を作成し、ヘッダーとフッターを追加します。表の背景色を LightSteelBlue に、枠の色を Black に設定します。このトピックは、Report 要素が定義済みで、この要素に少なくともひとつの Section 要素が追加されていることを前提としています。詳細は、[Report](/documentengine-report) および[Section](/documentengine-section) を参照してください。 + +**C# の場合:** + +```csharp +section1.AddQuickText("Quick Table"); +// Add a quick table +Infragistics.Documents.Reports.Report.QuickTable.IQuickTable quickTable = section1.AddQuickTable(); +// Add black borders to the outside of the table +quickTable.Borders = new Borders(new Pen(new Color(0, 0, 0))); +// Add a lightsteelblue background to the entire table +quickTable.Background = new Background(Brushes.LightSteelBlue); + +// Add three columns +quickTable.AddColumn(100); +quickTable.AddColumn(100); +quickTable.AddColumn(100); + +// Add Header cells +Infragistics.Documents.Reports.Report.QuickTable.IQuickTableHeader quickTableHeader = quickTable.Header; +quickTableHeader.AddCell("Header 1"); +quickTableHeader.AddCell("Header 2"); +quickTableHeader.AddCell("Header 3"); + +// Add three rows with three cells each +Infragistics.Documents.Reports.Report.QuickTable.IQuickTableRow quickRow = quickTable.AddRow(); +quickRow.AddCell("Cell 1"); +quickRow.AddCell("Cell 2"); +quickRow.AddCell("Cell 3"); + +quickRow = quickTable.AddRow(); +quickRow.AddCell("Cell 4"); +quickRow.AddCell("Cell 5"); +quickRow.AddCell("Cell 6"); + +quickRow = quickTable.AddRow(); +quickRow.AddCell("Cell 7"); +quickRow.AddCell("Cell 8"); +quickRow.AddCell("Cell 9"); + +// Add Footer cells +Infragistics.Documents.Reports.Report.QuickTable.IQuickTableFooter quickTableFooter = quickTable.Footer; +quickTableFooter.AddCell("Footer 1"); +quickTableFooter.AddCell("Footer 2"); +quickTableFooter.AddCell("Footer 3"); +``` diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/quick/quick-text.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/quick/quick-text.mdx new file mode 100644 index 0000000000..04c8616527 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/quick/quick-text.mdx @@ -0,0 +1,27 @@ +--- +title: "クイック テキスト" +slug: documentengine-quick-text +--- + +# クイック テキスト + + + +Quick Text 要素は、要素のカスタマイズが全く必要ない点で、[Quick Content](/documentengine-quick-content) 要素の中で最もシンプルな要素です。Quick Text 要素は、テキストをレポートに素早く追加するために文字列を AddQuickText メソッドに渡すだけでいいように設計されています。もちろん、要素への参照を取得して、[Alignment](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.QuickText.IQuickText~Alignment.html)、[Brush](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.QuickText.IQuickText~Brush.html)、および [Font](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.QuickText.IQuickText~Font.html) などのいくつかの標準的なプロパティを修正することも可能です。しかし、十分な機能を備えた Text 要素が必要な場合、詳細は[Text](/documentengine-text)を参照してください。Quick Text 要素の基本的な使用事例は、配置や外観を無視してデフォルトのテキスト（Arial、12pt）を追加する場合です。 + +![](../../../../../images/images/DocumentEngine_Quick_Text_01.png) + +------ + +以下のコードを使用して、デフォルト スタイルで Quick Text 要素を最初に追加し、次に新しい Quick Text への参照を取得して、色とフォントを変更することによってスタイルを修正します。このトピックは、Report 要素が定義済みで、この要素に少なくともひとつの Section 要素が追加されていることを前提としています。詳細は、[Report](/documentengine-report) および[Section](/documentengine-section) を参照してください。 + +**C# の場合:** + +```csharp +section1.AddQuickText("This is the default Quick Text style."); + +Infragistics.Documents.Reports.Report.QuickText.IQuickText quickText = section1.AddQuickText("This is a modified Quick Text style."); +quickText.Brush = Infragistics.Documents.Reports.Graphics.Brushes.SteelBlue; +quickText.Font = new Infragistics.Documents.Reports.Graphics.Font("Verdana", 18); +``` + diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/report-elements.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/report-elements.mdx new file mode 100644 index 0000000000..72859b7b44 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/elements/report-elements.mdx @@ -0,0 +1,19 @@ +--- +title: "レポート要素" +slug: documentengine-report-elements +--- + +# レポート要素 + +レポート要素を使用して、コンテンツをレポートに追加してそのコンテンツを論理的フローに配置します。 + +- [DocumentEngine レポート レイアウト](/documentengine-report-layout) -- ほとんどすべてのコンテンツのレイアウトに役に立つ Band 要素から、ページの下部にコンテンツを引き伸ばすためだけに使用される Stretcher 要素まで、コンテンツ フローを制御するいくつかの役に立つ要素について説明します。 +- [パターン コンテンツ](/documentengine-pattern-content) -- パターン コンテンツは、Grids (行の後ろに行が続く)、Lists (項目の後ろに項目が続く)、Trees (ノードの後ろにノードが続く) など独特な繰り返し可能なコンテンツを作成する要素のグループです。パターンを使用してこれらのパターンを要素自体に適用することによって、またはスタイル パターンを制御しやすくするためには要素内の個々の項目を適用することによって、セクション内の各要素をスタイルできます。 +- [クイック コンテンツ](/documentengine-quick-content) -- コンテンツを素早く挿入するために必要なのがシンプルなコンテンツ 要素だけの場合、クイック コンテンツ 要素が最適です。 +- [ナビゲーション ヘルパー](/documentengine-navigation-helpers) -- 500 ページのレポートをめくって、Table of Contents、Index、または Bookmarks さえ使用せずに探しているものを見つけ出すことは困難です。 + + + + + + diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/graphics/brushes.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/graphics/brushes.mdx new file mode 100644 index 0000000000..b0f1da0d8e --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/graphics/brushes.mdx @@ -0,0 +1,154 @@ +--- +title: "ブラシ" +slug: documentengine-brushes +--- + +# ブラシ + +画家がブラシを使用してキャンバスに絵の具を塗るのと全く同じように、[`Brush`](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.Brush.html) クラスを使用して、レポートのコンテンツに色やグラデーションを追加することができます。Background、Borders、 Pen など色を付けるためにブラシを使用するクラスがいくつかあります。Brush クラスは、色でコンテンツを塗りつぶす時のさまざまなオプションを提供します。 + +Brushes は Direct と Indirect の 2 タイプで提供されます。 + +- ダイレクト ブラシは、[`Rectangle`](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.Rectangle.html) などの*定義された*領域で色のブレンドとストップで特定のグラデーションを適用します。ダイレクト ブラシには、ハッチ、テクスチャ、単色も含まれます。 +- インダイレクト ブラシは、レポートを作成する時に正確な寸法が分からないレポート コンテンツ用の背景としてより一般的に使用されます。 + +Infragistics Document Engine™ がレポートを生成する時にすべてのブラシはダイレクト ブラシに最終的に変換されます。これは、いったんレポートが生成されると、すべてのコンテンツの幅と高さが決定され、ダイレクト ブラシをすべてに適用できるからです。 + +以下は事前に定義されたブラシを含むすべてのブラシのリストで、背景、形状、塗りつぶしなどに適用できます。 + +![](../../../../images/images/DocumentEngine_Brushes_01.png) + +## インダイレクト ブラシ + +[IndirectBrush](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.IndirectBrush.html) クラスは、Brush クラスから派生しており、抽象的なクラスです。つまり、直接的にインスタンス化できません。インスタンス化できる IndirectBrush クラスから派生したクラスは 3 つあります。 + +- [LinearGradientBrush](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.LinearGradientBrush.html) -- 親オブジェクトの一方の側からもう一方の側に線の形状で 2 色のグラデーションを作成するブラシ。このグラデーションは常に最初の色から 2 番目の色へのなめらかな 50% のトランジションです（これはインダイレクト ブラシであるため、線に沿ってトランジションを発生させようとする場所を指定できません）。グラデーションの角度を修正するオプションもあります。 +- [RadialGradientBrush](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.RadialGradientBrush.html) --2 色のグラデーションを作成するブラシ。最初の色は親オブジェクトの中央から開始し、2 番目の色に移行する間に完全な円形で外側に放射します。グラデーションの回転角を指定することも可能です。 +- [TextureBrush](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.TextureBrush.html) -- テクスチャ ブラシは、画像を描画サーフェイスに適用し、すべてのスペースが一杯になるまで画像を水平および垂直に繰り返します。ご使用の Windows® デスクトップはタイルの壁紙に同じ概念を使用しています。TextureBrush コンストラクターによって、水平および垂直のスケールとオフセットだけでなく、画像の角度を指定できます。 + +## ダイレクト ブラシ + +[`DirectBrush`](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.DirectBrush.html) クラスは、IndirectBrush クラスと同じように、Brush クラスから派生しており、抽象的なクラスです。Rectangle やその他の [`Shape`](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Shapes.IShapes.html) などの含むオブジェクトの境界が分かっているときには Direct ブラシを使用します。DirectBrush クラスから派生するダイレクト ブラシのタイプは 5 つあります。 + +- [HatchBrush](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.HatchBrush.html): ハッチ ブラシでハッチ デザインを作成します。HatchStyle 列挙体を使用することによってデザインを指定できます。前景色と背景色を指定することも可能です。 +- [LinearGradientDirectBrush](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.LinearGradientDirectBrush.html): ダイレクトのリニア グラデーション ブラシによって、[ColorBlend](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.ColorBlend.html) オブジェクトを使用して、2 色を超える色を使用したリニア グラデーションを作成することができます。変換マトリックスだけでなくバインディング Rectangle を指定することも必要です。色のブレンドについての詳細は、[「カラー」](/documentengine-colors)を参照してください。 +- [RadialGradientDirectBrush](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.RadialGradientDirectBrush.html): LinearGradientDirectBrush クラスと同じですが、放射状グラデーションを作成します。x および y の半径の距離だけでなく、グラデーションの中心点を指定することも可能です。 +- [SolidColorBrush](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.SolidColorBrush.html): 単色ブラシは使用可能なブラシの中で最もシンプルな形式です。ブラシの色を Color オブジェクトに設定できます。 +- [TextureDirectBrush](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.TextureDirectBrush.html): テクスチャ ダイレクト ブラシは、テクスチャ インダイレクト ブラシと全く同じように、背景として画像を適用します。違いは、ダイレクト フォームは適用できる変換マトリックスを含む点です。 + +## Brushes クラス + +[`Brushes`](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.Brushes.html) クラスは、SolidColorBrush から派生する事前に定義されたブラシのセットです。レポートのコンテンツが必要とするのがグレーの背景だけの場合には、ほとんどのレイアウト 要素の Background クラスの Brush プロパティを [`Brushes.Gray`](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.Brushes~Gray.html) プロパティに設定できます。 + +---------- + +以下のコードは複数のインダイレクト ブラシを作成し、Text 要素の背景に適用します。3 番目の段落のテキスト スタイルを設定する時に Brushes クラスの使用にも注意してください。Brushes クラスの各ブラシはシールされており、色や [`BrushType`](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.BrushType.html) を修正できないことに留意してください。 + +以下のテキストを使用して、`string1` 変数を設定します。 + +> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Donec imperdiet mattis sem.Nunc ornare elit at justo.In quam nulla, lobortis non, commodo eu, eleifend in, elit.Nulla eleifend.Nulla convallis.Sed eleifend auctor purus.Donec velit diam, congue quis, +> eleifend et, pretium id, tortor.Nulla semper condimentum justo.Etiam interdum odio ut ligula.Vivamus egestas scelerisque est. Donec accumsan.In est urna, vehicula non, nonummy sed, malesuada nec, purus.Vestibulum erat.Vivamus lacus enim, rhoncus nec, ornare sed, scelerisque varius, felis.Nam eu libero vel massa lobortis accumsan.Vivamus id orci.Sed sed lacus sit amet nibh pretium sollicitudin.Morbi urna. + +**Visual Basic の場合:** + +```vb +Imports Infragistics.Documents.Reports.Report +Imports Infragistics.Documents.Reports.Graphics +. +. +. +Dim string1 As String = "Lorem ipsum..." + +' Indirect Brushes +Dim brush1 As New LinearGradientBrush( _ + New Color(68, 115, 187), _ + Colors.White, _ + 45) +Dim brush2 As New RadialGradientBrush( _ + New Color(68, 115, 187), _ + Colors.White, _ + 45) +Dim brush3 As New TextureBrush( _ + New Image(Application.StartupPath + "..Coffee Bean.bmp")) + +' Linear gradient brush +Dim brushText As Infragistics.Documents.Reports.Report.Text.IText = section1.AddText() +brushText.Background = New Background(brush1) +brushText.Height = New RelativeHeight(33) +brushText.Borders = New Borders(New Pen(Colors.Black, 3), 5) +brushText.Margins = New Margins(5, 5) +brushText.Paddings = New Paddings(5, 5) +brushText.AddContent(string1) + +' Radial gradient brush +brushText = section1.AddText() +brushText.Background = New Background(brush2) +brushText.Height = New RelativeHeight(50) +brushText.Borders = New Borders(New Pen(Colors.Black, 3), 5) +brushText.Margins = New Margins(5, 5) +brushText.Paddings = New Paddings(5, 5) +brushText.AddContent(string1) + +' Texture brush in the background with a predefined +' solid brush on the text. +brushText = section1.AddText() +brushText.Background = New Background(brush3) +brushText.Height = New RelativeHeight(100) +brushText.Borders = New Borders(New Pen(Colors.Black, 3), 5) +brushText.Margins = New Margins(5, 5) +brushText.Paddings = New Paddings(5, 5) +brushText.Style = New Style(New Font("Verdana", 10), Brushes.White) +brushText.AddContent(string1) +``` + +**C# の場合:** + +```csharp +using Infragistics.Documents.Reports.Report; +using Infragistics.Documents.Reports.Graphics; +. +. +. +string string1 = "Lorem ipsum..."; + +// Indirect Brushes +LinearGradientBrush brush1 = new LinearGradientBrush( + new Color(68, 115, 187), + Colors.White, + 45); +RadialGradientBrush brush2 = new RadialGradientBrush( + new Color(68, 115, 187), + Colors.White, + 45); +TextureBrush brush3 = + new TextureBrush(new Image(Application.StartupPath + @"..Coffee Bean.bmp")); + +// Linear gradient brush +Infragistics.Documents.Reports.Report.Text.IText brushText = section1.AddText(); +brushText.Background = new Background(brush1); +brushText.Height = new RelativeHeight(33); +brushText.Borders = new Borders(new Pen(Colors.Black, 3), 5); +brushText.Margins = new Margins(5, 5); +brushText.Paddings = new Paddings(5, 5); +brushText.AddContent(string1); + +// Radial gradient brush +brushText = section1.AddText(); +brushText.Background = new Background(brush2); +brushText.Height = new RelativeHeight(50); +brushText.Borders = new Borders(new Pen(Colors.Black,3), 5); +brushText.Margins = new Margins(5, 5); +brushText.Paddings = new Paddings(5, 5); +brushText.AddContent(string1); + +// Texture brush in the background with a predefined +// solid brush on the text. +brushText = section1.AddText(); +brushText.Background = new Background(brush3); +brushText.Height = new RelativeHeight(100); +brushText.Borders = new Borders(new Pen(Colors.Black, 3), 5); +brushText.Margins = new Margins(5, 5); +brushText.Paddings = new Paddings(5, 5); +brushText.Style = new Style(new Font("Verdana", 10), Brushes.White); +brushText.AddContent(string1); +``` diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/graphics/canvas.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/graphics/canvas.mdx new file mode 100644 index 0000000000..f219d8dce9 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/graphics/canvas.mdx @@ -0,0 +1,292 @@ +--- +title: "キャンバス" +slug: documentengine-canvas +--- + +# キャンバス + +Canvas 要素は多目的の描画サーフェイスです。Canvas 要素を使用すると、複数の異なる方法で操作する間に膨大な形状を描画できます。Canvas 要素は、その他のレイアウト要素で遭遇する [Background](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.ICanvas~Background.html)、[Borders](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.ICanvas~Borders.html)、および [Margins](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.ICanvas~Margins.html) などのいくつかの標準的なプロパティを公開しています。また、Canvas 要素は [IGraphics](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.IGraphics.html) インターフェイスを実装しており、ここでこの要素は視覚的プロセスを生成します。IGraphics インターフェイスは System.Drawing.Graphics オブジェクトに非常に似ています。 + +![](../../../../images/images/DocumentEngine_Canvas_01.png) + +## 標準的なレイアウト 要素のプロパティ +Canvas 要素はキャンバス全体を配置する際に不可欠な標準的なレイアウト プロパティの固有のセットを公開しています。しかし実際に描画されるものに影響するプロパティがいくつかあり、 IGraphics を通して公開されます。IGraphics インターフェイスによって公開される 2 つの重要なプロパティは、[Pen](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.IGraphics~Pen.html) と [Brush](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.IGraphics~Brush.html) です（通常その要素自体によって公開される）。これらのプロパティはそれぞれ、IGraphics インターフェイスによって作成されるすべてのオブジェクトのストロークと塗りつぶしに影響します。もうひとつの理解すべき重要な概念は、すべての描画は線形で行われるこということです。つまり、形状を描画する間にペンとブラシを変更して、同じ寸法で同じ形状を異なった表現で描画することができます。 + +## IGraphics インターフェイス +IGraphics インターフェイスでは、レポートでのグラフィックスの実装のほとんどを行います。このインターフェイスを通して、ページの任意の場所にハイパーリンクを追加する、任意の形状を描画する、これらの形状を塗りつぶしたり、クリッピングする、さらには形状を拡大縮小、傾斜、変形することができます。 + +## ハイパーリンク +領域の境界四角形に左上隅の座標を指定し、次に四角形の高さと幅を指定することによって、ハイパーリンク領域を追加できます。以下のメソッドによって、キャンバスでハイパーリンクを操作することができます。 + + +| | | +| --- | --- | +| [AddHyperlinkArea](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.IGraphics~AddHyperlinkArea.html) [StartHyperlink](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.IGraphics~StartHyperlink.html) [PauseHyperlink](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.IGraphics~PauseHyperlink.html) | [ResumeHyperlink](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.IGraphics~ResumeHyperlink.html) [EndHyperlink](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.IGraphics~EndHyperlink.html) | + + +## 描画 +それぞれの `Draw` メソッドを呼び出すことによって、以下の各々の形状/描画を作成できます（たとえば、`DrawRectangle` メソッドを呼び出して矩形を描画）。これらを作成するには、必要な Point オブジェクトを渡すだけで十分です。その他の描画プロパティ（ペンやブラシなど）は、Canvas 要素自体で設定され、すべての描画に影響します。 + + +| | | +| --- | --- | +| Arc Bezier Chord Closed Curve Curve Ellipse Image | Line Pie Polygon Rectangle Rounded Rectangle Spacing String | + + +## 塗りつぶしとクリッピング +以下の形状のそれぞれで領域を塗りつぶすまたはクリッピングすることができます。Canvas は Brush プロパティを使用して形状を塗りつぶします。領域をクリッピングするために形状を使用する場合、クリッピングの形状の境界矩形内にあるクリッピングの形状の背後の形状の部分のみを見ることができます。形状のそれぞれの Clip メソッドまたは Fill メソッド（たとえば矩形のクリッピング領域を形成するには `ClipRectangle`、矩形を塗りつぶすには `FillRectangle`）を使用して、形状でそれぞれのアクションを実行します。 + + +| | | +| --- | --- | +| Arc Bezier Chord Closed Curve Ellipse | Pie Polygon Rectangle Rounded Rectangle | + + +以下のコードは、Canvas 要素をセクションに追加し、次にいくつかのスタイルを使用していくつかの形状を描画します。 + +1. **キャンバスをセクションに追加します。** + + **Visual Basic の場合:** + +```vb + Imports Infragistics.Documents.Reports.Report + Imports Infragistics.Documents.Reports.Graphics + . + . + . + ' Add a canvas to the section. + Dim canvas1 As Infragistics.Documents.Reports.Report.ICanvas = section1.AddCanvas() + canvas1.Borders = New Borders(Pens.Black, 5) + canvas1.Margins.Vertical = 5 + canvas1.Paddings.All = 5 + canvas1.Background = New Background(New SolidColorBrush(New Color(240, 240, 220))) +``` + + **C# の場合:** + +```csharp + using Infragistics.Documents.Reports.Report; + using Infragistics.Documents.Reports.Graphics; + . + . + . + // Add a canvas to the section. + Infragistics.Documents.Reports.Report.ICanvas canvas1 = section1.AddCanvas(); + canvas1.Borders = new Borders(Pens.Black, 5); + canvas1.Margins.Vertical = 5; + canvas1.Paddings.All = 5; + canvas1.Background = new Background(new SolidColorBrush(new Color(240, 240, 220))); +``` + +2. **System.Drawing.Graphics オブジェクトを作成し、矩形を作成します。** + + **Visual Basic の場合:** + +```vb + ' Create a System Graphics object and use it + ' to draw a rectangle + canvas1.CreateGraphics().DrawRectangle( _ + System.Drawing.Pens.Green, _ + New System.Drawing.Rectangle(10, 10, 20, 20)) +``` + + **C# の場合:** + +```csharp + // Create a System Graphics object and use it + // to draw a rectangle + canvas1.CreateGraphics().DrawRectangle + ( + System.Drawing.Pens.Green, + new System.Drawing.Rectangle(10, 10, 20, 20) + ); +``` + +3. **四角形を描画します。** + + **Visual Basic の場合:** + +```vb + ' Draw a Rectangle with a Hyperlink inside. + canvas1.StartHyperlink(1, 0, 10) + canvas1.Pen = New Pen(Colors.Red, 5) + canvas1.Brush = New SolidColorBrush(New Color(255, 240, 240)) + canvas1.DrawRectangle(50, 50, 150, 100, PaintMode.FillStroke) + canvas1.AddHyperlinkArea(50, 50, 150, 100) + canvas1.EndHyperlink() + + ' Add text to the rectangle (more accurately, overtop the rectangle). + canvas1.Font = New Font("Times New Roman", 18, FontStyle.Italic) + canvas1.Brush = Brushes.BlueViolet + canvas1.DrawString(70, 90, "Go to page 2") +``` + + **C# の場合:** + +```csharp + // Draw a Rectangle with a Hyperlink inside. + canvas1.StartHyperlink(1, 0, 10); + canvas1.Pen = new Pen(Colors.Red, 5); + canvas1.Brush = new SolidColorBrush(new Color(255, 240, 240)); + canvas1.DrawRectangle(50, 50, 150, 100, PaintMode.FillStroke); + canvas1.AddHyperlinkArea(50, 50, 150, 100); + canvas1.EndHyperlink(); + + // Add text to the rectangle (more accurately, overtop the rectangle). + canvas1.Font = new Font("Times New Roman", 18, FontStyle.Italic); + canvas1.Brush = Brushes.BlueViolet; + canvas1.DrawString(70, 90, "Go to page ¹2"); +``` + +4. **緑の斜めの線を描画します。** + + **Visual Basic の場合:** + +```vb + ' Draw a green line 5px thick. + canvas1.Pen = New Pen(Colors.Green, 5) + canvas1.DrawLine(220, 50, 320, 150) +``` + + **C# の場合:** + +```csharp + // Draw a green line 5px thick. + canvas1.Pen = new Pen(Colors.Green, 5); + canvas1.DrawLine(220, 50, 320, 150); +``` + +5. **楕円形を描画します。** + + **Visual Basic の場合:** + +```vb + ' Draw an ellipse and outline it with a blue, 5px line + ' and fill it with a light blue color. + canvas1.Pen = New Pen(Colors.Blue, 5) + canvas1.Brush = New SolidColorBrush(New Color(240, 240, 255)) + canvas1.DrawEllipse(340, 50, 150, 100, PaintMode.FillStroke) +``` + + **C# の場合:** + +```csharp + // Draw an ellipse and outline it with a blue, 5px line + // and fill it with a light blue color. + canvas1.Pen = new Pen(Colors.Blue, 5); + canvas1.Brush = new SolidColorBrush(new Color(240, 240, 255)); + canvas1.DrawEllipse(340, 50, 150, 100, PaintMode.FillStroke); +``` + +6. **Canvas のペンとブラシのスタイルを変更します。** + + **Visual Basic の場合:** + +```vb + ' Change the Canvas' pen and brush. + canvas1.Pen = New Pen(Colors.DarkBlue, 5, DashStyle.DashDot) + canvas1.Brush = New LinearGradientBrush(Colors.Yellow, Colors.Green, 45.0F) +``` + + **C# の場合:** + +```csharp + // Change the Canvas' pen and brush. + canvas1.Pen = new Pen(Colors.DarkBlue, 5, DashStyle.DashDot); + canvas1.Brush = new LinearGradientBrush(Colors.Yellow, Colors.Green, 45F); +``` + +7. **複合した形状を作成します。** + + **Visual Basic の場合:** + +```vb + ' Because both shapes are being created as one (using + ' StartShape and EndShape), the intersection of the + ' two shapes is considered not a part of the shape + ' and not filled in. Also, the gradient will traverse + ' the entire shape, not both individually. + canvas1.StartShape(PaintMode.FillStroke) + canvas1.FillRectangle(120, 200, 200, 200) + canvas1.DrawEllipse(220, 250, 200, 200) + canvas1.EndShape() +``` + + **C# の場合:** + +```csharp + // Because both shapes are being created as one (using + // StartShape and EndShape), the intersection of the + // two shapes is considered not to be a part of the shape + // and not filled in. Also, the gradient will traverse + // the entire shape, not both individually. + canvas1.StartShape(PaintMode.FillStroke); + canvas1.FillRectangle(120, 200, 200, 200); + canvas1.DrawEllipse(220, 250, 200, 200); + canvas1.EndShape(); +``` + +8. **矩形をもうひとつ作成します。** + + **Visual Basic の場合:** + +```vb + ' Draw another rectangle with a different pen and brush. + canvas1.Pen = New Pen(Colors.Red, 5, DashStyle.DashDotDot) + canvas1.Brush = New HatchBrush(HatchStyle.Cross, Colors.Red, Colors.White) + canvas1.DrawRectangle(50, 500, 150, 100, PaintMode.FillStroke) +``` + + **C# の場合:** + +```csharp + // Draw another rectangle with a different pen and brush. + canvas1.Pen = new Pen(Colors.Red, 5, DashStyle.DashDotDot); + canvas1.Brush = new HatchBrush(HatchStyle.Cross, Colors.Red, Colors.White); + canvas1.DrawRectangle(50, 500, 150, 100, PaintMode.FillStroke); +``` + +9. **線をもう 1 本作成します。** + + **Visual Basic の場合:** + +```vb + ' Draw another line, this time with a different dash style. + canvas1.Pen = New Pen(Colors.Green, 5, DashStyle.DashDot) + canvas1.DrawLine(220, 500, 320, 600) +``` + + **C# の場合:** + +```csharp + // Draw another line, this time with a different dash style. + canvas1.Pen = new Pen(Colors.Green, 5, DashStyle.DashDot); + canvas1.DrawLine(220, 500, 320, 600); +``` + +10. **楕円形をもうひとつ作成します。** + + **Visual Basic の場合:** + +```vb + ' Draw another ellipse with a different pen and brush. + canvas1.Pen = New Pen(Colors.Blue, 5, DashStyle.Dash) + canvas1.Brush = _ + New HatchBrush(HatchStyle.DiagonalBrick, Colors.Blue, Colors.White) + canvas1.DrawEllipse(340, 500, 150, 100, PaintMode.FillStroke) +``` + + **C# の場合:** + +```csharp + // Draw another ellipse with a different pen and brush. + canvas1.Pen = new Pen(Colors.Blue, 5, DashStyle.Dash); + canvas1.Brush = + new HatchBrush(HatchStyle.DiagonalBrick, Colors.Blue, Colors.White); + canvas1.DrawEllipse(340, 500, 150, 100, PaintMode.FillStroke); +``` + + + + + diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/graphics/colors.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/graphics/colors.mdx new file mode 100644 index 0000000000..8a2d58266d --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/graphics/colors.mdx @@ -0,0 +1,169 @@ +--- +title: "色" +slug: documentengine-colors +--- + +# 色 + +[Color](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.Color.html) クラスによって、ほとんど苦労せずに任意の RGB カラーをレポート コンテンツに追加できます。Color クラスは複数のシナリオを説明するために複数のコンストラクターがあります。Color クラスの新しいインスタンスを初期化するよりもむしろ、使用可能な138 の事前に定義された色を含む [Colors](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.Colors.html) オブジェクトにアクセスすることも可能です。 + +色の使用は、[ColorBlend](/documentengine-brushes) クラスを使用して[ダイレクト グラデーション ブラシ](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.ColorBlend.html)のためにカスタムのカラー ブレンドを作成すると面白くなってきます。ColorBlend クラスは線の上の位置にマップされた色のコレクションです。これは別名 [ColorBlendEntry](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.ColorBlendEntry.html) として知られています。各 ColorBlendEntry には、Color に設定可能な [Color](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.ColorBlendEntry~Color.html) プロパティと、グラデーションのパスに沿って位置を表すフロートに設定可能な [Position](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.ColorBlendEntry~Position.html) プロパティがあります。Position プロパティは、0F から 1.0F のスケール上の値を受け付けます。 + +![](../../../../images/images/DocumentEngine_Colors_01.png) + +以下のコードは、Color クラスのさまざまなコンストラクターを通して複数の色をインスタンス化します。次にコードは `ColorBlend` オブジェクト、矩形、およびダイレクトの線形グラデーション ブラシを定義します。次にこれらのオブジェクトを使用して、Canvas に矩形を描画します。 + +1. **赤、緑、青の 3 色を定義します。** + + **Visual Basic の場合:** + +```vb + Imports Infragistics.Documents.Reports.Report + Imports Infragistics.Documents.Reports.Graphics + . + . + . + ' Create a new System color + Dim red As New Color(System.Drawing.Color.Red) + ' Create a color from RGB values + Dim green As New Color(0, 255, 0) + ' Create a predefined color from the Colors class + Dim blue As Color = Colors.Blue +``` + + **C# の場合:** + +```csharp + using Infragistics.Documents.Reports.Report; + using Infragistics.Documents.Reports.Graphics; + . + . + . + // Create a new System color + Color red = new Color(System.Drawing.Color.Red); + // Create a color from RGB values + Color green = new Color(0, 255, 0); + // Create a predefined color from the Colors class + Color blue = Colors.Blue; +``` + +2. **カスタムのカラー ブレンドを作成します。** + + **Visual Basic の場合:** + +```vb + ' Create a new blend of colors + Dim colorBlend As New ColorBlend() + + ' Add seven colors to the ColorBlend. Each ColorBlendEntry + ' constructor accepts a color and a float representing the + ' location on the line. + colorBlend.Add(New ColorBlendEntry(red, 0.0F)) + colorBlend.Add(New ColorBlendEntry(Colors.Orange, 0.15F)) + colorBlend.Add(New ColorBlendEntry(Colors.Yellow, 0.3F)) + colorBlend.Add(New ColorBlendEntry(green, 0.45F)) + colorBlend.Add(New ColorBlendEntry(blue, 0.6F)) + colorBlend.Add(New ColorBlendEntry(Colors.Indigo, 0.75F)) + colorBlend.Add(New ColorBlendEntry(Colors.Violet, 0.9F)) +``` + + **C# の場合:** + +```csharp + // Create a new blend of colors + ColorBlend colorBlend = new ColorBlend(); + + // Add seven colors to the ColorBlend. Each ColorBlendEntry + // constructor accepts a color and a float representing the + // location on the line. + colorBlend.Add(new ColorBlendEntry(red, 0F)); + colorBlend.Add(new ColorBlendEntry(Colors.Orange, .15F)); + colorBlend.Add(new ColorBlendEntry(Colors.Yellow, .3F)); + colorBlend.Add(new ColorBlendEntry(green, .45F)); + colorBlend.Add(new ColorBlendEntry(blue, .60F)); + colorBlend.Add(new ColorBlendEntry(Colors.Indigo, .75F)); + colorBlend.Add(new ColorBlendEntry(Colors.Violet, .9F)); +``` + +3. **矩形を定義します。** + + **Visual Basic の場合:** + +```vb + ' Create a rectangle that will bind the linear gradient. + Dim rect As New Rectangle(New Point(0, 100), New Size(600, 200)) +``` + + **C# の場合:** + +```csharp + // Create a rectangle that will bind the linear gradient. + Rectangle rect = new Rectangle(new Point(0,100), new Size(600, 200)); +``` + +4. **LinearGradientDirectBrush を定義します。** + + **Visual Basic の場合:** + +```vb + ' Create a direct linear gradient brush that uses the ColorBlend. + Dim linearDirect As New LinearGradientDirectBrush( _ + colorBlend, rect, New Matrix()) +``` + + **C# の場合:** + +```csharp + // Create a direct linear gradient brush that uses the ColorBlend. + LinearGradientDirectBrush linearDirect = + new LinearGradientDirectBrush(colorBlend, rect, new Matrix()); +``` + +5. **キャンバスを作成し、矩形を描画します。** + + **Visual Basic の場合:** + +```vb + Dim canvas As ICanvas = section1.AddCanvas() + + ' Set a few properties on the canvas to help is stand out more. + canvas.Height = New RelativeHeight(100) + canvas.Width = New RelativeWidth(100) + canvas.Borders = New Borders(New Pen(Colors.Black, 3), 5) + canvas.Background = New Background(Brushes.GhostWhite) + + ' If the PaintMode is Fill, the canvas' brush is used; + ' if the PaintMode is Stroke, the pen is used. FillStroke + ' is a combination of both. + canvas.Pen = New Pen(Colors.Black) + ' Set the canvas' brush to the direct linear gradient + ' created earlier. + canvas.Brush = linearDirect + + ' Draw the rectangle. + canvas.DrawRectangle(0, 100, 600, 200, PaintMode.Fill) +``` + + **C# の場合:** + +```csharp + // Add a canvas to the section. + ICanvas canvas = section1.AddCanvas(); + + // Set a few properties on the canvas to help it stand out more. + canvas.Height = new RelativeHeight(100); + canvas.Width = new RelativeWidth(100); + canvas.Borders = new Borders(new Pen(Colors.Black, 3), 5); + canvas.Background = new Background(Brushes.GhostWhite); + + // If the PaintMode is Fill, the canvas' brush is used; + // if the PaintMode is Stroke, the pen is used. FillStroke + // is a combination of both. + canvas.Pen = new Pen(Colors.Black); + // Set the canvas' brush to the direct linear gradient + // created earlier. + canvas.Brush = linearDirect; + + // Draw the rectangle. + canvas.DrawRectangle(0, 100, 600, 200, PaintMode.Fill); +``` diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/graphics/fonts.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/graphics/fonts.mdx new file mode 100644 index 0000000000..66986891b2 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/graphics/fonts.mdx @@ -0,0 +1,111 @@ +--- +title: "フォント" +slug: documentengine-fonts +--- + +# フォント + +テキストがなければレポートを書くことができません。したがってフォントはレポートを記述する上で不可欠な要素です。もちろん、テキストにすべてのデフォルト設定を使用することは可能ですが、これらのデフォルトもフォントを使用します（デフォルトのフォントは Arial、12 pt です）。フォントを定義するために必要なのは、名前とサイズだけです。[`FontStyle`](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.Font~_ctor.html) やフォントの位置など、 (システムの Fonts フォルダーにない場合に) フォントを定義する時にその他のオプションも提供する [Font](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.FontStyle.html) コンストラクターには複数のオーバーロードがあります。プロパティによってフォントに追加できるスタイルは多数あり、以下に例を示します。 + +- [太字](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.Font~Bold.html) +- [二重取り消し線](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.Font~DoubleStrikeout.html) +- [二重下線](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.Font~DoubleUnderline.html) +- [斜体](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.Font~Italic.html) +- [取り消し線](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.Font~Strikeout.html) +- [下線](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.Font~Underline.html) + +これらの各スタイルは、FontStyle 列挙体でも使用可能で、[Style](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.Font~Style.html) プロパティを設定する時に使用されます。[Fonts](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.Fonts.html) クラスを使用して、事前に定義されたフォントとスタイルのコレクションにアクセスすることも可能です。Fonts クラスの各フォントはシールされており、スタイルを修正できないことに留意してください（たとえば、Bold や Underline を追加）。 + +![](../../../../images/images/DocumentEngine_Fonts_01.png) + +------ + +以下のコード例では、2 つのフォントを定義して Text 要素でこれらのフォントを使用する Font オブジェクトの一般的な使用例を示しています。 + +1. **Font オブジェクトを定義します。** + + **Visual Basic の場合:** + +```vb + Imports Infragistics.Documents.Reports.Report + Imports Infragistics.Documents.Reports.Graphics + . + . + . + ' Define two font objects. + Dim verdanaBigItalic As New Font("Verdana", 18, FontStyle.Italic) + Dim verdanaSmallBold As New Font("Verdana", 10, FontStyle.Bold) +``` + + **C# の場合:** + +```csharp + using Infragistics.Documents.Reports.Report; + using Infragistics.Documents.Reports.Graphics; + . + . + . + // Define two font objects. + Font verdanaBigItalic = new Font("Verdana", 18, FontStyle.Italic); + Font verdanaSmallBold = new Font("Verdana", 10, FontStyle.Bold); +``` + +2. **3 つの Text 要素をメインのセクション（section1）に追加して、スタイルを設定します。** + + **Visual Basic の場合:** + +```vb + ' Add a new Text element to the section and store the + ' reference fontText. Then set the style using the font + ' created earlier and use a black brush. + Dim fontText As Infragistics.Documents.Reports.Report.Text.IText = section1.AddText() + fontText.Margins = New Margins(0, 3) + fontText.Style = _ + New Infragistics.Documents.Reports.Report.Text.Style(verdanaBigItalic, Brushes.Black) + fontText.AddContent("This font is Verdana, 18 pt., and Italic") + + ' Add another text element. + fontText = section1.AddText() + fontText.Margins = New Margins(0, 3) + fontText.Style = _ + New Infragistics.Documents.Reports.Report.Text.Style(verdanaSmallBold, Brushes.Black) + fontText.AddContent("This font is Verdana, 10 pt., and Bold") + + ' Add another text element; this time using a predefined font + ' and changing the color to red. + fontText = section1.AddText() + fontText.Margins = New Margins(0, 3) + fontText.Style = _ + New Infragistics.Documents.Reports.Report.Text.Style( _ + Fonts.TimesNewRomanBold, Brushes.Red) + fontText.AddContent("This font is a predefined font: Fonts.TimesNewRomanBold") +``` + + **C# の場合:** + +```csharp + // Add a new Text element to the section and store the + // reference fontText. Then set the style using the font + // created earlier and use a black brush. + Infragistics.Documents.Reports.Report.Text.IText fontText = section1.AddText(); + fontText.Margins = new Margins(0, 3); + fontText.Style = + new Infragistics.Documents.Reports.Report.Text.Style(verdanaBigItalic, Brushes.Black); + fontText.AddContent("This font is Verdana, 18 pt., and Italic"); + + // Add another text element. + fontText = section1.AddText(); + fontText.Margins = new Margins(0, 3); + fontText.Style = + new Infragistics.Documents.Reports.Report.Text.Style(verdanaSmallBold, Brushes.Black); + fontText.AddContent("This font is Verdana, 10 pt., and Bold"); + + // Add another text element; this time using a predefined font + // and changing the color to red. + fontText = section1.AddText(); + fontText.Margins = new Margins(0, 3); + fontText.Style = + new Infragistics.Documents.Reports.Report.Text.Style( + Fonts.TimesNewRomanBold, Brushes.Red); + fontText.AddContent("This font is a predefined font: Fonts.TimesNewRomanBold"); +``` diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/graphics/pens.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/graphics/pens.mdx new file mode 100644 index 0000000000..73ad074c11 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/graphics/pens.mdx @@ -0,0 +1,66 @@ +--- +title: "ペン" +slug: documentengine-pens +--- + +# ペン + +Pens は線の特徴を定義するために使用されます。Borders、Shapes、Rectangles、および Canvas 要素によって描画されるいくつかの形状を含む、Infragistics Document Engine™ の複数の特性の線を見つけることができます。ペンが操作できる線の特徴は以下のとおりです。 + +- 色 +- 幅 +- 破線のスタイル +- ライン キャップ +- ライン ジョイン +- マイター リミット + +事前に定義したペンのコレクションである、[Pens](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.Pens.html) クラスを使用して、デフォルトのスタイル属性を持つ色の付いたペンを素早く線に追加することも可能です。Pens クラスの各ペンは 1 ピクセル幅の単色のペンです。![](../../../../images/images/DocumentEngine_Pens_01.png) + + +以下のコードを使用して、2 つの Pen オブジェクトを定義し、Text 要素の境界線を描画するために使用します。3 番目の Text 要素は事前に定義したペンを使用して境界線を描画します。 + +以下のテキストを使用して、`string1` 変数を設定します。 + +> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Donec imperdiet mattis sem.Nunc ornare elit at justo.In quam nulla, lobortis non, commodo eu, eleifend in, elit.Nulla eleifend.Nulla convallis.Sed eleifend auctor purus.Donec velit diam, congue quis, eleifend et, pretium id, tortor.Nulla semper condimentum justo.Etiam interdum odio ut ligula.Vivamus egestas scelerisque est. Donec accumsan.In est urna, vehicula non, nonummy sed, malesuada nec, purus.Vestibulum erat.Vivamus lacus enim, rhoncus nec, ornare sed, scelerisque varius, felis.Nam eu libero vel massa lobortis accumsan.Vivamus id orci.Sed sed lacus sit amet nibh pretium sollicitudin.Morbi urna. + +**C# の場合:** + +```csharp +using Infragistics.Documents.Reports.Report; +using Infragistics.Documents.Reports.Graphics; +. +. +. +string string1 = "Lorem ipsum..."; + +// Define two Pen objects +Pen pen1 = new Pen(Colors.Black, 3, DashStyle.Solid); +Pen pen2 = new Pen(Colors.Red, 5, DashStyle.Dot); + +// The pen used for the border in this Text element +// will be solid, black, 3px. +Infragistics.Documents.Reports.Report.Text.IText penText1 = section1.AddText(); +penText1.Paddings = new Paddings(3, 3); +penText1.Margins = new Margins(3, 3); +penText1.Borders = new Borders(pen1); +penText1.Background = new Background(Brushes.WhiteSmoke); +penText1.AddContent(string1); + +// The pen used for the border in this Text element +// will be dotted, red, 5px. +penText1 = section1.AddText(); +penText1.Paddings = new Paddings(3, 3); +penText1.Margins = new Margins(3, 3); +penText1.Borders = new Borders(pen2); +penText1.Background = new Background(Brushes.WhiteSmoke); +penText1.AddContent(string1); + +// The pen used for the border in this Text element +// is a predefined, green pen. +penText1 = section1.AddText(); +penText1.Paddings = new Paddings(3, 3); +penText1.Margins = new Margins(3, 3); +penText1.Borders = new Borders(Pens.Green); +penText1.Background = new Background(Brushes.WhiteSmoke); +penText1.AddContent(string1); +``` diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/graphics/report-graphics.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/graphics/report-graphics.mdx new file mode 100644 index 0000000000..2c121042c3 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/graphics/report-graphics.mdx @@ -0,0 +1,23 @@ +--- +title: "レポート グラフィックス" +slug: documentengine-report-graphics +--- + +# レポート グラフィックス + +レポート グラフィックスは、Brushes、Colors、Fonts、および Images などのいくつかのグラフィックス要素によってレポートを魅力的なものにします。レポート グラフィックスを使用して、レイアウト 要素を強化します。たとえば、ブラシとペンを使用して、要素の背景と境界線にそれぞれ色を付けます。Tables、Lists、Text などの[パターン コンテンツ](/documentengine-pattern-content)にカラーを追加してフォントを変更することも可能です。任意のレイアウトまたはコンテンツ 要素はレポート グラフィックスによって何らかの影響を受ける場合があります。 + +レポート グラフィックスの詳細は以下のリンクをクリックしてください。 + +- [ブラシ](/documentengine-brushes) +- [キャンバス](/documentengine-canvas) +- [色](/documentengine-colors) +- [フォント](/documentengine-fonts) +- [ペン](/documentengine-pens) +- [図形](/documentengine-shapes) + + + + + + diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/graphics/shapes.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/graphics/shapes.mdx new file mode 100644 index 0000000000..aad45306bf --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/graphics/shapes.mdx @@ -0,0 +1,208 @@ +--- +title: "図形" +slug: documentengine-shapes +--- + +# 図形 +Site 要素は、オブジェクトを回転するだけでなく、バインディングしている矩形の任意の場所にオブジェクトを配置できる魅力的な要素です。Site 要素が非常に役に立つ要素となっているもうひとつの特徴は [Shapes](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Shapes.IShapes.html) ファクトリです。その名前が示すように、Shapes ファクトリによって膨大な種類の形状を作り出してそれらを Site 要素に追加することができます。 + +その形状固有のメソッドを呼び出すことによって、Shapes オブジェクトのそれぞれの形状に簡単にアクセスできます (たとえば、矩形を追加するためには、[AddRetangle](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Shapes.IShapes~AddRectangle.html) メソッドを呼び出します)。このメソッドは、新たに作成された形状への参照を返すので、その参照を新しい形状オブジェクトに設定することができます。 + +以下は、Site 要素に追加できる形状のリストです。 + +* **Arc** -- 円弧に開始角度と終了角度を提供し、円弧が残りの作業を実行します。左上隅の x 座標と ｙ 座標だけでなく、境界矩形の高さと幅を指定することができます。 +* **Ellipse** -- 楕円形は矩形とほとんど同じように作成されます。サイズと位置を決定するために ｘ 座標と y 座標だけでなく境界矩形の高さと幅を提供します。これで楕円形は矩形に基づいて作成され自動的に形成されます。 +* **Label** -- サイトに配置するためにフォントの境界四角形の左上隅の x 座標と y 座標を指定できます。[Font](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Shapes.ILabel~Font.html) プロパティと [Text](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Shapes.ILabel~Text.html) プロパティが設定されると、矩形のサイズが自動的に決定されます。 +* **Line**-- 線には、線の開始点を決定するための X1 および Y1 座標と、終点を決定するための X2 および Y2 座標があります。線の外観を修正するためにブラシを指定することも可能です。 +* **Path** -- パスには、完全にカスタムな形状を作成するために役立ついくつかのメソッドがあります。パスは特定の方向に紙の上でペンを移動させることであると考えることができます。 + * **Move To** -- [MoveTo](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Shapes.IPath~MoveTo.html) メソッドは、アクティブな点を指定した座標に移動します。このメソッドは実際には何も描画しません。ペンと紙に例えると、これは紙からペンを離して、ペンを新しい点に移動し、1 本の線を書くことなく紙にペンを戻すことになります。 + * **Line To** -- [LineTo](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Shapes.IPath~LineTo.html) メソッドは、開始座標から終了座標に線を描画します。 + * **Curve To** -- [CurveTo](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Shapes.IPath~CurveTo.html) メソッドは、開始座標から線を描画し、中間座標を使用して曲線を作成し、終了座標で終了します。 + * **Close Path** -- [ClosePath](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Shapes.IPath~ClosePath.html) メソッドでパスを手動で閉じることができます。 + + 呼び出す各メソッドは通常、現在呼び出されているメソッドの開始座標として、前のメソッドの終了座標を渡します。これは連続パスを作成し、最終的には形状を定義します。パスを塗りつぶすためにブラシを、パスを描画するためにペンを指定することもできます。 + +* **Pie** -- パイは開始角度と終了角度を提供する必要がある点で円弧に似ています。パイと円弧の違いは、円弧は曲線を作成するだけなのに対して、パイはパイ全体またはパイ スライスを作成します。 +* **Polygon** -- [Polygon](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Shapes.IPolygon.html) 形状で必要な数の辺を使用して、多角形を作成することができます。ポリゴンを定義するために、[Points](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Shapes.IPolygon~Points.html) プロパティを [Point](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Graphics.Point.html) オブジェクトの配列に設定します。ポリゴンは点を提供する順序で描画されます。したがって、アウトラインをトレースする場合と同じように点を提供する時には注意して、連続して描画してください。 +* **Polyline** -- ポリラインは、辿る線の Point オブジェクトの配列も提供する点で多角形と非常に似ています。 +* **Rectangle** -- サイズと位置を決定するために ｘ 座標と y 座標だけでなく境界矩形の高さと幅を提供します。矩形を塗りつぶすためにブラシを、アウトラインを描画するためにペンを指定することもできます。[Radius](Infragistics.Web.Documents.Reports~Infragistics.Documents.Reports.Report.Shapes.IRectangle~Radius.html) プロパティによって、矩形の角を丸めることができます。 + +![](../../../../images/images/DocumentEngine_Shapes_01.png) + +以下のコードは、矩形、楕円形、ポリゴン、パイ、パスを Site 要素に追加します。このトピックは、Report 要素を定義済みでこの要素に少なくともひとつの Section 要素を追加してあることを前提とします。詳細は、[Report](/documentengine-report) および [Section](/documentengine-section) を参照してください。 + +1. **Site 要素をセクションに追加します。** + + **C# の場合:** + +```csharp + using Infragistics.Documents.Reports.Report; + using Infragistics.Documents.Reports.Graphics; + . + . + . + // Add a new Site element to the section. + Infragistics.Documents.Reports.Report.ISite shapesSite = section1.AddSite(); +``` + +2. **矩形を Site 要素に追加します。** + + **C# の場合:** + +```csharp + // Add a new Rectangle to the Site's shape factory. + Infragistics.Documents.Reports.Report.Shapes.IRectangle rectangle = shapesSite.Shapes.AddRectangle(); + // Fill the rectangle with the color green. + rectangle.Brush = Brushes.Green; + // The outline of the rectangle will be black. + rectangle.Pen = Pens.Black; + // Set the height and width of the rectangle. + rectangle.Height = 100; + rectangle.Width = 400; + // Round the corners of the rectangle. + rectangle.Radius = 5; + // Place the rectangle on the Site at the coordinates 0,0. + // This will place the rectangle's upper-left point here. + // The same goes for all other binding rectangles of shapes. + rectangle.X = 0; + rectangle.Y = 0; +``` + +3. **楕円形を Site 要素に追加します。** + + **C# の場合:** + +```csharp + // Add a new Ellipse to the Site's shape factory. + Infragistics.Documents.Reports.Report.Shapes.IEllipse ellipse = shapesSite.Shapes.AddEllipse(); + // Fill the ellipse with the color red and color the + // borders black. + ellipse.Brush = Brushes.Red; + ellipse.Pen = Pens.Black; + // Set the height and the width of the binding rectangle. + ellipse.Height = 100; + ellipse.Width = 400; + // Place the ellipse's binding rectangle's upper-left + // corner at the coordinates 0,150. + ellipse.X = 0; + ellipse.Y = 150; +``` + +4. **6 辺のポリゴン（六角形）を Site 要素に追加します。** + + **C# の場合:** + +```csharp + // Add a new Polygon to the Site's shape factory. + Infragistics.Documents.Reports.Report.Shapes.IPolygon polygon = shapesSite.Shapes.AddPolygon(); + // Fill the polygon with the color blye and color the + // borders black. + polygon.Brush = Brushes.Blue; + polygon.Pen = Pens.Black; + // Create a six-sided polygon (hexagon) by supplying + // six points. The polygon will be drawn from each + // point consecutively, so make sure you draw the + // border in the correct order (draw an outline). + polygon.Points = new Point[6] + { + new Point(0,325), + new Point(200, 300), + new Point(400, 325), + new Point(400, 375), + new Point(200, 400), + new Point(0,375) + }; +``` + +5. **パイ（パックマン）を Site 要素に追加します。** + + **C# の場合:** + +```csharp + // Add a new Pie to the Site's shape factory. + Infragistics.Documents.Reports.Report.Shapes.IPie pie = shapesSite.Shapes.AddPie(); + // Fill the pie with the color yellow and color the + // border black. + pie.Brush = Brushes.Yellow; + pie.Pen = Pens.Black; + // Begin the Pie at a 45 degree angle and end it at + // a 325 degree angle. + pie.StartAngle = 45; + pie.EndAngle = 325; + // Set the height and width of the pie. + pie.Height = 100; + pie.Width = 100; + // Place the upper-left corner of the pie's binding + // rectangle at coordinates 0,450. + pie.X = 0; + pie.Y = 450; + + // Give Pacman an eye. + Infragistics.Documents.Reports.Report.Shapes.IEllipse ellipse2 = shapesSite.Shapes.AddEllipse(); + ellipse2.Height = 10; + ellipse2.Width = 10; + ellipse2.Brush = Brushes.Black; + ellipse2.X = 45; + ellipse2.Y = 465; +``` + +6. **パス（ピンキー）を Site 要素に追加します。** + + **C# の場合:** + +```csharp + // Add a path to the Site element. + Infragistics.Documents.Reports.Report.Shapes.IPath path = shapesSite.Shapes.AddPath(); + // The inside of the path will be pink while the + // path itself is drawn black. + path.Brush = Brushes.Pink; + path.Pen = Pens.Black; + // Start the path at these coordinates. + path.MoveTo(200, 535); + // draw a line to these coordinates. + path.LineTo(200, 500); + // Curve from the previous coordinates to 250, 450. + path.CurveTo(200, 500, 200, 450, 250, 450); + // Curve from the previous coordinates to 300, 500. + path.CurveTo(250, 450, 300, 450, 300, 500); + // Draw several lines. + path.LineTo(300, 535); + path.LineTo(280, 550); + path.LineTo(270, 535); + path.LineTo(260, 550); + path.LineTo(250, 535); + path.LineTo(240, 550); + path.LineTo(230, 535); + path.LineTo(220, 550); + path.LineTo(200, 535); + + // Give pinky a left eye. + Infragistics.Documents.Reports.Report.Shapes.IEllipse ellipse3 = shapesSite.Shapes.AddEllipse(); + ellipse3.Brush = Brushes.White; + ellipse3.Height = 15; + ellipse3.Width = 10; + ellipse3.X = 225; + ellipse3.Y = 475; + + ellipse3 = shapesSite.Shapes.AddEllipse(); + ellipse3.Brush = Brushes.Blue; + ellipse3.Height = 5; + ellipse3.Width = 5; + ellipse3.X = 225; + ellipse3.Y = 480; + + // give pinky a right eye. + Infragistics.Documents.Reports.Report.Shapes.IEllipse ellipse4 = shapesSite.Shapes.AddEllipse(); + ellipse4.Brush = Brushes.White; + ellipse4.Height = 15; + ellipse4.Width = 10; + ellipse4.X = 260; + ellipse4.Y = 475; + + ellipse4 = shapesSite.Shapes.AddEllipse(); + ellipse4.Brush = Brushes.Blue; + ellipse4.Height = 5; + ellipse4.Width = 5; + ellipse4.X = 260; + ellipse4.Y = 480; +``` diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/writing-reports.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/writing-reports.mdx new file mode 100644 index 0000000000..86ad871f7d --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/document-engine/writing/writing-reports.mdx @@ -0,0 +1,19 @@ +--- +title: "レポートの記述" +slug: documentengine-writing-reports +--- + +# レポートの記述 + +レポートを書くときに、使用する主要な要素は 2 タイプあります。最初のタイプ、レイアウトおよびコンテンツ 要素によって、レポートの論理的フローを設定し、どのようなコンテンツが必要であろうとコンテンツを追加することができます。2 番目のタイプの要素はグラフィカル 要素です。グラフィック 要素はむしろサポート 要素に近い要素です。色、形状、フォントを追加することでレポートを強化します。 + +レポートをデザインするために使用できるさまざまな要素を検討するために、以下のリンクをクリックしてください。 + +- [レポート要素](/documentengine-report-elements) +- [レポート グラフィックス](/documentengine-report-graphics) + + + + + + diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/api-overview.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/api-overview.mdx new file mode 100644 index 0000000000..63584667fc --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/api-overview.mdx @@ -0,0 +1,19 @@ +--- +title: "API の概要" +slug: excelengine-api-overview +--- + +# API の概要 +このセクションではコード ライブラリに関連する各名前空間を示します。また、このコード ライブラリでプログラミングをする時に使用するいくつかのキー クラスも示します。このページの名前空間とクラスは当社の API マニュアルに直接リンクします。 + + +| | | +| --- | --- | +| Infragistics Excel Engine 名前空間: [Infragistics.Documents.Excel](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel_namespace.html) | キー クラス: [Workbook](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.Workbook.html) [DocumentProperties](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.DocumentProperties.html) [WorkbookWindowOptions](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.WorkbookWindowOptions.html) [Worksheet](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.Worksheet.html) [WorksheetRow](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.WorksheetRow.html) [WorksheetColumn](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.WorksheetColumn.html) [WorksheetCell](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.WorksheetCell.html) | + + + + + + + diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/deploying-the-infragistics-excel-engine.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/deploying-the-infragistics-excel-engine.mdx new file mode 100644 index 0000000000..1bf0441350 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/deploying-the-infragistics-excel-engine.mdx @@ -0,0 +1,22 @@ +--- +title: "Infragistics Excel Engine の配備" +slug: excelengine-deploying-the-infragistics-excel-engine +--- + +# Infragistics Excel Engine の配備 + +.NET アプリケーションを配備する時、実行ファイルに加えて特定のファイルを配布する必要があります。アプリケーションに 1 つ以上の Infragistics 要素を含む場合、アプリケーションの一部として 1 つ以上の Infragistics アセンブリ ファイルを配布または配備する必要があります。このトピックでは、再配布する必要があるファイルの概要を述べます。 + +> **注:** このトピックで具体的に説明されていないファイルは、再配布不可能と見なしてください。Infragistics 製品に含まれているファイルで一覧にないファイルは配布できません。Infragistics 製品のライセンスのない他のマシンへのコピー、移動、共有が禁止されています。 + +アプリケーションを配備するためには、以下のファイルを再配布する必要があります。 + + Infragistics.Web.Documents.Excel.dll + +これは Infragistics Excel Engine™ コード ライブラリを含む .NET アセンブリ。 + + + + + + diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/understanding/excel-object-model.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/understanding/excel-object-model.mdx new file mode 100644 index 0000000000..f3998bf2e0 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/understanding/excel-object-model.mdx @@ -0,0 +1,35 @@ +--- +title: "Excel オブジェクト モデル" +slug: excelengine-excel-object-model +--- + +# Excel オブジェクト モデル + +## Workbook +Infragistics.Documents.Excel アセンブリの基礎は [Workbook](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.Workbook.html) オブジェクトです。Workbook インスタンスがなければ、Microsoft® Excel® ファイルとしてその他の情報を書き出すことはできません。ワークブックはワークシートの集合で、各ワークシートはセルにデータのグリッドを保持します。さらに、ワークブックにはグローバル設定とカスタム ビュー、名前を指定した参照およびスタイルのコレクションが含まれます。ワークブックのグローバル設定は、ドキュメントの制作者やワークブックを Excel で開いた時にワークブックの子 MDI を最小化するかどうかなど、ワークブック全体に影響を与えるオプションです。これらのオプションには、Workbook オブジェクトで直接定義されたプリミティブなプロパティ、Workbook の [DocumentProperties](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.Workbook~DocumentProperties.html) プロパティと [WindowOptions](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.Workbook~WindowOptions.html) プロパティが含まれています。Workbook から公開されたほとんどのプリミティブ プロパティは、さまざまな数式計算オプションを制御します。 + +## DocumentProperties +ワークブックの DocumentProperties は、ワークブックの XLS ファイルを右クリックして、プロパティを表示することによって表示できるプロパティです。これらにはワークブックの作成者、タイトル、サブタイトルなどのワークブックのコンテンツを記述するさまざざまなタグが含まれています。この情報は、特定のバージョンの Excel で編集することも可能です。 + +## WorkbookWindowOptions +[WorkbookWindowOptions](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.WorkbookWindowOptions.html) クラスは、Excel で開いた時にワークブックの子 MDI ウィンドウのさまざまな特性だけでなく、ワークシート固有ではないさまざまな表示オプションを制御します。表示オプションは、どのスクロール バーが表示されるのか、ワークシート タブ バーを表示するかどうか、どのタブをタブ バーで最初に表示するかなど、異なるワークシートに切り替えても変わらない多くの視覚的要素を制御します。 + +子ウィンドウを制御するオプションには、MDI の親にとっての子ウィンドウの境界と、開いたときにウィンドウを最小化するかしないかが含まれます。数式バーまたはステータスバーを表示するかどうか、またはワークブックの子ウィンドウを最大化するかどうかなど、特定のウィンドウ オプションは、WorkbookWindowOptions では制御できません。これらのプロパティはシステム全体にわたるもので、レジストリに Excel によって保存されるからです。ただし、これらのオプションは WorkbookWindowOptions に似た、[CustomView](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.CustomView.html) の WindowOptions プロパティによって制御できます。その他のオプションに加えて、WorkbookWindowOptions クラスはワークブック内の選択されたワークシートを示すプロパティを持ちます。 + +## Worksheet +ワークシートはワークブックを埋めます。ワークブックが一度に表示できるのは少なくとも 1 つのワークシートである必要があります。ワークシートにはワークブック内の実際のデータが含まれます。各ワークシートはセルのグリッドを保持し、各セルはデータの形式を保持することができるからです。Worksheet 上のコレクションと複雑なプロパティは別として、[Worksheet](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.Worksheet.html) オブジェクトにはデフォルトの行と列のサイズ、画像背景 (ワークシートにタイルされる) およびその名前を変更するためのプロパティが含まれます。 + +## WorksheetRow +ワークシートによって公開される最も重要なオブジェクトのひとつが WorksheetRow です。ワークシートの各行は、[WorksheetRow](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.WorksheetRow.html) オブジェクトによって表されます。WorksheetRow インスタンスによって、ワークシートで対応する行を操作できます。さらに、行の各セルは WorksheetRow によって所有されるコレクションに含まれる [WorksheetCell](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.WorksheetCell.html) インスタンスによって表されます。WorksheetCell にアクセスするためには、親の WorksheetRow を通過する必要があります。WorksheetCell インスタンスのコレクションは [WorksheetColumn](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.WorksheetColumn.html) によって所有されません。親行のコレクションと親列のコレクション内の各 WorksheetCell インスタンスを保持するのは冗長であるということが唯一の理由です。各セルおよびデフォルトのセル書式に加えて、行の高さ、表示/非表示、アウトライン レベルも、WorksheetRow インスタンスでカスタマイズすることができます。 + +## WorksheetColumn +WorksheetRow と異なり、ワークシートの列がその下にセルを「含む」としても、WorksheetColumn はセルのコレクションを含みません。これは単にセルが属する WorksheetRow インスタンスからセルにアクセスできるからです。WorksheetColumn からセルをアクセス可能にすることも冗長です。WorksheetColumn インスタンスによって、列のデフォルトのセル書式、幅、表示できるかどうか、アウトライン レベルをカスタマイズできます。 + +## WorksheetCell +ワークシートはセルのグリッドです。各セルは WorksheetCell インスタンスによって表されます。WorksheetCell オブジェクトを使用して、セルの値と書式を設定できます。セルの値は、ワークブックを Excel で開いたときにセルに表示されるものです。その他のセルの値を計算するために、セルの値は数式によって使用することも可能です。 + + + + + + diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/understanding/supported-versions-of-microsoft-excel.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/understanding/supported-versions-of-microsoft-excel.mdx new file mode 100644 index 0000000000..334391c6b0 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/understanding/supported-versions-of-microsoft-excel.mdx @@ -0,0 +1,19 @@ +--- +title: "サポートされるバージョンの Microsoft Excel" +slug: excelengine-supported-versions-of-microsoft-excel +--- + +# サポートされるバージョンの Microsoft Excel + +Infragistics Excel Engine™ は、以下の Microsoft® Excel® ファイル形式の保存および読み込みが可能です。 + +|ファイル形式 | 列挙体 | 列挙体 +|--------------------------------------|---------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| +|Excel 97-2003 ワークブック (*.xls) | Infragistics.Documents.Excel.WorkbookFormat.Excel97To2003 | BIFF8 形式を使用します。 format. | +|Excel 97-2003 テンプレート (*.xlt) | Infragistics.Documents.Excel.WorkbookFormat.Excel97To2003Template | BIFF8 形式を使用します。 format. | +|Excel ワークブック (*.xlsx) | Infragistics.Documents.Excel.WorkbookFormat.Excel2007 | | +|Excel マクロ有効ワークブック (*.xlsm) | Infragistics.Documents.Excel.WorkbookFormat.Excel2007MacroEnabled | Infragistics Excel Engine はマクロの作成、分析、または実行をサポートしません。読み込んだファイルにモジュールがある場合、保存時にそのモジュールが出力に含まれます。 | +|Excel テンプレート (*.xltx) | Infragistics.Documents.Excel.WorkbookFormat.Excel2007Template | | +|Excel マクロ有効テンプレート (*.xltm) | Infragistics.Documents.Excel.WorkbookFormat.Excel2007MacroEnabledTemplate | Infragistics Excel Engine はマクロの作成、分析、または実行をサポートしません。読み込んだファイルにモジュールがある場合、保存時にそのモジュールが出力に含まれます。 | +|Strict Open XML スプレッドシート (*.xlsx) | Infragistics.Documents.Excel.WorkbookFormat.StrictOpenXml | Strict Open XML (ISO/IEC 29500 Strict) ファイル形式です。 | + diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/understanding/understanding-the-infragistics-excel-engine.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/understanding/understanding-the-infragistics-excel-engine.mdx new file mode 100644 index 0000000000..1b9c91f8b6 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/understanding/understanding-the-infragistics-excel-engine.mdx @@ -0,0 +1,14 @@ +--- +title: "Infragistics Excel Engine の理解" +slug: excelengine-understanding-the-infragistics-excel-engine +--- + +# Infragistics Excel Engine の理解 + +Infragistics Excel Engine、ならびにその主要な機能と機能性について解説しています。このセクションのトピックを読むと、アプリケーションで Excel Engine を使用することの利点を理解できます。 + +Excel Engine の概要を理解するには、以下のリンクをクリックしてください。 + +- [Excel オブジェクト モデル](/excelengine-excel-object-model) +- [サポートされるバージョンの Microsoft Excel](/excelengine-supported-versions-of-microsoft-excel) +- [Office 2007 XLSX ファイル生成の参照と依存](/excelengine-office-2007-xlsx-file-generation-references-and-dependencies) diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/using/accessing-cells-and-regions-by-their-reference-strings.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/using/accessing-cells-and-regions-by-their-reference-strings.mdx new file mode 100644 index 0000000000..6bb0becac7 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/using/accessing-cells-and-regions-by-their-reference-strings.mdx @@ -0,0 +1,36 @@ +--- +title: "参照文字列による Cells および Regions のアクセス" +slug: excelengine-accessing-cells-and-regions-by-their-reference-strings +--- + +# 参照文字列による Cells および Regions のアクセス + +このトピックによって、Excel® ワークブックのワークシート内でセルと範囲にアクセスする方法をよく知ることができます。Worksheet クラスの [`GetCell`](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.Worksheet~GetCell.html) メソッドと [`GetRegion`](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.Worksheet~GetRegion.html) メソッドはセル参照文字列をパラメーターとして受け取ります。 + +以下の例のコードで、Worksheet セルは GetCell メソッドによってアクセスされ、Excel 数式が適用されます。同様に Excel 数式がワークシート内のセルの範囲に適用されます。 + +**Visual Basic の場合:** + + +```vb +'Accessing a single cell +worksheet.GetCell ("C5").ApplyFormula ("=A5*B5") +'Accessing a range of cells + worksheet.GetRegion ("G1:G10").ApplyFormula ("=E1*F1") +``` + +**C# の場合:** + + +```csharp +//Accessing a single cell +worksheet.GetCell ("C5").ApplyFormula ("=A5*B5"); +//Accessing a range of cells + worksheet.GetRegion ("G1:G10").ApplyFormula ("=E1*F1"); +``` + + + + + + diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/using/add-an-image-to-a-worksheet.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/using/add-an-image-to-a-worksheet.mdx new file mode 100644 index 0000000000..6aaf773ae4 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/using/add-an-image-to-a-worksheet.mdx @@ -0,0 +1,78 @@ +--- +title: "画像をワークシートに追加" +slug: excelengine-add-an-image-to-a-worksheet +--- + +# 画像をワークシートに追加 + +Microsoft® Excel® では、ワークシートの任意の位置に画像や形状を配置できます。[`WorksheetImage`](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.WorksheetImage.html) オブジェクトを使って、画像を [Worksheet](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.Worksheet.html) に追加することもできます。次の手順に従って、すべての形状をワークシートに追加できます。 + +1. 希望の形状を作成します。 +2. 形状のアンカーを設定します。これは、形状がワークシート上のどこに配置されるかを決定します。 +3. 形状をワークシートの [Shapes](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.Worksheet~Shapes.html) コレクションに追加します。 + +形状をワークシートに配置する前に設定する必要があるアンカーは、形状の [TopLeftCornerCell](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.WorksheetShape~TopLeftCornerCell.html) および [BottomRightCornerCell](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.WorksheetShape~BottomRightCornerCell.html) プロパティです。これらのセルは、形状のワークシートを Excel で表示するときに、形状の関連付けられた隅がどこに表示されるかを決定します。追加のアンカー プロパティとして、形状の [TopLeftCornerPosition](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.WorksheetShape~TopLeftCornerPosition.html) および [BottomRightCornerPosition](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.WorksheetShape~BottomRightCornerPosition.html) プロパティがあります。これらのプロパティを使用することで、形状の関連付けられた隅がセル内のどこに表示されるかを細かく制御できます。これらの位置プロパティでは、セルの各寸法をすべてパーセンテージで表し、(0.0, 0.0) が関連付けられたアンカー セルの左上隅を意味し、(100.0, 100.0) が右下隅を意味します。 + +以下のコードは、画像を作成し、ワークシートの A1 セル全体を塗りつぶす方法を示します。 + +**Visual Basic の場合:** + +```vb +Dim workbook As New Infragistics.Documents.Excel.Workbook() +Dim worksheet As Infragistics.Documents.Excel.Worksheet = _ + workbook.Worksheets.Add("Sheet1") + +Dim image As Image = image.FromFile("C:image.bmp") +Dim imageShape As Infragistics.Documents.Excel.WorksheetImage = _ + New Infragistics.Documents.Excel.WorksheetImage(image) + +Dim cellA1 As Infragistics.Documents.Excel.WorksheetCell = _ + worksheet.Rows.Item(0).Cells.Item(0) + +' The top-left corner of the image should be at the +' top-left corner of cell A1 +imageShape.TopLeftCornerCell = cellA1 +imageShape.TopLeftCornerPosition = New PointF(0.0F, 0.0F) + +' The bottom-right corner of the image should be at +' the bottom-right corner of cell A1 +imageShape.BottomRightCornerCell = cellA1 +imageShape.BottomRightCornerPosition = New PointF(100.0F, 100.0F) + +worksheet.Shapes.Add(imageShape) +``` + +**C# の場合:** + +```csharp +Infragistics.Documents.Excel.Workbook workbook = new Infragistics.Documents.Excel.Workbook(); +Infragistics.Documents.Excel.Worksheet worksheet = + workbook.Worksheets.Add( "Sheet1" ); + +Image image = Image.FromFile( "C:image.bmp" ); +Infragistics.Documents.Excel.WorksheetImage imageShape = + new Infragistics.Documents.Excel.WorksheetImage( image ); + +Infragistics.Documents.Excel.WorksheetCell cellA1 = worksheet.Rows[0].Cells[0]; + +// The top-left corner of the image should be at the +// top-left corner of cell A1 +imageShape.TopLeftCornerCell = cellA1; +imageShape.TopLeftCornerPosition = new PointF( 0.0F, 0.0F ); + +// The bottom-right corner of the image should be at +// the bottom-right corner of cell A1 +imageShape.BottomRightCornerCell = cellA1; +imageShape.BottomRightCornerPosition = new PointF( 100.0F, 100.0F ); + +worksheet.Shapes.Add( imageShape ); +``` +![](../../../images/images/ExcelEngine_Add_an_Image_to_a_Worksheet_01.png) + + + + + + + + diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/using/add-document-properties-to-a-workbook.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/using/add-document-properties-to-a-workbook.mdx new file mode 100644 index 0000000000..c003ca592c --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/using/add-document-properties-to-a-workbook.mdx @@ -0,0 +1,46 @@ +--- +title: "ドキュメント プロパティをワークブックに追加" +slug: excelengine-add-document-properties-to-a-workbook +--- + +# ドキュメント プロパティをワークブックに追加 + + + +ワークブックの内容に関する情報を提供する各種のプロパティが、それぞれのワークブック ファイルに関連付けられています。それらのプロパティには、以下のような情報が含まれています。 + +- 作成者 +- タイトル +- 件名 +- キーワード +- カテゴリ +- 状態 +- コメント + +この情報には、Microsoft® Excel® インターフェイスおよびワークブック ファイルの Properties ダイアログ ボックスを介してアクセスできます。その [`DocumentProperties`](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.Workbook~DocumentProperties.html) プロパティを使って、シリアル化する前に、この情報をワークブック内で編集できます。 + +以下のコードは、ワークブックを作成し、 [`Title`](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.DocumentProperties~Title.html) および [`Status`](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.DocumentProperties~Status.html) ドキュメント プロパティを設定する方法を示します。 + +**Visual Basic の場合:** + +```vb +Dim workbook As New Infragistics.Documents.Excel.Workbook() +workbook.DocumentProperties.Title = "Expense Report" +workbook.DocumentProperties.Status = "Complete" +``` + +**C# の場合:** + +```csharp +Infragistics.Documents.Excel.Workbook workbook = new Infragistics.Documents.Excel.Workbook(); +workbook.DocumentProperties.Title = "Expense Report"; +workbook.DocumentProperties.Status = "Complete"; +``` + + + + + + + + diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/using/adding-a-hyperlink-to-a-cell-in-an-excel-file.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/using/adding-a-hyperlink-to-a-cell-in-an-excel-file.mdx new file mode 100644 index 0000000000..104aea8882 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/using/adding-a-hyperlink-to-a-cell-in-an-excel-file.mdx @@ -0,0 +1,48 @@ +--- +title: "Excel ファイルのセルへのハイパーリンクの追加" +slug: excelengine-adding-a-hyperlink-to-a-cell-in-an-excel-file +--- + +# Excel ファイルのセルへのハイパーリンクの追加 + +このトピックは、[`WorksheetCell`](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.WorksheetCell.html) オブジェクトの [ApplyFormula](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.WorksheetCell~ApplyFormula.html) メソッドを使用して、Microsoft® Excel™ ファイルのセルにハイパーリンクを追加する方法を示します。以下のコードは、Excel 固有の数式 `HYPERLINK` を使用してワークシートのセル 0 にハイパーリンクのある Excel ファイルを作成します。 + +コードの記述を開始する前にコード ビハインドに using/imports のディレクティブを配置します。そうすれば、メンバーは完全に記述された名前を常に入力する必要がなくなります。 + +**Visual Basic の場合:** +```vb +Imports Infragistics.Documents.Excel +``` +**C# の場合:** +```csharp +using Infragistics.Documents.Excel; +``` +**Visual Basic の場合:** +```vb + 'Create an Excel File + Dim s As String = "C:theFile.xls" + 'Create a Workbook + Dim w As New Workbook() + + 'Add a new worksheet to the Workbook + Dim ws As Worksheet = w.Worksheets.Add("New") + + 'Create Hyperlink in a Worksheet cell + ws.Rows(0).Cells(0).ApplyFormula("=HYPERLINK(""http://www.infragistics.com"",""Infragistics"")") + w.Save(s) +``` +**C# の場合:** +```csharp + //Create an Excel File + string s = @" C:theFile.xls"; + + //Create a Workbook + Workbook w = new Workbook(); + + //Add a new worksheet to the Workbook + Worksheet ws = w.Worksheets.Add("New"); + + //Create Hyperlink in a Worksheet cell + ws.Rows[0].Cells[0].ApplyFormula(@"=HYPERLINK(""http://www.infragistics.com"",""Infragistics"")"); + w.Save(s); +``` diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/using/adding-shapes-to-a-worksheet.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/using/adding-shapes-to-a-worksheet.mdx new file mode 100644 index 0000000000..c6b135e939 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/using/adding-shapes-to-a-worksheet.mdx @@ -0,0 +1,209 @@ +--- +title: "形状をワークシートに追加" +slug: excelengine-adding-shapes-to-a-worksheet +--- + +# 形状をワークシートに追加 + + + +## 始める前に +Infragistics.Documents.Excel アセンブリの優れた点の 1 つとして、画像および形状をワークシートに追加する機能があります。Microsoft® Excel® と同様に、画像をワークシート上の必要な位置に配置し、同じワークシート上の他の形状とグループ化することもできます。形状を使用は、形状を作成し、ワークシート上でのその形状の位置を決定するアンカーを設定し、それをワークシートに追加するという簡単なプロセスです。 + +形状をワークシートに直接配置するだけでなく、ワークシート上の形状をグループ化することもできます。形状をグループ化すると、グループ全体を 1 つの形状として移動できるので、グループ内の形状同士を常に同じ位置関係に保つことができます。 + +## 達成すること +この詳細なガイドでは、画像をワークシートに追加し、ひとつの形状としてグループ化するために必要な手順を説明します。 + +## 次の手順を実行します +1. **ワークシートを使用してワークブックを作成します。** + 1. Visual Basic または C# プロジェクトを新しく作成します。 + 2. Button をフォームに追加します。 + 3. Button をダブルクリックして、その Click イベントのコード ビハインドを開きます。 + 4. ひとつのワークシートを使用してワークブックを作成します。 + + **Visual Basic の場合:** + +```vb + Dim workbook As New Infragistics.Documents.Excel.Workbook() + Dim worksheet As Infragistics.Documents.Excel.Worksheet = _ + workbook.Worksheets.Add("Sheet1") +``` + + **C# の場合:** + +```csharp + Infragistics.Documents.Excel.Workbook workbook = new Infragistics.Documents.Excel.Workbook(); + Infragistics.Documents.Excel.Worksheet worksheet = workbook.Worksheets.Add( "Sheet1" ); +``` + +2. **画像の形状を作成してワークシートに配置します。** + 1. 画像を作成します。 + + **Visual Basic の場合:** + +```vb + Dim aspImage As Image = Image.FromFile("C:NA_AspNet.gif") + Dim winImage As Image = Image.FromFile("C:NA_Win_Forms.gif") + Dim wpfImage As Image = Image.FromFile("C:NA_WPF.gif") +``` + + **C# の場合:** + +```csharp + Image aspImage = Image.FromFile( "C:NA_AspNet.gif" ); + Image winImage = Image.FromFile( "C:NA_Win_Forms.gif" ); + Image wpfImage = Image.FromFile( "C:NA_WPF.gif" ); +``` + + 2. 画像の形状を作成してワークシートに配置します。 + + **Visual Basic の場合:** + +```vb + Dim aspImageShape As Infragistics.Documents.Excel.WorksheetImage = _ + New Infragistics.Documents.Excel.WorksheetImage(aspImage) + Dim winImageShape As Infragistics.Documents.Excel.WorksheetImage = _ + New Infragistics.Documents.Excel.WorksheetImage(winImage) + Dim wpfImageShape As Infragistics.Documents.Excel.WorksheetImage = _ + New Infragistics.Documents.Excel.WorksheetImage(wpfImage) +``` + + **C# の場合:** + +```csharp + Infragistics.Documents.Excel.WorksheetImage aspImageShape = + new Infragistics.Documents.Excel.WorksheetImage( aspImage ); + Infragistics.Documents.Excel.WorksheetImage winImageShape = + new Infragistics.Documents.Excel.WorksheetImage( winImage ); + Infragistics.Documents.Excel.WorksheetImage wpfImageShape = + new Infragistics.Documents.Excel.WorksheetImage( wpfImage ); +``` + +3. **画像の形状で位置アンカーを設定します。** + + 形状をグループまたはワークシートに追加する前に、アンカーを設定する必要があります。ワークシート上のセルに応じて形状を配置します。 + + **Visual Basic の場合:** + +```vb + aspImageShape.TopLeftCornerCell = worksheet.Rows.Item(3).Cells.Item(1) + aspImageShape.BottomRightCornerCell = worksheet.Rows.Item(5).Cells.Item(6) + ' The bottom-right corner of the shape should be close to the + ' bottom-left corner of its anchor cell + aspImageShape.BottomRightCornerPosition = New PointF(10, 100) + + winImageShape.TopLeftCornerCell = worksheet.Rows.Item(7).Cells.Item(1) + ' The top-left corner of the shape should be in the top-middle + ' of its anchor cell + winImageShape.TopLeftCornerPosition = New PointF(50, 0) + winImageShape.BottomRightCornerCell = worksheet.Rows.Item(9).Cells.Item(6) + ' The bottom-right corner of the shape should be close to the + ' bottom-middle of its anchor cell + winImageShape.BottomRightCornerPosition = New PointF(60, 100) + + wpfImageShape.TopLeftCornerCell = worksheet.Rows.Item(11).Cells.Item(2) + wpfImageShape.BottomRightCornerCell = worksheet.Rows.Item(13).Cells.Item(7) + ' The bottom-right corner of the shape should be close to the + ' bottom-left corner of its anchor cell + wpfImageShape.BottomRightCornerPosition = New PointF(10, 100) +``` + + **C# の場合:** + +```csharp + aspImageShape.TopLeftCornerCell = worksheet.Rows[3].Cells[1]; + aspImageShape.BottomRightCornerCell = worksheet.Rows[5].Cells[6]; + // The bottom-right corner of the shape should be close to the + // bottom-left corner of its anchor cell + aspImageShape.BottomRightCornerPosition = new PointF( 10, 100 ); + + winImageShape.TopLeftCornerCell = worksheet.Rows[7].Cells[1]; + // The top-right corner of the shape should be in the top-middle + // of its anchor cell + winImageShape.TopLeftCornerPosition = new PointF( 50, 0 ); + winImageShape.BottomRightCornerCell = worksheet.Rows[9].Cells[6]; + // The bottom-right corner of the shape should be close to the + // bottom-middle of its anchor cell + winImageShape.BottomRightCornerPosition = new PointF( 60, 100 ); + + wpfImageShape.TopLeftCornerCell = worksheet.Rows[11].Cells[ 2 ]; + wpfImageShape.BottomRightCornerCell = worksheet.Rows[13].Cells[7]; + // The bottom-right corner of the shape should be close to the + // bottom-left corner of its anchor cell + wpfImageShape.BottomRightCornerPosition = new PointF( 10, 100 ); +``` + +4. **画像の形状をグループ化します。** + 1. 形状のグループを作成します。これも形状となります。 + + **Visual Basic の場合:** + +```vb + Dim group As Infragistics.Documents.Excel.WorksheetShapeGroup = _ + New Infragistics.Documents.Excel.WorksheetShapeGroup() +``` + + **C# の場合:** + +```csharp + Infragistics.Documents.Excel.WorksheetShapeGroup group = + new Infragistics.Documents.Excel.WorksheetShapeGroup(); +``` + + 2. 形状をグループに追加します。形状を形状グループに追加または削除するとき、独自のアンカーを自動的に設定します。それは、すべての形状を完全に収容できる最初の四角形です。このため、形状グループのアンカーを設定する必要はありません。 + + **Visual Basic の場合:** + +```vb + group.Shapes.Add(aspImageShape) + group.Shapes.Add(winImageShape) + group.Shapes.Add(wpfImageShape) +``` + + **C# の場合:** + +```csharp + group.Shapes.Add( aspImageShape ); + group.Shapes.Add( winImageShape ); + group.Shapes.Add( wpfImageShape ); +``` + + 3. グループ（画像の形状を含んでいる）をワークシートに追加します。 + + **Visual Basic の場合:** + +```vb + worksheet.Shapes.Add(group) +``` + + **C# の場合:** + +```csharp + worksheet.Shapes.Add( group ); +``` + +5. **ワークブックをシリアル化します。** + 1. ワークブックをファイルに書き出します。 + + **Visual Basic の場合:** + +```vb + workbook.Serialize("C:Shapes.xls") +``` + + **C# の場合:** + +```csharp + workbook.Serialize( "C:Shapes.xls" ); +``` + +![](../../../images/images/ExcelEngine_Adding_Shapes_to_a_Worksheet_01.png) + + + + + + + + diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/using/applying-styles-to-cells.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/using/applying-styles-to-cells.mdx new file mode 100644 index 0000000000..814e762c49 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/using/applying-styles-to-cells.mdx @@ -0,0 +1,327 @@ +--- +title: "スタイルをセルに適用" +slug: excelengine-applying-styles-to-cells +--- + +# スタイルをセルに適用 + +## 始める前に +スタイルをセルに適用する機能は、Infragistics.Documents.Excel アセンブリでワークシートをカスタマイズする方法の 1 つです。セルのあらゆる特性はカスタマイズ可能で、各セルに異なる表示方法を設定できます。セルで使用するフォント、セルの背景と境界線、およびテキストの配置と回転を制御できます。同じセル内の異なるテキスト部分に異なる書式設定を使用することもできます。 + +ほとんどのスタイルは、[`WorksheetCell`](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.WorksheetCell.html)、[`WorksheetRow`](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.WorksheetRow.html)、[`WorksheetColumn`](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.WorksheetColumn.html)、および [`WorksheetMergedCellsRegion`](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.WorksheetMergedCellsRegion.html) の `CellFormat` プロパティでプロパティを設定することで適用できます。 + +## 達成すること +この詳細なガイドでは、ワークシートのセルにさまざまなスタイルを適用する方法を示します。 + +## 次の手順を実行します +1. **ワークシートを使用してワークブックを作成します。** + 1. Visual Basic または C# プロジェクトを新しく作成します。 + 2. Button をフォームに追加します。 + 3. Button をダブルクリックして、その Click イベントのコード ビハインドを開きます。 + 4. ひとつのワークシートを使用してワークブックを作成します。 + + **Visual Basic の場合:** + +```vb + Dim workbook As New Infragistics.Documents.Excel.Workbook() + Dim worksheet As Infragistics.Documents.Excel.Worksheet = _ + workbook.Worksheets.Add("Sheet1") +``` + + **C# の場合:** + +```csharp + Infragistics.Documents.Excel.Workbook workbook = new Infragistics.Documents.Excel.Workbook(); + Infragistics.Documents.Excel.Worksheet worksheet = workbook.Worksheets.Add( "Sheet1" ); +``` + + 5. セルのすべてのテキストが表示されるように、最初の列の幅を広げます。 + + **Visual Basic の場合:** + +```vb + worksheet.Columns.Item(0).Width = 6000 +``` + + **C# の場合:** + +```csharp + worksheet.Columns[0].Width = 6000; +``` + +2. **スタイルをセルに適用します。** + 1. 値がセルで中央揃えになるようにセルの水平方向の配置を変更します。 + + **Visual Basic の場合:** + +```vb + worksheet.Rows.Item(0).Cells.Item(0).Value = "Center" + worksheet.Rows.Item(0).Cells.Item(0).CellFormat.Alignment = _ + Infragistics.Documents.Excel.HorizontalCellAlignment.Center +``` + + **C# の場合:** + +```csharp + worksheet.Rows[0].Cells[0].Value = "Center"; + worksheet.Rows[0].Cells[0].CellFormat.Alignment = + Infragistics.Documents.Excel.HorizontalCellAlignment.Center; +``` + + 2. セルに異なる境界線スタイルと色を指定して、他のセルと区別します。 + + **Visual Basic の場合:** + +```vb + worksheet.Rows.Item(1).Cells.Item(0).CellFormat.BottomBorderColor = Color.Red + worksheet.Rows.Item(1).Cells.Item(0).CellFormat.BottomBorderStyle = _ + Infragistics.Documents.Excel.CellBorderLineStyle.DashDot + worksheet.Rows.Item(1).Cells.Item(0).CellFormat.LeftBorderColor = Color.Yellow + worksheet.Rows.Item(1).Cells.Item(0).CellFormat.LeftBorderStyle = _ + Infragistics.Documents.Excel.CellBorderLineStyle.Thick + worksheet.Rows.Item(1).Cells.Item(0).CellFormat.RightBorderColor = Color.Orange + worksheet.Rows.Item(1).Cells.Item(0).CellFormat.RightBorderStyle = _ + Infragistics.Documents.Excel.CellBorderLineStyle.Thin + worksheet.Rows.Item(1).Cells.Item(0).CellFormat.TopBorderColor = Color.Blue + worksheet.Rows.Item(1).Cells.Item(0).CellFormat.TopBorderStyle = _ + Infragistics.Documents.Excel.CellBorderLineStyle.Double +``` + + **C# の場合:** + +```csharp + worksheet.Rows[1].Cells[0].CellFormat.BottomBorderColor = Color.Red; + worksheet.Rows[1].Cells[0].CellFormat.BottomBorderStyle = + Infragistics.Documents.Excel.CellBorderLineStyle.DashDot; + worksheet.Rows[1].Cells[0].CellFormat.LeftBorderColor = Color.Yellow; + worksheet.Rows[1].Cells[0].CellFormat.LeftBorderStyle = + Infragistics.Documents.Excel.CellBorderLineStyle.Thick; + worksheet.Rows[1].Cells[0].CellFormat.RightBorderColor = Color.Orange; + worksheet.Rows[1].Cells[0].CellFormat.RightBorderStyle = + Infragistics.Documents.Excel.CellBorderLineStyle.Thin; + worksheet.Rows[1].Cells[0].CellFormat.TopBorderColor = Color.Blue; + worksheet.Rows[1].Cells[0].CellFormat.TopBorderStyle = + Infragistics.Documents.Excel.CellBorderLineStyle.Double; +``` + + 3. 背景のスタイルをセルに適用して、目立たせます。 + + **Visual Basic の場合:** + +```vb + worksheet.Rows.Item(2).Cells.Item(0).CellFormat.FillPattern = _ + Infragistics.Documents.Excel.FillPatternStyle.DiagonalCrosshatch + worksheet.Rows.Item(2).Cells.Item(0).CellFormat.FillPatternBackgroundColor = _ + Color.Lime + worksheet.Rows.Item(2).Cells.Item(0).CellFormat.FillPatternForegroundColor = _ + Color.Gray +``` + + **C# の場合:** + +```csharp + worksheet.Rows[2].Cells[0].CellFormat.FillPattern = + Infragistics.Documents.Excel.FillPatternStyle.DiagonalCrosshatch; + worksheet.Rows[2].Cells[0].CellFormat.FillPatternBackgroundColor = + Color.Lime; + worksheet.Rows[2].Cells[0].CellFormat.FillPatternForegroundColor = + Color.Gray; +``` + + 4. 値が異なって表示されるように、セルのフォントを変更します。 + + **Visual Basic の場合:** + +```vb + worksheet.Rows.Item(3).Cells.Item(0).Value = 57 + worksheet.Rows.Item(3).Cells.Item(0).CellFormat.Font.Bold = _ + Infragistics.Documents.Excel.ExcelDefaultableBoolean.True + worksheet.Rows.Item(3).Cells.Item(0).CellFormat.Font.UnderlineStyle = _ + Infragistics.Documents.Excel.FontUnderlineStyle.Double +``` + + **C# の場合:** + +```csharp + worksheet.Rows[3].Cells[0].Value = 57; + worksheet.Rows[3].Cells[0].CellFormat.Font.Bold = + Infragistics.Documents.Excel.ExcelDefaultableBoolean.True; + worksheet.Rows[3].Cells[0].CellFormat.Font.UnderlineStyle = + Infragistics.Documents.Excel.FontUnderlineStyle.Double; +``` + + 5. 表示される値のタイプを認識しやすくするために、フォーマット文字列をセルに適用します（以下のセルは通貨を表示するために使用されます）。 + + **Visual Basic の場合:** + +```vb + worksheet.Rows.Item(4).Cells.Item(0).Value = -4357.059 + worksheet.Rows.Item(4).Cells.Item(0).CellFormat.FormatString = _ + """$""#,##0.00_);[Red](""$""#,##0.00)" +``` + + **C# の場合:** + +```csharp + worksheet.Rows[4].Cells[0].Value = -4357.059; + worksheet.Rows[4].Cells[0].CellFormat.FormatString = + ""$"#,##0.00_);[Red]("$"#,##0.00)"; +``` + + 6. セルでテキストをインデントします。 + + **Visual Basic の場合:** + +```vb + worksheet.Rows.Item(5).Cells.Item(0).Value = "Intented" + worksheet.Rows.Item(5).Cells.Item(0).CellFormat.Indent = 2 +``` + + **C# の場合:** + +```csharp + worksheet.Rows[5].Cells[0].Value = "Intented"; + worksheet.Rows[5].Cells[0].CellFormat.Indent = 2; +``` + + 7. セルでテキストを回転します。 + + **Visual Basic の場合:** + +```vb + worksheet.Rows.Item(6).Cells.Item(0).Value = "Rotated" + worksheet.Rows.Item(6).Cells.Item(0).CellFormat.Rotation = 45 +``` + + **C# の場合:** + +```csharp + worksheet.Rows[6].Cells[0].Value = "Rotated"; + worksheet.Rows[6].Cells[0].CellFormat.Rotation = 45; +``` + + 8. セルに収まるようにテキストを縮小します。 + + **Visual Basic の場合:** + +```vb + worksheet.Rows.Item(7).Cells.Item(0).Value = _ + "Shrink text so it is all visible in the cell" + worksheet.Rows.Item(7).Cells.Item(0).CellFormat.ShrinkToFit = _ + Infragistics.Documents.Excel.ExcelDefaultableBoolean.True +``` + + **C# の場合:** + +```csharp + worksheet.Rows[7].Cells[0].Value = + "Shrink text so it is all visible in the cell"; + worksheet.Rows[7].Cells[0].CellFormat.ShrinkToFit = + Infragistics.Documents.Excel.ExcelDefaultableBoolean.True; +``` + + 9. セルにデフォルトの高さがない場合に値がセルの上部に表示されるように、セルの垂直方向の配置を変更します。 + + **Visual Basic の場合:** + +```vb + worksheet.Rows.Item(8).Height = 500 + worksheet.Rows.Item(8).Cells.Item(0).Value = "Top" + worksheet.Rows.Item(8).Cells.Item(0).CellFormat.VerticalAlignment = _ + Infragistics.Documents.Excel.VerticalCellAlignment.Top +``` + + **C# の場合:** + +```csharp + worksheet.Rows[8].Height = 500; + worksheet.Rows[8].Cells[0].Value = "Top"; + worksheet.Rows[8].Cells[0].CellFormat.VerticalAlignment = + Infragistics.Documents.Excel.VerticalCellAlignment.Top; +``` + + 10. セル内のテキストが次のセルにはみ出したり、途中で切れないように、折り返します。 + + **Visual Basic の場合:** + +```vb + worksheet.Rows.Item(9).Cells.Item(0).Value = _ + "This text has been wrapped." + worksheet.Rows.Item(9).Cells.Item(0).CellFormat.WrapText = _ + Infragistics.Documents.Excel.ExcelDefaultableBoolean.True +``` + + **C# の場合:** + +```csharp + worksheet.Rows[9].Cells[0].Value = + "This text has been wrapped."; + worksheet.Rows[9].Cells[0].CellFormat.WrapText = + Infragistics.Documents.Excel.ExcelDefaultableBoolean.True; +``` + + 11. FormattedString オブジェクトを使用して、セル内のテキストに混ざったフォーマットを適用します。 + + **Visual Basic の場合:** + +```vb + Dim formattedString As Infragistics.Documents.Excel.FormattedString = _ + New Infragistics.Documents.Excel.FormattedString("Formatted String") + worksheet.Rows.Item(10).Cells.Item(0).Value = formattedString + + Dim font1 As Infragistics.Documents.Excel.FormattedStringFont = _ + formattedString.GetFont(3, 6) + font1.Color = Color.Red + font1.UnderlineStyle = Infragistics.Documents.Excel.FontUnderlineStyle.Single + font1.Height = 300 + + Dim font2 As Infragistics.Documents.Excel.FormattedStringFont = _ + formattedString.GetFont(10) + font2.Bold = Infragistics.Documents.Excel.ExcelDefaultableBoolean.True + font2.Italic = Infragistics.Documents.Excel.ExcelDefaultableBoolean.True + font2.Strikeout = Infragistics.Documents.Excel.ExcelDefaultableBoolean.True +``` + + **C# の場合:** + +```csharp + Infragistics.Documents.Excel.FormattedString formattedString = + new Infragistics.Documents.Excel.FormattedString( "Formatted String" ); + worksheet.Rows[10].Cells[0].Value = formattedString; + + Infragistics.Documents.Excel.FormattedStringFont font1 = formattedString.GetFont( 3, 6 ); + font1.Color = Color.Red; + font1.UnderlineStyle = Infragistics.Documents.Excel.FontUnderlineStyle.Single; + font1.Height = 300; + + Infragistics.Documents.Excel.FormattedStringFont font2 = formattedString.GetFont( 10 ); + font2.Bold = Infragistics.Documents.Excel.ExcelDefaultableBoolean.True; + font2.Italic = Infragistics.Documents.Excel.ExcelDefaultableBoolean.True; + font2.Strikeout = Infragistics.Documents.Excel.ExcelDefaultableBoolean.True; +``` + +3. **ワークブックをシリアル化します。** + + ワークブックをファイルに書き出します。 + + **Visual Basic の場合:** + +```vb + workbook.Serialize("C:Styles.xls") +``` + + **C# の場合:** + +```csharp + workbook.Serialize( "C:Styles.xls" ); +``` + +![](../../../images/images/ExcelEngine_Applying_Styles_to_Cells_01.png) + + + + + + + + diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/using/calculating-order-totals.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/using/calculating-order-totals.mdx new file mode 100644 index 0000000000..9d5ff0cd08 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/using/calculating-order-totals.mdx @@ -0,0 +1,304 @@ +--- +title: "注文合計を計算" +slug: excelengine-calculating-order-totals +--- + +# 注文合計を計算 + +## 始める前に +Microsoft® Excel® ワークブックによく見られるタスクは、1 列または 1 行の数値データを格納し、これらの数値の合計を含むセルを作ることです。この合計の良い点は、いずれかの数値を変更すると合計が自動的に更新されることです。セルの値として数式を適用することによって、ワークシートに合計セルを作成できます。 + +## 達成すること +このトピックでは、データの合計を含むセルをワークシートに作成する方法を学習します。 + +## 次の手順を実行します +1. **ワークシートを使用してワークブックを作成します。** + 1. Visual Basic または C# プロジェクトを新しく作成します。 + 2. Button をフォームに追加します。 + 3. Button をダブルクリックして、その Click イベントのコード ビハインドを開きます。 + 4. ひとつのワークシートを使用してワークブックを作成します。 + + **Visual Basic の場合:** + +```vb + Dim workbook As New Infragistics.Documents.Excel.Workbook() + Dim worksheet As Infragistics.Documents.Excel.Worksheet = _ + workbook.Worksheets.Add("Sheet1") +``` + + **C# の場合:** + +```csharp + Infragistics.Documents.Excel.Workbook workbook = new Infragistics.Documents.Excel.Workbook(); + Infragistics.Documents.Excel.Worksheet worksheet = workbook.Worksheets.Add( "Sheet1" ); +``` + +2. **ワークシート データの列を定義します。** + 1. データを簡単に識別できるように列ヘッダーを作成します。 + + **Visual Basic の場合:** + +```vb + Dim headersRow As Infragistics.Documents.Excel.WorksheetRow = worksheet.Rows.Item(0) + headersRow.Cells.Item(0).Value = "Order ID" + headersRow.Cells.Item(1).Value = "Product" + headersRow.Cells.Item(2).Value = "Unit Price" + headersRow.Cells.Item(3).Value = "Quantity" + headersRow.Cells.Item(4).Value = "Discount" + headersRow.Cells.Item(5).Value = "Order Total" +``` + + **C# の場合:** + +```csharp + Infragistics.Documents.Excel.WorksheetRow headersRow = worksheet.Rows[ 0 ]; + headersRow.Cells[0].Value = "Order ID"; + headersRow.Cells[1].Value = "Product"; + headersRow.Cells[2].Value = "Unit Price"; + headersRow.Cells[3].Value = "Quantity"; + headersRow.Cells[4].Value = "Discount"; + headersRow.Cells[5].Value = "Order Total"; +``` + + 2. 特別なフォーマットを必要とする任意の列に特別なフォーマットを設定します。 + + **Visual Basic の場合:** + +```vb + ' The "Unit Price" column should display its values as dollars + worksheet.Columns.Item(2).CellFormat.FormatString = _ + """$""#,##0.00_);(""$""#,##0.00)" + + ' The "Discount" column should display its values as percentages + worksheet.Columns.Item(4).CellFormat.FormatString = "0.00%" + + ' The "Order Total" column should display its values as dollars + worksheet.Columns.Item(5).CellFormat.FormatString = _ + """$""#,##0.00_);(""$""#,##0.00)" + ' Allow enough room to display the totals + worksheet.Columns.Item(5).Width = 3000 +``` + + **C# の場合:** + +```csharp + // The "Unit Price" column should display its values as dollars + worksheet.Columns[2].CellFormat.FormatString = ""$"#,##0.00_);("$"#,##0.00)"; + + // The "Discount" column should display its values as percentages + worksheet.Columns[4].CellFormat.FormatString = "0.00%"; + + // The "Order Total" column should display its values as dollars + worksheet.Columns[5 ].CellFormat.FormatString = ""$"#,##0.00_);("$"#,##0;00)"; + // Allow enough room to display the totals + worksheet.Columns[5].Width = 3000; +``` + +3. **セルにデータを格納します。** + 1. セルにデータを格納します（合計を含むセルではありません。これらは後で数式で計算されます）。 + + **Visual Basic の場合:** + +```vb + Dim currentRow As Infragistics.Documents.Excel.WorksheetRow + + currentRow = worksheet.Rows.Item(1) + currentRow.Cells.Item(0).Value = 10248 + currentRow.Cells.Item(1).Value = 42 + currentRow.Cells.Item(2).Value = 9.8 + currentRow.Cells.Item(3).Value = 10 + currentRow.Cells.Item(4).Value = 0.075 + + currentRow = worksheet.Rows.Item(2) + currentRow.Cells.Item(0).Value = 10248 + currentRow.Cells.Item(1).Value = 72 + currentRow.Cells.Item(2).Value = 34.8 + currentRow.Cells.Item(3).Value = 5 + currentRow.Cells.Item(4).Value = 0.075 + + currentRow = worksheet.Rows.Item(3) + currentRow.Cells.Item(0).Value = 10249 + currentRow.Cells.Item(1).Value = 14 + currentRow.Cells.Item(2).Value = 18.6 + currentRow.Cells.Item(3).Value = 9 + currentRow.Cells.Item(4).Value = 0.1 + + currentRow = worksheet.Rows.Item(4) + currentRow.Cells.Item(0).Value = 10249 + currentRow.Cells.Item(1).Value = 51 + currentRow.Cells.Item(2).Value = 42.4 + currentRow.Cells.Item(3).Value = 40 + currentRow.Cells.Item(4).Value = 0.1 +``` + + **C# の場合:** + +```csharp + Infragistics.Documents.Excel.WorksheetRow currentRow; + + currentRow = worksheet.Rows[1]; + currentRow.Cells[0].Value = 10248; + currentRow.Cells[1].Value = 42; + currentRow.Cells[2].Value = 9.80; + currentRow.Cells[3].Value = 10; + currentRow.Cells[4].Value = 0.075; + + currentRow = worksheet.Rows[2]; + currentRow.Cells[0].Value = 10248; + currentRow.Cells[1].Value = 72; + currentRow.Cells[2].Value = 34.80; + currentRow.Cells[3].Value = 5; + currentRow.Cells[4].Value = 0.075; + + currentRow = worksheet.Rows[3]; + currentRow.Cells[0].Value = 10249; + currentRow.Cells[1].Value = 14; + currentRow.Cells[2].Value = 18.60; + currentRow.Cells[3].Value = 9; + currentRow.Cells[4].Value = 0.1; + + currentRow = worksheet.Rows[4]; + currentRow.Cells[0].Value = 10249; + currentRow.Cells[1].Value = 51; + currentRow.Cells[2].Value = 42.40; + currentRow.Cells[3].Value = 40; + currentRow.Cells[4].Value = 0.1; +``` + +4. **データの下に Grand Total のラベルを作成します。** + 1. マージしたセルを作成し、データを更新して、ラベルを適用します。 + + **Visual Basic の場合:** + +```vb + Dim mergedCell As Infragistics.Documents.Excel.WorksheetMergedCellsRegion = _ + worksheet.MergedCellsRegions.Add(5, 0, 5, 4) + mergedCell.Value = "Grand Total" +``` + + **C# の場合:** + +```csharp + Infragistics.Documents.Excel.WorksheetMergedCellsRegion mergedCell = + worksheet.MergedCellsRegions.Add( 5, 0, 5, 4 ); + mergedCell.Value = "Grand Total"; +``` + + 2. Grand Total セルが配置される近くにラベルが表示されるように、テキストの配置を調整します。 + + **Visual Basic の場合:** + +```vb + mergedCell.CellFormat.Alignment = _ + Infragistics.Documents.Excel.HorizontalCellAlignment.Right +``` + + **C# の場合:** + +```csharp + mergedCell.CellFormat.Alignment = + Infragistics.Documents.Excel.HorizontalCellAlignment.Right; +``` + + ![](../../../images/images/ExcelEngine_Calculating_Order_Totals_01.png) + +5. **各注文記録の小計を計算するために数式を適用します。** + 1. 注文合計を計算する数式を作成します。数式は、次のように単価に数量を掛けて、合計から値引きを引きます。 =[UnitPrice]*[Quantity]*(1-[Discount])。最初の発注の注文合計を計算するかのように、数式を作成します（セル F2 の合計）。ただし、相対的なセルの参照を使用して数式は作成されます。したがって、その他の発注合計セルに適用されると、セル参照は正しく下に移動します。 + + **Visual Basic の場合:** + +```vb + Dim orderTotalFormula As Infragistics.Documents.Excel.Formula = _ + Infragistics.Documents.Excel.Formula.Parse("=C2*D2*(1-E2)", _ + Infragistics.Documents.Excel.CellReferenceMode.A1) +``` + + **C# の場合:** + +```csharp + Infragistics.Documents.Excel.Formula orderTotalFormula = + Infragistics.Documents.Excel.Formula.Parse( "=C2*D2*(1-E2)", Infragistics.Documents.Excel.CellReferenceMode.A1 ); +``` + + 2. 数式が適用されるセルを定義するセル領域を作成します。 + + **Visual Basic の場合:** + +```vb + Dim region As Infragistics.Documents.Excel.WorksheetRegion = _ + New Infragistics.Documents.Excel.WorksheetRegion(worksheet, 1, 5, 4, 5) +``` + + **C# の場合:** + +```csharp + Infragistics.Documents.Excel.WorksheetRegion region = + new Infragistics.Documents.Excel.WorksheetRegion( worksheet, 1, 5, 4, 5 ); +``` + + 3. 注文合計セルの領域に数式を適用します。 + + **Visual Basic の場合:** + +```vb + orderTotalFormula.ApplyTo(region) +``` + + **C# の場合:** + +```csharp + orderTotalFormula.ApplyTo( region ); +``` + + ![](../../../images/images/ExcelEngine_Calculating_Order_Totals_02.png) + +6. **総計を決定するために数式を適用します。** + 1. 総計を出すためにすべての「Order Total」セルを合計する数式を作成します。この数式は、ドル記号（$）を行および列の識別子の前に置くことで絶対参照を使用しますが、相対参照も同様に使用できます。 + + **Visual Basic の場合:** + +```vb + Dim grandTotalFormula As Infragistics.Documents.Excel.Formula = _ + Infragistics.Documents.Excel.Formula.Parse("=SUM($F$2:$F$5)", _ + Infragistics.Documents.Excel.CellReferenceMode.A1) +``` + + **C# の場合:** + +```csharp + Infragistics.Documents.Excel.Formula grandTotalFormula = + Infragistics.Documents.Excel.Formula.Parse( "=SUM($F$2:$F$5)", + Infragistics.Documents.Excel.CellReferenceMode.A1 ); +``` + + 2. 数式を総計セルに適用します。 + + **Visual Basic の場合:** + +```vb + grandTotalFormula.ApplyTo(worksheet.Rows.Item(5).Cells.Item(5)) +``` + + **C# の場合:** + +```csharp + grandTotalFormula.ApplyTo( worksheet.Rows[5].Cells[5] ); +``` + + ![](../../../images/images/ExcelEngine_Calculating_Order_Totals_03.png) + +7. **ワークブックを保存します。** + + ワークブックをファイルに書き出します。 + + **Visual Basic の場合:** + +```vb + workbook.Serialize("C:Orders.xls") +``` + + **C# の場合:** + +```csharp + workbook.Serialize( "C:Orders.xls" ); +``` diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/using/comments-in-a-worksheet-cell.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/using/comments-in-a-worksheet-cell.mdx new file mode 100644 index 0000000000..18978fcadc --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/using/comments-in-a-worksheet-cell.mdx @@ -0,0 +1,40 @@ +--- +title: "Worksheet セル内のコメント" +slug: excelengine-comments-in-a-worksheet-cell +--- + +# Worksheet セル内のコメント + +セル コメントは、セルまたはセルの範囲のコンテンツを説明または思い出すために使用されます。たとえば、関連付けられるセル内にある数式を説明するために使用することができます。Microsoft® Excel® の場合のように、Infragistics.Documents.Excel アセンブリの [`WorksheetCellComment`](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.WorksheetCellComment.html) クラスを使用して、セル コメントを Excel Worksheet に追加することができます。 + +コメントを持つセルは右上隅に赤い三角形が付きます。コメントを見るには、セルにポインタを配置します。セルからポインタを移動すると、コメントが消えます。 + +以下の例のコードはコメントをセルに追加する方法を表示します。 + +**Visual Basic の場合:** + + +```vb +Dim comment As Infragistics.Documents.Excel.WorksheetCellComment = New WorksheetCellComment () +Dim formatted As New FormattedString ("This is a comment") +comment.Text = formatted +worksheet4.Rows (10).Cells (2).Comment = comment +``` + + + +**C# の場合:** + + +```csharp +Infragistics.Documents.Excel.WorksheetCellComment comment = new WorksheetCellComment (); +FormattedString formatted = new FormattedString ("This is a comment"); +comment.Text = formatted; +worksheet4.Rows [10].Cells [2].Comment = comment; +``` + + + + + + diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/using/create-a-workbook.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/using/create-a-workbook.mdx new file mode 100644 index 0000000000..feda519e62 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/using/create-a-workbook.mdx @@ -0,0 +1,59 @@ +--- +title: "ワークブックを作成" +slug: excelengine-create-a-workbook +--- + +# ワークブックを作成 + +Excel アセンブリの機能を活用する前に、[Workbook](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.Workbook.html) オブジェクトを作成する必要があります。それを行うには、操作方法のトピック [Excel ファイルをブックに読み込む](/excelengine-read-an-excel-file-into-a-workbook)で説明したように既存の Microsoft® Excel® ファイルを読み込むか、ブランクのワークブックを作成します。ブランクのワークブックを作成する場合、それをファイルに書き込む前に、ワークシートを少なくとも 1 つ追加する必要があります。また、様々な表示および印刷のオプションをワークブックとワークシートに設定できます。 + +以下のコードは、ブランクのワークブックを作成、いくつかのプロパティを設定、ワークシートを追加の各方法を示します。 + +**Visual Basic の場合:** + +```vb +' Create a new workbook +Dim workbook As New Infragistics.Documents.Excel.Workbook() + +' Show only the vertical scroll bar +workbook.WindowOptions.ScrollBars = Infragistics.Documents.Excel.ScrollBars.Vertical + +' Create two worksheets for the workbook +Dim worksheet1 As Infragistics.Documents.Excel.Worksheet = _ + workbook.Worksheets.Add("Sheet1") +Dim worksheet2 As Infragistics.Documents.Excel.Worksheet = _ + workbook.Worksheets.Add("Sheet2") + +' Set the value of one of the cells +worksheet2.Rows.Item(0).Cells.Item(0).Value = 14.56 + +' Zoom in to double the normal viewing size on Sheet2 +worksheet2.DisplayOptions.MagnificationInNormalView = 200 + +' Make Sheet2 the selected worksheet +workbook.WindowOptions.SelectedWorksheet = worksheet2 +``` + +**C# の場合:** + +```csharp +// Create a new workbook +Infragistics.Documents.Excel.Workbook workbook = new Infragistics.Documents.Excel.Workbook(); + +// Show only the vertical scroll bar +workbook.WindowOptions.ScrollBars = Infragistics.Documents.Excel.ScrollBars.Vertical; + +// Create two worksheets for the workbook +Infragistics.Documents.Excel.Worksheet worksheet1 = workbook.Worksheets.Add( "Sheet1" ); +Infragistics.Documents.Excel.Worksheet worksheet2 = workbook.Worksheets.Add( "Sheet2" ); + +// Set the value of one of the cells +worksheet2.Rows[0].Cells[0].Value = 14.56; + +// Zoom in to double the normal viewing size on Sheet2 +worksheet2.DisplayOptions.MagnificationInNormalView = 200; + +// Make Sheet2 the selected worksheet +workbook.WindowOptions.SelectedWorksheet = worksheet2; +``` +![](../../../images/images/ExcelEngine_Create_a_Workbook_01.png) diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/using/creating-a-workbook-in-office-2007-xlsx-format.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/using/creating-a-workbook-in-office-2007-xlsx-format.mdx new file mode 100644 index 0000000000..81e6619439 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/using/creating-a-workbook-in-office-2007-xlsx-format.mdx @@ -0,0 +1,29 @@ +--- +title: "Office 2007 XLSX 形式でワークブックを作成" +slug: excelengine-creating-a-workbook-in-office-2007-xlsx-format +--- + +# Office 2007 XLSX 形式でワークブックを作成 + +Infragistics® Excel® オブジェクト ライブラリによって、新しい `xlsx` フォーマット（Excel2007）で Excel ファイルを作成できます。 + +`xlsx` フォーマットを作成および保存する時のプロジェクトの依存および参照についての詳細は、トピック [Office® 2007 xlsx ファイル生成の参照と依存](/excelengine-office-2007-xlsx-file-generation-references-and-dependencies)を参照してください。 + +以下のコード例は、Excel ワークブック用に新しい xlsx フォーマットを設定する方法を示します。 + +**Visual Basic の場合:** + + +```vb +Dim workbook As New Infragistics.Documents.Excel.Workbook() +workbook.SetCurrentFormat(WorkbookFormat.Excel2007) +``` + +**C# の場合:** + + +```csharp +Infragistics.Documents.Excel.Workbook workbook = new Infragistics.Documents.Excel.Workbook (); +workbook.SetCurrentFormat (WorkbookFormat.Excel2007); +``` + diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/using/freeze-rows-and-columns.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/using/freeze-rows-and-columns.mdx new file mode 100644 index 0000000000..930fd943a8 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/using/freeze-rows-and-columns.mdx @@ -0,0 +1,43 @@ +--- +title: "行と列をフリーズ" +slug: excelengine-freeze-rows-and-columns +--- + +# 行と列をフリーズ + +ワークシート上の特定のデータは常に表示されたままです（例、列ヘッダーや行の主要なフィールド）。このデータでは、ワークシートの上部の行と左側の列をフリーズできます。ワークシートで行をフリーズして垂直方向にワークシートをスクロールしても、これらの行はワークシートの上部に固定されたままです。同様に、水平方向のスクロールの位置にかかわらず、フリーズされた列はワークシートの左側に固定されます。フリーズされていない行と列は、ワークシートの右下のペインに存在します。どの行または列をこのペインで最初に表示されるかも指定できます。そのようにすることによって、ワークシートの垂直および水平方向のスクロールの位置を設定します。 + +以下のコードは、ワークシートで行と列をフリーズする方法を示します。 + +**Visual Basic の場合:** + +```vb +Dim workbook As New Infragistics.Documents.Excel.Workbook() +Dim worksheet As Infragistics.Documents.Excel.Worksheet = _ + workbook.Worksheets.Add("Sheet1") + +worksheet.DisplayOptions.PanesAreFrozen = True + +' One row is frozen at the top of the worksheet +worksheet.DisplayOptions.FrozenPaneSettings.FrozenRows = 1 + +' Two columns are frozen at the left of the worksheet +worksheet.DisplayOptions.FrozenPaneSettings.FrozenColumns = 2 +``` + +**C# の場合:** + +```csharp +Infragistics.Documents.Excel.Workbook workbook = new Infragistics.Documents.Excel.Workbook(); +Infragistics.Documents.Excel.Worksheet worksheet = + workbook.Worksheets.Add( "Sheet1" ); + +worksheet.DisplayOptions.PanesAreFrozen = true; + +// One row is frozen at the top of the worksheet +worksheet.DisplayOptions.FrozenPaneSettings.FrozenRows = 1; + +// Two columns are frozen at the left of the worksheet +worksheet.DisplayOptions.FrozenPaneSettings.FrozenColumns = 2; +``` + diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/using/getting-the-value-of-a-formula-from-an-excel-file.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/using/getting-the-value-of-a-formula-from-an-excel-file.mdx new file mode 100644 index 0000000000..82c756c9d5 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/using/getting-the-value-of-a-formula-from-an-excel-file.mdx @@ -0,0 +1,28 @@ +--- +title: "Excel ファイルから数式の値を取得" +slug: excelengine-getting-the-value-of-a-formula-from-an-excel-file +--- + +# Excel ファイルから数式の値を取得 + +Formula で表現された Excel の Cell の評価した値を取得するには、単純に [WorksheetCell](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.WorksheetCell.html) の [`Value`](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.WorksheetCell~Value.html) プロパティにアクセスします。 + +以下のコード例は、Excel 数式によって移植される特定の Excel ワークシート セルのアクセス方法を示します。 + +**Visual Basic の場合:** +```vb +lblValue.Text = theWorksheet.Rows[1].Cells[4].Value; +``` +**C# の場合:** +```csharp +lblValue.Text = theWorksheet.Rows[1].Cells[4].Value; +``` +## 関連トピック +- [Excel ファイルをワークブックに読み取る](/excelengine-read-an-excel-file-into-a-workbook) +- [サポートされる定義済み関数のリスト](ExcelEngine-List-of-Supported-Built-in-Functions.html) + + + + + + diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/using/list-of-supported-built-in-functions.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/using/list-of-supported-built-in-functions.mdx new file mode 100644 index 0000000000..c46b8d7f42 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/using/list-of-supported-built-in-functions.mdx @@ -0,0 +1,504 @@ +--- +title: "サポートされる定義済み関数のリスト" +--- + +# サポートされる定義済み関数のリスト + +## 概要 + +このドキュメントは Infragistics Excel Engine ですべてのサポートされる/サポートされない関数を列挙します。 + + +## サポートされる Excel 関数 + +* ABS +* ACOS +* ACOSH +* ACOT +* ACOTH +* ADDRESS +* AND +* ARABIC +* AREAS +* ASIN +* ASINH +* ATAN +* ATAN2 +* ATANH +* AVEDEV +* AVERAGE +* AVERAGEA +* AVERAGEIF +* AVERAGEIFS +* BASE +* BIN2DEC +* BIN2HEX +* BIN2OCT +* BINOM.DIST +* BINOM.DIST.RANGE +* BINOM.INV +* BINOMDIST +* BITAND +* BITLSHIFT +* BITOR +* BITRSHIFT +* BITXOR +* CEILING +* CEILING.MATH +* CEILING.PRECISE +* CHAR +* CHOOSE +* CLEAN +* CODE +* COLUMN +* COLUMNS +* COMBIN +* COMBINA +* COMPLEX +* CONCAT +* CONCATENATE +* CONVERT +* CORREL +* COS +* COSH +* COT +* COTH +* COUNT +* COUNTA +* COUNTBLANK +* COUNTIF +* COUNTIFS +* COVAR +* COVARIANCE.P +* COVARIANCE.S +* CRITBINOM +* CSC +* CSCH +* DATE +* DATEVALUE +* DAY +* DAYS +* DAYS360 +* DB +* DDB +* DEC2BIN +* DEC2HEX +* DEC2OCT +* DECIMAL +* DEGREES +* DELTA +* DEVSQ +* DOLLAR +* DOLLARDE +* DOLLARFR +* ECMA.CEILING +* EDATE +* EFFECT +* EOMONTH +* ERF +* ERF.PRECISE +* ERFC +* ERFC.PRECISE +* ERROR.TYPE +* EVEN +* EXACT +* EXP +* EXPON.DIST +* EXPONDIST +* FACT +* FACTDOUBLE +* FALSE +* FIND +* FISHER +* FISHERINV +* FIXED +* FLOOR +* FLOOR.MATH +* FLOOR.PRECISE +* FORECAST +* FORMULATEXT +* FV +* GCD +* GESTEP +* HEX2BIN +* HEX2DEC +* HEX2OCT +* HLOOKUP +* HOUR +* HYPERLINK +* IF +* IFERROR +* IFNA +* IFS +* IMABS +* IMAGINARY +* IMARGUMENT +* IMCONJUGATE +* IMCOS +* IMDIV +* IMEXP +* IMLN +* IMLOG10 +* IMLOG2 +* IMPOWER +* IMPRODUCT +* IMREAL +* IMSIN +* IMSQRT +* IMSUB +* IMSUM +* INDEX +* INDIRECT +* INFO +* INT +* INTERCEPT +* INTRATE +* IPMT +* IRR +* ISBLANK +* ISERR +* ISERROR +* ISEVEN +* ISFORMULA +* ISLOGICAL +* ISNA +* ISNONTEXT +* ISNUMBER +* ISO.CEILING +* ISODD +* ISREF +* ISTEXT +* LARGE +* LCM +* LEFT +* LEN +* LN +* LOG +* LOG10 +* LOOKUP +* LOWER +* MATCH +* MAX +* MAXIFS +* MDETERM +* MEDIAN +* MID +* MIN +* MINIFS +* MINUTE +* MINVERSE +* MMULT +* MOD +* MODE +* MODE.MULT +* MODE.SNGL +* MONTH +* MROUND +* MULTINOMIAL +* N +* NA +* NETWORKDAYS +* NOMINAL +* NOT +* NOW +* NPER +* NPV +* NUMBERVALUE +* OCT2BIN +* OCT2DEC +* OCT2HEX +* ODD +* OFFSET +* OR +* PDURATION +* PEARSON +* PERCENTILE +* PERCENTILE.EXC +* PERCENTILE.INC +* PERCENTRANK +* PERCENTRANK.EXC +* PERCENTRANK.INC +* PERMUT +* PERMUTATIONA +* PI +* PMT +* POISSON +* POISSON.DIST +* POWER +* PPMT +* PROB +* PRODUCT +* PROPER +* PV +* QUARTILE +* QUARTILE.EXC +* QUARTILE.INC +* QUOTIENT +* RADIANS +* RAND +* RANDBETWEEN +* RANK +* RANK.AVG +* RANK.EQ +* RATE +* REPLACE +* REPT +* RIGHT +* ROMAN +* ROUND +* ROUNDDOWN +* ROUNDUP +* ROW +* ROWS +* RRI +* RSQ +* SEARCH +* SEARCHB +* SEC +* SECH +* SECOND +* SERIESSUM +* SHEET +* SHEETS +* SIGN +* SIN +* SINH +* SKEW +* SKEW.P +* SLN +* SLOPE +* SMALL +* SQRT +* SQRTPI +* STANDARDIZE +* STDEV +* STDEV.P +* STDEV.S +* STDEVA +* STDEVP +* STDEVPA +* STEYX +* SUBSTITUTE +* SUBTOTAL +* SUM +* SUMIF +* SUMIFS +* SUMPRODUCT +* SUMSQ +* SUMX2MY2 +* SUMX2PY2 +* SUMXMY2 +* SWITCH +* SYD +* TAN +* TANH +* TEXT +* TEXTJOIN +* TIME +* TIMEVALUE +* TODAY +* TRANSPOSE +* TRIM +* TRIMMEAN +* TRUE +* TRUNC +* TYPE +* UPPER +* USDOLLAR +* VALUE +* VAR +* VAR.P +* VAR.S +* VARA +* VARP +* VARPA +* VLOOKUP +* WEEKDAY +* WEEKNUM +* WEIBULL +* WEIBULL.DIST +* WORKDAY +* XOR +* YEAR +* YEARFRAC + +## サポートされない Excel 関数 + +* ACCRINT +* ACCRINTM +* AGGREGATE +* AMORDEGRC +* AMORLINC +* ASC +* BAHTTEXT +* BESSELI +* BESSELJ +* BESSELK +* BESSELY +* BETA.DIST +* BETA.INV +* BETADIST +* BETAINV +* CELL +* CHIDIST +* CHIINV +* CHISQ.DIST +* CHISQ.DIST.RT +* CHISQ.INV +* CHISQ.INV.RT +* CHISQ.TEST +* CHITEST +* CONFIDENCE +* CONFIDENCE.NORM +* CONFIDENCE.T +* COUPDAYBS +* COUPDAYS +* COUPDAYSNC +* COUPNCD +* COUPNUM +* COUPPCD +* CUBEKPIMEMBER +* CUBEMEMBER +* CUBEMEMBERPROPERTY +* CUBERANKEDMEMBER +* CUBESET +* CUBESETCOUNT +* CUBEVALUE +* CUMIPMT +* CUMPRINC +* DATEDIF +* DATESTRING +* DAVERAGE +* DBCS +* DCOUNT +* DCOUNTA +* DGET +* DISC +* DMAX +* DMIN +* DPRODUCT +* DSTDEV +* DSTDEVP +* DSUM +* DURATION +* DVAR +* DVARP +* F.DIST +* F.DIST.RT +* F.INV +* F.INV.RT +* F.TEST +* FDIST +* FILTERXML +* FINDB +* FINV +* FORECAST.ETS +* FORECAST.ETS.CONFINT +* FORECAST.ETS.SEASONALITY +* FORECAST.ETS.STAT +* FORECAST.LINEAR +* FREQUENCY +* FTEST +* FVSCHEDULE +* GAMMA +* GAMMA.DIST +* GAMMA.INV +* GAMMADIST +* GAMMAINV +* GAMMALN +* GAMMALN.PRECISE +* GAUSS +* GEOMEAN +* GETPIVOTDATA +* GROWTH +* HARMEAN +* HYPGEOM.DIST +* HYPGEOMDIST +* HYPGEOMVERT +* IMCOSH +* IMCOT +* IMCSC +* IMCSCH +* IMSEC +* IMSECH +* IMSINH +* IMTAN +* ISOWEEKNUM +* ISPMT +* ISTHAIDIGIT +* KURT +* LEFTB +* LENB +* LINEST +* LOGEST +* LOGINV +* LOGNORM.DIST +* LOGNORM.INV +* LOGNORMDIST +* MAXA +* MDURATION +* MIDB +* MINA +* MIRR +* MNORMSINV +* MUNIT +* NEGBINOM.DIST +* NEGBINOMDIST +* NETWORKDAYS.INTL +* NORM.DIST +* NORM.INV +* NORM.S.DIST +* NORM.S.INV +* NORMDIST +* NORMINV +* NORMSDIST +* NORMSINV +* NUMBERSTRING +* ODDFPRICE +* ODDFYIELD +* ODDLPRICE +* ODDLYIELD +* PHI +* PHONETIC +* PRICE +* PRICEDISC +* PRICEMAT +* RECEIVED +* REPLACEB +* RIGHTB +* ROUNDBAHTDOWN +* ROUNDBAHTUP +* RTD +* T +* T.DIST +* T.DIST.2T +* T.DIST.RT +* T.INV +* T.INV.2T +* T.TEST +* TBILLEQ +* TBILLPRICE +* TBILLYIELD +* TDIST +* THAIDAYOFWEEK +* THAIDIGIT +* THAIMONTHOFYEAR +* THAINUMSOUND +* THAINUMSTRING +* THAISTRINGLENGTH +* THAIYEAR +* TINV +* TREND +* TTEST +* UNICHAR +* UNICODE +* VDB +* WEBSERVICE +* WORKDAY.INTL +* XIRR +* XNPV +* YIELD +* YIELDDISC +* YIELDMAT +* Z.TEST +* ZTEST \ No newline at end of file diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/using/merge-cells.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/using/merge-cells.mdx new file mode 100644 index 0000000000..86740290cb --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/using/merge-cells.mdx @@ -0,0 +1,79 @@ +--- +title: "セルの結合" +slug: excelengine-merge-cells +--- + +# セルの結合 +セルの値またはフォーマットの設定以外に、2 つ以上のセルをひとつのセルとして表示するためにセルをマージすることができます。セルをマージする場合、長方形の領域内にセルがなければなりません。マージされた領域の一部である場合、領域内の各セルは同じ値とセル フォーマットを持つことになります。さらに、これらのセルはすべて、[`AssociatedMergedCellsRegion`](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.WorksheetMergedCellsRegion.html) プロパティからアクセス可能な、同じ [`WorksheetMergedCellsRegion`](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.WorksheetCell~AssociatedMergedCellsRegion.html) オブジェクトと関連付けられます。`WorksheetMergedCellsRegion` オブジェクトもセルと同じ値とセル フォーマットを持ちます。領域または領域内の任意のセルの値（またはセル フォーマット）を設定すると、すべてのセルおよび領域の値を変更します。セルをマージしない場合、マージされた領域がワークシートから削除されたために、以前マージされたセルすべてはマージされる以前に指定された共有のセル フォーマットを保持します。ただし、領域の左上のセルのみが共有値を保持します。 + +以下のコードは、いくつかのセルをマージして、マージされたセル領域の値とフォーマットを設定する方法を示します。 + +**Visual Basic の場合:** + +```vb +Dim workbook As New Infragistics.Documents.Excel.Workbook() +Dim worksheet As Infragistics.Documents.Excel.Worksheet = _ + workbook.Worksheets.Add("Sheet1") + +' Make some column headers +worksheet.Rows.Item(1).Cells.Item(1).Value = "Morning" +worksheet.Rows.Item(1).Cells.Item(2).Value = "Afternoon" +worksheet.Rows.Item(1).Cells.Item(3).Value = "Evening" + +' Create a merged region that will be a header to the column headers +Dim mergedRegion1 As Infragistics.Documents.Excel.WorksheetMergedCellsRegion = _ + worksheet.MergedCellsRegions.Add(0, 1, 0, 3) + +' Set the value of the merged region +mergedRegion1.Value = "Day 1" + +' Give the merged region a solid background color +mergedRegion1.CellFormat.FillPattern = _ + Infragistics.Documents.Excel.FillPatternStyle.Solid +mergedRegion1.CellFormat.FillPatternForegroundColor = Color.SkyBlue + +' Set the cell alignment of the middle cell in the merged region. +' Since a cell and its merged region shared a cell format, this will +' ultimately set the format of the merged region +worksheet.Rows.Item(0).Cells.Item(2).CellFormat.Alignment = _ + Infragistics.Documents.Excel.HorizontalCellAlignment.Center +``` + +**C# の場合:** + +```csharp +Infragistics.Documents.Excel.Workbook workbook = new Infragistics.Documents.Excel.Workbook(); +Infragistics.Documents.Excel.Worksheet worksheet = workbook.Worksheets.Add( "Sheet1" ); + +// Make some column headers +worksheet.Rows[1].Cells[1].Value = "Morning"; +worksheet.Rows[1].Cells[2].Value = "Afternoon"; +worksheet.Rows[1].Cells[3].Value = "Evening"; + +// Create a merged region that will be a header to the column headers +Infragistics.Documents.Excel.WorksheetMergedCellsRegion mergedRegion1 = + worksheet.MergedCellsRegions.Add( 0, 1, 0, 3 ); + +// Set the value of the merged region +mergedRegion1.Value = "Day 1"; + +// Give the merged region a solid background color +mergedRegion1.CellFormat.FillPattern = + Infragistics.Documents.Excel.FillPatternStyle.Solid; +mergedRegion1.CellFormat.FillPatternForegroundColor = Color.SkyBlue; + +// Set the cell alignment of the middle cell in the merged region. +// Since a cell and its merged region shared a cell format, this will +// ultimately set the format of the merged region +worksheet.Rows[ 0 ].Cells[ 2 ].CellFormat.Alignment = + Infragistics.Documents.Excel.HorizontalCellAlignment.Center; +``` +![](../../../images/images/ExcelEngine_Merge_Cells_01.png) + + + + + + + + diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/using/moving-a-worksheet-within-an-excel-workbook.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/using/moving-a-worksheet-within-an-excel-workbook.mdx new file mode 100644 index 0000000000..68c250e651 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/using/moving-a-worksheet-within-an-excel-workbook.mdx @@ -0,0 +1,31 @@ +--- +title: "Excel ワークブック内でのワークシートの移動" +slug: excelengine-moving-a-worksheet-within-an-excel-workbook +--- + +# Excel ワークブック内でのワークシートの移動 +特定のケースで、所有する Excel® ワークブックのワークシート コレクションの特定のインデックス位置にワークシートを移動しなければならない場合があります。 + +Excel Workbook に 3 つのワークシートがある場合、[`Worksheet`](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.Worksheet.html) クラスの [`MoveToIndex`](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.Worksheet~MoveToIndex.html) メソッドを使用して worksheet3 を先頭の位置に配置できます。 + +以下の例のコードはこれを実装する方法を示します。 + +**Visual Basic の場合:** +```vb +Dim workbook As New Infragistics.Documents.Excel.Workbook () +Dim worksheet1 As Infragistics.Documents.Excel.Worksheet = workbook.Worksheets.Add ("Sheet1") +Dim worksheet2 As Infragistics.Documents.Excel.Worksheet = workbook.Worksheets.Add ("Sheet2") +Dim worksheet3 As Infragistics.Documents.Excel.Worksheet = workbook.Worksheets.Add ("Sheet3") +`Moving Sheet3 to the first position +worksheet3.MoveToIndex (0) +``` + +**C# の場合:** +```csharp + Infragistics.Documents.Excel.Workbook workbook = new Infragistics.Documents.Excel.Workbook (); + Infragistics.Documents.Excel.Worksheet worksheet1 = workbook.Worksheets.Add ("Sheet1"); + Infragistics.Documents.Excel.Worksheet worksheet2 = workbook.Worksheets.Add ("Sheet2"); + Infragistics.Documents.Excel.Worksheet worksheet3 = workbook.Worksheets.Add ("Sheet3"); +// Moving Sheet3 to the first position + worksheet3.MoveToIndex (0); +``` diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/using/office-2007-xlsx-file-generation-references-and-dependencies.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/using/office-2007-xlsx-file-generation-references-and-dependencies.mdx new file mode 100644 index 0000000000..cbf3f12a99 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/using/office-2007-xlsx-file-generation-references-and-dependencies.mdx @@ -0,0 +1,12 @@ +--- +title: "Office 2007 XLSX ファイル生成の参照と依存" +slug: excelengine-office-2007-xlsx-file-generation-references-and-dependencies +--- + +# Office 2007 XLSX ファイル生成の参照と依存 + +**.NET CLR 4.0 以上のバージョンの使用** + +Microsoft® Office® 2007 準拠の `xlsx` Excel ファイルを生成するために Infragistics® Excel® オブジェクト ライブラリおよびエクスポーターを使用する場合、.NET Framework CLR バージョン 4.0 以上が必要です。このシナリオでは、`Infragistics.Web.Mvc.Excel` アセンブリを参照します。xlsx ファイル作成ロジックに組み込まれる圧縮およびパッケージ機能は、.NET Framework CLR4.0 に依存します。 + + diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/using/populating-a-worksheet-from-a-dataset.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/using/populating-a-worksheet-from-a-dataset.mdx new file mode 100644 index 0000000000..660d6a7b35 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/using/populating-a-worksheet-from-a-dataset.mdx @@ -0,0 +1,187 @@ +--- +title: "DataSet からのデータをワークシートに格納" +slug: excelengine-populating-a-worksheet-from-a-dataset +--- + +# DataSet からのデータをワークシートに格納 + +## 始める前に +Microsoft® Excel® ワークシートの主な使用の目的はデータの表示です。データを既存の DataSet からワークブックに簡単に転送することができ、これを Excel で表示できます。`DataSet` はひとつ以上の `DataTable` オブジェクトで構成されます。各 `DataTable` はワークシートにマップできます。 + +## 達成すること +この詳細なガイドでは、データベースのテーブルから `DataSet` を作成する方法を示します。次にデータをその `DataSet` からワークブックにコピーして、Worksheet オブジェクトを作成し、`DataSet` の各 `DataTable` のデータを表示する方法を示します。 + +## 次の手順を実行します +1. **DataTable を作成し、既存のデータベースからのデータをこの DataTable に格納します。** + 1. Visual Basic または C# プロジェクトのウェブサイトを新しく作成します。 + 2. Button をフォームに追加します。 + 3. Button をダブルクリックして、その Click イベントのコード ビハインドを開きます。 + 4. 既存の Access データベースに接続し、データベース内のいくつかのテーブルからのデータを `DataSet` に移植します。 + + **Visual Basic の場合:** + +```vb + Dim northWindDbConnection As New System.Data.SqlClient.SqlConnection( _ + "Data Source=.SQLEXPRESS;AttachDbFilename=""C:Program FilesMicrosoft SQL ServerMSSQL.1MSSQLDataNorthwind.mdf"";Integrated Security=True;Connect Timeout=30;User Instance=True") + + Dim dataSet As New DataSet() + + northWindDbConnection.Open() + Try + Dim customersSelectCommand As New System.Data.SqlClient.SqlCommand("SELECT * FROM Customers", northWindDbConnection) + + Dim customersReader As System.Data.SqlClient.SqlDataReader = customersSelectCommand.ExecuteReader() + + ' Load all data from the customers table in the database + Dim customersTable As New DataTable("Customers") + customersTable.Load(customersReader) + ' Add the customers data table to the data set + dataSet.Tables.Add(customersTable) + + Dim ordersSelectCommand As New System.Data.SqlClient.SqlCommand("SELECT * FROM Orders", northWindDbConnection) + + Dim ordersReader As System.Data.SqlClient.SqlDataReader = ordersSelectCommand.ExecuteReader() + + ' Load all data from the customers orders in the database + Dim ordersTable As New DataTable("Orders") + ordersTable.Load(ordersReader) + ' Add the orders data table to the data set + dataSet.Tables.Add(ordersTable) + Finally + northWindDbConnection.Close() + End Try +``` + + **C# の場合:** + +```csharp + System.Data.SqlClient.SqlConnection northWindDbConnection = new System.Data.SqlClient.SqlConnection( + @"Data Source=.SQLEXPRESS;AttachDbFilename=""C:Program FilesMicrosoft SQL ServerMSSQL.1MSSQLDataNorthwind.mdf"";Integrated Security=True;Connect Timeout=30;User Instance=True"); + + DataSet dataSet = new DataSet(); + + northWindDbConnection.Open(); + try + { + System.Data.SqlClient.SqlCommand customersSelectCommand = new System.Data.SqlClient.SqlCommand( + "SELECT * FROM Customers", northWindDbConnection); + + System.Data.SqlClient.SqlDataReader customersReader = customersSelectCommand.ExecuteReader(); + + // Load all data from the customers table in the database + DataTable customersTable = new DataTable("Customers"); + customersTable.Load(customersReader); + // Add the customers data table to the data set + dataSet.Tables.Add(customersTable); + + System.Data.SqlClient.SqlCommand ordersSelectCommand = new System.Data.SqlClient.SqlCommand( + "SELECT * FROM Orders", northWindDbConnection); + + System.Data.SqlClient.SqlDataReader ordersReader = ordersSelectCommand.ExecuteReader(); + + // Load all data from the customers orders in the database + DataTable ordersTable = new DataTable("Orders"); + ordersTable.Load(ordersReader); + // Add the orders data table to the data set + dataSet.Tables.Add(ordersTable); + } + finally + { + northWindDbConnection.Close(); + } +``` + +2. **データをワークブックにロードします。** + 1. DataSet からのデータを保持するためにワークブックを作成します。 + + **Visual Basic の場合:** + +```vb + Dim workbook As New Infragistics.Documents.Excel.Workbook() +``` + + **C# の場合:** + +```csharp + Infragistics.Documents.Excel.Workbook workbook = new Infragistics.Documents.Excel.Workbook(); +``` + + 2. データ セットでデータ テーブルを反復し、それぞれにワークシートを作成します。また、データ テーブルからのデータをワークシートに移植します: + + **Visual Basic の場合:** + +```vb + For Each table As DataTable In dataSet.Tables + ' Create the worksheet to represent this data table + Dim worksheet As Infragistics.Documents.Excel.Worksheet = workbook.Worksheets.Add(table.TableName) + ' Create column headers for each column + For columnIndex As Integer = 0 To table.Columns.Count - 1 + worksheet.Rows.Item(0).Cells.Item(columnIndex).Value = table.Columns.Item(columnIndex).ColumnName + Next + ' Starting at row index 1, copy all data rows in + ' the data table to the worksheet + Dim rowIndex As Integer = 1 + For Each dataRow As DataRow In table.Rows + Dim row As Infragistics.Documents.Excel.WorksheetRow = _ + worksheet.Rows.Item(rowIndex) + rowIndex = rowIndex + 1 + For columnIndex As Integer = 0 To dataRow.ItemArray.Length - 1 + row.Cells.Item(columnIndex).Value = dataRow.ItemArray(columnIndex) + Next + Next + Next +``` + + **C# の場合:** + +```csharp + foreach (DataTable table in dataSet.Tables) + { + // Create the worksheet to represent this data table + Infragistics.Documents.Excel.Worksheet worksheet = workbook.Worksheets.Add(table.TableName); + + // Create column headers for each column + for (int columnIndex = 0; columnIndex < table.Columns.Count; columnIndex++) + { + worksheet.Rows[0].Cells[columnIndex].value = table.Columns[columnIndex].ColumnName; + } + + // Starting at row index 1, copy all data rows in + // the data table to the worksheet + int rowIndex = 1; + foreach (DataRow dataRow in table.Rows) + { + Infragistics.Documents.Excel.WorksheetRow row = worksheet.Rows[rowIndex++]; + + for (int columnIndex = 0; columnIndex < dataRow.ItemArray.Length; columnIndex++) + { + row.Cells[columnIndex].value = dataRow.ItemArray[columnIndex]; + } + } + } +``` + +3. **ワークブックを保存します。** + + ワークブックをファイルに書き出します。 + + **Visual Basic の場合:** + +```vb + workbook.Save("C:Data.xls") +``` + + **C# の場合:** + +```csharp + workbook.Save( "C:Data.xls" ); +``` +![](../../../images/images/ExcelEngine_Populating_a_Worksheet_from_a_DataSet_01.png) + + + + + + + + diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/using/read-an-excel-2007-xlsx-file-into-a-workbook.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/using/read-an-excel-2007-xlsx-file-into-a-workbook.mdx new file mode 100644 index 0000000000..5d3d55d311 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/using/read-an-excel-2007-xlsx-file-into-a-workbook.mdx @@ -0,0 +1,44 @@ +--- +title: "Excel 2007 XLSX ファイルをワークブックに読み込む" +slug: excelengine-read-an-excel-2007-xlsx-file-into-a-workbook +--- + +# Excel 2007 XLSX ファイルをワークブックに読み込む + +Microsoft® Excel® ファイルを書き出すだけでなく、Infragistics.Documents.Excel アセンブリはこれらのファイルを読み込むことができます。Excel ファイルが静的な [`Load`](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.Workbook~Load.html) メソッドで読み取られる時に、[`Workbook`](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.Workbook.html) オブジェクトが作成され、オブジェクト モデル全体にファイルからのすべてのサポートされる情報が移植されます。 + +特定のフォーマットのワークブックをロードし、それを別のフォーマットで保存したい場合、[Infragistics.Documents.Excel.Workbook](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.Workbook.html) クラスの [SetCurrentFormat](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.Workbook~SetCurrentFormat.html) メソッドを使用できます。また、[CurrentFormat](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.Workbook~CurrentFormat.html) プロパティは、現在のワークブック形式を取得するために使用できます。 + +xlsx フォーマットをロードおよび保存する時のプロジェクトの依存および参照についての詳細は、トピック [Office® 2007 xlsx ファイル生成の参照と依存](/excelengine-office-2007-xlsx-file-generation-references-and-dependencies)を参照してください。 + +> **注:** ワークブックを新しい xlsx フォーマット (Excel2007) でロードする時、Microsoft® Excel® などの安全なソースでワークブックが保存されたことを確信できる場合には、[Load](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.Workbook~Load.html) メソッドの verifyExcel2007Xml オーバーロードに False を割り当てることができます。大きいファイルに False を割り当てると、ロードされるファイルのコンテンツを検証することから Excel アセンブリは除外されます。これが順々にパフォーマンスを高めてより大きいファイルのロード時間を短縮します。 + +以下のコードは、既存の XLSX ワークブックで読み取り、変更を行い、ワークブックを新しいファイルに書き込む方法を示します。 + +**Visual Basic の場合:** + +```vb +Dim workbook As Infragistics.Documents.Excel.Workbook = _ + Infragistics.Documents.Excel.Workbook.Load("C:ExistingWorkbook.xlsx") + +workbook.Worksheets.Item(0).Rows.Item(0).Cells.Item(0).Value = 19 +workbook.Save("C:ModifiedWorkbook.xlsx") +``` + +**C# の場合:** + +```csharp +Infragistics.Documents.Excel.Workbook workbook = + Infragistics.Documents.Excel.Workbook.Load( "C:ExistingWorkbook.xlsx" ); + +workbook.Worksheets[0].Rows[0].Cells[0].Value = 19; +workbook.Save( "C:ModifiedWorkbook.xlsx" ); +``` + + + + + + + + diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/using/read-an-excel-file-into-a-workbook.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/using/read-an-excel-file-into-a-workbook.mdx new file mode 100644 index 0000000000..aab7b4da0b --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/using/read-an-excel-file-into-a-workbook.mdx @@ -0,0 +1,38 @@ +--- +title: "Excel ファイルをワークブックに読み取る" +slug: excelengine-read-an-excel-file-into-a-workbook +--- + +# Excel ファイルをワークブックに読み取る + +Microsoft® Excel® ファイルを書き出すだけでなく、Infragistics.Documents.Excel アセンブリはこれらのファイルを読み込むことができます。既存の Excel ファイルから [`Workbook`](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.Workbook.html) オブジェクトを作成し、変更を行い、修正したワークブックを含む新しいファイルを保存することができます。Excel ファイルが静的な [`Load`](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.Workbook~Load.html) メソッドで読み取られる時に、Workbook オブジェクトが作成され、オブジェクト モデル全体にファイルからのすべてのサポートされる情報が移植されます。ワークブックおよびワークシート オプションだけでなく、セル値、フォーマット、および画像はすべて、解析された Workbook からアクセスおよび修正可能です。 + +以下のコードは、既存のワークブックで読み取り、変更を行い、ワークブックを新しいファイルに書き込む方法を示します。 + +**Visual Basic の場合:** + +```vb +Dim workbook As Infragistics.Documents.Excel.Workbook = _ + Infragistics.Documents.Excel.Workbook.Load("C:ExistingWorkbook.xls") + +workbook.Worksheets.Item(0).Rows.Item(0).Cells.Item(0).Value = 19 +workbook.Save("C:ModifiedWorkbook.xls") +``` + +**C# の場合:** + +```csharp +Infragistics.Documents.Excel.Workbook workbook = + Infragistics.Documents.Excel.Workbook.Load( "C:ExistingWorkbook.xls" ); + +workbook.Worksheets[0].Rows[0].Cells[0].Value = 19; +workbook.Save( "C:ModifiedWorkbook.xls" ); +``` + + + + + + + + diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/using/resizing-rows-and-columns.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/using/resizing-rows-and-columns.mdx new file mode 100644 index 0000000000..c86c07fd35 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/using/resizing-rows-and-columns.mdx @@ -0,0 +1,179 @@ +--- +title: "行と列のサイズを変更" +slug: excelengine-resizing-rows-and-columns +--- + +# 行と列のサイズを変更 + +## 始める前に +ワークシートでは、セルに大量のテキストが含まれている場合もありますし、セルに大きな画像を表示させたい場合もあります。デフォルトのセル サイズではセルのコンテンツが入りきらない場合は、行、列、またはワークシート全体にあるすべてのセルの高さと幅を簡単に増やすことができます。 + +ただし、状況によっては、行の高さが自動的に増えるので、すべてのコンテンツが表示されます。たとえば、セル内のテキストを回転または折り返し、そのセルを含む行の高さが既定値の場合、すべてのコンテンツが表示されるように行の高さが自動的に増加します。列の幅は自動的に管理されないので、セルのコンテンツに関係なく常に一定のままです。 + +個々の行と列のサイズを変更することに加えて、ワークシートの [`DefaultRowHeight`](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.Worksheet~DefaultRowHeight.html) プロパティと [`DefaultColumnWidth`](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.Worksheet~DefaultColumnWidth.html) プロパティを設定することによって、すべての行と列のサイズを変更できます。 + +## 達成すること +この詳細なガイドでは、行を自動サイズ設定する方法をいくつか示します。さらに、セルがそのコンテンツを完全に含むように行と列を手動でサイズ調整する方法も紹介します。 + +## 次の手順を実行します +1. **ワークシートを使用してワークブックを作成します。** + 1. Visual Basic または C# プロジェクトを新しく作成します。 + 2. Button をフォームに追加します。 + 3. Button をダブルクリックして、その Click イベントのコード ビハインドを開きます。 + 4. ひとつのワークシートを使用してワークブックを作成します。 + + **Visual Basic の場合:** + +```vb + Dim workbook As New Infragistics.Documents.Excel.Workbook() + Dim worksheet As Infragistics.Documents.Excel.Worksheet = _ + workbook.Worksheets.Add("Sheet1") +``` + + **C# の場合:** + +```csharp + Infragistics.Documents.Excel.Workbook workbook = new Infragistics.Documents.Excel.Workbook(); + Infragistics.Documents.Excel.Worksheet worksheet = workbook.Worksheets.Add( "Sheet1" ); +``` + +2. **行の高さを自動的に変更します。** + 1. 行の高さがデフォルトのままのセル内のテキストを回転させます。行は、セルのコンテンツがちょうど収まるように自動サイズ設定されます。 + + **Visual Basic の場合:** + +```vb + worksheet.Rows.Item(0).Cells.Item(0).Value = "Rotated Text" + worksheet.Rows.Item(0).Cells.Item(0).CellFormat.Rotation = 70 +``` + + **C# の場合:** + +```csharp + worksheet.Rows[0].Cells[0].Value = "Rotated Text"; + worksheet.Rows[0].Cells[0].CellFormat.Rotation = 70; +``` + ![](../../../images/images/ExcelEngine_Resizing_Rows_and_Columns_01.png) + 2. 行の高さがデフォルトのままのセル内のテキストを折り返します。行は、セルのコンテンツがちょうど収まるように自動サイズ設定されます。 + + **Visual Basic の場合:** + +```vb + worksheet.Rows.Item(1).Cells.Item(1).Value = _ + "This text will be wrapped in the cell so all text is visible" + worksheet.Rows.Item(1).Cells.Item(1).CellFormat.WrapText = _ + Infragistics.Documents.Excel.ExcelDefaultableBoolean.True +``` + + **C# の場合:** + +```csharp + worksheet.Rows[1].Cells[1].Value = + "This text will be wrapped in the cell so all text is visible"; + worksheet.Rows[1].Cells[1].CellFormat.WrapText = + Infragistics.Documents.Excel.ExcelDefaultableBoolean.True; +``` + ![](../../../images/images/ExcelEngine_Resizing_Rows_and_Columns_02.png) + +3. **テキストがセルの外側に出ないように列のサイズを変更します。** + 1. テキストがセルの境界線の外側に出ないようにセルに十分なテキストを配置します。 + + **Visual Basic の場合:** + +```vb + worksheet.Rows.Item(2).Cells.Item(2).Value = _ + "This text will not be wrapped" +``` + + **C# の場合:** + +```csharp + worksheet.Rows[2].Cells[2].Value = "This text will not be wrapped"; +``` + ![](../../../images/images/ExcelEngine_Resizing_Rows_and_Columns_03.png) + + 2. すべてのテキストが表示されますが、値をセル D3 に設定すると、長いテキストは切り落とされます。セルの幅を増やすには、Worksheet の Columns コレクションからアクセス可能な WorksheetColumn の幅を増やします。 + + **Visual Basic の場合:** + +```vb + worksheet.Columns.Item(2).Width = 6100 +``` + + **C# の場合:** + +```csharp + worksheet.Columns[2].Width = 6100; +``` + ![](../../../images/images/ExcelEngine_Resizing_Rows_and_Columns_04.png) + +4. **セルに画像を配置して、画像が歪まないようにセルのサイズを変更します。** + 1. 画像を作成して、セル全体に収まるようにします。 + + **Visual Basic の場合:** + +```vb + Dim image As Image = image.FromFile("C:NA_Win_Forms.gif") + Dim imageShape As New Infragistics.Documents.Excel.WorksheetImage(image) + + imageShape.TopLeftCornerCell = worksheet.Rows.Item(3).Cells.Item(3) + imageShape.BottomRightCornerCell = worksheet.Rows.Item(3).Cells.Item(3) + imageShape.BottomRightCornerPosition = New PointF(100, 100) + + worksheet.Shapes.Add(imageShape) +``` + + **C# の場合:** + +```csharp + Image image = Image.FromFile( "C:NA_Win_Forms.gif" ); + Infragistics.Documents.Excel.WorksheetImage imageShape = + new Infragistics.Documents.Excel.WorksheetImage( image ); + + imageShape.TopLeftCornerCell = worksheet.Rows[3].Cells[3]; + imageShape.BottomRightCornerCell = worksheet.Rows[3].Cells[3]; + imageShape.BottomRightCornerPosition = new PointF( 100, 100 ); + + worksheet.Shapes.Add( imageShape ); +``` + ![](../../../images/images/ExcelEngine_Resizing_Rows_and_Columns_05.png) + + 2. 画像が歪まないようにセルの行と列の幅と高さを増やします。 + + **Visual Basic の場合:** + +```vb + worksheet.Rows.Item(3).Height = 600 + worksheet.Columns.Item(3).Width = 10000 +``` + + **C# の場合:** + +```csharp + worksheet.Rows[3].Height = 600; + worksheet.Columns[3].Width = 10000; +``` + + ![](../../../images/images/ExcelEngine_Resizing_Rows_and_Columns_06.png) + +5. **ワークブックを保存します。** + + ワークブックをファイルに書き出します。 + + **Visual Basic の場合:** + +```vb + workbook.Save("C:Resize.xls") +``` + + **C# の場合:** + +```csharp + workbook.Save( "C:Resize.xls" ); +``` + + + + + + diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/using/save-and-load-files-in-excel-template-format.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/using/save-and-load-files-in-excel-template-format.mdx new file mode 100644 index 0000000000..d88224cb84 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/using/save-and-load-files-in-excel-template-format.mdx @@ -0,0 +1,62 @@ +--- +title: "Excel テンプレート フォーマットでファイルを保存および読み込み" +slug: excelengine-save-and-load-files-in-excel-template-format +--- + +# Excel テンプレート フォーマットでファイルを保存および読み込み + +Infragistics Excel ライブラリは、テンプレート ファイルを定義できる 3 つのファイル形式があります。テンプレートの形式には、Excel テンプレート フォーマット（拡張子は XLTX）、Excel マクロに対応したテンプレート フォーマット（拡張子は XLTM）、および Excel 97-2003 テンプレート フォーマット（拡張子は XLT）があり、これらの形式で保存および読み込みが可能です。 + +[`WorkbookFormat`](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.WorkbookFormat.html) 列挙体は、XLTX、XLTM、および XLT に対応する値 Excel2007Template、Excel2007MacroEnabledTemplate、および Excel97To2003Template を含みます。[`CurrentFormat`](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.Workbook~CurrentFormat.html) プロパティは、ファイルの現在の形式を取得するために使用できます。拡張子が不明なファイルを読み込む場合、ファイル コンテンツは適切な形式を動的に決定するために解析されます。 + +以下のコードは、Excel ファイルを [`Save`](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.Workbook~Save.html) メソッドを使用して Excel2007Template 形式で保存します。 + +**Visual Basic の場合:** + +```vb +' Create a workbook and set its format to Excel2007Template +Dim newWorkBook As Infragistics.Documents.Excel.Workbook = New Workbook(WorkbookFormat.Excel2007Template) +' Add a worksheet to the workbook +Dim worksheet1 As Infragistics.Documents.Excel.Worksheet = newWorkBook.Worksheets.Add("Sheet1") +' Format a cell in the worksheet +worksheet1.Rows(1).Cells(1).CellFormat.FillPatternBackgroundColor = Color.Red +' Save the workbook +newWorkBook.Save("C:ExcelBookTemplate.xltx") +``` + +**C# の場合:** + +```csharp +// Create a workbook and set its format to Excel2007Template +Infragistics.Documents.Excel.Workbook newWorkBook = new Workbook(WorkbookFormat.Excel2007Template); +// Add a worksheet to the workbook +Infragistics.Documents.Excel.Worksheet worksheet1 = newWorkBook.Worksheets.Add("Sheet1"); +// Format a cell in the worksheet +worksheet1.Rows[1].Cells[1].CellFormat.FillPatternBackgroundColor = Color.Red; +// Save the workbook +newWorkBook.Save("C:ExcelBookTemplate.xltx"); +``` + +以下のコードは、[SetCurrentFormat](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.Workbook~SetCurrentFormat.html) メソッドを使用して既存の Excel ファイルの形式を変更します。 + +**Visual Basic の場合:** + +```vb +' Load an Existing Excel file +Dim workbook As Infragistics.Documents.Excel.Workbook = Infragistics.Documents.Excel.Workbook.Load("C:Book1.xlsx") +' Change the format to Excel2007Template +workbook.SetCurrentFormat(WorkbookFormat.Excel2007Template) +' Save the file in the modified format +workbook.Save("C:ModifiedBook1.xltx") +``` + +**C# の場合:** + +```csharp +// Load an Existing Excel file +Infragistics.Documents.Excel.Workbook workbook = Infragistics.Documents.Excel.Workbook.Load("C:Book1.xlsx"); +// Change the format to Excel2007Template +workbook.SetCurrentFormat(WorkbookFormat.Excel2007Template); +// Save the file in the modified format +workbook.Save("C:ModifiedBook1.xltx"); +``` diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/using/support-for-excel-workbooks-with-vba-code.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/using/support-for-excel-workbooks-with-vba-code.mdx new file mode 100644 index 0000000000..d42501b504 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/using/support-for-excel-workbooks-with-vba-code.mdx @@ -0,0 +1,28 @@ +--- +title: "VBA コードのある Excel ワークブックのサポート" +slug: excelengine-support-for-excel-workbooks-with-vba-code +--- + +# VBA コードのある Excel ワークブックのサポート + +Infragistics Excel Engine™ を使用して、既存の VBA マクロ コードが組み込まれている Microsoft® Excel® ワークブックをロードおよび保存したい場合があります。保存し直す時に Excel97-2003 および Excel2007 両方のロードされたワークブックから VBA コードをラウンドトリップすることが可能になりました。これは、Excel Engine を使用して VBA マクロを含む Excel ファイルを開き、オブジェクト モデルで演算を実行し、ファイルを保存することが可能であるため、VBA マクロはそのまま影響されないことを意味します。 + +マクロを持つ Excel97-2003 ワークブックはファイル拡張子 xls が付いて保存されますが、マクロを持つ Excel2007 ワークブックはマクロ対応のワークブックとして保存されるため、拡張子 `XLSX` ではなくファイル拡張子 `XLSM` が付いて保存される必要があります。 + +以下の例のコードは、VBA マクロ ラウンドトリップのサポートを実装する方法を示します。 + +**Visual Basic の場合:** + + +```vb +Dim workbook As New Infragistics.Documents.Excel.Workbook(WorkbookFormat.Excel2007MacroEnabled) +``` + + + +**C# の場合:** + + +```csharp +Infragistics.Documents.Excel.Workbook workbook = new Infragistics.Documents.Excel.Workbook (WorkbookFormat.Excel2007MacroEnabled); +``` diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/using/using-the-infragistics-excel-engine.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/using/using-the-infragistics-excel-engine.mdx new file mode 100644 index 0000000000..f9563e3f86 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/using/using-the-infragistics-excel-engine.mdx @@ -0,0 +1,36 @@ +--- +title: "Infragistics Excel Engine の使用" +slug: excelengine-using-the-infragistics-excel-engine +--- + +# Infragistics Excel Engine の使用 + +このセクションには、Infragistics Excel Engine™ を使用する際の一般的なシナリオを説明するチュートリアルが掲載されています。 + +- [参照文字列による Cells および Regions のアクセス](/excelengine-accessing-cells-and-regions-by-their-reference-strings) +- [画像をワークシートに追加](/excelengine-add-an-image-to-a-worksheet) +- [ドキュメント プロパティをワークブックに追加](/excelengine-add-document-properties-to-a-workbook) +- [形状をワークシートに追加](/excelengine-adding-shapes-to-a-worksheet) +- [Excel ファイルのセルへのハイパーリンクの追加](/excelengine-adding-a-hyperlink-to-a-cell-in-an-excel-file) +- [スタイルをセルに適用](/excelengine-applying-styles-to-cells) +- [注文合計を計算](/excelengine-calculating-order-totals) +- [ワークブックを作成](/excelengine-create-a-workbook) +- [Office 2007 XLSX 形式でワークブックを作成](/excelengine-creating-a-workbook-in-office-2007-xlsx-format) +- [Worksheet セル内のコメント](/excelengine-comments-in-a-worksheet-cell) +- [行と列をフリーズ](/excelengine-freeze-rows-and-columns) +- [Excel ファイルから数式の値を取得](/excelengine-getting-the-value-of-a-formula-from-an-excel-file) +- [セルの結合](/excelengine-merge-cells) +- [Excel ワークブック内でのワークシートの移動](/excelengine-moving-a-worksheet-within-an-excel-workbook) +- [DataSet からのデータをワークシートに格納](/excelengine-populating-a-worksheet-from-a-dataset) +- [Excel ファイルをワークブックに読み取る](/excelengine-read-an-excel-file-into-a-workbook) +- [Excel 2007 XLSX ファイルをワークブックに読み込む](/excelengine-read-an-excel-2007-xlsx-file-into-a-workbook) +- [行と列のサイズを変更](/excelengine-resizing-rows-and-columns) +- [Excel テンプレート フォーマットでファイルを保存および読み込み](/excelengine-save-and-load-files-in-excel-template-format) +- [VBA コードのある Excel ワークブックのサポート](/excelengine-support-for-excel-workbooks-with-vba-code) +- [ワークブックを Excel ファイルに書き出す](/excelengine-write-a-workbook-to-an-excel-file) + + + + + + diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/using/write-a-workbook-to-an-excel-file.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/using/write-a-workbook-to-an-excel-file.mdx new file mode 100644 index 0000000000..ad9a43bb41 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/using/write-a-workbook-to-an-excel-file.mdx @@ -0,0 +1,24 @@ +--- +title: "ワークブックを Excel ファイルに書き出す" +slug: excelengine-write-a-workbook-to-an-excel-file +--- + +# ワークブックを Excel ファイルに書き出す + +すべてのオプションとセル値を設定した後で、ワークブックでしなければならない最後の作業は、ファイルに書き出すことです。こうすることにより、Microsoft® Excel® で開くことができます。これは、[`Workbook`](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.Workbook~Save.html) オブジェクトの [`Save`](Infragistics.Web.Documents.Excel~Infragistics.Documents.Excel.Workbook.html) メソッドを使用して簡単に実行できます。ワークブックをストリームに書き出したり、ワークブック自体で xls ファイルを自動作成するようにすることができます。 + +> **注:** ワークブックを保存する前に、ワークブックには少なくともひとつの表示できるワークシートを含んでいる必要があります。含んでいない場合には、Save メソッドが呼び出されて例外がスローされます。 + +以下のコードは、ワークブックの作成が完了したらワークブックをファイルに書き出す方法を示します。 + +**Visual Basic の場合:** + +```vb +workbook.Save("C:Orders.xls") +``` + +**C# の場合:** + +```csharp +workbook.Save( "C:Orders.xls" ); +``` diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/win-infragistics-excel-engine.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/win-infragistics-excel-engine.mdx new file mode 100644 index 0000000000..6941c08d6b --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/excel-engine/win-infragistics-excel-engine.mdx @@ -0,0 +1,24 @@ +--- +title: "Infragistics Excel Engine" +slug: win-infragistics-excel-engine +--- + +# Infragistics Excel Engine + +Infragistics Excel Engine は、Worksheet を含み Microsoft® Excel® Workbooks 全体を作成する機能があります。このオブジェクト モデルを使用して、Excel ワークブックをロードおよび変更し、再度保存します。 + +以下のリンクをクリックして、Infragistics Excel Engine コントロールについての情報にアクセスします。 + +- [Infragistics Excel Engine の理解](/excelengine-understanding-the-infragistics-excel-engine): このセクションでは、Infragistics Excel Engine の機能をより良く理解するために助けとなるあらゆる情報や、アプリケーション構築の一環としてこのコントロールの機能を使いたくなる理由が説明されています。 + +- [Infragistics Excel Engine の使用](/excelengine-using-the-infragistics-excel-engine): このセクションでは、Infragistics Excel Engine を使用するときに実行する必要がある一般的なシナリオを、詳細に手順を追って紹介しています。 + +- [Infragistics Excel Engine の配備](/excelengine-deploying-the-infragistics-excel-engine): アプリケーションが Infragistics Excel Engine を使用する場合、アプリケーションの一部として再配布する必要がある Infragistics .NET アセンブリのリストのトピックを参照してください。 + +- [API の概要](/excelengine-api-overview): このトピックは、Infragistics Excel Engine でプログラミング中に作業する名前空間とクラスをリストします。このトピックの名前空間とクラスの一覧は、{environment:ProductName} ヘルプの API 参照ガイドへリンクします。 + + + + + + diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/igniteui-for-mvc-known-issues.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/igniteui-for-mvc-known-issues.mdx new file mode 100644 index 0000000000..994e002c4f --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/igniteui-for-mvc-known-issues.mdx @@ -0,0 +1,80 @@ +--- +title: "ラッパーの既知の問題と制限 ({environment:ProductNameMVC})" +slug: aspnet-mvc-wrappers-known-issues +--- + +# ラッパーの既知の問題と制限 ({environment:ProductNameMVC}) + + + +## 既知の問題点と制限の概要 + +以下の表は、{environment:ProductNameMVC} の既知の問題と制限の概要を示します。以下の表は、一部の問題の詳細な説明とその回避策を示します。 + + +凡例: | +--------|--------- +![](../images/images/positive.png) | 回避策 +![](../images/images/negative.png) | 既知の回避策はありません +![](../images/images/plannedFix.png) | 既知の回避策はありません。修正予定です。 + +### {environment:ProductNameMVC} + + +問題|説明|状態 +------|-------------|-------- +[MVC ヘルパー生成コードと MVC ローダーがカスタムの JavaScript ページ設定コードのあとに実行される](#helper-loader-scripts)|ASP.NET MVC ビューにおいてコントロールの MVC ローダーや MVC ヘルパーを使用した場合、それらが生成する JavaScript コードは、[`$(document).ready()`](http://api.jquery.com/ready/) や [`$(window).load()`](http://api.jquery.com/load-event/) イベントで渡されたカスタムのページ設定コードの後に実行されます。 | ![](../images/images/positive.png) +[AutoGenerateLayouts の既定値が変更される](#default-autogeneratelayouts)|グリッドの ASP.NET MVC ヘルパーでは、フラット グリッドに対して別のリモート データ要求が発行されることを防ぐために、`AutoGenerateLayouts` プロパティの既定値が false に変更されます。 | ![](../images/images/negative.png) +[MVC Razor レイアウト ビューで MVC Loader が正常に機能しない](#loader-layout-view)|ASP.NET MVC Loader を MVC Razor のレイアウト ビューに表示した場合、実際のビューにあるコントロールよりも前にローカルを初期化することはできません。 | ![](../images/images/positive.png) + + + +## 既知の問題点と制限の詳細 + +### MVC ヘルパー生成コードと MVC ローダーがカスタムの JavaScript ページ設定コードのあとに実行される + +ASP.NET MVC ビューにおいてコントロールの MVC ローダーや MVC ヘルパーを使用した場合、それらが生成する JavaScript コードは、[`$(document).ready()`](http://api.jquery.com/ready/) や [`$(window).load()`](http://api.jquery.com/load-event/) イベントで渡されたカスタムのページ設定コードの後に実行されます。 + +これは、コントロールがページの本文で描画され、スクリプト コードは通常先頭部分に入れられるためです。MVC ヘルパー コードが描画したコントロールをカスタム コードが参照する場合、コントロールがまだ存在しないため失敗する可能性があります。これはタイミングの問題であるため、MVC Loader が必要なリソースを読み込む速度によって左右されます。 + +> **回避方法** +> +> `dataBound` など、コントロール初期化シーケンスの最後のイベントにアタッチし、コントロールのすべての JavaScript コードをイベント ハンドラーから実行します。あるいは、以下のコード スニペットに示すように MVC ヘルパーのあとに短い `script` ブロックを追加することができます。以下のコードは、すべてのカスタム コードが `customControlLogic()` 関数によって処理されています。このため、コントロールに影響を与えるコードは、コントロールのインスタンスが作成されたあとで実行されるようになっています。 + +**JavaScript の場合:** + +```js +$.ig.loader(function () { + customControlLogic(); +}); +``` + +### AutoGenerateLayouts の既定値が変更される + +グリッドの ASP.NET MVC ヘルパーでは、フラット グリッドに対して別のリモート データ要求が発行されることを防ぐために、`AutoGenerateLayouts` プロパティの既定値が false に変更されます。 + +リモートの並べ替えやフィルタリングといったリモート データ バインド シナリオにおいて、[`AutoGenerateLayouts`](Infragistics.Web.Mvc~Infragistics.Web.Mvc.GridModel~AutoGenerateLayouts.html) を true に設定すると、データ ソースへの要求が増えることになります。`AutoGenerateLayouts` を false に設定すると、追加の要求を防止することができます。 + +> **注:** +> +> これは最新の変更です。 + +### MVC Razor レイアウト ビューで MVC Loader が正常に機能しない + +{environment:ProductNameMVC} Loader を MVC Razor のレイアウト ビューに表示した場合、実際のビューにあるコントロールよりも前にローカルを初期化することはできません。 + +ローダーが ASP.NET MVC レイザー アプリケーションのレイアウト ページに含まれている場合、{environment:ProductNameMVC} は適切なローダー コードを生成しません。ASP.NET MVC へルパーは通常の jQuery `$(function() { })` (document.ready) 構文を使用します。ASP.NET MVC Razor アプリケーションでのみ発生します。マスター ページのある MVC ASPX ビューでは、この問題は発生しません。 + +これは、特定のビューが描画されてからレイアウト ビューが処理/実行されるため、ビューのレンダリングの前にローダーを初期化することができないためです。 + +> **回避方法** +> +> アプリケーションで MVC ローダーを ASP.NET MVC Razor のレイアウト ページに含める代わりに、個別のビューの中に置きます。 + + + + + + + + diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/igniteui-for-mvc-mobile-known-issues.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/igniteui-for-mvc-mobile-known-issues.mdx new file mode 100644 index 0000000000..b7b8224b92 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/igniteui-for-mvc-mobile-known-issues.mdx @@ -0,0 +1,35 @@ +--- +title: "Mobile ラッパーの既知の問題と制限 ({environment:ProductNameMVC})" +slug: aspnet-mvc-mobile-wrappers-known-issues +--- + +# Mobile ラッパーの既知の問題と制限 ({environment:ProductNameMVC}) + + + +## 既知の問題点と制限の概要 + +以下の表は、{environment:ProductNameMVC} モバイル ラッパーの既知の問題と制限の概要を示します。 + +凡例: | +--------|--------- +![](../images/images/positive.png) | 回避策 +![](../images/images/negative.png) | 既知の回避策はありません +![](../images/images/plannedFix.png) | 既知の回避策はありません。修正予定です。 + + +### {environment:ProductName} ASP.NET MVC Mobile ラッパー (モバイル) + +問題|説明|状態 +------|-------------|-------- +モバイル コントロール ヘルパーの位置が変更された|2013.1 には、モバイル コントロール ヘルパーは *Infragistics.Web.MVC.dll* アセンブリの一部でした。2013.2 には、これらのヘルパーは *Infragistics.Web.MVC.Mobile* dll 内に常駐しています。 | ![](../images/images/positive.png) + + + + + + + + + + diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/mvcscaffolding/mvc-scaffolding.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/mvcscaffolding/mvc-scaffolding.mdx new file mode 100644 index 0000000000..072eb7bca8 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/mvcscaffolding/mvc-scaffolding.mdx @@ -0,0 +1,42 @@ +--- +title: "{environment:ProductNameMVC} Scaffolder の Visual Studio 拡張機能" +slug: mvc-scaffolding +--- + +# {environment:ProductNameMVC} Scaffolder の Visual Studio 拡張機能 + +### 概要 + + +2015.2 リリースでは、拡張機能 **{environment:ProductNameMVC}** Scaffolder が導入されました。 + +開発者はこの機能により、MVC ラッパーを使用したウィジェットの宣言や関連するコントローラのアクション メソッドを簡単に生成することができます。 +また、手動によるセットアップ、参照、コーディングに必要な時間を大幅に短縮することができます。 + + +現在、スキャフォールディング メカニズムには、**igGrid** コンポーネントが含まれていますが、間もなく公開されるリリースでは、さらに多くのコンポーネントが追加される予定です。 + + + +### 使用方法 + + +スキャフォールディング メカニズムを利用するには、次の手順に従ってください。 + + +1. Visual Studio で使用するプロジェクトまたは新しいプロジェクトを開きます。 +2. *ソリューション エクスプローラー*で、プロジェクト ノードまたはソリューションのいずれかのフォルダーを右クリックします。 +3. 「追加」メニュー項目をクリックし、「新しい Scaffolder 項目」オプションをクリックします。 +この一連の手順を、以下のスクリーンショットに示します。 +![](../../images/images/Step1.png) +4. 次に、スキャフォールディング項目の選択を促されます。「{environment:ProductName} ビュー」または「ビューを持つ {environment:ProductName} コントローラー」のどちらかを選択します。 +これらの選択オプションを、以下のスクリーンショットに示します。 +![](../../images/images/Step2.png) +この 2 つのオプションの違いは、ビューのみの追加とコントローラーを伴うビューの生成です。 +5. Scaffolder の次のセットアップ手順は、わずか 2 つの簡単な手順で構成されています。 +最初のタブで、ビュー名やテーマなどのスキャフォードされたコントロールの全般的なプロパティを設定します。 +2 番目のタブでは、*ページング*、*列の非表示*など、コンポーネントで有効にするプロパティを選択します。 +これは、以下のスクリーンショットに示されています。 +![](../../images/images/Step3.png) +6. 追加するコンポーネントの設定終了後、[追加] ボタンをクリックします。これにより、ウィジェットのラッパー定義を含むビューが、有効にしたすべての設定とともに自動的に追加されます。 +{environment:ProductName} のウィジェット ラッパーを含む標準のビューで通常行う場合と同様に、ビューのカスタマイズの追加、プロパティやメソッドの追加または削除をすることができます。 diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/using-ignite-ui-tag-helpers.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/using-ignite-ui-tag-helpers.mdx new file mode 100644 index 0000000000..c353c329be --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/using-ignite-ui-tag-helpers.mdx @@ -0,0 +1,147 @@ +--- +title: "{environment:ProductNameASPNETCore} タグ ヘルパーの使用" +slug: tag-helpers +--- + +# {environment:ProductNameASPNETCore} タグ ヘルパーの使用 + +## トピックの概要 + +このトピックは、新しい ASP.NET Core 1.0 で追加されるタグ ヘルパー構文を使用して {environment:ProductNameASPNETCore}™ コンポーネントを構成する方法を紹介します。 + +### このトピックの内容 + +このトピックは、以下のセクションで構成されます。 + +- [ビューのスコープにタグ ヘルパーを追加](#addtaghelper) +- [データ バインドされたコントロールの構成](#control-configuration) +- [関連コンテンツ](#related) + +## ビューのスコープにタグ ヘルパーを追加 + +すべての {environment:ProductName} タグ ヘルパーを現在のビュー スコープに追加するには、@addTagHelper 命令が使用されます: + +```csharp +@using Infragistics.Web.Mvc + +@addTagHelper *, Infragistics.Web.AspNetCore +``` + +列挙体オプションが使用されていない場合、名前空間を使用する必要はありません。 +特定のコントロールのみをビューに登録するには、コントロールのタグ ヘルパーの名前空間をワイルドカード (*) で終了して指定できます。 + +igGrids のみを登録する場合: + +```csharp +@using Infragistics.Web.Mvc + +@addTagHelper Infragistics.Web.Mvc.TagHelpers.Grids.*, Infragistics.Web.AspNetCore +``` + +## データ バインドされたコントロールの構成 + +このセクションでは、ig-grid タグ ヘルパーを使用して igGrid を構成する方法を紹介します。 + +以下のモデルを使用します: + +``` +namespace MyApp.Models +{ + using System; + + public class User + { + public int Id { get; set; } + + public string Username { get; set; } + + public string CountryId { get; set; } + + public DateTime BirthDate { get; set; } + + public bool IsAdmin { get; set; } + } +} +``` +ビューに登録します: + +```csharp +@model IQueryable +``` + +igGrid で更新機能を構成し、エディターを追加します: + +```html + + + + + + + + + + + + + + + + + + + + + + + +``` + +コントロールの構成は、HTML ヘルパーの使用する場合と同様です。 +コントロールはタグとして宣言し、オプションはタグ属性として設定します。 +ただし、ラムダ式の使用で設定されるオプションは子タグとして宣言されます。 + +たとえば、HTML ヘルパーで列の設定: + +```csharp +.Columns(column => +{ + column.For(m => m.Id).HeaderText("ID").Width("150px"); + column.For(m => m.Username).Width("200px"); + column.For(m => m.IsAdmin).HeaderText("Is аdmin").DataType("bool").Width("200px"); + column.For(m => m.BirthDate).HeaderText("Is аdmin").DataType("bool").Width("200px"); + column.For(m => m.CountryId).HeaderText("Country").Width("200px"); +}) +``` + +タグ ヘルパーの設定: + +```html + + + + + + + +``` + +## 関連コンテンツ +- [{environment:ProductNameASPNETCore} の使用](Using-IgniteUI-Controls-in-ASP.NET-Core-project.html) +- [コントロールを MVC プロジェクトに追加](../01_General-and-Getting-Started/00_Adding IgniteUI Controls to an MVC Project.mdx) diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/using-igniteui-controls-in-aspnet-core-project.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/using-igniteui-controls-in-aspnet-core-project.mdx new file mode 100644 index 0000000000..6540b3f884 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/using-igniteui-controls-in-aspnet-core-project.mdx @@ -0,0 +1,80 @@ +--- +title: "{environment:ProductNameASPNETCore} の使用" +slug: mvc-aspnet-core3 +--- + +# {environment:ProductNameASPNETCore} の使用 + +## トピックの概要 + +このトピックでは、.NET 7 用にビルドされた ASP.NET Core Web アプリケーションで {environment:ProductNameASPNETCore}™ コンポーネントを使用した作業の開始方法を説明します。 + +### このトピックの内容 + +このトピックは、以下のセクションで構成されます。 + +- [Infragistics Web MVC NuGet パッケージの参照](#nuget) +- [アップロード処理のために igUpload ミドルウェアを構成](#middleware) +- [関連コンテンツ](#related) + +## Infragistics Web MVC NuGet パッケージの参照 + +### ローカル フィードの使用 + +ASP.NET では、ほとんどのモジュールが NuGet パッケージとしてラップされています。これによってアプリケーションに必要な特定のモジュールのみを使用することができるため、共通アセンブリに依存する必要がなくなります。特定のモジュールのすべての依存関係は、追加設定なしに復元できます。 + +そのため、ASP.NET Core 上に構築されている新しい MVC ラッパーも NuGet パッケージとして提供されます。製品をインストール時に必要なパッケージをインストールするためのローカル フィードを作成する NuGet パッケージ モジュールを必ず含めてください。詳細については、[{environment:ProductName} NuGet パッケージの使用](/Using-Ignite-UI-NuGet-Packages)を参照してください。 + +コントロールの宣言は、以前の MVC バージョンと同じ構文です。詳細および例については、[コントロールを MVC プロジェクトに追加](../01_General-and-Getting-Started/00_Adding IgniteUI Controls to an MVC Project.mdx)を参照してください。 + +### オンライン プライベート フィードの使用 + +Infragistics がホストする NuGet サーバーを使用して、Infragistics Web MVC NuGet パッケージをインストールすることもできます。詳細については、[オンライン プライベート フィードからの Ignite UI パッケージのインストール](/Using-Ignite-UI-NuGet-Packages#privateFeedInstallation) トピックを参照してください。 + +## アップロード処理のために igUpload ミドルウェアを構成 + +以前の ASP.NET では、複数ファイルアップロード、大きなファイルのアプロード、アップロード状況のレポートなどより信頼性の高い機能を処理するために HttpModule および (または) HttpHandler を実装する必要がありました。 +ASP.NET Core では、新しいミドルウェア定義関連に構築された新しい要求パイプラインを提供します。 +{environment:ProductNameASPNETCore} ファイル アップロードは、新しいミドルウェア定義モデルを使用し、パイプラインに直接プラグインできます。 +2 つのミドルウェア モジュール - アップロード処理とクライアントからコマンドを受け取るモジュールとクライアントへステータス フィードバックを返すモジュールです。 +パイプラインに追加するには、MVC モジュールの前に Startup.cs クラスの Configure メソッドに含める必要があります。 + +**C# の場合:** + +```csharp + public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory) + { + ... + app.UseUploadModuleMiddleware(); + app.UseUploadHandlerMiddleware(); + + app.UseMvc(routes => + { + routes.MapRoute( + name: "default", + template: "{controller=Home}/{action=Index}/{id?}"); + }); + + ... + } +``` + +アップロードの追加設定は ConfigureServices メソッドで設定できます。オプションは宣言的に設定または構成ファイルによって設定できます。 + + + +**C# の場合:** + +```csharp + public void ConfigureServices(IServiceCollection services) + { + ... + services.Configure(options => { + options.FileUploadPath = Configuration["UploadAppSettings:fileUploadPath"]; + }); + } +``` + + +## 関連コンテンツ +- [コントロールを MVC プロジェクトに追加](../01_General-and-Getting-Started/00_Adding IgniteUI Controls to an MVC Project.mdx) \ No newline at end of file diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/word-library/understanding-infragistics-word-library/word-about-infragistics-word-library.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/word-library/understanding-infragistics-word-library/word-about-infragistics-word-library.mdx new file mode 100644 index 0000000000..cf57c0610d --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/word-library/understanding-infragistics-word-library/word-about-infragistics-word-library.mdx @@ -0,0 +1,161 @@ +--- +title: "Infragistics Word ライブラリについて" +slug: word-about-infragistics-word-library +--- + +# Infragistics Word ライブラリについて + +このトピックは、フォーワードのみのストリーマー アプローチとオブジェクト モデル アプローチという、Word 文書の作成に使用可能なアプローチを例を挙げて説明します。 + +トピックは以下のとおりです。 + +- [Word 文書を生成するためのアプローチ](#approaches) + - [フォーワードのみのストリーマー アプローチの実装](#streamer) + - [オブジェクト モデル アプローチの実装](#dom) +- [関連トピック](#related-content) + +## Word 文書を生成するためのアプローチ +Word ライブラリによって、Microsoft® Word® ドキュメントを作成できます。Word 文書は、フォーワードのみのストリーマー アプローチまたはオブジェクト モデル アプローチのいずれかを適用することで作成できます。それぞれのアプローチの長所と短所を以下に説明します。 + +フォーワードのみのストリーマー アプローチでは、パフォーマンスが向上しますが、使いやすさが劣ります。これは、ひとつのメソッドへの呼び出しと別のメソッドの呼び出しのバランスを取らなければならないためです。このエラーの結果は通常、実行を再開できない例外となります。もう一方のオブジェクト指向のアプローチは使いやすいのですが、データ量が多い場合大量のシステム メモリを使用します。 + +### フォーワードのみのストリーマー アプローチの実装 + +[WordDocumentWriter](Infragistics.Web.Documents.IO~Infragistics.Documents.Word.WordDocumentWriter.html) は、ワード プロセッシング データを含むストリームやファイルを生成する、高速で、キャッシュを使用しないフォーワードのみの方法を提供するストリーマー オブジェクトです。このオプションは Infragistics.Documents.IO アセンブリで利用できます。WordDocumentWriter オブジェクトによって、フォーワードのみのストリーマー アプローチを使用して、Word 文書を優れたパフォーマンスで作成できます。 + +WinGridWordWriter コンポーネントと WinFormattedTextWordWriter コンポーネントは、Word 機能にエクスポートするために WordDocumentWriter オブジェクトを使用します。これらのコンポーネントによってエクスポートされるコンテンツは、メモリにドキュメントを作成することなく、ファイルに直接エクスポートされます。このため、 RAM の使用量を抑え、大量のデータのエクスポートの間に発生するメモリの問題を回避します。 + +以下のセクションでは、コード例を使用して WordDocumentWriter クラスを使用する方法を示します。 + +#### 要件 + +Infragistics.Web.Documents.IO アセンブリへの参照が必要とされます。 + +#### インスタンスの作成 + +WordDocumentWriter クラスは抽象で、直接的なインスタンス作成をサポートしません。このため、派生クラスのインスタンスを作成するために [Create](Infragistics.Web.Documents.IO~Infragistics.Documents.Word.WordDocumentWriter~Create.html) メソッドを公開します。 + +**C# の場合:** + +```csharp +// Compile the file name +string filename = "C:SampleWordDoc"; + +// Create a new instance of the WordDocumentWriter class using the +// static 'Create' method. +using ( WordDocumentWriter writer = WordDocumentWriter.Create(filename) ) +{ +} +``` + +##### ブランクの Word 文書の作成 + +Word 文書を作成する時に最初に実行することは、ドキュメントの開始を指示することです。これは出力ストリームに and タグを書いて、さらなる入力のためにライターを準備します。以下のコードは、ブランクの Word 文書を開始および閉じる方法を示します。 + +**C# の場合:** + +```csharp +// Create a new instance of the WordDocumentWriter class using the +// static 'Create' method. +string filename = "C:SampleWordDoc"; + using ( WordDocumentWriter writer = WordDocumentWriter.Create(filename) ) +{ +// Start the document...note that each call to StartDocument must +// be balanced with a corresponding call to EndDocument. +writer.StartDocument(); + +// TODO: SOmething interesting + +// End the document. +writer.EndDocument(); +} +``` + +#### 段落の追加 + +以下のコード サンプルは、特定のフォントを使用して、テキスト ランで段落を追加する方法を示します。 + +**C# の場合:** + +```csharp +private void WriteParagraph( + WordDocumentWriter writer, + string text, + Infragistics.Documents.Word.Font font ) +{ + + // Open a paragraph + writer.StartParagraph(); + + // Add a text run with the specified text and font + writer.AddTextRun( text, font ); + + // Close the paragraph. + writer.EndParagraph(); +} +``` + +### オブジェクト モデル アプローチの実装 + +##### Document クラスの紹介 + +[Document](Infragistics.Web.Documents.Word~Infragistics.Documents.Word.Document.html) クラスは、Word 文書に関連付けられたすべてのコンテンツをカプセル化します。オブジェクト階層のルート レベルのエンティティで、この下にすべての他のオブジェクトがグループ化されています。Microsoft Word 文書を生成するには、[Document](Infragistics.Web.Documents.Word~Infragistics.Documents.Word.Document.html) クラスのインスタンスを作成し、公開されているプロパティとメソッドを使用して作業し、そして [Save](Infragistics.Web.Documents.Word~Infragistics.Documents.Word.Document~Save.html) メソッドを呼び出します。 + +##### 要件 + +オブジェクト モデル アプローチは、Infragistics.Web.Documents.IO アセンブリに加えて、Infragistics.Documents.Word アセンブリへの参照を必要とします。 + +##### ブランクの Word 文書の作成と保存 + +以下のコードは、Document クラスを使用して空のWord 文書を作成し、特定の場所に保存する方法を示します。 + +**C# の場合:** + +```csharp +// Create a new Word Document +Document doc = new Document(); + +string filename = "C:SampleDoc"; + +// Save the document +doc.Save(filename); +``` + +##### 段落の追加 + +以下のコード サンプルは、[Paragraph](Infragistics.Web.Documents.Word~Infragistics.Documents.Word.Paragraph.html) クラスを使用してテキストをドキュメントに追加して、印刷可能な領域の中央にテキストを配置する方法を示します。 + +##### Paragraph クラスの紹介 + +Paragraph クラスはドキュメントで単一の段落をカプセル化します。ドキュメントのコンテンツ ブロック コレクションにメンバーを追加することで、段落が作成されます。Paragraph は揃えて配置またはインデントが可能なテキスト ブロックを表示する機能を提供します。Paragraph クラスは、[ContentRuns](Infragistics.Web.Documents.Word~Infragistics.Documents.Word.Paragraph~ContentRuns.html) コレクションを公開します。これはコンテンツをパラグラフに追加する方法を提供します。 + +**C# の場合:** + +```csharp + // Create a new Word Document +Document doc = new Document(); + +string filename = "C:SampleDoc"; + +// Add a paragraph to the document +Paragraph p = doc.ContentBlocks.AddParagraph(); + +// Center align the paragraph +p.Properties.Alignment = ParagraphAlignment.Center; + +// Add a text run to the paragraph +p.ContentRuns.AddTextRun("Hello World"); + +// Save the document +doc.Save(filename); +``` + +## 関連トピック +- [Infragistics Word ライブラリの使用](/word-using-the-infragistics-word-library) +- [Word 文書生成の参照と依存関係](/word-word-document-generation-references-and-dependencies) + + + + + + diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/word-library/understanding-infragistics-word-library/word-understanding-infragistics-word-library.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/word-library/understanding-infragistics-word-library/word-understanding-infragistics-word-library.mdx new file mode 100644 index 0000000000..78385f64ec --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/word-library/understanding-infragistics-word-library/word-understanding-infragistics-word-library.mdx @@ -0,0 +1,18 @@ +--- +title: "Infragistics Word ライブラリの理解" +slug: word-understanding-infragistics-word-library +--- + +# Infragistics Word ライブラリの理解 +このセクションのトピックを読むと、アプリケーションで Word ライブラリを使用することの利点を理解できます。 + +以下のリンクをクリックして、Word ライブラリについての情報にアクセスします。 + +- [Infragistics Word ライブラリについて](/word-about-infragistics-word-library) +- [Word 文書生成の参照と依存関係](/word-word-document-generation-references-and-dependencies) + + + + + + diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/word-library/understanding-infragistics-word-library/word-word-document-generation-references-and-dependencies.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/word-library/understanding-infragistics-word-library/word-word-document-generation-references-and-dependencies.mdx new file mode 100644 index 0000000000..0826152af1 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/word-library/understanding-infragistics-word-library/word-word-document-generation-references-and-dependencies.mdx @@ -0,0 +1,20 @@ +--- +title: "Word 文書生成の参照と依存関係" +slug: word-word-document-generation-references-and-dependencies +--- + +# Word 文書生成の参照と依存関係 + +## .NET CLR 4.0 以上のバージョンの使用 + +Microsoft® Word® ドキュメントを生成するために Infragistics® Word ライブラリおよびエクスポーターを使用する場合、.NET Framework CLR バージョン 4.0 以上が必要です。このシナリオでは、Infragistics.Web.Documents.IO アセンブリを参照します。Word 文書作成ロジックに組み込まれる圧縮およびパッケージ機能は、.NET Framework CLR4.0 に依存します。 + +## 関連トピック +- [Infragistics Word ライブラリの使用](/word-using-the-infragistics-word-library) +- [Infragistics Word ライブラリについて](/word-about-infragistics-word-library) + + + + + + diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/word-library/using-infragistics-word-library/word-add-images-to-word-document.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/word-library/using-infragistics-word-library/word-add-images-to-word-document.mdx new file mode 100644 index 0000000000..9678a58cd4 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/word-library/using-infragistics-word-library/word-add-images-to-word-document.mdx @@ -0,0 +1,198 @@ +--- +title: "画像を Word 文書に追加" +slug: word-add-images-to-word-document +--- + +# 画像を Word 文書に追加 + +Infragistics® Word ライブラリは、[WordDocumentWriter](Infragistics.Web.Documents.IO~Infragistics.Documents.Word.WordDocumentWriter.html) ストリーマー オブジェクトを使用して、新しい Word 文書に追加できる 2 種類の画像をサポートします。それらはアンカー固定画像とインライン画像（ピクチャーとも言う）です。 + +アンカー固定はドキュメント内の特定の位置に「アンカー固定された」画像で、隣接するテキストはその境界の周りに配置されます。これとは対照的に、「インライン」画像は段落内で隣接するコンテンツとともに移動します。 + +以下のスクリーンショットは、アンカー固定した画像およびインライン画像がある Word 文書を表示します。 + +![](../../../images/images/Word_Add_Images_to_Word_Document_01.png) + +> **注:** アンカー固定した画像およびインライン画像を追加するコードは、WordDocumentWriter オブジェクトの [StartParagraph](Infragistics.Web.Documents.IO~Infragistics.Documents.Word.WordDocumentWriter~StartParagraph.html) メソッドと [EndParagraph](Infragistics.Web.Documents.IO~Infragistics.Documents.Word.WordDocumentWriter~EndParagraph.html) メソッドの間に配置する必要があります。 + +## アンカー固定した画像の追加 +アンカー固定した画像を現在の段落に追加するには、WordDocumentWriter クラスのインスタンスを使用して、AnchoredPicture のインスタンスを返す [CreateAnchoredPicture](Infragistics.Web.Documents.IO~Infragistics.Documents.Word.WordDocumentWriter~CreateAnchoredPicture.html) メソッドを呼び出します。この参照は、WordDocumentWriter オブジェクトの [AddAnchoredPicture](Infragistics.Web.Documents.IO~Infragistics.Documents.Word.WordDocumentWriter~AddAnchoredPicture.html) メソッドにパラメーターとして渡されます。 + +**C# の場合:** + +```csharp +// Create a new instance of the WordDocumentWriter class using the +// static 'Create' method. +WordDocumentWriter docWriter = WordDocumentWriter.Create(@"C:TestWordDoc.docx"); +// Get Image +Image img = Image.FromFile(@"....Ballon_New_Year.jpg"); +// Create an Anchored Image +AnchoredPicture anchPic = docWriter.CreateAnchoredPicture(img); +docWriter.AddAnchoredPicture(anchPic); +``` + +**Visual Basic の場合:** + +```vb +' Create a new instance of the WordDocumentWriter class using the +' static 'Create' method. +Dim docWriter As WordDocumentWriter = WordDocumentWriter.Create("C:\TestWordDoc.docx") +' Get Image +Dim img As Image = Image.FromFile("..\..\Ballon_New_Year.jpg") +' Create an Anchored Image +Dim anchPic As AnchoredPicture = docWriter.CreateAnchoredPicture(img) +docWriter.AddAnchoredPicture(anchPic) +``` + +## インライン画像の追加 +インライン画像を段落に追加するには、WordDocumentWriter オブジェクトの [AddInlinePicture](Infragistics.Web.Documents.IO~Infragistics.Documents.Word.WordDocumentWriter~AddInlinePicture.html) メソッドを使用します。 + +**C# の場合:** + +```csharp +// Create a new instance of the WordDocumentWriter class using the +// static 'Create' method. +WordDocumentWriter docWriter = WordDocumentWriter.Create(@"C:TestWordDoc.docx"); +// Get Image +Image img = Image.FromFile(@"....Ballon_New_Year.jpg"); +// Add an Inline picture +docWriter.AddInlinePicture(img); +``` + +**Visual Basic の場合:** + +```vb +' Create a new instance of the WordDocumentWriter class using the +' static 'Create' method. +Dim docWriter As WordDocumentWriter = WordDocumentWriter.Create("C:\TestWordDoc.docx") +' Get Image +Dim img As Image = Image.FromFile("..\..\Ballon_New_Year.jpg") +' Add an Inline picture +docWriter.AddInlinePicture(img) +``` + +> **注:** AddAnchoredPicture メソッドまたは AddInlinePicture メソッドが使用される前に、StartParagraph メソッドを使用して段落を開始する必要があります。そうしないと例外がスローされます。 + +アンカー固定した画像の周囲に表示されるアウトラインのプロパティを定義するには、PictureOultlineProperties クラスを使用できます。WordDocumentWriter オブジェクトの [CreatePictureOutlineProperties](Infragistics.Web.Documents.IO~Infragistics.Documents.Word.WordDocumentWriter~CreatePictureOutlineProperties.html) メソッドは、PictureOutlineProperties クラスへの参照を含むインスタンスを返します。この参照はさまざまなアウトライン プロパティを公開します。これらのプロパティはアンカー固定した画像のみに定義できます。 + +**C# の場合:** + +```csharp +// Define the picture outline properties +PictureOutlineProperties picOutlineProps = docWriter.CreatePictureOutlineProperties(); +picOutlineProps.Color = Color.Violet; +picOutlineProps.Style = PictureOutlineStyle.Single; +picOutlineProps.LineWidth = 1; +' Get Image +Image img = Image.FromFile(@"....Ballon_New_Year.jpg"); +// Create an Anchored Image +AnchoredPicture anchPic = docWriter.CreateAnchoredPicture(img); +anchPic.AlternateTextDescription = "Word Image"; +anchPic.Outline.Color = picOutlineProps.Color; +anchPic.Outline.Style = picOutlineProps.Style; +anchPic.Outline.LineWidth = picOutlineProps.LineWidth; +``` + +**Visual Basic の場合:** + +```vb +' Define the picture outline properties +Dim picOutlineProps As PictureOutlineProperties = docWriter.CreatePictureOutlineProperties() +picOutlineProps.Color = Color.Violet +picOutlineProps.Style = PictureOutlineStyle.[Single] +picOutlineProps.LineWidth = 1 +' Get Image +Dim img As Image = Image.FromFile("..\..\Ballon_New_Year.jpg") +' Create an Anchored Image +Dim anchPic As AnchoredPicture = docWriter.CreateAnchoredPicture(img) +' Assign the picture outline properties for anchored image +anchPic.AlternateTextDescription = "Word Image" +anchPic.Outline.Color = picOutlineProps.Color +anchPic.Outline.Style = picOutlineProps.Style +anchPic.Outline.LineWidth = picOutlineProps.LineWidth +``` + +## アンカー固定した画像とインライン画像をミックス +**C# の場合:** + +```csharp +// Create a new instance of the WordDocumentWriter class using the +// static 'Create' method. +WordDocumentWriter docWriter = WordDocumentWriter.Create(@"C:TestWordDoc.docx"); + +docWriter.StartDocument(); +docWriter.StartParagraph(); +docWriter.AddTextRun("A paragraph is a series of sentences that are organized and coherent, and are all related to a single topic. Almost every piece of writing you do that is longer than a few sentences should be organized into paragraphs."); + +// Define the picture outline properties +PictureOutlineProperties picOutlineProps = docWriter.CreatePictureOutlineProperties(); +picOutlineProps.Color = Color.Violet; +picOutlineProps.Style = PictureOutlineStyle.Single; +picOutlineProps.LineWidth =1; +// Get Image +Image img = Image.FromFile(@"....Ballon_New_Year.jpg"); + +// Create an Anchored Image +AnchoredPicture anchPic = docWriter.CreateAnchoredPicture(img); +// Assign the picture outline properties for anchored image +anchPic.AlternateTextDescription = "Word Image"; +anchPic.Outline.Color = picOutlineProps.Color; +anchPic.Outline.Style = picOutlineProps.Style; +anchPic.Outline.LineWidth = picOutlineProps.LineWidth; +docWriter.AddAnchoredPicture(anchPic); + +// Add an Inline picture +docWriter.AddInlinePicture(img); + +docWriter.EndParagraph(); +docWriter.EndDocument(); +docWriter.Close(); +``` + +**Visual Basic の場合:** + +```vb +' Create a new instance of the WordDocumentWriter class using the +' static 'Create' method. +Dim docWriter As WordDocumentWriter = WordDocumentWriter.Create("C:\TestWordDoc.docx") +docWriter.StartDocument() +docWriter.StartParagraph() +docWriter.AddTextRun("A paragraph is a series of sentences that are organized and coherent, and are all related to a single topic. Almost every piece of writing you do that is longer than a few sentences should be organized into paragraphs.") + +' Define the picture outline properties +Dim picOutlineProps As PictureOutlineProperties = docWriter.CreatePictureOutlineProperties() +picOutlineProps.Color = Color.Violet +picOutlineProps.Style = PictureOutlineStyle.[Single] +picOutlineProps.LineWidth =1 +' Get Image +Dim img As Image = Image.FromFile("..\..\Ballon_New_Year.jpg") + +' Create an Anchored Image +Dim anchPic As AnchoredPicture = docWriter.CreateAnchoredPicture(img) +' Assign the picture outline properties for anchored image +anchPic.AlternateTextDescription = "Word Image" +anchPic.Outline.Color = picOutlineProps.Color +anchPic.Outline.Style = picOutlineProps.Style +anchPic.Outline.LineWidth = picOutlineProps.LineWidth +docWriter.AddAnchoredPicture(anchPic) + +' Add an Inline picture +docWriter.AddInlinePicture(img) + +docWriter.EndParagraph() +docWriter.EndDocument() +docWriter.Close() +``` + +## 関連トピック +- [Word 文書の作成](/word-create-a-word-document) +- [書式設定を Word 文書に適用](/word-apply-formatting-to-word-document) +- [テーブルを Word 文書に追加](/word-add-table-to-word-document) +- [ヘッダー、フッター、ページ番号](/word-headers-footers-and-page-numbers) +- [Infragistics Word ライブラリの理解](/word-understanding-infragistics-word-library) + + + + + + diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/word-library/using-infragistics-word-library/word-add-table-to-word-document.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/word-library/using-infragistics-word-library/word-add-table-to-word-document.mdx new file mode 100644 index 0000000000..d4344492cf --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/word-library/using-infragistics-word-library/word-add-table-to-word-document.mdx @@ -0,0 +1,240 @@ +--- +title: "テーブルを Word 文書に追加" +slug: word-add-table-to-word-document +--- + +# テーブルを Word 文書に追加 + +このドキュメントは、Word 文書に見出し行とネストされたテーブルがあるテーブルを追加する方法を示します。 + +トピックは以下のとおりです。 + +- [概要](#Intro) +- [要件](#Req) +- [書式設定されたテーブル - 概要](#FormatTable) +- [コード例](#Ex) +- [関連トピック](#relatedTopics) + +## 概要 +Infragistics® Word ライブラリによって、Word 文書にテーブルを挿入することができます。テーブルによって簡単にテキストの列や行を配置できます。 + +## 要件 +Infragsitics3.Documents.IO アセンブリへの参照が必要とされます。 + +## 書式設定されたテーブル - 概要 +書式設定されたテーブル、テーブルの行、テーブルのセルは、以下のようなさまざまなクラスで処理されます。 + +- [TableProperties](Infragistics.Web.Documents.IO~Infragistics.Documents.Word.TableProperties.html) +- [TableRowProperties](Infragistics.Web.Documents.IO~Infragistics.Documents.Word.TableRowProperties.html) +- [TableCellProperties](Infragistics.Web.Documents.IO~Infragistics.Documents.Word.TableCellProperties.html) +- [TableBorderProperties](Infragistics.Web.Documents.IO~Infragistics.Documents.Word.TableBorderProperties.html) + +## コード例 +### 実例 : ヘッダー行のあるテーブルを作成 +以下のコードは、[WordDocumentWriter](Infragistics.Web.Documents.IO~Infragistics.Documents.Word.WordDocumentWriter.html) ストリーマー オブジェクトを使用して 2 列と 3 行のテーブルを作成します。最初の行は、TableRowProperties オブジェクトの [IsHeaderRow](Infragistics.Web.Documents.IO~Infragistics.Documents.Word.TableRowProperties~IsHeaderRow.html) プロパティを使用してヘッダー行として設定されます。 + +## プレビュー +以下は最終結果のプレビューです。 + +![](../../../images/images/Word_Add_Table_To_Word_Document_01.png) + +### 図 1: サンプル コードによって作成された Word 文書のヘッダーが付いたテーブル + +## コード サンプル +**C# の場合:** + +```csharp +using Infragistics.Documents.Word; + +// Create a new instance of the WordDocumentWriter class using the +// static 'Create' method. +// This instance must be closed once content is written into Word. +WordDocumentWriter docWriter = WordDocumentWriter.Create(@"C:TestWordDoc.docx"); +docWriter.StartDocument(); + +// Create border properties for Table +TableBorderProperties borderProps = docWriter.CreateTableBorderProperties(); +borderProps.Color = Color.Red; +borderProps.Style = TableBorderStyle.Double; +// Create table properties +TableProperties tableProps = docWriter.CreateTableProperties(); +tableProps.Alignment = ParagraphAlignment.Center; +tableProps.BorderProperties.Color = borderProps.Color; +tableProps.BorderProperties.Style = borderProps.Style; +// Create table row properties +TableRowProperties rowProps = docWriter.CreateTableRowProperties(); +//Make the row a Header +rowProps.IsHeaderRow = true; +// Create table cell properties +TableCellProperties cellProps = docWriter.CreateTableCellProperties(); +cellProps.BackColor = Color.DarkGray; +cellProps.TextDirection = TableCellTextDirection.LeftToRightTopToBottom; + +// Begin a table with 2 columns, and apply the table properties +docWriter.StartTable(2, tableProps); +// Begin a Row and apply table row properties +// This row will be set as the Header row by the row properties +// HEADER ROW +docWriter.StartTableRow(rowProps); +// Cell Value for 1st row 1st column +// Start a Paragraph and add a text run to the cell +docWriter.StartTableCell(cellProps); +docWriter.StartParagraph(); +docWriter.AddTextRun("Header Row1 Col1"); +docWriter.EndParagraph(); +docWriter.EndTableCell(); +// Cell value for 1st row 2nd column +docWriter.StartTableCell(cellProps); +docWriter.StartParagraph(); +docWriter.AddTextRun("Header Row1 Col2"); +docWriter.EndParagraph(); +docWriter.EndTableCell(); +// End the Table Row +docWriter.EndTableRow(); + +// Reset the cell properties, so that the +// cell properties are different from the header cells. +cellProps.Reset(); +cellProps.BackColor = Color.AliceBlue; + +// DATA ROW +docWriter.StartTableRow(); +// Cell Value for 2nd row 1st column +docWriter.StartTableCell(cellProps); +docWriter.StartParagraph(); +docWriter.AddTextRun("A paragraph is a series of sentences that are organized and coherent, and are all related to a single topic. "); +docWriter.EndParagraph(); +docWriter.EndTableCell(); +// Cell Value for 2nd row 2nd column +docWriter.StartTableCell(cellProps); +docWriter.StartParagraph(); +docWriter.AddTextRun("Row2 Col2"); +docWriter.EndParagraph(); +docWriter.EndTableCell(); +docWriter.EndTableRow(); +// DATA ROW +docWriter.StartTableRow(); +// Cell Value for 3rd row 1st column +docWriter.StartTableCell(cellProps); +docWriter.StartParagraph(); +docWriter.AddTextRun("Row3 Col1"); +docWriter.EndParagraph(); +docWriter.EndTableCell(); +// Cell Value for 3rd row 2nd column +docWriter.StartTableCell(cellProps); +docWriter.StartParagraph(); +docWriter.AddTextRun("Row3 Col2"); +docWriter.EndParagraph(); +docWriter.EndTableCell(); +docWriter.EndTableRow(); +docWriter.EndTable(); +docWriter.EndDocument(); +// Close the WordDocumentWriter instance. +docWriter.Close(); +``` +## 実例 : ネストされたテーブルを作成 +ネストされたテーブルは、別のテーブル内に表示されるテーブルです。以下のコードは、2 つの列、2 つの行、および 2 つの列と行があるネストされたテーブルのある主テーブルを作成します。主テーブルの最初の行の第 2 列にネストされたテーブルが格納されます。 + +## プレビュー +以下は最終結果のプレビューです。 + +![](../../../images/images/Word_Add_Table_To_Word_Document_02.png) + +###### 図 2: サンプル コードによって作成された Word 文書のネストされたテーブル + +## コード サンプル +**C# の場合:** + +```csharp +// Create a new instance of the WordDocumentWriter +// class using the static 'Create' method. +// This instance must be closed once content is written into Word. +WordDocumentWriter docWriter = WordDocumentWriter.Create(@"C:TestWordDoc.docx"); + +TableCellProperties cellProps = docWriter.CreateTableCellProperties(); +cellProps.BackColor = Color.LightGray; +docWriter.StartDocument(); +// Begin a Table with 2 columns +docWriter.StartTable(2); +// Begin a table row +docWriter.StartTableRow(); +// Begin Table cell for first row first column +docWriter.StartTableCell(cellProps); +docWriter.StartParagraph(); +docWriter.AddTextRun("Row1 Col1"); +docWriter.EndParagraph(); +docWriter.EndTableCell(); +// Begin Table cell for first row second column +docWriter.StartTableCell(cellProps); + +#region // Nested Table +docWriter.StartParagraph(); +docWriter.AddTextRun("Nested Table"); +docWriter.AddNewLine(); +docWriter.EndParagraph(); +docWriter.StartTable(2); +docWriter.StartTableRow(); +cellProps.Reset(); +cellProps.BackColor = Color.Yellow; +docWriter.StartTableCell(cellProps); +docWriter.StartParagraph(); +docWriter.AddTextRun("Nested Table Row1 Col1"); +docWriter.EndParagraph(); +docWriter.EndTableCell(); +docWriter.StartTableCell(cellProps); +docWriter.StartParagraph(); +docWriter.AddTextRun("Nested Table Row1 Col2"); +docWriter.EndParagraph(); +docWriter.EndTableCell(); +docWriter.EndTableRow(); +docWriter.StartTableRow(); +docWriter.StartTableCell(cellProps); +docWriter.StartParagraph(); +docWriter.AddTextRun("Nested Table Row2 Col1"); +docWriter.EndParagraph(); +docWriter.EndTableCell(); +docWriter.StartTableCell(cellProps); +docWriter.StartParagraph(); +docWriter.AddTextRun("Nested Table Row2 Col2"); +docWriter.EndParagraph(); +docWriter.EndTableCell(); +docWriter.EndTableRow(); +// For nested tables at least one paragraph must be added after adding the table within the cell. +// The EndTable method exposes an overload that adds an empty paragraph. +docWriter.EndTable(true); +#endregion // Nested Table + +docWriter.EndTableCell(); +docWriter.EndTableRow(); +docWriter.StartTableRow(); +cellProps.Reset(); +cellProps.BackColor = Color.LightGray; +docWriter.StartTableCell(cellProps); +docWriter.StartParagraph(); +docWriter.AddTextRun("Row2 Col1"); +docWriter.EndParagraph(); +docWriter.EndTableCell(); +docWriter.StartTableCell(cellProps); +docWriter.StartParagraph(); +docWriter.AddTextRun("Row2 Col2"); +docWriter.EndParagraph(); +docWriter.EndTableCell(); +docWriter.EndTableRow(); +docWriter.EndTable(); +docWriter.EndDocument(); +// Close the WordDocumentWriter instance. +docWriter.Close(); +``` + +## 関連トピック +- [Word 文書の作成](/word-create-a-word-document) +- [書式設定を Word 文書に適用](/word-apply-formatting-to-word-document) +- [画像を Word 文書に追加](/word-add-images-to-word-document) +- [ヘッダー、フッター、ページ番号](/word-headers-footers-and-page-numbers) +- [Infragistics Word ライブラリの理解](/word-understanding-infragistics-word-library) + + + + + + diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/word-library/using-infragistics-word-library/word-api-overview.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/word-library/using-infragistics-word-library/word-api-overview.mdx new file mode 100644 index 0000000000..0ad076ce63 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/word-library/using-infragistics-word-library/word-api-overview.mdx @@ -0,0 +1,17 @@ +--- +title: "Word API の概要" +slug: word-api-overview +--- + +# Word API の概要 + +このセクションでは Word ライブラリに関連する各名前空間を示します。また、この Word ライブラリでプログラミングをする時に使用するいくつかのキー クラスも示します。このページの名前空間とクラスは当社の API マニュアルに直接リンクします。 + +## [Documents.Word 名前空間](Infragistics.Web.Documents.IO~Infragistics.Documents.Word_namespace.html) + +- [Hyperlink](Infragistics.Web.Documents.IO~Infragistics.Documents.Word.Hyperlink.html) +- [ParagraphProperties](Infragistics.Web.Documents.IO~Infragistics.Documents.Word.ParagraphProperties.html) +- [SectionProperties](Infragistics.Web.Documents.IO~Infragistics.Documents.Word.SectionProperties.html) +- [SectionHeaderFooterWriterSet](Infragistics.Web.Documents.IO~Infragistics.Documents.Word.SectionHeaderFooterWriterSet.html) +- [Shape](Infragistics.Web.Documents.IO~Infragistics.Documents.Word.Shape.html) +- [TableProperties](Infragistics.Web.Documents.IO~Infragistics.Documents.Word.TableProperties.html) diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/word-library/using-infragistics-word-library/word-apply-formatting-to-word-document.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/word-library/using-infragistics-word-library/word-apply-formatting-to-word-document.mdx new file mode 100644 index 0000000000..65d1a08474 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/word-library/using-infragistics-word-library/word-apply-formatting-to-word-document.mdx @@ -0,0 +1,143 @@ +--- +title: "書式設定を Word 文書に適用" +slug: word-apply-formatting-to-word-document +--- + +# 書式設定を Word 文書に適用 + +このトピックは、Infragistics® Word ライブラリを使用して Word 文書を書式設定する方法を示します。以下のコードは、forward-only の [WordDocumentWriter](Infragistics.Web.Documents.IO~Infragistics.Documents.Word.WordDocumentWriter.html) オブジェクトを使用します。このトピックで検討されるさまざまな書式設定機能は、サイズ、方向などのフォント、段落書式およびページ属性です。 + +**注:** Infragistics.Web.Documents.IO アセンブリへの参照が必要とされます。 + +## フォントの指定 +[Font](Infragistics.Web.Documents.IO~Infragistics.Documents.Word.Font.html) クラスは、文字のビジュアル属性または文字の範囲をカスタマイズする方法を提供します。 + +**C# の場合:** + +```csharp +using Infragistics.Documents.Word; + +// Create a font, which can be reused in content creation +Infragistics.Documents.Word.Font font = docWriter.CreateFont(); +font.Bold = true; +font.Size = .23f; +font.Underline = Underline.Double; +font.UnderlineColor = Color.Blue; +font.Effects.Capitalization = Capitalization.CapsOn; +``` + +## 段落プロパティ +[ParagraphProperties](Infragistics.Web.Documents.IO~Infragistics.Documents.Word.ParagraphProperties.html) クラスは段落の書式設定を制御する方法を提供します。 + +**C# の場合:** + +```csharp +using Infragistics.Documents.Word; + +// Paragraph Properties +// Create a new instance of the WordDocumentWriter class using the +// static 'Create' method. +WordDocumentWriter docWriter = WordDocumentWriter.Create(@"C:TestWordDoc.docx"); +ParagraphProperties paraformat = docWriter.CreateParagraphProperties(); +paraformat.Alignment = ParagraphAlignment.Right; +``` + +## セクション プロパティ +[SectionProperties](Infragistics.Web.Documents.IO~Infragistics.Documents.Word.SectionProperties.html) クラスは、サイズ、余白、方向などのページ属性を制御する方法を提供します。SectionProperties インスタンスを渡す DefineSection メソッドは、EndParagraph メソッドの後で呼び出さなければなりません。 + +**C# の場合:** + +```csharp +using Infragistics.Documents.Word; + +// Create a new instance of the WordDocumentWriter class using the +// static 'Create' method. +WordDocumentWriter docWriter = WordDocumentWriter.Create(@"C:TestWordDoc.docx"); +// Use inches as the unit of measure +docWriter.Unit = UnitOfMeasurement.Inch; +SectionProperties secProperties = docWriter.CreateSectionProperties(); +secProperties.PageSize = new SizeF(7, 5); +secProperties.PageOrientation = PageOrientation.Landscape; +// Applies the section properties(PageSize and Orientation) for the above added paragraphs +docWriter.DefineSection(secProperties); +``` +以下は上記の書式設定すべてを含む完全なコードです。 + +**C# の場合:** + +```csharp +using Infragistics.Documents.Word; + +// Create a new instance of the WordDocumentWriter class using the +// static 'Create' method. +// This instance must be closed once content is written into Word. +WordDocumentWriter docWriter = WordDocumentWriter.Create(@"C:TestWordDoc.docx"); +// Use inches as the unit of measure +docWriter.Unit = UnitOfMeasurement.Inch; + +// Create a font, which we can use in content creation +Infragistics.Documents.Word.Font font = docWriter.CreateFont(); +//Start the document...note that each call to StartDocument must +//be balanced with a corresponding call to EndDocument. +docWriter.StartDocument(); +//Start a paragraph +docWriter.StartParagraph(); +// Add a text run for the title, bolded and a little bigger +font.Bold = true; +font.Size = .23f; +font.Underline = Underline.Double; +font.UnderlineColor = Color.Blue; +font.Effects.Capitalization = Capitalization.CapsOn; +docWriter.AddTextRun("Paragraphs and Topic Sentences", font); +//End the paragraph +docWriter.EndParagraph(); + +// Paragraph Properties +ParagraphProperties paraformat = docWriter.CreateParagraphProperties(); +paraformat.Alignment = ParagraphAlignment.Right; + +// Start another Paragraph +// and apply the ParagraphProperties Object +docWriter.StartParagraph(paraformat); +docWriter.AddNewLine(); +// Reset font, and apply different font settings for this paragraph. +font.Reset(); +font.Italic = true; +font.ForeColor = Color.Blue; +font.Effects.TextEffect = FontTextEffect.EngravingOn; +docWriter.AddTextRun("A paragraph is a series of sentences that are organized and coherent, and are all related to a single topic. Almost every piece of writing you do that is longer than a few sentences should be organized into paragraphs. This is because paragraphs show a reader where the subdivisions of an essay begin and end, and thus help the reader see the organization of the essay and grasp its main points.", font); +// End the paragraph +docWriter.EndParagraph(); +//Add an Empty paragraph +docWriter.AddEmptyParagraph(); +docWriter.StartParagraph(); +font.Reset(); +font.ForeColor = Color.Red; +docWriter.AddTextRun("This page is defined by the SectionProperties object. The size of the page is set to 7x5 inches and the Orientation is set to Landscape.", font); +docWriter.EndParagraph(); + +// Set page attributes +SectionProperties secProperties = docWriter.CreateSectionProperties(); +secProperties.PageSize = new SizeF(7, 5); +secProperties.PageOrientation = PageOrientation.Landscape; +// Applies the section properties(PageSize and Orientation) for the above added paragraphs +docWriter.DefineSection(secProperties); + +// End the Document +docWriter.EndDocument(); +// Close the writer +docWriter.Close(); +``` + +## 関連トピック +- [Word 文書の作成](/word-create-a-word-document) +- [テーブルを Word 文書に追加](/word-add-table-to-word-document) +- [画像を Word 文書に追加](/word-add-images-to-word-document) +- [ヘッダー、フッター、ページ番号](/word-headers-footers-and-page-numbers) +- [Infragistics Word ライブラリの理解](/word-understanding-infragistics-word-library) + + + + + + diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/word-library/using-infragistics-word-library/word-create-a-word-document.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/word-library/using-infragistics-word-library/word-create-a-word-document.mdx new file mode 100644 index 0000000000..72a6ba92d2 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/word-library/using-infragistics-word-library/word-create-a-word-document.mdx @@ -0,0 +1,67 @@ +--- +title: "Word 文書の作成" +slug: word-create-a-word-document +--- + +# Word 文書の作成 + +このトピックは、forward-only の [WordDocumentWriter](Infragistics.Web.Documents.IO~Infragistics.Documents.Word.WordDocumentWriter.html) ストリーマー オブジェクトを使用して、Word 文書を作成する方法を示します。`WordDocumentWriter` オブジェクトの静的な Create メソッドは、新しい Word 文書を作成します。 + +以下のスクリーンショットは、テキストとハイパーリンクで作成された Word 文書を表示します。 + +![](../../../images/images/Word_Create_a_Word_Document_01.png) + +`Author`、`Title`、`Subject` などのドキュメントのさまざまなプロパティは、`WordDocumentWriter` オブジェクトの [DocumentProperties](Infragistics.Web.Documents.IO~Infragistics.Documents.Word.WordDocumentWriter~DocumentProperties.html) プロパティを使用して設定できます。Office ボタンをクリックして、[準備] > [プロパティ] セクションを指定することによって、Word 2007 でこれらの情報にアクセスできます。Word 2010 で同様に、[ファイル] タブをクリックすることによって、Backstage ビューの右側からドキュメント プロパティにアクセスできます。 + +Word 文書への書き出しを開始するには、[StartDocument](Infragistics.Web.Documents.IO~Infragistics.Documents.Word.WordDocumentWriter~StartDocument.html) メソッドを使用し、これは [EndDocument](Infragistics.Web.Documents.IO~Infragistics.Documents.Word.WordDocumentWriter~EndDocument.html) メソッドへの対応する呼び出しとバランスを取らなければなりません。 + +Paragraph は揃えて配置またはインデントが可能なテキスト ブロックを表示する機能を提供します。段落を始めるには [StartParagraph](Infragistics.Web.Documents.IO~Infragistics.Documents.Word.WordDocumentWriter~StartParagraph.html) メソッドを使用します。[AddTextRun](Infragistics.Web.Documents.IO~Infragistics.Documents.Word.WordDocumentWriter~AddTextRun.html) メソッドはコンテンツを段落に追加する方法を提供します。コンテンツが追加されたら、段落は [EndParagraph](Infragistics.Web.Documents.IO~Infragistics.Documents.Word.WordDocumentWriter~EndParagraph.html) メソッドを使用して閉じなければなりません。 + +> **注:** `Infragistics.Web.Documents.IO` アセンブリへの参照が以下のコードに必要とされます。 + +> **注:** Word 文書を作成するために `WordDocumentWriter` オブジェクトを使用する時には、Dispose メソッドまたは Close メソッドのいずれかを使用してストリーマー オブジェクトを破棄または閉じなければなりません。 + +**C# の場合:** + +```csharp +using Infragistics.Documents.Word; + +// Create a new instance of the WordDocumentWriter class +// using the static 'Create' method. +WordDocumentWriter docWriter = WordDocumentWriter.Create(@"C:TestWordDoc.docx"); +// Use inches as the unit of measure +docWriter.Unit = UnitOfMeasurement.Inch; +// Set the document properties, such as title, author, etc. +docWriter.DocumentProperties.Title = "Sample Document"; +docWriter.DocumentProperties.Author = string.Format("Infragistics.{0}", SystemInformation.UserName); +// Start the document...note that each call to +// StartDocument must be balanced with a corresponding call to EndDocument. +docWriter.StartDocument(); +// Start a paragraph +docWriter.StartParagraph(); +// Add a text run for the title +docWriter.AddTextRun("Paragraphs and Topic Sentences"); +// Add a new line +docWriter.AddNewLine(); +// Add a Hyperlink +docWriter.AddHyperlink("http://www.infragistics.com", "Infragistics Inc."); +// End the paragraph +docWriter.EndParagraph(); +// End Document +docWriter.EndDocument(); +// Close the writer +docWriter.Close(); +``` + +## 関連トピック +- [書式設定を Word 文書に適用](/word-apply-formatting-to-word-document) +- [テーブルを Word 文書に追加](/word-add-table-to-word-document) +- [画像を Word 文書に追加](/word-add-images-to-word-document) +- [ヘッダー、フッター、ページ番号](/word-headers-footers-and-page-numbers) +- [Infragistics Word ライブラリの理解](/word-understanding-infragistics-word-library) + + + + + + diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/word-library/using-infragistics-word-library/word-creating-word-document-using-object-model-approach.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/word-library/using-infragistics-word-library/word-creating-word-document-using-object-model-approach.mdx new file mode 100644 index 0000000000..35850aa7a7 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/word-library/using-infragistics-word-library/word-creating-word-document-using-object-model-approach.mdx @@ -0,0 +1,258 @@ +--- +title: "オブジェクト モデル アプローチで Word 文書を作成" +slug: word-creating-word-document-using-object-model-approach +--- + +# オブジェクト モデル アプローチで Word 文書を作成 + +このトピックは、オブジェクト モデル アプローチを使用して Microsoft® Word® ドキュメントおよびレイアウト要素を作成する方法を説明します。 + +## 概要 +トピックは以下のとおりです。 + +- [単純な Word 文書の作成](#CreateSimpleDoc) +- [ハイパーリンクの追加](#AddHyperlink) +- [ピクチャの追加](#AddPic) + - [アンカー固定した画像の追加](#AddAnchPic) + - [インライン画像の追加](#AddInlinePic) +- [ヘッダーとフッターの設定](#HeaderFooter) + - [ヘッダーの追加と設定](#Header) + - [フッターの追加と設定](#Footer) +- [コード例: 完全なコード例](#ExCode) +- [関連トピック](#RelatedTopics) + +## 単純な Word 文書の作成 +Word 文書全体は、[Document](Infragistics.Web.Documents.Word~Infragistics.Documents.Word.Document.html) クラスでカプセル化されます。Document クラスはオブジェクト階層のルート レベルのエンティティで、この下にすべての他のオブジェクトがグループ化されています。段落およびテーブルなどのブロック レベルのコンテンツのコンテナーとして使用されます。ブロック レベルのコンテンツは、[ContentBlocks](Infragistics.Web.Documents.Word~Infragistics.Documents.Word.Document~ContentBlocks.html) コレクション内に含まれます。 + +ドキュメントの個々のパラグラフは、[Paragraph](Infragistics.Web.Documents.Word~Infragistics.Documents.Word.Paragraph.html) クラスでカプセル化されます。Paragraph クラスは、[ContentRuns](Infragistics.Web.Documents.Word~Infragistics.Documents.Word.Paragraph~ContentRuns.html) コレクションを公開します。これはコンテンツをパラグラフに追加する方法を提供します。 + +Word 文書を生成するには、Document クラスのインスタンスを作成し、公開されているプロパティとメソッドを使用して作業し、そして [Save](Infragistics.Web.Documents.Word~Infragistics.Documents.Word.Document~Save.html) メソッドを呼び出します。 + +Author、Title、Subject などの Word 文書のさまざまなプロパティは、 [DocumentProperties](Infragistics.Web.Documents.Word~Infragistics.Documents.Word.Document~DocumentProperties.html) プロパティを使用して設定できます。Office ボタンをクリックして、[準備] > [プロパティ] セクションを指定することによって、Word 2007 でこれらの情報にアクセスできます。Word 2010 で同様に、[ファイル] タブをクリックすることによって、Backstage ビューの右側からドキュメント プロパティにアクセスできます。 + +**C# の場合:** + +```csharp +using Infragistics.Documents.Word; + +string documentName = @"C:TestWordDOMDoc.docx"; +Document doc = new Document(); +// Set the document properties, such as title, author, etc. +doc.DocumentProperties.Title = "Sample Document"; +doc.DocumentProperties.Author = string.Format("Infragistics.{0}", SystemInformation.UserName); +Infragistics.Documents.Word.Font font = doc.CreateFont(); +font.Bold = true; +font.Size = 15; +font.Underline = Underline.Double; +// Add a Paragraph to the document +Paragraph para1 = doc.ContentBlocks.AddParagraph(); +para1.ContentRuns.AddTextRun("Sample Word Document with Hyperlinks,Images,Headers and Footers", font); +``` + +## ハイパーリンクを Word 文書に追加 +Infragistics Word ライブラリはハイパーリンクをサポートします。[AddHyperlink](Infragistics.Web.Documents.Word~Infragistics.Documents.Word.ContentRunsCollection~AddHyperlink.html) メソッドは、TextHyperlink を関連付けられたパラグラフに追加します。 + +**C# の場合:** + +```csharp +using Infragistics.Documents.Word; + +// Add a Paragraph to the document +Paragraph para2 = doc.ContentBlocks.AddParagraph(); +para2.ContentRuns.AddTextRun("Hyperlink: "); +// Add a Hyperlink +para2.ContentRuns.AddHyperlink("http://www.infragistics.com", "Infragistics Inc."); +``` + +## ピクチャの追加 +### アンカー固定した画像の追加 +[AnchoredPicture](Infragistics.Web.Documents.IO~Infragistics.Documents.Word.AnchoredPicture.html) クラスは、ドキュメント内の固有の場所にアンカー固定される画像をカプセル化します。[AddAnchoredPicture](Infragistics.Web.Documents.Word~Infragistics.Documents.Word.AnchorsCollection~AddAnchoredPicture.html) メソッドは、アンカー固定された画像を関連付けられたパラグラフに追加します。 + +**C# の場合:** + +```csharp +using Infragistics.Documents.Word; + +// Get Image +Image img = Image.FromFile(@"....Ballon_New_Year.jpg"); +// Add a paragraph to the Document +Paragraph para3 = doc.ContentBlocks.AddParagraph(); +para3.ContentRuns.AddTextRun("Anchored Picture: An Anchored picture or image is one that is anchored to a specific location within the document. Unlike an inline picture, which moves along with adjacent content, an Anchored Picture remains at a fixed location within the paragraph, with adjacent text flowing around it."); + +// Create an Anchored picture +AnchoredPicture anchPic = doc.CreateAnchoredPicture(img); +// Assign the picture outline properties for anchored image +anchPic.AlternateTextDescription = "Word Image"; +anchPic.Outline.Color = Color.Brown; +anchPic.Outline.Style = PictureOutlineStyle.Single; +anchPic.Outline.LineWidth = 1; +// Add the Anchored picture to anchor section of the paragraph +para3.Anchors.AddAnchoredPicture(anchPic); +``` + +### インライン画像の追加 +[InlinePicture](Infragistics.Web.Documents.IO~Infragistics.Documents.Word.InlinePicture.html) クラスは、画像をカプセル化し、ドキュメント内のテキスト コンテンツと共にインライン表示します。[AddInlinePicture](Infragistics.Web.Documents.Word~Infragistics.Documents.Word.ContentRunsCollection~AddInlinePicture.html) メソッドは、インライン画像を関連付けられたパラグラフに追加します。 + +**C# の場合:** + +```csharp +using Infragistics.Documents.Word; + +// Get Image +Image img = Image.FromFile(@"....Ballon_New_Year.jpg"); + +// Add a Paragraph to the document +Paragraph para4 = doc.ContentBlocks.AddParagraph(); +para4.ContentRuns.AddTextRun("Inline Picture: An inline picture moves with the adjacent content"); + +// Create an Inline picture +InlinePicture inlinePic = doc.CreateInlinePicture(img); +inlinePic.AlternateTextDescription = "Word Image"; +// Add the Inline picture to a content section of the paragraph +para4.ContentRuns.AddInlinePicture(inlinePic); +``` +[Section](Infragistics.Web.Documents.Word~Infragistics.Documents.Word.Section.html) クラスは、改ページ プロパティおよびドキュメント セクションのヘッダー/フッター コンテンツをカプセル化します。 + +## ヘッダーとフッターの設定 +### ヘッダーの追加と設定 +以下のコード例は、すべてのページのヘッダー セクションにテキストと画像を表示する方法を示します。 + +**C# の場合:** + +```csharp +using Infragistics.Documents.Word; + +// Add a paragraph to the Document +Paragraph para5 = doc.ContentBlocks.AddParagraph(); +// Add text to Paragraph +Section sec = doc.Sections.Add(para5); + +// Header +Paragraph headerPara = sec.HeaderAllPages.ContentBlocks.AddParagraph(); +// The header text alignment is set to right +headerPara.Properties.Alignment = ParagraphAlignment.Right; +// Create an Anchored Image to display in the Header +AnchoredPicture headeranchPic = doc.CreateAnchoredPicture(img); +// Display Anchored Image in Header +headerPara.Anchors.AddAnchoredPicture(headeranchPic); +// Display Text in Header +headerPara.ContentRuns.AddTextRun("This is a header"); +``` + +### フッターの追加と設定 +[AddPageNumberField](Infragistics.Web.Documents.Word~Infragistics.Documents.Word.ContentRunsCollection~AddPageNumberField.html) メソッドは、PageNumberField を関連付けられたパラグラフに追加します。 + +**C# の場合:** + +```csharp +using Infragistics.Documents.Word; + +// Add a paragraph to the Document +Paragraph para5 = doc.ContentBlocks.AddParagraph(); +// Add section which defines pagination for specified paragraph +Section sec = doc.Sections.Add(para5); + +//Footer +Paragraph footerPara = sec.FooterAllPages.ContentBlocks.AddParagraph(); +// The footer text alignment is set to right +footerPara.Properties.Alignment = ParagraphAlignment.Right; +// Display Text in Footer +footerPara.ContentRuns.AddTextRun("This is a footer"); +// Add Page numbers to the Footer +footerPara.ContentRuns.AddPageNumberField(PageNumberFieldFormat.Ordinal); +``` + +## コード例: 完全なコード例 +以下は、このトピックの例で使用される完全なコードです。 + +**C# の場合:** + +```csharp +using Infragistics.Documents.Word; + +string documentName = @"C:TestWordDOMDoc.docx"; +Document doc = new Document(); +// Set the document properties, such as title, author, etc. +doc.DocumentProperties.Title = "Sample Document"; +doc.DocumentProperties.Author = string.Format("Infragistics.{0}", SystemInformation.UserName); +Infragistics.Documents.Word.Font font = doc.CreateFont(); +font.Bold = true; +font.Size = 15; +font.Underline = Underline.Double; +// Add a Paragraph to the document +Paragraph para1 = doc.ContentBlocks.AddParagraph(); +para1.ContentRuns.AddTextRun("Sample Word Document with Hyperlinks,Images,Headers and Footers", font); +para1.ContentRuns.AddNewLine(); +Paragraph para2 = doc.ContentBlocks.AddParagraph(); +para2.ContentRuns.AddTextRun("Hyperlink: "); + +// Add a Hyperlink +para2.ContentRuns.AddHyperlink("http://www.infragistics.com", "Infragistics Inc."); +para2.ContentRuns.AddNewLine(); + +// Get Image +Image img = Image.FromFile(@"....Ballon_New_Year.jpg"); +// Add a paragraph to the Document +Paragraph para3 = doc.ContentBlocks.AddParagraph(); +para3.ContentRuns.AddTextRun("Anchored Picture: An Anchored picture or image is one that is anchored to a specific location within the document. Unlike an inline picture, which moves along with adjacent content, an Anchored Picture remains at a fixed location within the paragraph, with adjacent text flowing around it."); + +// Create an Anchored picture +AnchoredPicture anchPic = doc.CreateAnchoredPicture(img); +// Assign the picture outline properties for anchored image +anchPic.AlternateTextDescription = "Word Image"; +anchPic.Outline.Color = Color.Brown; +anchPic.Outline.Style = PictureOutlineStyle.Single; +anchPic.Outline.LineWidth = 1; +// Add the Anchored picture to anchor section of the paragraph +para3.Anchors.AddAnchoredPicture(anchPic); + +// Add a Paragraph to the document +Paragraph para4 = doc.ContentBlocks.AddParagraph(); +para4.ContentRuns.AddTextRun("Inline Picture: An inline picture moves with the adjacent content"); + +// Create an Inline picture +InlinePicture inlinePic = doc.CreateInlinePicture(img); +inlinePic.AlternateTextDescription = "Word Image"; +// Add the Inline picture to a content section of the paragraph +para4.ContentRuns.AddInlinePicture(inlinePic); + +// Add a paragraph to the Document +Paragraph para5 = doc.ContentBlocks.AddParagraph(); +// Add text to Paragraph +Section sec = doc.Sections.Add(para5); +// Header +Paragraph headerPara = sec.HeaderAllPages.ContentBlocks.AddParagraph(); +// The header text alignment is set to right +headerPara.Properties.Alignment = ParagraphAlignment.Right; +// Create an Anchored Image to display in the Header +AnchoredPicture headeranchPic = doc.CreateAnchoredPicture(img); +// Display Anchored Image in Header +headerPara.Anchors.AddAnchoredPicture(headeranchPic); +// Display Text in Header +headerPara.ContentRuns.AddTextRun("This is a header"); + +//Footer +Paragraph footerPara = sec.FooterAllPages.ContentBlocks.AddParagraph(); +// The footer text alignment is set to right +footerPara.Properties.Alignment = ParagraphAlignment.Right; +// Display Text in Footer +footerPara.ContentRuns.AddTextRun("This is a footer"); +// Add Page numbers to the Footer +footerPara.ContentRuns.AddPageNumberField(PageNumberFieldFormat.Ordinal); + +doc.Save(documentName); +``` + +## 関連トピック +- [Word 文書の作成](/word-create-a-word-document) +- [書式設定を Word 文書に適用](/word-apply-formatting-to-word-document) +- [テーブルを Word 文書に追加](/word-add-table-to-word-document) +- [画像を Word 文書に追加](/word-add-images-to-word-document) +- [ヘッダー、フッター、ページ番号](/word-headers-footers-and-page-numbers) +- [Infragistics Word ライブラリの理解](/word-understanding-infragistics-word-library) + + + + + + diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/word-library/using-infragistics-word-library/word-headers-footers-and-page-numbers.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/word-library/using-infragistics-word-library/word-headers-footers-and-page-numbers.mdx new file mode 100644 index 0000000000..87d37ac36f --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/word-library/using-infragistics-word-library/word-headers-footers-and-page-numbers.mdx @@ -0,0 +1,142 @@ +--- +title: "ヘッダー、フッター、ページ番号" +slug: word-headers-footers-and-page-numbers +--- + +# ヘッダー、フッター、ページ番号 +Infragistics® Word ライブラリを使用すると、ドキュメント タイトルのように簡単なヘッダーとフッター、および画像、複数段落、表、ハイパーリンクへのページ番号を作成できます。 + +以下のスクリーンショットは、`Header` にテキストと画像を付けて作成された Word 文書を表示します。 + +![](../../../images/images/Word_Headers_Footers_and_Page_Numbers_01.png) + +以下のスクリーンショットは、`Footer` にテキストとページ番号を付けて作成された Word 文書を表示します。 + +![](../../../images/images/Word_Headers_Footers_and_Page_Numbers_02.png) + +> **注:** `Infragistics.Web.Documents.IO` アセンブリへの参照が以下のコードに必要とされます。 + +## ヘッダーとフッター +ドキュメント セクションのヘッダーとフッターにコンテンツを書き出すには、ひとつ以上の [WordHeaderFooterWriter](Infragistics.Web.Documents.IO~Infragistics.Documents.Word.WordHeaderFooterWriter.html) インスタンスを保持する [SectionHeaderFooterWriterSet](Infragistics.Web.Documents.IO~Infragistics.Documents.Word.SectionHeaderFooterWriterSet.html) クラスを使用する必要があります。ヘッダーとフッターは、全ページまたは最初のページのみのいずれかに設定できます。テキスト、画像、複数段落、ハイパーリンクはすべてヘッダーおよびフッター セクションに追加できます。 + +**C# の場合:** + +```csharp +using Infragistics.Documents.Word; + +// Specify the default parts for header and footer +SectionHeaderFooterParts parts = SectionHeaderFooterParts.HeaderAllPages | SectionHeaderFooterParts.FooterAllPages; +SectionHeaderFooterWriterSet writerSet = docWriter.AddSectionHeaderFooter(parts); +// Set text for Header +writerSet.HeaderWriterAllPages.Open(); +writerSet.HeaderWriterAllPages.StartParagraph(); +writerSet.HeaderWriterAllPages.AddTextRun("This text appears in the Header."); +writerSet.HeaderWriterAllPages.EndParagraph(); +writerSet.HeaderWriterAllPages.Close(); +// Set text for Footer +writerSet.FooterWriterAllPages.Open(); +writerSet.FooterWriterAllPages.StartParagraph(); +writerSet.FooterWriterAllPages.AddTextRun("This text appears in the footer."); +writerSet.FooterWriterAllPages.EndParagraph(); +writerSet.FooterWriterAllPages.Close(); +``` + +## ページ番号 +ページ番号は、[AddPageNumberField](Infragistics.Web.Documents.IO~Infragistics.Documents.Word.WordHeaderFooterWriter~AddPageNumberField.html) メソッドを使用して、Word 文書のヘッダーまたはフッターのいずれかに正しい設定を追加することによって可能となります。このメソッドは、オプションの引数として `PageNumberFieldType` 列挙値とフォント オブジェクトを受け付けます。`PageNumberFieldType` 列挙体は、ページ番号に、`Decimal`、`RomanLowercase`、`TextCardinal`、`Ordinal` などのいくつかの書式を提供します。 + +**C# の場合:** + +```csharp +using Infragistics.Documents.Word; + +// Add Page numbers to the Footer +writerSet.FooterWriterAllPages.AddPageNumberField(PageNumberFieldFormat.Ordinal, font); +``` +以下の完全なコードはヘッダー、フッター、ページ番号を Word 文書に追加します。 + +**C# の場合:** + +```csharp +using Infragistics.Documents.Word; + +// Create a new instance of the WordDocumentWriter class using the +// static 'Create' method. +// This instance must be closed once content is written into Word. +WordDocumentWriter docWriter = WordDocumentWriter.Create(@"C:TestWordDoc.docx"); +// Use inches as the unit of measure +docWriter.Unit = UnitOfMeasurement.Inch; +// Create a font, which we can use in content creation +Infragistics.Documents.Word.Font font = docWriter.CreateFont(); +font.Bold = true; +// Paragraph Properties +ParagraphProperties paraformat = docWriter.CreateParagraphProperties(); + +//Start the document...note that each call to StartDocument must +//be balanced with a corresponding call to EndDocument. +docWriter.StartDocument(); +//Start a paragraph +docWriter.StartParagraph(); +docWriter.AddNewLine(); +docWriter.AddTextRun("This document demonstrates headers, footers and page numbers.", font); +// End the paragraph +docWriter.EndParagraph(); +// Create a page break +paraformat.PageBreakBefore = true; +docWriter.StartParagraph(paraformat); +docWriter.EndParagraph(); +// Header and Footer +// Specify the default parts for header and footer. +SectionHeaderFooterParts parts = SectionHeaderFooterParts.HeaderAllPages | SectionHeaderFooterParts.FooterAllPages; +SectionHeaderFooterWriterSet writerSet = docWriter.AddSectionHeaderFooter(parts); +// Get Image to display in the Header +Image img = Image.FromFile(@"....Ballon_New_Year.jpg"); +// Create an Anchored Image +AnchoredPicture anchPic = docWriter.CreateAnchoredPicture(img); +anchPic.Size = new SizeF(0.75f, 0.75f); +// Reset paragraph properties +paraformat.Reset(); +paraformat.Alignment = ParagraphAlignment.Right; +// Header +writerSet.HeaderWriterAllPages.Open(); +// The header text alignment is set to right +// by passing in the ParagraphProperties instance +writerSet.HeaderWriterAllPages.StartParagraph(paraformat); +// Add Image to the header +writerSet.HeaderWriterAllPages.AddAnchoredPicture(anchPic); +// Add text to the Header +writerSet.HeaderWriterAllPages.AddTextRun("This text appears in the Header."); +writerSet.HeaderWriterAllPages.EndParagraph(); +writerSet.HeaderWriterAllPages.StartParagraph(paraformat); +// Add text to the Header +writerSet.HeaderWriterAllPages.AddTextRun("Multiple paragraphs can be added to the Header."); +writerSet.HeaderWriterAllPages.EndParagraph(); +writerSet.HeaderWriterAllPages.Close(); +//Footer +writerSet.FooterWriterAllPages.Open(); +// The footer text alignment is set to right +// by passing in the ParagraphProperties instance +writerSet.FooterWriterAllPages.StartParagraph(paraformat); +writerSet.FooterWriterAllPages.AddTextRun("This text appears in the footer. "); +// Add Page numbers to the Footer +writerSet.FooterWriterAllPages.AddPageNumberField(PageNumberFieldFormat.Ordinal, font); +writerSet.FooterWriterAllPages.EndParagraph(); +writerSet.FooterWriterAllPages.Close(); + +// End the Document +docWriter.EndDocument(); +// Close the writer +docWriter.Close(); +``` + +## 関連トピック +- [Word 文書の作成](/word-create-a-word-document) +- [書式設定を Word 文書に適用](/word-apply-formatting-to-word-document) +- [テーブルを Word 文書に追加](/word-add-table-to-word-document) +- [画像を Word 文書に追加](/word-add-images-to-word-document) +- [Infragistics Word ライブラリの理解](/word-understanding-infragistics-word-library) + + + + + + diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/word-library/using-infragistics-word-library/word-using-the-infragistics-word-library.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/word-library/using-infragistics-word-library/word-using-the-infragistics-word-library.mdx new file mode 100644 index 0000000000..f63417e633 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/word-library/using-infragistics-word-library/word-using-the-infragistics-word-library.mdx @@ -0,0 +1,21 @@ +--- +title: "Infragistics Word ライブラリの使用" +slug: word-using-the-infragistics-word-library +--- + +# Infragistics Word ライブラリの使用 + +このセクションは、Word ライブラリの重要な概念および機能を効果的に使用するためのタスク ベースの情報について説明します。 + +- [Word 文書の作成](/word-create-a-word-document) +- [書式設定を Word 文書に適用](/word-apply-formatting-to-word-document) +- [テーブルを Word 文書に追加](/word-add-table-to-word-document) +- [画像を Word 文書に追加](/word-add-images-to-word-document) +- [ヘッダー、フッター、ページ番号](/word-headers-footers-and-page-numbers) +- [オブジェクト モデル アプローチで Word 文書を作成](/word-creating-word-document-using-object-model-approach) + + + + + + diff --git a/docs/jquery/src/content/ja/topics/asp-net-mvc/word-library/word-infragistics-word-library.mdx b/docs/jquery/src/content/ja/topics/asp-net-mvc/word-library/word-infragistics-word-library.mdx new file mode 100644 index 0000000000..1172702dd8 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/asp-net-mvc/word-library/word-infragistics-word-library.mdx @@ -0,0 +1,24 @@ +--- +title: "Infragistics Word ライブラリ" +slug: word-infragistics-word-library +--- + +# Infragistics Word ライブラリ +このセクションには、コンポーネントについての概要からアプリケーションで使用する理由、コンポーネントを使用して共通タスクを実行する手順などの Word ライブラリについての有益な情報が含まれています。 + +以下のリンクをクリックして、Word ライブラリについての情報にアクセスします。 + +## [Infragistics Word ライブラリの理解](/word-understanding-infragistics-word-library) +このセクションの説明を読むと、Word ライブラリの機能性と、それをアプリケーションに使用することの利点についてよく理解できます。 + +## [Infragistics Word ライブラリの使用](/word-using-the-infragistics-word-library) +このセクションには、Word ライブラリで固有のタスクを実行する方法のデモを行うサンプル コード例を示す役立つトピックがあります。 + +## [Word API の概要](/word-api-overview) +このトピックは、Word ライブラリを使用して開発する際の名前空間とクラスについて説明します。このトピックの名前空間とクラスの一覧は、{environment:ProductName} ヘルプの API 参照ガイドへリンクします。 + + + + + + diff --git a/docs/jquery/src/content/ja/topics/controls/igbulletgraph/accessibility-compliance.mdx b/docs/jquery/src/content/ja/topics/controls/igbulletgraph/accessibility-compliance.mdx new file mode 100644 index 0000000000..0df49b3cd1 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igbulletgraph/accessibility-compliance.mdx @@ -0,0 +1,61 @@ +--- +title: "アクセシビリティ準拠 (igBulletGraph)" +slug: igbulletgraph-accessibility-compliance +--- + +# アクセシビリティ準拠 (igBulletGraph) + + + +## トピックの概要 + +#### 目的 + +このトピックは、`igBulletGraph`™ コントロールのアクセシビリティ機能を説明し、ブレット グラフを含むページのアクセシビリティ遵守を実現する方法を紹介します。 + +#### 前提条件 + +このトピックを理解するために、以下のトピックを参照することをお勧めします。 + +- [*igBulletGraph* の概要](/igbulletgraph-overview): このトピックは、主要機能、最小要件およびユーザー機能性など、`igBulletGraph` コントロールの概念的な情報を提供します。 + +- [*igBulletGraph* の追加](/igbulletgraph-adding): このグループ トピックでは、`igBulletGraph`™ コントロールを HTML ページと ASP.NET MVC アプリケーションに追加する方法を説明します。 + + +## アクセシビリティ準拠のリファレンス + +#### 概要 + +すべての {environment:ProductName}™ コントロールおよびコンポーネントは、1973 年リハビリテーション法第 508 条第 1194 部 22 条を遵守しています。以下の表には、コントロールに関連する第 1194 部 22 条の特定の規則が記載されています。また、igBulletGraph コントロールが各規則を遵守する方法も詳細に説明しています。 + +各アクセシビリティ規則の要件を満たすためには、特定のプロパティを設定することによって、コントロールとの相互作用が必要になることもありますが、コントロールがこれらのタスクを実行する場合もあります。 + +#### アクセシビリティ準拠のリファレンスの概要 + +以下の表で、igBulletGraph のアクセシビリティ遵守機能を簡単に説明します。 + +規則|規則内容|準拠方法 +---|---|--- +(a)|あらゆる非テキスト要素に対してテキスト相当物を提供するものとします（つまり、「alt」、「longdesc」を介して、または要素コンテンツで)。|igBulletGraph はグラフィック専用のコントロールであるため、表をチャート データを含む表またはグリッドに変換することで、障害のある人に代替ビューを提供することが考慮されています。これにより、読み上げソフトウェアで表から情報を得ることができます。 +(b)|マルチメディア プレゼンテーションに相当する代替物をプレゼンテーションと同期するものとします。|記録に準拠するための代替手段については、(a) の注を参照してください。 +(c)|色によって伝達されるすべての情報が色を使用しなくても理解できるように (たとえば、コンテキストやマークアップ) Web ページを設計するものとします。|igBulletGraph コントロールのスタイルとテーマの設定機能を使用して、ブレット グラフの配色を制御し、適切な色を提供できます。 +(d)*|関連付けられたスタイル シートがなくても読めるようにドキュメントを構成するものとします。|igBulletGraph はクライアント側からコントロールされCSS の規則に依存するため、コントロールのマークアップは関連付けられたスタイル シートがないと完全な読み取りができない場合があります。記録に準拠するための代替手段については、(a) の注を参照してください。 + + +## 関連コンテンツ + +#### トピック + +以下のトピックでは、このトピックに関連する追加情報を提供しています。 + +- [アクセシビリティ準拠](/accessibility-compliance): このトピックでは、{environment:ProductName} 製品におけるすべてのコントロールのアクセシビリティ遵守に関する参照情報を提供します。 + + + + + + + + + + diff --git a/docs/jquery/src/content/ja/topics/controls/igbulletgraph/adding/adding-to-an-html-page.mdx b/docs/jquery/src/content/ja/topics/controls/igbulletgraph/adding/adding-to-an-html-page.mdx new file mode 100644 index 0000000000..e4af6d5282 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igbulletgraph/adding/adding-to-an-html-page.mdx @@ -0,0 +1,343 @@ +--- +title: "igBulletGraph の HTML ページへの追加" +slug: igbulletgraph-adding-to-an-html-page +--- + +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# igBulletGraph の HTML ページへの追加 + +## トピックの概要 + +#### 目的 + +このトピックではコード例を使用して、`igBulletGraph` コントロールを HTML ページに追加する方法を説明します。 + +#### 前提条件 + +このトピックを理解するために、以下のトピックを参照することをお勧めします。 + +- [*igBulletGraph* の概要](/igbulletgraph-overview): このトピックは、主要機能、最小要件およびユーザー機能性など、`igBulletGraph`™ コントロールの概念的な情報を提供します。 + + +#### このトピックの内容 + +このトピックは、以下のセクションで構成されます。 + +- [***igBulletGraph* を HTML ページに追加 - 概要**](#overview) + - [要件](#requirements) + - [手順](#steps) +- [**igBulletGraph を HTML ページに追加 - 手順**](#procedure) + - [概要](#procedure-introduction) + - [プレビュー](#preview) + - [前提条件](#prerequisites) + - [手順](#procedure-steps) + - [全コード](#full-code) +- [**関連コンテンツ**](#related-content) + - [トピック](#topics) + - [サンプル](#samples) + + + +## igBulletGraph を HTML ページに追加 - 概要 + +`igBulletGraph` コントロールを Web ページに追加するには、HTML の要素、インスタンス化のベースとなる `div` が必要です。`igBulletGraph` の基本構成には、寸法、すなわち `width` と `height` の値が必要です。 + +#### 要件 + +以下の表で、`igBulletGraph` コントロールを使用するための要件を簡単に説明しています。 + + +| | | | +| --- | --- | --- | +| 必要なリソース | 説明 | 必要な作業 | +| jQuery および jQuery UI JavaScript リソース | environment:ProductName™ は、以下のフレームワークの最上部にビルドされます。 [jQuery](http://jquery.com/) [jQuery UI](http://jqueryui.com/) | ページの `` セクションで両方のライブラリにスクリプト参照を追加します。 | +| 全般的な *igBulletGraph* JavaScript リソース | *igBulletGraph* コントロールは、environment:ProductName ライブラリ内の複数のファイルで配布される機能に依存します。必要なリソースは以下の方法で読み込むことができます。 Infragistics® Loader (*igLoader*™) を使用します。ページ上に *igLoader* へのスクリプト参照を含めるのみです。 必要なリソースを手動で読み込みます。以下の表にリストされる依存関係を使用する必要があります。 environment:ProductName パッケージのすべてのデータ ビジュアライゼーション コントロールのロジックを含む、2 つの結合ファイル (*infragistics.core.js*、*infragistics.dv.js* および *infragistics.encoding.js* (オプション)) を読み込みます。 以下の表は、*igBulletGraph* コントロール関連の environment:ProductName ライブラリの依存関係を示します。*igLoader* または結合ファイルを使用しない選択をした場合、これらのリソースを明示的に参照する必要があります。 JS リソース | 説明 | +| *infragistics.util.js*, *infragistics.util.jquery.js* | environment:ProductName ユーティリティ | | +| *infragistics.ext_core.js*, *infragistics.ext_collections.js*, *infragistics.ext_ui.js*, *infragistics.dv_jquerydom.js*, *infragistics.dv_core.js*, *infragistics.dv_geometry.js* | データ ビジュアライゼーション コンポーネント用の共有ライブラリ | | +| *infragistics.ui.widget.js* | すべての environment:ProductName ウィジェットの基本 igWidget。 | | +| *infragistics.bulletgraph.js* | *igBulletGraph* コントロール | | +| *infragistics.ui.bulletgraph.js* | *igBulletGraph* ウィジェット | | + + </td> + <td>以下のいずれかを追加します。
    • \*igLoader\* への参照
    • すべての必要な JavaScript ファイルへの参照 (左側の表に一覧表示)
    • 結合ファイルへの参照および任意でエンコーディングを含むファイルへの参照
    </td> +</tr> + </tbody> +</table> + +#### 手順 + +`igBulletGraph` を HTML ページへ追加するための一般的な手順を簡単に示すと、以下のようになります。 + +1. `igBulletGraph` コントロールを保存するターゲット要素の作成。 +2. `igBulletGraph` のインスタンスの作成 +3. 基本的な描画オプションの構成 +4. スケールの構成 +5. パフォーマンス バーの追加 +6. 比較マーカーの構成 +7. 比較範囲の追加 + + +## igBulletGraph を HTML ページに追加 - 手順 +#### 概要 +この手順では、`igBulletGraph` のインスタンスを HTML ページに追加し、寸法およびスケールを設定して、パフォーマンス バー、比較マーカー、および 3 つの比較範囲をインスタンスに追加します。 + +この手順では、必要なリソースを HTML ページのヘッダーに追加することを前提としています。そのため、document ready イベントで `igBulletGraph` コントロールのインスタンスを作成し、DOM の読み込みエラーが発生しないようにします。 + +#### プレビュー + +以下のスクリーンショットは結果のプレビューです。 + +![](../../../images/images/igBulletGraph_Adding_igBulletGraph_to_an_HTML_Page_1.png) + +### 前提条件 + +この手順を実行するには、必要な JavaScript ファイルおよび HTML ページで参照する CSS ファイルが必要です。 + +**HTML の場合:** + +```html + + + + + + + + + + + + + + + + + + + + + + + + +``` + +### 手順 + +これらの手順に従って、`igBulletGraph` を HTML ページに追加します。 + +1. ***igBulletGraph* コントロールを保存するターゲット要素の作成。** + + `igBulletGraph` コントロールのインスタンスを作成する HTML 本文内に、 `
    ` 要素を作成します。 + + **HTML の場合:** + +```html + + +
    + +``` + +2. ***igBulletGraph* のインスタンスの作成** + + 手順 1 で定義したターゲット要素のセレクターを使用して、`igBulletGraph` コントロールのインスタンスを作成します。 + + **HTML の場合:** + +```html + +``` + +3. **基本的な描画オプションの構成。** + + igBulletGraph のインスタンスを作成する場合、`width` および `height` の各オプションを構成します。 + + **HTML の場合:** + +```html + $("#bulletGraph").igBulletGraph({ + width: "300px", + height: "70px" + }); +``` + +4. **スケールを構成します。** + + スケールの値をカスタマイズするには、 および プロパティを設定する必要があります。この例では、スケールは 5 から開始され 55 で終了します。 + + **HTML の場合:** + +```html + $("#bulletGraph").igBulletGraph({ + width: "300px", + height: "70px", + minimumValue: "5", + maximumValue: "55" + }); +``` + + 変化したスケールを以下のスクリーンショットに示します。 + + ![](../../../images/images/igBulletGraph_Adding_igBulletGraph_to_an_HTML_Page_2.png) + +5. **パフォーマンス バーを追加します。** + + `igBulletGraph` の主要なメジャーはそのパフォーマンス バーにより視覚化されます。値は プロパティ設定で制御します。この例では、value を 35 に設定します。 + + **HTML の場合:** + +```html + $("#bulletGraph").igBulletGraph({ + … + value:"35" + }); +``` + +6. **比較マーカーを構成します。** + + 比較目盛マーカーのスケールへの配置は、 プロパティの値で制御します。この例では、`targetValue` を 43 に設定します。 + + **HTML の場合:** + +```html + $("#bulletGraph").igBulletGraph({ + … + targetValue:"43" + }); +``` + + 以下のスクリーンショットは、これまでの手順で `igBulletGraph` コントロールの外観がどのようになるか示しています。 + + ![](../../../images/images/igBulletGraph_Adding_igBulletGraph_to_an_HTML_Page_3.png) + +7. **比較範囲を追加します。** + + パフォーマンス バーで表示された値とある意味を持たせた範囲の値を比較するためには、比較範囲をスケール上に表示する必要があります。比較範囲は、内部に複数の個別の範囲を定義できる プロパティが制御します。各範囲には、独自の開始値と終了値 ( および ) と色 () があります。 + + この例では、3 つの比較範囲を構成します。それぞれ異なる灰色のグラデーションで、スケール目盛の 0、15、30 から開始します。 + + **HTML の場合:** + +```html + $("#bulletGraph").igBulletGraph({ + … + ranges: [{ + name: 'range1', + startValue: 0, + endValue: 15, + brush: '#DCDCDC' + }, + { + name: 'range2', + startValue: 15, + endValue: 30, + brush: '#A9A9A9' + }, + { + name: 'range3', + startValue: 30, + endValue: 55, + brush: '#808080' + } + ] + }); +``` + + グラフの最終的な外観を以下に示します。 + + ![](../../../images/images/igBulletGraph_Adding_igBulletGraph_to_an_HTML_Page_1.png) + + + +### 全コード + +以下は、この手順の完全なコードです。 + +**HTML の場合:** + +```html + + + + + + + + + + + + + + + + + + + + + + + + +
    + + +``` + + + +## 関連コンテンツ + +### トピック + +このトピックの追加情報については、以下のトピックも合わせてご参照ください。 + +- [ASP.NET MVC アプリケーションへの *igBulletGraph* の追加](/igbulletgraph-adding-using-the-mvc-helper): このトピックではコード例を使用して、ASP.NET MVC ビューに ASP.NET MVC ヘルパーで igBulletGraph コントロールを追加する方法を説明します。 + +- [jQuery および MVC API リファレンス リンク (*igBulletGraph*)](/igbulletgraph-api-links): このトピックでは、`igBulletGraph` コントロールと ASP.NET MVC ヘルパーに関する API 参照ドキュメントへのリンクを提供します。 + + + +### サンプル + +以下のサンプルでは、このトピックに関連する情報を提供しています。 + +- [基本構成]({environment:SamplesUrl}/bullet-graph/basic-configuration): このサンプルでは、`igBulletGraph` コントロールのシンプルな構成を紹介します。 diff --git a/docs/jquery/src/content/ja/topics/controls/igbulletgraph/adding/adding-using-the-mvc-helper.mdx b/docs/jquery/src/content/ja/topics/controls/igbulletgraph/adding/adding-using-the-mvc-helper.mdx new file mode 100644 index 0000000000..443374c096 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igbulletgraph/adding/adding-using-the-mvc-helper.mdx @@ -0,0 +1,304 @@ +--- +title: "ASP.NET MVC アプリケーションへの igBulletGraph の追加" +slug: igbulletgraph-adding-using-the-mvc-helper +--- + +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# ASP.NET MVC アプリケーションへの igBulletGraph の追加 + + + +## トピックの概要 + +#### 目的 + +このトピックではコード例を示して、ASP.NET MVC ヘルパーで ASP.NET MVC アプリケーションに `igBulletGraph`™ を追加する方法を説明します。 + +### 前提条件 + +以下の表は、このトピックを理解するための前提条件として必要な概念とトピックの一覧です。 + +- 概念 + - jQuery + - jQuery UI + - ASP.NET MVC + - ASP.NET MVC HTML ヘルパー + +- トピック + - [コントロールを MVC プロジェクトに追加](../../../01_General-and-Getting-Started/00_Adding IgniteUI Controls to an MVC Project.mdx): このトピックでは、ASP.NET MVC アプリケーションで {environment:ProductName}™ コンポーネントを使用した作業の開始方法を説明します。 + - [*igBulletGraph* の概要](/igbulletgraph-overview): このトピックは、主要機能、最小要件およびユーザー機能性など、`igBulletGraph` コントロールの概念的な情報を提供します。 + + + + + + + +### このトピックの内容 + +このトピックは、以下のセクションで構成されます。 + +- [***igBulletGraph* の ASP.NET MVC アプリケーションへの追加 - 概念的な概要**](#overview) + - [要件](#requirements) + - [手順](#steps) +- [***igBulletGraph* の ASP.NET MVC アプリケーションへの追加 - 手順**](#procedure) + - [概要](#procedure-introduction) + - [プレビュー](#preview) + - [前提条件](#prerequisites) + - [手順](#steps) + - [全コード](#full-code) +- [**関連コンテンツ**](#related-content) + - [トピック](#topics) + - [サンプル](#samples) + + +## igBulletGraph の ASP.NET MVC アプリケーションへの追加 - 概念的な概要 + +`igBulletGraph` コントロールは、ASP.NET MVC ヘルパーを使用して ASP.NET MVC View に追加できます。ブレット グラフを正しく表示するには、コントロールのディメンションを設定する必要があります。`igBulletGraph コントロール`をインスタンス化する場合、以下を含む基本的な描画に設定すべき複数の**ヘルパー メソッド**があります。 + + +- [`Width()`](Infragistics.Web.Mvc~Infragistics.Web.Mvc.BulletGraphModel_members.html): igBulletGraph の幅を設定します。 + +- [`Height()`](Infragistics.Web.Mvc~Infragistics.Web.Mvc.BulletGraphModel_members.html): igBulletGraph の高さを設定します。 + +- [`MinimumValue()`](Infragistics.Web.Mvc~Infragistics.Web.Mvc.BulletGraphModel_members.html): スケール範囲の開始値を設定します。 + +- [`MaximumValue()`](Infragistics.Web.Mvc~Infragistics.Web.Mvc.BulletGraphModel_members.html): スケール範囲の終了値を設定します。 + +- [`Value()`](Infragistics.Web.Mvc~Infragistics.Web.Mvc.BulletGraphModel_members.html): パフォーマンス バーの終了位置を指定する値を設定します。 + +- [`TargetValue()`](Infragistics.Web.Mvc~Infragistics.Web.Mvc.BulletGraphModel_members.html): 比較マーカーで示された値を設定します。 + +- [`Ranges()`](Infragistics.Web.Mvc~Infragistics.Web.Mvc.BulletGraphModel_members.html): `igBulletGraph` の範囲オブジェクトのインスタンスを作成します。 + + や に加え、各範囲に を割り当てて範囲を指定する必要があります。 + + + +### 要件 + +この手順を実行するには、以下が必要です。 + +- **ASP.NET MVC アプリケーション** +- **アプリケーション プロジェクトに追加される *Infragistics.Web.Mvc.dll* アセンブリに対する参照**。詳細は、「[MVC プロジェクトへのコントロールの追加](../../../01_General-and-Getting-Started/00_Adding IgniteUI Controls to an MVC Project.mdx)」のトピックを参照してください。 +- ビューの依存関係: + + - **ASP.NET MVC ビューに追加される `Infragistics.Web.Mvc` 名前空間** + + **ASPX の場合:** + +```csharp + <%@ Import Namespace="Infragistics.Web.Mvc" %> +``` + + - すべてのデータ ビジュアライゼーション コントロール用の**結合された Java Script ファイル**、および ASP.NET MVC ビューの `` タグに追加された必要な CSS ファイルへの参照 + + **ASPX の場合:** + +```csharp + " rel="stylesheet"> + " rel="stylesheet"> + + + + +``` + + [HTML ページへの *igBulletGraph* の追加](/igbulletgraph-adding-to-an-html-page)のトピックで説明するように、Infragistics Loader ( コンポーネント) を使用すること、あるいはすべての igBulletGraph 関連のファイルを明示的に含めることも可能です。 + +### 手順 + +1. ASP.NET MVC ヘルパーの追加 +2. 基本的な描画オプションを構成する `igBulletGraph` コントロールのインスタンス作成 +3. スケールの構成 +4. パフォーマンス バーの追加 +5. 比較マーカーの構成 +6. 比較範囲の追加 + +## igBulletGraph の ASP.NET MVC アプリケーションへの追加 - 手順 + +#### 概要 + +この手順では、コントロールのASP.NET MVC ヘルパーを使用して `igBulletGraph` のインスタンスを ASP.NET MVC アプリケーションに追加し、`width` や `height` などの基本的なオプショを設定します。スケールの設定やパフォーマンス バー、比較マーカー、3 つの比較範囲の追加も実行します。この手順は、*Infragistics.Web.Mvc.dll* アセンブリ参照がプロジェクトに追加され、コントロールがASP.NET MVC ヘルパーの `Render()` メソッドでビューに描画されることを前提とします。 + +#### プレビュー + +以下のスクリーンショットは結果のプレビューです。 + +![](../../../images/images/igBulletGraph_Adding_igBulletGraph_to_an_ASP.NET_MVC_Application_1.png) + +### 前提条件 + +「`igBulletGraph` の ASP.NET MVC アプリケーションへの追加」の手順にある前提条件に定義されている、必要な JavaScript ファイル、CSS ファイルおよび ASP.NET MVC アセンブリで構成される ASP.NET MVC アプリケーション + +### 手順 + +以下の手順では、ASP.NET MVC ヘルパーを使用して ASP.NET MVC アプリケーションに `igBulletGraph` のインスタンスを作成する方法を示します。 + +**1. ASP.NET MVC ヘルパーを追加します**。 + +ASP.NET MVC ヘルパーを ASP.NET ページの本文に追加します。 + +**ASPX の場合:** + +```csharp + +<%=(Html.Infragistics().BulletGraph() +.Render())%> + +``` + +**2. 基本的な描画オプションを構成する *igBulletGraph* コントロールのインスタンスを作成します**。 + +`igBulletGraph` のインスタンスの作成すべての {environment:ProductNameMVC} コントロールと同様に、Render メソッドを呼び出して HTML と JavaScript をビューに描画します。 + +**ASPX の場合:** + +```csharp + + <%= Html.Infragistics().BulletGraph() + .Width("300px") + .Height("70px").Render()%> + +``` + +**3. スケールを構成します。** + +スケールの値をカスタマイズするには、 [`MinimumValue()`](Infragistics.Web.Mvc~Infragistics.Web.Mvc.BulletGraphModel_members.html) および [`MaximumValue()`](Infragistics.Web.Mvc~Infragistics.Web.Mvc.BulletGraphModel_members.html) メソッドに値を渡す必要があります。この例では、スケールは 5 から開始され 55 で終了します。 + +**ASPX の場合:** + +```csharp +<%= Html.Infragistics().BulletGraph() + .Width("300px") + .Height("70px") + .MinimumValue(5) + .MaximumValue(55).Render()%> +``` + +変化したスケールを以下のスクリーンショットに示します。 + +**![](../../../images/images/igBulletGraph_Adding_igBulletGraph_to_an_ASP.NET_MVC_Application_2.png)** + +**4. パフォーマンス バーを追加します。** + +igBulletGraph の `Value()` メソッドを設定して、パフォーマンス バーを追加します。この例では、値を 35 に設定しています。 + +**ASPX の場合:** + +```csharp +<%= Html.Infragistics().BulletGraph() + ... + .Value(35) + .Render()%> +``` + +**5. 比較マーカーを構成します。** + +比較目盛マーカーのスケールへの配置は、`TargetValue()` メソッドの値を設定します。この例では、値を 43 に設定しています。 + +**ASPX の場合:** + +```csharp +<%= Html.Infragistics().BulletGraph() + ... + .TargetValue(43) + .Render()%> +``` + +以下のスクリーンショットは、これまでの手順で `igBulletGraph` コントロールの外観がどのようになるか示しています。 + +![](../../../images/images/igBulletGraph_Adding_igBulletGraph_to_an_ASP.NET_MVC_Application_3.png) + +**6. 比較範囲を追加します。** + +`Ranges()` メソッドの中に、各比較範囲を定義します。開始値および終了値は、各範囲 (`StartValue()` や `EndValue()` のパラメーター) およびカラー (`Brush()`) で個別に設定できます。 + +この例では、3 つの比較範囲を構成します。それぞれ異なる灰色のグラデーションで、スケール目盛の 0、15、30 から開始します。 + +**ASPX の場合:** + +```csharp +<%= Html.Infragistics().BulletGraph() + ... + .Ranges(range => + { + range.Range("range1").StartValue(0).EndValue(15).Brush("#DCDCDC"); + range.Range("range2").StartValue(15).EndValue(30).Brush("#A9A9A9"); + range.Range("range3").StartValue(30).EndValue(55).Brush("#808080"); + }) + .Render()%> +``` + +グラフの最終的な外観を以下に示します。 + +![](../../../images/images/igBulletGraph_Adding_igBulletGraph_to_an_ASP.NET_MVC_Application_1.png) + + + +### 全コード + +以下は、この手順の完全なコードです。 + +**ASPX の場合:** + +```csharp +<%@ Import Namespace="Infragistics.Web.Mvc" %> + + + +BulletGraph +" rel="stylesheet"> +" rel="stylesheet"> + + + + + + + <%= Html.Infragistics().BulletGraph() + .Width("300px") + .Height("70px") + .MinimumValue(5) + .MaximumValue(55) + .Value(35) + .TargetValue(43) + .Ranges(range => + { + range.Range("range1").StartValue(0).EndValue(15).Brush("#DCDCDC"); + range.Range("range2").StartValue(15).EndValue(30).Brush("#A9A9A9"); + range.Range("range3").StartValue(30).EndValue(55).Brush("#808080"); + }) + .Render()%> + + +``` + + +## 関連コンテンツ + +### トピック +このトピックの追加情報については、以下のトピックも合わせてご参照ください。 + +- [HTML ページへの *igBulletGraph* の追加](/igbulletgraph-adding-to-an-html-page): このトピックではコード例を使用して、`igBulletGraph` コントロールを HTML ページに追加する方法を説明します。 + +- [jQuery および MVC API リファレンス リンク (*igBulletGraph*)](/igbulletgraph-api-links): このトピックでは、`igBulletGraph` コントロールと ASP.NET MVC ヘルパーに関する API 参照ドキュメントへのリンクを提供します。 + + + +### サンプル + +以下のサンプルでは、このトピックに関連する情報を提供しています。 + +- [MVC の初期化]({environment:SamplesUrl}/bullet-graph/mvc-initialization): このサンプルでは、ブレット グラフの ASP.NET MVC ヘルパーを使用する方法を紹介します。 + + + + + + + + + + diff --git a/docs/jquery/src/content/ja/topics/controls/igbulletgraph/adding/adding.mdx b/docs/jquery/src/content/ja/topics/controls/igbulletgraph/adding/adding.mdx new file mode 100644 index 0000000000..4d0049c8aa --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igbulletgraph/adding/adding.mdx @@ -0,0 +1,17 @@ +--- +title: "igBulletGraph の追加" +slug: igbulletgraph-adding +--- + +# igBulletGraph の追加 + +## 概要 + +このトピック グループでは、`igBulletGraph`™ コントロールを HTML ページと ASP.NET MVC アプリケーションに追加する方法を説明します。 + +## トピック + +- [HTML ページへの *igBulletGraph* の追加](/igbulletgraph-adding-to-an-html-page): このトピックは、`igBulletGraph` を HTML ページに追加する方法を説明します。 + +- [ASP.NET MVC アプリケーションへの *igBulletGraph* の追加](/igbulletgraph-adding-using-the-mvc-helper): このトピックでは、ASP.NET MVC ヘルパーを使用して、ASP.NET MVC アプリケーションに `igBulletGraph` のインスタンスを作成する方法を紹介します。 + diff --git a/docs/jquery/src/content/ja/topics/controls/igbulletgraph/api-links.mdx b/docs/jquery/src/content/ja/topics/controls/igbulletgraph/api-links.mdx new file mode 100644 index 0000000000..ade83c5711 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igbulletgraph/api-links.mdx @@ -0,0 +1,30 @@ +--- +title: "jQuery および MVC API リファレンス リンク (igBulletGraph)" +slug: igbulletgraph-api-links +--- + +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# jQuery および MVC API リファレンス リンク (igBulletGraph) + + +## igBulletGraph API 参照ドキュメント + +#### igBulletGraph API 参照ドキュメントの概要表 + +以下の表は、`igBulletGraph`™ コントロールの API 参照ドキュメントのリンクの一覧です。(この参照コンテンツは、コントロールの開発者ガイドの他、[こちら](/igbulletgraph-overview)で使用できます。) + +- : マニュアルには、コントロールの概要、コードを含むオプション、イベント、メソッドの一覧が含まれています。 + +- [***igBulletGraph* MVC API**](Infragistics.Web.Mvc~Infragistics.Web.Mvc.BulletGraphModel.html): マニュアルには、ブレット グラフの ASP.NET MVC ヘルパーの説明と、そのすべてのメンバーのリストが含まれます。 + + + +## 関連コンテンツ + +#### トピック + +このトピックの追加情報については、以下のトピックも合わせてご参照ください。 + +- [*igBulletGraph* の追加](/igbulletgraph-adding): このトピックでは、ASP.NET MVC ヘルパーを使用して、ASP.NET MVC アプリケーションに `igBulletGraph` のインスタンスを作成する方法を紹介します。 + diff --git a/docs/jquery/src/content/ja/topics/controls/igbulletgraph/configuring/configuring-the-orientation-and-direction.mdx b/docs/jquery/src/content/ja/topics/controls/igbulletgraph/configuring/configuring-the-orientation-and-direction.mdx new file mode 100644 index 0000000000..565f12458b --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igbulletgraph/configuring/configuring-the-orientation-and-direction.mdx @@ -0,0 +1,215 @@ +--- +title: "向きと方向の構成 (igBulletGraph)" +slug: igbulletgraph-configuring-the-orientation-and-direction +--- + +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# 向きと方向の構成 (igBulletGraph) + +## トピックの概要 + +#### 目的 + +このトピックは、垂直スケールと反転したスケール方向の両方またはいずれか一方により `igBulletGraph`™ コントロールを構成する方法を説明します。 + +### 前提条件 + +このトピックを理解するために、以下のトピックを参照することをお勧めします。 + +- [*igBulletGraph* の概要](/igbulletgraph-overview): このトピックは、主要機能、最小要件およびユーザー機能性など、igBulletGraph コントロールの概念的な情報を提供します。 + +- [*igBulletGraph* の追加](/igbulletgraph-adding): このトピック グループは、igBulletGraph コントロールを HTML ページと ASP.NET MVC アプリケーションに追加する方法を説明します。 + + +### このトピックの内容 + +このトピックは、以下のセクションで構成されます。 + +- [**概要**](#introduction) + - [スケールの向きと方向の構成の概要](#scale-orientation-summary) + - [スケールの向きと方向の構成の概要表](#scale-orientation-summary-chart) +- [**スケールの向きの構成**](#scale-orientation) + - [プロパティ設定](#scale-orientation-property-settings) + - [例](#scale-orientation-example) +- [**スケールの方向の構成 (スケールの反転)**](#scale-direction) + - [概要](#scale-direction-overview) + - [プロパティ設定](#scale-direction-property-settings) + - [例 - 水平方向での反転方向](#scale-direction-example-horizontal) + - [例 - 垂直方向での反転方向](#scale-direction-example-vertical) +- [**関連コンテンツ**](#related-content) + - [トピック](#topics) + - [サンプル](#samples) + + + +## 概要 + +### スケールの向きと方向の構成の概要 + +`igBulletGraph` コントロールは、スケールの垂直方向および水平方向をサポートしています。既定では、スケールは水平方向です。垂直方向のスケールの値は上向きに増加し、番号ラベルがその左側に配置されます。 + +*![](../../../images/images/igBulletGraph_Configuring_the_Orientation_and_Direction_1.png)* + +この設定は、コントロールの プロパティで定義されます。 + +スケールの向きは、パフォーマンス バーが伸長する方向で、スケールの値が増加します。方向は、標準 (水平方向で左から右、垂直方向で下から上) または反転 (水平方向で右から左、垂直方向で上から下) が可能です。 + +*水平方向での反転方向*|*垂直方向での反転方向* +-----------------------------------------------|--------------------------------------------- +![](../../../images/images/igBulletGraph_Configuring_the_Orientation_and_Direction_2.png) | ![](../../../images/images/igBulletGraph_Configuring_the_Orientation_and_Direction_3.png) + + + +スケールの方向は、コントロールの プロパティで定義されます。デフォルトの方向は、標準です。 + +### スケールの向きと方向の構成の概要表 + +以下の表で、`igBulletGraph` のコントロールの方向とスケールの反転で構成できる要素を簡単に説明し、構成に使用するプロパティにマップします。 + +構成可能な項目|詳細|プロパティ +---|---|--- +スケールの向き|コントロール内のブレット グラフのスケールの向き (水平または垂直)。| +スケールの方向|ブレット グラフの方向 (標準または反転)。| + + +## スケールの向きの構成 + +ブレット グラフの向き (水平または垂直) は、コントロールの プロパティで指定します。 + +### プロパティ設定 + +以下の表では、各プロパティ設定の構成です。 + +目的:|使用するプロパティ:|設定の選択肢: +--------------|--------------------|-------------- +水平方向を指定する||*horizontal* +垂直方向を指定する|`orientation`|*vertical* + + +### 例 + +以下のスクリーンショットは、以下の設定の結果 `igBulletGraph` の外観がどのようになるか示しています。 + +プロパティ|値 +---|--- +|"vertical" + + +![](../../../images/images/igBulletGraph_Configuring_the_Orientation_and_Direction_1.png) + +以下のコードはこの例を実装します。 + +**JavaScript の場合:** + +```js +$('#igBulletGraph').igBulletGraph({ + width: ”70”, + height: ”300”, + orientation: "vertical" +}); +``` + + + +## スケールの方向の構成 (スケールの反転) + +### 概要 + +水平方向では、スケールの標準 (デフォルト) 方向は「左から右」で、これはスケールが [**グラフ領域**](/igbulletgraph-overview#logical-areas) の左端から開始され、右端で終了することを意味します ( はグラフ領域の左端の始まりを示し、 は、グラフ領域の左端からスケールの終りまでの距離を示します)。 + +![](../../../images/images/igBulletGraph_Configuring_the_Orientation_and_Direction_5.png) + +方向が反転すると、スケールはグラフ領域の右端から開始され、左端で終了します (`scaleStartExtent` はグラフ領域の右端の始まりを示し、`scaleEndExtent` はグラフ領域の右端の終りまでの距離を示します)。 + +![](../../../images/images/igBulletGraph_Configuring_the_Orientation_and_Direction_6.png) + +垂直方向では、スケールの標準 (デフォルト) 方向は「下端から上端」で、これはスケールがグラフ領域の下端から開始され、上端で終了することを意味します (`scaleStartExtent` はグラフ領域の下端の始まりを示し、`scaleEndExtent` は、グラフ領域の下端からスケールの終りまでの距離を示します)。 + +![](../../../images/images/igBulletGraph_Configuring_the_Orientation_and_Direction_7.png) + +方向が反転すると、スケールはグラフ領域の上端から開始され、下端で終了します (`scaleStartExtent` はグラフ領域の上端の始まりを示し、`scaleEndExtent` はグラフ領域の上端からスケールの終りまでの距離を示します)。 + +![](../../../images/images/igBulletGraph_Configuring_the_Orientation_and_Direction_8.png) + +### プロパティ設定 + +以下の表は、任意の <configuration/behaviors> と各プロパティ設定のマップを示します。 + +目的:|使用するプロパティ:|設定の選択肢: +---|---|--- +標準方向の構成||“false” +反転方向の構成|`isScaleInverted`|“true” + + +### 例 - 水平方向での反転方向 + +以下のスクリーンショットは、以下の設定の結果 igBulletGraph の外観がどのようになるか示しています。 + +プロパティ|値 +---|--- +|“true” +|"horizontal" + + +![](../../../images/images/igBulletGraph_Configuring_the_Orientation_and_Direction_2.png) + +以下のコードはこの例を実装します。 + +**JavaScript の場合:** + +```js +$('#igBulletGraph').igBulletGraph({ + width: “70”, + height: “300”, + isScaleInverted: "true" +}); +``` + +### 例 - 垂直方向での反転方向 + +以下のスクリーンショットは、以下の設定の結果 `igBulletGraph` の外観がどのようになるか示しています。 + +プロパティ|値 +---|--- +|“true” +|"vertical" + +![](../../../images/images/igBulletGraph_Configuring_the_Orientation_and_Direction_3.png) + +以下のコードはこの例を実装します。 + +**JavaScript の場合:** + +```js +$('#igBulletGraph').igBulletGraph({ + width: '70', + height: '400', + orientation: "vertical", + isScaleInverted: "true" +}); +``` + + + +## 関連コンテンツ + +### トピック +- [視覚要素の構成 (*igBulletGraph*)](/igbulletgraph-configuring-the-visual-elements): このトピック グループは、igBulletGraph コントロールの視覚要素 (スケール要素、パフォーマンス バー、比較マーカーおよび範囲など) を詳細に説明し、コード例を使用してコントロールの視覚要素を構成する方法を示します。 + + +### サンプル + +このトピックについては、以下のサンプルも参照してください。 + +- [垂直方向]({environment:SamplesUrl}/bullet-graph/vertical-orientation): このサンプルでは、igBulletGraph コントロールの方向を変更し、スケールを反転する方法を紹介します。 + + + + + + + + + + diff --git a/docs/jquery/src/content/ja/topics/controls/igbulletgraph/configuring/configuring.mdx b/docs/jquery/src/content/ja/topics/controls/igbulletgraph/configuring/configuring.mdx new file mode 100644 index 0000000000..66536bd886 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igbulletgraph/configuring/configuring.mdx @@ -0,0 +1,17 @@ +--- +title: "igBulletGraph の構成" +slug: igbulletgraph-configuring +--- + +# igBulletGraph の構成 + +## 概要 + +このトピック グループは、向きや方向および視覚要素を含む `igBulletGraph`™ コントロールのさまざまな要素を構成する方法を説明します。 + +## トピック + +- [向きと方向の構成 (*igBulletGraph*)](/igbulletgraph-configuring-the-orientation-and-direction): このトピックは、垂直スケールと反転したスケール方向の両方またはいずれか一方により igBulletGraph コントロールを構成する方法を説明します。 + +- [視覚要素の構成 (*igBulletGraph*)](/igbulletgraph-configuring-the-visual-elements): このトピック グループは、igBulletGraph コントロールの視覚要素 (スケール要素、パフォーマンス バー、比較マーカーおよび範囲など) を詳細に説明し、コード例を使用してコントロールの視覚要素を構成する方法を示します。 + diff --git a/docs/jquery/src/content/ja/topics/controls/igbulletgraph/configuring/elements/configuring-comparative-ranges.mdx b/docs/jquery/src/content/ja/topics/controls/igbulletgraph/configuring/elements/configuring-comparative-ranges.mdx new file mode 100644 index 0000000000..a718f20a2e --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igbulletgraph/configuring/elements/configuring-comparative-ranges.mdx @@ -0,0 +1,278 @@ +--- +title: "比較範囲の構成 (igBulletGraph)" +slug: igbulletgraph-configuring-comparative-ranges +--- + +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# 比較範囲の構成 (igBulletGraph) + +## トピックの概要 + +#### 目的 + +このトピックではコード例を使用して、`igBulletGraph` コントロールの範囲を構成する方法を説明します。説明には、範囲の数、位置、長さ、幅、および書式設定が含まれます。 + +### 前提条件 + +このトピックを理解するために、以下のトピックを参照することをお勧めします。 + +- [*igBulletGraph* の概要](/igbulletgraph-overview): このトピックは、主要機能、最小要件およびユーザー機能性など、`igBulletGraph` コントロールの概念的な情報を提供します。 + +- [*igBulletGraph* の追加](/igbulletgraph-adding): このトピック グループは、`igBulletGraph` コントロールを HTML ページと ASP.NET MVC アプリケーションに追加する方法を説明します。 + + + +### このトピックの内容 + +このトピックは、以下のセクションで構成されます。 + +- [**比較範囲の構成**](#configuring) + - [比較範囲構成の概要](#configuration-summary) + - [比較範囲構成の概要表](#configuration-summary-chart) + - [プロパティ設定](#property-settings) + - [例](#example) +- [**関連コンテンツ**](#related-content) + - [トピック](#topics) + - [サンプル](#samples) + + + +## 比較範囲の構成 + +#### 比較範囲構成の概要 + +`igBulletGraph` コントロールは、その範囲オブジェクトをインスタンス化することで複数の比較範囲をサポートします。 + +![](../../../../images/images/igBulletGraph_Configuring_Comparative_Ranges_1.png) + +各範囲は、スケールのメジャーでの開始値や終了値、塗りつぶし色、および境界線の幅や色を指定することで個別に構成できます。スケール全域での比較範囲のサイズは、内側と外側の余白を調整して構成します。 + +### 比較範囲構成の概要表 + +以下の表で、`igBulletGraph` コントロールの比較範囲で構成できる要素を簡単に説明し、構成に使用するプロパティにマップします。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    構成可能な要素プロパティデフォルト値
    グラフに表示する範囲の\*\*数値\*\*設定されていません
    \*\*長さ、幅、位置\*\*設定されていません
    設定されていません
    設定されていません
    設定されていません
    設定されていません
    設定されていません
    \*\*ルック アンド フィール\*\*塗りつぶし色デフォルトのテーマで定義済み
    境界線の色デフォルトのテーマで定義済み
    境界線の線幅\*1.0\*
    \*\*ツールチップ\*\*ハイフン (-) で区切られた範囲の開始値と終了値です。
    + +> **注: **各範囲の `brush` および `outline` プロパティに明示的に値を設定しない場合、値は *igBulletGraph* の `rangeBrushes` および `rangeOutlines` オブジェクトの値から読み取られます。値は、各範囲の色やアウトラインの塗りつぶしの設定に継続して使用するブラシ セットの事前定義にも使用できます。 + +### プロパティ設定 + +以下の表では、任意の動作と各プロパティ設定のマップを示します。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    構成の目的:使用するプロパティ:設定の選択肢:
    \*\*要素\*\*\*\*詳細\*\*
    \*\*名前\*\*範囲の名前。ツールチップで表示するために使用。範囲の名前を表す文字列
    []()\*\*スケールに沿った位置\*\*範囲開始スケールで範囲を開始する位置スケールのメジャーにおける任意の値
    範囲終了スケールで範囲を終了する位置スケールのメジャーにおける任意の値
    \*\*幅と位置\*\* (スケール全域)範囲の始点側の端の内側の頂点[予約領域](/igbulletgraph-overview#logical-areas)の端からのスケール全域における始点側の端の内側の頂点位置。(内側の頂点は、予約領域の端に最も近い始点側の端の地点です。)方向 (水平 / 垂直) に応じた、グラフ領域の高さと幅の相対部分として望ましい値。小数で指定 (例: \*0.2\*)
    範囲の終点側の端の内側の頂点予約領域の端からのスケール全域における終点側の端の内側の頂点位置。方向 (水平 / 垂直) に応じた、グラフ領域の高さと幅の相対部分として望ましい値。小数で指定 (例: \*0.3\*)
    範囲の始点側の端の外側の頂点予約領域の端からのスケール全域における始点側の端の外側の頂点位置。(外側の頂点は、予約領域の端に最も近い始点側の端の地点です。)方向 (水平 / 垂直) に応じた、グラフ領域の高さと幅の相対部分として望ましい値。小数で指定 (例: \*0.7\*)
    範囲の終点側の端の外側の頂点予約領域の端からのスケール全域における終点側の端の外側の頂点位置。方向 (水平 / 垂直) に応じた、グラフ領域の高さと幅の相対部分として望ましい値。小数で指定 (例: \*0.8\*)
    \*\*ルック アンド フィール\*\*塗りつぶし色範囲の塗りつぶし色任意の色
    境界線の線幅範囲の境界線の幅任意の値 (ピクセル)
    境界線の色範囲の境界線の色任意の色
    \*\*ツールチップ\*\*比較範囲のツールチップの内容任意のテンプレート (詳細は、[ツールチップの構成 (\*igBulletGraph\*)](/igbulletgraph-configuring-the-tooltips) を参照)
    + +### 例 + +以下のスクリーンショットは、以下設定の結果、`igBulletGraph` に追加した比較範囲の外観がどのようになるか示しています。 + +プロパティ|値 +---|--- +|"Green" +|“range1” +|“6” +|“89” +|“0.5” +|“0.5” +|“0.8” +|“0.8” +|"Black" + +![](../../../../images/images/igBulletGraph_Configuring_Comparative_Ranges_2.png) + +以下のコードはこの例を実装します。 + +**JavaScript の場合:** + +```js +$(function () { + $("#bulletgraph").igBulletGraph({ + width: "300", + height: "100", + ranges: [{ + name: 'range1', + brush:'#008000', + startValue:"6", + endValue:"89", + innerStartExtent:"0.5", + innerEndExtent:"0.5", + outerStartExtent:"0.8", + outerEndExtent:"0.8" + }] });}); +``` + + +## 関連コンテンツ + +### トピック + +このトピックの追加情報については、以下のトピックも合わせてご参照ください。 + +- [スケールの構成 (*igBulletGraph*)](/igbulletgraph-configuring-the-scale): このトピックではコード例を使用して、`igBulletGraph` コントロールのスケールを構成する方法を説明します。説明には、コントロール内のスケールの配置、スケールの目盛およびラベルの構成が含まれます。 + +- [パフォーマンス バーの構成 (*igBulletGraph*)](/igbulletgraph-configuring-the-performance-bar): このトピックではコード例を使用して、`igBulletGraph` コントロールのパフォーマンス バーを構成する方法を説明します。説明には、バーが示す値、幅、位置、および書式設定が含まれます。 + +- [比較マーカーの構成 (*igBulletGraph*)](/igbulletgraph-configuring-the-comparative-marker): このトピックではコード例を使用して、`igBulletGraph` コントロールの比較目盛マーカーを構成する方法を説明します。説明には、マーカーの値、幅、および書式設定が含まれます。 + +- [背景の構成 (*igBulletGraph*)](/igbulletgraph-configuring-the-background): このトピックではコード例を使用して、ブレット グラフの背景を構成する方法を説明します。説明には、背景のサイズ、位置、色、および境界線の設定が含まれます。 + +- [ツールチップの構成 (*igBulletGraph*)](/igbulletgraph-configuring-the-tooltips): このトピックではコード例を使用して、`igBulletGraph` コントロールのツールチップを有効にする方法および表示する遅延時間を設定する方法を説明します。 + + +### サンプル + +このトピックについては、以下のサンプルも参照してください。 + +- [範囲設定]({environment:SamplesUrl}/bullet-graph/range-settings): このサンプルでは、`igBulletGraph` コントロールで比較範囲を設定する方法を紹介します。 + + + + + + + + + + diff --git a/docs/jquery/src/content/ja/topics/controls/igbulletgraph/configuring/elements/configuring-the-background.mdx b/docs/jquery/src/content/ja/topics/controls/igbulletgraph/configuring/elements/configuring-the-background.mdx new file mode 100644 index 0000000000..96ec3287da --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igbulletgraph/configuring/elements/configuring-the-background.mdx @@ -0,0 +1,202 @@ +--- +title: "背景の構成 (igBulletGraph)" +slug: igbulletgraph-configuring-the-background +--- + +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# 背景の構成 (igBulletGraph) + +## トピックの概要 + +#### 目的 + + +このトピックではコード例を使用して、ブレット グラフの背景を構成する方法を説明します。説明には、背景のサイズ、位置、色、および境界線の設定が含まれます。 + +### 前提条件 + +このトピックを理解するために、以下のトピックを参照することをお勧めします。 + +- [*igBulletGraph* の概要](/igbulletgraph-overview): このトピックは、主要機能、最小要件およびユーザー機能性など、`igBulletGraph`™ コントロールの概念的な情報を提供します。 + +- [*igBulletGraph* の追加](/igbulletgraph-adding): このグループ トピックでは、`igBulletGraph`™ コントロールを HTML ページと ASP.NET MVC アプリケーションに追加する方法を説明します。 + +### このトピックの内容 + +このトピックは、以下のセクションで構成されます。 + +- [**背景の構成**](#configuring) + - [背景構成の概要](#configuration-summary) + - [背景構成の概要表](#configuration-summary-chart) + - [プロパティ設定](#property-settings) + - [例](#example) +- [**関連コンテンツ**](#related-content) + - [トピック](#topics) + + + +## 背景の構成 + +#### 背景構成の概要 + +`igBulletGraph` コントロールの背景は、スプレッドと位置、およびルック アンド フィール (塗りつぶしと境界線) の構成が可能です。スプレッドおよび位置は、スケール全域のディメンションで および プロパティを介して構成できます。背景はスケールに沿って、常にコントロールの一方の端から他方の端に広がります。塗りつぶし色および境界線は、スタイル テンプレートで利用できるプロパティのセットにより管理されます。 + +以下の図は、背景がオレンジ色で境界線が線幅 3 ピクセルのシアン色の構成を示しています。背景の範囲は および プロパティで値を指定すると小さくなります。 + +![](../../../../images/images/igBulletGraph_Configuring_the_Background_1.png) + +### 背景構成の概要表 + +以下の表で、`igBulletGraph` コントロールの背景で構成できる要素を簡単に説明し、構成に使用するプロパティにマップします。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    構成可能な要素プロパティデフォルト値
    \*\*スプレッドおよび位置\*\*
    (スケール全域)    		\*0\*
    \*1.0\*
    \*\*ルック アンド フィール\*\*塗りつぶし色デフォルトのテーマで定義済み
    境界線の色デフォルトのテーマで定義済み
    境界線の線幅\*2.0\*
    + + +### プロパティ設定 + +以下の表では、任意の動作と各プロパティ設定のマップを示します。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    構成の目的:使用するプロパティ:設定の選択肢:
    \*\*要素\*\*\*\*詳細\*\*
    \*\*スプレッドおよび位置\*\*
    (スケール全域)    		下端 / 左端の位置水平方向で[グラフ領域](/igbulletgraph-overview#logical-areas)の下端または垂直方向でグラフ領域の左端に対する背景の下端 (水平方向) または左端 (垂直方向) の位置。方向に応じた、グラフ領域の高さと幅の相対部分として望ましい値。小数で指定 (例: \*0.2)\*
    上端 / 左端の位置水平方向でグラフ領域の下端または垂直方向でグラフ領域の左端に対する背景の上端 (水平方向) または右端 (垂直方向) の位置。方向に応じた、グラフ領域の高さと幅の相対部分として必要な値。小数で指定 (例: \*0.2\*)
    \*\*ルック アンド フィール\*\*塗りつぶし色背景の塗りつぶし色任意の色
    境界線の線幅背景の境界線幅任意の値 (ピクセル)
    境界線の色背景の境界線色任意の色
    + +### 例 + +以下のスクリーンショットは、以下の設定の結果 `igBulletGraph` の外観がどのようになるか示しています。 + +プロパティ|値 +---|--- +|'#FFDAB9' +|'#00FFFF' +|“3” +|“0.2” +|“0.7” + + +![](../../../../images/images/igBulletGraph_Configuring_the_Background_2.png) + +以下のコードはこの例を実装します。 + +**JavaScript の場合:** + +```js + $(function () { + $("#bulletGraph").igBulletGraph({ + width: "300px", + height: "100px", + backingBrush:'#FFDAB9', + backingOutline: '#00FFFF', + backingStrokeThickness: "3", + backingInnerExtent:"0.2", + backingOuterExtent:"0.7" + }); +``` + + + + +## 関連コンテンツ + +### トピック + +このトピックの追加情報については、以下のトピックも合わせてご参照ください。 + + +- [スケールの構成 (*igBulletGraph*)](/igbulletgraph-configuring-the-scale): このトピックではコード例を使用して、`igBulletGraph` コントロールのスケールを構成する方法を説明します。説明には、コントロール内のスケールの配置、スケールの目盛およびラベルの構成が含まれます。 + +- [パフォーマンス バーの構成 (*igBulletGraph*)](/igbulletgraph-configuring-the-performance-bar): このトピックではコード例を使用して、`igBulletGraph` コントロールのパフォーマンス バーを構成する方法を説明します。説明には、バーが示す値、幅、位置、および書式設定が含まれます。 + +- [比較マーカーの構成 (*igBulletGraph*)](/igbulletgraph-configuring-the-comparative-marker): このトピックではコード例を使用して、`igBulletGraph` コントロールの比較目盛マーカーを構成する方法を説明します。説明には、マーカーの値、幅、および書式設定が含まれます。 + +- [比較範囲の構成 (*igBulletGraph*)](/igbulletgraph-configuring-comparative-ranges): このトピックではコード例を使用して、`igBulletGraph` コントロールの範囲を構成する方法を説明します。説明には、範囲の数、位置、長さ、幅、および書式設定が含まれます。 + +- [ツールチップの構成 (*igBulletGraph*)](/igbulletgraph-configuring-the-tooltips): このトピックではコード例を使用して、`igBulletGraph` コントロールのツールチップを有効にする方法および表示する遅延時間を設定する方法を説明します。 + + + + + + + + + + diff --git a/docs/jquery/src/content/ja/topics/controls/igbulletgraph/configuring/elements/configuring-the-comparative-marker.mdx b/docs/jquery/src/content/ja/topics/controls/igbulletgraph/configuring/elements/configuring-the-comparative-marker.mdx new file mode 100644 index 0000000000..1de83e4a5e --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igbulletgraph/configuring/elements/configuring-the-comparative-marker.mdx @@ -0,0 +1,261 @@ +--- +title: "比較マーカーの構成 (igBulletGraph)" +slug: igbulletgraph-configuring-the-comparative-marker +--- + +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# 比較マーカーの構成 (igBulletGraph) + +## トピックの概要 + +#### 目的 + +このトピックではコード例を使用して、`igBulletGraph`™ コントロールの比較目盛マーカーを構成する方法を説明します。説明には、マーカーの値、幅、および書式設定が含まれます。 + +### 前提条件 + +このトピックを理解するために、以下のトピックを参照することをお勧めします。 + +- [*igBulletGraph* の概要](/igbulletgraph-overview): このトピックは、主要機能、最小要件およびユーザー機能性など、`igBulletGraph` コントロールの概念的な情報を提供します。 + +- [*igBulletGraph* の追加](/igbulletgraph-adding): このトピック グループは、`igBulletGraph` コントロールを HTML ページと ASP.NET MVC アプリケーションに追加する方法を説明します。 + + + +### このトピックの内容 + +このトピックは、以下のセクションで構成されます。 + +- [**比較マーカーの構成**](#configuring) + - [比較マーカー構成の概要](#configuration-summary) + - [比較マーカー構成の概要表](#configuration-summary-chart) + - [プロパティ設定](#property-settings) + - [例](#example) +- [**関連コンテンツ**](#related-content) + - [トピック](#topics) + - [サンプル](#samples) + + + +## 比較マーカーの構成 + +#### 比較マーカー構成の概要 + +比較マーカーは、パフォーマンス バーが示す値と比較された値をスケールに表示します。比較値は、目標売上高などの目標値または値の超過限度を示す制限値 (体温計の37℃の発熱の目安) にすることができます。 + +比較目盛マーカーが示す値およびスケール上の位置は、 プロパティで設定します。比較マーカーは、そのスケール全域で位置やサイズ ( および )、幅 () およびルック アンド フィール (塗りつぶし色 - 、境界線の線幅 - 、境界線の色 - ) に関して各プロパティでカスタマイズできます。 + +![](../../../../images/images/igBulletGraph_Configuring_the_Comparative_Marker_1.png) + +#### 比較マーカー構成の概要表 + +以下の表で、`igBulletGraph` コントロールの比較マーカーで構成できる要素を簡単に説明し、構成に使用するプロパティにマップします。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    構成可能な要素プロパティデフォルト値
    \*\*名前\*\*設定されていません
    \*\*表示値\*\*設定されていません
    \*\*幅\*\*\*3.0\*
    \*\*スケール全域の位置\*\*\*\*内側の端\*\*\*0.3\*
    \*\*外側の端\*\*\*0.85\*
    \*\*ルック アンド フィール\*\*塗りつぶし色デフォルトのテーマで定義済み
    境界線の線幅\*1.0\*
    境界線の色デフォルトのテーマで定義済み
    \*\*ツールチップ\*\*比較マーカーで示された値
    + + +#### プロパティ設定 + +以下の表では、任意の動作と各プロパティ設定のマップを示します。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    構成の目的:使用するプロパティ:設定の選択肢:
    \*\*要素\*\*\*\*詳細\*\*
    \*\*名前\*\*比較マーカーの名前 ([ツールチップ](/igbulletgraph-configuring-the-tooltips#comparative-marker)の表示用)比較マーカーの名前を表す文字列
    \*\*表示する値\*\*表示する値スケールのメジャーにおける任意の値
    \*\*幅\*\*マーカーの幅任意の値 (ピクセル)
    \*\*スケール全域の位置\*\*\*\*内側の端\*\*水平方向で比較マーカーが位置する下端、または垂直方向で位置する左端方向に応じた、[グラフ領域](/igbulletgraph-overview#logical-areas)の高さと幅の相対部分として必要な値。小数で指定 (例: \*0.2\*)
    \*\*外側の端\*\*水平方向で比較マーカーが位置する上端、または垂直方向で位置する右端方向に応じた、グラフ領域の高さと幅の相対部分として必要な値。小数で指定 (例: \*0.2\*)
    \*\*ルック アンド フィール\*\*塗りつぶし色マーカーの塗りつぶし色任意の色
    境界線の線幅マーカーの境界線の幅任意の値 (ピクセル)
    境界線の色マーカーの境界線の色を構成任意の色
    ツールチップ比較マーカーの境界線のコンテンツ任意のテンプレート (詳細は、[ツールチップの構成 (\*igBulletGraph\*)](/igbulletgraph-configuring-the-tooltips) トピックを参照)
    + +#### 例 + +以下のスクリーンショットは、以下の設定の結果 `igBulletGraph` の外観がどのようになるか示しています。 + +プロパティ|値 +---|--- +|“70” +|“10” +|#FFFF00 + |“0.2” + |“0.7” +|'#006400' +|“3” + + +![](../../../../images/images/igBulletGraph_Configuring_the_Comparative_Marker_2.png) + +以下のコードはこの例を実装します。 + +**JavaScript の場合:** + +```js +$(function () { +$("#bulletGraph").igBulletGraph({ + height: "70", + width: "300", + targetValue:"70", + targetValueBreadth:"10", + targetValueBrush: '#FFFF00', + targetValueOutline:'#006400', + targetValueStrokeThickness: "2", + targetValueInnerExtent:"0.3", + targetValueOuterExtent:"0.8" +}); +``` + + + +## 関連コンテンツ + +### トピック + +このトピックの追加情報については、以下のトピックも合わせてご参照ください。 + +- [スケールの構成 (*igBulletGraph*)](/igbulletgraph-configuring-the-scale): このトピックではコード例を使用して、`igBulletGraph` コントロールのスケールを構成する方法を説明します。説明には、コントロール内のスケールの配置、スケールの目盛およびラベルの構成が含まれます。 + +- [パフォーマンス バーの構成 (*igBulletGraph*)](/igbulletgraph-configuring-the-performance-bar): このトピックではコード例を使用して、`igBulletGraph` コントロールのパフォーマンス バーを構成する方法を説明します。説明には、バーが示す値、幅、位置、および書式設定が含まれます。 + +- [比較範囲の構成 (*igBulletGraph*)](/igbulletgraph-configuring-comparative-ranges): このトピックではコード例を使用して、`igBulletGraph` コントロールの範囲を構成する方法を説明します。説明には、範囲の数、位置、長さ、幅、および書式設定が含まれます。 + +- [背景の構成 (*igBulletGraph*)](/igbulletgraph-configuring-the-background): このトピックではコード例を使用して、ブレット グラフの背景を構成する方法を説明します。説明には、背景のサイズ、位置、色、および境界線の設定が含まれます。 + +- [ツールチップの構成 (*igBulletGraph*)](/igbulletgraph-configuring-the-tooltips): このトピックではコード例を使用して、`igBulletGraph` コントロールのツールチップを有効にする方法および表示する遅延時間を設定する方法を説明します。 + + + +### サンプル + +このトピックについては、以下のサンプルも参照してください。 + +- [パフォーマンス バーの設定]({environment:SamplesUrl}/bullet-graph/performance-bar-settings): このサンプルでは、`igBulletGraph` コントロールのパフォーマンス (実際値) バー、比較目盛 (ターゲット値) マーカー、およびスケールのディメンションを構成する方法を紹介します。 + +- [基本構成]({environment:SamplesUrl}/bullet-graph/basic-configuration): このサンプルでは、`igBulletGraph` コントロールのシンプルな構成を紹介します。 + + + + + + + + + + diff --git a/docs/jquery/src/content/ja/topics/controls/igbulletgraph/configuring/elements/configuring-the-performance-bar.mdx b/docs/jquery/src/content/ja/topics/controls/igbulletgraph/configuring/elements/configuring-the-performance-bar.mdx new file mode 100644 index 0000000000..b7a1120d6c --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igbulletgraph/configuring/elements/configuring-the-performance-bar.mdx @@ -0,0 +1,249 @@ +--- +title: "パフォーマンス バーの構成 (igBulletGraph)" +slug: igbulletgraph-configuring-the-performance-bar +--- + +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# パフォーマンス バーの構成 (igBulletGraph) + +## トピックの概要 + +#### 目的 + +このトピックではコード例を使用して、`igBulletGraph`™ コントロールのパフォーマンス バーを構成する方法を説明します。説明には、バーが示す値、幅、位置、および書式設定が含まれます。 + +### 前提条件 + +このトピックを理解するために、以下のトピックを参照することをお勧めします。 + +- [*igBulletGraph* の概要](/igbulletgraph-overview): このトピックは、主要機能、最小要件およびユーザー機能性など、`igBulletGraph` コントロールの概念的な情報を提供します。 + +- [*igBulletGraph* の追加](/igbulletgraph-adding): このトピック グループは、`igBulletGraph` コントロールを HTML ページと ASP.NET MVC アプリケーションに追加する方法を説明します。 + + + +### このトピックの内容 + +このトピックは、以下のセクションで構成されます。 + +- [**パフォーマンス バーの構成**](#configuring) + - [パフォーマンス バーの外観構成の概要](#appearance-summary) + - [パフォーマンス バーの外観構成の概要表](#appearance-summary-chart) + - [プロパティ設定](#property-settings) + - [例](#example) +- [**関連コンテンツ**](#related-content) + - [トピック](#topics) + - [サンプル](#samples) + + + +## パフォーマンス バーの構成 + +#### パフォーマンス バーの外観構成の概要 + +パフォーマンス バーはスケール範囲の先頭から開始しなければなりません。終了位置のみ構成可能です。終了位置でバーの長さを効果的に構成できます。終了位置は プロパティで処理されます。 + +スケール全域のディメンションでの位置は、 および プロパティにより、グラフ領域の端に対して構成できます。パフォーマンス バーの位置を構成すると幅も定義されます。 + +![](../../../../images/images/igBulletGraph_Configuring_the_Performance_Bar_1.png) + +バーのルック アンド フィールは、各プロパティ (、 および ) を使用して塗りつぶし色、境界線の色および境界線の線幅をカスタマイズできます。 + +### パフォーマンス バーの外観構成の概要表 + +以下の表で、`igBulletGraph` コントロールのバーで構成できる要素を簡単に説明し、構成に使用するプロパティにマップします。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    構成可能な要素プロパティデフォルト値
    \*\*名前\*\*設定されていません
    \*\*表示する値\*\*設定されていません
    \*\*幅と位置\*\*
    (スケール全域)    		\*0.5\*
    \*0.65\*
    \*\*ルック アンド フィール\*\*塗りつぶし色デフォルトのテーマで定義済み
    境界線の線幅\*1.0\*
    境界線の色デフォルトのテーマで定義済み
    ツールチップ の初期化状態による
    + +> **注:** ツールチップの構成の詳細は、[ツールチップの構成 (*igBulletGraph*)](/igbulletgraph-configuring-the-tooltips) トピックの[パフォーマンス バーのカスタム ツールチップの構成](/igbulletgraph-configuring-the-tooltips#performance-bar)を参照してください。 + +### プロパティ設定 + +以下の表では、任意の動作と各プロパティ設定のマップを示します。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    構成の目的:使用するプロパティ:設定の選択肢:
    \*\*要素\*\*\*\*詳細\*\*
    \*\*名前\*\*パフォーマンス バーの名前 ([ツールチップ](/igbulletgraph-configuring-the-tooltips#performance-bar)の表示用)パフォーマンス バーの名前を表す文字列
    \*\*表示する値\*\*パフォーマンス バーで示された値スケールのメジャーにおける任意の値
    \*\*幅と位置\*\*
    (スケール全域)    		下端 / 右端の位置水平方向でパフォーマンス バーが位置する下端または垂直方向で位置する右端方向に応じた、[グラフ領域](/igbulletgraph-overview#logical-areas)の高さと幅の相対部分として必要な値。小数で指定 (例: \*0.2\*)
    上端 / 左端の位置水平方向でパフォーマンス バーが位置する上端または垂直方向で位置する左端 (開始点と終了点間の差が目盛の線分の長さになります。)方向に応じた、グラフ領域の高さと幅の相対部分として必要な値。小数で指定 (例: \*0.2\*)
    \*\*ルック アンド フィール\*\*塗りつぶし色バーの塗りつぶし色任意の色
    境界線の線幅パフォーマンス バー境界線の太さ任意の値 (ピクセル)
    境界線の色パフォーマンス バー境界線の色任意の色
    \*\*ツールチップ\*\*パフォーマンス バーのツールチップの内容任意のテンプレート (詳細は、[ツールチップの構成 (\*igBulletGraph\*)](/igbulletgraph-configuring-the-tooltips) を参照)
    + +### 例 + +以下のスクリーンショットは、以下の設定の結果 `igBulletGraph` の外観がどのようになるか示しています。 + +プロパティ|値 +---|--- +|*“85”* +|*'#FFA500'* +|*“0.3”* +|*“0.8”* +|*'#A52A2A'* +|*“3”* + + +![](../../../../images/images/igBulletGraph_Configuring_the_Performance_Bar_2.png) + +以下のコードはこの例を実装します。 + +**JavaScript の場合:** + +```js + $(function () { + $("#bulletGraph").igBulletGraph({ + width: "300", + height: "100", + value:"85", + valueBrush: '#FFA500', + valueInnerExtent:"0.3", + valueOuterExtent:"0.8", + valueOutline:'A52A2A', + valueStrokeThickness:"3" + }); +``` + + + +## 関連コンテンツ + +### トピック + +このトピックの追加情報については、以下のトピックも合わせてご参照ください。 + + +- [スケールの構成 (*igBulletGraph*)](/igbulletgraph-configuring-the-scale): このトピックではコード例を使用して、`igBulletGraph` コントロールのスケールを構成する方法を説明します。説明には、コントロール内のスケールの配置、スケールの目盛およびラベルの構成が含まれます。 + +- [比較マーカーの構成 (*igBulletGraph*)](/igbulletgraph-configuring-the-comparative-marker) + +このトピックではコード例を使用して、`igBulletGraph` コントロールの比較目盛マーカーを構成する方法を説明します。説明には、マーカーの値、幅、および書式設定が含まれます。 + +- [比較範囲の構成 (*igBulletGraph*)](/igbulletgraph-configuring-comparative-ranges): このトピックではコード例を使用して、`igBulletGraph` コントロールの範囲を構成する方法を説明します。説明には、範囲の数、位置、長さ、幅、および書式設定が含まれます。 + +- [背景の構成 (*igBulletGraph*)](/igbulletgraph-configuring-the-background): このトピックではコード例を使用して、ブレット グラフの背景を構成する方法を説明します。説明には、背景のサイズ、位置、色、および境界線の設定が含まれます。 + +- [ツールチップの構成 (*igBulletGraph*)](/igbulletgraph-configuring-the-tooltips): このトピックではコード例を使用して、`igBulletGraph` コントロールのツールチップを有効にする方法および表示する遅延時間を設定する方法を説明します。 + + +### サンプル + +このトピックについては、以下のサンプルも参照してください。 + +- [パフォーマンス バーの設定]({environment:SamplesUrl}/bullet-graph/performance-bar-settings): このサンプルでは、`igBulletGraph` コントロールのパフォーマンス (実際値) バー、比較目盛 (ターゲット値) マーカー、およびスケールのディメンションを構成する方法を紹介します。 + + + + + + + + + + diff --git a/docs/jquery/src/content/ja/topics/controls/igbulletgraph/configuring/elements/configuring-the-tooltips.mdx b/docs/jquery/src/content/ja/topics/controls/igbulletgraph/configuring/elements/configuring-the-tooltips.mdx new file mode 100644 index 0000000000..e7fb5b7176 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igbulletgraph/configuring/elements/configuring-the-tooltips.mdx @@ -0,0 +1,409 @@ +--- +title: "ツールチップの構成 (igBulletGraph)" +slug: igbulletgraph-configuring-the-tooltips +--- + +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# ツールチップの構成 (igBulletGraph) + +## トピックの概要 + +#### 目的 + +このトピックではコード例を使用して、`igBulletGraph`™ コントロールのツールチップを有効にする方法および表示する遅延時間を設定する方法、カスタム ツールチップ テンプレートの作成方法、およびコード サンプルを説明します。 + +### 前提条件 + +このトピックを理解するために、以下のトピックを参照することをお勧めします。 + +- [*igBulletGraph* の概要](/igbulletgraph-overview): このトピックは、主要機能、最小要件およびユーザー機能性など、`igBulletGraph` コントロールの概念的な情報を提供します。 + +- [*igBulletGraph* の追加](/igbulletgraph-adding): このトピック グループでは、`igBulletGraph`™ コントロールを HTML ページと ASP.NET MVC アプリケーションに追加する方法を説明します。 + + + +### このトピックの内容 + +このトピックは、以下のセクションで構成されます。 + +- [**概要**](#introduction) + - [ツールチップ構成の概要](#configuration-summary) + - [ツールチップ構成の概要表](#configuration-summary-chart) +- [**ツールチップの有効 / 無効**](#enabling-disabling) + - [プロパティ設定](#enabling-disabling-property) + - [コード例](#enabling-disabling-example) +- [**ツールチップ遅延の構成**](#delay) + - [プロパティ設定](#delay-property) + - [コード例](#delay-example) +- [**パフォーマンス バーのカスタム ツールチップの構成**](#performance-bar) + - [概要](#performance-bar-overview) + - [プロパティ設定](#performance-bar-property) + - [例](#performance-bar-example) +- [**比較マーカーのカスタム ツールチップの構成**](#comparative-marker) + - [プロパティ設定](#comparative-marker-property) + - [例](#comparative-marker-example) +- [**比較範囲のカスタム ツールチップの構成**](#comparative-ranges) + - [プロパティ設定](#comparative-ranges-property) + - [例](#comparative-ranges-example) +- [**ツールチップの構成のサンプル**](#configuring-tooltips-sample) +- [**関連コンテンツ**](#related-content) + - [トピック](#topics) + + + +## 概要 + +#### ツールチップ構成の概要 + +`igBulletGraph` コントロールはツールチップをサポートします。ツールチップは、パフォーマンス バー、比較マーカーおよび比較範囲で指定された値を表示するように、あらかじめ設定されています。各視覚要素に対応するツールチップは、プロパティ設定で個別に設定されています。 + +ツールチップの可視性 (有効 / 無効)、遅延 (ツールチップが表示されるまでのタイムアウト値が設定可能です)、値について、それぞれ設定できます。ツールチップの値はカスタム テンプレートに設定できるため、具体的なユース ケースをより詳細に示すことができます。 + +デフォルトでは、ツールチップは無効になっています。 + +### ツールチップ構成の概要表 + +以下の表は、ツールチップに関する `igBulletGraph` コントロールで構成できる項目と管理に使用するプロパティをマップしています。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    構成可能な項目詳細プロパティ/イベントデフォルト値
    [\*\*可視性\*\*](#enabling-disabling)\*igBulletGraph\* コントロールのツールチップを有効または無効にできます。\*False\*
    [\*\*遅延時間\*\*](#delay)視覚要素にマウスを合わせたときにツールチップが表示されるまでのタイムアウトを、ミリ秒数単位で設定します。\*500\*
    値ツールチップ テンプレートのそれぞれのプロパティにカスタム値を設定できます。[\*\*パフォーマンス バー\*\*](#performance-bar) の初期化状態による ([\*\*パフォーマンス バーのカスタム ツールチップの構成\*\*](#performance-bar)を参照)
    [\*\*比較マーカー\*\*](#comparative-marker)比較マーカーで示された値
    [\*\*比較範囲\*\*](#comparative-ranges)ハイフン (-) で区切られた範囲の開始値と終了値です。
    + + +> **注: **デフォルトのツールチップ テンプレートを変更して、それぞれの視覚要素に異なる値をバインドするには、テンプレートの ${Item.Property} 構文を使用する必要があります。 + + + +## ツールチップの有効 / 無効 + +`igBulletGraph` のツールチップを、表示または非表示 (デフォルト設定) にします。 + +### プロパティ設定 + +以下の表は、要求ビヘイビアーをプロパティ設定にマップしています。 + +目的:|使用するプロパティ:|設定の選択肢: +---|---|--- +ツールチップの表示||true +ツールチップの非表示||false + + +### コード例 + +以下のコード例はツールチップを表示します: + +**JavaScript の場合:** + +```js +$("#bulletgraph").igBulletGraph({ + … + showToolTip: true +}); +``` + + + +## ツールチップ遅延の構成 +視覚要素がホバーされてからマウスツールチップが表示されるまでの遅延を設定できます。デフォルト値は 500 ミリ秒です。 + +### プロパティ設定 + +以下の表は、要求ビヘイビアーをプロパティ設定にマップしています。 + +目的:|使用するプロパティ:|設定の選択肢: +---|---|--- +ツールチップが表示される前の初期遅延の設定||任意の値 (ミリ秒) + + +### コード例 + +以下のコード例では、ツールチップの遅延として 2000 ミリ秒を設定します: + +**JavaScript の場合:** + +```js +$("#bulletgraph").igBulletGraph({ + … + showToolTip: true, + showToolTipTimeout: 2000 +}); +``` + + + +## パフォーマンス バーのカスタム ツールチップの構成 + +### 概要 + +ツールチップの既定値は、 プロパティが初期化されているかどうかにより事前に設定されます。 + +`valueName` プロパティが初期化されている場合は、ツールチップ プロパティのデフォルト書式は以下のようになります。 + +``` + : +``` + +`valueName` プロパティが初期化されていない場合は、ツールチップのデフォルト書式は次のようになります。 + +``` + +``` + +ツールチップで表示されるデータとそのルック アンド フィールの両方またはいずれか一方を変更するには、カスタム テンプレートで設定します。 + +### プロパティ設定 + +以下の表では、任意の動作と各プロパティ設定のマップを示します。 + +目的:|使用するプロパティ:|設定の選択肢: +---|---|--- +パフォーマンス バーのカスタム ツールチップの設定| |必要なテンプレートの ID。 + + +### 例 + +以下のスクリーンショットは、以下の設定の結果、`igBulletGraph` パフォーマンス バーのツールチップの外観がどのようになるか示しています。 + +プロパティ|値 +---|--- +|"valueToolTipTemplate" +"valueToolTipTemplate" はテンプレートの ID です。 + +**HTML の場合:** + +```html + +``` + + + +![](../../../../images/images/igBulletGraph_Configuring_the_Tooltips_1.png) + +以下のコードはこの例を実装します。 + +**HTML の場合:** + +```html + + +``` + + +## 比較マーカーのカスタム ツールチップの構成 + +比較マーカーのツールチップは、値についてはデフォルトのシステム フォントを使用し、またコントロールの外観についてはデフォルトのスタイル設定で表示されます。カスタム設定の場合、ツールチップの値をカスタム テンプレートで設定します。 + +### プロパティ設定 + +以下の表では、任意の動作と各プロパティ設定のマップを示します。 + +目的:|使用するプロパティ:|設定の選択肢: +---|---|--- +比較マーカーのカスタム ツールチップの構成| |必要なテンプレートの ID。 + + +### 例 + +以下のコードは、以下の設定の結果、比較マーカーのツールチップに値がどのように表示されるか示しています。 + +プロパティ|値 +---|--- +|"targetValueToolTipTemplate" + +"targetValueToolTipTemplate" はテンプレートの ID です。 + +**HTML の場合:** + +```html + +``` + + + +![](../../../../images/images/igBulletGraph_Configuring_the_Tooltips_2.png) + +以下のコードはこの例を実装します。 + +**HTML の場合:** + +```html + + +``` + + + + +## 比較範囲のカスタム ツールチップの構成 + +比較範囲のツールチップはデフォルトで、マウスでホバーしている範囲が厳密には範囲内ではない場合でも、区切り文字にハイフンを使用して範囲の開始値と終了値 (例：0 - 34) を表示します。事前に設定されている内容を変更するには、カスタム テンプレートを設定します。 + + +### プロパティ設定 + +以下の表では、任意の動作と各プロパティ設定のマップを示します。 + +目的:|使用するプロパティ:|設定の選択肢: +--|--|-- +比較範囲のカスタム ツールチップの構成||必要なテンプレートの ID。 + + +### 例 + +以下のスクリーンショットは、以下の設定の結果、比較範囲のツールチップで示される値がどのように表示されるか示しています。 + +プロパティ|値 +---|--- +|"rangeToolTipTemplate" + +"rangeToolTipTemplate" はテンプレートの ID です。 + +**HTML の場合:** + +```html + +``` + + +![](../../../../images/images/igBulletGraph_Configuring_the_Tooltips_3.png) + +以下のコードはこの例を実装します。 + +**HTML の場合:** + +```html + + +``` + +## ツールチップの構成のサンプル + +このサンプルは、以上に説明したカスタム ツールチップをすべて結合する方法を紹介します。、、およびのツールチップが可能なすべての構成領域にテンプレートを含みます。 +最初の `igBulletGraph` が開発タスクの視覚化のために使用され、デフォルト ツールチップが options API によって有効にして構成されます。品質保証タスクを視覚化する第 2 のグラフはカスタム ツールチップ テンプレートを使用し、主な領域にホバーすると、外観がカスタマイズされます。 + +サンプルで、このタスクは 3 週間で同時に実行されますが、開発に他のタスク以上の時間が費やされました。進行状況バーは、タスク完了の可能性を表す状態範囲 (「高」、「中」、「低」) を表します。 + +
    + [{environment:SamplesEmbedUrl}/bullet-graph/tooltip-settings]({environment:SamplesEmbedUrl}/bullet-graph/tooltip-settings) +
    + +## 関連コンテンツ + +### トピック + +このトピックの追加情報については、以下のトピックも合わせてご参照ください。 + +- [スケールの構成 (*igBulletGraph*)](/igbulletgraph-configuring-the-scale): このトピックではコード例を使用して、igBulletGraph コントロールのスケールを構成する方法を説明します。説明には、コントロール内のスケールの配置、スケールの目盛およびラベルの構成が含まれます。 + +- [パフォーマンス バーの構成 (*igBulletGraph*)](/igbulletgraph-configuring-the-performance-bar): このトピックではコード例を使用して、igBulletGraph コントロールのパフォーマンス バーを構成する方法を説明します。説明には、バーが示す値、幅、位置、および書式設定が含まれます。 + +- [比較マーカーの構成 (*igBulletGraph*)](/igbulletgraph-configuring-the-comparative-marker): このトピックではコード例を使用して、`igBulletGraph` コントロールの比較目盛マーカーを構成する方法を説明します。説明には、マーカーの値、幅、および書式設定が含まれます。 + +- [比較範囲の構成 (*igBulletGraph*)](/igbulletgraph-configuring-comparative-ranges): このトピックではコード例を使用して、`igBulletGraph` コントロールの範囲を構成する方法を説明します。説明には、範囲の数、位置、長さ、幅、および書式設定が含まれます。 + +- [背景の構成 (*igBulletGraph*)](/igbulletgraph-configuring-the-background): このトピックではコード例を使用して、ブレット グラフの背景を構成する方法を説明します。説明には、背景のサイズ、位置、色、および境界線の設定が含まれます。 + + + + + + + + + diff --git a/docs/jquery/src/content/ja/topics/controls/igbulletgraph/configuring/elements/configuring-the-visual-elements.mdx b/docs/jquery/src/content/ja/topics/controls/igbulletgraph/configuring/elements/configuring-the-visual-elements.mdx new file mode 100644 index 0000000000..82ed438f97 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igbulletgraph/configuring/elements/configuring-the-visual-elements.mdx @@ -0,0 +1,38 @@ +--- +title: "視覚要素の構成 (igBulletGraph)" +slug: igbulletgraph-configuring-the-visual-elements +--- + +# 視覚要素の構成 (igBulletGraph) + + + +## このグループのトピックについて + +### 概要 + +このトピックでは、`igBulletGraph`™ のさまざまな視覚要素を構成する方法の詳細を含む、技術記事のシリーズを紹介します。 + +### トピック + +- [スケールの構成 (*igBulletGraph*)](/igbulletgraph-configuring-the-scale): このトピックではコード例を使用して、`igBulletGraph` コントロールのスケールをカスタマイズする方法を説明します。説明には、コントロール内のスケールの配置、スケールの目盛およびラベルの構成が含まれます。(デフォルトの設定については、[*igBulletGraph* の概要](/igbulletgraph-overview)のトピックを参照してください。) + +- [パフォーマンス バーの構成 (*igBulletGraph*)](/igbulletgraph-configuring-the-performance-bar): このトピックではコード例を使用して、`igBulletGraph` コントロールのパフォーマンス バーを構成する方法を説明します。説明には、バーが示す値、幅、位置、および書式設定が含まれます。 + +- [比較マーカーの構成 (*igBulletGraph*)](/igbulletgraph-configuring-the-comparative-marker): このトピックではコード例を使用して、`igBulletGraph` コントロールの比較目盛マーカーを構成する方法を説明します。説明には、マーカーの値、幅、および書式設定が含まれます。 + +- [比較範囲の構成 (*igBulletGraph*)](/igbulletgraph-configuring-comparative-ranges): このトピックではコード例を使用して、`igBulletGraph` コントロールの範囲を構成する方法を説明します。説明には、範囲の数、位置、長さ、幅、および書式設定が含まれます。 + +- [背景の構成 (*igBulletGraph*)](/igbulletgraph-configuring-the-background): このトピックではコード例を使用して、ブレット グラフの背景を構成する方法を説明します。説明には、背景のサイズ、位置、色、および境界線の設定が含まれます。 + +- [ツールチップの構成 (*igBulletGraph*)](/igbulletgraph-configuring-the-tooltips): このトピックではコード例を使用して、`igBulletGraph` コントロールのツールチップを有効にする方法および表示する遅延時間を設定する方法を説明します。 + + + + + + + + + + diff --git a/docs/jquery/src/content/ja/topics/controls/igbulletgraph/configuring/elements/scale/configuring-the-scale.mdx b/docs/jquery/src/content/ja/topics/controls/igbulletgraph/configuring/elements/scale/configuring-the-scale.mdx new file mode 100644 index 0000000000..539f87d7bc --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igbulletgraph/configuring/elements/scale/configuring-the-scale.mdx @@ -0,0 +1,772 @@ +--- +title: "スケールの構成 (igBulletGraph)" +slug: igbulletgraph-configuring-the-scale +--- + +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# スケールの構成 (igBulletGraph) + +## トピックの概要 + +#### 目的 + +このトピックではコード例を使用して、`igBulletGraph`™ コントロールのスケールをカスタマイズする方法を説明します。説明には、コントロール内のスケールの配置、スケールの目盛およびラベルの構成が含まれます。(デフォルトの設定については、[*igBulletGraph* の概要](/igbulletgraph-overview)のトピックを参照してください。) + +### 前提条件 + +このトピックを理解するために、以下のトピックを参照することをお勧めします。 + +- [*igBulletGraph* の概要](/igbulletgraph-overview): このトピックは、主要機能、最小要件およびユーザー機能性など、`igBulletGraph` コントロールの概念的な情報を提供します。 + +- [*igBulletGraph* の追加](/igbulletgraph-adding): このトピック グループは、`igBulletGraph` コントロールを HTML ページと ASP.NET MVC アプリケーションに追加する方法を説明します。 + + +### このトピックの内容 + +このトピックは、以下のセクションで構成されます。 + +- [**概要**](#introduction) + - [スケール構成の概要](#configuration-summary) + - [スケール構成の概要表](#configuration-summary-chart) +- [**スケールサイズと位置の構成**](#size-and-position) + - [概要](#size-and-position-overview) + - [プロパティ設定](#size-and-position-properties) + - [例](#size-and-position-example) +- [**スケールの範囲の構成**](#range) + - [概要](#range-overview) + - [プロパティ設定](#range-properties) + - [例](#range-example) +- [**スケールの主目盛の構成**](#major-tick-marks) + - [概要](#major-tick-marks-overview) + - [スケールに沿った位置、数、およびスペースの構成](#major-tick-marks-position-count-spacing) + - [スケール全域での位置およびセグメントの長さの構成](#major-tick-marks-segments) + - [プロパティ設定](#major-tick-marks-properties) + - [例](#major-tick-marks-example) +- [**スケールの補助目盛の構成**](#minor-tick-marks) + - [概要](#minor-tick-marks-overview) + - [スケールに沿った位置、数、およびスペースの構成](#minor-tick-marks-position-count-spacing) + - [スケール全域での位置およびセグメントの長さの構成](#minor-tick-marks-segments) + - [プロパティ設定](#minor-tick-marks-properties) + - [例](#minor-tick-marks-example) +- [**スケールのラベリングの構成**](#labeling) + - [概要](#labeling-overview) + - [イベント処理](#labeling-event-handling) + - [プロパティ設定](#labeling-property-settings) + - [例 - 水平方向](#labeling-example-horizontal) + - [例 - 垂直方向](#labeling-example-vertical) +- [**関連コンテンツ**](#related-content) + - [トピック](#topics) + - [サンプル](#samples) + + + +## 概要 + +#### スケール構成の概要 + +`igBulletGraph` コントロールのスケールは、目盛とラベル (番号) で形成された論理エンティティです。目盛のサイズおよび位置は[グラフ領域](/igbulletgraph-overview#logical-areas)に対して構成され、番号ラベルの位置はコントロールの内側の端 (水平方向で下端) に対して構成されます。 + +`igBulletGraph` コントロールの目盛は、グラフに沿ってメジャーの等間隔で表示されます。目盛は、主目盛および補助目盛の 2 種類がサポートされています。どちらの目盛も、グラフ領域に対して測定される範囲関連の各プロパティの値を調整することにより、スケールに沿って配置できます。目盛の正確な数、位置、外観、および表示の頻度はプロパティ設定によりカスタマイズできます。 + +ラベルについては、位置、テキスト、書式などのさまざまな要素が構成できます。 + +### スケール構成の概要表 + +以下の表で、`igBulletGraph` コントロールのスケールで構成できる要素について簡単に説明し、構成に使用するプロパティにマップします。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    構成可能な要素プロパティデフォルト値
    \*\*位置\*\*\*0.05\*
    \*0.95\*
    \*\*範囲と値\*\*\*\*最大値\*\*\*0\*
    \*\*最小値\*\*\*100\*
    \*\*目盛\*\*\*\*主目盛\*\*スケール内の位置、スペースおよび長さ設定されていません
    \*0\*
    \*0\*
    \*0.02\*
    \*0.2\*
    \*\*ルック アンド フィール\*\*色デフォルトのテーマで定義済み
    幅\*2.0\*
    \*\*補助目盛\*\*隣接する 2 つの主目盛間の\*\*数値\*\*\*3.0\*
    \*\*位置\*\*\*0.06\*
    \*0.2\*
    \*\*ルック アンド フィール\*\*色デフォルトのテーマで定義済み
    幅\*1.0\*
    \*\*ラベル\*\*\*\*位置とスペース\*\*\*0\*
    設定されていません
    \*0\*
    \*0\*
    ルック アンド フィール色デフォルトのテーマで定義済み
    フォントデフォルトのテーマで定義済み
    + +## スケールサイズと位置の構成 + +### 概要 + +スケールに沿ったディメンションの `igBulletGraph` コントロール内のスケールのサイズおよび位置は、[グラフ領域](/igbulletgraph-overview#logical-areas)に対して決定されます。これは一組のプロパティ ( と ) により実行されます。 + +![](../../../../../images/images/igBulletGraph_Configuring_the_Scale_1.png) + +グラフ領域の他方 (スケール全域) のディメンションでのスケールの配置自体を構成できませんが、スケールを構成するすべての要素で個別に構成されます。 + +>**注:** 番号ラベルの配置を制御する `LabelExtent` プロパティの値は、コントロールの方向が水平の場合はコントロールの高さに対して測定され、それ以外の場合はコントロールの幅に対して測定されます。(詳細は、[向きと方向の構成 (*igBulletGraph*)](/igbulletgraph-configuring-the-orientation-and-direction) を参照してください。) + +### プロパティ設定 + +以下の表では、任意の動作と各プロパティ設定のマップを示します。構成可能な要素の実例については、[例](#size-and-position-example)を参照してください。 + + + + + + + + + + + + + + + + + + + + + + + + + + +
    構成の目的:使用するプロパティ:設定の選択肢:
    \*\*要素\*\*\*\*詳細\*\*
    スケールに沿ったディメンション - サイズと位置開始位置水平方向で[グラフ領域](/igbulletgraph-overview#logical-areas)の左端からのスケールの開始位置、または垂直方向でグラフ領域の下端からのスケールの開始位置。 (スケールの方向が反転した場合、水平方向で右端、垂直方向で上端となります。詳細は、[向きと方向の構成 (\*igBulletGraph\*)](/igbulletgraph-configuring-the-orientation-and-direction) を参照してください。)方向に応じた、コントロールの高さと幅の相対部分として望ましい値。小数で指定 (例: \*0.2)\*
    終了位置水平方向でコントロールの左端に対するグラフ領域の左端からのスケールの終了位置、または垂直方向ではグラフ領域の下端からのスケールの終了位置。(スケールの方向が反転した場合、水平方向で右端、垂直方向で上端となります。 詳細は、[向きと方向の構成 (\*igBulletGraph\*)](/igbulletgraph-configuring-the-orientation-and-direction) を参照してください。)方向に応じた、コントロールの高さと幅の相対部分として望ましい値。小数で指定 (例: \*0.8\*)
    + + + +### 例 + +以下のスクリーンショットは、以下の設定の結果、`igBulletGraph` の外観がどのようになるか示しています。 + +プロパティ|値 +---|--- +|0.2 +|0.9 + + +![](../../../../../images/images/igBulletGraph_Configuring_the_Scale_2.png) + +以下のコードはこの例を実装します。 + +**JavaScript の場合:** + +```js +$('#igBulletGraph').igBulletGraph({ + width: 300, + height: 70, + scaleStartExtent: 0.2, + scaleEndExtent: 0.9}); +``` + + + +## スケールの範囲の構成 + +#### 概要 + +スケールの値は、その値の範囲 (つまり最小値と最大値) を指定することで定義します。 プロパティおよび プロパティで定義されます。 + +最小値と最大値を設定するとスケール内のすべての値が定義され、すべての値は最小値と最大値の間に均等に分布されます。ただし、表示されるにはスケールに配置された番号ラベルがある値のみです。(スケールの値は番号ラベルによってのみ表示できます。ラベルは、スケール上のラベルの位置に基づき各値を表示します。つまり、ラベルの値はスケールに沿ったラベルの配置よって構成され、明示的には設定されません。)最小値および最大値の位置にラベルは必要ではありません。これは、最小値および最大値がスケール上に表示されず、スケールが以下のように表示される可能性があることを意味します。 + +![](../../../../../images/images/igBulletGraph_Configuring_the_Scale_3.png) + +スケールの範囲を定義すると、パフォーマンス バー、比較範囲、比較マーカーなどの他の値ベースの視覚要素もスケール上に配置できます。前述の要素は値ベースであるため、スケールの範囲が変化 (最小値または最大値の変化、あるいはその両方の変化) すると、これらの視覚要素は、スケール上の位置が保持されたスケール値に応じて再配置されます。(この結果の実例は、[範囲設定]({environment:SamplesUrl}/bullet-graph/range-settings)のサンプルを参照してください。) + +### プロパティ設定 + +以下の表では、任意の動作と各プロパティ設定のマップを示します。構成可能な要素の実例については、[例](#size-and-position-example)を参照してください。 + + + + + + + + + + + + + + + + + + + + + + + + + +
    構成の目的:使用するプロパティ:設定の選択肢:
    \*\*要素\*\*\*\*詳細\*\*
    スケールの最小値スケールが開始する値。スケールのメジャーにおける任意の値
    スケールの最大値スケールが終了する値。スケールのメジャーにおける任意の値
    + +### 例 + +以下のスクリーンショットは、以下の設定の結果、`igBulletGraph` の外観がどのようになるか示しています。 + +プロパティ|値 +---|--- +|60 +|70 + + +![](../../../../../images/images/igBulletGraph_Configuring_the_Scale_4.png) + +以下のコードはこの例を実装します。 + +**JavaScript の場合:** + +```js +$('#igBulletGraph').igBulletGraph({ + width: 300, + height: 70, + minimumValue: 60, + maximumValue: 70}); +``` + + + +## スケールの主目盛の構成 + +#### 概要 + +`igBulletGraph` コントロールの主目盛は、位置および表示する間隔でカスタマイズできます。主目盛を形成する線分の高さ、幅、および色も構成が可能です。 + +### スケールに沿った位置、数、およびスペースの構成 + +主目盛は、開始点および終了点 ([グラフ領域](/igbulletgraph-overview#logical-areas)の端からの最初と最後の目盛位置)、および表示する間隔 (各目盛間の距離) で定義します。(、、および プロパティで定義されます。)この方法で主目盛の開始点および終了点を定義すると、基本的にスケールの位置および長さを定義することになります。 + +![](../../../../../images/images/igBulletGraph_Configuring_the_Scale_5.png) + +### スケール全域での位置およびセグメントの長さの構成 + +スケール全域のディメンションでは、主目盛を形成する線分の長さと位置は[グラフ領域](/igbulletgraph-overview#logical-areas)の端に対して構成されます。( プロパティおよび プロパティによって構成されます。) + +![](../../../../../images/images/igBulletGraph_Configuring_the_Scale_6.png) + +### プロパティ設定 + +以下の表では、任意の動作と各プロパティ設定のマップを示します。構成可能な要素の実例については、[例](#major-tick-marks-example)を参照してください。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    構成の目的:使用するプロパティ:設定の選択肢:
    \*\*要素\*\*\*\*詳細\*\*
    \*\*スケールに沿った位置、数、およびスペース\*\*開始点スケールの[開始位置](#size-and-position-properties)に対して主目盛が始まる距離スケールの開始位置からスケールのメジャーの任意の距離
    終了点スケールの[終了位置](#size-and-position-properties)に対して主目盛が終了する距離スケールの終了位置からスケールのメジャーの任意の距離
    間隔主目盛を配置する間隔 (間隔は、スケールのメジャーにおける隣接する 2 つの主目盛間の距離です。)スケールのメジャーにおける任意の値
    \*\*スケール全域での位置およびセグメントの長さ\*\*開始点主目盛を形成する線分の開始点。(開始点は、水平方向でグラフ領域の下部に対して定義され、垂直方向でグラフ領域の左端に対して定義されます。) 負の値もサポートされ、グラフ領域の下方 / 左側の位置に表示します。方向に応じたグラフ領域の高さと幅の相対部分として、スケールのメジャーの望ましい値。小数で指定 (例: \*0.2)\*
    終了点水平方向でグラフ領域の下部から主目盛を形成する線分の終了点、または垂直方向でグラフ領域の左の境界線からの主目盛の線分の終了点。負の値もサポートされ、グラフ領域の下方 / 左側の位置に表示します。 (開始点と終了点間の差が目盛の線分の長さになります。)方向に応じた、グラフ領域の高さと幅の相対部分として必要な値。小数で指定 (例: \*0.8\*)
    \*\*ルック アンド フィール\*\*幅主目盛の線分の幅任意の値 (ピクセル)
    色主目盛の色任意の色
    + + +### 例 + +以下のスクリーンショットは、以下の設定の結果 `igBulletGraph` の外観がどのようになるか示しています。 + +プロパティ|値 +---------|------ +|30 +|"lime" +|0.9 +|30 +|10 +|0.5 +|3 + + +![](../../../../../images/images/igBulletGraph_Configuring_the_Scale_7.png) + +以下のコードはこの例を実装します。 + +**JavaScript の場合:** + +```js +('#igBulletGraph').igBulletGraph({ + width: 300, + height: 70, + interval: 30, + tickBrush: 'lime', + tickStartExtent: 0.5, + tickEndExtent: 0.9, + ticksPostInitial: 30, + ticksPreTerminal: 10, + tickStrokeThickness: 3 }); +``` + + + +## スケールの補助目盛の構成 + +#### 概要 + +`igBulletGraph` コントロールの補助目盛は、明示的に無効にできます。あるいは、2 つの主目盛間の数、配置、サイズ、および色をカスタマイズできます。 + +### スケールに沿った位置、数、およびスペースの構成 + +補助目盛は、数 (隣接する 2 つの主目盛間の補助目盛の数) として定義されます。(数は プロパティにより定義されます。このプロパティを *0* に設定すると、補助目盛が無効 (非表示) になります。)数が設定されると、指定された数の補助目盛はスケール全体で、各隣接した 2 つの主目盛間に均等に配置されます。 + +### スケール全域での位置およびセグメントの長さの構成 + +スケール全域のディメンションでは、補助目盛の長さと位置は[グラフ領域](/igbulletgraph-overview#logical-areas)の端に対して構成されます。 + +![](../../../../../images/images/igBulletGraph_Configuring_the_Scale_8.png) + +### プロパティ設定 + +以下の表では、任意の動作と各プロパティ設定のマップを示します。構成可能な要素の実例については、[例](#minor-tick-marks-example)を参照してください。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    構成の目的:使用するプロパティ:設定の選択肢:
    \*\*要素\*\*\*\*詳細\*\*
    \*\*番号とスペース\*\*隣接する 2 つの主目盛間の補助目盛の数任意の数。\*0\* を設定すると補助目盛を非表示。
    \*\*線分\*\*\*\*長さと位置\*\*開始点補助目盛を形成する線分の開始点。 (開始点は、水平方向で[グラフ領域](/igbulletgraph-overview#logical-areas)の下部に対して定義され、垂直方向でグラフ領域の左端に対して定義されます。) 負の値もサポートされ、グラフ領域の下方 / 左側の位置に表示します。方向に応じた、コントロールの高さと幅の相対部分として望ましい値。小数で指定 (例: \*0.2)\*
    \*\*終了点\*\*水平方向ではグラフ領域の下部から補助目盛を形成する線分の終了点、または垂直方向でグラフ領域の左の境界線からの補助目盛の線分の終了点。 負の値もサポートされ、グラフ領域の下方 / 左側の位置に表示します。 (開始点と終了点間の差が目盛の線分の長さになります。)方向に応じた、コントロールの高さと幅の相対部分として望ましい値。小数で指定 (例: \*0.25\*)
    \*\*ルック アンド フィール\*\*幅補助目盛の線分の幅任意の値 (ピクセル)
    色補助目盛の色任意の色
    + + +### 例 + +以下のスクリーンショットは、以下の設定の結果 `igBulletGraph` の外観がどのようになるか示しています。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    構成の目的:使用するプロパティ:設定の選択肢:
    \*\*要素\*\*\*\*詳細\*\*
    \*\*番号とスペース\*\*隣接する 2 つの主目盛間の補助目盛の数任意の数。\*0\* を設定すると補助目盛を非表示。
    \*\*線分\*\*\*\*長さと位置\*\*開始点補助目盛を形成する線分の開始点。(開始点は、水平方向で[グラフ領域](/igbulletgraph-overview#logical-areas)の下部に対して定義され、垂直方向でグラフ領域の左端に対して定義されます。) 負の値もサポートされ、グラフ領域の下方 / 左側の位置に表示します。方向に応じた、コントロールの高さと幅の相対部分として望ましい値。小数で指定 (例: \*0.2)\*
    \*\*終了点\*\*水平方向ではグラフ領域の下部から補助目盛を形成する線分の終了点、または垂直方向でグラフ領域の左の境界線からの補助目盛の線分の終了点。負の値もサポートされ、グラフ領域の下方 / 左側の位置に表示します。 (開始点と終了点間の差が目盛の線分の長さになります。)方向に応じた、コントロールの高さと幅の相対部分として望ましい値。小数で指定 (例: \*0.25\*)
    \*\*ルック アンド フィール\*\*幅補助目盛の線分の幅任意の値 (ピクセル)
    色補助目盛の色任意の色
    + +![](../../../../../images/images/igBulletGraph_Configuring_the_Scale_9.png) + +以下のコードはこの例を実装します。 + +**JavaScript の場合:** + +```js +('#igBulletGraph').igBulletGraph({ + width: 300, + height: 70, + minorTickCount: 4, + minorTickBrush: 'purple', + minorTickStartExtent: 0.05, + minorTickEndExtent: 0.1, + minorTickStrokeThickness: 2, + interval: 20}); +``` + + + +## スケールのラベリングの構成 + +### 概要 + +デフォルトで、スケールのメジャーを示すラベルは有効になっています。ラベルは以下の要因で定義します。 + +- **開始点および終了点** - スケールの両端での最初と最後のラベルの位置 +- **ラベル行の幅** - 方向 (垂直 / 水平) に応じたコントロールの高さと幅に対する幅。この幅は、適用されたスタイル テンプレートのフォント設定のみで間接的に制御できます。 +- **発生する間隔** (相互距離)。(、、および プロパティにより定義されます。) +- **スケール全域のディメンションでのラベル行の位置** - デフォルトで、水平に対してコントロールの下部、垂直に対して左側に設定されています。水平のスケール方向で全行は垂直に移動し、垂直のスケール方向で水平に移動することができます。( プロパティにより定義されます。) + +![](../../../../../images/images/igBulletGraph_Configuring_the_Scale_10.png) + +各ラベルが表示する値は、スケール上の位置によって表される値で定義されます。(このためには[**スケールの値の範囲の構成**](#range)が必要です。)文字列の書式はラベルに適用できるため、外観を追加でカスタマイズできます。デフォルトで、数値ラベルは各主目盛に対して表示され、ラベルはスケールの方向 (水平 / 垂直) に応じてスケールの下位 / 左側に配置されます。 + +ラベルと主目盛をカスタマイズする場合、相互の位置関係を確認する必要があります。位置を合わせるには、目盛の間隔 ( プロパティ) とラベルの間隔 (`labelInterval` プロパティ) を同じ値に設定します。(デフォルトで、`labelInterval` プロパティは設定されていませんが、interval に設定された値を使用するため、正しく位置合わせされます。) + +### イベント処理 + +`igBulletGraph` のラベルは、対応するイベントを処理する場合に追加でフォーマットし、位置合わせすることができます。 + +以下の表では、任意の動作と各イベントのマップを示します。 + +目的:|このイベントの処理: +---|--- +ラベルのフォーマット| +ラベルの位置合わせ| + + +### プロパティ設定 + +以下の表では、任意の動作と各プロパティ設定のマップを示します。構成可能な要素の実例については、[例 - 水平方向](#labeling-example-horizontal)を参照してください。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    構成の目的:使用するプロパティ:設定の選択肢:
    \*\*要素\*\*\*\*詳細\*\*
    \*\*ラベル行\*\*位置垂直 / 水平方向に応じた、コントロールの下部 / 左端に対するラベル行の配置。垂直 / 水平方向に応じた、コントロールの高さと幅の相対部分として望ましい値。小数で指定 (例: \*0.8\*)。
    \*\*番号とスペース\*\*開始点スケールに沿った最初のラベルのスケールのメジャーにおける位置スケールの最初のラベルを表示するスケールのメジャーにおける値
    終了点スケールに沿った最後のラベルのスケールのメジャーにおける位置スケールの最後のラベルを表示するスケールのメジャーにおける値
    間隔ラベルを配置する間隔 (間隔は、スケールのメジャーにおける隣接する 2 つのラベルの距離です。)スケールのメジャーにおける任意の値
    \*\*ルック アンド フィール\*\*フォント色ラベルのフォント色任意の色
    + +>**注: **CSS のフォント関係のプロパティは、`.ui-bulletgraph-label` CSS クラスおよび `.ui-bulletgraph` CSS クラスにより設定できます。 + +### 例 - 水平方向 + +以下のスクリーンショットは、以下の設定の結果、デフォルトの水平方向で *igBulletGraph* の外観がどのようになるか示しています。 + +プロパティ|値 +---|--- +|0.5 +|30 +|20 +|20 +|'green' + +![](../../../../../images/images/igBulletGraph_Configuring_the_Scale_11.png) + +以下のコードはこの例を実装します。 + +**JavaScript の場合:** + +```js +('#igBulletGraph').igBulletGraph({ + width: 300, + height: 70, + labelExtent: 0.5, + labelInterval: 30, + labelsPostInitial: 20, + labelsPreTerminal: 20, + fontBrush: 'green'}); +``` + +### 例 - 垂直方向 + +以下のスクリーンショットは、以下のプロパティ設定の結果、([例 - 水平方向](#labeling-example-horizontal)の場合と同様に) 垂直方向で `igBulletGraph` の外観がどのようになるか示しています。 + +プロパティ|値 +---|--- +|'vertical' +|0.5 +|30 +|20 +|20 +|'green' + + +![](../../../../../images/images/igBulletGraph_Configuring_the_Scale_12.png) + +以下のコードはこの例を実装します。 + +**JavaScript の場合:** + +```js +('#igBulletGraph').igBulletGraph({ + height: 300, + width: 70, + orientation: 'vertical', + labelExtent: 0.5, + labelInterval: 30, + labelsPostInitial: 20, + labelsPreTerminal: 20, + fontBrush: 'green'}); +``` + + + +## 関連コンテンツ + +### トピック + +このトピックの追加情報については、以下のトピックも合わせてご参照ください。 + +- [向きと方向の構成 (*igBulletGraph*)](/igbulletgraph-configuring-the-orientation-and-direction) : このトピックは、垂直スケールと反転したスケール方向の両方またはいずれか一方により igBulletGraph コントロールを構成する方法を説明します。 + +- [パフォーマンス バーの構成 (*igBulletGraph*)](/igbulletgraph-configuring-the-performance-bar): このトピックではコード例を使用して、igBulletGraph コントロールのパフォーマンス バーを構成する方法を説明します。説明には、バーが示す値、幅、位置、および書式設定が含まれます。 + +- [比較マーカーの構成 (*igBulletGraph*)](/igbulletgraph-configuring-the-comparative-marker): このトピックではコード例を使用して、igBulletGraph コントロールの比較目盛マーカーを構成する方法を説明します。説明には、マーカーの値、幅、および書式設定が含まれます。 + +- [比較範囲の構成 (*igBulletGraph*)](/igbulletgraph-configuring-comparative-ranges): このトピックではコード例を使用して、igBulletGraph コントロールの範囲を構成する方法を説明します。説明には、範囲の数、位置、長さ、幅、および書式設定が含まれます。 + +- [背景の構成 (*igBulletGraph*)](/igbulletgraph-configuring-the-background): このトピックではコード例を使用して、ブレット グラフの背景を構成する方法を説明します。説明には、背景のサイズ、位置、色、および境界線の設定が含まれます。 + +- [ツールチップの構成 (*igBulletGraph*)](/igbulletgraph-configuring-the-tooltips): このトピックではコード例を使用して、igBulletGraph コントロールのツールチップを有効にする方法および表示する遅延時間を設定する方法を説明します。 + +### サンプル + +このトピックについては、以下のサンプルも参照してください。 + +- [目盛の設定]({environment:SamplesUrl}/bullet-graph/tick-marks-settings): このサンプルでは、`igBulletGraph` コントロールのサポートされる目盛構成を紹介します。 + +- [スケールのラベル設定]({environment:SamplesUrl}/bullet-graph/scale-labeling-settings): このサンプルでは、`igBulletGraph` コントロールのサポートされるスケール ラベリング構成を紹介します。 + + + + + + + + + + diff --git a/docs/jquery/src/content/ja/topics/controls/igbulletgraph/igbulletgraph.mdx b/docs/jquery/src/content/ja/topics/controls/igbulletgraph/igbulletgraph.mdx new file mode 100644 index 0000000000..b8b6ce5b53 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igbulletgraph/igbulletgraph.mdx @@ -0,0 +1,29 @@ +--- +title: "igBulletGraph" +slug: igbulletgraph +--- + +# igBulletGraph + +### 概要 + +このグループのトピックでは、`igBulletGraph`™ コントロールとその使用について説明します。 + +`igBulletGraph` コントロールは、データをブレット グラフ形式で視覚化する {environment:ProductName}™ コントロールです。このコントロールはリニアのデザインで、複数の他のメジャーと比較した主要なメジャーをシンプルで簡潔に表示します。 + +![](../../images/images/igBulletGraph.png) + +#### トピック + +- [***igBulletGraph* の概要**](/igbulletgraph-overview): このトピックは、主要機能、最小要件およびユーザー機能性など、`igBulletGraph` コントロールの概念的な情報を提供します。 + +- [***igBulletGraph* の追加**](/igbulletgraph-adding): このトピック グループは、`igBulletGraph` コントロールを HTML ページと ASP.NET MVC アプリケーションに追加する方法を説明します。 + +- [***igBulletGraph* の構成**](/igbulletgraph-configuring): このトピック グループは、向きや視覚要素および値のアニメーション表示を含む `igBulletGraph` コントロールのさまざまな要素を構成する方法を説明します。 + +- [**jQuery と MVC API へのリンク (*igBulletGraph*)**](/igbulletgraph-api-links): このトピックでは、`igBulletGraph` コントロールと ASP.NET MVC ヘルパーに関する API 参照ドキュメントへのリンクを提供します。 + +- [**既知の問題と制限 (*igBulletGraph*)**](/igbulletgraph-known-issues-and-limitations): このトピックでは、`igBulletGraph` コントロールの既知の問題点および制限に関する情報を提供します。 + + + diff --git a/docs/jquery/src/content/ja/topics/controls/igbulletgraph/known-issues-and-limitations.mdx b/docs/jquery/src/content/ja/topics/controls/igbulletgraph/known-issues-and-limitations.mdx new file mode 100644 index 0000000000..82cd1c0359 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igbulletgraph/known-issues-and-limitations.mdx @@ -0,0 +1,57 @@ +--- +title: "既知の問題と制限 (igBulletGraph)" +slug: igbulletgraph-known-issues-and-limitations +--- + +# 既知の問題と制限 (igBulletGraph) + +## 既知の問題と制限 + +#### 概要 + +以下の表に、`igBulletGraph` コントロールの既知の問題と制限を簡単に説明します。以下の概要表に、いくつかの問題に関する既知の問題の詳細説明と考えられる回避策が記載されています。 + +#### 凡例: + +| | | +| --- | --- | +| ![](../../images/images/positive.png) | 回避策 | +| ![](../../images/images/negative.png) | 既知の回避策はありません | +| ![](../../images/images/plannedFix.png) | 修正予定です | + + + +#### [igBulletGraph](#igBulletGraph) + +問題|説明|状態 +---|---|--- +[1 つのパフォーマンス バーと、1 つの比較マーカーのみがサポートされています](#_SingleCMAndPB)|`igBulletGraph` コントロールは、1 つのパフォーマンス バーと 1 つの比較マーカーのみをサポートします。 | ![](../../images/images/positive.png) +[ラベル競合の検出なし](#_NoLabelsCollision)|`igBulletGraph` コントロールは、ラベル競合を検出する手段を提供していません。その結果、ラベルを表示するスペースが十分にない場合は、ラベル競合が発生する可能性があります。 | ![](../../images/images/positive.png) +パフォーマンス バーは、最小スケールの位置からのみ描画することができます。|パフォーマンス バーの開始位置は、スケールの最小値の位置のみです。パフォーマンス バーを任意の場所から始めることはできません。 | ![](../../images/images/negative.png) ![](../../images/images/plannedFix.png) + + +## igBulletGraph + +#### 1 つのパフォーマンス バーと、1 つの比較マーカーのみがサポートされています + +`igBulletGraph` コントロールは、1 つのパフォーマンス バーと 1 つの比較マーカーのみをサポートします。 + +> **回避方法** +> +複数のパフォーマンス バーまたは複数の比較マーカーの描画効果は、コントロールの複数のインスタンスをオーバーレイすると達成できます。 + +#### ラベル競合の検出なし + +`igBulletGraph` コントロールは、ラベル競合を検出する手段を提供していません。その結果、ラベルを表示するスペースが十分にない場合は、ラベル競合が発生する可能性があります。 + +> **回避方法** +> +コントロールのコンテナーに、ラベルを適切に表示できる十分なスペースがあることを確認してください。 + + + + + + + + diff --git a/docs/jquery/src/content/ja/topics/controls/igbulletgraph/overview.mdx b/docs/jquery/src/content/ja/topics/controls/igbulletgraph/overview.mdx new file mode 100644 index 0000000000..0f722da16f --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igbulletgraph/overview.mdx @@ -0,0 +1,653 @@ +--- +title: "igBulletGraph の概要" +slug: igbulletgraph-overview +--- + +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# igBulletGraph の概要 + + + +## トピックの概要 + +#### 目的 + +このトピックは、主要機能、最小要件およびユーザー機能性など、`igBulletGraph`™ コントロールの概念的な情報を提供します。 + +#### 前提条件 + +このトピックを理解するためには、以下の概念を理解しておく必要があります。 + +- [ブレット グラフ](http://www.perceptualedge.com/articles/misc/Bullet_Graph_Design_Spec.pdf) + +#### このトピックの内容 + +このトピックは、以下のセクションで構成されます。 + +- [**概要**](#Introduction) + - [igBulletGraph の概要](#summary) +- [**主要機能**](#main-features) +- [**論理領域と構成可能な視覚要素の概要**](#areas-elements) + - [論理領域](#logical-areas) + - [構成可能な視覚要素](#configurable-visual-elements) +- [**構成可能な視覚要素および関連プロパティ**](#configurable-visual-elements-properties) + - [構成可能な視覚要素および関連プロパティの概要](#configurable-visual-elements-properties-summary) + - [スケール](#scale) + - [パフォーマンス バー](#performance-bar) + - [比較マーカー](#comparative-marker) + - [比較範囲](#comparative-ranges) + - [背景](#background) + - [ツールチップ](#tooltips) +- [**デフォルトの構成**](#default-configuration) +- [**要件**](#requirements) +- [**関連コンテンツ**](#related-countent) + - [トピック](#related-topics) + - [サンプル](#related-samples) + - [リソース](#related-resource) + + + +## 概要 + + +#### igBulletGraph の概要 + +`igBulletGraph` コントロールは、データをブレット グラフ形式で視覚化する **{environment:ProductName}**™ コントロールです。このコントロールはリニアのデザインで、複数の他のメジャーと比較した主要なメジャーをシンプルで簡潔に表示します。 + +![](../../images/images/igBulletGraph.png) + +igBulletGraph コントロールは、魅力的なデータ表現を作成するための機能を提供します。ダッシュボードで使用されるメーターやゲージを、シンプルでなおかつ直感的で明解な棒チャートに置き換えます。ブレット グラフは、水平または垂直のわずかな領域で、ゴールに至る進捗、評価の範囲、複数の測定比較を表現するための最も効率的で効果的な方法の 1 つです。 + + + +## 主要機能 + +igBulletGraph の機能には構成可能な向きや方向、視覚要素やツールチップなどがあります。このコントロールには、アニメーション化されたトランジションのサポートも組み込まれています。 + +### 構成可能な向きと方向 + +igBulletGraph コントロールでは、スケールの向きと方向の状態を設定する API が公開され、グラフの外観を大幅にカスタマイズすることができます。(詳細は、[向きと方向の構成 (*igBulletGraph*)](/igbulletgraph-configuring-the-orientation-and-direction) のトピックを参照してください。) + +### 構成可能な視覚要素 + +ブレット グラフの各[視覚要素](/igbulletgraph-overview#configurable-visual-elements-properties-summary)は、さまざまな形で構成できます。(詳細は、[*igBulletGraph* の構成可能な視覚要素と関連プロパティ](#configurable-visual-elements-properties)を参照してください。) + +### アニメーション化されたトランジション + +igBulletGraph コントロールには、その プロパティによるアニメーションの組み込みサポートが提供されています。アニメーション結果は、コントロールの読み込みで再生し、プロパティの値が変更するときにも再生します。デフォルトで、アニメーション化されたトランジションは無効になっています。ミリ秒単位で値を設定できるコントロールの transitionDuration プロパティにより、ビューでコントロールをスワイプする時間枠を定義します。視覚要素は左下から右上に移動するスライド効果によって、すべて滑らかに表示されます。値を 0 に設定するとアニメーション トランジションが無効になります。アニメーション化されたトランジション効果を示すサンプルは、[アニメーション化されたトランジション]({environment:SamplesUrl}/bullet-graph/animated-transitions)のサンプルを参照してください。 + +### ツールチップのサポート + +igBulletGraph コントロールに組み込まれたツールチップは、パフォーマンス バーを作成するための値、異なる範囲に対応したターゲット値またはそれぞれの値を示します。コントロールのデフォルト ルックに合わせて初期スタイル設定がされていますが、その外観はテンプレートでカスタマイズできます。デフォルトでは、ツールチップは無効になっています。(詳細は、[ツールチップの構成 (*igBulletGraph*)](/igbulletgraph-configuring-the-tooltips) を参照してください) + + + + + +## 論理領域と構成可能な視覚要素の概要 + + +### 論理領域 + +igBulletGraph コントロールの表示領域は、論理的にグラフ領域と予約領域に分割されます。 + +水平方向|垂直方向 +---------------------- | -------------------- +![](../../images/images/igBulletGraph_Overview_2.png) | ![](../../images/images/igBulletGraph_Overview_3.png) + + +- 予約領域 (1) - この領域は以下のように展開します。 + - スケールに沿う － 予約領域はコントロールの端で開始され、コントロールの端で終了します。 + - スケール全域: + - 水平方向: 予約領域は、コントロールの下端から開始され、ラベルのフォントのサイズなどの書式設定に従い、番号ラベルと同じ高さまで上に広がります。 + - 垂直方向: 予約領域は、コントロールの左端から開始され、スケール測定番号の大きさおよびラベルのフォントのサイズなどの書式設定に従い、番号ラベルと同じ幅まで右に広がります。 + +予約領域の主な目的は、スケールの番号ラベルに対して、水平方向にも垂直方向にも十分なスペースを与えることにあります。(方向が変化した場合、番号ラベルを表示するための各方向へのスペース要求に対応するために、予約領域はサイズを自動的に調整します。水平方向ではラベルの高さ、垂直方向では最大幅に合わせます。)これは、必ずしも番号ラベルを予約領域に配置する必要があることを意味しません。実際、ラベル行はスケール全域で、[グラフ領域](/igbulletgraph-overview#areas-elements)内のどこにでも配置できます。しかし、ラベル行を予約領域の外に配置しても、予約領域自体のスプレッドおよび位置にはまったく影響はありません。予約領域は変化せず、番号ラベルの高さと幅により (方向に従い) 決定されます。 + +さらに予約領域が重要なのは、内側の端がスケール全体のディメンションにおいて[グラフ領域](/igbulletgraph-overview#areas-elements)の最初の端を特定する点です。この端が、スケール全域に[視覚要素](/igbulletgraph-overview#configurable-visual-elements-properties-summary)の一部を配置する範囲関連プロパティの参照マークの役割を果たします。(最も一般的な場合、これらのプロパティの正の値は視覚要素を[グラフ領域](/igbulletgraph-overview#areas-elements)の内部に置き、負の値は視覚要素を予約領域の内部に配置します。) + +- グラフ領域 (2) - ブレット グラフのパフォーマンス バー、目盛、範囲、およびオプションで番号ラベルを表示する領域です。ラベルを除く視覚要素の範囲関連のプロパティはすべて、その端に対して測定されます。グラフ領域は、プレースホルダーではなくコントロール内部にスケールを配置する (正確には、スケールの[視覚要素](/igbulletgraph-overview#configurable-visual-elements-properties-summary)を配置する) 参照フレームとして役割を果たします。 + +グラフ領域のスプレッド: + +- スケールに沿う - グラフ領域はコントロールの開始位置 (水平方向の左端または垂直方向の下端) から開始され、その終了位置（水平方向の右端または垂直方向の上端）で終了します。スケールの開始位置および終了位置はどちらも、グラフ領域の始点側の端に対して測定されます。 +- スケール全域 - グラフ領域は、[予約領域](/igbulletgraph-overview#areas-elements)の端 (水平方向でグラフ領域の下端または垂直方向でグラフ領域の左端) から開始されます。予約領域の境界線で接しているグラフ領域の端は、スケールの一部の視覚要素の範囲関連プロパティに対する、スケール全域に視覚要素を配置するための参照点としての役割を果たします。 + +### 構成可能な視覚要素 + +igBulletGraph コントロールは、以下の視覚要素が特徴です(下の図を参照)。 + +- パフォーマンス バー (3) - コントロールにより表示される主要なメジャーで、バーとして視覚化されます。 +- 比較マーカー (4) - パフォーマンス バー メジャーの比較評価。パフォーマンス バーの向きに対して直角に交わるマーカーとして表示されます。 +- 比較範囲 (5) - 範囲は、スケール上で指定した値の領域を強調表示する視覚的な要素です。その目的は、パフォーマンス バー メジャーの質的状態を視覚で伝えると同時に、その状態をレベルとして示すことにあります。 +- 目盛 (6) - 目盛は、ブレット グラフを読み取りやすくするために、目盛の間隔でスケールを分割して見せる役割を果たします。 + - 主目盛 - 主目盛は、スケールの主要な区切りとして使用されます。表示間隔、範囲、およびスタイルは、対応するプロパティを設定し制御できます。 + - 補助目盛 - 補助目盛は主目盛を補助し、スケールの数値を読み取りやすくするために追加して使用します。主目盛と同じ方法でカスタマイズできます。 +- スケール ラベル (7) - このラベルはスケールのメジャーを示します。 +- 境界線 (8) - コントロールのディメンションを視覚的に区切る線です。 +- 背景 (9) - 視覚要素が配置された背景の色を設定できます。 + +![](../../images/images/igBulletGraph_Overview_4.png) + +- ツールチップ - パフォーマンス バーを作成するための値、異なる範囲に対応したターゲット値またはそれぞれの値を示します。 + + + +## 構成可能な視覚要素および関連プロパティ + +### 構成可能な視覚要素および関連プロパティの概要 + +各要素は複数の項目で構成することができます。 + +以下の表は、*igBulletGraph* コントロールの視覚要素で構成できる項目を示します。構成できる項目の詳細は、この表の次に示す各視覚要素の説明で、図および構成するプロパティと一緒に参照できます。 + + +| 視覚要素 | 構成できる主な項目 | +| --- | --- | +| [スケール](#scale) | 位置 目盛 ラベル | +| [パフォーマンス バー](#performance-bar) | 表示値 幅と位置 ルック アンド フィール | +| [比較マーカー](#comparative-marker) | 表示値 幅 ルック アンド フィール | +| [比較範囲](#comparative-ranges) | グラフに表示する範囲の数値 長さ、幅、位置 ルック アンド フィール | +| [背景](#background) | サイズと位置 ルック アンド フィール | +| [ツールチップ](#tooltips) | 表示遅延 | + + +### スケール + +以下の図は、下の表にリストされたスケール関連の範囲を示しています。 + +グラフ領域内でスケールを配置する範囲|ラベルの位置を設定する範囲 +---|--- +![](../../images/images/igBulletGraph_Overview_5.png) | ![](../../images/images/igBulletGraph_Overview_6.png) + + + +スケールに沿って主目盛を設定する範囲|スケール全域で主目盛を設定する範囲 +-----------|-------------- +![](../../images/images/igBulletGraph_Overview_7.png) | ![](../../images/images/igBulletGraph_Overview_8.png) + +|スケール全域で補助目盛を設定する範囲| +|-------------| +|![](../../images/images/igBulletGraph_Overview_9.png)| + + +以下の表は、ブレット グラフのスケールの構成できる項目を示し、管理に使用する `igBulletGraph` プロパティにマップします。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    構成可能な要素プロパティデフォルト値
    \*\*位置\*\*0.05
    0.95
    \*\*範囲と値\*\*\*\*最大値\*\*0
    \*\*最小値\*\*100
    \*\*目盛\*\*\*\*主目盛\*\*スケール内の位置、スペースおよび長さ設定されていません
    0
    0
    0.02
    0.2
    \*\*ルック アンド フィール\*\*色デフォルトのテーマで定義済み
    幅2.0
    \*\*補助目盛\*\*隣接する 2 つの主目盛間の\*\*数値\*\*3.0
    \*\*位置\*\*0.06
    0.2
    \*\*ルック アンド フィール\*\*色デフォルトのテーマで定義済み
    幅1.0
    \*\*ラベル\*\*\*\*位置とスペース\*\*0
    設定されていません
    0
    0
    \*\*数値書式\*\*設定されていません
    ルック アンド フィール色デフォルトのテーマで定義済み
    フォントデフォルトのテーマで定義済み
    + + + +#### 関連トピック + +- [スケールの構成 (*igBulletGraph*)](/igbulletgraph-configuring-the-scale) + +### パフォーマンス バー + +以下の図は、下の表にリストされたパフォーマンス バー関連の範囲を示しています。 + +![](../../images/images/igBulletGraph_Overview_88.png) + +以下の表は、ブレット グラフのパフォーマンス バーの構成できる項目を示し、管理に使用する `igBulletGraph` プロパティにマップします。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    \*\*構成可能な要素\*\*プロパティデフォルト値
    \*\*名前\*\*設定されていません
    \*\*表示する値\*\*設定されていません
    \*\*幅と位置\*\*\*0.5\*
    \*0.65\*
    \*\*ルック アンド フィール\*\*塗りつぶし色デフォルトのテーマで定義済み
    境界線の色デフォルトのテーマで定義済み
    境界線の線幅\*1.0\*
    \*\*ツールチップ\*\* の初期化状態による
    + + + +#### 関連トピック + +- [パフォーマンス バーの構成 (*igBulletGraph*)](/igbulletgraph-configuring-the-performance-bar) + +### 比較マーカー + +以下の図は、下の表にリストされた比較マーカー関連の範囲を示しています。 + +![](../../images/images/igBulletGraph_Overview_10.png) + +以下の表は、ブレット グラフの比較マーカーの構成できる項目を示し、管理に使用する `igBulletGraph` プロパティにマップします。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    構成可能な要素プロパティデフォルト値
    \*\*表示値\*\*設定されていません
    \*\*幅\*\*\*3.0\*
    \*\*ルック アンド フィール\*\*塗りつぶし色デフォルトのテーマで定義済み
    境界線の色デフォルトのテーマで定義済み
    境界線の線幅\*1.0\*
    + + + +#### 関連トピック + +- [比較マーカーの構成 (*igBulletGraph*)](/igbulletgraph-configuring-the-comparative-marker) + +### 比較範囲 + +以下の図は、下の表にリストされた比較範囲関連の範囲を示しています。 + +![](../../images/images/igBulletGraph_Overview_11.png) + +以下の表は、ブレット グラフの比較範囲の構成できる項目を示し、管理に使用する `igBulletGraph` プロパティにマップします。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    構成可能な要素プロパティデフォルト値
    グラフに表示する範囲の\*\*数値\*\*設定されていません
    \*\*長さ、幅、位置\*\*設定されていません
    設定されていません
    設定されていません
    設定されていません
    設定されていません
    設定されていません
    \*\*ルック アンド フィール\*\*塗りつぶし色デフォルトのテーマで定義済み
    境界線の色デフォルトのテーマで定義済み
    境界線の線幅\*1.0\*
    \*\*ツールチップ\*\*ハイフン (-) で区切られた範囲の開始値と終了値です。
    + + + +#### 関連トピック + +- [比較範囲の構成 (*igBulletGraph*)](/igbulletgraph-configuring-comparative-ranges) + +### 背景 + +以下の図は、下の表にリストされた背景関連の範囲を示しています。 + +![](../../images/images/igBulletGraph_Overview_12.png) + +以下の表は、ブレット グラフの背景の構成できる項目を示し、管理に使用する `igBulletGraph` プロパティにマップします。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    構成可能な要素プロパティデフォルト値
    スケール全域の\*\*スプレッドおよび位置\*\*\*0\*
    \*1.0\*
    \*\*ルック アンド フィール\*\*色デフォルトのテーマで定義済み
    境界線の色デフォルトのテーマで定義済み
    境界線の線幅\*2.0\*
    + +#### 関連トピック + +- [背景の構成 (*igBulletGraph*)](/igbulletgraph-configuring-the-background) + +### ツールチップ + +以下の表は、ツールチップに関する `igBulletGraph` コントロールで構成できる項目と管理に使用するプロパティをマップしています。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    構成可能な項目詳細プロパティ/イベントデフォルト値
    可視性\*\*igBulletGraph\*\* コントロールのツールチップを有効または無効にできます。\*False\*
    遅延時間視覚要素にマウスを合わせたときにツールチップが表示されるまでのタイムアウトを、ミリ秒数単位で設定します。\*500\*
    値ツールチップのプロパティでカスタムに値を設定できます。[\*\*パフォーマンス バー\*\*](/igbulletgraph-configuring-the-tooltips#performance-bar) の初期化状態による ([ツールチップの構成 (\*igBulletGraph\*)](/igbulletgraph-configuring-the-tooltips) を参照)
    [\*\*比較マーカー\*\*](/igbulletgraph-configuring-the-tooltips#comparative-marker)比較マーカーで示された値
    [\*\*比較範囲\*\*](/igbulletgraph-configuring-the-tooltips#comparative-ranges)ハイフン (-) で区切られた範囲の開始値と終了値です。
    + + +#### 関連トピック + +- [ツールチップの構成 (*igBulletGraph*)](/igbulletgraph-configuring-the-tooltips) + + + +## デフォルトの構成 +デフォルトで、`igBulletGraph` コントロールは水平方向です。スケールの範囲は、0 から 100 までです。コントロールの主目盛は 10 の間隔で表示され、主目盛間は補助目盛で 3 つに区切られています。タイトルまたはサブタイトルが表示されていない場合、背景色はライト グレーになります。境界線は、2 ピクセルのダーク グレーの線です。比較マーカーまたは比較範囲が表示されていません。アニメーション化されたトランジションが無効です。 + +以下の図は、デフォルト設定の `igBulletGraph` を示します。 + +![](../../images/images/igBulletGraph_Overview_13.png) + + + +## 要件 + +`igBulletGraph` コントロールは jQuery UI ウィジェットであるため、jQuery ライブラリと jQuery UI ライブラリに依存します。これらのリソースへの参照は、実際の jQuery または {environment:ProductNameMVC} が使用されているとしても必要となります。コントロールが ASP.NET MVC のコンテクスト内で使用されている場合、*Infragistics.Web.Mvc* アセンブリが必要です。 + +ブレット グラフにパフォーマンス値を表示するには、 プロパティを設定する必要があります。 + +完全な要件の一覧については、[*igBulletGraph* の追加](/igbulletgraph-adding)のトピックを参照してください。 + + + +## 関連コンテンツ + +### トピック + +このトピックの追加情報については、以下のトピックも合わせてご参照ください。 + + +- [*igBulletGraph* の追加](/igbulletgraph-adding): このグループ トピックでは、igBulletGraph™ コントロールを HTML ページと ASP.NET MVC アプリケーションに追加する方法を説明します。 + +- [*igBulletGraph* の構成](/igbulletgraph-configuring): このトピック グループは、向きや方向および視覚要素を含む igBulletGraph コントロールのさまざまな要素を構成する方法を説明します。 + +- [jQuery および MVC API リファレンス リンク (*igBulletGraph*)](/igbulletgraph-api-links): このトピックでは、igBulletGraph コントロールと ASP.NET MVC ヘルパーに関する API 参照ドキュメントへのリンクを提供します。 + +- [既知の問題と制限 (*igBulletGraph*)](/igbulletgraph-known-issues-and-limitations): このトピックでは、igBulletGraph コントロールの既知の問題点および制限に関する情報を提供します。 + + +### サンプル + +このトピックについては、以下のサンプルも参照してください。 + +- [基本構成]({environment:SamplesUrl}/bullet-graph/basic-configuration): このサンプルでは、igBulletGraph コントロールのシンプルな構成を紹介します。 + +- [アニメーション化されたトランジション]({environment:SamplesUrl}/bullet-graph/animated-transitions): このサンプルでは、複数の igBulletGraph コントロールの設定間でのアニメーション化されたトランジションを紹介します。 + + +### リソース + +以下の資料 (Infragistics のコンテンツ ファミリー以外でもご利用いただけます) は、このトピックに関連する追加情報を提供します。 + +- [ブレット グラフのデザイン仕様](http://www.perceptualedge.com/articles/misc/Bullet_Graph_Design_Spec.pdf): この PDF 文書は、ブレット グラフの概念を紹介し、推奨するデザインを提供しています。 + + + + + + + + + diff --git a/docs/jquery/src/content/ja/topics/controls/igcategorychart/adding.mdx b/docs/jquery/src/content/ja/topics/controls/igcategorychart/adding.mdx new file mode 100644 index 0000000000..b71d646167 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igcategorychart/adding.mdx @@ -0,0 +1,105 @@ +--- +title: "igCategoryChart の追加" +slug: igcategorychart-adding +--- + +# igCategoryChart の追加 + +### 目的 + +このトピックでは、コード例を使用して igCategoryChart™ コントロールをアプリケーションに追加する方法を説明します。 + +### このトピックの内容 + +このトピックは、以下のセクションで構成されます。 + +- [カテゴリ チャート コントロールをアプリケーションに追加](#Adding) + - [概要](#Introduction) + - [プレビュー](#Preview) + - [要件](#Prerequisites) + - [概要](#Overview) + - [手順](#Steps) +- [**関連コンテンツ**](#RelatedContent) + + +## igCategoryChart コントロールをアプリケーションに追加 + + + +### 概要 + +以下の手順は、igCategoryChart コントロールをアプリケーションに追加する方法を示します。 + + + +### プレビュー + +以下は igCategoryChart の画像です。 +![](../../images/images/categorychart-walkthrough-01.png) + + +### 要件 + + + + + +### 概要 + +以下はプロセスの概要です。 + +1. データ ソースを追加します。 + +2. igCategoryChart コントロールをアプリケーションに追加 + +3. 結果の確認 + + + +### 手順 + +以下では igCategoryChart コントロールをページに追加するために必要な手順を示します。 + +**データ ソースを追加します。** + +igCategoryChart コントロールを作成するには、はじめにデータをバインドする必要があります。以下のコード スニペットは、シンプルなデータソースを作成する方法を示します。その他のデータソースへのバインドについては、[データへバインド](/categorychart-binding-to-data)を参照してください。 + +**HTML の場合:** +``` +var data = [ + { "CountryName": "China", "Pop1995": 1216, "Pop2005": 1297, "Pop2015": 1361, "Pop2025": 1394 }, + { "CountryName": "India", "Pop1995": 920, "Pop2005": 1090, "Pop2015": 1251, "Pop2025": 1396 }, + { "CountryName": "United States", "Pop1995": 266, "Pop2005": 295, "Pop2015": 322, "Pop2025": 351 }, + { "CountryName": "Indonesia", "Pop1995": 197, "Pop2005": 229, "Pop2015": 256, "Pop2025": 277 }, + { "CountryName": "Brazil", "Pop1995": 161, "Pop2005": 186, "Pop2015": 204, "Pop2025": 218 } +]; + +``` + +**igCategoryChart の追加** + +igCategoryChart コントロールをページに追加し、上記データにバインドします。 + +以下のコードは、表示に必要な最小限のコードとプロパティ設定で igCategoryChart コントロールを追加します。 + +**HTML の場合:** + +```html + $(function () { + $("#chart").igCategoryChart({ dataSource: data}); +}); +``` + +**結果を確認する** + +結果を確認するために、プロジェクトをビルドおよび実行します。手順を正しく実装した場合、igCategoryChart は上記のプレビュー セクションで示したように表示されます。 + + + + +## 関連コンテンツ + +### トピック + +- [軸](/categorychart-axes) +- [チャート タイプの構成](/categorychart-chart-types) diff --git a/docs/jquery/src/content/ja/topics/controls/igcategorychart/annotations-and-interactions/annotations-and-interactions.mdx b/docs/jquery/src/content/ja/topics/controls/igcategorychart/annotations-and-interactions/annotations-and-interactions.mdx new file mode 100644 index 0000000000..c660dac5f2 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igcategorychart/annotations-and-interactions/annotations-and-interactions.mdx @@ -0,0 +1,29 @@ +--- +title: "igCategoryChart 注釈とインタラクション レイヤー" +slug: igcategorychart-annotations-and-interactions +--- + +# igCategoryChart 注釈とインタラクション レイヤー + +## このグループのトピックについて + +### はじめに + +このグループのトピックでは、`igCategoryChart` ウィジェットで注釈とインタラクション レイヤーを構成する方法を説明します。 + +### トピック + +- [カテゴリ ハイライト レイヤー](/igcategorychart-category-highlight-layer): このトピックは `igCategoryChart` のカテゴリ ハイライト レイヤーの設定について説明します。 + +- [項目ハイライト レイヤー](/igcategorychart-item-highlight-layer): このトピックは `igCategoryChart` の項目ハイライト レイヤーの設定について説明します。 + +- [十字線ハイライト レイヤー](/igcategorychart-crosshairs-layer): このトピックは `igCategoryChart` の十字線ハイライト レイヤーの設定について説明します。 + +- [カテゴリ ツールチップ レイヤー](/igcategorychart-category-tooltip-layer): このトピックは `igCategoryChart` のカテゴリ ハイライト レイヤーの設定について説明します。 + +- [項目ツールチップ レイヤー](/igcategorychart-item-tooltip-layer): このトピックは `igCategoryChart` の項目ツールチップ レイヤーの設定について説明します。 + +- [最終値レイヤー](/igcategorychart-final-value-layer): このトピックは `igCategoryChart` の最終値レイヤーの設定について説明します。 + +- [コールアウト レイヤー](/igcategorychart-callouts-layer): このトピックは `igCategoryChart` のコールアウト レイヤーの設定について説明します。 + diff --git a/docs/jquery/src/content/ja/topics/controls/igcategorychart/annotations-and-interactions/callouts-layer.mdx b/docs/jquery/src/content/ja/topics/controls/igcategorychart/annotations-and-interactions/callouts-layer.mdx new file mode 100644 index 0000000000..22e6179138 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igcategorychart/annotations-and-interactions/callouts-layer.mdx @@ -0,0 +1,51 @@ +--- +title: "コールアウト レイヤー" +slug: igcategorychart-callouts-layer +--- + +# コールアウト レイヤー + +コールアウト レイヤーは、指定した位置に注釈を表示します。ユーザーの注意を特定のデータポイントに促し、追加情報を提供するために使用します。 + +## オプション + +以下のオプション一覧は、Callouts Layer の設定時に使用してください。 + +オプション名|値型|説明 +---|---|--- +`calloutsVisible` | boolean | コールアウト注釈をチャートで描画するかどうかを決定します。 +`calloutsItemsSource` | object | コールアウト データが保存されるデータソース。 +`calloutsLabelMemberPath` | string | 注釈ラベルとして使用されるデータのパス。 +`calloutsXMemberPath` | string | T注釈の x 位置として使用されるデータのパス。 +`calloutsYMemberPath` | string | 注釈の y 位置として使用されるデータのパス。 + +## コールアウト レイヤーの有効化 + +Callouts Layer は `calloutsVisible` オプションを true に設定して有効化できます。 + +以下のコード スニペットは、`igCategoryChart` で十字線を有効にする方法を示します。 + +*In HTML:* + +```html +$(function () { + $("chart1").igCategoryChart({ + calloutsVisible: true, + calloutsItemsSource: data, + calloutsXMemberPath: "calloutIndex", + calloutsYMemberPath: "calloutValue", + calloutsLabelMemberPath: "calloutContent" + }); +}); +``` + +以下のスクリーンショットは、Callouts Layer を使用した igCategoryChart コントロールを示します。 + +![](../../../images/images/categorychart-callouts-layer-01.png) + + +## 関連トピック: + +- [最終値レイヤー](/igcategorychart-final-value-layer) + +- [項目ツールチップ レイヤー](/igcategorychart-item-tooltip-layer) diff --git a/docs/jquery/src/content/ja/topics/controls/igcategorychart/annotations-and-interactions/category-highlight-layer.mdx b/docs/jquery/src/content/ja/topics/controls/igcategorychart/annotations-and-interactions/category-highlight-layer.mdx new file mode 100644 index 0000000000..2079afa6ff --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igcategorychart/annotations-and-interactions/category-highlight-layer.mdx @@ -0,0 +1,35 @@ +--- +title: "カテゴリ ハイライト レイヤー" +slug: igcategorychart-category-highlight-layer +--- + +# カテゴリ ハイライト レイヤー + +Category Highlight Layer は、カテゴリ上にポインタをホバー時にチャートのカテゴリを強調表示します。 + +## カテゴリ ハイライト レイヤー + +カテゴリ ハイライト レイヤーは、`isCategoryHighlightingEnabled` オプションを true に設定して有効にできます。 + +以下のコード スニペットは、`igCategoryChart` で Category Highlight Layer を有効にする方法を示します。 + +*In HTML:* + +```html +$(function () { + $("chart1").igCategoryChart({ + isCategoryHighlightingEnabled: true + }); +}); +``` + +以下のスクリーンショットは、Category Highlight Layer を使用した igCategoryChart コントロールを示します。 + +![](../../../images/images/categorychart-category-highlight-layer-01.png) + + +## 関連トピック: + +- [項目強調表示レイヤー](/igcategorychart-item-highlight-layer) + +- [カテゴリ ハイライト レイヤー](/igcategorychart-category-tooltip-layer) diff --git a/docs/jquery/src/content/ja/topics/controls/igcategorychart/annotations-and-interactions/category-tooltip-layer.mdx b/docs/jquery/src/content/ja/topics/controls/igcategorychart/annotations-and-interactions/category-tooltip-layer.mdx new file mode 100644 index 0000000000..ff2691477a --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igcategorychart/annotations-and-interactions/category-tooltip-layer.mdx @@ -0,0 +1,35 @@ +--- +title: "カテゴリ ツールチップ レイヤー" +slug: igcategorychart-category-tooltip-layer +--- + +# カテゴリ ツールチップ レイヤー + +カテゴリ ツールチップ レイヤーは、ポインターがでホバーしているカテゴリにツールチップを表示します。 + +## カテゴリ ハイライト レイヤーの有効化 + +カテゴリ ツールチップ レイヤーは、`toolTipType` オプションを category に設定して有効にできます。 + +以下のコード スニペットは、`igCategoryChart` でカテゴリ ツールチップ レイヤーを有効にする方法を示します。 + +*In HTML:* + +```html +$(function () { + $("chart1").igCategoryChart({ + toolTipType: "category" + }); +}); +``` + +以下のスクリーンショットは、カテゴリ ツールチップ レイヤー使用した igCategoryChart コントロールを示します。 + +![](../../../images/images/categorychart-category-tooltip-layer-01.png) + + +## 関連トピック: + +- [項目ツールチップ レイヤー](/igcategorychart-item-tooltip-layer) + +- [カテゴリ ハイライト レイヤー](/igcategorychart-category-highlight-layer) diff --git a/docs/jquery/src/content/ja/topics/controls/igcategorychart/annotations-and-interactions/crosshairs-layer.mdx b/docs/jquery/src/content/ja/topics/controls/igcategorychart/annotations-and-interactions/crosshairs-layer.mdx new file mode 100644 index 0000000000..000c8af1e6 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igcategorychart/annotations-and-interactions/crosshairs-layer.mdx @@ -0,0 +1,77 @@ +--- +title: "十字線レイヤー" +slug: igcategorychart-crosshairs-layer +--- + +# 十字線レイヤー + +十字線レイヤーは、ポインターがデータポイントと交差する場所に垂直と水平 (またはそのいずれか) の線を描画します。 + +## オプション + +以下のオプション一覧は、コールアウト レイヤーの設定時に使用してください。 + +オプション名|値型|説明 +---|---|--- +`crosshairsDisplayMode` | enumeration | チャートで表示する十字線のタイプを決定します。
    値: "default", "none", "horizontal", "vertical", "both" +`crosshairsSnapToData` | boolean | 十字線がデータポイント間を補完するかどうかを決定します。 +`crosshairsAnnotationEnabled`| boolean | 十字線値が軸注釈に描画されるかどうかを決定します。 + +## 十字線レイヤーの有効化 + +十字線レイヤーは `crosshairsDisplayMode` オプションを "horizontal"、"vertical"、"both" に設定して有効にできます。 + +以下のコード スニペットは、`igCategoryChart` で十字線を有効にする方法を示します。 + +*In HTML:* + +```html +$(function () { + $("chart1").igCategoryChart({ + crosshairsDisplayMode: "both" + }); +}); +``` + +## 十字線レイヤーの設定 + +### データへスナップ + +`crosshairsSnapToData` オプションを true に設定して十字線を `igCategoryChart` のデーターポイントにスナップします。false に設定した場合、十字線はポインターのホバー時にデータ ポイント間を補完します。 + +以下のコードスニペットは、データ ポイントにスナップする十字線を有効にする方法を示します。 + +*In HTML:* + +```html +$(function () { + $("chart1").igCategoryChart({ + crosshairsSnapToData: true + }); +}); +``` + +### 軸注釈の有効化 + +十字線レイヤーの軸注釈は、軸の注釈ラベルで十字線の値を描画します。 + +以下のコード スニペットは、十字線レイヤーの軸注釈を有効にする方法を示します。 + +*In HTML:* + +```html +$(function () { + $("chart1").igCategoryChart({ + crosshairsAnnotationEnabled: true + }); +}); +``` + +以下のスクリーンショットは、軸注釈を含む水平十字線を使用した igCategoryChart コントロールを示します。 + +![](../../../images/images/categorychart-crosshairs-layer-01.png) + + +## 関連トピック: + +- [最終値レイヤー](/igcategorychart-final-value-layer) diff --git a/docs/jquery/src/content/ja/topics/controls/igcategorychart/annotations-and-interactions/datatooltip.mdx b/docs/jquery/src/content/ja/topics/controls/igcategorychart/annotations-and-interactions/datatooltip.mdx new file mode 100644 index 0000000000..ba834e96cb --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igcategorychart/annotations-and-interactions/datatooltip.mdx @@ -0,0 +1,138 @@ +--- +title: "チャートのデータ ツールチップ" +--- +# チャートのデータ ツールチップ + +`igCategoryChart` のデータ ツールチップは、シリーズの値とタイトル、およびシリーズの凡例バッジをツールチップに表示します。さらに、シリーズの行と値の列をフィルタリングし、値をスタイル設定し、書式を設定するための `igDataLegend` の多くの構成プロパティを提供します。このツールチップ タイプは、`igCategoryChart` のプロット領域内でマウスを動かすと更新されます。 + +## データ ツールチップの要素 + +`igCategoryChart` のデータ ツールチップは、3 種類の行と 4 種類の列のセットを使用してコンテンツを表示します。 + +### データ ツールチップの行 + +データ ツールチップの行には、ヘッダー行、シリーズ行、および集計行が含まれます。 + +ヘッダー行には、ホバーされたポイントの軸ラベルが表示され、`dataToolTipHeaderText` プロパティを使用して変更できます。 + +シリーズ行は、実際には、チャートにプロットされた各シリーズに対応する行のセットにすることができます。これらの行には、凡例バッジ、シリーズ タイトル、シリーズの実際の値 / 省略値、および指定されている場合は省略記号と単位が表示されます。 + +最後に、すべてのシリーズ値の合計を表示する集計行があります。デフォルトの集計タイトルは、シリーズの `dataToolTipSummaryTitleText` プロパティを使用して変更できます。また、`dataToolTipSummaryType` プロパティを使用して、シリーズ値の合計、最小、最大、または平均を集計行に表示するかどうかをカスタマイズできます。 + +以下のコードス ニペットは、上記のプロパティを設定して、集計のカスタム タイトルとカスタム ヘッダーを持つ `Total` 集計タイプのデータ ツールチップを設定する方法を示しています。 + +**JavaScript の場合:** + +```js +$("#chart").igCategoryChart({ + dataSource: data, + chartType: "column", + toolTipType: "data", + dataToolTipHeaderText: "My Custom Data Tooltip Header", + dataToolTipSummaryType: "total", + dataToolTipSummaryTitleText: "Grand Total:" +}); +``` + +### データ ツールチップの列 + +データ ツールチップの列には、タイトル、ラベル、値、および単位の列が含まれます。チャートの各シリーズには、凡例の `dataToolTipIncludedColumns` または `dataToolTipExcludedColumns` コレクションに応じて、ラベル、値、および単位の複数の列を含めることができます。 + +タイトル列には、チャートにプロットされたさまざまなシリーズの `title` プロパティに由来する凡例バッジとシリーズ タイトルが表示されます。 + +ラベルの列には、ツールチップの `dataToolTipIncludedColumns` または `dataToolTipExcludedColumns` コレクション内のさまざまなプロパティパスの名前または省略形が表示されます。 + +値の列には、一連の値が省略形のテキストとして表示されます。このテキストは、`dataToolTipValueFormatAbbreviation` プロパティを使用してフォーマットでき、このプロパティを `Auto` または `Shared` に設定することで、すべての数値に同じ省略形を適用できます。または、ユーザーは `Independent`、`Kilo`、`Million` などの他の省略形を選択できます。省略値の精度は、最小桁数と最大桁数にそれぞれ `dataToolTipValueFormatMinFractions` と `dataToolTipValueFormatMaxFractions` を使用して制御されます。 + +単位の列には、省略記号や単位テキストが表示されます。これらは、`dataToolTipUnitsText` を設定することでツールチップに設定できます。 + +以下のコードスニペットは、`unitText` と `igCategoryChart` のデータ ツールチップに設定された最小/最大の端数を示しています。 + +**JavaScript の場合:** + +```js +$("#chart").igCategoryChart({ + dataSource: data, + chartType: "column", + toolTipType: "data", + dataToolTipUnitsText: "K", + dataToolTipValueFormatMinFractions: 2, + dataToolTipValueFormatMaxFractions: 4 +}); +``` + +## データ ツールチップのスタイル設定 + +`igCategoryChart` は、データ ツールチップの各タイプの列をスタイル設定するためのプロパティを提供します。これらの各プロパティ名は、Title、Label、Value、Units で始まり、テキストの色、フォント、およびマージンのスタイルを設定できます。たとえば、これらのそれぞれのテキストの色を設定する場合は、`dataToolTipTitleTextColor`、`dataToolTipLabelTextColor`、`dataToolTipValueTextColor`、および `dataToolTipUnitsTextColor` プロパティを設定します。 + +以下のコード スニペットは、上記のスタイル設定プロパティを設定する方法を示しています。 + +**JavaScript の場合:** + +```js +$("#chart").igCategoryChart({ + dataSource: data, + chartType: "column", + toolTipType: "data", + dataToolTipTitleTextColor: "lightgray", + dataToolTipLabelTextColor: "lightgray", + dataToolTipValueTextColor: "green", + dataToolTipUnitsTextColor: "green", + dataToolTipUnitsText: "K" +}); +``` + +## データ ツールチップのグループ化と配置 + +`dataToolTipGroupingMode` プロパティを `Grouped` または `Individual` に設定して、複数のシリーズのコンテンツを 1 つのツールチップにグループ化するか、各シリーズのコンテンツを複数のツールチップに分割することができます。`Grouped` モードでは、`dataToolTipGroupedPositionModeX` プロパティと `dataToolTipGroupedPositionModeY` プロパティを設定することにより、ツールチップが表示される場所をカスタマイズできます。これにより、ツールチップの水平方向と垂直方向の配置を、マウス位置に最も近いシリーズ ポイントに追従させるか、プロット領域の端に固定するかをカスタマイズできます。 + +以下のコード スニペットは、スクロールすると `igCategoryChart` の左上にピン固定されるデータ ツールチップを示しています。 + +**JavaScript の場合:** + +```js +$("#chart").igCategoryChart({ + dataSource: data, + chartType: "column", + toolTipType: "data", + dataToolTipGroupingMode: "grouped", + dataToolTipGroupedPositionModeX: "pinLeft", + dataToolTipGroupedPositionModeY: "pinTop" +}); +``` + +## データ ツールチップ値の書式設定 + +`igCategoryChart` は、その `dataToolTipValueFormatAbbreviation` プロパティを使用して、データ ツールチップに大きな数の自動省略形を提供します。これにより、単位の列に kilo、million、billion などの乗数が追加されます。`dataToolTipValueFormatMinFractions` および `dataToolTipValueFormatMaxFractions` を設定することにより、表示される小数桁数をカスタマイズできます。これにより、小数点以下に表示される最小桁数と最大桁数をそれぞれ決定できます。 + +以下のコード スニペットは、`igCategoryChart` の データ ツールチップの最小部分と最大部分を設定する方法を示しています。 + +**JavaScript の場合:** + +```js +$("#chart").igCategoryChart({ + dataSource: data, + chartType: "column", + toolTipType: "data", + dataToolTipValueFormatMinFractions: 2, + dataToolTipValueFormatMaxFractions: 4 +}); +``` + +## データ ツールチップの値モード + +チャートの `dataToolTipValueFormatMode` プロパティを変更することにより、データ ツールチップ内の値のデフォルトの 10 進表示を通貨表示に変更できます。`igCategoryChart` は、`dataToolTipValueFormatCulture` プロパティを使用し、対応するカルチャ タグに設定することにより、ツールチップに表示されている通貨記号のカルチャを変更する機能も公開します。 + +たとえば、以下のコード スニペットは、`dataToolTipValueFormatCulture` が "en-GB" に設定され、`dataToolTipValueFormatMode` が "Currency" に設定されたチャートを作成します。 + +**JavaScript の場合:** + +```js +$("#chart").igCategoryChart({ + dataSource: data, + chartType: "column", + toolTipType: "data", + dataToolTipValueFormatCulture: "en-GB", + dataToolTipValueFormatMode: "currency" +}); +``` \ No newline at end of file diff --git a/docs/jquery/src/content/ja/topics/controls/igcategorychart/annotations-and-interactions/final-value-layer.mdx b/docs/jquery/src/content/ja/topics/controls/igcategorychart/annotations-and-interactions/final-value-layer.mdx new file mode 100644 index 0000000000..299aca82dd --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igcategorychart/annotations-and-interactions/final-value-layer.mdx @@ -0,0 +1,35 @@ +--- +title: "最終値レイヤー" +slug: igcategorychart-final-value-layer +--- + +# 最終値レイヤー + +最終値レイヤーは、データの最終値の軸に沿って注釈を表示します。 + +## 最終値レイヤーの有効化 + +最終値レイヤーは、`finalValueAnnotationsVisible` オプションを true に設定して有効にできます。 + +以下のコード スニペットは、`igCategoryChart` で最終値レイヤーを有効にする方法を示します。 + +*In HTML:* + +```html +$(function () { + $("chart1").igCategoryChart({ + finalValueAnnotationsVisible: true + }); +}); +``` + +以下のスクリーンショットは、最終値レイヤー使用した igCategoryChart コントロールを示します。 + +![](../../../images/images/categorychart-final-value-layer-01.png) + + +## 関連トピック: + +- [十字線レイヤー](/igcategorychart-crosshairs-layer) + +- [コールアウト レイヤー](/igcategorychart-callouts-layer) diff --git a/docs/jquery/src/content/ja/topics/controls/igcategorychart/annotations-and-interactions/images/categorychart-callouts-layer-01.png b/docs/jquery/src/content/ja/topics/controls/igcategorychart/annotations-and-interactions/images/categorychart-callouts-layer-01.png new file mode 100644 index 0000000000..20b8e53656 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/controls/igcategorychart/annotations-and-interactions/images/categorychart-callouts-layer-01.png differ diff --git a/docs/jquery/src/content/ja/topics/controls/igcategorychart/annotations-and-interactions/images/categorychart-category-highlight-layer-01.png b/docs/jquery/src/content/ja/topics/controls/igcategorychart/annotations-and-interactions/images/categorychart-category-highlight-layer-01.png new file mode 100644 index 0000000000..01724b58b6 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/controls/igcategorychart/annotations-and-interactions/images/categorychart-category-highlight-layer-01.png differ diff --git a/docs/jquery/src/content/ja/topics/controls/igcategorychart/annotations-and-interactions/images/categorychart-category-tooltip-layer-01.png b/docs/jquery/src/content/ja/topics/controls/igcategorychart/annotations-and-interactions/images/categorychart-category-tooltip-layer-01.png new file mode 100644 index 0000000000..0e91e30641 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/controls/igcategorychart/annotations-and-interactions/images/categorychart-category-tooltip-layer-01.png differ diff --git a/docs/jquery/src/content/ja/topics/controls/igcategorychart/annotations-and-interactions/images/categorychart-crosshairs-layer-01.png b/docs/jquery/src/content/ja/topics/controls/igcategorychart/annotations-and-interactions/images/categorychart-crosshairs-layer-01.png new file mode 100644 index 0000000000..e22a10507e Binary files /dev/null and b/docs/jquery/src/content/ja/topics/controls/igcategorychart/annotations-and-interactions/images/categorychart-crosshairs-layer-01.png differ diff --git a/docs/jquery/src/content/ja/topics/controls/igcategorychart/annotations-and-interactions/images/categorychart-final-value-layer-01.png b/docs/jquery/src/content/ja/topics/controls/igcategorychart/annotations-and-interactions/images/categorychart-final-value-layer-01.png new file mode 100644 index 0000000000..7d3e8413b8 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/controls/igcategorychart/annotations-and-interactions/images/categorychart-final-value-layer-01.png differ diff --git a/docs/jquery/src/content/ja/topics/controls/igcategorychart/annotations-and-interactions/images/categorychart-item-highlight-layer-01.png b/docs/jquery/src/content/ja/topics/controls/igcategorychart/annotations-and-interactions/images/categorychart-item-highlight-layer-01.png new file mode 100644 index 0000000000..f8f4321eaa Binary files /dev/null and b/docs/jquery/src/content/ja/topics/controls/igcategorychart/annotations-and-interactions/images/categorychart-item-highlight-layer-01.png differ diff --git a/docs/jquery/src/content/ja/topics/controls/igcategorychart/annotations-and-interactions/images/categorychart-item-tooltip-layer-01.png b/docs/jquery/src/content/ja/topics/controls/igcategorychart/annotations-and-interactions/images/categorychart-item-tooltip-layer-01.png new file mode 100644 index 0000000000..8fbf70d7eb Binary files /dev/null and b/docs/jquery/src/content/ja/topics/controls/igcategorychart/annotations-and-interactions/images/categorychart-item-tooltip-layer-01.png differ diff --git a/docs/jquery/src/content/ja/topics/controls/igcategorychart/annotations-and-interactions/item-highlight-layer.mdx b/docs/jquery/src/content/ja/topics/controls/igcategorychart/annotations-and-interactions/item-highlight-layer.mdx new file mode 100644 index 0000000000..d43922b385 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igcategorychart/annotations-and-interactions/item-highlight-layer.mdx @@ -0,0 +1,35 @@ +--- +title: "項目ハイライト レイヤー" +slug: igcategorychart-item-highlight-layer +--- + +# 項目ハイライト レイヤー + +項目ハイライト レイヤーは、カテゴリ上にポインターをホバー時にチャートのカテゴリを強調表示します。 + +## 項目ハイライト レイヤー + +項目ハイライト レイヤーは、`isItemHighlightingEnabled` オプションを true に設定して有効にできます。 + +以下のコード スニペットは、`igCategoryChart` で項目ハイライト レイヤーを有効にする方法を示します。 + +*In HTML:* + +```html +$(function () { + $("chart1").igCategoryChart({ + isItemHighlightingEnabled: true + }); +}); +``` + +以下のスクリーンショットは、項目ハイライト レイヤーを使用した igCategoryChart コントロールを示します。 + +![](../../../images/images/categorychart-item-highlight-layer-01.png) + + +## 関連トピック: + +- [カテゴリ ハイライト レイヤー](/igcategorychart-category-highlight-layer) + +- [項目ツールチップ レイヤー](/igcategorychart-item-tooltip-layer) diff --git a/docs/jquery/src/content/ja/topics/controls/igcategorychart/annotations-and-interactions/item-tooltip-layer.mdx b/docs/jquery/src/content/ja/topics/controls/igcategorychart/annotations-and-interactions/item-tooltip-layer.mdx new file mode 100644 index 0000000000..81bd5d7597 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igcategorychart/annotations-and-interactions/item-tooltip-layer.mdx @@ -0,0 +1,35 @@ +--- +title: "項目ツールチップ レイヤー" +slug: igcategorychart-item-tooltip-layer +--- + +# 項目ツールチップ レイヤー + +項目ツールチップ レイヤーは、igCategoryChart でポインターがホバーしているカテゴリの各項目にツールチップを表示します。 + +## 項目ツールチップ レイヤーの有効化 + +項目ツールチップ レイヤーは、`toolTipType` オプションを item に設定して有効にできます。 + +以下のコード スニペットは、`igCategoryChart` で項目ツールチップ レイヤーを有効にする方法を示します。 + +*In HTML:* + +```html +$(function () { + $("chart1").igCategoryChart({ + toolTipType: "item" + }); +}); +``` + +以下のスクリーンショットは、項目ツールチップ レイヤー使用した igCategoryChart コントロールを示します。 + +![](../../../images/images/categorychart-item-tooltip-layer-01.png) + + +## 関連トピック: + +- [カテゴリ ツールチップ レイヤー](/igcategorychart-category-tooltip-layer) + +- [項目ハイライト レイヤー](/igcategorychart-item-highlight-layer) diff --git a/docs/jquery/src/content/ja/topics/controls/igcategorychart/axes/axis-intervals.mdx b/docs/jquery/src/content/ja/topics/controls/igcategorychart/axes/axis-intervals.mdx new file mode 100644 index 0000000000..db726a632a --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igcategorychart/axes/axis-intervals.mdx @@ -0,0 +1,69 @@ +--- +title: "軸間隔" +slug: igcategorychart-axis-intervals +--- + +# 軸間隔 + +### 目的 +このトピックでは、コード例を使用して igCategoryChart コントロールのチャート軸に主目盛と副目盛を構成する方法を示します。 + +igCategoryChart コントロールで、軸の主間隔は主グリッド線および軸ラベルがどれくらいの頻度で軸に描画されるかを指定します。同様に、軸副間隔は副グリッド線が軸に描画される頻度を指定します。 + + +### このトピックの内容 + +このトピックは、以下のセクションで構成されます。 + +- [X軸とY軸に主間隔と副間隔を構成](#ConfiguringXAxis) +- [コード スニペット](#codesnippet) +- [関連トピック](#relatedtopics) + +### X軸とY軸に主間隔と副間隔を構成 + +構成の目的:|使用するプロパティ|設定値 +---|---|--- +主間隔グリッド線の頻度。|`xAxisInterval`,`yAxisInterval` |この値は、軸ラベルおよび主グリッド線 (使用する場合) に必要なスペースを提供します。軸ラベルの間隔も、この値によって設定され、間隔に関連付けられた軸のポイントにラベルが 1 つ表示されることに注意してください。
    X 軸では、この値が最初と最後のカテゴリ項目間のインデックスとして表されます。通常、この値は、カテゴリ項目の合計数の 10～20% に相当します。その結果、すべての軸ラベルは軸にフィットし、他の軸ラベルによって切り取られることはありません。
    日付/時刻軸では、この値は軸の最小値から最大値の範囲の時間間隔として表されます。
    Y 軸では、この値は軸の最小値から最大値の範囲の double 値として表されます。数値軸はデフォルトで、軸の最小値および最大値から四捨五入されたバランスの良い数値に、自動的に計算されます。 +主間隔グリッド線の色。|`xAxisMajorStroke`,`yAxisMajorStroke` |軸の主グリッド線の色。 +主間隔グリッド線の太さ。|`xAxisMajorStrokeThickness`,`yAxisMajorStrokeThickness` |double 値として設定された軸の主グリッド線の太さ +副間隔グリッド線の頻度。|`xAxisMinorInterval`,`yAxisMinorInterval` |この値は、主グリッド線と主グリッド線の間に描画される副グリッド線に必要なスペースを提供します。その結果、XAxisMinorInterval プロパティの値は、常に XAxisInterval プロパティの値より小さい値 (通常、2 分の 1 から 5 分の 1) であることが必要です。
    カテゴリ軸では、この値が MajorInterval プロパティの小数として表されます。通常、この値は 0.25 から 0.5 の間です。
    数値軸でこの値は軸の最小値から最大値までの double として表示されます。デフォルトで数値軸は軸の最小値および最高値に基づいて自動的に適切な間隔を計算しません。
    日付/時刻軸では、この値は軸の最小値から最大値の範囲の時間間隔として表されます。 +副間隔グリッド線の色。|`xAxisMinorStroke`, `yAxisMinorStroke` |軸の副グリッド線の色。 +副間隔グリッド線の太さ。|`xAxisMajorStrokeThickness`, `yAxisMajorStrokeThickness`|double 値として設定された軸の主グリッド線の太さ + +### コード スニペット + +以下のコード スニペットは、x 軸の間隔を設定する方法を示します。 + +*HTML の場合:* + +```html + +$(function () { + $("#chart").igCategoryChart({ + xAxisInterval: 1, + xAxisMinorInterval: 0.25, + xAxisMinorStroke: "Red", + xAxisMajorStroke: "Green", + xAxisMinorStrokeThickness: 1, + xAxisMajorStrokeThickness: 1 + }); +}); +``` + +![](../../../images/images/categorychart-intervals-01.png) + +## 関連トピック: + +- [チュートリアル](/igcategorychart-adding) + +- [データ バインド](/categorychart-binding-to-data) + +- [軸間隔と重複の構成](ccategorychart-onfiguring-axis-gap-and-overlap.html) + +- [軸ラベルの構成](igcategorychart-axis-labels.html) + +- [軸範囲の構成](/categorychart-configuring-axis-range) + +- [軸目盛りの構成](/igcategorychart-axis-tickmarks) + +- [軸タイトルの構成](/categorychart-configuring-axis-titles) diff --git a/docs/jquery/src/content/ja/topics/controls/igcategorychart/axes/axis-labels.mdx b/docs/jquery/src/content/ja/topics/controls/igcategorychart/axes/axis-labels.mdx new file mode 100644 index 0000000000..53e0921be1 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igcategorychart/axes/axis-labels.mdx @@ -0,0 +1,78 @@ +--- +title: "軸ラベルの構成" +slug: igcategorychart-axis-label +--- + +# 軸ラベルの構成 + +igCategoryChart は、チャートの構成、書式設定、ラベルのスタイル設定など詳細に制御することが可能です。デフォルトでは、ラベルを明示的に設定する必要はありません。カテゴリ チャートは、提供したデータ内で最初の適切な文字列プロパティを使用し、ラベルに使用します。 + +### このトピックの内容 + +このトピックは、以下のセクションで構成されます。 + +- [ラベル設定](#labelsettings) +- [ラベルのスタイル](#labelstyling) +- [コード スニペット](#codesnippet) +- [関連トピック](#relatedtopics) + +### ラベル設定 + +igCategoryChart™ コントロールでは、以下のプロパティで x 軸および y 軸のラベルの回転角度、マージン、水平/垂直の配置、不透明度、パディングと表示を変更できます。 + +プロパティ名|プロパティ タイプ|説明 +---|---|--- +`xAxisLabelAngle`, `yAxisLabelAngle` | double |x 軸と y 軸のラベルの回転角度を決定します。 +`xAxisLabelHorizontalAlignment`, `yAxisLabelHorizontalAlignment` |HorizontalAlignment|x 軸と y 軸のラベルの水平方向の配置を決定します。 +`xAxisLabelVerticalAlignment`, `yAxisLabelVerticalAlignment`|VerticalAlignment|x 軸と y 軸のラベルの垂直方向の配置を決定します。 +`xAxisLabelVisibility`, `yAxisLabelVisibility`|Visibility bool|x 軸と y 軸のラベルを表示するかどうかを決定します。 +`xAxisLabelLeftMargin`, `yAxisLabelLeftMargin`, `xAxisLabelRightMargin`, `yAxisLabelRightMargin`|Number|x 軸と y 軸のラベルに適用するマージンを決定します。 + + +### ラベルのスタイル +カテゴリ チャートの x 軸および y 軸のラベルのルックアンドフィールをスタイル設定できます。主にフォントタイプ、フォント サイズ、テキスト色など異なるフォント スタイルをラベルに適用できます。以下のプロパティを使用します。 + +プロパティ名|プロパティ タイプ|説明 +---|---|--- +`xAxisLabelTextStyle`,`yAxisLabelTextStyle`|object|x 軸と y 軸ラベルに使用するフォント ファミリ、サイズ、スタイルを決定します。 +`xAxisLabelTextColor`,`yAxisLabelTextColor`|Brush|x 軸と y 軸のラベルのテキストの色を決定します。 + + +### コード スニペット +以下のコード例は、スタイル プロパティを使用して x 軸のラベルにスタイル設定します。 + +*HTML の場合:* + +```html +$(function () { + $("#chart").igCategoryChart({ + dataSource: data, + xAxisLabelTextStyle: "16pt Verdana", + xAxisLabelRightMargin: "14", + xAxisLabelTextColor: "red" + }); + }); +``` + + + + +以下のスクリーンショットは、x 軸ラベルをスタイル設定した igCategoryChart コントロールを示します。 + +![](../../../images/images/categorychart-configuring-axis-labels-01.png) + +## 関連トピック: + +- [チュートリアル](/igcategorychart-adding) + +- [データ バインド](/categorychart-binding-to-data) + +- [軸間隔と重複の構成](/categorychart-configuring-axis-gap-and-overlap) + +- [軸間隔の構成](igcategorychart-configuring-axis-intervals.html) + +- [軸範囲の構成](/categorychart-configuring-axis-range) + +- [軸目盛りの構成](igcategorychart-configuring-axis-tickmarks.html) + +- [軸タイトルの構成](/categorychart-configuring-axis-titles) diff --git a/docs/jquery/src/content/ja/topics/controls/igcategorychart/axes/axis-tickmarks.mdx b/docs/jquery/src/content/ja/topics/controls/igcategorychart/axes/axis-tickmarks.mdx new file mode 100644 index 0000000000..b90339680a --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igcategorychart/axes/axis-tickmarks.mdx @@ -0,0 +1,60 @@ +--- +title: "軸目盛" +slug: igcategorychart-axis-tickmarks +--- + +# 軸目盛 + +目盛りは軸にポイントを表示します。スケールに特定の数値ポイント、またはカテゴリ軸にカテゴリ値を表します。 + +### このトピックの内容 + +このトピックは、以下のセクションで構成されます。 + +- [プロパティの設定](#propertysettings) +- [コード スニペット](#codesnippet) +- [関連トピック](#relatedtopics) + +### プロパティの設定 +igCategoryChart™ コントロールでは、以下のプロパティで x 軸および y 軸のラベルの長さ、太さ、色を変更できます。 + +プロパティ名|プロパティ タイプ|説明 +---|---|--- +`xAxisTickLength`, `yAxisTickLength` | number |x 軸と y 軸の目盛りの長さを決定します。 +`xAxisTickStroke`, `yAxisTickStroke` |string |x 軸と y 軸の目盛りの色を決定します。 +`xAxisTickStrokeThickness`, `yAxisTickStrokeThickness`|number|x 軸と y 軸の目盛りの太さを決定します。 + +### コード スニペット + +以下のコードスニペットは、x 軸の色、長さ、太さを設定します。 + +*HTML の場合:* + +```html +$(function () { + $("#chart").igCategoryChart({ + dataSource: data, + xAxisTickLength: 10, + xAxisTickStrokeThickness: 3, + xAxisTickStroke: 'red' + }); + }); +``` + +![](../../../images/images/categorychart-configuring-axis-tickmarks-01.png) + +## 関連トピック: + +- [チュートリアル](/igcategorychart-adding) + +- [データ バインド](/categorychart-binding-to-data) + +- [軸間隔と重複の構成](/categorychart-configuring-axis-gap-and-overlap) + +- [軸ラベルの構成](igcategorychart-axis-labels.html) + +- [軸間隔の構成](/igcategorychart-axis-intervals) + +- [軸範囲の構成](/categorychart-configuring-axis-range) + +- [軸タイトルの構成](/categorychart-configuring-axis-titles) diff --git a/docs/jquery/src/content/ja/topics/controls/igcategorychart/axes/categorychart-axes.mdx b/docs/jquery/src/content/ja/topics/controls/igcategorychart/axes/categorychart-axes.mdx new file mode 100644 index 0000000000..2bb4f881d2 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igcategorychart/axes/categorychart-axes.mdx @@ -0,0 +1,17 @@ +--- +title: "軸" +slug: categorychart-axes +--- + +# 軸 + + +igCategoryChart コントロールでは、軸は軸のラベル、主線、目盛り、グリッド線、ストリップやタイトルの外観を特定する基本プロパティを提供します。 + + +- [軸間隔と重複の構成](/categorychart-configuring-axis-gap-and-overlap) +- [軸ラベルの構成](igcategorychart-configuring-axis-labels.html) +- [軸間隔の構成](igcategorychart-configuring-axis-intervals.html) +- [軸範囲の構成](/categorychart-configuring-axis-range) +- [軸目盛りの構成](igcategorychart-configuring-axis-tickmarks.html) +- [軸タイトルの構成](/categorychart-configuring-axis-titles) diff --git a/docs/jquery/src/content/ja/topics/controls/igcategorychart/axes/categorychart-configuring-axis-gap-and-overlap.mdx b/docs/jquery/src/content/ja/topics/controls/igcategorychart/axes/categorychart-configuring-axis-gap-and-overlap.mdx new file mode 100644 index 0000000000..861181a0c9 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igcategorychart/axes/categorychart-configuring-axis-gap-and-overlap.mdx @@ -0,0 +1,102 @@ +--- +title: "igCategoryChart の軸間隔と重複の構成" +slug: categorychart-configuring-axis-gap-and-overlap +--- + +# igCategoryChart の軸間隔と重複の構成 + +## トピックの概要 + +### 目的 + +このトピックでは、`igCategoryChart`™ コントロール軸間隔および軸の重なりを構成する方法を説明します。 + +### 前提条件 + +このトピックを理解するためには、以下のトピックを理解しておく必要があります。 +- [チュートリアル](/igcategorychart-adding) + +このトピックでは、`igCategoryChart`™ コントロールをページに追加し、データにバインドする方法を紹介します。 + +## 軸間隔 + +### 概要 + +`igCategoryChart`™ コントロールの軸間隔機能は、チャート シリーズ間の間隔を設定できます。 + +### プロパティ + +プロパティ名: `xAxisGap`。 + +ウィジェット初期化時またはウィジェット初期後にオプションとして設定できます。 +```javascript +$("#chart").igCategoryChart("option", "xAxisGap", 0.5); +``` + +プロパティ値は、0 と 1 の間の float 値である必要があります。値は、シリーズ間で利用可能なピクセル数から間隔の相対幅を表します。0 - シリーズ間に間隔は描画されません。 1 - シリーズ間に利用可能な最大の間隔が描画されます。 + +たとえば、`xAxisGap` 0.5 は間隔を描画するための利用可能なスペースの半分です。
    +![](../../../images/images/categorychart-axis-gap-00.png) + +### 例 + +以下は、`igCategoryChart` を `xAxisGap` `0.5`で初期化するコードです。 + +```javascript +$("#chart").igCategoryChart({ + title: "Countries population", + xAxisTitle: "Countries", + yAxisTitle: "Millions of people", + dataSource: data, + chartType: "column", + xAxisGap: 0.5 +}); +``` + +## 軸の重複 + +### 概要 + +`igCategoryChart`™ コントロールの軸の重複機能は、描画されたカテゴリの重なりを設定できます。 + +### プロパティ + +プロパティ名: `xAxisOverlap`。 + +ウィジェット初期化時またはウィジェット初期後にオプションとして設定できます。 +```javascript +$("#chart").igCategoryChart("option", "xAxisOverlap", 0.5); +``` + +プロパティ値は、-1 と 1 の間の float 値である必要があります。値は、各シリーズに利用可能なピクセル数から相対する重複を示します。 + +負の値 (-1 以上): カテゴリは互いに生成する間隔によって引き離されます。 + +正の数 (1 以下): カテゴリが互いに重なります。値 1 は、互いのチャート上にカテゴリを描画します。 + +たとえば、`xAxisOverlap` 0.5 は間隔を描画するための利用可能なスペースの半分です。
    +![](../../../images/images/categorychart-axis-overlap-00.png) + +`xAxisOverlap` -1 はカテゴリが互いにできるだけ離されます。
    +![](../../../images/images/categorychart-axis-overlap-01.png) + +### 例 + +以下は、`igCategoryChart` を `xAxisGap` `0.5`で初期化するコードです。 + +```javascript +$("#chart").igCategoryChart({ + title: "Countries population", + xAxisTitle: "Countries", + yAxisTitle: "Millions of people", + dataSource: data, + chartType: "column", + xAxisOverlap: 0.5 +}); +``` + +## 関連トピック: + +- [チュートリアル](/igcategorychart-adding) + +- [データ バインド](/categorychart-binding-to-data) diff --git a/docs/jquery/src/content/ja/topics/controls/igcategorychart/axes/categorychart-configuring-axis-range.mdx b/docs/jquery/src/content/ja/topics/controls/igcategorychart/axes/categorychart-configuring-axis-range.mdx new file mode 100644 index 0000000000..3e24b408d7 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igcategorychart/axes/categorychart-configuring-axis-range.mdx @@ -0,0 +1,52 @@ +--- +title: "軸の範囲" +slug: categorychart-configuring-axis-range +--- + +# 軸の範囲 + +igCategoryChart™ コントロールで、数値軸の範囲は軸の最初と終わり、つまりデータの最小値と最大値の数値の差です。範囲の最小値は、軸の最小値です。範囲の最大値は、軸の最大値です。 + +### このトピックの内容 + +このトピックは、以下のセクションで構成されます。 + +- [概要](#overview) +- [コード スニペット](#codesnippet) +- [関連トピック](#relatedtopics) + +### 概要 +デフォルトで、igDataChart コントロールは、チャート プロット領域を最大化するために、最小データ ポイントおよび最大データ ポイントに基づいて軸の範囲の最小値と最大値を計算します。軸の最小値と最大値の自動計算は、データ ポイントのセットに適切でない場合があります。たとえば、データの最小値が 850 の場合、軸の `yAxisMinimumValue` プロパティを使用して軸の最小値を 800 に設定したい場合があります。これにより、軸の最小値とデータ ポイントの最小値の間に 50 のスペース値ができることになります。軸の `yAxisMaximumValue` プロパティを使用すれば軸の最大値とデータ ポイントの最大値にも同様のことが適用できます。 + +### コード スニペット +以下のサンプル コードは、y 軸で軸の範囲を変更する方法を示します。 + +*HTML の場合:* + +```html +$(function () { + $("#chart").igCategoryChart({ + dataSource: data, + yAxisMinimumValue: -200, + yAxisMaximumValue: 1000 + }); + }); +``` + +![](../../../images/images/categorychart-configuring-axis-ranges-01.png) + +### 関連トピック: + +- [igCategoryChart の追加](/igcategorychart-adding) + +- [データ バインド](/categorychart-binding-to-data) + +- [軸間隔と重複の構成](/categorychart-configuring-axis-gap-and-overlap) + +- [軸ラベルの構成](igcategorychart-axis-labels.html) + +- [軸間隔の構成](/igcategorychart-axis-intervals) + +- [軸目盛りの構成](/igcategorychart-axis-tickmarks) + +- [軸タイトルの構成](/categorychart-configuring-axis-titles) diff --git a/docs/jquery/src/content/ja/topics/controls/igcategorychart/axes/categorychart-configuring-axis-titles.mdx b/docs/jquery/src/content/ja/topics/controls/igcategorychart/axes/categorychart-configuring-axis-titles.mdx new file mode 100644 index 0000000000..46f116ab45 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igcategorychart/axes/categorychart-configuring-axis-titles.mdx @@ -0,0 +1,70 @@ +--- +title: "軸タイトル" +slug: categorychart-configuring-axis-titles +--- + +# 軸タイトル +igCategoryChart コントロールの軸タイトル機能は、チャートの x および y 軸に情報を追加できます。 + +### このトピックの内容 + +このトピックは、以下のセクションで構成されます。 + +- [プロパティの設定](#propertysettings) +- [コード スニペット](#codesnippet) +- [関連トピック](#relatedtopics) + +### プロパティの設定 +カテゴリ チャートは、x 軸および y 軸のタイトルのフォント スタイル、マージン、配置などを変更してルックアンドフィールをカスタマイズできます。以下のプロパティを使用します。 + +プロパティ名|プロパティ タイプ|説明 +---|---|--- +`xAxisTitle`,`yAxisTitle`|string|x 軸と y 軸のタイトルに使用するテキストを決定します。 +`xAxisTitleTextColor`, `yAxisTitleTextColor`|string|x 軸と y 軸のタイトルの色を決定します。 +`xAxisTitleTextStyle`,`yAxisTitleTextStyle`|string|x 軸と y 軸のタイトルに適用するフォント スタイルを決定します。 +`xAxisTitleAngle`,`yAxisTitleAngle`|number|x 軸と y 軸のタイトルの回転角度を決定します。 +`xAxisTitleAlignment`, `yAxisTitleAlignment`|enumeration|x 軸の水平方向の配置と y 軸の垂直報告の配置を決定します。 +`xAxisTitleExtent`,`yAxisTitleExtent`|number|x 軸と y 軸のタイトルに適用する範囲を決定します。 +`xAxisTitleMargin`,`yAxisTitleMargin`|number|x 軸と y 軸のタイトルに適用するマージンを決定します。 +`xAxisTitleTopMargin`,`yAxisTitleTopMargin`|number|x 軸と y 軸のタイトルの上に適用するマージンを決定します。 +`xAxisTitleRightMargin`,`yAxisTitleRightMargin`|number|x 軸と y 軸のタイトルの右に適用するマージンを決定します。 +`xAxisTitleBottomMargin`,`yAxisTitleBottomMargin`|number|x 軸と y 軸のタイトルの下に適用するマージンを決定します。 +`xAxisTitleLeftMargin`,`yAxisTitleLeftMargin`|number|x 軸と y 軸のタイトルの左に適用するマージンを決定します。 + +### コード スニペット +以下のコード例は、x 軸と y 軸のタイトルをカスタマイズします。 + +*HTML の場合:* + +```html +$(function () { + $("#chart").igCategoryChart({ + dataSource: data, + chartType: "auto", + xAxisTitle: "Country", + xAxisTitleTextColor: "blue", + xAxisTitleTextStyle: "20pt Times New Roman|Georgia|Serif", + yAxisTitle: "Millions of People", + yAxisTitleAngle: 90, + yAxisTitleTextColor: "red" + }); +}); +``` + +![](../../../images/images/categorychart-configuring-axis-title-01.png) + +## 関連トピック: + +- [チュートリアル](/igcategorychart-adding) + +- [データ バインド](/categorychart-binding-to-data) + +- [軸間隔と重複の構成](/categorychart-configuring-axis-gap-and-overlap) + +- [軸ラベルの構成](igcategorychart-axis-labels.html) + +- [軸間隔の構成](/igcategorychart-axis-intervals) + +- [軸範囲の構成](/categorychart-configuring-axis-range) + +- [軸目盛りの構成](/igcategorychart-axis-tickmarks) diff --git a/docs/jquery/src/content/ja/topics/controls/igcategorychart/categorychart-accessibility-compliance.mdx b/docs/jquery/src/content/ja/topics/controls/igcategorychart/categorychart-accessibility-compliance.mdx new file mode 100644 index 0000000000..b0f783a75a --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igcategorychart/categorychart-accessibility-compliance.mdx @@ -0,0 +1,63 @@ +--- +title: "アクセシビリティの遵守 (igCategoryChart)" +slug: igcategorychart-accessibility-compliance +--- + +# アクセシビリティの遵守 (igCategoryChart) + + + +##トピックの概要 + + +### 目的 + +このトピックでは、`igCategoryChart`™ のアクセシビリティ機能について説明し、チャートを含むページのアクセシビリティ準拠を実現する方法についての助言を示します。 + +### 前提条件 + +このトピックを理解するためには、以下のトピックを理解しておく必要があります。 + + +- [**igCategoryChart の概要**](/categorychart-overview): このトピックでは、`igCategoryChart` コントロールについての概念情報を提供します。これには、その主な機能、チャートとユーザー機能を使用するための最低要件が含まれます。 + +- [**igCategoryChart の追加**](/igcategorychart-adding): このトピックでは、`igCategoryChart` をコントロールを作成して追加し、データにバインドする方法を紹介します。 + + + + + +##アクセシビリティ準拠のリファレンス + + +### 概要 + +すべての {environment:ProductName}™ コントロールおよびコンポーネントは、1973 年リハビリテーション法第 508 条第 1194 部 22 条を遵守しています。表 1 には、コントロールに関連する第 1194 部 22 条の特定の規則が記載されています。また、`igCategoryChart` コントロールが各規則を遵守する方法の詳細も含まれています。 + +各アクセシビリティ規則の要件を満たすために、場合によっては、コントロールを操作して特定のプロパティを設定する必要がありますが、それ以外の場合は、コントロール自身がこの作業を行います。 + +>**注:** jQuery コントロールはクライアント専用のため、一部の規則はサポートされず、制限とされています。 + +#### アクセシビリティ準拠のリファレンスの概要 + +以下の表は、igCategoryChart のアクセシビリティ順守機能についてまとめたものです。 + + +| 規則 | 規則内容 | 準拠方法 | +| --- | --- | --- | +| (a) | あらゆる非テキスト要素に対してテキスト相当物を提供するものとします (「alt」、「longdesc」などを介して、または要素コンテンツで)。 | igCategoryChart はグラフィック専用のコントロールであるため、テーブルまたはチャート データを使用した igGrid™ コンポーネントにチャートを変換することで、障害を持っている人のために代替ビューを提供することが考えられます。そうすることで、読み上げソフトウェアにより、チャートから情報を得ることができます。 | +| (b) | マルチメディア プレゼンテーションに相当する代替物をプレゼンテーションと同期するものとします。 | 記録に準拠するための代替手段については、(a) の注を参照してください。 | +| (c) | 色によって伝達されるすべての情報が色を使用しなくても理解できるように (たとえば、コンテキストやマークアップ) Web ページを設計するものとします。 | igCategoryChart のスタイルとテーマの設定機能を使用して、チャートの配色を制御し、適切な色を提供できます。 | +| (d)* | 関連付けられたスタイル シートがなくても読めるようにドキュメントを構成するものとします。 | コントロールのマークアップは、クライアント側のコントロールであり、CSS の規則に依存するため、関連付けられたスタイル シートがないと読み取りできません。記録に準拠するための代替手段については、(a) の注を参照してください。 | + + +\* - コントロールの制限 + + + +## 関連コンテンツ + + +このトピックに関連する追加情報については、以下のトピックを参照してください。 + +- [**アクセシビリティ準拠**](/accessibility-compliance): すべての {environment:ProductName} コントロールのアクセシビリティ準拠のための参照情報を提供します。 diff --git a/docs/jquery/src/content/ja/topics/controls/igcategorychart/categorychart-api-overivew.mdx b/docs/jquery/src/content/ja/topics/controls/igcategorychart/categorychart-api-overivew.mdx new file mode 100644 index 0000000000..aa6907c413 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igcategorychart/categorychart-api-overivew.mdx @@ -0,0 +1,42 @@ +--- +title: "jQuery および MVC API リファレンス リンク (igCategoryChart)" +slug: categorychart-api-overview +--- + +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# jQuery および MVC API リファレンス リンク (igCategoryChart) + + +## トピックの概要 +### 目的 + +このトピックは、` igCategoryChart`™ の jQuery および {environment:ProductNameMVC} クラスのたえの API マニュアルへのリンクを提供します。 + +### 前提条件 + +このトピックを理解するためには、以下のトピックを理解しておく必要があります。 + + +- [igCategoryChart の概要](/categorychart-overview): このトピックでは、igCategoryChart コントロールについての概念情報を提供します。これには、その主な機能、チャートとユーザー機能を使用するための最低要件が含まれます。 + +- [igCategoryChart の追加](/igcategorychart-adding): このトピックでは、`igCategoryChart` をコントロールを作成して追加し、データにバインドする方法を紹介します。 + +##igCategoryChart API リファレンス + +### 概要 + +`igCategoryChart` は、{environment:ProductNameMVC} 付きの jQuery UI ウィジェットとして設計されています。それぞれの API についての詳細は、以下に示された API マニュアルへのリンク先を参照してください。 + +### API マニュアル参照の概要 + +- : マニュアルには、コントロールの概要、コードを含むオプション、イベント、メソッドの一覧が含まれています。 + +- [igCategoryChart MVC API](Infragistics.Web.Mvc~Infragistics.Web.Mvc.categorychart`1.html) : マニュアルには、 CategoryChart クラス定義とそのメンバーの全リストが含まれています。 + +## 関連コンテンツ + +このトピックに関連する追加情報については、以下のトピックを参照してください。 + + +- [igCategoryChart とデータのバインド](/categorychart-binding-to-data): このトピックでは、`igCategoryChart` コントロールを各種データ ソースへバインドする方法を説明します。 diff --git a/docs/jquery/src/content/ja/topics/controls/igcategorychart/categorychart-binding-to-data.mdx b/docs/jquery/src/content/ja/topics/controls/igcategorychart/categorychart-binding-to-data.mdx new file mode 100644 index 0000000000..3361699cad --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igcategorychart/categorychart-binding-to-data.mdx @@ -0,0 +1,193 @@ +--- +title: "データ バインド" +slug: categorychart-binding-to-data +--- + +# データ バインド + +### トピックの概要 + +このトピックは、フラットと階層データを igCategoryChart™ コントロールにバインドする方法を説明します。各セクションの最後で、サンプルの全コードを提供します。 + +### 目的 +以下の手順は、igCategoryChart コントロールをデータ コレクションにバインドする方法を示します。igCategoryChart は JavaScript 配列にバインドできます。ネスト コレクションもサポートされます。 +このトピックでは 2 つのデータ コレクション (フラットおよび階層) を定義し、カテゴリ チャート コントロールをアプリケーションに追加し、そのコントロールのデータソースを指定データ コレクションのインスタンスにバインドします。 + + +### このトピックの内容 +このトピックは、以下のセクションで構成されます。 +このトピックは、以下のセクションで構成されます。 + +- [JavaScript 配列のバインド](#BindingaJavaScriptArray) + - [概要](#Introduction) + - [前提条件](#Prerequisites) + - [プレビュー](#Preview) + - [手順](#Steps) +- [階層 JavaScript 配列のバインド](#BindingaHierarchicalJavaScriptArray) + - [概要](#HIntroduction) + - [前提条件](#HPrerequisites) + - [プレビュー](#HPreview) + - [手順](#HSteps) +- [関連トピック](#relatedcontent) + +### JavaScript 配列へのバインド + +#### 概要 +ここでは、igCategoryChart コントロールを JavaScript データ配列にバインドする際の手順を示します。 + +#### 前提条件 +この手順を実行するには、以下が必要です。 + +- HTML5 Web ページ +- Web サイトまたは Web アプリケーション プロジェクトに追加された、必要なすべての JavaScript および CSS ファイル。 + +[igCategoryChart の追加](/igcategorychart-adding) インスタンスの作成および構成の詳細については、「igDataChart の追加」を参照してください。 + +#### プレビュー + + +![](../../images/images/categorychart-data-binding-01.png) + + +#### 手順 +ここでは、igCategoryChart コントロールを JavaScript データ配列にバインドする際の手順を示します。 + +**データ配列の定義** + +*JavaScript の場合:* +``` + +``` + +**igCategoryChart コントロールを追加して構成します。** + +チャートの div 要素を Web ページに追加します。Web ページの body 部分に igCategoryChart チャート コントロール用の div 要素を追加します。 + +*HTML の場合:* +``` + + … +
    +
    + … + +``` + +**igCategoryChart コントロールのインスタンスを作成し、データ ソースを構成します。** + +これを行うには、1 つ前の手順で定義したデータ配列を igCategoryChart コントロールの dataSource オプションに割り当てます。 + +*HTML の場合:* +``` + +``` + +### 階層 JavaScript 配列にバインド + +#### 概要 +ここでは、igCategoryChart コントロールをセミネスト階層 JavaScript データ配列にバインドする際の手順を示します。 + +#### 前提条件 + +この手順を実行するには、以下が必要です。 +- HTML5 Web ページ +- Web サイトまたは Web アプリケーション プロジェクトに追加された、必要なすべての JavaScript および CSS ファイル。 + +[igCategoryChart の追加](/igcategorychart-adding) インスタンスの作成および構成の詳細については、「igDataChart の追加」を参照してください。 + +#### プレビュー + + +![](../../images/images/categorychart-data-binding-02.png) + + +#### 手順 +ここでは、igCategoryChart コントロールを JavaScript データ配列にバインドする際の手順を示します。 + +**データ配列の定義** + +*JavaScript の場合:* +``` + + +``` + +**igCategoryChart コントロールを追加して構成します。** + +チャートの div 要素を Web ページに追加します。Web ページの body 部分に igCategoryChart チャート コントロール用の div 要素を追加します。 + +*HTML の場合:* +``` + + … +
    +
    + … + +``` + +**igCategoryChart コントロールのインスタンスを作成し、データ ソースと xAxis ラベルを構成します。** + +これを行うには、1 つ前の手順で定義したデータ配列を igCategoryChart コントロールの dataSource オプションに割り当てます。 + +*HTML の場合:* +``` + + +``` + +## 関連トピック: + +- [チュートリアル](/igcategorychart-adding) + +- [軸](/categorychart-axes) diff --git a/docs/jquery/src/content/ja/topics/controls/igcategorychart/categorychart-chart-requirements.mdx b/docs/jquery/src/content/ja/topics/controls/igcategorychart/categorychart-chart-requirements.mdx new file mode 100644 index 0000000000..7bf3996281 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igcategorychart/categorychart-chart-requirements.mdx @@ -0,0 +1,178 @@ +--- +title: "チャート要件" +slug: categorychart-chart-requirements +--- + +# チャート要件 + +## 概要 + +`igCategoryChart` を使用中は、データ可視化を +このコントロールは、割り当てられたデータを可視化するインテリジェントな機能があります。ただし、いくつかのルールがあります。 + +このトピックは、チャートに前にデータを割り当てる前に適用する必要のあるルールについて説明します。 + +## データ ソース要件 + +チャートは提供された `data` をオブジェクトのコレクションとして処理しようとします。 + +`igCategoryChart` 初期化コードの例 +```javascript +$("#chart").igCategoryChart({ + title: "Countries population", + subTitle: "1995 vs 2005", + xAxisTitle: "Countries", + yAxisTitle: "Population", + chartType: "auto", + dataSource: data +}); +``` + +### オブジェクトの配列 + +`igCategoryChart` コントロールが認識し、オブジェクト配列と動作する最も一般的なデータソースはオブジェクト配列です。 +データ バインド ルーチン時にデータソースを分析する際に、チャートが以下の属性をデータから抽出を複数回試行して自動的にチャートに表示します。 + +- シリーズ タイトル - 各オブジェクトの個別プロパティから抽出されます。データ オブジェクトに個別のプロパティがない場合、最初の文字列プロパティはシリーズ タイトルに割り当てられます。個別プロパティ タイプは以下の順序で分析されます。 +1. string +2. date +3. number + +- カテゴリ スケール - 数値プロパティがカテゴリに割り当てられ、Y 軸の最大値および最小値を選択するために使用されます。 + +例: +```javascript +var data = [ + { "Label": "1995", "Brazil": 161, "Indonesia": 197, "United States": 266, "India": 920, "China": 1297 }, + { "Label": "2005", "Brazil": 186, "Indonesia": 229, "United States": 295, "India": 1090, "China": 1216 }, + { "Label": "2015", "Brazil": 204, "Indonesia": 256, "United States": 322, "India": 1251, "China": 1361 }, + { "Label": "2025", "Brazil": 218, "Indonesia": 277, "United States": 351, "India": 1396, "China": 1394 } +]; +``` + +> **注:** チャートは `yAxisMinimumValue` に `0` 以外を割り当てる場合があります。このオプションを明示的に値に設定した場合、この動作を防止します。 + +### 配列の配列 + +`igCategoryChart` コントロールは、配列内の配列 (多次元データ) でオブジェクトを認識できます。 +上記のデータを検索する条件は、この場合にも当てはまります。 + +例: +```javascript +var data = [ + [ + [ + { "AmountSold": 2, "Item": "Hat" }, + { "AmountSold": 5, "Item": "Jacket" }, + { "AmountSold": 3, "Item": "Shoes" } + ] + ], + [ + [ + { "AmountSold": 5, "Item": "Hat" }, + { "AmountSold": 2, "Item": "Jacket" }, + { "AmountSold": 1.9, "Item": "Shoes" } + ] + ], + [ + [ + { "AmountSold": 4, "Item": "Hat" }, + { "AmountSold": 7, "Item": "Jacket" }, + { "AmountSold": 3, "Item": "Shoes" } + ] + ] +]; +``` + +### データの目的 + +`igCategoryChart` によってデータ認識のロジックに影響を与えるには、`__dataIntents` というサブオブジェクトをデータ オブジェクトとそれらの役割の説明のプロパティに対応するメタデータのあるデータに割り当てることができます。 + +例: +```javascript +var data = [ + { + id:0, + title:"Shoes", + another_title: "Fancy shoes", + sold:5 + }, + { + id:1, + title:"Hats", + another_title: "Fancy hats", + sold:2 + }, + { + id:2, + title:"Gloves", + another_title: "Fancy gloves", + sold:3 + } +]; +data.__dataIntents = { + id: ["DontPlot"], + another_title: ["AxisLabelValue"] +}; +``` + +サポートされる全メタデータ値の一覧: + +メタデータ値|アプリケーション説明 +--|-- +PrimarySeriesValue|主なカテゴリ シリーズ値として使用する値を示します。 +SeriesX|散布 X 値に使用する値を示します。 +SeriesY|散布 Y 値に使用する値を示します。 +SeriesFill|バブル色値に使用する値を示します。 +SeriesLabel|バブル ラベル値に使用する値を示します。 +SeriesRadius|バブルの半径値に使用する値を示します。 +SeriesAngle|極座標の角度値に使用する値を示します。 +SeriesShape|図形の辺の値に使用する値を示します。 +SeriesValue|第二のシリーズ値に使用する値を示します。 +SeriesTitle|シリーズ タイトル値に使用する値を示します。 +OpenSeriesValue|シリーズ開始値に使用する値を示します。 +HighSeriesValue|シリーズ高値に使用する値を示します。 +LowSeriesValue|シリーズ安値に使用する値を示します。 +CloseSeriesValue|シリーズ終値に使用する値を示します。 +VolumeSeriesValue|出来高値に使用する値を示します。 +AxisLabelValue|軸ラベル値に使用する値を示します。 +AxisDateValue|軸データ値に使用する値を示します。 +DontPlot|データ シリーズをインファーするときに考慮しない値を示します。 + +## 制限 + +プレーン JSON オブジェクトおよび JSON サブオブジェクトのフォームのディクショナリは現在サポートされていません。　 + +サポートされないデータの例: +```javascript +var data = { + "Shoes": 5, + "Hats": 2, + "Gloves": 1 +}; +``` + +```javascript +var data = { + "Shoes": { + "2014":5, + "2015":7, + "2016":9 + }, + "Hats": { + "2014":2, + "2015":1, + "2016":0 + }, + "Gloves": { + "2014":2, + "2015":4, + "2016":3 + } +}; +``` +値の配列 (すべてのディメンションで) も `igCategoryChart` で現在サポートされているデータソースの範囲外です。 + +```javascript +var data = [[100, 200], [200, 300], [300, 400], [400, 500], [50, 100]]; +``` diff --git a/docs/jquery/src/content/ja/topics/controls/igcategorychart/categorychart-chart-title-subtitle.mdx b/docs/jquery/src/content/ja/topics/controls/igcategorychart/categorychart-chart-title-subtitle.mdx new file mode 100644 index 0000000000..635dd077f6 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igcategorychart/categorychart-chart-title-subtitle.mdx @@ -0,0 +1,69 @@ +--- +title: "チャートのタイトルとサブタイトル" +slug: categorychart-chart-title-subtitle +--- + +# チャートのタイトルとサブタイトル + +igCategoryChart コントロールのタイトルおよびサブタイトルの機能は、igChart コントロールの上セクションに情報を追加できます。 + +チャート コントロールにタイトルまたはサブタイトルを追加すると、タイトルとサブタイトルの情報に応じて、チャートの内容が自動的にサイズ変更されます。 +### このトピックの内容 + +このトピックは、以下のセクションで構成されます。 + +- [プロパティの設定](#propertysettings) +- [コード スニペット](#codesnippet) +- [関連トピック](#relatedtopics) + +### プロパティの設定 +カテゴリ チャートは、チャートのタイトルとサブタイトルのフォント スタイル、マージン、配置などを変更してルックアンドフィールをカスタマイズできます。以下のプロパティを使用します。 + +プロパティ名|プロパティ タイプ|説明 +---|---|--- +`title`|string|タイトルに使用するテキストを決定します。 +`titleAlignment`|enumeration|タイトルの配置を決定します。 +`titleTextColor`|string|タイトルの色を決定します。 +`titleTextStyle`|string|タイトルに適用するフォント スタイルを決定します。 +`titleTopMargin`|number|タイトルの上に適用するマージンを決定します。 +`titleRightMargin`|number|タイトルの右に適用するマージンを決定します。 +`titleBottomMargin`|number|タイトルの下に適用するマージンを決定します。 +`titleLeftMargin`|number|タイトルの左に適用するマージンを決定します。 +`subtitle`|string|サブタイトルに使用するテキストを決定します。 +`subtitleTextColor`|string|サブタイトルの色を決定します。 +`subtitleTextStyle`|string|サブタイトルに適用するフォント スタイルを決定します。 +`subtitleAlignment`|enumeration|サブタイトルの配置を決定します。 +`subtitleTopMargin`|number|サブタイトルの上に適用するマージンを決定します。 +`subtitleRightMargin`|number|サブタイトルの右に適用するマージンを決定します。 +`subtitleBottomMargin`|number|サブタイトルの下に適用するマージンを決定します。 +`subtitleLeftMargin`|number|サブタイトルの左に適用するマージンを決定します。 + +### コード スニペット +以下のコード例は、タイトルとサブタイトルをカスタマイズします。 + +*HTML の場合:* + +```html +$(function () { + $("#chart").igCategoryChart({ + dataSource: data, + chartType: "auto", + xAxisTitle: "Country", + yAxisTitle: "Millions of People", + yAxisTitleAngle: 90, + title: "Energy Use Per Country", + subtitle: "Results over a two year period", + titleTextColor: "blue", + titleTextStyle: "20pt Times New Roman|Georgia|Serif", + titleAlignment: "center", + }); +}); +``` + +![](../../images/images/categorychart-configuring-title-01.png) + +## 関連トピック: + +- [igCategoryChart の追加](/igcategorychart-adding) + +- [データ バインド](/categorychart-binding-to-data) diff --git a/docs/jquery/src/content/ja/topics/controls/igcategorychart/categorychart-chart-types.mdx b/docs/jquery/src/content/ja/topics/controls/igcategorychart/categorychart-chart-types.mdx new file mode 100644 index 0000000000..d967dab6d4 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igcategorychart/categorychart-chart-types.mdx @@ -0,0 +1,37 @@ +--- +title: "チャート タイプ" +slug: categorychart-chart-types +--- + +# チャート タイプ + +## 概要 + +カテゴリ チャートは、データ チャートと比べて描画タイプがよりシンプルです。 +データの表示方法については、チャートの `chartType` プロパティを設定します。 +以下は、カテゴリ チャートでサポートされるすべてのタイプです。 + +特別なケースにプロパティの`auto` 設定があります。`auto` を使用した場合、チャートがデータを分析し、最も適したチャート タイプを割り当てます。 + +プロパティのデフォルト値は `line`。 + +## サポートされるチャート タイプ + +プロパティ値|説明|例 +---|---|--- +`line`|各データポイントでマーカーのカテゴリ折れ線シリーズを指定します。|![](../../images/images/chart-type-line.png) +`area`|カテゴリ エリア シリーズを指定します。|![](../../images/images/chart-type-area.png) +`column`|各データポイントで垂直の長方形のカテゴリ折れ線シリーズを指定します。|![](../../images/images/chart-type-column.png) +`point`|各データポイントでマーカーのカテゴリ ポイント チャートを指定します。|![](../../images/images/chart-type-point.png) +`stepLine`|ステップ折れ線チャートを指定します。|![](../../images/images/chart-type-stepline.png) +`stepArea`|ステップ エリア チャートを指定します。|![](../../images/images/chart-type-steparea.png) +`spline`|各データポイントでマーカーのカテゴリ スプライン シリーズを指定します。|![](../../images/images/chart-type-spline.png) +`splineArea`|カテゴリ スプライン エリア シリーズを指定します。|![](../../images/images/chart-type-splinearea.png) +`waterfall`|カテゴリ ウォーターフォール チャートを指定します。|![](../../images/images/chart-type-waterfall.png) +`auto`|データ アダプターからの提案に基づいてチャート タイプの自動選択を指定します。 + +## 関連トピック + +- [チュートリアル](/igcategorychart-adding) + +- [チャート タイプの構成](/categorychart-configuring-chart-types) diff --git a/docs/jquery/src/content/ja/topics/controls/igcategorychart/categorychart-configuring-chart-markers.mdx b/docs/jquery/src/content/ja/topics/controls/igcategorychart/categorychart-configuring-chart-markers.mdx new file mode 100644 index 0000000000..1debecd924 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igcategorychart/categorychart-configuring-chart-markers.mdx @@ -0,0 +1,84 @@ +--- +title: "チャート マーカーの構成" +slug: categorychart-configuring-chart-markers +--- + +# チャート マーカーの構成 + +マーカーは、igCategoryChart™ コントロールのプロット領域のデータ ポイント値を表示する視覚的要素です。マーカーは、値が主グリッド線と副グリッド線の間にある場合に、指定したデータ ポイントの値をただちに識別できるようユーザーをサポートをします。 +このセクションは、igCategoryChart コントロールのマーカーでの作業に関するタスクベースの手順についての役立つ情報を提供します。 + +- [マーカーの外観](#markerappearance) +- [マーカー タイプ](#markertypes) +- [マーカー ブラシとアウトライン](#markerbrushesandoutlines) + +チャート マーカーの外観は、igCategoryChart クラスのマーカー プロパティで管理できます。 + +#### マーカーの外観 +以下の表は、マーカーのすべての外観プロパティの一覧です。 + + +プロパティ名|プロパティ タイプ|説明 +---|---|--- +`markerTypes`| MarkerType |チャートのすべてのシリーズで表示されるマーカーのタイプを決定します。 +`markerBrushes` |Brush |マーカーの塗りつぶし色を決定します。 +`markerOutlines`|Brush|マーカーのアウトライン色を決定します。 + + + +#### マーカー タイプ +プロパティ名|プロパティ タイプ|説明 +---|---|--- +`circleMarker`|MarkerType|円マーカーのタイプを表示します。 +`diamondMarker`|MarkerType|ダイアモンド マーカーのタイプを表示します。 +`hexagonMarker`|MarkerType|六角形マーカーのタイプを表示します。 +`hexagramMarker`|MarkerType|六線星形マーカーのタイプを表示します。 +`pentagramMarker`|MarkerType|星形五角形マーカーのタイプを表示します。 +`pentagonMarker`|MarkerType|五角形マーカーのタイプを表示します。 +`pyramidMarker`|MarkerType|ピラミッドマーカーのタイプを表示します。 +`squareMarker`|MarkerType|四角形マーカーのタイプを表示します。 +`tetragramMarker`|MarkerType|テトラグラム マーカーのタイプを表示します。 +`triangleMarker`|MarkerType|三角形マーカーのタイプを表示します。 + + +以下のコードは、igCategoryChart のマーカー タイプの変更方法を示します。 + +*HTML の場合:* + +```html +$(function () { + $(“chart1”).igCategoryChart({ + markerTypes: [“diamond, "circle”, "square"] + }); +}); +``` + +以下のスクリーンショットは、折れ線チャート タイプでダイアモンド マーカーを使用した igCategoryChart コントロールを示します。 + +![](../../images/images/categorychart-chart-markers-01.png) + + +#### マーカー ブラシとアウトライン + +以下のコード スニペットは、igCategoryChart の markerBrushes および markerOutlines の変更方法を示します。 + +*HTML の場合:* + +```html +$(function () { + $(“chart1”).igCategoryChart({ + markerBrushes: [“White”], + markerOutlines: [“Red”, “Orange”, “Green”] + }); +}); +``` + +以下のスクリーンショットは、折れ線チャート タイプでマーカーをカスタマイズした igCategoryChart コントロールを示します。 + +![](../../images/images/categorychart-chart-markers-02.png) + +## 関連トピック: + +- [igCategoryChart の追加](/igcategorychart-adding) + +- [データ バインド](/categorychart-binding-to-data) diff --git a/docs/jquery/src/content/ja/topics/controls/igcategorychart/categorychart-configuring-chart-types.mdx b/docs/jquery/src/content/ja/topics/controls/igcategorychart/categorychart-configuring-chart-types.mdx new file mode 100644 index 0000000000..feed8de168 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igcategorychart/categorychart-configuring-chart-types.mdx @@ -0,0 +1,67 @@ +--- +title: "チャート タイプの構成" +slug: categorychart-configuring-chart-types +--- + +# チャート タイプの構成 + +## チャート タイプの設定 + +[チャート タイプ](/categorychart-chart-types)トピックに説明されているとおり、チャートはプロパティを変更するだけでさまざまなチャートタイプを描画できます。 + +初期化時にチャート タイプを割り当てる方法: + +```javascript +$("#theChart").igCategoryChart({ + dataSource: data, + chartType: "spline" +}); +``` + +初期化後にチャート タイプを変更する方法: + +```javascript +$("#theChart").igCategoryChart("option", "chartType", "area"); +``` + +## プロパティ + +チャートの外観をカスタマイズには、多数のプロパティが用意されています。 + +プロパティ名|プロパティ タイプ|デフォルト値|説明 +---|---|---|--- +`brushes`|object|null|チャート シリーズの色設定に使用するブラシのパレットを取得または設定します。提供された値は、CSS 色文字列またはグラデーションを定義する JavaScript オブジェクトの配列である必要があります。最初の要素は、コレクションの補間モードを指定する RGB または HSV の文字列に設定するオプションがあります。 +`negativeBrushes`|object|null|チャート シリーズの色設定に使用するブラシのパレットを取得または設定します。提供された値は、CSS 色文字列またはグラデーションを定義する JavaScript オブジェクトの配列である必要があります。最初の要素は、コレクションの補間モードを指定する RGB または HSV の文字列に設定するオプションがあります。 +`outlines`|object|null|チャート シリーズのアウトラインに使用するブラシのパレットを取得または設定します。提供された値は、CSS 色文字列またはグラデーションを定義する JavaScript オブジェクトの配列である必要があります。最初の要素は、コレクションの補間モードを指定する RGB または HSV の文字列に設定するオプションがあります。 +`resolution`|number|1|このチャートのシリーズの描画解像度を取得または設定します。n = 解像度で、各 n 水平ピクセルのすべての項目を単一のデータポイントに結合します。解像度 = 0 の場合、すべてのデータポイントがグラフィッカル オブジェクトとして描画されます。チャートの解像度が高くなるとパフォーマンスが向上します。チャート シリーズの太さを取得または設定します。 +`thickness`|number|1|チャート シリーズの太さを取得または設定します。ChartType に基づいて、これは使用されるメイン ブラシ、またはアウトラインのみです。 +`xAxisGap`|number|0|X 軸の隣接カテゴリ間のスペースの量を取得または設定します。範囲 [0, inf] にサイレントで固定される間隔を取得または設定します。 +`xAxisOverlap`|number|0|X 軸の隣接カテゴリ間で重複する量を取得または設定します。範囲 [-1, inf] にサイレントで固定される重複を取得または設定します。 +`xAxisInverted`|bool|null|最初のデータ項目を左側ではなく右側に配置し、X 軸の方向を反転するかどうかを取得または設定します。 +`yAxisInverted`|bool|null|最小の数値を軸の下側ではなく上側に配置し、Y 軸の方向を反転を取得または設定します。 + +## 例 + +以下の例では上記で説明したプロパティのいくつかを使用します。 +構成オプションの詳細については、このトピックの最後にあるリンクをご利用ください。 + +```javascript +$("#theChart").igCategoryChart({ + dataSource: data, + chartType: "waterfall", + brushes: ["blue", "green"], + negativeBrushes: ["red", "yellow"], + outlines: ["black"], + thickness: 5 +}); +``` +ウェブページでコードを実行した結果です。 +![](../../images/images/chart-types-configure.png) + +## 関連トピック + +- [チュートリアル](/igcategorychart-adding) + +- [チャート タイプ](/categorychart-chart-types) + +- [軸の間隔と重複](/categorychart-configuring-axis-gap-and-overlap) diff --git a/docs/jquery/src/content/ja/topics/controls/igcategorychart/categorychart-datalegend.mdx b/docs/jquery/src/content/ja/topics/controls/igcategorychart/categorychart-datalegend.mdx new file mode 100644 index 0000000000..7feba89e8d --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igcategorychart/categorychart-datalegend.mdx @@ -0,0 +1,119 @@ +--- +title: "データ凡例" +--- +# データ凡例 + +`igDataLegend` は `Legend` のように機能するコンポーネントですが、シリーズの値の表示や、シリーズの行と値の列のフィルタリング、値のスタイルと書式を設定するための多くの構成プロパティを提供します。この凡例は、`igCategoryChart` のプロット領域内でマウスを移動すると更新され、ユーザーのマウス ポインターがプロット領域を離れたときに最後にホバーされたポイントを記憶する永続的な状態になります。このコンテンツは、3 種類の行と 4 種類の列のセットを使用して表示されます。 + +## データ凡例の行 + +`igDataLegend` の行には、ヘッダー行、シリーズ行、および集計行が含まれます。 + +ヘッダー行には、ホバーされたポイントの軸ラベルが表示され、`headerText` プロパティを使用して変更できます。 + +シリーズ行は、実際には、チャートにプロットされた各シリーズに対応する行のセットにすることができます。これらの行には、凡例バッジ、シリーズ タイトル、シリーズの実際の値 / 省略値、および指定されている場合は省略記号と単位が表示されます。 + +最後に、すべてのシリーズ値の合計を表示する集計行があります。デフォルトの集計タイトルは、凡例の `summaryTitleText` プロパティを使用して変更できます。また、`summaryType` プロパティを使用して、シリーズ値の合計、最小、最大、または平均を集計行に表示するかどうかをカスタマイズできます。 + +以下のコードス ニペットは、上記のプロパティを設定して、集計のカスタム タイトルとカスタム ヘッダーを持つ *Total* 集計タイプの `igDataLegend` を設定する方法を示しています。 + +**JavaScript の場合:** + +```js +$("#dataLegendContainer").igDataLegend({ + target: $("#chartContainer").igCategoryChart(), + headerText: "My Custom Data Legend Header", + summaryType: "total", + summaryTitleText: "Grand Total" +}); +``` + +## データ凡例の列 + +`igDataLegend` の列には、タイトル、ラベル、値、および単位の列が含まれます。チャートの各シリーズには、凡例の `includedColumns` または `excludedColumns` コレクションに応じて、ラベル、値、および単位の複数の列を含めることができます。 + +タイトル列には、チャートにプロットされたさまざまな `Series` の `title` プロパティに由来する凡例バッジとシリーズ タイトルが表示されます。 + +ラベルの列には、凡例の `includedColumns` または `excludedColumns` コレクション内のさまざまなプロパティパスの名前または省略形が表示されます。 + +値の列には、一連の値が省略形のテキストとして表示されます。このテキストは、`valueFormatAbbreviation` プロパティを使用してフォーマットでき、このプロパティを `Auto` または `Shared` に設定することで、すべての数値に同じ省略形を適用できます。または、ユーザーは `Independent`、`Kilo`、`Million` などの他の省略形を選択できます。省略値の精度は、最小桁数と最大桁数にそれぞれ `valueFormatMinFractions` と `valueFormatMaxFractions` を使用して制御されます。 + +単位の列には、省略記号や単位テキストが表示されます。これらは、`UnitText` プロパティを設定することで `igDataLegend` に設定できます。 + +以下のコード スニペットは、`unitText` と `igDataLegend` に設定された最小/最大の分数を示しています。 + +**JavaScript の場合:** + +```js +$("#dataLegendContainer").igDataLegend({ + target: $("#chartContainer").igCategoryChart(), + valueFormatMinFractions: 2, + valueFormatMaxFractions: 4, + unitsText: "K" +}); +``` + +## データ凡例のスタイル設定 + +`igDataLegend` は、各タイプの列をスタイル設定するためのプロパティを提供します。これらの各プロパティ名は、Title、Label、Value、Units で始まり、テキストの色、フォント、およびマージンのスタイルを設定できます。たとえば、これらのそれぞれのテキストの色を設定する場合は、`titleTextColor`、`labelTextColor`、`valueTextColor`、および `unitsTextColor` プロパティを設定します。 + +以下のコード スニペットは、上記のスタイル設定プロパティを設定する方法を示しています。 + +**JavaScript の場合:** + +```js +$("#dataLegendContainer").igDataLegend({ + target: $("#chartContainer").igCategoryChart(), + titleTextColor: "lightgray", + labelTextColor: "lightgray", + valueTextColor: "green", + unitsTextColor: "green", + unitsText: "K" +}); +``` + +## データ凡例値の書式設定 + +`igDataLegend` は、`valueFormatAbbreviation` プロパティを使用して、大きな数値の自動省略形を提供します。これにより、単位の列に kilo、million、billion などの乗数が追加されます。 + +`valueFormatMinFractions` および `valueFormatMaxFractions` を設定することにより、表示される小数桁数をカスタマイズできます。これにより、小数点以下に表示される最小桁数と最大桁数をそれぞれ決定できます。 + +以下のコード スニペットは、`igDataLegend` の最小分数と最大分数を設定する方法を示しています。 + +**JavaScript の場合:** + +```js +$("#dataLegendContainer").igDataLegend({ + target: $("#chartContainer").igCategoryChart(), + valueFormatMinFractions: 2, + valueFormatMaxFractions: 4 +}); +``` + +## データ凡例の値モード + +コントロールの `valueFormatMode` プロパティを変更することにより、`igDataLegend` 内の値のデフォルトの 10 進表示を通貨に変更することができます。`igDataLegend` は、その `valueFormatCulture` プロパティに対応するカルチャ タグを設定することにより、表示されている通貨記号のカルチャを変更する機能も公開します。 + +たとえば、以下のコード スニペットは、`valueFormatCulture` が "en-GB" に設定され、`valueFormatMode` が "Currency" に設定された `igDataLegend` を作成します。 + +**JavaScript の場合:** + +```js +$("#dataLegendContainer").igDataLegend({ + target: $("#chartContainer").igCategoryChart(), + valueFormatMode: "currency", + valueFormatCulture: "en-GB" +}); +``` + +## データ凡例のスタイル設定イベント + +`igDataLegend` には、対応する行を描画するときに発生する 5 つのイベントがあります。それらのイベントを、その使用目的とあわせて以下に示します: + +- `styleHeaderRow`: このイベントは、ヘッダー行を描画するときに 1 回発生します。 +- `styleSeriesRow`: このイベントは、シリーズの行ごとに 1 回発生し、シリーズの値の条件付きスタイル設定を可能にします。 +- `styleSeriesColumn`: このイベントは、シリーズ列ごとに 1 回発生します。これにより、チャート内のシリーズのさまざまな列の条件付きスタイルが可能になります。 +- `styleSummaryRow`: このイベントは、集計行を描画するときに 1 回発生します。 +- `styleSummaryColumn`: このイベントは、集計列を描画するときに 1 回発生します。 + +上記の各イベントは、引数として `DataLegendStylingRowEventArgs` パラメーターを公開します。これにより、各項目のテキスト、テキストの色、および行の全体的な可視性をカスタマイズできます。イベント引数は、イベント固有のプロパティも公開します。たとえば、`styleSeriesRow` イベントはシリーズごとに発生するため、イベント引数は、シリーズを表す行の、シリーズ インデックスとシリーズ タイトルを返します。 \ No newline at end of file diff --git a/docs/jquery/src/content/ja/topics/controls/igcategorychart/categorychart-overview.mdx b/docs/jquery/src/content/ja/topics/controls/igcategorychart/categorychart-overview.mdx new file mode 100644 index 0000000000..93602f0df1 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igcategorychart/categorychart-overview.mdx @@ -0,0 +1,38 @@ +--- +title: "概要" +slug: categorychart-overview +--- + +# 概要 + +### igCategoryChart について + +igCategoryChart は軽量で高パフォーマンスなチャートです。このチャートは、シンプルで直感的な API を使用したカテゴリ データの表示を簡単に構成できます。データ (コレクションまたはコレクションのコレクション) をバインドするだけで後の作業はチャートがすべて行います。 + +以下のスクリーンショットは、柱状チャートを表示したカテゴリ チャートです。 + +![](../../images/images/categorychart-configuring-title-01.png) + +スマート データ アダプターを使用して、データは分析されて適切なビジュアライゼーションが描画されます。たとえば `chartType` を `Auto` に設定した場合、大きなデータセットで折れ線チャートを描画する間、コントロールは小さなデータセットを提供して柱状チャートがプロットされるかどうかを決定します。 + +ただし、`chartType` を明示的に以下に設定してチャートタイプを指定することもできます。 + +- Line +- Area +- Column +- Point +- Spline +- SplineArea +- StepArea +- StepLine +- Waterfall + +その他のカテゴリ チャート コントロールの直感的な動作の例は、明示的にラベルを設定する必要がないことです。カテゴリ チャートは、提供したデータ内で最初の適切な文字列プロパティを使用し、ラベルに使用します。 + +コントロールは簡単に構成できるよう構築されており、エンジンとしてデータチャート コントロールを使用しています。つまり、高パフォーマンスでパワフルなデータ チャートの利点を備えています。カテゴリ チャートは、データチャート コントロールのパワフルで広範な機能を拡張できます。 + +*関連トピック:* + +- [チュートリアル](/igcategorychart-adding) + +- [データ バインド](/categorychart-binding-to-data) diff --git a/docs/jquery/src/content/ja/topics/controls/igcategorychart/categorychart-styling.mdx b/docs/jquery/src/content/ja/topics/controls/igcategorychart/categorychart-styling.mdx new file mode 100644 index 0000000000..be7b3dd1e5 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igcategorychart/categorychart-styling.mdx @@ -0,0 +1,296 @@ +--- +title: "igCategoryChart のスタイル設定" +slug: categorychart-styling +--- + +# igCategoryChart のスタイル設定 + + + +## トピックの概要 + + +### 目的 + +このトピックは、`igCategoryChart` コントロールにスタイルおよびテーマを適用する方法を紹介します。 + +### 前提条件 + +**概念** + +- カスケード スタイル シート +- リンクされた CCS ファイルの変更によるテーマの適用 + +**トピック** + +- [{environment:ProductName} のスタイル設定とテーマ設定](/deployment-guide-styling-and-theming): {environment:ProductName}™ ライブラリのスタイルとテーマの更新に関する概要とその手順を説明します。 + +**外部リソース** + + +- [jQuery UI](http://jqueryui.com/): jQuery UI ライブラリの概要 + +- [jQuery UI のテーマ設定](http://docs.jquery.com/UI/Theming): jQuery UI ライブラリでのテーマの使用に関する情報を提供します。 + +- [jQuery UI CSS Framework](http://docs.jquery.com/UI/Theming/API): jQuery UI Styling Framework に関する情報を提供します。 + +### このトピックの構成 + +このトピックは、以下のセクションで構成されます。 + +- [概要](#topic-introduction) +- [テーマの概要](#themes-summary) +- [必要なカスケード スタイル シート (CSS)](#required-css) + - [必要な CSS の概要](#required-css-summary) + - [必要な CSS コード: HTML](#required-css-html) + - [必要な CSS コード: ASPX](#required-css-aspx) +- [チャート スタイル参照](#chart-style-reference) +- [テーマを使用したチャート固有の視覚要素の変更](#modify-chart-specific) + - [概要](#modify-chart-introduction) + - [概要](#overview) + - [手順](#steps) +- [関連コンテンツ](#related-content) + - [トピック](#topics) + - [リソース](#resources) + + + +## 概要 + + +### テーマの紹介 + +`igCategoryChart` は、スタイルおよびテーマを適用するために jQuery UI CSS Framework を使用します。特に指定しない限り、`igCategoryChart` は、デフォルトの jQuery UI テーマとして標準装備されている IG Theme を使用します。さらに、IG テーマにはその他のチャート固有のスタイルがいくつかあります。つまり、チャートの外観をカスタマイズするには、一般的な jQuery UI テーマでは十分ではありません。データ シリーズや軸などチャート固有の要素を変更するその他の style クラスを提供する必要があります。 + +テーマのカスタマイズには、ThemeRoller ツールを使用できます。この jQuery UI ツールにより jQuery UI ウィジェットと互換性のあるカスタム テーマを簡単に作成できるようになります。数々のビルド済みテーマをご自分の Web サイトにダウンロードして使用できます。`igCategoryChart` コントロールは ThemeRoller テーマの使用をサポートしています。 + +{environment:ProductName} ライブラリでテーマを使用する方法の詳細については、「[{environment:ProductName} のスタイル設定とテーマ設定](/deployment-guide-styling-and-theming)」トピックをご覧ください。 + +注: {environment:ProductName} のベース テーマはチャートには不要で、チャートのみ表示されたページでは省略できます。 + + + +## テーマの概要 + +`igCategoryChart` コントロールで使用できるテーマの概要です。 + + + + + + + + + + + + + + + + + + + + +
    テーマ説明
    IG テーマ

    パス: `{IG CSS root}/themes/Infragistics/`

    ファイル: `infragistics.theme.css`

    		このテーマは、すべての {environment:ProductName} コントロールの一般的なビジュアル機能を定義します。IG テーマの使用方法の詳細については、「{environment:ProductName} のスタイル設定とテーマ設定」トピックをご覧ください。
    チャート構造

    パス: `{IG CSS root}/structure/modules/`

    ファイル: `infragistics.ui.chart.css`

    		このテーマは、チャートに固有の視覚要素を定義します。
    + +## 必要なカスケード スタイル シート (CSS) + +### 必要な CSS の概要 + +チャートを正しく描画するためには以下の CSSリソースが必要です。 + +- `infragistics.theme.css` – IG テーマが含まれています。 +- `infragistics.ui.chart.css` – チャート構造が含まれています。 + +以下のコード スニペットでは、CSS リソースが Web サイトまたはアプリケーション ルート下の `Content/ig` フォルダーに保存されていることを前提としています。 + +>**注:** 以下のブロックは、手動で必要な CSS ファイルを組み込む場合の情報を提供しています。ただし、Infragistics Loader コントロールを使用してこれらのファイルをページに読み込むことをお勧めします。 + +### 必要な CSS コード: HTML + +**HTML の場合:** + +```html + + +``` + +### 必要な CSS コード: ASPX + +**ASPX の場合:** + +```csharp + + +``` + + + +## チャート スタイル参照 + + +### スタイル リファレンスの概要 + +`igCategoryChart` のスタイルの目的と機能の概要です。 + + +| | | +| --- | --- | +| プロパティ | 説明 | +| .ui-chart-palette-1 to .ui-chart-palette-N | データ シリーズ 1 の境界線と背景の色をデータ シリーズ N に設定します。アプリケーションで必要なだけ ui-chart-palette クラスを持つことができます。 | +| .ui-chart-axis | チャート軸の境界線と背景の色を設定します。 | +| .ui-chart-legend-items-list | チャートの凡例のすべてのスタイル設定オプションを設定します。 | +| .ui-chart-legend-item-text | 凡例項目のテキストのすべてのスタイル設定オプションを設定します。 | +| .ui-chart-legend-item-badge | 凡例項目のアイコンのすべてのスタイル設定オプションを設定します。 | +| .ui-chart-tooltip | チャートのツールチップのすべてのスタイル設定オプションを設定します。 | + + + + +>**注:** すべての style クラスで、境界線の色設定は対応する要素のアウトラインを決定し、背景色の設定は要素の背景または塗りつぶしの色を決定します。 + + +## テーマを使用したチャート固有の視覚要素の変更 + + +### 概要 + +`infragistics.ui.chart.css` チャート固有スタイルを変更することで `igDataChart` コントロールのさまざまな視覚要素のデフォルト設定を変更する方法を説明します。 + +この例ではチャートの作成手順を説明していないため、チャートのある既存のページをご覧ください。例では、チャート スタイルを変更する方法を示します。 + +この例では、データ シリーズの色を変更します。 + + +### 前提条件 + +この手順を実行するには、以下が必要です。 + +- 既存の `igCategoryChart` コントロールがある HTML5 Web ページ + +### 概要 + +プロセスの高度な概要は以下の通りです。 + +1. [デフォルト チャート CSS ファイルをコピーする](#copy-default-css) +2. [チャートの視覚要素のスタイルを変更する](#modify-sryles) +3. [デフォルト チャート CSS ファイルから変更されたファイルへのリンクを変更する](#change-css-links) +4. [結果を確認します。](#final-result) + +### 手順 + +デフォルト IG Chart スタイルを好みの設定で変更する方法を紹介します。 + +1. デフォルト チャート CSS ファイルをコピーする + + **チャート スタイルがデフォルトの CSS ファイル (`infragistics.ui.chart.css`) を {environment:ProductName} インストール フォルダーから Web サイトまたはアプリケーションの themes フォルダーにコピーします。** + + たとえば、アプリケーションで使用する CSS ファイルを保存している Web サイトまたはアプリケーションに `Content/themes` フォルダーがある場合、上記のデフォルト チャート CSS ファイルを `Content/themes/MyChartTheme/ig.ui.chart.custom.css` にコピーします。 + +2. チャートの視覚要素のスタイルを変更します + + CSS ファイルのコピーを開き、スタイルを変更します。 + + **CSS の場合:** + +```css + .ui-chart-palette-1 + { + border-color: rgb(35, 128, 168); + border-color: rgba(35, 128, 168, .8); + background-color: rgb(68, 172, 214); + background-color: rgba(68, 172, 214, .8); + } + .ui-chart-palette-2 + { + border-color: rgb(51, 51, 51); + border-color: rgba(51, 51, 51, .8); + background-color: rgb(73, 73, 73); + background-color: rgba(73, 73, 73, .8); + } + .ui-chart-palette-3 + { + border-color: rgb(128, 128, 128); + border-color: rgba(128, 128, 128, .8); + background-color: rgb(168, 168, 168); + background-color: rgba(168, 168, 168, .8); + } + .ui-chart-palette-4 + { + border-color: rgb(24, 81, 112); + border-color: rgba(24, 81, 112, .8); + background-color: rgb(33, 110, 153); + background-color: rgba(33, 110, 153, .8); + } + .ui-chart-palette-5 + { + border-color: rgb(135, 153, 34); + border-color: rgba(135, 153, 34, .8); + background-color: rgb(164, 186, 41); + background-color: rgba(164, 186, 41, .8); + } + .ui-chart-axis + { + border-color: #989EA3; + background-color: #989EA3; + } + .ui-chart-legend-items-list + { + padding: 10; + margin: 5px; + } + .ui-chart-legend-item-text + { + vertical-align: text-bottom; + } + .ui-chart-legend-item-badge + { + vertical-align: baseline; + } + .ui-chart-tooltip + { + -moz-box-shadow: 5px 5px rgba(0,0,0,0.5); + -webkit-box-shadow: 5px 5px rgba(0,0,0,0.5); + box-shadow: 5px 5px rgba(0,0,0,0.5); + } +``` + +3. デフォルト チャート CSS ファイルから変更されたファイルへのリンクを変更する + + デフォルト チャート CSS ファイルへのリンクを更新し、前のステップで変更された CSS ファイルをポイントします。 + + **HTML の場合:** + +```html + +``` + + **ASPX の場合:** + +```csharp + +``` + +4. 結果を検証します。 + + チャートの色とスタイルが変更されたことを確認するには、Web ページを保存し、ブラウザーで開きます。 + + +## 関連コンテンツ + +### トピック + +このトピックに関連する追加情報については、以下のトピックを参照してください。 + + +- [igCategoryChart の概要](/categorychart-overview): `igCategoryChart` コントロールについての概要。 + +- [igCategoryChart の追加](/igcategorychart-adding): `igCategoryChart` をコントロールを作成して、データにバインドする方法を紹介します。 + +###リソース + +以下のサード パーティ資料には、このトピックに関連する追加情報を記載しています。 + +- [jQuery Themeroller](http://jqueryui.com/themeroller/): プレビューとダウンロードのため jQuery UI テーマを提供します。 diff --git a/docs/jquery/src/content/ja/topics/controls/igcategorychart/categorychart-transition-in-animations.mdx b/docs/jquery/src/content/ja/topics/controls/igcategorychart/categorychart-transition-in-animations.mdx new file mode 100644 index 0000000000..e544cfc41b --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igcategorychart/categorychart-transition-in-animations.mdx @@ -0,0 +1,89 @@ +--- +title: "トランジション イン アニメーション" +slug: categorychart-transition-in-animations +--- + +# トランジション イン アニメーション + +この機能は、新しいデータ ソースを読み込むときにシリーズをアニメーション化することを許可します。利用可能なアニメーションは、シリーズのタイプに基づきます。たとえば、列シリーズは x 軸を上に上昇させるとアニメーションを再生します。折れ線シリーズは y 軸から描画するとアニメーションを再生します。 +タイトルおよびサブタイトル情報のためにチャートはサイズ変更できます。 + +### このトピックの内容 + +- [概要](#overview) +- [サポートされるトランジションのタイプ](#supportedtransitiontypes) +- [サポートされるトランジションのスピード タイプ](#supportedtransitionspeedtypes) +- [サポートされるイージング関数のタイプ](#supportedeasingfunctiontypes) +- [トランジションイン アニメーションを構成する](#configuringthetransitioninanimations) +- [関連トピック](#relatedtopics) + +### 概要 +デフォルトでアニメーション トランジションは無効ですが、isTransitionInEnabled オプションを Ture に設定してトランジションイン アニメーションを有効にできます。 + +アニメーション化されたトランジションのトランジション タイプ、データ ポイントに相対するスピード、およびイージング関数によって管理されるイージング トランジションを構成できます。 + +## サポートされるトランジションのタイプ + +移動および方向に基づいて複数のアニメーション トランジションのタイプがサポートされます。 +* FromZero - シリーズが数値軸の参照値からトランジションします。 +* アコーディオンタイプ トランジション: + * 側面から: + * AccordionFromLeft – シリーズは左側からアコーディオンします。 + * AccordionFromRight – シリーズは右側からアコーディオンします。 + * AccordionFromTop – シリーズは上側からアコーディオンします。 + * AccordionFromBottom – シリーズは下側からアコーディオンします。 + * 軸から: + * AccordionFromCategoryAxisMinimum – シリーズはカテゴリ軸の最小値からアコーディオンします。 + * AccordionFromCategoryAxisMaximum – シリーズはカテゴリ軸の最大値からアコーディオンします。 + * AccordionFromValueAxisMaximum – シリーズは値軸の最大値からアコーディオンします。 + * AccordionFromValueAxisMinimum – シリーズは値軸の最小値からアコーディオンします。 + +* Expand – シリーズは値の中点から展開します。 +* スイープタイプのトランジション: + * 側面から: + * SweepFromLeft – シリーズは左側からスイープします。 + * SweepFromRight – シリーズは右側からスイープします。 + * SweepFromTop – シリーズは上側からスイープします。 + * SweepFromBottom – シリーズは下側からスイープします。 + * SweepFromCenter – シリーズは中央からスイープします。 + * 軸から: + * SweepFromCategoryAxisMaximum – シリーズはカテゴリ軸の最大値からスイープします。 + * SweepFromCategoryAxisMinimum – シリーズはカテゴリ軸の最小値からスイープします。 + * SweepFromValueAxisMaximum – シリーズは値軸の最大値からスイープします。 + * SweepFromValueAxisMinimum – シリーズは値軸の最小値からスイープします。 + +## サポートされるトランジションのスピード タイプ +トランジションのスピード タイプは、アニメーション化されたトランジションが再生されているときに、現在シリーズの項目に相対するスピードを決定します。以下のはスピード タイプです: +* Auto – 自動的にスピード タイプを選択します。 +* IndexScaled – データ ポイントのインデックスが軸基点から離れた場合、そのポイントのアニメーションは遅いです。 +* Normal – すべてのスピードは標準です。データ ポイントが同じ時間に表示されます。 +* Random – データ ポイントがランダム時間に表示されます。 +* ValueScaled – データ ポイントの値が開始ポイントから離れた場合、そのポイントのアニメーションは遅いです。 + +## サポートされるイージング関数のタイプ +イージング関数は、アニメーションのイーズ インする方法を決定します。イージング関数を適用できます。デフォルト値は CubicEase です。 + +## トランジションイン アニメーションを構成する +トランジション タイプは、transitionInMode プロパティを任意のトランジション名に設定すると構成されます。プロパティを “Auto” (デフォルト値) に設定すると、シリーズ タイプに基づきトランジション タイプを自動的に選択することもできます。 + +以下の例では、トランジション イン アニメーションが有効になり、チャートを右側からアコーディオンできる方法を示します。 + +*HTML の場合:* + +```html +$(function () { + $("#chart").igCategoryChart({ + dataSource: data, + chartType: "auto", + isTransitionInEnabled: true, + transitionInDuration: 500, + transitionInEasingFunction:"cubic" + }); +}); +``` + +## 関連トピック: + +- [igCategoryChart の追加](/igcategorychart-adding) + +- [データ バインド](/categorychart-binding-to-data) diff --git a/docs/jquery/src/content/ja/topics/controls/igcategorychart/landingpage.mdx b/docs/jquery/src/content/ja/topics/controls/igcategorychart/landingpage.mdx new file mode 100644 index 0000000000..2df844933a --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igcategorychart/landingpage.mdx @@ -0,0 +1,39 @@ +--- +title: "igCategoryChart" +slug: igcategorychart-landingpage +--- + +# igCategoryChart + +### 概要 + +igCategoryChart は軽量で高パフォーマンスなチャートです。このチャートは、シンプルで直感的な API を使用したカテゴリ データの表示を簡単に構成できます。データ (コレクションまたはコレクションのコレクション) をバインドするだけで後の作業はチャートがすべて行います。 + +以下のスクリーンショットは、柱状チャートを表示したカテゴリ チャートです。 + +![](../../images/images/categorychart-configuring-title-01.png) + +### トピック +このセクションのトピックでは、igCategoryChart コントロールの詳細情報を提供します。 + +- [概要](/categorychart-overview) + +- [チュートリアル](/igcategorychart-adding) + +- [データ バインド](/categorychart-binding-to-data) + +- [軸](/categorychart-axes) + +- [チャート タイプ](/categorychart-chart-types) + +- [チャート タイプの構成](/categorychart-configuring-chart-types) + +- [チャート マーカーの構成](/categorychart-configuring-chart-types) + +- [チャート要件](/categorychart-chart-requirements) + +- [チャートのタイトルとサブタイトル](/categorychart-chart-title-subtitle) + +- [チャート スタイル](/categorychart-styling) + +- [チャート API の概要](/categorychart-api-overview) diff --git a/docs/jquery/src/content/ja/topics/controls/igcombo/accessibility-compliance.mdx b/docs/jquery/src/content/ja/topics/controls/igcombo/accessibility-compliance.mdx new file mode 100644 index 0000000000..3664500515 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igcombo/accessibility-compliance.mdx @@ -0,0 +1,52 @@ +--- +title: "アクセシビリティ準拠 (igCombo)" +slug: igcombo-accessibility-compliance +--- + +# アクセシビリティ準拠 (igCombo) + + + +##igCombo のアクセシビリティ準拠 + + +###概要 + + +すべての {environment:ProductName}™ コントロールおよびコンポーネントは、1973 年リハビリテーション法第 508 条第 1194 部 22 条を遵守しています。 + +各アクセシビリティ規則の要件を満たすために、場合によっては、コントロールを操作して特定のプロパティを設定する必要がありますが、それ以外の場合は、コントロール自身がこの作業を行います。 + +>**注:** jQuery コントロールはクライアント専用のため、一部の規則はサポートされておらず、制限として扱います。 + +###アクセシビリティ参照チャート + + +下の表は、igCombo が、対応する第 508 条にいかに準拠しているかを簡単にまとめたものです。 + +- **a:** 非テキスト要素には、それと等価なテキストが用意されています。 + +- **c:** igCombo コントロールで色によって伝えられるすべての情報は、色なしでも利用できるようになっています。 + +- **d:** igCombo コントロールに表示されるコンテンツは、関連するスタイルシートがなくても読むことができます。 + +- **j:** 周波数が 2 Hz より大きく、55 Hz を下回る場合は、igCombo コントロール自体が画面のちらつきの原因になることはありません。 + +- **k:** igCombo コントロールは、それ以外の方法では準拠を達成できない場合、同等の情報や機能を備えたテキストのみのページを使用することによって Web サイトをこの条項の規定に準拠させることができます。 + +- **l:** igCombo コントロールのスクリプトは、補助テクノロジーで読み取り可能な機能テキストによって識別することができます。 + +- **p:** 一定の時間内での応答が要求される場合、ユーザーは警告を受け、追加時間が必要な旨を伝える十分な時間が与えられます。 + +##関連トピック + + +以下は、その他の役立つトピックです。 + +- [アクセシビリティ準拠](/accessibility-compliance) + + + + + + diff --git a/docs/jquery/src/content/ja/topics/controls/igcombo/binding/binding-to-data.mdx b/docs/jquery/src/content/ja/topics/controls/igcombo/binding/binding-to-data.mdx new file mode 100644 index 0000000000..70d3848c0b --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igcombo/binding/binding-to-data.mdx @@ -0,0 +1,32 @@ +--- +title: "igCombo をデータにバインド" +slug: igcombo-binding-to-data +--- + +# igCombo をデータにバインド + + + +##このグループのトピックについて + + +### 概要 + +このグループのトピックでは、{environment:ProductName} コンボ コントロールのデータへのバインド方法について説明します。 + +### トピック + + +- [igCombo データにバインドについての概要](/igcombo-data-binding): このトピックでは、`igCombo` コントロールでの各種データ バインド方式について説明し、データ バインディングに関するその他の詳細情報を示します。 + +- [カスケード igCombo コントロールをデータにバインド](/igcombo-cascading): このグループのトピックでは、カスケード {environment:ProductName} コンボ コントロールのデータへのバインド方法について説明します。 + + + + + + + + + + diff --git a/docs/jquery/src/content/ja/topics/controls/igcombo/binding/cascading.mdx b/docs/jquery/src/content/ja/topics/controls/igcombo/binding/cascading.mdx new file mode 100644 index 0000000000..713d374991 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igcombo/binding/cascading.mdx @@ -0,0 +1,240 @@ +--- +title: "カスケード igCombo の作成" +slug: igcombo-cascading +--- + +# カスケード igCombo の作成 + + + +##トピックの概要 + + +### 目的 + +このトピックでは、あるコンボの選択が次のコンボでの選択に利用できるデータをフィルター処理するカスケード方式で igCombo を実装する方法を説明します。 + +### 前提条件 + +このトピックを理解するために、以下のトピックを参照することをお勧めします。 + + +- [igCombo の概要](/igcombo-overview): このトピックでは、機能、データ ソースへのバインド、要件、テンプレートなどの、`igCombo` コントロールの概要について説明します。 + +- [igCombo をデータにバインド](/igcombo-data-binding): このトピックでは、`igCombo` コントロールでの各種データ バインド方式について説明し、データ バインディングに関するその他の詳細情報を示します。 + +- [選択の構成](/igcombo-configure-selection): このトピックでは、選択イベントの処理方法に関する情報も含め、選択を実装する方法を説明します。 + +### このトピックの内容 + +このトピックは、以下のセクションで構成されます。 + +- [コンボのカスケードの作成](#creating-cascading-combos) + - [概要](#introduction) + - [プレビュー](#preview) + - [前提条件](#prerequisites) + - [手順](#steps) + - [完成した例](#finished-example) +- [関連コンテンツ](#related-content) + +##コンボのカスケードの作成 +### 概要 + +この例では、2 つの igCombo が作成され、異なるデータ ソースにバインドされます。次に、最初の igCombo の選択が 2 番目の igCombo で利用できるデータをフィルター処理します。 + +### プレビュー + +以下のスクリーンショットは最終結果のプレビューです。 + +![](../../../images/images/01_Cascading_Combo_with_Individaul_Data_Source_1.png) + +### 前提条件 + +この手順を実行するには、以下が必要です。 + +- 編集用に開かれた標準的な HTML ページ + +### 手順 + +以下の手順では、親と子の `igCombo` コントロールを異なるデータ ソースにバインドする方法を示します。 + +1. `igCombo` コントロール親子の HTML プレースホルダーを追加します。 + + この例では、ドロップダウンを格納するための SPAN 要素を定義します。HTML プレースホルダーとして div 要素を使用することもできますが、ここでは、両方のコンボ ボックスが同じ行に表示されるようにしたいため、SPAN 要素を使用します。 + + **HTML の場合:** + +```html + + +``` + +2. 親 `igCombo` コントロールにデータ ソースを追加します。 + + この手順では、親 `igCombo` データ ソースをオブジェクト配列として定義します。 + + **JavaScript の場合:** + +```js + var dsCountry = [ + { txtCountry: 'United States', valCountry: "US" }, + { txtCountry: 'Bulgaria', valCountry: "BG" } + ]; +``` + +3. 親 `igCombo` コントロールを追加します。 + + 親 `igCombo` を追加して、必要なプロパティを定義します。 + + **JavaScript の場合:** + +```js + $("#comboCountry").igCombo({ + textKey: "txtCountry", + valueKey: "valCountry", + dataSource: dsCountry + }); +``` + +4. 子 `igCombo` コントロールにデータ ソースを追加します。 + + この手順では、子 `igCombo` データ ソースをオブジェクト配列として定義します。親との関係を持つ追加のキー (`keyCountry`) に注意してください。 + + **JavaScript の場合:** + +```js + var dsCascDistrict = [ + { keyCountry: "US", txtDistrict: "New Jersey", valDistrict: "NJ" }, + { keyCountry: "US", txtDistrict: "California", valDistrict: "CA" }, + { keyCountry: "US", txtDistrict: "Illinois", valDistrict: "IL" }, + { keyCountry: "US", txtDistrict: "New York", valDistrict: "NY" }, + { keyCountry: "US", txtDistrict: "Florida", valDistrict: "FL" }, + { keyCountry: "BG", txtDistrict: "Sofia", valDistrict: "SA" }, + { keyCountry: "BG", txtDistrict: "Plovdiv", valDistrict: "PV" }, + { keyCountry: "BG", txtDistrict: "Varna", valDistrict: "V" }, + { keyCountry: "BG", txtDistrict: "Yambol", valDistrict: "Y" } + ]; +``` + +5. 子 `igCombo` コントロールを追加します。 + + 子 `igCombo` コントロールを追加します。ここでは、dataSource プロパティを設定しません。 + + **JavaScript の場合:** + +```js + $("#comboDistrict").igCombo({ + valueKey: "valDistrict", + textKey: "txtDistrict" + }); +``` + +6. selectionChanged イベント ハンドラーを親 `igCombo` に追加します。 + + selectionChanged イベント ハンドラーを親 `igCombo` に追加します。空の配列を作成し、親 `igCombo` の選択された値を使用して、子 `igCombo` のデータ ソースをフィルター処理し、フィルター処理された結果を空の配列で並べ替えます。 + + **JavaScript の場合:** + +```js + selectionChanged: function (evt, ui) { + var filteredCascDistrict = []; + if (ui.items && ui.items[0]) { + var itemData = ui.items[0].data; + + filteredCascDistrict = dsCascDistrict.filter(function (district) { + return district.keyCountry == itemData.valCountry; + }); + } + } +``` + +7. 子 `igCombo` をバインドします。 + + 親 `igCombo` で、selectionChanged イベントが子 `igCombo` をフィルター処理されたデータにバインドします。ここで deselectAll に対する呼び出しに注意してください。これは、子 `igCombo` の以前の選択のクリアに必要で、新しくフィルター処理されたデータのセットに以前に選択された値が入らないようにするためです。 + + **JavaScript の場合:** +```js + var $comboDistrict = $("#comboDistrict"); + $comboDistrict.igCombo("deselectAll", {}, true); + $comboDistrict.igCombo("option", "dataSource", filteredCascDistrict); + $comboDistrict.igCombo("dataBind"); +``` + +8. (オプション) 結果を確認します。 + + この HTML ページをブラウザーで開き、結果を確認します。上記の手順が完了すると、[プレビュー](#preview)に示すとおり、2 つの機能ドロップダウンが水平方向に並べて配置されます。 + +### 完成した例 + +以下は、完了時のページの表示を実際に示すために作成されたサンプル用の完全なコードです。 + +**HTML と JavaScript の場合:** + +```html + + + + +``` + +##関連コンテンツ + +### サンプル + +このトピックについては、以下のサンプルも参照してください。 + +- [コンボのカスケード]({environment:SamplesUrl}/combo/cascading-combos): このサンプルでは、3 つの `igCombo` コントロールのカスケードを示します。 + + + + + + + + + + diff --git a/docs/jquery/src/content/ja/topics/controls/igcombo/binding/data-binding.mdx b/docs/jquery/src/content/ja/topics/controls/igcombo/binding/data-binding.mdx new file mode 100644 index 0000000000..7d7c50589d --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igcombo/binding/data-binding.mdx @@ -0,0 +1,303 @@ +--- +title: "igCombo データにバインドについての概要" +slug: igcombo-data-binding +--- + +# igCombo データにバインドについての概要 + + + +## トピックの概要 + + +### 目的 + + +このトピックでは、`igCombo` コントロールでの各種データ バインド方式について説明し、データ バインディングに関するその他の詳細情報を示します。 + +### このトピックの内容 + + +このトピックは、以下のセクションで構成されます。 + +- [igCombo をデータにバインド - 概要](#binding-to-data-sources) +- バインドの要件 +- サポートされるデータ ソース +- データ ソースへのバインドに関する概要 +- データ ソースへのバインドに関するクラス図 +- [igCombo をデータにバインド - 手順](#basicig-combo-data-binding) +- [サンプル](#demos) + - [JSON のバインド](#json-binding) + - [HTML のバインド](#html-binding) + - [XML のバインド](#xml-binding) +- [関連トピック](#related-topics) + +###　前提条件 + + +まず以下のトピックを読む必要があります。 + +- [igCombo の概要](/igcombo-overview) +- [igCombo のセットアップ](/igcombo-getting-started) + +##　igCombo をデータにバインド - 概要 + + +###　バインドの要件 + + +次は、`igCombo` コントロールとデータ ソースとのバインドに関する要件をカテゴリ別にまとめたものです。 + +***データ構造*** + +以下のいずれかの形態を使用できます。 + +- ローカルまたは Web サーバーから提供される適格な JSON または XML +- JavaScript 配列または HTML TABLE 要素 +- SELECT 要素 +- OData サービス +- JSONP +- ASP.NET MVC での `IQueryable` + +***データ型*** + +- String +- Number +- Boolean +- Date + +###　サポートされるデータ ソース + + +以下は、サポートされているデータ ソース、および各データ ソースのバインドに関する基本情報を示します。 + +- **igDataSource**: `igDataSource` は、コントロールのデータ操作を管理するために `igCombo` によって内部的に使用されるデータ ソースです。このデータ ソースは、さまざまなタイプのローカル データやリモート データを受け入れます。 + +- **HTML SELECT 要素**: この要素は `igCombo` コントロールに固有です。`igCombo` の jQuery セレクターからこの要素を選択すると、SELECT 要素が自動的に `igCombo` コントロールに換され、ベース要素のオプションが継承されます。 + +- **`IQueryable`**: ASP.NET MVC では、igCombo のデータ ソースとして `IQueryable` を指定します。そのコレクションは、ブラウザーでの使用に合わせて JSON にシリアル化されて View と共に返されます。 + +##　データ ソースへのバインドに関する概要 + + +ほとんどの場合、`igCombo` の `dataSource` または `dataSourceUrl` オプションを使用してデータのバインドを行います。このオプションは、サポートされるさまざまなデータ形式を処理できる `igDataSource` へデータを提供します。ただし、SELECT 要素を使用して `igCombo` のインスタンスを作成する場合は例外で、このオプションは使用しません。この場合、`igCombo` はそのベース SELECT 要素のデータおよびオプションを継承します。ASP.NET MVC では、{environment:ProductNameMVC} に `IQueryable` を供給すると、サーバーからのデータを簡単にシリアル化して、View と共にクライアントへ渡せるようになります。そのページがブラウザーに渡されると、`igCombo` の `dataSource` オプションが設定されてクライアント側での操作に使用されます。 + +###　データ ソースへのバインドに関するクラス図 + + +次のクラス図はデータ バインドの仕組みを示したものです。 + +![](../../../images/images/igCombo_DataBinding_01.png) + +##　igCombo をデータにバインド - 手順 + + +###　概要 + + +以下の手順は基本オプションの構成方法と、jQuery および ASP.NET MVC ヘルパーの両方を使用したデータへのバインド方法を示しています。 + +###　プレビュー + + +以下は最終結果のプレビューです。 + +![](../../../images/images/igCombo_DataBinding_02.png) + +###　要件 + + +この手順を実行するには、以下が必要です。 + +- この例を追加する Web サイトと Web ページ +- Web サイト上の必要な JavaScript リソースおよび jQuery テーマ +- Web ページ上の必要な JavaScript ファイルと CSS ファイルへの参照 +- (ASP.NET MVC) `Infragistics.Web.Mvc.dll` アセンブリへの参照 + +###　概要 + + +以下はプロセスの概念的概要です。 + +**1.`igCombo` のインスタンス化** + +**2.データへのバインド** + +###　手順 + +1. **`igCombo` をインスタンス化します。** + + **a. ターゲット要素を定義します。** + + Web ページで、`igCombo` のベース オブジェクトとしての役割を果たすターゲットの HTML 要素を定義し、その ID を設定します。これは ASP.NET MVC のオプション手順です。 + + **HTML の場合:** + +```html + +``` + + **b. `igCombo` をインスタンス化します。**jQuery では、document ready JavaScript イベントを使用してコンボをインスタンス化できます。ASP.NET MVC では、ASP.NET MVC ヘルパーを使用して、`IQueryable` データ ソースにバインドします。 + + **HTML の場合:** + +```html + +``` + + **ASPX の場合:** + +```csharp + <%= Html. + Infragistics(). + Combo(). + ID("comboTarget") + %> +``` + +2. **データへバインドします。** + + **a. データを定義します。** + + jQuery では、この例は単純な JSON 配列にバインドします。このデータはページ要求の一部分として渡すか、Web サービスから返すことができます。ASP.NET MVC では、この例はサーバーの Controller クラスで定義され、View でモデルとして返される、Color オブジェクトのコレクションにバインドします。 + + **HTML の場合:** + +```html + var colors = [ + { "Name": "Black" }, + { "Name": "Blue" }, + { "Name": "Brown" }, + { "Name": "Red" }, + { "Name": "White" }, + { "Name": "Yellow" } + ]; +``` + + **C# の場合:** + +```csharp + public class DefaultController : Controller + { + public ActionResult Index() + { + List colors = new List(); + colors.Add(Color.Black); + colors.Add(Color.Blue); + colors.Add(Color.Brown); + colors.Add(Color.Red); + colors.Add(Color.White); + colors.Add(Color.Yellow); + + return View("default", colors.AsQueryable()); + } + } +``` + + **b. データ ソースを設定します。** + + `dataSource` オプションを使用してデータをコンボに提供します。ASP.NET MVC では、ヘルパーの DataSource メソッドを使用して、Model の一部として渡されるデータにバインドします。 + + **HTML の場合:** + +```html + $("#comboTarget").igCombo({ + dataSource: colors}); +``` + + **ASPX の場合:** + +```csharp + <%= Html. + Infragistics(). + Combo(). + ID("comboTarget"). + DataSource(this.Model as IQueryable) + %> +``` + + **c. text フィールドおよび value フィールドを構成します。** + + `igCombo` の `textKey` オプションおよび `valueKey` オプションを設定します。この単純な例では、`textKey` と `valueKey` は両方とも「Name」という同じオブジェクト値に設定されています。ただし、`textKey` および `valueKey` は 2 つの異なるフィールドとして設定できます。たとえば、`valueKey` は各 Color オブジェクトの ID フィールドをポイントする場合があります。 + + **HTML の場合:** + +```html + $("#comboTarget").igCombo({ + dataSource: colors, textKey: "Name", + valueKey: "Name", + }); +``` + + **ASPX の場合:** + +```csharp + <%= Html. + Infragistics(). + Combo(). + ID("comboTarget"). + TextKey("Name"). + ValueKey("Name"). + DataSource(this.Model as IQueryable) + %> +``` + + **d. (ASP.NET MVC) DataBind() および Render() を呼び出します。** + + ASP.NET MVC ヘルパーで `igCombo` をインスタンス化する場合、他のオプションの構成がすべて終了した後、DataBind メソッドを呼び出してデータにバインドし、最後にレンダリング メソッドを呼び出します。これは、クライアントで `igCombo` をインスタンス化するのに必要な HTML および JavaScript を描画するメソッドです。 + + **ASPX の場合:** + +```csharp + <%= Html. + Infragistics(). + Combo(). + ID("comboTarget"). + TextKey("Name"). + ValueKey("Name"). + DataSource(this.Model as IQueryable). + DataBind(). + Render() %> +``` + +## サンプル +オンライン コンボへのバインディングの実例 + +### JSON のバインド +コンボを JSON データまたは JavaScript 配列にバインドできます。このサンプルはクライアント側バインディングの基本実例を含みます。 + +
    + [{environment:SamplesEmbedUrl}/combo/json-binding]({environment:SamplesEmbedUrl}/combo/json-binding) +
    + +### HTML のバインド + +igCombo は HTML SELECT 要素に直接バインドできます。 + +
    + [{environment:SamplesEmbedUrl}/combo/html-binding]({environment:SamplesEmbedUrl}/combo/html-binding) +
    + +### XML のバインド +igCombo は XML データへのバインドをサポートします。このサンプルは、XML 文字列への基本バインドを表示します。 + +
    + [{environment:SamplesEmbedUrl}/combo/xml-binding]({environment:SamplesEmbedUrl}/combo/xml-binding) +
    + +##関連トピック + +以下は、その他の役立つトピックです。 + +- [igCombo データにバインドについての概要](/igcombo-binding-to-data) +- [カスケード igCombo コントロールをデータにバインド](/igcombo-cascading) + + + + diff --git a/docs/jquery/src/content/ja/topics/controls/igcombo/configuring/angularjs-support.mdx b/docs/jquery/src/content/ja/topics/controls/igcombo/configuring/angularjs-support.mdx new file mode 100644 index 0000000000..98a8373cfe --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igcombo/configuring/angularjs-support.mdx @@ -0,0 +1,38 @@ +--- +title: "AngularJS サポート (igCombo)" +slug: igcombo-angularjs-support +--- + +# AngularJS サポート (igCombo) + +## トピックの概要 +本トピックは、AngularJS で `igCombo` を構成する方法について説明します。各コントロールは、対応する AngularJS ディレクティブがあり、`igCombo` も同様です。`igCombo`　ディレクティブの概要です。 + +### このトピックの内容 + +このトピックは、以下のセクションで構成されます。 + +- [プレビュー](#Preview) +- [要件](#Requirements) +- [詳細](#Details) +- [関連コンテンツ](#Related_Content) + +### プレビュー +以下は最終結果のプレビューです。 + +
    + [{environment:SamplesEmbedUrl}/combo/angular]({environment:SamplesEmbedUrl}/combo/angular) +
    + +### 要件 +このサンプルを実行するために以下が必要です。 +- 必要となる {environment:ProductName} の JavaScript と CSS ファイル +- {environment:ProductFamilyName} AngularJS ディレクティブ + +### 詳細 +サンプルに製品が 20 個あります。AngularJS ng-repeat を使用してデータソース レコード全体をループし、それぞれの製品に入力を作成して ProductName へバインドします。この方法によって入力で何かを編集する場合に変更はデータソースに直ちに反映されます。製品名の上に同様のオプションがある `igCombo` コントロールが 2 つあります。それらは製品でデータソースにバインドされています。また、選択した製品 id を保存するコントローラー (combo.value1) の値にバインドされています。`igCombo` コントロールの左側に同じ値 (combo.value1) にバインドされた入力があります。製品名を保持する入力を編集、`igCombo` から値を選択、選択した製品 id を編集できます。両方向のバインドで `igCombo` コントロールを更新し、対応する値を直ちに入力します。 + +### 関連コンテンツ +このトピックの追加情報については、以下のトピックも合わせてご参照ください。 +- [AngularJS で {environment:ProductFamilyName} の使用](../../../10_AngularJS Directives/00_Using_Ignite_UI_with_AngularJS.mdx) - このトピックでは、AngularJS の {environment:ProductFamilyName} ディレクティブの使用方法の概要を説明します。 +- [AngularJS を使用した条件付きテンプレート化および高度なテンプレート化](../../../10_AngularJS Directives/01_Conditional_and_Advanced_Templating_with_AngularJS.mdx) - このトピックでは、条件付きテンプレートの使用方法と、AngularJS の {environment:ProductFamilyName} ディレクティブを使用して作成されたコントロールをカスタマイズするための高度なテンプレート化の方法について説明します。 diff --git a/docs/jquery/src/content/ja/topics/controls/igcombo/configuring/asp-net-mvc.mdx b/docs/jquery/src/content/ja/topics/controls/igcombo/configuring/asp-net-mvc.mdx new file mode 100644 index 0000000000..31e83226bf --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igcombo/configuring/asp-net-mvc.mdx @@ -0,0 +1,238 @@ +--- +title: "ASP.NET MVC コンボの構成" +slug: configuring-asp-net-mvc +--- + +# ASP.NET MVC コンボの構成 + +## トピックの概要 +このトピックでは、igCombo コントロールを基本的な ASP.NET MVC のシナリオで使用する方法を紹介します。 + +### 目的 + +ビューでコンボをインスタンス化するために {environment:ProductNameMVC} Combo が使用されます。また、従業員のコレクションのリモート要求を処理し、リモート フィルタリング パラメーターを処理するために `ComboDataSourceAction` 属性が使用されます。最後に、フォームで モデルのフィールドを更新するために使用されるコンボを確認できます。 + +#### 概念 + +- {environment:ProductNameMVC} Combo の使用 + + +### このトピックの内容 + +このトピックは、以下のセクションで構成されます。 + +- [プレビュー](#_Preview) +- [要件](#_Requirements) +- [概要](#_Requirements_Overview) +- [手順](#_Steps) + - [Order クラスの作成](#_create_order_class) + - [コントローラーとビューの追加](#_add_controler_and_view) + - [サンプルの実行](#_run_the_sample) +- [関連コンテンツ](#_Related_Content) + + +### プレビュー + +以下のスクリーンショットは最終結果のプレビューです。 + +![](../../../images/images/igCombo_init_MVC_example.png) + +### 要件 + +手順を完了するには、ASP.NET MVC プロジェクトの他に次が必要になります。 + +- 必要な {environment:ProductName} の JavaScript と CSS ファイル +- 参照されている Infragistics.Web.Mvc.dll アセンブリ + +### 概要 + +このトピックでは、モデル、ビュー、コントローラーの作成について順を追って説明します。 + +1. `Order` クラスの作成 +2. コントローラーとビューの作成 + +### 手順 + +​`Order` クラスの作成 + +1. `Order` クラスの追加 + + `Order` クラスを `Models` フォルダーに追加します。 + +2. クラス メンバーの作成 + + `Order.cs` ファイルを開き、以下のメンバーをクラスに追加します。 + + **C# の場合:** + +```csharp + public class Order + { + public int OrderID { get; set; } + public string CustomerID { get; set; } + public Nullable EmployeeID { get; set; } + public Nullable OrderDate { get; set; } + public Nullable RequiredDate { get; set; } + public Nullable ShippedDate { get; set; } + public Nullable ShipVia { get; set; } + public Nullable Freight { get; set; } + public string ShipName { get; set; } + public string ShipAddress { get; set; } + public string ShipCity { get; set; } + public string ShipRegion { get; set; } + public string ShipPostalCode { get; set; } + public string ShipCountry { get; set; } + public string ContactName { get; set; } + public string EmployeeName { get; set; } + public int ShipperID { get; set; } + public string ShipperName { get; set; } + public decimal TotalPrice { get; set; } + public int TotalItems { get; set; } + } +``` + +​コントローラーとビューの追加 + +1. `ComboController` の作成 + + ASP.NET MVC アプリケーションの `Controllers` フォルダーに、`ComboController.cs` という名前で新しいコントローラーを作成します。 + +2. アクション メソッドの作成 + + Action メソッドをコントローラーに追加して `Order` を作成します。 + + **C# の場合:** + +```csharp + public class ComboController : Controller + { + // + // GET: /Combo/ + + [ComboDataSourceAction] + [ActionName("employee-combo-data")] + public ActionResult ComboData() + { + IEnumerable employees = RepositoryFactory.GetEmployeeRepository().Get(); + return View(employees); + } + + [ActionName("aspnet-mvc-helper")] + public ActionResult UsingAspNetMvcHelper() + { + Order order = RepositoryFactory.GetOrderRepository().Get().First(); + return View("aspnet-mvc-helper", order); + } + + [HttpPost] + [ActionName("aspnet-mvc-helper")] + public ActionResult UsingAspNetMvcHelper(Order updatedOrder) + { + ItemRepository orderRepository = RepositoryFactory.GetOrderRepository(); + ItemRepository employeeRepository = RepositoryFactory.GetEmployeeRepository(); + + Order existingOrder = orderRepository.Get(o => o.OrderID == updatedOrder.OrderID); + Employee newEmployee = employeeRepository.Get(e => e.ID == updatedOrder.EmployeeID); + + if (existingOrder != null && newEmployee != null) + { + existingOrder.EmployeeID = newEmployee.ID; + existingOrder.EmployeeName = newEmployee.Name; + + orderRepository.Update(existingOrder, o => o.OrderID == existingOrder.OrderID); + orderRepository.Save(); + } + + return View("aspnet-mvc-helper", existingOrder); + } + + } +``` +3. ビューの作成 + + 厳密に型指定されたビューを作成し、`Order` クラスをモデルとして使用します。 + + **ASPX の場合:** + +```csharp + @using Infragistics.Web.Mvc + @using IgniteUI.SamplesBrowser.Models + @model IgniteUI.SamplesBrowser.Models.Northwind.Order +``` + +4. JavaScript と CSS の参照の追加 + + この例では、ASP.NET MVC アプリケーションでローカルで参照される、結合された JavaScript および CSS ファイルを使用します。 + + **ASPX の場合:** + +```csharp + + + + + + + + ... + + +``` + +5. `Order` オブジェクト用のフォームを作成します。 + + **ASPX の場合:** + +```csharp + @using (Html.BeginForm()) + { +
    + @Html.HiddenFor(item => item.OrderID) + +
    +

    Current Employee:

    + @Html.DisplayFor(item => item.EmployeeName) +
    + +
    +

    Choose New Employee

    + + @(Html.Infragistics().ComboFor(item => item.EmployeeID) + .Width("270px") + .DataSource(Url.Action("employee-combo-data")) + .ValueKey("ID") + .TextKey("Name") + .DataBind() + .Render() + ) +
    + + +
    + } +``` + +​サンプルの実行 + + +サンプルを実行してドロップダウンから項目を選択します。次に更新ボタンをクリックして現在の従業員の値を更新します。 + +![](../../../images/images/igCombo_updated_MVC_example.png) + +### 関連コンテンツ + +- [igCombo データ バインドについての概要](/igcombo-data-binding): このトピックでは、`igCombo` コントロールでの各種データ バインド方式について説明し、データ バインディングに関するその他の詳細情報を示します。 diff --git a/docs/jquery/src/content/ja/topics/controls/igcombo/configuring/configure-auto-suggest.mdx b/docs/jquery/src/content/ja/topics/controls/igcombo/configuring/configure-auto-suggest.mdx new file mode 100644 index 0000000000..7f96df37cd --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igcombo/configuring/configure-auto-suggest.mdx @@ -0,0 +1,218 @@ +--- +title: "自動補完の構成 (igCombo)" +slug: igcombo-configure-auto-suggest +--- + +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# 自動補完の構成 (igCombo) + + +##トピックの概要 +###目的 + + +このトピックでは、`igCombo`™ コントロールの自動補完および各種フィルタリング オプションを構成する方法を説明します。 + +###このトピックの内容 + + +このトピックは、以下のセクションで構成されます。 + +- [igCombo 構成の概要](#control_configuration_overview) +- [自動補完の構成](#configure_auto_suggest) + - [自動補完の詳細](#configure_auto_suggest_details) + - [自動補完のプロパティ設定](#configure_auto_suggest_property_settings) + - [例: ローカル フィルタリングを使用した自動補完](#auto_suggest_example) + - [例: ローカル フィルタリングを使用した大文字と小文字を区別する自動補完](#auto_suggest_case_sensitive_example) + - [自動補完プロパティ参照](#auto_suggest_property_reference) +- [関連トピック](#related_topics) + +###前提条件 + + +以下のリストは、このトピックの情報を完全に理解するために前提条件を示しています。 + + +**概念** + +以下の概念を理解する必要があります。 + +- ASP.NET MVC のみ + - [ASP.NET MVC ルーティング](http://www.asp.net/mvc/tutorials/older-versions/controllers-and-routing/asp-net-mvc-routing-overview-cs) + +**トピック** + +まず以下のトピックを読む必要があります。 + +- [igCombo の概要](/igcombo-overview) +- [igCombo の追加](/igcombo-getting-started) +- [igCombo をデータにバインド](/igcombo-binding-to-data) + +##igCombo 構成の概要 + + +###コントロールの構成表 + +以下の表は、`igCombo` コントロールの構成可能なビヘイビアーを示しています。 + +###自動補完 + +自動補完機能は、ドロップダウン リストのフィルタリングと一致の強調表示を組み合わせたもので、考えられる選択肢をユーザーに提案します。構成プロパティは以下のとおりです。 + +- + +- + +- + +- + +##自動補完の構成 + + +###自動補完の詳細 + + +`igCombo` auto-suggest 機能は、ドロップダウン リストのフィルタリングと一致の強調表示を組み合わせたもので、考えられる選択肢をユーザーに提案します。filteringType を「local」に設定するとリスト フィルタリングが有効になり、highlightMatchesMode を設定するとドロップダウンの一致テキストを強調表示できます。 + +`igCombo` コントロールがクライアントにバインドされていても、サーバーにバインドされていても、リスト上のフィルタリングはローカルで行われ、フィルターされたデータのサーバー要求量を減らします。ローカル フィルタリング タイプを使用するには、`igCombo` コントロールのすべてのデータをクライアントに提供する必要があります。 + +>**注:** 1 つの要求にとって選択肢の数が大きすぎる場合は、リモート フィルタリングの使用を検討します。 + +また、フィルタリング ビヘイビアーと強調表示ビヘイビアーをカスタマイズして、どの条件が一致をトリガーするか変更できます。最も一般的な設定は、プロパティ設定表に示しています。条件は `filteringCondition` オプションを使用したフィルタリングをカスタマイズでき、同様のビヘイビアーは `highlightMatchesMode` オプションを使用した強調表示についてカスタマイズできます。`caseSensitive` オプションを true に設定してフィルタリングの大文字と小文字を区別できます。 + +![](../../../images/images/igCombo_AutoSuggest_01.png) + +###自動補完のプロパティ設定 + + +以下の表は、要求ビヘイビアーをプロパティ設定にマップしています。プロパティの設定画面は、`igCombo` コントロールのオプションから呼び出します。 + + +| 目的: | 使用するプロパティ | 設定値 | +| --- | --- | --- | +| 自動補完フィルタリングを有効にする | | local | +| 単一の項目内のすべてのインスタンスの一致の強調表示を有効にする | | multi | +| 入力されたテキストから始まる項目のみ検索するようフィルタリングを構成する | | startsWith | +| 入力されたテキストを含むすべての項目を検索するようフィルタリングを構成する | | contains | +| 入力されたテキストから始まる項目のみ照合するよう一致の強調表示を構成する | | startsWith | +| 各項目内で入力されたテキストのインスタンス 1 つだけ照合するよう一致の強調表示を構成する | | contains | +| フィルタリングの大文字と小文字を区別する | | true | +| オートコンプリートを有効にする | | true | + + + + +###例: ローカル フィルタリングを使用した自動補完 + + +以下の設定は、ローカル データからリスト値を照合する自動補完ビヘイビアーを構成する方法を示しています。 + + + + + + + + + + + + + + + + + + + + + + + + +
    プロパティ設定プレビュー
    local![](../../../images/images/igCombo_AutoSuggest_02.png)
    multi
    contains
    + +##例: ローカル フィルタリングを使用した大文字と小文字を区別する自動補完 + +以下の設定は、ローカル データからの入力されたテキストの大文字と小文字が正確に一致するリスト値を照合する自動補完ビヘイビアーを構成する方法を示しています。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プロパティ設定プレビュー
    local![](../../../images/images/igCombo_AutoSuggest_03.png)
    contains
    contains
    true
    + +### 例: 自動補完とオートコンプリートおよびローカル フィルタリング + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プロパティ設定プレビュー
    local![](../../../images/images/igCombo_Auto_Complete.png)
    startsWith
    startsWith
    true
    + +###自動補完プロパティ参照 + + +これらのプロパティの詳細情報は、プロパティ参照セクションのリストを参照してください。 + +- + +###関連トピック + +以下は、その他の役立つトピックです。 + +- [リモート フィルタリングの構成 (igCombo) ](/igcombo-configure-remote-filtering) + + + + + + diff --git a/docs/jquery/src/content/ja/topics/controls/igcombo/configuring/configure-remote-filtering.mdx b/docs/jquery/src/content/ja/topics/controls/igcombo/configuring/configure-remote-filtering.mdx new file mode 100644 index 0000000000..8b5593e517 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igcombo/configuring/configure-remote-filtering.mdx @@ -0,0 +1,324 @@ +--- +title: "リモート フィルタリングの構成 (igCombo)" +slug: igcombo-configure-remote-filtering +--- + +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# リモート フィルタリングの構成 (igCombo) + + + +##トピックの概要 + + +このトピックでは、`igCombo`™ コントロールで自動補完および各種フィルタリング オプションを構成する方法を説明します。 + +###このトピックの内容 + + +このトピックは、以下のセクションで構成されます。 + +- [igCombo 構成の概要](#overview) +- [OData リスト フィルタリングを構成する](#odata_filtering) + - [OData リスト フィルタリング構成の詳細](#odata_details) + - [OData リスト フィルタリング構成のプロパティ設定](#odata_settings) + - [OData リスト フィルタリング構成の例](#odata_example) +- [ASP.NET MVC リスト フィルタリングを構成する](#asp_filtering) + - [ASP.NET MVC リスト フィルタリング構成の詳細](#asp_details) + - [ASP.NET MVC リスト フィルタリング構成のプロパティ設定](#asp_settings) + - [ASP.NET MVC リスト フィルタリング構成の例](#asp_example) +- [関連トピック](#related_topics) + +###前提条件 + + +以下の表は、このトピックの情報を完全に理解するために前提条件を示しています。 + +**概念** + +以下の概念を理解する必要があります。 + +- ASP.NET MVC のみ + - [ASP.NET MVC ルーティング](http://www.asp.net/mvc/tutorials/asp-net-mvc-routing-overview-cs) +- OData のみ + - [OData: JavaScript Object Notation (JSON) 形式](http://www.odata.org/documentation/odata-version-2-0/) + - [OData: URI 規約](http://www.odata.org/documentation/odata-version-2-0/uri-conventions/) + +**トピック** + +まず以下のトピックを読む必要があります。 + +- [igCombo の概要](/igcombo-overview) +- [igCombo の追加](/igcombo-getting-started) +- [igCombo の構成](/igcombo-configuring) + +##igCombo 構成の概要 + + +###コントロールの構成表 + + +以下の表は、`igCombo` コントロールの構成可能なビヘイビアーを示しています。 + + +| 構成可能な動作 | ビヘイビアーの詳細 | 構成プロパティ | +| --- | --- | --- | +| OData によるリモート フィルタリング | OData は、データ ソースに大量のレコードがある場合にコンボをフィルター処理する方法を提供します。igCombo コントロールは、サービスのフィルター結果の適切な要求の送信を内部処理します。 | | +| ASP.NET MVC ヘルパーによるリモート フィルタリング | environment:ProductNameMVC Combo は、ビジネス オブジェクトのコレクションにバインドする場合にサーバー側フィルタリングを設定する API を提供します。 | comboDataSourceAction | + + + +##OData リスト フィルタリングを構成する + + +###OData リスト フィルタリング構成の詳細 + + +`igCombo` コントロールは OData サービスにバインドできます。OData プロトコルはフィルタリングをサポートしているため、`igCombo` は OData サービスからの自動補完のフィルタリング処理に必要な要求パラメーターを内部処理します。アプリケーションで多数のオプションから補完するコンボが必要な場合、OData でサーバー側フィルタリングを使用すると、ローカルにバインドする必要がある大量のデータをダウンロードする必要がなくなります。 + +###OData リスト フィルタリング構成のプロパティ設定 + + +以下の表は、プロパティ設定の推奨構成をマップしています。プロパティは `igCombo` オプションからアクセスされます。 + + +| 目的 | 使用するプロパティ: | それを次に設定... | +| --- | --- | --- | +| OData でリモート フィルタリングを構成する | dataSource, filteringType, responseDataKey, valueKey, textKey | string - OData サービス URL, remote, d.results, string - リストの項目の一意のキー, string - リストに表示するフィールド | + + +これらのプロパティの詳細情報は、プロパティ参照セクションのリストを参照してください。 + +- `igCombo` のオプション + +###OData リスト フィルタリング構成の例 + + +#### 概要 + +この例は、JSONP 形式を使用した OData サービスでリモート フィルタリングの `igCombo` コントロールを構成する方法を示します。 + +#### 要件 + +この手順を実行するには、以下が必要です。 + +- OData サービスへのアクセス + +#### 概要 + +以下はプロセスの概念的概要です。 + +1. リモート フィルタリングを有効にする +2. データ ソースの構成 +3. 応答データ キーの構成 +4. 値キーの構成 +5. テキスト キーの構成 + +#### 手順 + +1. リモート フィルタリングを有効にします。 + + `igCombo` コントロールにサーバーへフィルタリング パラメーターを送信するよう指示するため filteringType オプションを「remote」に設定します。 + + **HTML の場合:** + +```html + filteringType: "remote" +``` + + **ASPX の場合:** + +```csharp + FilteringType(ComboFilteringType.Remote) +``` + +2. データ ソースの構成 + + OData サービスの URL に dataSource オプションを設定します。{environment:ProductName} OData サービスの場合、ブラウザーのクロスドメインの制限を回避するには JSONP を使用します。これは、OData 要求 URI でコールバック パラメーターを渡すことで要求される形式です。 + + **HTML の場合:** + +```html + dataSource: "http://igniteui.com/api/products?callback=?" +``` + + **ASPX の場合:** + +```csharp + DataSource("http://igniteui.com/api/products?callback=?") +``` + +3. 応答データ キーの構成 + + データは特定のスキーマ内の OData から返されます。OData v1 サービスにアクセスしている場合、このキーは通常「d」です。{environment:ProductName} サービスは OData v2 で応答キーは「d.results」です。 + + **HTML の場合:** + +```html + responseDataKey: "d.results" +``` + + **ASPX の場合:** + +```csharp + ResponseDataKey("d.results") +``` + +4. 値キーを構成します。 + + 値キーを設定すると、`igCombo` コントロールはどのフィールドが各ドロップダウン項目の一意の値を提供するか指示されます。この値は変化し、`igCombo` コントロールがバインドされるデータのフィールドに依存しています。 + + **HTML の場合:** + +```html + valueKey: "ID" +``` + + **ASPX の場合:** + +```csharp + ValueKey("ID") +``` + +5. テキスト キーを構成します。 + + テキスト キーを設定すると、`igCombo` コントロールはどのフィールドが各ドロップダウン項目のテキストを提供するか指示されます。この値は変化し、`igCombo` コントロールがバインドされるデータのフィールドに依存しています。 + + **HTML の場合:** + +```html + textKey: "ProductName" +``` + + **ASPX の場合:** + +```csharp + TextKey("ProductName") +``` + +#### コード例 + +以下のリストは、この例で OData でリスト フィルタリングの構成に使用するコード全体を示します。 + +**HTML の場合:** + +```html +$("#comboTarget").igCombo({ + filteringType: "remote", + responseDataKey: "d.results", + valueKey: "ID", + textKey: "ProductName", + dataSource: "http://igniteui.com/api/products?callback=?" +}); +``` + +**ASPX の場合:** + +```csharp +<%= Html. + Infragistics(). + Combo(). + ID("comboTarget"). + FilteringType(ComboFilteringType.Remote). + DataSource("http://igniteui.com/api/products?callback=?"). + ResponseDataKey("d.results"). + ValueKey("ID"). + TextKey("ProductName"). + Render() +%> +``` + +##ASP.NET MVC リスト フィルタリングを構成する + + +###ASP.NET MVC リスト フィルタリング構成の詳細 + + +{environment:ProductNameMVC} `Combo` は主に、C# または Visual Basic.NET でビヘイビアーを構成しながら、クライアント側で必要な jQuery および HTML を描画する機能を果たします。 + +{environment:ProductNameMVC} の他の部分は、サーバーへのリモート操作を簡単に行う機能を果たします。これは `ActionResult` メソッドに `ComboDataSourceAction` 属性を修飾できる `igCombo` コントロールに当てはまり、ヘルパーはサーバー側によるデータ ソースのクエリを簡単に行い、適切なデータをクライアントに返すことができます。 + +###ASP.NET MVC リスト フィルタリング構成のプロパティ設定 + + +以下の表は、プロパティ設定の推奨構成をマップしています。プロパティは [プロパティへのパス] からアクセスされます。 + + +| 目的 | 使用するプロパティ: | それを次に設定... | +| --- | --- | --- | +| environment:ProductNameMVC でリモート フィルタリングを構成する | , , , , ComboDataSourceAction | IQueryable オブジェクト, ComboDataSourceAction への string URL, remote, filter, フィルター要求 ActionResult メソッドの修飾に使用する属性 | + + + +これらのプロパティの詳細情報は、プロパティ参照セクションのリストを参照してください。 + +- +- + +###ASP.NET MVC リスト フィルタリング構成の例 + + +#### 概要 + +この例は、{environment:ProductNameMVC} でリモート フィルタリングを有効にする方法を示しています。この構成では、データ フィルタリング操作のアクション メソッドが定義されています。`igCombo` コントロールはサーバーのデータにバインドされており、クライアントでフィルタリング操作が発生すると、フィルターされたデータの要求がアクション メソッドに送信されます。 + +#### 要件 + +この手順を実行するには、以下が必要です。 + +- ASP.NET MVC アプリケーション +- プロジェクトで参照されている `Infragistics.Web.Mvc.dll` アセンブリ +- {environment:ProductNameMVC} を通してデータにバインドされている `Combo` コントロール + +#### 概要 + +以下はプロセスの概念的概要です。 + +1. コンボで内部処理するサーバー要求の構成 +2. リモート フィルタリングの構成 + +#### 手順 + +1. **コンボで内部処理するサーバー要求の構成** + + サーバーからの要求を内部処理させるには、`ComboDataSource` を定義し、サーバーのコントローラーで構成する必要があります。`ComboDataSourceAction` は、コントローラーで構成された `ActionResult` に適用できる属性です。`ActionResult` に属性が構成され、`igCombo` がコントローラー アクションへの URL で提供されている場合、サーバーへの要求はコンボにより内部処理されます。`igCombo` は、サーバー上でこのアクションに送信されるクエリ パラメーターで URL を構築します。いったんアクションが要求を受信すると、IQueryable データ ソース オブジェクトをフィルター処理し、フィルターされた JSON 値をクライアントに返すよう `ComboDataSourceAction` によりロジックが追加で行われます。 + + **C# の場合:** + +```csharp + [ComboDataSourceAction] + public ActionResult ComboData() + { + return View(this.GetColors()); + } +``` + + 特別なフィルタリング ロジックを使用しなくても、データへ同じ呼び出しを行っていることがわかると思います。 + +2. **リモート フィルタリングを構成します。** + + 最後に、`ComboDataSourceAction` にプロパティをいくつか設定する必要があります。`DataSourceUrl` は `ActionResult` メソッド名をポイントします。また、`FilterExprUrlKey` を `ComboDataSourceAction` で必要な URL パラメーターである「filter」に設定する必要があります。この文字列は要求 URL でトークンとして渡され、サーバーへのフィルタリング式を識別します。ASP.NET MVC ヘルパーを使用する場合に `FilterExprUrlKey` を「filter」に設定する理由は、`ComboDataSourceAction` のロジックが特に要求 URL クエリ パラメーターの「filter」を検索し、フィルタリング式情報を抽出するためです。 + + **C# の場合:** + +```csharp + comboViewModel.DataSourceUrl = Url.Action("combodata"); + comboViewModel.FilteringType = ComboFilteringType.Remote; + comboViewModel.FilterExprUrlKey = "filter"; +``` + +##関連トピック + + +以下は、その他の役立つトピックです。 + +- [igCombo の構成](/igcombo-configuring) + +- [jQuery および MVC API リファレンス リンク (igCombo)](/igcombo-jquery-and-asp-net-mvc-helper-api-links) + + + + + + diff --git a/docs/jquery/src/content/ja/topics/controls/igcombo/configuring/configure-selection.mdx b/docs/jquery/src/content/ja/topics/controls/igcombo/configuring/configure-selection.mdx new file mode 100644 index 0000000000..06f3f00d06 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igcombo/configuring/configure-selection.mdx @@ -0,0 +1,268 @@ +--- +title: "選択の構成 (igCombo)" +slug: igcombo-configure-selection +--- +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# 選択の構成 (igCombo) + + + +##トピックの概要 + + +###目的 + + +`igCombo`™ コントロールは、選択ビヘイビアーをプログラム的に変更するための単一の選択および複数選択、チェックボックス、選択イベント、および API をサポートしています。このトピックでは、選択機能を構成する方法を示します。 + +###このトピックの内容 + + +このトピックは、以下のセクションで構成されます。 + +- [igCombo 選択構成の概要](#configuration_overview) +- [複数選択の構成](#configure_multiple_selection) + - [複数選択の詳細](#multiple_selection_details) + - [複数選択の設定](#multiple_selection_settings) +- [コード例: チェックボックスの構成](#code_example) +- [選択のクリア](#clear_selection) + - [選択の詳細のクリア](#clear_selection_details) + - [選択の設定のクリア](#clear_selection_settings) +- [選択イベントの処理](#handle_selection_events) + - [選択イベントの詳細](#selection_events_details) + - [選択イベントの設定](#selection_events_settings) +- [選択のキャンセル](#cancel_selection) + - [概要](#cancel_selection_introduction) + - [概要](#cancel_selection_overview) + - [手順](#cancel_selection_steps) +- [関連トピック](#related_topics) + +###前提条件 + + +以下の表は、このトピックの情報を完全に理解するために前提条件を示しています。 + +**トピック** + +[igCombo の概要](/igcombo-overview)および [igCombo の追加](/igcombo-getting-started)トピックをお読みください。 + +**外部リソース** + +まず以下のセクションを読む必要があります。 + +- [jQuery bind() API](http://api.jquery.com/bind/) +- [jQuery live() API](http://api.jquery.com/live/) + +##igCombo 選択構成の概要 + + +###選択の構成 + + +以下の表は、`igCombo` コントロールの構成可能なビヘイビアーを示しています。 + + +| 構成可能な動作 | ビヘイビアーの詳細 | 構成プロパティ | +| --- | --- | --- | +| 複数選択 | 複数選択では、ユーザーはドロップダウンから、またはテキスト ボックスに複数の値を入力してコンボの 1 つ以上の項目を選択できます。 | | +| 選択のクリア | igCombo コントロールから選択をプログラム的にクリアします。 | | +| 選択イベントの処理 | 選択イベントをキャプチャし、発生している選択操作に対するロジックを実行します。 | | +| 選択イベントの処理 | 選択イベントをキャプチャし、発生している選択操作に対するロジックを実行します。 | , | +| 選択のキャンセル | 選択操作をキャンセルするには、選択変更イベントをキャンセルします | | + + + +##複数選択の構成 + + +###複数選択の詳細 + + +複数選択が有効になっている場合、ユーザーはマウスまたはキーボードによってドロップダウン リストから複数項目を選択できます。また、テキスト ボックスに複数の値を入力し、`itemSeparator` で区切って対応する値を選択することもできます。`itemSeparator` のデフォルト値は `', '` です。 + +最後に、複数選択が簡単にできるようチェックボックスを有効にできます。 + +![](../../../images/images/Configure_Selection_in_the_igCombo__01.png) + +###複数選択の設定 + + +以下の表は、プロパティ設定の推奨構成をマップしています。プロパティは `igCombo` コントロールのオプションからアクセスされます。 + + +| 構成の目的: | このオプションの使用: | プロパティ値 | +| --- | --- | --- | +| 複数選択 | | true | +| チェックボックスの表示 | | true | + + +###コード例: チェックボックスの構成 + + +以下のパラメーターを指定した `igCombo` コントロール オプションを使用して複数選択を構成するため、この例で使用されている完全なコードを次に示します。 + +**複数選択** - チェックボックスで有効 + +**HTML の場合:** + +```html + +``` + + + +**ASPX の場合:** + +```csharp +<%= Html. + Infragistics(). + Combo(). + DataSource(this.Model as IQueryable). + MultiSelectionSettings(ms => { + ms.Enabled(true); + ms.ShowCheckBoxes(true); + }). + Render() +%> +``` + +###複数選択プロパティの参照 + + +これらのプロパティの詳細情報は、プロパティ参照セクションのリストを参照してください。 + +**igCombo のオプション** + +####選択のクリア + + +######選択の詳細のクリア + + +`igCombo` コントロールの選択をプログラム的にクリアするには、deselectAll メソッドを使用します。 + +![](../../../images/images/Configure_Selection_in_the_igCombo__02.png) + +######選択の設定のクリア + + +以下の表は、要求ビヘイビアーをプロパティ設定にマップしています。プロパティは `igCombo` オプションからアクセスされます。 + + +| 目的: | このメソッドおよびイベントの使用: | +| --- | --- | +| 選択のクリア | | +| 選択が変更された後でイベントを処理します | | + + +###選択イベントの処理 + + +######選択イベントの詳細 + + +選択イベントを使用して、選択操作の発生時にロジックを実行できます。`selectionChanging` はコントロール内で選択が変更される前に発生し、`selectionChanged` イベントは igCombo の選択が変更された直後に発生します。 + +######選択イベントの設定 + + +以下の表は、プロパティ設定の推奨構成をマップしています。プロパティは `igCombo` オプションからアクセスされます。 + + +| 目的: | このイベントの使用: | プロパティ値 | +| --- | --- | --- | +| 変更中の選択の前にイベントを処理します | | `function()` | +| 選択が変更された後でイベントを処理します | | `function()` | + + +##選択のキャンセル + + +###概要 + + +`selectionChanging` イベントを処理することで、選択操作をキャンセルできます。 + +###概要 + + +- 以下はプロセスの概念的概要です。 + +- `selectionChanging` イベントの処理 + +- false を返すことによるイベントのキャンセル + +###手順 + + +1. `selectionChanging` イベントを処理します。 + + 1. ハンドラー関数を定義します。 + + `selectionChanging` イベントが発生したときに呼び出される関数を定義します。 + + **HTML と ASPX の場合:** + +```html + +``` + + 2. `selectionChanging` イベントのハンドラーを構成します。 + + いったんハンドラーを定義したら、`selectionChanging` イベントのハンドラーとして設定する必要があります。jQuery では、これはウィジェットがインスタンス化されるときに行うことができます。ASP.NET MVC では、jQuery live または bind API を使用してイベントを添付する必要があります。また live または bind API の使用は、純粋な jQuery 実装のイベントを添付するためのオプションです。このイベントの型は「igcomboselectionchanging」です。 + + **HTML の場合:** + +```html + $("#comboTarget").igCombo({ + selectionChanging: comboSelectionChanging + }); +``` + + **ASPX の場合:** + +```csharp + $("#comboTarget").bind("igcomboselectionchanging", comboSelectionChanging); +``` + +2. false を返すことでイベントをキャンセルします。 + + **HTML と ASPX の場合:** + +```html + +``` + +##関連トピック + + +以下は、その他の役立つトピックです。 + +- [igCombo の構成](/igcombo-configuring) + + + + + + diff --git a/docs/jquery/src/content/ja/topics/controls/igcombo/configuring/configuring.mdx b/docs/jquery/src/content/ja/topics/controls/igcombo/configuring/configuring.mdx new file mode 100644 index 0000000000..d37d506709 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igcombo/configuring/configuring.mdx @@ -0,0 +1,37 @@ +--- +title: "igCombo の構成" +slug: igcombo-configuring +--- + +# igCombo の構成 + + + +##このグループのトピックについて + + +### 概要 + +このグループのトピックでは、{environment:ProductName} コンボ コントロールの構成方法について説明します。 + +### トピック + +- [選択の構成 (igCombo)](/igcombo-configure-selection): このトピックでは、選択機能を構成する方法を示します。 + +- [自動補完の構成 (igCombo)](/igcombo-configure-auto-suggest): このトピックでは、`igCombo` コントロールの自動補完および各種フィルタリング オプションを構成する方法を説明します。 + +- [リモート フィルタリングの構成 (igCombo)](/igcombo-configure-remote-filtering): このトピックでは、`igCombo` コントロールで自動補完および各種フィルタリング オプションを構成する方法を説明します。 + +- [ロード オン デマンドを構成する (igCombo)](/igcombo-load-on-demand): このトピックでは、`igCombo` コントロールのロード オン デマンド機能を紹介し、コード例を示して、その構成および使用方法について説明します。 + +- [Knockout サポートの構成 (igCombo)](/igcombo-knockoutjs-support): このトピックは、Knockout ライブラリ により管理されるView-Model のオブジェクトをバインドするために `igCombo` コントロールを構成する方法について説明します。 + +- [パフォーマンスの最適化 (igCombo)](/igcombo-optimize-performance): このトピックでは、項目の仮想化機能を有効にして `igCombo` コントロールのスクロール時のパフォーマンスを最大限に高めるための手順を説明します。 + +- [ASP.NET MVC 構成 (igCombo)](/configuring-asp-net-mvc): このトピックは、`igCombo` を基本の ASP.NET MVC シナリオで使用する方法を紹介します。 + + + + + + diff --git a/docs/jquery/src/content/ja/topics/controls/igcombo/configuring/grouping.mdx b/docs/jquery/src/content/ja/topics/controls/igcombo/configuring/grouping.mdx new file mode 100644 index 0000000000..adfd5940f3 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igcombo/configuring/grouping.mdx @@ -0,0 +1,76 @@ +--- +title: "グループ化の構成 (igCombo)" +slug: igCombo-grouping +--- + +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# グループ化の構成 (igCombo) + +グループ化機能を使用すると、項目を特定の基準または共通カテゴリ別にグループ化することができます。 + +##トピックの概要 +### 目的 +このトピックでは、グループ化機能の使用方法、`Grouping` ウィジェットの主なプロパティの概説と実行可能な構成を説明します。 +### このトピックの内容 + +このトピックは、以下のセクションで構成されます。 + +- [概要](#introduction) +- [グループ化の概要](#groupingOverview) +- [関連コンテンツ](#relatedContent) + +## 概要 +`igCombo` がサポートするグループ化機能は、関連する項目をグループ化することができます。これは、バージョン 15.2 からの機能です。以下の図に、項目を車`種`別に昇順でグループ化した `igCombo` を示します。 +> **注:** デフォルトでは、並べ替え順序は、`昇順`に設定されています。 + +![](../../../images/images/igCombo_Grouping.png) + +##グループ化の概要 +コンボの`グループ化`を有効にするには、 プロパティを設定する必要があります。このプロパティは、レコードのグループ化で使用する`列の名前`で表示されます。コンボを初期化すると、すべての項目がキーによる昇順でグループ化されます。`並べ替え方向`は、 プロパティを使用して変更できます。以下のコード スニペットにこの例を示します。 +**JavaScript の場合:** + +```js + +$(".selector").igCombo({ + dataSource: data, + textKey: 'name', + valueKey: 'id', + closeDropDownOnBlur: false, + grouping: { + key: 'carType', + dir: 'desc' + } +}); +``` + +**ASPX の場合:** + +```csharp +@(Html.Infragistics().ComboFor(item => item.ID) + .Width("400px") + .DataSourceUrl(Url.Action("ComboDataLocation")) + .ValueKey("ID") + .TextKey("CarName") + .CompactData(false) + .Grouping(gr => + { + gr.Key("Country"); + gr.Dir(ComboGroupingDirection.Desc); + }) + .DataBind() + .Render() +) +``` + +> **注:** ロードオンデマンドおよびグループ化を使用する場合は、データソースのすべての項目をグループ化に使用したキーで並べ替えることをお勧めします。 + +## 関連コンテンツ +###API ヘルプ + +- + +### サンプル + +このトピックについては、以下のサンプルも参照してください。 +- [ヘッダーテンプレートおよびフッターテンプレートを使用するグループ化]({environment:SamplesUrl}/combo/grouping): このサンプルでは、ヘッダーテンプレートおよびフッターテンプレートを使用した効率的なグループ化の方法を紹介します。 diff --git a/docs/jquery/src/content/ja/topics/controls/igcombo/configuring/knockoutjs-support.mdx b/docs/jquery/src/content/ja/topics/controls/igcombo/configuring/knockoutjs-support.mdx new file mode 100644 index 0000000000..c5eee95f74 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igcombo/configuring/knockoutjs-support.mdx @@ -0,0 +1,237 @@ +--- +title: "Knockout サポートの構成 (igCombo)" +slug: igcombo-knockoutjs-support +--- +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# Knockout サポートの構成 (igCombo) + + + +## トピックの概要 + + +### 目的 + +このトピックは、[Knockout ライブラリ](http://knockoutjs.com/) により管理される VIew-Model のオブジェクトをバインドするために `igCombo` コントロールを構成する方法について説明します。 + +### 前提条件 + +以下の表は、このトピックを理解するための前提条件として必要なトピックと外部リソースの一覧です。 + + +**トピック** + + +- [igCombo の概要](/igcombo-overview) : このトピックでは、機能、データ ソースへのバインド、要件、およびテンプレートに関する情報を含めて、`igCombo` コントロールの概要を示します。 + +- [igCombo の追加](/igcombo-getting-started): このヘルプ トピックは、クライアント上では JSON データにバインドし、サーバー上でビジネス オブジェクトのコレクションにバインドするなど異なるアプリケーションのシナリオにおいて基本的な `igCombo` コントロールをセットアップする方法について説明します。 + + +**外部リソース** + +- [Knockout インタラクティブ チュートリアル](http://learn.knockoutjs.com/) + + + +### このトピックの内容 + +このトピックは、以下のセクションで構成されます。 + +- [概要](#introduction) +- [Knockout のサポートによる igCombo 構成](#igCombo-knockout-support) +- [コード例](#code-examples) +- [コード例: Knockout ビューモデル オブジェクトにバインドされる基本的なコンボ ボックス](#basic-combo-box-bound) +- [関連コンテンツ](#related-content) + - [トピック](#topics) + - [サンプル](#samples) + - [リソース](#resources) + + + +## 概要 + + +### Knockout サポートの概要 + +`igCombo` コントロールにおける Knockout ライブラリのサポートは、開発者が Knockout ライブラリとその宣言構文を使用してツリー コントロールを初期化し構成するための簡単な方法を提供することを目的としています。 + +Knockout のサポートは、Knockout バインディングがページに適用されるときに最初に呼び出されるKnockout 拡張機能として、ページの存続期間中 (View-Model への外部更新が起こったとき) に実装されます。 + +Knockout マネージのデータ構造にバインドされる `igCombo` をインスタンス化するには、`igCombo` 構成オプションをdiv、input、span または select の要素の data-bind 属性に指定する必要があります。コンボは、JavaScript を使用してコントロールを作成する場合同様に div の場所で描画されます。この点において最も重要な `igCombo` 構成オプションについては、以下の「[Knockout による構成](#igCombo-knockout-support)」セクションを参照してください。data-bind 属性においては、ビジネス事例に関係するその他の `igCombo` オプションのいずれにも指定できます。 + +`igCombo` コントロールの Knockout 拡張機能を使用すると、ドロップダウンから新しい値を選択することにより `igCombo` 選択項目が変更されるたびに、この拡張機能は監視可能機能に通知し、対応するすべてのビューを更新します。また、外部ビューが更新されると、拡張機能の監視可能機能は `igCombo` 選択項目を更新します。(これは、その他のKnockout 拡張機能から予想されるビヘイビアです) + +それに加え、`igCombo` のKnockout 機能拡張は、`igCombo` ドロップダウンがバインドされるデータ ソースの変更に対して反応するように構成できます。これは、データ ソースで追加、削除または編集されデータ ソースが監視可能として構成されると、拡張機能は要素の追加および削除を追跡し、その結果ドロップダウン リストを更新できるようになります。詳細については、「[コード例: Knockout ビューモデル オブジェクトにバインドされる基本的なコンボ ボックス](#basic-combo-box-bound)」を参照してください。 + +>**注:** `igCombo` バージョン 14.2 以前の Knockout サポートと異なり、この拡張機能ではオプションと View-Model にバインドされる方法が異なります。これらの変更は、バージョン 15.1 で公開される新しい `igCombo` コントロールのニーズに合わせて導入されました。後述の [Knockout を使用した構成](#igCombo-knockout-support) のセクションと、[新しいコンボへの移行](/igcombo-migrating-to-the-new-combo) のトピックを参照してください。 + +##Knockout のサポートによる igCombo 構成 + + +### Knockout のサポートによる igCombo 構成の概要表 + +以下の表は、これらのタスクを管理する各プロパティに対し Knockout 使用シナリオに関連する `igCombo` コントロールの構成タスクをマップします。いくつかの実際の実装コード例は、表の下に示します。 + + + +| 構成タスク | 必須ですか？ | 詳細 | プロパティ | +| --- | --- | --- | --- | +| ビュー モデル オブジェクトのフィールドを igCombo の選択されている項目にバインド | 必須 | igCombo で選択されている項目の配列。selectedItems プロパティを構成すると、コンボの選択した項目およびビュー モデルの間のデータ交換を有効にします。 | `selectedItems`, 利用可能な値:プリミティブの配列オブジェクトの配列, **注:** value プロパティは igCombo で利用可能ではありません。Knockout 拡張機能のみに利用可能です。 | +| igCombo のデータ ソースの構成 | 必須 | $.ig.DataSource が受け入れる有効なデータ ソース、または $.ig.DataSource 自身のインスタンスを設定します。 | | +| 項目の表示テキストを含むデータ ソース フィールドを構成 | 必須 | 項目の表示テキストを含むデータ ソース フィールドの名前を設定します。項目が選択されている場合、各項目のテキストがドロップダウン リストおよびコンボ ボックスで表示されます。同じテキストが text オプションにも保存されます。 | | +| 項目の値を含むデータ ソース フィールドを構成 | 必須 | 項目の値を含むデータ ソース フィールド (ID フィールド) の名前を設定します。igCombo 項目の値がこのフィールドにマップされます。 | | +| 選択した項目のタイプを定義 | オプション | 配列の選択されている項目のタイプを primitive または object に設定します。拡張機能が選択した項目のタイプを自動的に定義するため、このオプションは必須ではありません。項目が選択されていないため、拡張機能が自動的にタイプを定義できない場合に `selectedItemType` オプションを使用できます。 | `selectedItemType`, 利用可能な値:"primitive""object", **注:** value プロパティは igCombo で利用できません。Knockout 拡張機能でのみ利用可能です。 | + + + +## コード例 + + +### コード例の概要 + +以下の表は、このトピックで使用したコード例を示しています。 + + +- [Knockout ビューモデル オブジェクトにバインドされる基本的なコンボ ボックス](#basic-combo-box-bound): この例は、Knockout 監視可能 View-Model オブジェクトにバインドされる `igCombo` コントロールの基本構成を示します。 + +## コード例: Knockout ビューモデル オブジェクトにバインドされる基本的なコンボ ボックス + + +この例は、Knockout 監視可能 View-Model オブジェクトにバインドされる `igCombo` コントロールの基本構成を示します。Knockout の宣言構文を使用して、span 要素の data-bind 属性からコンボをインスタンス化し View-Model 監視可能プロパティにバインドします。 + + +### View-Model オブジェクトを作成する + +以下のコードは、Knockout により管理される監視可能プロパティを宣言するビューモデル オブジェクトを示します。 + +**JavaScript の場合:** + +```js +var model = [ + { name: "Adam Sandler", id: "1" }, + { name: "Brooke Shields", id: "2" }, + { name: "Charles Chaplin", id: "3" }, + . . . +]; +var viewModel = new ViewModel(model); +function ViewModel(actorsList) { + var self = this; + this.actorsList = actorsList; + // The array of actor objects to be bound to the drop down list + this.actors = ko.observableArray(self.actorsList); + // Select the first actor, using his id. + this.selectedActor = ko.observableArray([self.actors()[0].id]); + // Alternative way to select an actor, using the whole object, containing value and text + // this.selectedActor = ko.observableArray([self.actors()[0]]); + this.isVisible = true; +} +``` +>**注:** 選択した値を含むプリミティブの配列を渡すことにより、または項目の値とテキストを含むオブジェクトの配列を渡すことにより、`igCombo` 項目を選択できます。HTML 選択要素に加えて View-Model がアタッチされ、同時に `igCombo` がアタッチされる場合には、プリミティブ値の使用を推奨します。理由は、HTML 選択が View-Model にアタッチされている場合、KnockoutJS ライブラリはプリミティブの配列で動作するためです。 + +#### 宣言された Knockout バインディングをページに適用 + +以下のコード スニペットは、宣言されたKnockout バインディングをページに適用する方法を示します。`ko.applyBindings()` 呼び出しは、[Infragistics Loader の使用](/using-infragistics-loader) の即時コールバック内で出される点にご注意ください。これは、Knockout のコンボ拡張機能はバインディングが適用される前にページに読み込まなければならないため必要です。 + +**JavaScript の場合:** + +```js +$.ig.loader({ + scriptPath: "http://localhost/ig_ui/js/", + cssPath: "http://localhost/ig_ui/css/", + resources: "igCombo,extensions/infragistics.ui.combo.knockout-extensions.js", + ready: function () { + ko.applyBindings(viewModel); + } +}); +``` + +#### View 内の igCombo のバインディング プロパティを宣言 + +##### igCombo ハンドラー + +以下のコードは、ビュー内に `igCombo` のバインディング プロパティを宣言する方法を示します。最も重要なのは、対応する span 要素の data-bind 属性におけるインスタンス化プロパティの宣言部分です。 + +**HTML の場合:** + +```html + +``` + +View-Model オブジェクトの `selectedItems` プロパティと `dataSource` プロパティの両方が監視可能である点にご注意ください。selectedItems プロパティでは、View-Model オブジェクトは `igCombo` 選択項目を動的に更新でき、逆も同様です。`igCombo` は View-Model オブジェクトを更新できるようになります。`dataSource` を監視可能配列に構成すると、`igCombo` は要素の追加と削除を追跡し、結果としてドロップダウン リストを更新できるようになります。これらのプロパティのいずれかを監視不可能として宣言できます。これは、対応する機能を失うことを意味します。監視可能として定義される View-Model オブジェクトがないと、`igCombo` に Knockout サポートはなく、宣言構文および Knockout バインディング拡張機能を使用することは意味がありません。 + +##### igComboVisible ハンドラー + +以下のコードは `igComboVisible` バインディングを宣言する方法を紹介します。Knockout の visible バインディングと同じ機能があります。 + +**JavaScript の場合:** +```js +function viewModel() { + this.isVisible = ko.observable(true); +} +``` + +**HTML の場合:** + +```html + +``` + +`igCombo` コントロールは inline-block プロパティを持つ HTML 要素に表示されます。Knockout の visible バインディングが要素の表示を block に設定するため、`igCombo` の外観が崩れます。カスタム `igComboVisible` バインディングを使用すると、正しく `igCombo` を表示し、Knockout の visible バインディングの機能を提供します。 + +##### igComboDisable ハンドラー + +以下のコードは `igComboDisable` バインディングを宣言する方法を紹介します。Knockout の [`disabled`](http://knockoutjs.com/documentation/disable-binding.html) バインディングと同じ機能があります。 + +**JavaScript の場合:** + +```js +function viewModel() { + this.isDisabled = ko.observable(false); +} +``` + +**HTML の場合:** + +```html + +``` + +igCombo にコントロールの有効化/無効化を処理する特別なロジックがあるため、Knockout の [`disabled`](http://knockoutjs.com/documentation/disable-binding.html) バインディング ハンドラーが動作しません。 + +## 関連コンテンツ + + +### トピック + +このトピックの追加情報については、以下のトピックも合わせてご参照ください。 + +- [Knockout サポート (エディター)](../../igEditors/Config/02_Configuring Knockout Support (Editors).mdx): このトピックは、[Knockout ライブラリ](http://knockoutjs.com/)により管理されるビューモデル オブジェクトをバインドするために {environment:ProductName} エディター コントロールを構成する方法について説明します。 +- [新しいコンボへの移行](/igcombo-migrating-to-the-new-combo#ko_changes): このトピックは、古いコンボから新しいコンボへの移行を支援することを目的としています。ドキュメントには、igCombo の Knockout 統合での変更点が含まれます。 + +### サンプル + +このトピックについては、以下のサンプルも参照してください。 + +以下のサンプルでは、KnockoutJS データ バインディングによって処理されるデータを igCombo にバインドする方法を紹介します。コンボのドロップダウンに配列をバインドし、model プロパティをコンボの選択項目にバインドします。 + +
    + [{environment:SamplesEmbedUrl}/combo/bind-combo-with-ko]({environment:SamplesEmbedUrl}/combo/bind-combo-with-ko) +
    + +>**注:** Knockout 拡張子が {environment:ProductNameMVC} との互換性がありません。 + +### リソース + +以下の資料 (Infragistics のコンテンツ ファミリー以外でもご利用いただけます) は、このトピックに関連する追加情報を提供します。 + +- [Knockout](http://knockoutjs.com/): これは、Knockout ライブラリのホーム ページです。ライブラリには、完全なドキュメントとサンプルが含まれます。 + + + + diff --git a/docs/jquery/src/content/ja/topics/controls/igcombo/configuring/load-on-demand.mdx b/docs/jquery/src/content/ja/topics/controls/igcombo/configuring/load-on-demand.mdx new file mode 100644 index 0000000000..75d7afbb22 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igcombo/configuring/load-on-demand.mdx @@ -0,0 +1,201 @@ +--- +title: "ロード オン デマンドを構成する (igCombo)" +slug: igcombo-load-on-demand +--- +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# ロード オン デマンドを構成する (igCombo) + + + +##トピックの概要 + + +### 目的 + +このトピックでは、`igCombo`™ コントロールのロード オン デマンド機能を紹介し、コード例を示して、その構成および使用方法について説明します。 + +### 前提条件 + + +**概念** + +- ロード オン デマンド + +**トピック** + + +- [igCombo の概要](/igcombo-overview): このトピックでは、`igCombo` コントロールに関係する概念、たとえば、機能、データ ソースへのバインド、要件、テンプレートといった概念について説明します。 + +- [igCombo の追加](/igcombo-getting-started): このヘルプ トピックでは、基本的な `igCombo` コントロールを設定し、クライアントの JSON データおよびサーバーのビジネス オブジェクトのコレクションにバインドする方法を紹介します。jQuery 環境と ASP.NET MVC 環境の両方を対象にしています。 + +- [igCombo をデータにバインド](/igcombo-binding-to-data): このトピックでは、`igCombo` コントロールをデータにバインドする方法と、データ バインドに関する詳細について説明します。 + + + +#### このトピックの内容 + +このトピックは、以下のセクションで構成されます。 + +- [概要](#introduction) +- [ロード オン デマンドの有効化](#enabling-loadOnDemand) +- [ロード オン デマンドの構成](#configuring-LoadOnDemand) +- [コード例: ロード オン デマンド、ページングとヘッダーおよびフッター テンプレート](#code-example-load) + - [説明](#description) + - [フッター テンプレート変数](#footer-template) + - [コード](#code) +- [関連コンテンツ](#related-content) + - [トピック](#topics) + - [サンプル](#samples) + + + +##概要 + + +### ロード オン デマンド機能の概要 + +`igCombo` コントロールは、ロード オン デマンド機能をサポートしています。ロード オン デマンドを有効にすると、サーバーとクライアントの両方で帯域幅と処理のオーバーヘッドが大幅に削減されます。 + +ロード オン デマンドを有効にすると、まずドロップダウン コンテナーにスクロールバーが表示され、リスト項目の最初のページが表示されます。リストの最後にスクロールすると、非同期コールバックを通じて次の項目ページが取得され、リストの一番下に追加されます。 + + + +##ロード オン デマンドの有効化 + + +### ロード オン デマンドの有効化の概要 + +デフォルトでは、ロード オン デマンドは無効になっています。この機能を有効にするには、`loadOnDemandSettings`.enabled オプションを true に設定する必要があります。 + +**JavaScript の場合:** + +```js +loadOnDemandSettings: { enabled: true } +``` + +または + +**ASPX の場合:** + +```csharp +Html.Infragistics().Combo().LoadOnDemandSettings(load => load.Enabled(true)) +``` + +データをデータ ソースから読み込む間、ドロップダウン リストに読み込みインジケーターが表示されます。データのロードとページ上の表示が完了すると、読み込みインジケーターは削除されます。 + + + +##ロード オン デマンドの構成 + + +### ロード オン デマンドの構成の概要 + +以下の表は、`igCombo` コントロールのロード オン デマンドに関する構成可能な項目と、関連するドロップダウン リストのページング機能の一覧を示します。 + + +| 構成可能な要素 | 詳細 | プロパティ | +| --- | --- | --- | +| ドロップダウン リストのページング | ドロップダウン リストのページ サイズを設定します。 | | +| ドロップダウン リストのヘッダー | ヘッダー テンプレートを通じてドロップダウン リストの見出しラベルを設定します。 | | +| ドロップダウン リストのフッター | ヘッダー テンプレートを通じてドロップダウン リストの見出しラベルを設定します。 | | + + + +##コード例: ロード オン デマンド、ページングとヘッダーおよびフッター テンプレート + + +### 説明 + +この例では、特定のページ サイズを使用してリモート OData データ ソースに対するロード オン デマンド機能を構成する方法を紹介します。 + +コードでは、id が "combo" の作成済みの HTML 入力タグ上に `igCombo` コントロールのインスタンスを作成しています。このコードでは、ドロップダウン リストのページ サイズ初期値が 25 項目に設定されます (pageSize: 25)。`responseDataKey`、`responseTotalRecCountKey`、および `dataSource` オプションは、指定した URL にクエリを実行し、返された JSON オブジェクトの d.results.Results および d.results.Count メンバーを使用してドロップダウン リストを読み込むようコンボに指示する、割り当てられた値です。 + +`headerTemplate` オプションには、HTML コードを表す文字列が割り当てられ、ドロップダウン リストの先頭に表示されます。通常これは、例のように `CSS` クラスで書式設定された単一のタグですが (class=”boxed”)、より複雑な HTML コードの場合もあります。 + +`footerTemplate` オプションには、HTML コードを表す文字列が割り当てられ、いくつかの定義済みの変数を実行時に置換できます。これにより、テンプレートのように動作します。そのオプションに割り当てられた文字列が処理されて変数が置換され、ドロップダウン リストの一番下に表示されます。 + +### フッター テンプレート変数 + +以下の表に、使用可能なフッター テンプレート変数の一覧を示します。 + +| 説明 | 短い名前 | 代替 ASP.NET MVC ヘルパー構文 | +| --- | --- | --- | +| igCombo (dataSource のビュー) 内のレコード数 | {0} | ComboModel.RECORDS_VIEW | +| dataSource 内のレコードの数 | {1} | ComboModel.RECORDS_DATA | +| サーバー上の (フィルター済み) レコードの数 | {2} | ComboModel.RECORDS_SERVER | +| サーバー上のすべてのレコードの数 | {3} | ComboModel.RECORDS_SERVER_TOTAL | + + + +### コード + +**JavaScript の場合:** + +```js +$("#combo").igCombo({ + loadOnDemandSettings: { + enabled: true, + pageSize: 25 + }, + responseDataKey: "d.results.Results", + responseTotalRecCountKey : "d.results.Count", + dataSource: 'http://igniteui.com/api/products?&callback=?', + textKey: "ProductName", + valueKey: "ID", + headerTemplate: '
    Available Products
    ', + footerTemplate: '
    Product Count: {0} of {3}
    ' +}); +``` + +**ASPX の場合:** + +```csharp +<%= + Html.Infragistics().Combo() + .ID("combo") + .DataSource("http://igniteui.com/api/products?&callback=?") + .ResponseDataKey("d.results.Results") + .ResponseTotalRecCountKey("d.results.Count") + .TextKey("ProductName") + .ValueKey("ID") + .LoadOnDemandSettings(load => load.Enabled(true).PageSize(25)) + .HeaderTemplate("
    Available Movies
    ") + .FooterTemplate("
    Movie Count: {0} of {3}
    ") + .Render() +%> +``` + + + +##関連コンテンツ + + +### トピック + +このトピックの追加情報については、以下のトピックも合わせてご参照ください。 + + +- [igCombo の構成](/igcombo-configuring): このトピックでは、`igCombo` コントロールでの各種データ バインド方式について説明し、データ バインディングに関するその他の詳細情報を示します。 + + + +### サンプル + +このトピックについては、以下のサンプルも参照してください。 + +- [ロード オン デマンド]({environment:SamplesUrl}/combo/load-on-demand): このサンプルでは、OData データ ソースを使用して、コンボ ボックスのロード オン デマンド機能とページング機能を使用する方法を紹介します。 + +- [仮想化]({environment:SamplesUrl}/combo/virtualization): このサンプルでは、UI 仮想化を有効にすると、`igCombo` コントロールはコンボでデータの大量を効率的に描画する方法を紹介します。 + +- [フィルタリング]({environment:SamplesUrl}/combo/filtering): このサンプルでは、`igCombo` コントロールのドロップダウン リストは入力値に基づいてフィルターする方法を紹介します。自動補完およびオート コンプリート機能もサポートされます。 + + + + + + + + + + diff --git a/docs/jquery/src/content/ja/topics/controls/igcombo/configuring/optimize-performance.mdx b/docs/jquery/src/content/ja/topics/controls/igcombo/configuring/optimize-performance.mdx new file mode 100644 index 0000000000..d0b5ba589d --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igcombo/configuring/optimize-performance.mdx @@ -0,0 +1,93 @@ +--- +title: "パフォーマンスの最適化 (igCombo)" +slug: igcombo-optimize-performance +--- + +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# パフォーマンスの最適化 (igCombo) + + + +##トピックの概要 + + +###目的 + + +このトピックでは、項目の仮想化機能を有効にして `igCombo`™ コントロールのスクロール時のパフォーマンスを最大限に高めるための手順を説明します。 + +###前提条件 + + +トピック[igCombo の概要](/igcombo-overview)および [igCombo の追加](/igcombo-getting-started)トピックをお読みください。 + +##Infragistics Combo の構成に関する概要 + + +###コントロールの構成 + + +処理するデータが大量にあっても igCombo のドロップダウンを素早くスクロールできるようにするためには、`virtualization` オプションを有効化します。 + + +###仮想化の詳細 + + +`virtualization` オプションを有効にすると、`igCombo` コントロールはリストの HTML 要素を再利用して各項目を表示できるようになります。項目リストのデータがコンパクトな JSON 形式でローカルに記憶されます。igCombo のドロップダウンをスクロールすると同じ HTML 要素が再利用されることになりますが、ドロップダウンにバインドされているデータはスルロールバーの位置によって異なります。 + +![](../../../images/images/igCombo_Optimize_the_igCombos_Performance_01.png) + +###仮想化のプロパティ設定値 + + +以下の表は、プロパティ設定の推奨構成をマップしています。プロパティの設定画面は、`igCombo` コントロールのオプションから呼び出します。 + + +| 目的 | 使用するプロパティ: | それを次に設定... | +| --- | --- | --- | +| 仮想化の有効化 | virtualization | true | + + + +###例: 仮想化の有効化 + + +**HTML の場合:** + +```html +$("#combo").igCombo({ + virtualization: true, +}); +``` + +**ASPX の場合:** + +```csharp +<%= Html. + Infragistics(). + Combo(). + ID("combo"). + Virtualization(true). + Render() %> +``` + +###仮想化のプロパティ設定値 + + +これらのプロパティの詳細情報は、プロパティ参照セクションのリストを参照してください。 + +- + +##関連トピック + + +以下は、その他の役立つトピックです。 + +- [igCombo の構成](/igcombo-configuring) + + + + + + diff --git a/docs/jquery/src/content/ja/topics/controls/igcombo/configuring/typescript-support.mdx b/docs/jquery/src/content/ja/topics/controls/igcombo/configuring/typescript-support.mdx new file mode 100644 index 0000000000..74a4f6a508 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igcombo/configuring/typescript-support.mdx @@ -0,0 +1,141 @@ +--- +title: "TypeScript サポート (igCombo)" +slug: igcombo-typescript-support +--- + +# TypeScript サポート (igCombo) + +## トピックの概要 +本トピックは、TypeScript データソースで `igCombo` を構成する方法について説明します。TypeScript クラスを定義し、クラスのインスタンスでデータソースを作成してデータソースを `igCombo` にバインドします。 + +### このトピックの内容 + +このトピックは、以下のセクションで構成されます。 + +- [プレビュー](#Preview) +- [要件](#Requirements) +- [概要](#Overview) +- [手順](#Steps) + - [HTML の作成](#create_html_markup) + - [TypeScript クラスの作成](#create_typescript_class) + - [データソースの作成](#create_data_source) + - [TypeScript データソースで igCombo を作成](#create_combos) +- [関連コンテンツ](#Related_Content) + +### プレビュー +以下のスクリーンショットは最終結果のプレビューです。 + +![](../../../images/images/igCombo_TypeScript.PNG) + +### 要件 +このサンプルを実行するために以下が必要です。 +- 必要となる {environment:ProductName} の JavaScript と CSS ファイル +- 必須な {environment:ProductName} TypeScript 定義 + +### 概要 +このトピックでは、TypeScript クラスの作成、データソース、および `igCombo` について順を追って説明します。 + +### 手順 + +​HTML の作成 - それぞれ 3 つのコンボでキーボード ナビゲーション、複数選択、フィルタリングをデモします。 + +**HTML の場合:** +```html +
    +

    + キーボード ナビゲーション +

    +
    +
    +
    +

    + チェックボックスの複数選択 +

    +
    +
    +
    +

    + フィルタリング条件 +

    +
    +
    +``` +​TypeScript クラスの作成 - `id`、`mountainName`、`country`、`height`など、山頂とその特徴についての情報を保存します。 + +**TypeScript の場合:** +```typescript +/// +/// +/// +class MountainTop { + id: number; + mountainName: string; + country: string; + height: number; + constructor(inId: number, inMountanName: string, inCountry: string, inHeight: number) { + this.id = inId; + this.mountainName = inMountanName; + this.country = inCountry; + this.height = inHeight; + } +} +``` + +​データソースの作成 - `MountainTop` クラスのインスタンスを　10 個作成し、データソースとなる配列に追加します。 + +**TypeScript の場合:** +```typescript +var mountainTopsData: MountainTop[] = []; +mountainTopsData.push(new MountainTop(1, "Everest", "Nepal/Tibet", 29.035)); +mountainTopsData.push(new MountainTop(2, "K2 (Mount Godwin Austen)", "Pakistan/China", 29.250)); +mountainTopsData.push(new MountainTop(3, "Kangchenjunga", "India/Nepal", 28.169)); +mountainTopsData.push(new MountainTop(4, "Lhotse", "Nepal/Tibet", 27.940)); +mountainTopsData.push(new MountainTop(5, "Makalu", "Nepal/Tibet", 27.766)); +mountainTopsData.push(new MountainTop(6, "Cho Oyu", "Nepal/Tibet", 26.906)); +mountainTopsData.push(new MountainTop(7, "Dhaulagiri", "Nepal", 26.795)); +mountainTopsData.push(new MountainTop(8, "Manaslu", "Nepal", 26.781)); +mountainTopsData.push(new MountainTop(9, "Nanga Parbat", "Pakistan", 26.660)); +mountainTopsData.push(new MountainTop(10, "Annapurna", "Nepal", 26.545)); +``` + +​TypeScript データ ソースで igCombo を作成 - コンボを 3 つ定義し、データソースを割り当てます。 + +**TypeScript の場合:** +```typescript +$(function () { + $("#keyNavigationCombo").igCombo({ + width: "270px", + textKey: "mountainName", + valueKey: "id", + dataSource: mountainTopsData, + multiSelection: { + enabled: true + }, + }); + + $("#checkboxSelectCombo").igCombo({ + width: "270px", + dataSource: mountainTopsData, + textKey: "mountainName", + valueKey: "id", + multiSelection: { + enabled: true, + showCheckboxes: true + } + }); + + $("#filterContainsCombo").igCombo({ + width: "270px", + textKey: "mountainName", + valueKey: "mountainName", + dataSource: mountainTopsData, + filteringType: "local", + filteringCondition: "contains", + highlightMatchesMode: "contains" + }); +}); +``` + +### 関連コンテンツ +以下のトピックでは、このトピックに関連する追加情報を提供しています。 +- [TypeScript で {environment:ProductName} を使用](Using-Ignite-UI-with-TypeScript.html) - このトピックでは、{environment:ProductName} の型定義を TypeScript で使用する方法の概要を説明します。 diff --git a/docs/jquery/src/content/ja/topics/controls/igcombo/getting-started.mdx b/docs/jquery/src/content/ja/topics/controls/igcombo/getting-started.mdx new file mode 100644 index 0000000000..efa1420034 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igcombo/getting-started.mdx @@ -0,0 +1,327 @@ +--- +title: "igCombo の追加" +slug: igcombo-getting-started +--- + +# igCombo の追加 + + + +##トピックの概要 + + +###目的 + + +`igCombo`™ は、jQuery または ASP.NET MVC を使用して動作するよう構成できます。このヘルプ トピックは、クライアントの JSON データおよびサーバーのビジネス オブジェクトのコレクションにバインドしている各環境で基本的な `igCombo` コントロールを設定する方法を示しています。 + +###前提条件 + + +まず以下のトピックを読む必要があります。 + +- [{environment:ProductName} で JavaScript リソースを使用](/deployment-guide-javascript-resources) +- [{environment:ProductName} のスタイル設定とテーマ設定](/deployment-guide-styling-and-theming) + +##基本的な igCombo 実装を作成する + + +###概要 + + +以下の手順は基本オプションの構成方法と、jQuery および ASP.NET MVC の両方を使用したデータへのバインド方法を示しています。 + +###プレビュー + + +以下は最終結果のプレビューです。 + +![](../../images/images/igCombo_Auto_Complete.png) + +###要件 + +この手順を実行するには、以下が必要です。 + +- この例を追加する Web サイトと Web ページ +- Web サイト上の必要な JavaScript リソースおよび jQuery テーマ +- Web ページ上の必要な JavaScript ファイルと CSS ファイルへの参照 +- (ASP.NET MVC) `Infragistics.Web.Mvc.dll` アセンブリへの参照 + +###概要 + + +以下はプロセスの概念的概要です。 + +1. `igCombo` のインスタンス化 +2. データへのバインド +3. (オプション) 幅の構成 +4. (オプション) オートコンプリートの有効化 + +###手順 + +1. **`igCombo` をインスタンス化します。** + + a. **ターゲット要素を定義します。** + + Web ページで、`igCombo` コントロールのベース オブジェクトとしての役割を果たすターゲットの HTML 要素を定義し、その ID を設定します。これは ASP.NET MVC のオプション手順です。 + + **HTML の場合:** + +```html +
    +``` + + `igCombo` をインスタンス化します。jQuery では、document ready JavaScript イベントを使用してコンボをインスタンス化できます。ASP.NET MVC では、{environment:ProductNameMVC} を使用して、`IQueryable` データ ソースにバインドします。 + + **HTML の場合:** + +```html + +``` + + **ASPX の場合:** + +```csharp + <%= Html. + Infragistics(). + Combo(). + ID("comboTarget"). + Render() + %> +``` + +2. **データへバインドします。** + + **a. データを定義します。** + + jQuery では、この例は単純な JSON 配列にバインドします。このデータはページ要求の一部分として渡すか、Web サービスから返すことができます。ASP.NET MVC では、この例はサーバーの Controller クラスで定義され、View でモデルとして返される、Color オブジェクトのコレクションにバインドします。 + + **HTML の場合:** + +```html + var colors = [{ "Name": "Black" },{ "Name": "Blue" },{ "Name": "Brown" },{ "Name": "Red" },{ "Name": "White" },{ "Name": "Yellow" }]; +``` + + **C# の場合:** + +```csharp + public class DefaultController : Controller + { + public ActionResult Index() + { + List colors = new List(); + colors.Add(Color.Black); + colors.Add(Color.Blue); + colors.Add(Color.Brown); + colors.Add(Color.Red); + colors.Add(Color.White); + colors.Add(Color.Yellow); + + return View("default", colors.AsQueryable()); + } + } +``` + + **b. データ ソースを設定します。** + + dataSource オプションを使用してデータをコンボに提供します。ASP.NET MVC では、DataSource メソッドを使用して、Model の一部として渡されるデータにバインドします。 + + **HTML の場合:** + +```html + dataSource: colors +``` + + **ASPX の場合:** + +```csharp + DataSource(this.Model as IQueryable) +``` + + **c. text フィールドおよび value フィールドを構成します。** + + `igCombo` の `textKey` オプションおよび `valueKey` オプションを設定します。この単純な例では、`textKey` と `valueKey` は両方とも「Name」という同じオブジェクト値に設定されています。ただし、`textKey` および `valueKey` は 2 つの異なるフィールドとして設定できます。項目を正しく選択するには、`valueKey` を一意の値に設定する必要があります。たとえば、`valueKey` は各 Color オブジェクトの ID フィールドをポイントします。`textKey` は、どのフィールドを使用してドロップダウン リストでバインドされたアイテムを表すテキストを表示するかを決定します。 + + >**注:** 「key」プロパティは、コンボのデータ ソースのどのプロパティを、コンボの選択された値および選択されたテキストとして使用するかを指定します。 + + **HTML の場合:** + +```html + textKey: "Name", + valueKey: "Name", +``` + + **ASPX の場合:** + +```csharp + TextKey("Name"). + ValueKey("Name"). +``` + + **d. (ASP.NET MVC) Render() を呼び出します。** + + {environment:ProductNameMVC} `Combo` をインスタンス化する場合、他のオプションの構成がすべて終了した後、最後にレンダリング メソッドを呼び出します。これは、クライアントで `igCombo` をインスタンス化するのに必要な HTML および JavaScript を描画するメソッドです。 + + **ASPX の場合:** + +```csharp + Render() +``` + +3. **(オプション) 幅を構成します。** + + width オプションは igCombo のベース DOM 要素の width 属性を構成する文字列値を受け入れます。値は、対象の Web ブラウザーでサポートされている任意の HTML サイズ単位に設定できます。 + + **HTML の場合:** + +```html + width: "200px" +``` + + **ASPX の場合:** + +```csharp + Width("200px") +``` + +4. **(オプション) オートコンプリートの有効化** + + autoComplete オプションを使用して、`igCombo` でオートコンプリートを有効にします。 + + **HTML の場合:** + +```html + autoComplete: true +``` + + **ASPX の場合:** + +```csharp + AutoComplete(true) +``` + +##コード例 + + +###例の概要 + + +以下の表は、以下に提供されたコード例を示しています。 + + +| | | +| --- | --- | +| 例 | 説明 | +| 基本的な jQuery の実装 | jQuery でのデータへのバインド方法と基本オプションの設定方法を示します。 | +| 基本的な ASP.NET MVC の実装 | environment:ProductNameMVC を使用したデータへのバインド方法と基本オプションの設定方法を示します。 | + + +###コード例: 基本的な jQuery の実装 + +以下のコードは、以下のパラメーターを指定した jQuery を使用して、`igCombo` コントロールを作成・構成する方法を示します。 + + + +| データ ソース | JSON データ | +| --- | --- | +| テキスト キー | 名前 | +| 値キー | 名前 | +| 幅 | 200px | +| AutoComplete | true | + + + + + + +**HTML の場合:** + +```html + +``` + +###コード例: 基本的な ASP.NET MVC の実装 + + +以下のコードは、以下のパラメーターを指定した {environment:ProductNameMVC} `Combo` コントロールを作成・構成する方法を示します。 + + +| プロパティ | 値 | +| --- | --- | +| データ ソース | IQueryable | +| スクリプト ファイル | 名前 | +| 値キー | 名前 | +| 幅 | 300px | +| AutoComplete | true | + + + +**ASPX の場合:** + +```csharp +<%= Html. + Infragistics(). + Combo(). + ID("comboTarget"). + DataSource(this.Model as IQueryable). + ValueKey("Name"). + TextKey("Name"). + Width("300px"). + AutoComplete(true). + Render() +%> +``` + +**C# の場合:** + +```csharp +public class DefaultController : Controller{ + public ActionResult Index() { + List colors = new List(); + colors.Add(Color.Black); + colors.Add(Color.Blue); + colors.Add(Color.Brown); + colors.Add(Color.Red); + colors.Add(Color.White); + colors.Add(Color.Yellow); + return View("default", colors.AsQueryable()); + }} +``` + +##関連トピック + + +以下は、その他の役立つトピックです。 + +- [{environment:ProductName} で JavaScript リソースを使用](/deployment-guide-javascript-resources) +- [{environment:ProductName} のスタイル設定とテーマ設定](/deployment-guide-styling-and-theming) + + + + + + diff --git a/docs/jquery/src/content/ja/topics/controls/igcombo/igcombo.mdx b/docs/jquery/src/content/ja/topics/controls/igcombo/igcombo.mdx new file mode 100644 index 0000000000..ffd344d2db --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igcombo/igcombo.mdx @@ -0,0 +1,39 @@ +--- +title: "igCombo" +slug: igcombo-igcombo +--- + +# igCombo + + +##概要 + + +`igCombo` は、jQuery に組み込まれたコンボボックス コントロールで、オートコンプリートや自動補完など、多彩な編集機能を備えています。 + +##トピック + + +Infragistics Combo について把握しておくべき知識は以下の各トピックにまとめられています。 + +- [igCombo の概要](/igcombo-overview) + +- [igCombo の追加](/igcombo-getting-started) + +- [igCombo をデータにバインド](/igcombo-binding-to-data) + +- [igCombo の構成](/igcombo-configuring) + +- [igCombo のスタイル設定](/igcombo-using-themes) + +- [アクセシビリティ準拠 (igCombo)](/igcombo-accessibility-compliance) + +- [既知の問題と制限 (igCombo)](/igcombo-known-limitations) + +- [jQuery と MVC API へのリンク (igCombo)](/igcombo-jquery-and-asp-net-mvc-helper-api-links) + + + + + + diff --git a/docs/jquery/src/content/ja/topics/controls/igcombo/jquery-and-asp-net-mvc-helper-api-links.mdx b/docs/jquery/src/content/ja/topics/controls/igcombo/jquery-and-asp-net-mvc-helper-api-links.mdx new file mode 100644 index 0000000000..cb0aaa7884 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igcombo/jquery-and-asp-net-mvc-helper-api-links.mdx @@ -0,0 +1,21 @@ +--- +title: "jQuery および MVC API リファレンス リンク (igCombo)" +slug: igcombo-jquery-and-asp-net-mvc-helper-api-links +--- + +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# jQuery および MVC API リファレンス リンク (igCombo) + + + +`igCombo` は、ASP.NET MVC ヘルパーを含む jQuery UI ウィジェットとしてビルドされます。各 API の詳細については、以下の API ドキュメントを参照してください。 + +- +- [igCombo MVC API](Infragistics.Web.Mvc~Infragistics.Web.Mvc.ComboModel.html) + + + + + + diff --git a/docs/jquery/src/content/ja/topics/controls/igcombo/keyboard-navigation.mdx b/docs/jquery/src/content/ja/topics/controls/igcombo/keyboard-navigation.mdx new file mode 100644 index 0000000000..82bf4e25ff --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igcombo/keyboard-navigation.mdx @@ -0,0 +1,78 @@ +--- +title: "キーボード ナビゲーション (igCombo)" +slug: igCombo-keyboard-navigation +--- + +#キーボード ナビゲーション (igCombo) + +##トピックの概要 +このトピックでは、エンドユーザーが容易に迅速に項目を移動したり、選択や強調表示する項目を変更できるように、キーボード ナビゲーションの使用方法を説明します。 + +### このトピックの内容 + +このトピックは、以下のセクションで構成されます。 + +- [キーボード操作](#kbInteraction) +- [複数選択](#multiselection) + - [Shift 操作](#shiftInteraction) + - [Ctrl 操作](#ctrlInteraction) +- [ブラウザーから](#fromBrowser) + +## キーボード操作 +### 概要 + + +キー|動作 |使用時 +---|---|--- +Alt + 下矢印|ドロップダウンを開く|ドロップダウンが閉じているとき +Alt + 上矢印|ドロップダウンを閉じる|ドロップダウンが開いているとき +Ctrl + Home|ドロップダウンの一番最初の項目に移動|ドロップダウンが開いているとき +Ctrl + End|一番最後の項目に移動|ドロップダウンが開いているとき +PgUp|表示されている最初の項目に移動して選択| ドロップダウンが開いて、複数選択が有効なとき +PgDn|表示されている最後の項目に移動して選択| ドロップダウンが開いて、複数選択が有効なとき +上矢印|前の項目に移動して選択。ドロップダウンが開いている場合は閉じる | ドロップダウンが開いているまたは閉じているとき +下矢印|次の項目に移動して選択。ドロップダウンが閉じている場合は開く| ドロップダウンが開いているまたは閉じているとき +Esc キー|選択された項目がない場合はコンテンツをクリア | 入力にコンテンツがあるとき +Esc キー|ドロップダウンを閉じる| ドロップダウンが開いているとき +Enter キー|ドロップダウンを閉じる| 選択項目があるとき + +## 複数選択 + +キー|動作 |使用時 +---|---|--- +PgUp|表示されている最初の項目に移動|ドロップダウンが開いているとき +PgDn|表示されている最後の項目に移動|ドロップダウンが開いているとき +上矢印|前の項目に移動。ドロップダウンが開いている場合は閉じる|ドロップダウンが開いているとき、または閉じているとき +下矢印|次の項目に移動。ドロップダウンが閉じている場合は開く|ドロップダウンが開いているとき、または閉じているとき +Enter キー|アクティブ項目を選択|アクティブ項目があるとき + +### Shift 操作 + +キー|動作 +---|--- +Shift|項目がアクティブ状態で強調表示 +Shift|複数の項目が選択されていない場合は何も起こらず、項目はアクティブ状態を保持 +Shift + 上矢印 / 下矢印 |アクティブ (強調表示された) 項目を変更し、Shift キーを離した場合、 アクティブ項目を選択 +Shift + Enter|**シナリオ**: 項目がマウスで選択され、上矢印 / 下矢印キーまたは Shift + Enter でアクティブ項目を移動した場合、最初と最後の選択項目の間の項目の状態が Selected に変更 + +> **注:** Shift キーのみは項目を選択 + +###Ctrl 操作 (addWithKeyModifier オプションを true に設定) +デフォルトでは、MultiSelection が有効な場合、エンドユーザーは左マウス ボタンをクリックするのみで複数の項目を選択できます。Ctrl で複数の項目を選択するには、`addWithKeyModifier` オプションを `true` に設定する必要があります。 + + +## ブラウザーから + +キー|動作 +---|--- +左矢印|カーソルを 1 文字左に移動 +右矢印|カーソルを 1 文字右に移動 +Ctrl + 左矢印|カーソルを 1 単語左に移動 +Ctrl + 右矢印|カーソルを 1 単語右に移動 +Shift|カーソル移動時のテキストの選択 +Delete、Backspace|選択されたテキストのみを消去 +Delete、Backspace|1文字ずつ消去 +Enter キー|項目を選択 +Home キー|入力テキストの先頭にカーソルを移動 +End キー|入力テキストの末尾にカーソルを移動 +Backspace キー|コンボ ボックスのコンテンツをすべて消去 (キーを押した状態で、Ctrl+A) diff --git a/docs/jquery/src/content/ja/topics/controls/igcombo/known-limitations.mdx b/docs/jquery/src/content/ja/topics/controls/igcombo/known-limitations.mdx new file mode 100644 index 0000000000..a1bbafd46e --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igcombo/known-limitations.mdx @@ -0,0 +1,76 @@ +--- +title: "既知の問題と制限 (igCombo)" +slug: igcombo-known-limitations +--- + +# 既知の問題と制限 (igCombo) + + + +##既知の問題点と制限の概要 + + +### 既知の問題点と制約の概要表 + +以下の表で、`igCombo` コントロールの既知の問題点と制限事項を簡単に説明します。以下の表は、一部の問題の詳細な説明とその回避策を示します。 + +凡例 | +-------|------ +![](../../images/images/positive.png) | 回避策 +![](../../images/images/negative.png) | 既知の回避策はありません +![](../../images/images/plannedFix.png) | 修正予定です + +問題|説明|状態 +---|---|--- +[IE9 以前のバージョンで placeHolder テキストがプレビューされない](#IE9PlaceHolder)|入力プレースホルダーは、IE9 以前では単に無視されます。|![](../../images/images/negative.png) +[仮想化が有効な場合、すべての ItemTemplate 要素は同じ高さでなければならない](#virtualizationAndItemTemplate)|スクロールバーでずれの問題が発生することがあります。 | ![](../../images/images/positive.png) +[グループ化および仮想化が使用される場合、項目が正しく描画されない可能性があります](#groupingWithVirtualization) |下へスクロールすると、項目は正しく追加されません。|![](../../images/images/negative.png) +[loadOnDemand が使用される場合、initialSelectedItems オプションは正しく操作しません。](#lodWithInitialSelectedItems) | 項目がコンボにより読み込まれたページにない場合、最初の選択は表示されません。|![](../../images/images/negative.png) +[オートコンプリート機能を使用する場合、IME を使用した日本語入力で Backspace キーおよび ESC キーが正しく動作しなくなります](#composition) | igCombo は日本語の構成機能を提供しますが、ブラウザー (Firefox 以外) によって規格の動作と異なります。 |![](../../images/images/negative.png) + + +##既知の問題点と制限の詳細 + + +###IE9 以前のバージョンで placeHolder テキストがプレビューされない + +HTML5 は `input` 要素に `placeholder` 属性を導入し、デフォルトのテキストをグレーで表示できるようにしましたが、入力プレースホルダーは IE9 以前では単に無視されます。理由は、IE がそれをサポートしていないからです。 + +### 仮想化が有効な場合、すべての ItemTemplate 要素は同じ高さでなければならない + +`virtualization` で `itemTemplate` が有効な場合、スクロールバーでずれの問題が発生することがあります。たとえば、最後に表示される項目が一部表示されないことがあります。 + +**回避方法** +項目テンプレートに対して以下のように `height` を設定すると、この問題を回避できる可能性があります。 +``` + +``` + +###グループ化および仮想化が使用される場合、項目が正しく描画されない場合があります + +項目リストでスクロールすると、グループ化された項目がある場合、リスト項目が正しく描画されないか、描画されない場合があります。 + +###loadOnDemand が使用される場合、initialSelectedItems オプションは正しく動作しません。 + +項目がコンボにより読み込まれたページ (最初の 16 項目など) にない場合、最初の選択は表示されません。まだ読み込まれていない項目のテキストを取得できないため、コンボの入力フィールドにそのテキストを設定できません。 + +###オートコンプリート機能を使用する場合、IME を使用した日本語入力で Backspace キーおよび ESC キーが正しく動作しなくなります + +igCombo は日本語の構成機能を提供しますが、ブラウザー (Firefox 以外) によって規格の動作と異なります。igCombo のオートコンプリート機能がアクティブなときに日本語の文字を入力中に Backspace キーを押した場合、最後の文字が削除される、あるいは ESC キーの場合はすべての文字を削除します。現在、Backspace キーおよびESC キーの押下によって IME を使用して入力した日本語文字が確定されてしまいます。ただし、これらのキーを 2 度目に使用する場合は正しく動作します。 \ No newline at end of file diff --git a/docs/jquery/src/content/ja/topics/controls/igcombo/migrating-to-the-new-combo.mdx b/docs/jquery/src/content/ja/topics/controls/igcombo/migrating-to-the-new-combo.mdx new file mode 100644 index 0000000000..76a26e157a --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igcombo/migrating-to-the-new-combo.mdx @@ -0,0 +1,344 @@ +--- +title: "新しいコンボへの移行" +slug: igcombo-migrating-to-the-new-combo +--- + +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# 新しいコンボへの移行 + +## トピックの概要 +このトピックは、古いコンボから新しいコンボへの移行を支援することを目的としています。以前に行っていたシナリオと現在行うことのできるシナリオを示します。 + +### このトピックの内容 +このトピックは、以下のセクションで構成されます。 + +1. [一般的な変更点](#general_changes) +2. [オプションの変更点](#options_changes) +3. [新しいオプション](#new_options) +4. [API メソッドの変更点](#methods_changes) +5. [新しい API メソッド](#new_methods) +6. [テーマの変更](#theming_changes) +7. [イベントの変更点](#event_changes) +8. [新しいイベント](#new_events) +9. [Knockout 統合の変更点](#ko_changes) +10. [Knockout の後方互換性](#ko_backwards) +11. [要件](#requirements) + + + +### 一般的な変更点 + +オプション|説明 +---|--- +項目|項目は、ドロップダウン リストのリスト項目を表すために使用する新しい構造の呼び方です。項目は、`element` と `data` という 2 つのプロパティを持つオブジェクトです。`element` はリスト項目に対する jQuery 参照です。`data` はこの要素の背後にあるデータ ソースからの対応データです。`data` は、データ ソース内の対応するデータ項目に対する参照です。`text` フィールドと `value` フィールドを含み、そのプロパティ名が既知である場合、`item.data.textPropertyName` または `item.data.valuePropertyName` によりアクセスできます。プロパティ名が不明の場合や変更された可能性がある場合は、コンボから直接プロパティ名を取得することでアクセスできます。つまり、value フィールドについては `item.data[$("#combo").igCombo("option", "valueKey")]`、text フィールドについては `item.data[$("#combo").igCombo("option", "textKey")]` です。 + + +### オプションの変更点 + +オプション|以前|現在 +---|---|--- +width|$('#combo').igCombo({ width: 300 })|デフォルトの幅は css により設定されます。新しいコンボ幅を設定する推奨方法は、`` です。古い方法もサポートされます。 +height|$('#combo').igCombo({ height: 300 })|デフォルトの高さは css により設定されます。新しいコンボの高さを設定する推奨方法は、`` です。古い方法もサポートされます。 +enableDisplayBlock|$('#combo').igCombo({ enableDisplayBlock: true})|このオプションは削除されました。現在、これは css により制御できます: `` +mode|以前にサポートされていた値: `editable, dropdown, readonlylist, readonly, 0, 1, 2, 3`。|現在サポートされる値: `editable, dropdown, readonlylist, readonly`。ドロップダウン モードは、現在、html の要素選択動作に非常に似ています。選択が単一である場合、常に選択された項目が存在し、クリア ボタンはデフォルトで無効になります。 +renderMatchItems|-|このオプションの名前は、その動作そのものを表すために、`highlightMatchesMode` に変更されました。 +filteringType|`filteringType` のデフォルトは `'none'`|現在、`filteringType` のデフォルトは`'local'` であるため、デフォルトでローカル フィルタリングが有効にされます。コンボの初期化時にフィルタリングを無効にするには `$('#combo').igCombo({ filteringType: 'none' })`、またはコンボがすでに作成されている場合には `$('#combo').igCombo('option', 'filteringType', 'none' })` を使用します。 +selectedItems|最初に選択される項目の指定、およびコンボが作成された後に選択された項目の設定または取得のために使用されていました。|このオプションは削除されました。最初に選択される項目は、新しいオプション [initialSelectedItems](#initialSelectedItems) を使用して設定できます。設定の選択は、コンボ API メソッド [value](#value)、 [select](#select) または [index](#index) により行われます。選択された項目の取得は、API メソッド [selectedItems](#selectedItems) により行うことができます。 +multiSelection|以前にサポートされていた値: `null、false、0、off、true、1、on、2、onWithCheckboxes'`|現在、このオプションはすべての複数選択設定をセットアップするために使用されます。以下の設定を持つオブジェクトを提供できます: `enabled、addWithKeyModifier、showCheckboxes、itemSeparator`。複数選択を有効にするには、`enabled` を `true` に設定します。すでに選択された項目に項目を追加する場合に、`ctrl` キーを押し続けるようにするには、addWithKeyModifier を `true` に設定します。デフォルトでは、すべての選択は `ctrl` キーを押さなずに追加できます。各リスト項目の前にチェックボックスを描画するには、`showCheckboxes` を `true` に設定します。選択された項目の間に描画する文字を変更するには、`itemSeparator` を設定します。デフォルトの文字は「,」です。すべてを設定した例: `$('#combo').igCombo({ multiSelection: { enabled: true, addWithKeyModifier: true, showCheckboxes: true, itemSeparator: ', ' } })` +itemSeparator|選択された項目の間に描画する文字を変更するために使用されていました。|このオプションは削除され、[multiSelection](#multiSelection) オプションの設定として追加されました。 +enableActiveItem|キーボードによるナビゲーション時にアクティブな項目を有効または無効にするために使用されていました。|このオプションは削除されました。選択が単一である場合、アクティブ項目は削除され、キーボードによるナビゲーションで選択を変更します。アクティブ項目は、複数選択が有効な場合は常に有効です。 +dropDownMaxHeight dropDownMinHeight|ドロップダウン リストの最大と最初の高さを設定するために使用されていました。|これらのオプションは削除されました。新しいオプション [visibleItemsCount](#visibleItemsCount) がドロップダウンの高さを制御するために追加されています。 +dropDownAsChild|コンボ要素の子としてドロップダウン リストを描画するために使用されていました。|`dropDownAttachedToBody` に名前変更されました。デフォルト値は `true` です。ドロップダウンを子として描画するには `false` に設定します: `$('#combo').igCombo({ dropDownAttachedToBody: false })` +showDropDownButton|ドロップダウン ボタンの表示状態を制御するために使用されていました。|このオプションは削除されました。ドロップダウン ボタンの表示状態は、css により制御できます。ドロップダウン ボタンを無効にするには: `` +nullText|テキスト入力が空の場合に表示するテキストを指定するために使用されていました。|`placeHolder` に名前変更されました。既知の問題ですが、このオプションは IE8/9 では機能しません。 +closeDropDownOnSelect|選択されたときにドロップダウンを閉じるかどうかを指定するために使用されていました。|マウス クリックで、またはエンター キーを押して、リストで単一項目が選択された場合に、ドロップダウン リストを閉じるかどうかを指定するように変更されました。デフォルトは、単一選択に対しては `false`、複数選択に対しては `true` です。このオプションは、複数選択が有効で、追加選択が実行された場合、ドロップダウンを閉じません。`$('#combo').igCombo({ closeDropDownOnSelect: false })` +allowCustomValue|コンボのテキスト入力でカスタム値を許可するために使用されていました。|このオプションは初めはサポートされませんでしたが、15.1 の 9 月サービス リリースおよび 15.2 のボリューム リリースでご利用いただけます。 +dataBindOnOpen|ドロップダウンが開かれる際にデータ バインディングを延期するために使用されていました。|このオプションはサポートされていません。同じ機能性は、ドロップダウン リストが最初に開かれる際に、データ バインディング イベントとデータ バインドをキャンセルすることにより実現できます。 +text|初期化時にコンボ入力にカスタム テキストを設定するために使用されていました。|このオプションはサポートされていません。初期選択を設定するには、オプション [initialSelectedItems](#initialSelectedItems) を使用します。 +clearSelectionOnBlur|テキスト入力が選択された項目テキストと一致しなかった場合に、選択された項目をぼかして保持するために使用されていました。主に `allowCustomValues` オプションとともに使用されていました。|このオプションはサポートされていません。 +valueKeyType textKeyType|value / text データの背後のデータ型を指定するために使用されていました。|これらのオプションはサポートされていません。データ ソースからの value フィールドと text フィールドの型が使用されます。 +parentCombo cascadingDataSources parentComboKey|カスケード機能をセットアップするために使用されていました。|これらのオプションはサポートされていません。内部カスケード機能はサポートされなくなりました。これは、現在のコンボの選択変更イベントで関係するコンボ データ ソースを変更することで実現できます。[サンプル参照]({environment:SamplesUrl}/combo/cascading-combos) + + + + +### 新しいオプション + +オプション|説明 +---|--- +initialSelectedItems|選択される項目のインデックスまたは値を指定することで、最初にコンボを作成する際に選択が必要な項目の設定に使用: `$('#combo').igCombo({ initialSelectedItems: [{ index: 2 }, { index: 5 }, { value: 'items_value' }] })`。 +visibleItemsCount|このオプションは、一度に表示できる項目の最大数を制御するために使用できます。これが 10 に設定され、リストに 20 項目ある場合、一度に 10 項目のみが表示されます。5 項目のみがリストにある場合は 5 項目のみが表示され、ドロップダウンの高さは 5 項目分の高さになります。デフォルト値は 15 です。`$('#combo').igCombo({ visibleItemsCount: 10 })` +autoSelectFirstMatch|入力されたテキストで始まる最初のリスト項目を自動的に選択するかどうかを指定します。複数選択が有効な場合、このオプションは一致する要素にアクティブ項目を置きます。無効な場合、完全一致のみが自動的に選択されます。デフォルトでは true に設定されています。無効にするには: `$('#combo').igCombo({ autoSelectFirstMatch: false })` +delayFilteringOnKeyUp|次のフィルタリング操作をトリガーするまでの遅延時間を指定します。フィルタリング操作回数を少なくすることで、パフォーマンス向上に役立ちます。デフォルトは 250 ミリ秒です。変更するには: `$('#combo').igCombo({ delayFilteringOnKeyUp: 1000 })` +preventSubmitOnEnter|エンター キーが押された場合にデフォルト フォームの送信を行わないかどうかを指定します。デフォルトは true です。無効にするには: `$('#combo').igCombo({ preventSubmitOnEnter: false })` + + + + +### API メソッドの変更点 + +メソッド|以前|現在 +---|---|--- +dropDownVisible|ドロップダウン リストの表示状態を制御するために使用されていました。|この API メソッドは削除されました。ドロップダウン リストを開くには [openDropDown](#openDropDown)、ドロップダウン リストを閉じるには [closeDropDown](#closeDropDown) を使用してください。 +setFocus|コンボ テキスト入力にフォーカスを設定するために使用されていました。|この API メソッドは削除されました。テキスト入力にフォーカスを設定するには、入力で jQuery `focus` メソッドを呼び出します: `$("#combo").igCombo("textInput").focus()` +hasFocus|コンボ テキスト入力にフォーカスがあるかどうかをチェックするために使用されていました。|この API メソッドは削除されました。テキスト入力にフォーカスがあるかどうかチェックするには、jQuery `is(":focus")` を使用します: `$("#combo").igCombo("textInput").is(':focus').` +isSelected|指定されたインデックスのリスト項目が選択されているかどうかをチェックするために使用されていました。|項目の選択をチェックする API メソッドは 3 つあります。jQuery 参照による[isSelected](#isSelected)、インデックスによる [isIndexSelected](#isIndexSelected)、値による [isValueSelected](#isValueSelected) です。 +selectedIndex|最初に選択された項目のインデックスを取得するため、またはインデックスによる選択を設定するために使用されていました。|この API メソッドは [index](#index) に名前変更されました。このメソッドは、インデックスの配列も受け入れ、一度に複数の項目を選択できます。複数の項目が選択された場合、選択されたすべてのインデックスを持つ配列を返します。その他の機能は同じです。 +value|最初に選択された項目の値を取得するため、または値による選択を設定するために使用されていました。|このメソッドは値の配列も受け入れ、一度に複数の項目を選択できます。複数の項目が選択された場合、このメソッドは選択されたすべての値を持つ配列を返します。その他の機能は同じです。 +values|選択されたすべての項目の値を取得するため、または値による選択を設定するために使用されていました。|この API メソッドは削除されました。この機能は `value` メソッドに統合されました。 +itemByIndex|特定のインデックスのリスト項目に関係するメンバーを持つオブジェクトを取得するために使用されていました。`{ element, index, value, text }` のオブジェクトを返すために使用されていました。|この API メソッドは `itemFromIndex` に名前変更されました。返されるオブジェクトは [item](#item) です。 +itemByValue|特定の値のリスト項目に関係するメンバーを持つオブジェクトを取得するために使用されていました。`{ element, index, value, text }` のオブジェクトを返すために使用されていました。|この API メソッドは `itemFromValue` に名前変更されました。返されるオブジェクトは [item](#item) です。 +getDataSource|コンボにより使用されるデータ ソースへの参照を取得するために使用されていました。|この API メソッドは削除されました。データ ソースへの参照は、`$("#combo").igCombo("option", "dataSource")` により取得できます。 +getData|コンボにより使用される現在のデータへの参照を取得するために使用されていました。|この API メソッドは削除されました。現在のデータへの参照は、 `$("#combo").igCombo("option", "dataSource").dataView()` により取得できます。 +getRecordsCount|dataSource、dataView、または全サーバー データのレコード数を取得するために使用されていました。|この API メソッドは削除されました。dataSource のレコード数を取得するには: `$("#combo").igCombo("option", "dataSource").data().length`。dataView のレコード数を取得するには: `$("#combo").igCombo("option", "dataSource").dataView().length`。全サーバー データのレコード数を取得するには: `$('#combo').igCombo('option', 'dataSource').totalRecordsCount()`。 +filter|`event, filterText, noFilter` のメソッド パラメーターが使用されていました。|メソッド パラメーターは `filterText, event` に変更されました。 +remove|他の機能は残しながら、親要素からコンボを削除するために使用されていました。|この API メソッドはサポートされていません。 +getFooter|コンボ フッターへの参照を取得するために使用されていました。|現在フッターがないため、この API メソッドはサポートされていません。 + + +### 新しい API メソッド + +メソッド|説明 +---|--- +openDropDown|ドロップダウン リストを開くには、このメソッドを使用します。 +closeDropDown|ドロップダウン リストを閉じるには、このメソッドを使用します。 +select|項目の jQuery 参照に渡すことにより、1 つまたは複数のリスト項目を選択するために使用します。`$('#combo').igCombo('select', $('.itemSelector'))` +value|値により、1 つまたは複数のリスト項目を選択するために使用します。単一項目を選択するには `$('#combo').igCombo('value', 'itemValue')`、一度に複数項目を選択するには `$('#combo').igCombo('value', ['itemValue_1', 'itemValue_2', 'itemValue_3'])`。パラメーターを指定せずにこのメソッドを呼び出すと、選択された値が返されます。 +index|データ ソースのインデックスにより、1 つまたは複数のリスト項目を選択するために使用します。単一項目を選択するには `$('#combo').igCombo('index', 5)`、複数の項目を選択するには `$('#combo').igCombo('index', [3, 5, 8, 10])`。パラメーターを指定せずにこのメソッドを呼び出すと、選択されたインデックスが返されます。 +isSelected|特定の jQuery 要素が選択されているかどうかをチェックするために使用します。`$('#combo').igCombo('isSelected', $('.selector'))` +isIndexSelected|特定のインデックスの項目が選択されているかどうかをチェックするために使用します。`$('#combo').igCombo('isIndexSelected', 5)` +isValueSelected|特定の値を持つ項目が選択されているかどうかをチェックするために使用します。$('#combo').igCombo('isValueSelected', 'itemValue') +dataForValue|valueKey プロパティと一致する値により、リスト項目の関連付けられたデータ ソース データを取得します。`$('#combo').igCombo('dataForValue', 'itemValue')` +dataForElement|jQuery 参照により、リスト項目の関連付けられたデータ ソース データを取得します。`$('#combo').igCombo('dataForElement', $('.listItemSelector'))` +itemsFromElement|jQuery 要素により、コンボのリスト項目要素を表す[項目](#item)を取得します。メソッドに複数の要素が与えられた場合、項目を持つ配列が返されます。`$('#combo').igCombo('itemsFromElement', $('.listItemSelector'))` +itemsFromValue|値により、コンボのリスト項目要素を表す[項目](#item)を取得します。メソッドに値の配列が与えられた場合、項目を持つ配列が返されます。`$('#combo').igCombo('itemsFromValue', 'itemValue')` +itemsFromIndex|インデックスより、コンボのリスト項目要素を表す項目を取得します。メソッドにインデックスの配列が与えられた場合、項目を持つ配列が返されます。`$('#combo').igCombo('itemsFromIndex', 3)` +items|コンボのすべての項目を持つ配列を取得します。 +filteredItems|コンボでフィルター処理されたすべての[項目](#item)を持つ配列を取得します。 +selectedItems|選択された[項目](#item)を取得します。複数の項目が選択されている場合、選択された[項目](#item)を持つ配列が返されます。 +listItems|コンボ ドロップダウン リストで描画されたすべてのリスト項目に対する jQuery 参照を取得します。 +clearFiltering|フィルタリングをクリアします。 +clearInput|テキスト入力値を消去し、すべての選択、フィルタリング、強調表示を削除します。 +selectAll|すべてのリスト項目を選択します。 +deselect|jQuery 参照によりリスト項目を選択解除します。 +deselectByValue|特定の値のリスト項目を選択解除します。 +deselectByIndex|特定のインデックスのリスト項目を選択解除します。 +deselectAll|選択されたすべてのリスト項目を選択解除します。 +comboWrapper|コンボのアウター要素に対する jQuery 参照を取得します。 +dropDown|コンボのドロップダウン リストに対する jQuery 参照を取得します。 +textInput|コンボのテキスト入力に対する jQuery 参照を取得します。 +valueInput|コンボの値入力に対する jQuery 参照を取得します。 +dropDownOpened|ドロップダウンが開いているかどうかをチェックします。 + + + + +### テーマの変更 + +イベント|変更内容 +---|--- +ui-igcombo-nulltext|このクラスは削除されました。たとえば、コンボの入力要素にテキスト色を適用するには、以下の実装を使用できます。 + +```html + + +``` +> **注:** ブラウザーに基づいて (`:-moz-placeholder`, `:-ms-input-placeholder`); を使用します。 + + +### イベントの変更点 + +イベント|変更点 +---|--- +selectionChanging|イベント引数 ui.oldItems は ui.currentItems に名前変更され、選択変更がされずに、現在その項目の選択が継続していることをより明確に表すようになりました。項目は [item](#item) 形式です。 +selectionChanged|項目は [item](#item) 形式です。 +dropDownOpening dropDownOpened dropDownClosing dropDownClosed|イベント引数 ui.element は ui.list に名前変更され、これがドロップダウン リストであることをより明確に表すようになりました。 +textChanged|このイベントは削除されました。テキストの変更時点をチェックするには、コンボをテキスト入力キーダウン イベントにバインドします。 +noMatchFound|`autoComplete` 機能はまだ完全にサポートされていないため、このイベントは削除されました。 +activeItemChanging activeItemChanged|これらのイベントは削除されました。 + + +### 新しいイベント + +イベント|説明 +---|--- +rendered|コンボのレンダリングが完了したときに発生するイベント。 +itemsRendering|コンボ項目のレンダリングが実行される前に発生するイベント。 +itemsRendered|コンボ項目のレンダリングが完了した後に発生するイベント。関数 callback は、描画されたリスト項目要素を表す[項目](#item)の配列である引数 `ui.items` に渡されます。 + + + + +###Knockout 統合の変更点 +コンボをリストからのみ値を受け入れるコントロールと考えることが、新しい `igCombo` コントロールに導入された変更点の 1 つです。`igCombo` にはカスタム値を許可するオプションはありません。以前は、Knockout 拡張機能での異なる作業プロセスのためにカスタム値が必要でした。すなわち、`igCombo` が変更について View-Model に通知できるのは、項目が選択 / 選択解除されるとき、および選択された項目コレクションが変更されるときのみです。したがって、古い Knockout 拡張オプションの一部が必要なくなり、必要ないくつかのオプションが導入されました。`igCombo` を Knockout 拡張機能と統合するために、以下の変更が行われました。 + +####新しいオプション + +オプション|説明 +---|--- +selectedItems|`igCombo` で選択された項目の配列。View-Model でこのオプションが構成されている場合、コンボで選択された項目と View-Model との間のデータ交換があることを保証します。 +selectedItemType|配列での選択項目の型を "primitive" または "object" として構成できます。 + +####削除されたオプション + +オプション|説明 +---|--- +text|入力の変更が発生した場合、コンボは View-Model を更新できません。
    古い `igCombo` では、コンボ値を保持する View-Model プロパティがあり、更新されると他のサブスクライバーに通知されていました。`igCombo` の Knockout 拡張機能にはそのようなオプションは存在しなくなったため、`selectionChanged` イベント ハンドラーを使用して現在のコンボ値を取得し、サブスクライバーに通知できます。以下の表のコード スニペットで、古い機能をシミュレートする方法を示します。 +value|値により項目を選択する場合、新たに導入された `selectedItems` オプションが使用されるため、このオプションは必要なくなりました。 +enableTextChangedUpdate|`igCombo` には `textChanged` イベントがないため、このような機能を持つことはできません。 +enableSelectionChangedUpdate|新しい変更では、更新は常にコンボの選択変更時に発生します。それがこのようなオプションが不要になった理由です。 +cascadingDataSource|`igCombo` コントロールにはこのようなオプションはありません。それが Knockout 拡張機能でも使用できない理由です。 + +**前** +```html + + +``` + +**現在** +```html + + +``` + +>**注:** これは、`igCombo` から View-Model への変更がある場合のみ機能します。 + + +###Knockout の後方互換性 + +新しいコンボおよびその Knockout 拡張子が更新されているため、アーキテクチャも変更されました。コンボの選択コレクションがドロップダウンの項目に利用可能な値のみを許可するためにデザインされました。Knockout 拡張子はそのパターンを使用し、コンボの変更をモニターする監視可能な項目は選択された項目の配列です。 +以前のバージョンで拡張子がコンボ フィールドをモニターしました。新しい実装では、単一の選択だけでなく、複数の選択された項目をモニターできます。 + +この方法で、監視可能な入力要素が監視可能配列として定義できないため、igCombo を HTML 入力要素にバインドできません。一方、igEditors およびその拡張子が、HTML 入力要素と動作するようデザインされています。igCombo を HTML 入力要素と結合するには、以前のセクション (Knockout 結合の変更) に説明した実装を使用できます。 +このセクションのコードはカスタム解決を紹介します。ViewModel および View のコードに変更せずに新しい igCombo および Knockout 拡張子を使用できます。このポリフィルは、{environment:ProductName} の最新バージョンにアップグレードしますが、現在のコードを選択通知を処理するために変更できない場合に便利です。 + +以下のバインド ハンドラーを igCombo の Knockout ハンドラーを読み込んだ後に定義します。 + +```html + +``` +以前のロジックを使用し、監視可能項目を文字列として定義できます。 + +**前** +```html + + +
    +``` + + +### jQuery の要件 + +Lib|以前の必要バージョン|新しい必要バージョン +---|---|--- +jQuery コア|1.4.4|1.8.3 +jQuery UI|1.7|1.9.2 diff --git a/docs/jquery/src/content/ja/topics/controls/igcombo/overview.mdx b/docs/jquery/src/content/ja/topics/controls/igcombo/overview.mdx new file mode 100644 index 0000000000..a96a4e494f --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igcombo/overview.mdx @@ -0,0 +1,287 @@ +--- +title: "igCombo の概要" +slug: igcombo-overview +--- + +# igCombo の概要 + + + +##トピックの概要 + + +###目的 + + +このトピックでは、機能、データ ソースへのバインド、要件、およびテンプレートに関する情報を含めて、`igCombo`™ コントロールの概要を示します。 + +###このトピックの内容 + + +このトピックは、以下のセクションで構成されます。 + +- [主要機能](#main-features) + +- [データ ソースにバインド](#binding-to-data-source) + +- [最低必要条件](#minimum-requirements) + +- [テンプレートの使用および選択](#template-use-and-selection) + +### 前提条件 + + +以下の表は、このトピックを理解するために必要な前提条件です。 + +**トピック** + +最初に、以下のトピックを読む必要があります。 + +- [{environment:ProductName} の概要](/igniteui-for-jquery-overview) + +- [{environment:ProductName} で JavaScript リソースを使用](/deployment-guide-javascript-resources) + +- [{environment:ProductName} のスタイル設定とテーマ設定](/deployment-guide-styling-and-theming) + +- [igGrid/igDataSource アーキテクチャの概要](/iggrid-igdatasource-architecture-overview)のデータ ソース コントロール セクション + +**外部リソース** + +あらかじめ [jQuery ウィジェットの使用](http://learn.jquery.com/jquery-ui/getting-started/) を読んでおくことをお勧めします。 + +##主要機能 + + +###機能の概要 + + +下の表は、`igCombo` の主な機能の概要を説明します。 + + +| | | +| --- | --- | +| 機能 | 説明 | +| 仮想化 | igCombo コントロールは、大量のデータをバインドする際に HTML 要素を再利用してパフォーマンスを高めることができます。 | +| オート コンプリート | この機能を有効にすると、igCombo コントロールは、候補リストの先頭にある一致文字列から予測して残りの入力テキストを自動的に埋めていきます。 | +| 自動補完 | igCombo コントロールは入力ボックスに入力されたテキストに基づいて候補リストを絞り込むことができます。 | +| 複数選択 | ユーザーは 1 つまたは複数の項目を選択することができ、チェックボックスを使用して複数選択を実行することもできます。 | +| キーボード ナビゲーション | ユーザーは、igCombo がサポートする豊富なキーボード ナビゲーションにより、簡単な操作で項目間を迅速に移動でき、選択する項目や強調表示する項目を変更することができます。 | +| ロード オン デマンド | igCombo コントロールは、ロード オン デマンド機能をサポートしています。ロード オン デマンドを有効にすると、サーバーとクライアントの両方で帯域幅と処理のオーバーヘッドが大幅に削減されます。 | +| 強調表示 | igCombo 入力でユーザーがテキストを入力すると、ドロップダウン項目で一致する結果が強調表示で表示されます。 | +| environment:ProductNameMVC | サポートされる .NET コードで igCombo コントロールを構成できるようになります。 | + + +### 仮想化 + + +仮想化を有効にすると、メモリの消費を低いレベルに抑えながら `igCombo` コントロールを数百の項目にバインドできるようになります。このコンボでは、コンボのスクロール可能領域を埋める必要な量の HTML 要素のみが作成され、ユーザーがデータをスクロールする際にはそうした要素が再利用されます。 + +#### 関連トピック + + +- [パフォーマンスの最適化 (igCombo)](/igcombo-optimize-performance) + +#### 関連サンプル + +- [igCombo 仮想化]({environment:SamplesUrl}/combo/virtualization) + +### オートコンプリート + + +オートコンプリート機能を使用すると、すでに候補リストに含まれている文字列をすばやく入力できるようになります。このコンボでは、最初の文字が入力されると、候補リストの先頭にある一致項目から残りの文字列が予測され、その文字列が残りの入力テキストとして埋められていきます。 + +![](../../images/images/igCombo_Auto_Complete.png) + +#### 関連トピック + +- [igCombo の追加](/igcombo-getting-started) + +### 自動補完 + + +ドロップダウン リストから特定の値を素早く見つけ出すには、自動補完機能を有効にします。入力ボックスに入力されたテキストに基づきドロップダウン リストの項目選択肢が絞り込まれます。「～を含む」や「～から始まる」といった演算子を使用した絞り込みなど、条件の異なる絞り込みができます。 + +![](../../images/images/igCombo_Auto_Suggest.png.png) + +#### 関連トピック + +- [自動補完の構成 (igCombo)](/igcombo-configure-auto-suggest) + + +### 複数選択 + +`igCombo` コントロールでは、単一選択と複数選択が利用できます。複数選択が有効な場合、ドロップダウン リストから複数の項目を選択できます。データを入力する際には、入力ボックスで複数の値をコンマ (,) で区切ってタイピングする方法で複数の値を選択することもできます。 + +![](../../images/images/igCombo_multiple_selection.png) + +#### 関連トピック + +- [選択の構成 (igCombo)](/igcombo-configure-selection) + + +#### 関連サンプル + +- [igCombo の複数選択]({environment:SamplesUrl}/combo/selection-and-checkboxes) + +### ロード オン デマンド + +ロード オン デマンドを有効にすると、最初にドロップダウン コンテナーにスクロールバーが表示され、リスト項目の最初のページが表示されます。リストの最後までスクロールすると、非同期コールバックを通じて次の項目ページが取得され、リストの一番下に追加されます。 + +#### 関連トピック +- [ロード オン デマンドの構成 ](/igcombo-load-on-demand) + +#### 関連サンプル + +- [ロード オン デマンド]({environment:SamplesUrl}/combo/load-on-demand) + +### キーボード ナビゲーション + +コンボはキーボードでナビゲートできます。これは重要なユーザー補助機能です。この機能は、エンドユーザーがドロップダウン 項目間を簡単かつ迅速に移動できるようにして、時間を節約します。これはユーザー エクスペリエンスを向上させます。 + +#### 関連トピック +- [igCombo キーボード ナビゲーション](/igCombo-keyboard-navigation) + +#### 関連サンプル + +- [キーボード ナビゲーション]({environment:SamplesUrl}/combo/keyboard-navigation) + +### {environment:ProductNameMVC} + + +ASP.NET MVC ヘルパーを使用すると、サポートされるコード言語で {environment:ProductNameMVC} `igCombo` コントロールを構成できるようになります。再利用可能な View または ViewModel を ASP.NET MVC アプリケーションに作成すると、このコンボとのインターフェイスを確保できます。ASP.NET で IQueryable オブジェクトへのバインドもできます。さらに、ヘルパーによりクライアント側で使用する `igCombo` コントロールの JSON データが生成されます。 + +### 関連トピック + + +- [igCombo の追加](/igcombo-getting-started) + +- [自動補完の構成 (igCombo)](/igcombo-configure-auto-suggest) + +#### 関連サンプル + +- [{environment:ProductNameMVC} Combo]({environment:SamplesUrl}/combo/aspnet-mvc-helper) + + +##最低必要条件 + + +###概要 + + +`igCombo` コントロールは jQuery UI ウィジェットの 1 つであるため、jQuery コアと jQuery UI JavaScript ライブラリに依存します。また、`igCombo` コントロールが機能の共有やデータのバインドに使用する {environment:ProductName}™ JavaScript リソースもいくつかあります。JavaScript の参照は、`igCombo` コントロールを純粋な JavaScript コンテキストのみで使用する場合もASP.NET MVC で使用する場合も必要になります。ASP.NET MVC で `igCombo` を使用する場合に、.NET 言語で `igCombo` を構成するには、Infragistics.Web.Mvc アセンブリが必要です。 + +###要件 + + +以下の表は、`igCombo` コントロールの要件を示しています。 + + +| 要件 | 説明 | +| --- | --- | +| jQuery および jQuery UI JavaScript リソース | environment:ProductName は、これらのフレームワークの最上位にビルドされます。 [jQuery](http://jquery.com) (igCombo では jQuery バージョン 1.8.3 が必要です) [jQuery UI](http://jqueryui.com/) (igCombo では jQuery UI バージョン 1.9.2 が必要です) | +| environment:ProductName の共用 JavaScript リソース | environment:ProductName には、ほとんどのウィジェットが使用する共用 JavaScript リソースがいくつかあります: infragistics.util.js infragistics.util.jquery.js | +| igDataSource JavaScript リソース | igCombo は igDataSource を内部で使用してデータを操作します。 infragistics.dataSource.js | +| igTemplating JavaScript リソース | igCombo は igTemplating を内部で使用して項目を描画します。 infragistics.templating.js | +| igCombo JavaScript リソース | igCombo ウィジェット用の JavaScript ファイル: infragistics.ui.combo.js | +| IG テーマ | このテーマには、environment:ProductName 向けに作成されたカスタム ビジュアル スタイルが含まれています。 | +| ベース テーマ | 基本テーマには、主に各ウィジェットのフォームと機能を定義するスタイルが含まれています。 | + + +##データ ソースにバインド + + +以下の表は、`igCombo` コントロールとデータ ソースとのバインドに関する要件をカテゴリ別に示します。 + + +| | | +| --- | --- | +| 要件のカテゴリ | 要件の一覧 | +| データ構造 | 以下のいずれかの形態を使用できます。 ローカルまたは Web サーバーから提供される適格な JSON または XML JavaScript 配列 HTML SELECT 要素 KnockoutJS JSONP ASP.NET MVC における IQueryable | +| データ型 | String Number Boolean Date | + + +###サポートされるデータ ソース + + +以下の表は、サポートされるデータ ソース、および各データ ソースのバインドに関する基本情報を示します。 + + + +| データ ソース | バインディング | +| --- | --- | +| igDataSource | `igDataSource` は、`igCombo` コントロールによって内部的に使用され、データ操作を管理します。このデータ ソースは、さまざまなタイプのローカル データやリモート データを受け入れます。 | +| [igCombo をデータにバインド](/igcombo-binding-to-data) | `igCombo` コントロールの jQuery セレクターから SELECT 要素を選択すると、その SELECT 要素は自動的に `igCombo` コントロールに変換され、元の SELECT 要素のオプションが継承されます。 | +| IQueryable | ASP.NET MVC では、igCombo のデータソースとして IQueryable を指定します。そのコレクションは、ブラウザーでの使用に合わせて JSON にシリアル化されて View と共に返されます。 | +| [KnockoutJS](/igcombo-knockoutjs-support) | `igCombo` コントロールにおける Knockout ライブラリのサポートは、開発者が Knockout ライブラリとその宣言構文を使用してツリー コントロールを初期化し構成するための簡単な方法を提供することを目的としています。 | + + +### データ ソースへのバインドに関する概要 + + +ほとんどの場合、`igCombo` の `dataSource` または `dataSourceUrl` オプションを使用してデータをバインドします。このオプションは、サポートされるさまざまなデータ形式を処理できる `igDataSource` にデータを提供します。ただし、SELECT 要素を使用して `igCombo` のインスタンスを作成する場合は例外で、このオプションは使用しません。この場合、`igCombo` は元の SELECT 要素のデータおよびオプションを継承します。ASP.NET MVC では、{environment:ProductNameMVC} ヘルパーに IQueryable を供給すると、サーバーからのデータを簡単にシリアル化して、View と共にクライアントに渡せるようになります。そのページがブラウザーに渡されると、`igCombo` の `dataSource` オプションが設定され、クライアント側での操作に使用されます。 + + +##テンプレートの使用および選択 + +### 概要 + + +テンプレートを使用して `igCombo` コントロールのレイアウトをカスタマイズできる場所がいくつかあります。ヘッダーやフッターを、それぞれドロップダウン リストの最上部または最下部に付けておくと、ユーザーの選択肢に関するコンテキスト情報を増やすことができます。また、項目テンプレートを定義しておくこともできます。これにより、それぞれの選択肢について、カスタマイズされたレイアウトで複数の情報を表示できるようになります。 + +### テンプレート使用チャート + +下の表は、`igCombo` のテンプレートと各テンプレートの用途をまとめたものです。 + + +| | | +| --- | --- | +| テンプレート | igCombo での使用 | +| ヘッダー | headerTemplate オプションをセットすると、ドロップダウン リストの最上部に表示するカスタムの HTML を定義できるようになります。 | +| フッター | footerTemplate オプションをセットすると、カスタムの HTML がドロップダウン リストの最下部に表示されます。スクロールバーが必要な大きなリストの場合、フッター テンプレートは常にスクロール可能領域の下に表示されます。 | +| 項目 | itemTemplate オプションにはカスタムの HTML を設定することができます。バインドされた各項目に関するデータはそのテンプレートを使用して表示されます。項目ごとに画像およびカスタム レイアウトを表示することができます。 | + + +### テンプレート選択チャート + +下の表は、予想されるユーザーのニーズと、個々のニーズに適したテンプレートをリストしたものです。 + + +| 用途 | 使用テンプレート | +| --- | --- | +| ドロップダウン リストの最上部にヘッダーを表示します | headerTemplate | +| ドロップダウン リストの最下部にフッターを表示します | footerTemplate | +| 項目選択肢ごとに画像またはアイコンを表示します | itemTemplate | +| カスタム レイアウトで各項目に複数の情報を表示します | itemTemplate | + + + +##関連トピック + + +以下は、その他の役立つトピックです。 + +- [{environment:ProductName} の概要](/igniteui-for-jquery-overview) + +- [{environment:ProductName} で JavaScript リソースを使用](/deployment-guide-javascript-resources) + +- [{environment:ProductName} のスタイル設定とテーマ設定](/deployment-guide-styling-and-theming) + +- [igGrid/igDataSource アーキテクチャの概要](/iggrid-igdatasource-architecture-overview) + +- [igCombo の追加](/igcombo-getting-started) + +- [igCombo をデータにバインド](/igcombo-binding-to-data) + +- [igCombo の構成](/igcombo-configuring) + +- [igCombo のスタイル設定](/igcombo-using-themes) + +- [キーボード ナビゲーション](/igCombo-keyboard-navigation) + +- [アクセシビリティ準拠 (igCombo)](/igcombo-accessibility-compliance) + +- [既知の問題と制限 (igCombo)](/igcombo-known-limitations) + +- [jQuery および MVC API リファレンス リンク (igCombo)](/igcombo-jquery-and-asp-net-mvc-helper-api-links) + + \ No newline at end of file diff --git a/docs/jquery/src/content/ja/topics/controls/igcombo/using-themes.mdx b/docs/jquery/src/content/ja/topics/controls/igcombo/using-themes.mdx new file mode 100644 index 0000000000..9fec938593 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igcombo/using-themes.mdx @@ -0,0 +1,41 @@ +--- +title: "igCombo のスタイル設定" +slug: igcombo-using-themes +--- + +# igCombo のスタイル設定 + + + +##テーマの使用 + + +###概要 + +`igCombo`™ はスタイルやテーマの設定に jQuery UI CSS Framework を利用します。特に指定しない限り、`igCombo` は、デフォルトの jQuery UI テーマとして標準装備されている IG Theme を使用します。 + +テーマのカスタマイズには、ThemeRoller を使用することができます。ThemeRoller は jQuery UI が提供するツールで。これを使用すると、jQuery UI ウィジェットと互換性のあるカスタム テーマを簡単に作成できるようになります。数々のビルド済みテーマをご自分の Web サイトにダウンロードして使用できます。`igCombo` コントロールは ThemeRoller のテーマの使用に対応しています。 + +###トピック + + +`igCombo` に合わせて jQuery UI テーマをカスタマイズするために必要な情報は以下の各トピックに収められています。 + +- [{environment:ProductName} のスタイル設定とテーマ設定](/deployment-guide-styling-and-theming) + +##関連トピック + + +以下は、その他の役立つトピックです。 + +- [jQuery UI](http://jqueryui.com/) +- [jQuery UI - はじめに](http://docs.jquery.com/UI/Getting_Started) +- [jQuery Themeroller](http://jqueryui.com/themeroller/) +- [jQuery UI のテーマ設定](http://docs.jquery.com/UI/Theming) +- [jQuery UI CSS Framework](http://docs.jquery.com/UI/Theming/API) + + + + + + diff --git a/docs/jquery/src/content/ja/topics/controls/igdatachart/accessibility-compliance.mdx b/docs/jquery/src/content/ja/topics/controls/igdatachart/accessibility-compliance.mdx new file mode 100644 index 0000000000..d0135bec73 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igdatachart/accessibility-compliance.mdx @@ -0,0 +1,75 @@ +--- +title: "アクセシビリティ準拠 (igDataChart)" +slug: igdatachart-accessibility-compliance +--- + +# アクセシビリティ準拠 (igDataChart) + + + +##トピックの概要 + + +### 目的 + +このトピックでは、`igDataChart`™ のアクセシビリティ機能について説明し、チャートを含むページのアクセシビリティ準拠を実現する方法についての助言を示します。 + +### 前提条件 + +このトピックを理解するためには、以下のトピックを理解しておく必要があります。 + + +- [**igDataChart 概要**](/igdatachart-overview): このトピックでは、`igDataChart` コントロールについての概念情報を提供します。これには、その主な機能、チャートとユーザー機能を使用するための最低要件が含まれます。 + +- [**igDataChart の追加**](/igdatachart-adding): このトピックでは、`igDataChart` をコントロールを作成して追加し、データにバインドする方法を紹介します。 + + + + + +##アクセシビリティ準拠のリファレンス + + +### 概要 + +すべての {environment:ProductName}™ コントロールおよびコンポーネントは、1973 年リハビリテーション法第 508 条第 1194 部 22 条を遵守しています。表 1 には、コントロールに関連する第 1194 部 22 条の特定の規則が記載されています。また、`igDataChart` コントロールが各規則を遵守するための詳しい方法も含んでいます。 + +各アクセシビリティ規則の要件を満たすために、場合によっては、コントロールを操作して特定のプロパティを設定する必要がありますが、それ以外の場合は、コントロール自身がこの作業を行います。 + +>**注:** jQuery コントロールはクライアント専用のため、一部の規則はサポートされておらず、制限として扱います。 + +#### アクセシビリティ準拠のリファレンスの概要 + +以下の表は、igDataChart のアクセシビリティ準拠機能についてまとめています。 + + +| 規則 | 規則内容 | 準拠方法 | +| --- | --- | --- | +| (a) | あらゆる非テキスト要素に対してテキスト相当物を提供するものとします（つまり、「alt」、「longdesc」を介して、または要素コンテンツで)。 | igDataChart はグラフィック専用のコントロールであるため、テーブルまたはチャート データを使用した igGrid™ コンポーネントにチャートを変換することで、障害を持っている人のために代替ビューを提供することが考えられます。そうすることで、読み上げソフトウェアにより、チャートから情報を得ることができます。 | +| (b) | マルチメディア プレゼンテーションに相当する代替物をプレゼンテーションと同期するものとします。 | 記録に準拠するための代替手段については、(a) の注を参照してください。 | +| (c) | 色によって伝達されるすべての情報が色を使用しなくても理解できるように (たとえば、コンテキストやマークアップ) Web ページを設計するものとします。 | igDataChart のスタイルとテーマの設定機能を使用して、チャートの配色を制御し、適切な色を提供できます。 | +| (d)* | 関連付けられたスタイル シートがなくても読めるようにドキュメントを構成するものとします。 | コントロールのマークアップは、クライアント側のコントロールであり、CSS の規則に依存するため、関連付けられたスタイル シートがないと読み取りできません。記録に準拠するための代替手段については、(a) の注を参照してください。 | + + +\* - コントロールの制限。 + + + +##関連コンテンツ + + +### トピック + +このトピックの追加情報については、以下のトピックも合わせてご参照ください。 + +- [**アクセシビリティ準拠**](/accessibility-compliance): すべての {environment:ProductName} コントロールのアクセシビリティ準拠のための参照情報を提供します。 + + + + + + + + + + diff --git a/docs/jquery/src/content/ja/topics/controls/igdatachart/adding.mdx b/docs/jquery/src/content/ja/topics/controls/igdatachart/adding.mdx new file mode 100644 index 0000000000..906cefa9b9 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igdatachart/adding.mdx @@ -0,0 +1,506 @@ +--- +title: "igDataChart の追加" +slug: igdatachart-adding +--- + +# igDataChart の追加 + + +## トピックの概要 +### 目的 + +このトピックでは、`igDataChart`™ コントロールをページに追加し、データにバインドする方法を紹介します。 + +### 必要な背景 + +以下の表に、このトピックを理解するための前提条件として求められる素材をリストします。 + + +**概念** + +- [jQuery](http://docs.jquery.com/Main_Page)、[jQuery UI](http://jqueryui.com/) +- [ASP.NET MVC](http://www.asp.net/mvc) + +**トピック** + +- [{environment:ProductName} の概要](/igniteui-for-jquery-overview): {environment:ProductName}™ ライブラリにつぃての一般的情報 + +- [{environment:ProductName} で JavaScript リソースを使用](/deployment-guide-javascript-resources): このトピックは、必要な JavaScript リソースを追加して {environment:ProductName} ライブラリからコントロールを使用する場合の全般的なガイダンスを提供します。 + +- [igDataChart 概要](/igdatachart-overview): このトピックは、`igDataChart`™ コントロールについて、その主要機能、最低必須事項、ユーザー機能といった事項の概念的情報を提供します。 + +### このトピックの構成 + +このトピックは、以下のセクションで構成されます。 + +- [チャートの Web ページへの追加](#add-chart) + - [概要](#introduction) + - [プレビュー](#preview) + - [要件](#requirements) + - [概要](#overview) + - [手順](#steps) +- [チャート参照のリソース](#charts-reference) +- [関連コンテンツ](#related-content) + - [トピック](#topics) + - [サンプル](#samples) + - [リソース](#resources) + +##チャートの Web ページへの追加 + + +### 概要 + +ここでは、Web ページに凡例とデータ シリーズを含むチャート コントロールを追加する手順を案内します。例のチャートのデータは、HTML/jQuery の例では JavaScript 配列で提供し、ASP.NET MVC の例ではモデル オブジェクトから提供します。チャートは財務チャートと折れ線チャートです。 + +### プレビュー + +以下のスクリーンショットは最終結果のプレビューです。 + +![](../../images/images/Adding_igDataChart_1.png) + +### 要件 + +- この手順を実行するには、以下が必要です。 + - MVC 例では、Visual Studio の ASP.NET MVC Web アプリケーション。 + - HTTP 例では、HTML5 Web ページ。 + +### 概要 + +このトピックでは、Web ページにチャート コントロールを追加する方法をステップごとに示します。以下はプロセスの概念的概要です。 + +1. [必要なリソースへ参照の追加](#add-references-to-required-resources) + 1. [準備](#preparation) + 2. [JavaScript での igLoader の使用](#use-igLoader-in-js) + 3. [MVC Loader の使用](#use-mvc-loader) + 4. [リソースの静的なロード](#load-resources-staticallty) +2. [igDataChart が必要とする HTML マークアップの追加](#add-html-markup) +3. [データ ソースの追加](#add-data-array) +4. [基本チャート オプションの設定](#configure-basic) +5. [チャート軸オプションの設定](#configure-axis) +6. [データ シリーズ オプション](#configure-dataSeries) +7. [(オプション) 最終結果を観察](#view-results) + +### 手順 + +以下のステップは、Web ページに `igDataChart` コントロールを追加する方法を示します。 + +1. 必要なリソースへの参照を追加します。 + + **準備** + + Web サイトまたは Web アプリケーションの `Scripts` という名のフォルダーに jQuery、 jQueryUI および Modernizr JavaScript リソースを追加します。 + + Web サイトまたは Web アプリケーションの `Content/ig` という名前のフォルダーへの {environment:ProductName} CSS ファイルの追加 (詳細は、[{environment:ProductName} のスタイルとテーマの設定](/deployment-guide-styling-and-theming)のトピックを参照してください)。 + + Web サイトまたは Web アプリケーションの `Scripts/ig` という名前のフォルダーへの {environment:ProductName} JavaScript ファイルの追加 (詳細は、[{environment:ProductName} での JavaScript リソースの使用](/deployment-guide-javascript-resources)のトピックを参照してください)。 + + **JavaScript での igLoader の使用** + + `igLoader`™ コントロールは、{environment:ProductName} ライブラリのコントロールで必要な JavaScript および CSS リソースをロードするための推奨される方法です。最初に、`igLoader` スクリプトをページに追加します。 + + **HTML の場合:** + +```html + +``` + + HTML ビューでは、以下のように `igLoader` のインスタンスを作成する必要があります。 + + **HTML の場合:** + +```html + +``` + + **ASP.NET の例** + + ASP.NET MVC ビューのデータは、Controller メソッドと適切なデータ モデル定義により提供されます。データ モデル部分を以下に示します。新しい空のクラスを ASP.NET MVC アプリケーションの Models フォルダーに作成し、以下のコードを追加します。 + + **C# の場合:** + +```csharp + public class StockMarketDataPoint + { + public double Open { get; set; } + public double High { get; set; } + public double Low { get; set; } + public double Close { get; set; } + public double Volume { get; set; } + public DateTime Date { get; set; } + public string DateString { get { return Date.ToShortDateString(); } } + } +``` + + Controllers フォルダーに空のコントローラー クラスを追加し、Index (または、ビューに付けられた任意の名前) メソッドの以下のコードを追加します。 + + **C# の場合:** + +```csharp + public ActionResult Index() + { + List stockMarketData = new List + { + new StockMarketDataPoint { Date = DateTime.Parse("2.1.2010"), Open = 1000, High = 1028.75, Low = 985.25, Close = 1020, Volume = 1995 }, + new StockMarketDataPoint { Date = DateTime.Parse("3.1.2010"), Open = 1020, High = 1032.5, Low = 999.5, Close = 1021, Volume = 1964.5 }, + new StockMarketDataPoint { Date = DateTime.Parse("4.1.2010"), Open = 1021, High = 1033.5, Low = 996, Close = 1033, Volume = 1974.75 }, + new StockMarketDataPoint { Date = DateTime.Parse("5.1.2010"), Open = 1033, High = 1062, Low = 1018.75, Close = 1042, Volume = 1978.5 }, + new StockMarketDataPoint { Date = DateTime.Parse("6.1.2010"), Open = 1042, High = 1058.5, Low = 1019.75, Close = 1029, Volume = 1979 }, + new StockMarketDataPoint { Date = DateTime.Parse("7.1.2010"), Open = 1029, High = 1050.75, Low = 1006, Close = 1042, Volume = 1990 } + }; + + return View(stockMarketData); + } +``` + + ASP.NET MVC ビューに次ぎのコードを追加して厳密に型指定し、上記で作成したデータ モデル クラスを指すようにします。 + + **ASPX の場合:** + +```csharp + <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage>" %> +``` + +4. 基本チャート オプションを設定します。 + + **HTML の例** + + チャートと凡例 div タグをラップしてチャートを描くには、`igDataChart` コントロールをインスタンス化してそのメイン オプションを設定する必要があります。以下のコードを、データ配列定義について上記で使用された ` +``` + +{/* image not found: igDataChart_%28TimeXAxis_Break%29_1.png */} + +図 2: 2010 年で月曜日～金曜日のデータを表示する TimeXAxis。 + +### 軸ラベル書式のプロパティ + +TimeXAxis には以下のラベル フォーマット プロパティがあります。 + +一意の Format および Range を含む TimeAxisLabelFormat のインスタンスが各許可される間隔に関連する LabelFormats プロパティに追加できます。データを年からミリ秒にドリルダウンする際に表示される軸範囲に基づいてラベルが更新されます。 + + +| プロパティ名 | プロパティ タイプ | 説明 | +| --- | --- | --- | +| `LabelFormats` | array | ラベル書式設定のリスト。選択したラベル書式は、軸の表示範囲より小さい最大範囲を持つ間隔です。 | + + +軸に追加された各 TimeAxisLabelFormat の Format および Range プロパティを使用して構成をカスタマイズできます。 +たとえば、以下はビューで時間の範囲に基づいたラベル書式の一般的な例です。 + +1. 1825 日以上 (5 年間) の書式設定は "yyyy" になります。 +2. 365 日以上 (1 年間) の書式設定は "MMM yy" になります。 +3. 1 日以上の書式設定は "MMM dd" になります。 +4. 5 時間以上の書式設定は "hh:mm" になります。 +5. 30 分以下の書式設定は "hh:mm:ss" になります。 + +**JavaScript の場合:** + +```js + +``` +{/* image not found: igDataChart_%28TimeXAxis_LabelFormats%29_1.png */} + +図 3: "hh:mm:ss" のカスタム TimeAxisLabelFormat を持つ igDataChart コントロール + +### 軸間隔のプロパティ + +TimeXAxis は TimeAxisInterval 型の Intervals コレクションを提供します。コレクションに追加された各 TimeAxisInterval は一意の Interval、Range、および IntervalType を割り当てます。 + +一意の Interval および Range を含む TimeAxisInterval のインスタンスが各 IntervalType に関連する Intervals プロパティに追加できます。データを年からミリ秒にドリルダウンする際にチャートで表示される時間範囲に基づいてラベル間のスペースが更新されます。 + + + +| プロパティ名 | プロパティ タイプ | 説明 | +| --- | --- | --- | +| `Intervals` | array | 軸ラベル間隔のリスト。間隔は表示される軸範囲に基づいて選択されます。 | + + +以下のコード スニペットは、igDataChart コントロールで各 IntervalType の Interval を実装する方法を紹介します。この結果は、以下の図 3 に示されます。 + +```js + +``` + +{/* image not found: igDataChart_%28TimeXAxis_Interval%29_1.png */} + +図 4: 48 時ごとにデータを表示する TimeXAxis。 + +### 関連トピック + +以下のトピックでは、このトピックに関連する追加情報を提供しています。 + +- [igDataChart の追加](/igdatachart-adding): このトピックでは、`igDataChart` コントロールをページに追加し、データにバインドする方法を紹介します。 + +以下のサンプルでは、このトピックに関連する追加情報を提供しています。 + +- [時間 X 軸]({environment:SamplesUrl}/data-chart/time-x-axis): このサンプルは、`igDataChart` コントロールで時間 X 軸の軸ブレーク機能を紹介します。 \ No newline at end of file diff --git a/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/configuring.mdx b/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/configuring.mdx new file mode 100644 index 0000000000..09edd127c5 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/configuring.mdx @@ -0,0 +1,62 @@ +--- +title: "igDataChart の構成" +slug: igdatachart-configuring +--- + +# igDataChart の構成 + + + +##このグループのトピックについて + + +### 概要 + +このトピック グループは、向きや方向および視覚要素を含む `igDataChart`™ コントロールのさまざまな要素を構成する方法を説明します。 + +### トピック + + +- [チャートのアニメーション化 (チャートの Motion Framework)](/igdatachart-animating-charts) + +Infragistics® Motion Framework™ は、{environment:ProductName}™ チャート コントロールのデータ変更をアニメーション化するためのフレームワークです。 + +- [ナビゲーション機能の構成 (igDataChart)](/igdatachart-configuring-navigation-features) + +このトピックでは、コード例を使用して、`igDataChart`™ コントロールのナビゲーション機能の構成方法、およびその API を使用してチャートの表示部分の位置とサイズを定義する方法を説明します。 + +- [チャートのタイトル / サブタイトルの構成 (igDataChart)](/igdatachart-chart-titles-and-subtitles) + +このトピックでは、`igDataChart`™ コントロールのチャート タイトルとサブタイトル機能を使用する方法を説明します。 + +- [軸のタイトルの構成 (igDataChart)](/igdatachart-axis-title) + +このトピックでは、`igDataChart`™ コントロールでの軸タイトルの設定に関する情報を提供します。 + +- [シリーズの強調表示の構成 (igDataChart)](/igdatachart-series-highlighting) + +このトピックは、サポートされるシリーズのリストに従って、シリーズの強調表示機能の有効化についての情報を提供します。このトピックでは、利用可能なイベントを使用してシリーズの協調表示を構成する方法についても説明します。 + +- [軸間隔の構成 (igDataChart)](igdatachart-axis-intervals.html) + +このトピックでは、`igDataChart`™ コントロールの主軸および副軸の間隔機能を構成する方法を説明します。 + +- [ホバー操作の構成 (igDataChart)](./04_Hover Interactions/~HoverInteractions_Hover_Interactions.mdx) + +このグループのトピックでは、ホバー操作機能について説明します。 + +- [Knockout サポートの構成 (igDataChart)](/igdatachart-knockoutjs-support) + +このトピックは、Knockout ライブラリにより管理されるビューモードのオブジェクトをバインドするために `igDataChart`™ コントロールを構成する方法について説明します。 + +- [時間 X 軸の使用 (igDataChart)](/igdatachart-configuring-timexaxis) + +このトピックは、時間 X 軸を設定し、軸ブレークを有効にする方法についての情報を提供します。 + + + + + + + + diff --git a/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/hover-interactions/callout-layer.mdx b/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/hover-interactions/callout-layer.mdx new file mode 100644 index 0000000000..63ceb35f21 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/hover-interactions/callout-layer.mdx @@ -0,0 +1,111 @@ +--- +title: "コールアウト レイヤーの構成 (igDataChart)" +slug: hoverinteractions-callout-layer +--- + +# コールアウト レイヤーの構成 (igDataChart) + + +## トピックの概要 + +### 目的 + + +このトピックは、コールアウト レイヤーについての情報を提供します。コールアウト レイヤーのプロパティについて説明し、実装例を提供します。 + +### 前提条件 + +本トピックの理解を深めるために、以下のトピックを参照することをお勧めします。 + +- [Adding igDataChart](/igdatachart-adding): igDataChart の追加:このトピックでは、igDataChart コントロールをページに追加し、データにバインドする方法を紹介します。 + +- [igDataChart をデータへバインド](/igdatachart-databinding): このトピックでは、[igDataChart](/igdatachart-databinding)™ コントロールを各種データ ソース (JavaScript 配列、IQueryable<T>、Web サービス) にバインドする方法について説明します。 + + + + +### このトピックの内容 + +このトピックは、以下のセクションで構成されます。 + +- [概要](#overview) + - [プレビュー](#preview) +- [プロパティ](#properties) +- [例](#example) +- [関連コンテンツ](#related-content) + - [トピック](#topics) + - [サンプル](#samples) + + + +## 概要 + +#### コールアウト レイヤーの概要 + +`calloutLayer` はチャート既存または新しいデータの注釈を表示します。 + +### プレビュー + +以下の画像は、`calloutLayer` を使用して描画した `igDataChart` コントロールのプレビューです。 + +![](../../../../images/images/jQuery_Callout_Layer_01.png) + + +## プロパティ + +#### コールアウト レイヤーのまとめ + +以下の表は `calloutLayer` レイヤーのプロパティの概要です。 + +プロパティ名 | プロパティ型 | 説明 +---|---|--- +dataSource | `Array`| コールアウト情報で使用されるデータ。 +labelMemberPath | `String`| 注釈ラベルとして使用されるデータのパス。 +xMemberPath | `String`| 注釈の x 位置として使用されるデータのパス。 +yMemberPath | `String`| 注釈の y 位置として使用されるデータのパス。 +isCalloutOffsettingEnabled | `Boolean`| コールアウト位置が競合解決で調整されます。 + + +## 例 + +以下のコードスニペットは、2 つのコールアウト レイヤーを設定する方法を示します。 + +*HTML:* + +```html +$(function () { + $("#chart1").igDataChart({ + series: [ + { + name: "calloutSeriesUsa", + type: "calloutLayer", + dataSource: usaCallouts, + xMemberPath: "Index", + yMemberPath: "Value", + labelMemberPath: "Label" + }, + { + name: "calloutSeriesRus", + type: "calloutLayer", + dataSource: rusCallouts, + xMemberPath: "Index", + yMemberPath: "Value", + labelMemberPath: "Label" + } + ] + }); +}); +``` + +## 関連コンテンツ + +### トピック + +- [ホバー インタラクションの概要 (igDataChart)](/hoverinteractions-hover-interactions-overview): このトピックは、利用可能な異なる型のホバー操作レイヤーなど、`igDataChart` コントロールで使用できるホバー操作について概念的な情報を提供します。 + + +### サンプル + +以下のサンプルでは、このトピックに関連する追加情報を提供します。 + +- [コールアウト レイヤー]({environment:SamplesUrl}/data-chart/callout-layer): このサンプルは、`igDataChart` でコールアウト注釈レイヤーを使用しています。 diff --git a/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/hover-interactions/category-highlight-layer.mdx b/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/hover-interactions/category-highlight-layer.mdx new file mode 100644 index 0000000000..60d6fc98e1 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/hover-interactions/category-highlight-layer.mdx @@ -0,0 +1,116 @@ +--- +title: "カテゴリ ハイライト レイヤーの構成 (igDataChart)" +slug: hoverinteractions-category-highlight-layer +--- + +# カテゴリ ハイライト レイヤーの構成 (igDataChart) + +## トピックの概要 + +### 目的 + +このトピックは、ホバー操作に使用されるカテゴリ ハイライト レイヤーについての情報を提供します。カテゴリ ハイライト レイヤーのプロパティについて説明し、実装例を示します。 + +### 前提条件 + +このトピックを理解するために、以下のトピックを参照することをお勧めします。 + +- [igDataChart の追加](/igdatachart-adding): このトピックでは、`igDataChart`™ コントロールをページに追加し、データにバインドする方法を紹介します。 + +- [igDataChart をデータにバインド](/igdatachart-databinding): このトピックでは、`igDataChart`™ コントロールを各種データ ソース (JavaScript 配列、`IQueryable`、Web サービス) にバインドする方法について説明します。 + + + +### このトピックの内容 + +このトピックは、以下のセクションで構成されます。 + +- [概要](#overview) + - [プレビュー](#preview) +- [プロパティ](#properties) +- [例](#example) +- [関連コンテンツ](#related-content) + - [トピック](#topics) + - [サンプル](#samples) + + + +## 概要 + +#### カテゴリ ハイライト レイヤーの概要 + +`categoryHighlightLayer` は、`igDataChart` コントロール内の 1 つまたはすべてのカテゴリ軸を対象にしています。軸に、軸の主グリッド線の間に配置されるシリーズ、たとえば `columnSeries` などが含まれる場合、現在のカテゴリを塗りつぶすシェイプが描画されます。 + +`lineSeries` シリーズなどその他のシリーズの場合、マウス位置に最も近いグリッドラインで調節可能な厚さを持つバンドを描画します。この場合、`useInterpolation` プロパティが有効になると、x 位置がカーソルの x 位置に付け加えられます。 + +`brush` プロパティを設定することによって、強調表示領域の色を変更できます。このプロパティの詳細は、[ホバー操作プロパティ参照 (igDataChart)](/hoverinteractions-common-properties) のトピックを参照してください。 + +### プレビュー + +以下の画像は、追加の `categoryHighlightLayer` で描画された `igDataChart` コントロールのプレビューです。 + +![](../../../../images/images/jQuery_Category_Highlight_Layer_01.png) + + + +## プロパティ + +#### カテゴリ ハイライト レイヤーのサマリー + +以下の表で、`categoryHighlightLayer` レイヤーのプロパティを簡単に説明します。 + +プロパティ名|プロパティ タイプ|説明 +---|---|--- +bandHighlightWidth|double|このプロパティは、グリッドライン上に配置されたシリーズの強調表示領域の幅を指定します。たとえば、`lineSeries`、`areaSeries` および `splineSeries` です。このプロパティは、グリッドライン間に配置されたシリーズがある場合は影響を及ぼしません。たとえば、`columnSeries` と `waterfallSeries` です。このプロパティが設定されると、グリッドラインの周りに指定されたサイズの縞模様シェイプを強調表示します。 +targetAxis|categoryAxisBase|このプロパティは、どの軸に有効なカテゴリ ハイライト レイヤーを設定するかを指定します。 +useInterpolation|bool|このプロパティは、強調表示バンドがグリッドラインにスナップするのでなくカーソルにスナップすべきかどうかを指定します。このプロパティは、グリッドライン間に配置されたシリーズがある場合は影響を及ぼしません。たとえば、`columnSeries` および `waterfallSeries` です。 + + +## 例 + +このサンプルでは、igDataChart コントロールで単一/複数のカテゴリ軸をターゲットにしたカテゴリ ハイライト レイヤーを紹介します。 +このサンプル オプション ペインでは、カテゴリ ハイライト レイヤーのプロパティを変更できます。強調表示の色、アウトライン、太さなどの変更が可能です。 + +
    + [カテゴリ ハイライト レイヤー]({environment:SamplesEmbedUrl}/data-chart/category-highlight-layer) + ![](../../../../images/images/jQuery_Category_Highlight_Layer_01.png) +
    + +## 関連コンテンツ + +### トピック + +- [ホバー操作の概要 (igDataChart)](/hoverinteractions-hover-interactions-overview): このトピックは、利用可能な異なる型のホバー操作レイヤーなど、`igDataChart` コントロール上で利用できるホバー操作について概念的な情報を提供します。 + +- [ホバー操作プロパティ参照 (igDataChart)](/hoverinteractions-common-properties): このトピックは、ホバー操作機能が、series クラスから継承したツールチップの相互作用を強調表示、ホバリングおよび相互作用するために使用するプロパティおよびメソッドについての情報を提供します。 + +- [カテゴリ ハイライト レイヤーの構成 (igDataChart)](/hoverinteractions-category-highlight-layer): このトピックは、ホバー操作に使用されるカテゴリ ハイライト レイヤーについての情報を提供します。カテゴリ ハイライト レイヤーのプロパティについて説明し、実装例を示します。 + +- [カテゴリ ツールチップ レイヤーの構成 (igDataChart)](/hoverinteractions-category-tooltip-layer): このトピックは、ホバー操作に使用されるカテゴリ ツールチップ レイヤーについての情報を提供します。カテゴリ ツールチップ レイヤーのプロパティについて説明し、実装例を提供します。 + +- [項目ツールチップ レイヤーの構成 (igDataChart)](/hoverinteractions-item-tooltip-layer): このトピックは、ホバー操作に使用される項目ツールチップ レイヤーについての情報を提供します。項目ツールチップ レイヤーのプロパティについて説明し、実装例も提供します。 + +- [十字線レイヤーの構成 (igDataChart)](/hoverinteractions-crosshair-layer): このトピックは、ホバー操作に使用される十字線レイヤーについての情報を提供します。十字線のプロパティについて説明し、実装例を示します。 + + +### サンプル + +このトピックについては、以下のサンプルも参照してください。 + +- [ホバー操作 - カテゴリ項目ハイライト レイヤー](/hoverinteractions-category-item-highlight-layer#example): このサンプルは、カテゴリ軸を使用するシリーズの項目を強調表示するカテゴリ項目ハイライト レイヤーを紹介します。その位置にバンド図形、またはマーカーを描画して、項目を強調表示します。このサンプル オプション ペインでは、カテゴリ ハイライト レイヤーのプロパティを変更できます。強調表示の色、アウトライン、太さなどの変更が可能です。 + +- [ホバー操作 - カテゴリ ツールチップ レイヤー](/hoverinteractions-category-tooltip-layer#example): このサンプルでは、カテゴリ軸を使用するシリーズのグループ化されたツールチップを表示するカテゴリ ツールチップ レイヤを紹介します。このサンプル オプション ペインでは、ツールチップの位置の変更など、レイヤーのプロパティを編集できます。 + +- [ホバー操作 - 項目ツールチップ レイヤー](/hoverinteractions-item-tooltip-layer#example): このサンプルは、各ターゲット シリーズにツールチップを表示する項目ツールチップ レイヤーを紹介します。このサンプル オプション ペインでは、トランジション期間の変更など、レイヤー プロパティを編集できます。 + +- [ホバー操作 - 十字線レイヤー](/hoverinteractions-crosshair-layer#example): このサンプルは、ターゲットとする各シリーズの実際の値で交差する、十字線を提供する十字線レイヤーを紹介します。このサンプル オプション ペインでは、十字線の太さの変更など、レイヤー プロパティを編集できます。 + +- [ホバー操作 - 複数レイヤー]({environment:SamplesUrl}/data-chart/multiple-layers): このサンプルは、`igDataChart` コントロール内での複数レイヤーの相互作用を紹介します。このサンプルでは、項目ツールチップ レイヤー、十字線レイヤー、およびカテゴリ ハイライト レイヤーを表示します。 + + + + + + + + diff --git a/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/hover-interactions/category-item-highlight-layer.mdx b/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/hover-interactions/category-item-highlight-layer.mdx new file mode 100644 index 0000000000..45db8a5ca1 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/hover-interactions/category-item-highlight-layer.mdx @@ -0,0 +1,113 @@ +--- +title: "カテゴリ項目ハイライト レイヤーの構成 (igDataChart)" +slug: hoverinteractions-category-item-highlight-layer +--- + +# カテゴリ項目ハイライト レイヤーの構成 (igDataChart) + +## トピックの概要 + +### 目的 + +このトピックは、ホバー操作に使用されるカテゴリ項目ハイライト レイヤーについての情報を提供します。カテゴリ項目ハイライト レイヤーのプロパティについて説明し、実装例を示します。 + +### 前提条件 + +このトピックを理解するために、以下のトピックを参照することをお勧めします。 + +- [igDataChart の追加](/igdatachart-adding): このトピックでは、`igDataChart`™ コントロールをページに追加し、データにバインドする方法を紹介します。 + +- [igDataChart をデータにバインド](/igdatachart-databinding): このトピックでは、`igDataChart`™ コントロールを各種データ ソース (JavaScript 配列、`IQueryable`、Web サービス) にバインドする方法について説明します。 + + + +### このトピックの内容 + +このトピックは、以下のセクションで構成されます。 + +- [概要](#overview) + - [プレビュー](#preview) +- [プロパティ](#properties) +- [例](#example) +- [関連コンテンツ](#related-content) + - [トピック](#topics) + - [サンプル](#samples) + + + +## 概要 + +#### カテゴリ項目ハイライト レイヤーの概要 + +`categoryItemHighlightLayer` は、縞模様シェイプまたはマーカーをその位置で描画することにより、カテゴリ軸を使用してシリーズで項目を強調表示します。 + +デフォルトの強調表示はシリーズの型に依存します。たとえば、`columnSeries` と `lineSeries` の強調表示は同じではありません。`columnSeries` の場合は縞模様シェイプであり、`lineSeries` の場合はマーカーです。`highlightType` プロパティを設定して、デフォルトの強調表示をオーバーライドできます。このプロパティの詳細は、以下の[プロパティ](#properties) セクションを参照してください。 + +### プレビュー + +以下の画像は、追加の `categoryItemHighlightLayer` で描画された `igDataChart` コントロールのプレビューです。 + +![](../../../../images/images/jQuery_Item_Highlight_Layer_01.png) + + + +## プロパティ + +#### カテゴリ項目ハイライト レイヤーのサマリー + +以下の表で、`categoryItemHighlightLayer` のプロパティを簡単に説明します。 + +プロパティ名|プロパティ タイプ|説明 +---|---|--- +bandHighlightWidth|double|このプロパティは、グリッドライン上に配置されたシリーズにおいて項目の強調表示領域の幅を指定します。たとえば、`lineSeries`、`areaSeries` および `splineSeries` です。このプロパティは、グリッドライン間に配置されたシリーズがある場合は影響を及ぼしません。たとえば、`columnSeries` と `waterfallSeries` です。このプロパティに値セットがある場合、縞模様シェイプがグリッドラインの周りに強調表示されます。 +highlightType|categoryItemHighlightType|このプロパティは、強調表示の見た目を指定します。デフォルトでは、`lineSeries` などのシリーズにはマーカーを使用し、また `columnSeries` などのシリーズには強調表示縞模様を使用します。 +useInterpolation|bool|このプロパティは、強調表示バンドがグリッドラインにスナップするのでなくカーソルにスナップすべきかどうかを指定します。このプロパティは、グリッドライン間に配置されたシリーズがある場合は影響を及ぼしません。たとえば、`columnSeries` シリーズと `waterfallSeries` シリーズです。 + + +## 例 + +このサンプルは、カテゴリ項目ハイライト レイヤーでカテゴリ軸を使用、その場でバンド図形またはマーカーを描画してシリーズの項目を強調表示します。このサンプル オプション ペインでは、カテゴリ ハイライト レイヤーのプロパティを変更できます。強調表示の色、アウトライン、太さなどの変更が可能です。 + +
    + [カテゴリ項目ハイライト レイヤー]({environment:SamplesEmbedUrl}/data-chart/category-item-highlight-layer) + ![](../../../../images/images/jQuery_Item_Highlight_Layer_01.png) +
    + +## 関連コンテンツ + +### トピック + +- [ホバー操作の概要 (igDataChart)](/hoverinteractions-hover-interactions-overview): このトピックは、利用可能な異なる型のホバー操作レイヤーなど、`igDataChart` コントロール上で利用できるホバー操作について概念的な情報を提供します。 + +- [ホバー操作プロパティ参照 (igDataChart)](/hoverinteractions-common-properties): このトピックは、ホバー操作機能が、`series` クラスから継承したツールチップの相互作用を強調表示、ホバリングおよび相互作用するために使用するプロパティおよびメソッドについての情報を提供します。 + +- [カテゴリ ハイライト レイヤーの構成 (igDataChart)](/hoverinteractions-category-highlight-layer): このトピックは、ホバー操作に使用されるカテゴリ ハイライト レイヤーについての情報を提供します。カテゴリ ハイライト レイヤーのプロパティについて説明し、実装例を示します。 + +- [カテゴリ ツールチップ レイヤーの構成 (igDataChart)](/hoverinteractions-category-tooltip-layer): このトピックは、ホバー操作に使用されるカテゴリ ツールチップ レイヤーについての情報を提供します。カテゴリ ツールチップ レイヤーのプロパティについて説明し、実装例を提供します。 + +- [項目ツールチップ レイヤーの構成 (igDataChart)](/hoverinteractions-item-tooltip-layer): このトピックは、ホバー操作に使用される項目ツールチップ レイヤーについての情報を提供します。項目ツールチップ レイヤーのプロパティについて説明し、実装例も提供します。 + +- [十字線レイヤーの構成 (igDataChart)](/hoverinteractions-crosshair-layer): このトピックは、ホバー操作に使用される十字線レイヤーについての情報を提供します。十字線のプロパティについて説明し、実装例を示します。 + + +### サンプル + +このトピックについては、以下のサンプルも参照してください。 + +- [ホバー操作 - カテゴリ ハイライト レイヤー](/hoverinteractions-category-highlight-layer#example): このサンプルは、`igDataChart`™ コントロールで 1 つまたはすべてのカテゴリ軸を対象としたカテゴリ ハイライト レイヤーを紹介します。このサンプル オプション ペインでは、カテゴリ ハイライト レイヤーのプロパティを変更できます。強調表示の色、アウトライン、太さなどの変更が可能です。 + +- [ホバー操作 - カテゴリ ツールチップ レイヤー](/hoverinteractions-category-tooltip-layer#example): このサンプルでは、カテゴリ軸を使用するシリーズのグループ化されたツールチップを表示するカテゴリ ツールチップ レイヤを紹介します。このサンプル オプション ペインでは、ツールチップの位置の変更など、レイヤーのプロパティを編集できます。 + +- [ホバー操作 - 項目ツールチップ レイヤー](/hoverinteractions-item-tooltip-layer#example): このサンプルは、各ターゲット シリーズにツールチップを表示する項目ツールチップ レイヤーを紹介します。このサンプル オプション ペインでは、トランジション期間の変更など、レイヤー プロパティを編集できます。 + +- [ホバー操作 - 十字線レイヤー](/hoverinteractions-crosshair-layer#example): このサンプルは、ターゲットとする各シリーズの実際の値で交差する、十字線を提供する十字線レイヤーを紹介します。このサンプル オプション ペインでは、十字線の太さの変更など、レイヤー プロパティを編集できます。 + +- [ホバー操作 - 複数レイヤー]({environment:SamplesUrl}/data-chart/multiple-layers): このサンプルは、`igDataChart` コントロール内での複数レイヤーの相互作用を紹介します。このサンプルでは、項目ツールチップ レイヤー、十字線レイヤー、およびカテゴリ ハイライト レイヤーを表示します。 + + + + + + + + diff --git a/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/hover-interactions/category-tooltip-layer.mdx b/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/hover-interactions/category-tooltip-layer.mdx new file mode 100644 index 0000000000..0fb657054e --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/hover-interactions/category-tooltip-layer.mdx @@ -0,0 +1,115 @@ +--- +title: "カテゴリ ツールチップ レイヤーの構成 (igDataChart)" +slug: hoverinteractions-category-tooltip-layer +--- + +# カテゴリ ツールチップ レイヤーの構成 (igDataChart) + +## トピックの概要 + +### 目的 + +このトピックは、ホバー操作に使用されるカテゴリ ツールチップ レイヤーについての情報を提供します。カテゴリ ツールチップ レイヤーのプロパティについて説明し、実装例を提供します。 + +### 前提条件 + +このトピックを理解するために、以下のトピックを参照することをお勧めします。 + + +- [igDataChart の追加](/igdatachart-adding): このトピックでは、`igDataChart`™ コントロールをページに追加し、データにバインドする方法を紹介します。 + +- [igDataChart をデータにバインド](/igdatachart-databinding): このトピックでは、`igDataChart`™ コントロールを各種データ ソース (JavaScript 配列、`IQueryable`、Web サービス) にバインドする方法について説明します。 + + +### このトピックの内容 + +このトピックは、以下のセクションで構成されます。 + +- [概要](#overview) + - [プレビュー](#preview) +- [プロパティ](#properties) +- [例](#example) +- [関連コンテンツ](#related-content) + - [トピック](#topics) + - [サンプル](#samples) + + + +## 概要 + +#### カテゴリ ヒント レイヤーの概要 + +`categoryTooltipLayer` は、カテゴリ軸を使用する `igDataChart` コントロールのシリーズ用にグループ化されたヒントを表示します。 + +特殊な軸を対象とするヒントを構成できます。そのためには、`targetAxis` プロパティを設定します。このプロパティの詳細は、以下の[プロパティ](#properties) セクションを参照してください。 + +デフォルトで、グループ化されたツールチップは `igDataChart` コントロールの一番上に表示されます。ただし、このデフォルト値は `toolTipPosition` プロパティを設定することでオーバーライドできます。プロパティの詳細は、以下の `categoryTooltipLayer` セクションを参照してください。 + +#### プレビュー + +以下の画像は、追加の `categoryTooltipLayer` で描画される `igDataChart `コントロールのプレビューです。 + +![](../../../../images/images/jQuery_Category_Tooltip_Layer_01.png) + + +## プロパティ + +#### カテゴリ ヒント レイヤーの要点 + +以下の表で、categoryTooltipLayer レイヤーのプロパティを簡単に説明します。 + +プロパティ名|プロパティ タイプ|説明 +---|---|--- +targetAxis|axis|このプロパティは、どの軸に有効なカテゴリ ヒント レイヤーを設定するかを指定します。 +useInterpolation|bool|このプロパティは、ツールチップの x 位置がグリッド ラインや中央スペースにスナップするのでなく補間されるべきであるかどうかを指定します。 +toolTipPosition|categoryTooltipLayerPosition|このプロパティは、ツールチップの位置を指定します。以下に設定できます。
    • Auto - 位置は自動的に選択されます
    • OutsideStart - 軸の外側の始まり部分に表示します。
    • InsideStart - 軸の内側の始まり部分に表示します。
    • InsideEnd - 軸の内側の終わり部分に表示します。
    • OutsideEnd - 軸の外側の終わり部分に表示します。
    + + +## 例 + +このサンプルは、カテゴリ軸を使用してグループ化されたツールチップを表示するカテゴリ ツール チップ レイヤーを紹介します。 +このサンプル オプション ペインでは、ツールチップの位置の変更など、レイヤーのプロパティを編集できます。 + +
    + [カテゴリ ツールチップ レイヤー]({environment:SamplesEmbedUrl}/data-chart/category-tooltip-layer) + ![](../../../../images/images/jQuery_Category_Tooltip_Layer_01.png) +
    + + +## 関連コンテンツ + +### トピック + +- [ホバー操作の概要 (igDataChart)](/hoverinteractions-hover-interactions-overview): このトピックは、利用可能な異なる型のホバー操作レイヤーなど、`igDataChart` コントロール上で利用できるホバー操作について概念的な情報を提供します。 + +- [ホバー操作プロパティ参照 (igDataChart)](/hoverinteractions-common-properties): このトピックは、ホバー操作機能が、series クラスから継承したツールチップの相互作用を強調表示、ホバリングおよび相互作用するために使用するプロパティおよびメソッドについての情報を提供します。 + +- [カテゴリ ハイライト レイヤーの構成 (igDataChart)](/hoverinteractions-category-highlight-layer): このトピックは、ホバー操作に使用されるカテゴリ ハイライト レイヤーについての情報を提供します。カテゴリ ハイライト レイヤーのプロパティについて説明し、実装例を示します。 + +- [カテゴリ項目ハイライト レイヤーの構成 (igDataChart)](/hoverinteractions-category-item-highlight-layer): このトピックは、ホバー操作に使用されるカテゴリ項目ハイライト レイヤーについての情報を提供します。カテゴリ項目ハイライト レイヤーのプロパティについて説明し、実装例を示します。 + +- [項目ツールチップ レイヤーの構成 (igDataChart)](/hoverinteractions-item-tooltip-layer): このトピックは、ホバー操作に使用される項目ツールチップ レイヤーについての情報を提供します。項目ツールチップ レイヤーのプロパティについて説明し、実装例も提供します。 + +- [十字線レイヤーの構成 (igDataChart)](/hoverinteractions-crosshair-layer): このトピックは、ホバー操作に使用される十字線レイヤーについての情報を提供します。十字線のプロパティについて説明し、実装例を示します。 + + +### サンプル + +このトピックについては、以下のサンプルも参照してください。 + +- [ホバー操作 - カテゴリ ハイライト レイヤー](/hoverinteractions-category-highlight-layer#example): このサンプルは、`igDataChart`™ コントロールで 1 つまたはすべてのカテゴリ軸を対象としたカテゴリ ハイライト レイヤーを紹介します。このサンプル オプション ペインでは、カテゴリ ハイライト レイヤーのプロパティを変更できます。強調表示の色、アウトライン、太さなどの変更が可能です。 + +- [ホバー操作 - カテゴリ項目ハイライト レイヤー](/hoverinteractions-category-item-highlight-layer#example): このサンプルは、カテゴリ軸を使用するシリーズの項目を強調表示するカテゴリ項目ハイライト レイヤーを紹介します。その位置にバンド図形、またはマーカーを描画して、項目を強調表示します。このサンプル オプション ペインでは、カテゴリ ハイライト レイヤーのプロパティを変更できます。強調表示の色、アウトライン、太さなどの変更が可能です。 + +- [ホバー操作 - 項目ツールチップ レイヤー](/hoverinteractions-item-tooltip-layer#example): このサンプルは、各ターゲット シリーズにツールチップを表示する項目ツールチップ レイヤーを紹介します。このサンプル オプション ペインでは、トランジション期間の変更など、レイヤー プロパティを編集できます。 + +- [ホバー操作 - 十字線レイヤー](/hoverinteractions-crosshair-layer#example): このサンプルは、ターゲットとする各シリーズの実際の値で交差する、十字線を提供する十字線レイヤーを紹介します。このサンプル オプション ペインでは、十字線の太さの変更など、レイヤー プロパティを編集できます。 + +- [ホバー操作 - 複数レイヤー]({environment:SamplesUrl}/data-chart/multiple-layers): このサンプルは、`igDataChart` コントロール内での複数レイヤーの相互作用を紹介します。このサンプルでは、項目ツールチップ レイヤー、十字線レイヤー、およびカテゴリ ハイライト レイヤーを表示します。 + + + + + + + diff --git a/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/hover-interactions/common-properties.mdx b/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/hover-interactions/common-properties.mdx new file mode 100644 index 0000000000..0a614d4063 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/hover-interactions/common-properties.mdx @@ -0,0 +1,155 @@ +--- +title: "ホバー操作プロパティ参照 (igDataChart)" +slug: hoverinteractions-common-properties +--- + +# ホバー操作プロパティ参照 (igDataChart) + +## トピックの概要 + +### 目的 + +このトピックは、ホバー操作機能が、series クラスから継承したツールチップの相互作用を強調表示、ホバリングおよび相互作用するために使用するプロパティおよびメソッドについての情報を提供します。 + +### 前提条件 + +本トピックの理解を深めるために、以下のトピックを参照することをお勧めします。 + +- [Adding igDataChart](/igdatachart-adding): igDataChart の追加:このトピックでは、igDataChart コントロールをページに追加し、データにバインドする方法を紹介します。 + +- [igDataChart をデータへバインド](/igdatachart-databinding): このトピックでは、[igDataChart](/igdatachart-databinding)™ コントロールを各種データ ソース (JavaScript 配列、IQueryable<T>、Web サービス) にバインドする方法について説明します。 + + + +### このトピックの内容 + +このトピックは、以下のセクションで構成されます。 + +- [概要](#overview) +- [共有プロパティ](#common-properties) +- [クロスヘア レイヤーに継承プロパティを設定](#inherited-properties-crosshair-layer) +- [関連コンテンツ](#related-content) + + + +## 概要 + +ホバー インタラクション レイヤーは、ホバー操作のコンテキストに関係する `series` 基本クラスのプロパティおよびメソッドを継承します。たとえば、ホバー操作の設計ではマウスとは対話しないため、マウス イベントを起動しません。また、ホバー インタラクション レイヤーはデータを直接表示しないため、`scrollIntoView` のようなメソッドはこの機能には該当しません。 + + +## 共通のプロパティ + +以下の表で、ホバー インタラクション クラスより継承された series クラス プロパティを簡単に説明します。 + +プロパティ名 | プロパティ型 | 説明 +---|---|--- +brush | brush | ホバー インタラクション レイヤーは、相互作用しているシリーズからその `brush` を継承します。 ただし、`brush` プロパティを直接設定してオーバーライドできます。 +outline | brush | このプロパティは、上記に示した `brush` プロパティと同じガイドラインに沿っています。 +cursorPosition | point | このプロパティは、デフォルトのマウス位置 (NaN, NaN) でなく使用するワールド位置を指定します。このプロパティを設定すると、提供されるワールド位置に特定のレイヤーを固定します。**注:** ワールド位置に軸の全体範囲に対するカーソルのグローバル位置を表す 0 から 1 の範囲にある x 値と y 値があります。 +isDefaultCrosshairBehaviorDisabled | bool | このプロパティは、シリーズのデフォルト十字線がチャート上のホバー インタラクション レイヤーであるときに無効になります。デフォルト値は True です。 +useIndex | bool | このプロパティは、ホバー インタラクション レイヤーがシリーズ インデックスを使用し、`igDataChart` コントロールに割り当てられる Brushes コレクションに色を予約するかどうかを指定します。デフォルト値は False です。 +useLegend | bool | このプロパティは、ホバー インタラクション レイヤーを凡例に表示するかどうかを指定します。このプロパティを true に設定すると、凡例に表示する必要があるものとしてシリーズをインデックス化します。凡例で認識するためには、シリーズに単一の色を割り当てなければなりません。デフォルト値は False です。 + +
    + +メソッド名 | メソッドのパラメーター | 説明 +---|---|--- +moveCursorPoint | point | このプロパティにより、カーソルの動きをシミュレートできます。 + + + + + +## 十字線レイヤーに継承プロパティを設定する + +### 例 + +以下のスクリーンショットは、以下の設定を使用して `igDataChart` コントロールの `crosshairLayer` の外観がどのようになるか示します。 + +プロパティ | 値 +---|--- +cursorPosition | 0.55, 0.55 +useLegend | True + + +![](../../../../images/images/jQuery_Hover_Interactions_Legend_01.png) + +以下のコードはこの実装で使用されます。 + +**JavaScript の場合:** + +```js + +``` + +## 関連リンク + +### トピック + +- [ホバー インタラクションの概要 (igDataChart)](/hoverinteractions-hover-interactions-overview): このトピックは、利用可能な異なる型のホバー操作レイヤーなど、`igDataChart` コントロールで使用できるホバー操作について概念的な情報を提供します。 + +- [ホバー インタラクションのプロパティ参照 (igDataChart)](/hoverinteractions-common-properties): このトピックは、ホバー操作機能が、series クラスから継承したツールチップの相互作用を強調表示、ホバリングおよび相互作用するために使用するプロパティおよびメソッドについての情報を提供します。 + +- [十字線レイヤーの設定 (igDataChart)](/hoverinteractions-crosshair-layer): このトピックは、ホバー操作で使用される十字線レイヤーについての情報を提供します。十字線レイヤーのプロパティについての説明とその実装例を示します。 + +- [カテゴリ ハイライト レイヤーの設定 (igDataChart)](/hoverinteractions-category-highlight-layer): このトピックは、ホバー操作に使用する最終値レイヤーについて説明します。カテゴリ ハイライト レイヤーのプロパティについて説明し、実装例を示します。 + +- [カテゴリ項目ハイライト レイヤーの設定 (igDataChart)](/hoverinteractions-category-item-highlight-layer): このトピックは、ホバー操作に使用されるカテゴリ項目ハイライト レイヤーについての情報を提供します。カテゴリ項目ハイライト レイヤーのプロパティについて説明し、実装例を示します。 + +- [カテゴリ ツールチップ レイヤーの設定 (igDataChart)](/hoverinteractions-category-tooltip-layer): このトピックは、ホバー操作で使用されるカテゴリ ツールチップ レイヤーについての情報を提供します。カテゴリ ツールチップ レイヤーのプロパティについて説明し、実装例を提供します。 + +- [項目ツールチップ レイヤーの設定 (igDataChart)](/hoverinteractions-item-tooltip-layer): このトピックは、ホバー操作に使用する項目ツールチップ レイヤーについて説明します。項目ツールチップ レイヤーのプロパティについて説明し、実装例も提供します。 + + +### サンプル + +以下のサンプルでは、このトピックに関連する追加情報を提供します。 + +- [ホバー操作 - カテゴリ ハイライト レイヤー]({environment:SamplesUrl}/data-chart/category-highlight-layer): このサンプルは、カテゴリ軸をターゲットとするカテゴリ ハイライト レイヤー、または `igDataChart` コントロールのすべてのカテゴリ軸を示します。このサンプル オプション ペインでは、カテゴリ ハイライト レイヤーのプロパティを変更できます。強調表示の色、アウトライン、太さなどの変更が可能です。 + +- [ホバー操作 – カテゴリ項目ハイライト レイヤー]({environment:SamplesUrl}/data-chart/category-item-highlight-layer): このサンプルは、カテゴリ項目ハイライト レイヤーでカテゴリ軸を使用、その場でバンド図形またはマーカーを描画してシリーズの項目を強調表示します。このサンプル オプション ペインでは、カテゴリ ハイライト レイヤーのプロパティを変更できます。強調表示の色、アウトライン、太さなどの変更が可能です。 + +- [ホバー操作 - カテゴリ ツールチップ レイヤー ({environment:SamplesUrl}/data-chart/category-tooltip-layer): このサンプルは、カテゴリ軸を使用したカテゴリ ツールチップ レイヤーを示します。このサンプル オプション ペインでは、ツールチップの位置の変更など、レイヤーのプロパティを編集できます。 + +- [ホバー操作 – Crosshair Layer]({environment:SamplesUrl}/data-chart/crosshair-layer): このサンプルは、ターゲットとする実際の値に一致する十字線を提供する十字線レイヤーを紹介します。このサンプル オプション ペインでは、十字線の太さの変更など、レイヤー プロパティを編集できます。 + +- [ホバー操作 - 項目ツールチップ レイヤー{environment:SamplesUrl}/data-chart/item-tooltip-layer): このサンプルは、すべてのターゲット シリーズに個別にツールチップを表示する項目ツールチップ レイヤーを示します。このサンプル オプション ペインでは、トランジション期間の変更など、レイヤー プロパティを編集できます。 + +- [ホバー操作 – 複数レイヤー]({environment:SamplesUrl}/data-chart/multiple-layers): このサンプルは、`igDataChart` 内で複数レイヤーを操作する方法を示します。 このサンプルでは、項目ツールチップ レイヤー、十字線レイヤー、およびカテゴリ ハイライト レイヤーを表示します。 diff --git a/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/hover-interactions/crosshair-layer.mdx b/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/hover-interactions/crosshair-layer.mdx new file mode 100644 index 0000000000..0f785da2df --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/hover-interactions/crosshair-layer.mdx @@ -0,0 +1,136 @@ +--- +title: "十字線レイヤーの構成 (igDataChart)" +slug: hoverinteractions-crosshair-layer +--- + +# 十字線レイヤーの構成 (igDataChart) + + +## トピックの概要 + +### 目的 + + +このトピックは、ホバー操作に使用される十字線レイヤーについての情報を提供します。十字線のプロパティについて説明し、実装例を示します。 + +### 前提条件 + +このトピックを理解するために、以下のトピックを参照することをお勧めします。 + +- [igDataChart の追加](/igdatachart-adding): このトピックでは、`igDataChart`™ コントロールをページに追加し、データにバインドする方法を紹介します。 + +- [igDataChart をデータにバインド](/igdatachart-databinding): このトピックでは、`igDataChart`™ コントロールを各種データ ソース (JavaScript 配列、`IQueryable`、Web サービス) にバインドする方法について説明します。 + + + + + +### このトピックの内容 + +このトピックは、以下のセクションで構成されます。 + +- [概要](#overview) + - [プレビュー](#preview) +- [プロパティ](#properties) +- [例](#example) +- [関連コンテンツ](#related-content) + - [トピック](#topics) + - [サンプル](#samples) + + + +## 概要 + +#### 十字線レイヤーの概要 + +`crosshairLayer` は、対象にするために構成される各シリーズの実際値で、異なるセットの線を描画する各シリーズと交差する十字線として描画されます。 + +`crosshairLayer` を構成し、デフォルトで `igDataChart` コントロールのすべてのシリーズを対象とする場合に、レイヤーに 1 つの特別なシリーズのみを表示するようにします。これを実行するには、`targetSeries` プロパティを設定します。このプロパティの詳細は、以下の[プロパティ](#properties) セクションを参照してください。 + +デフォルトでは、十字線の色は交差するシリーズよりも軽い色になります。しかし、このデフォルト値は、十字線に使用される色を選択できるようにオーバーライドできます。これを実行するには、`brush` プロパティを設定します。このプロパティの詳細は、[ホバー操作プロパティ参照 (igDataChart)](/hoverinteractions-common-properties) のトピックを参照してください。 + +#### プレビュー + +以下の画像は、追加の `crosshairLayer` で描画される `igDataChart` コントロールのプレビューです。 + +![](../../../../images/images/jQuery_Crosshair_Layer_01.png) + + +## プロパティ + +#### 十字線レイヤーのプロパティ + +以下の表で、十字線レイヤーのプロパティを簡単に説明します。 + +プロパティ名|プロパティ タイプ|説明 +---|---|--- +horizontalLineVisibility|visibility|このプロパティは、十字線レイヤーの水平線を表示するかかどうかを指定します。`Collapsed` に設定されている場合は、垂直線のみが表示されます。 +verticalLineVisibilty |visibility|このプロパティは、十字線レイヤーの垂直線を表示するかかどうかを指定します。`Collapsed` に設定されている場合は、水平線のみが表示されます。 +targetSeries|series|このプロパティは、どのシリーズに有効な十字線レイヤーを設定するかを指定します。各シリーズごとに別々に十字線レイヤーを作成して個別に構成できます。 +useInterpolation|bool|このプロパティは、垂直の十字線がデータ ポイント間の補間位置でシリーズと交差すべきかどうかを指定します。通常、十字線レイヤーはシリーズ内に最も近い点を見つけ、十字線がその点に一致するようにしますが、点がまばらである場合はこのプロパティを有効にします。 +isAxisAnnotationEnabled | bool | このプロパティは、十字線の値を Axes の注釈ラベルに表示するかどうかを指定します。 + +## 軸の注釈 + +十字線レイヤーは、関連する軸上に十字線の値を表示できます。つまり、水平十字線の値は Y 軸に表示され、垂直十字線の値は X 軸に表示されます。これは、`isAxisAnnotationEnabled` プロパティを true に設定することで有効にできます。 + +#### 注釈のスタイル設定 + +軸の注釈は、次のプロパティでスタイル設定できます。 + +プロパティ名 | プロパティ タイプ | 説明 +---|---|--- +xAxisAnnotationBackground
    yAxisAnnotationBackground | string | 注釈の背景色。 +xAxisAnnotationTextColor
    yAxisAnnotationTextColor | string | 注釈のテキストの色。 +xAxisAnnotationOutline
    yAxisAnnotationOutline | string | 注釈のアウトラインの色 +xAxisAnnotationStrokeThickness
    yAxisAnnotationStrokeThickness | number | 注釈のアウトラインの太さ。 + +## 例 + +このサンプルは、ターゲットとする実際の値に一致する十字線を提供する十字線レイヤーを紹介します。 +このサンプル オプション ペインでは、十字線の太さの変更など、レイヤー プロパティを編集できます。 + +
    + [十字線レイヤー]({environment:SamplesEmbedUrl}/data-chart/crosshair-layer) + ![](../../../../images/images/jQuery_Crosshair_Layer_01.png) +
    + + +## 関連コンテンツ + +### トピック + +- [ホバー操作の概要 (igDataChart)](/hoverinteractions-hover-interactions-overview): このトピックは、利用可能な異なる型のホバー操作レイヤーなど、`igDataChart` コントロール上で利用できるホバー操作について概念的な情報を提供します。 + +- [ホバー操作プロパティ参照 (igDataChart)](/hoverinteractions-common-properties): このトピックは、ホバー操作機能が、`series` クラスから継承したツールチップの相互作用を強調表示、ホバリングおよび相互作用するために使用するプロパティおよびメソッドについての情報を提供します。 + +- [カテゴリ ハイライト レイヤーの構成 (igDataChart)](/hoverinteractions-category-highlight-layer): このトピックは、ホバー操作に使用されるカテゴリ ハイライト レイヤーについての情報を提供します。カテゴリ ハイライト レイヤーのプロパティについて説明し、実装例を示します。 + +- [カテゴリ項目ハイライト レイヤーの構成 (igDataChart)](/hoverinteractions-category-item-highlight-layer): このトピックは、ホバー操作に使用されるカテゴリ項目ハイライト レイヤーについての情報を提供します。カテゴリ項目ハイライト レイヤーのプロパティについて説明し、実装例を示します。 + +- [カテゴリ ツールチップ レイヤーの構成 (igDataChart)](/hoverinteractions-category-tooltip-layer): このトピックは、ホバー操作に使用されるカテゴリ ツールチップ レイヤーについての情報を提供します。カテゴリ ツールチップ レイヤーのプロパティについて説明し、実装例を提供します。 + +- [項目ツールチップ レイヤーの構成 (igDataChart)](/hoverinteractions-item-tooltip-layer): このトピックは、ホバー操作に使用される項目ツールチップ レイヤーについての情報を提供します。項目ツールチップ レイヤーのプロパティについて説明し、実装例も提供します。 + + +### サンプル + +このトピックについては、以下のサンプルも参照してください。 + +- [ホバー操作 - カテゴリ ハイライト レイヤー](/hoverinteractions-category-highlight-layer#example): このサンプルは、`igDataChart`™ コントロールで 1 つまたはすべてのカテゴリ軸を対象としたカテゴリ ハイライト レイヤーを紹介します。このサンプル オプション ペインでは、カテゴリ ハイライト レイヤーのプロパティを変更できます。強調表示の色、アウトライン、太さなどの変更が可能です。 + +- [ホバー操作 - カテゴリ項目ハイライト レイヤー](/hoverinteractions-category-item-highlight-layer#example): このサンプルは、カテゴリ軸を使用するシリーズの項目を強調表示するカテゴリ項目ハイライト レイヤーを紹介します。その位置にバンド図形、またはマーカーを描画して、項目を強調表示します。このサンプル オプション ペインでは、カテゴリ ハイライト レイヤーのプロパティを変更できます。強調表示の色、アウトライン、太さなどの変更が可能です。 + +- [ホバー操作 - カテゴリ ツールチップ レイヤー](/hoverinteractions-category-tooltip-layer#example): このサンプルでは、カテゴリ軸を使用するシリーズのグループ化されたツールチップを表示するカテゴリ ツールチップ レイヤを紹介します。このサンプル オプション ペインでは、ツールチップの位置の変更など、レイヤーのプロパティを編集できます。 + +- [ホバー操作 - 項目ツールチップ レイヤー](/hoverinteractions-item-tooltip-layer#example): このサンプルは、各ターゲット シリーズにツールチップを表示する項目ツールチップ レイヤーを紹介します。このサンプル オプション ペインでは、トランジション期間の変更など、レイヤー プロパティを編集できます。 + +- [ホバー操作 - 複数レイヤー]({environment:SamplesUrl}/data-chart/multiple-layers): このサンプルは、`igDataChart` コントロール内での複数レイヤーの相互作用を紹介します。このサンプルでは、項目ツールチップ レイヤー、十字線レイヤー、およびカテゴリ ハイライト レイヤーを表示します。 + + + + + + + + diff --git a/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/hover-interactions/final-value-layer.mdx b/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/hover-interactions/final-value-layer.mdx new file mode 100644 index 0000000000..4f1feec7d0 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/hover-interactions/final-value-layer.mdx @@ -0,0 +1,93 @@ +--- +title: "最終値レイヤーの構成 (igDataChart)" +slug: hoverinteractions-final-value-layer +--- + +# 最終値レイヤーの構成 (igDataChart) + + +## トピックの概要 + +### 目的 + + +このトピックは、最終値レイヤーについての情報を提供します。最終値レイヤーのプロパティについて説明し、実装例を示します。 + +### 前提条件 + +本トピックの理解を深めるために、以下のトピックを参照することをお勧めします。 + +- [igDataChart の追加](/igdatachart-adding): このトピックでは、`igDataChart`™ コントロールをページに追加し、データにバインドする方法を紹介します。 + +- [igDataChart をデータへバインド](/igdatachart-databinding): このトピックでは、`igDataChart`™ コントロールを各種データ ソース (JavaScript 配列、`IQueryable`、Web サービス) にバインドする方法について説明します。 + + + + +### このトピックの内容 + +このトピックは、以下のセクションで構成されます。 + +- [概要](#overview) + - [プレビュー](#preview) +- [プロパティ](#properties) +- [例](#example) +- [関連コンテンツ](#related-content) + - [トピック](#topics) + - [サンプル](#samples) + + + +## 概要 + +`finalValueLayer` は、チャートでデータの最終値を表す注釈を表示します。 + +### プレビュー + +以下の画像は、`finalValueLayer` を使用して描画した `igDataChart` コントロールのプレビューです。 + +![](../../../../images/images/jQuery_Final_Value_Layer_01.png) + + +## のプロパティ + +#### 項目ツールチップ レイヤーについて + +以下の表は `finalValueLayer` レイヤーのプロパティの概要です。 + +プロパティ名 | プロパティ型 | 説明 +---|---|--- +finalValueSelectionMode | `enumeration`| 最終値を識別するメソッドを指定します。 + +## 例 + +このサンプルは、最終値レイヤーを有効にする方法を示します。 + +*HTML:* + +```html +$(function () { + $("#chart1").igDataChart({ + series: [ + { + name: "finalValueSeries", + type: "finalValueLayer" + } + ] + }); +}); +``` + + +## 関連コンテンツ + +### トピック + +- [ホバー インタラクションの概要 (igDataChart)](/hoverinteractions-hover-interactions-overview): このトピックは、利用可能な異なる型のホバー操作レイヤーなど、`igDataChart` コントロールで使用できるホバー操作について概念的な情報を提供します。 + + +### サンプル + +以下のサンプルでは、このトピックに関連する追加情報を提供します。 + +- [ホバー操作 – 複数レイヤー]({environment:SamplesUrl}/data-chart/final-value-layer): このサンプルは、`igDataChart` で最終値注釈レイヤーを使用しています。 diff --git a/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/hover-interactions/hover-interactions.mdx b/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/hover-interactions/hover-interactions.mdx new file mode 100644 index 0000000000..e5b5dd2964 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/hover-interactions/hover-interactions.mdx @@ -0,0 +1,44 @@ +--- +title: "ホバー操作の構成 (igDataChart)" +slug: hoverinteractions-hover-interactions +--- + +# ホバー操作の構成 (igDataChart) + +## このグループのトピックについて + +### 概要 + +このグループのトピックでは、ホバー操作機能について説明します。 + +すべてのホバー、強調表示およびツールチップの操作を実装するために、十字線やカテゴリ ハイライト レイヤーなどのレイヤーが `igDataChart` コントロールに追加されます。 + +![](../../../../images/images/jQuery_Multiple_Layers_01.png) + +### トピック + +- [ホバー操作の概要 (igDataChart)](/hoverinteractions-hover-interactions-overview): このトピックは、利用可能な異なる型のホバー操作レイヤーなど、igDataChart コントロール上で利用できるホバー操作について概念的な情報を提供します。 + +- [ホバー操作プロパティ参照 (igDataChart)](/hoverinteractions-common-properties): このトピックは、ホバー操作機能が、series クラスから継承したツールチップの相互作用を強調表示、ホバリングおよび相互作用するために使用するプロパティおよびメソッドについての情報を提供します。 + +- [十字線レイヤーの構成 (igDataChart)](/hoverinteractions-crosshair-layer): このトピックは、ホバー操作に使用される十字線レイヤーについての情報を提供します。十字線のプロパティについて説明し、実装例を示します。 + +- [カテゴリ ハイライト レイヤーの構成 (igDataChart)](/hoverinteractions-category-highlight-layer): このトピックは、ホバー操作に使用されるカテゴリ ハイライト レイヤーについての情報を提供します。カテゴリ ハイライト レイヤーのプロパティについて説明し、実装例を示します。 + +- [カテゴリ項目ハイライト レイヤーの構成 (igDataChart)](/hoverinteractions-category-item-highlight-layer): このトピックは、ホバー操作に使用されるカテゴリ項目ハイライト レイヤーについての情報を提供します。カテゴリ項目ハイライト レイヤーのプロパティについて説明し、実装例を示します。 + +- [カテゴリ ツールチップ レイヤーの構成 (igDataChart)](/hoverinteractions-category-tooltip-layer): このトピックは、ホバー操作に使用されるカテゴリ ツールチップ レイヤーについての情報を提供します。カテゴリ ツールチップ レイヤーのプロパティについて説明し、実装例を提供します。 + +- [項目ツールチップ レイヤーの構成 (igDataChart)](/hoverinteractions-item-tooltip-layer): このトピックは、ホバー操作に使用される項目ツールチップ レイヤーについての情報を提供します。項目ツールチップ レイヤーのプロパティについて説明し、実装例も提供します。 + +- [最終値レイヤーの設定 (igDataChart)](/hoverinteractions-final-value-layer): このトピックは、軸注釈に使用する最終値レイヤーについて説明します。最終値レイヤーのプロパティについて説明し、実装例を示します。 + +- [コールアウト レイヤーの設定 (igDataChart)](/hoverinteractions-callout-layer): このトピックは、注釈に使用するコーポレーションるアウト レイヤーについて説明します。 コールアウト レイヤーのプロパティについて説明し、実装例を提供します。 + + + + + + + + diff --git a/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/hover-interactions/images/jQuery_Callout_Layer_01.png b/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/hover-interactions/images/jQuery_Callout_Layer_01.png new file mode 100644 index 0000000000..873f2ee6b9 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/hover-interactions/images/jQuery_Callout_Layer_01.png differ diff --git a/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/hover-interactions/images/jQuery_Category_Highlight_Layer_01.png b/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/hover-interactions/images/jQuery_Category_Highlight_Layer_01.png new file mode 100644 index 0000000000..3954030326 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/hover-interactions/images/jQuery_Category_Highlight_Layer_01.png differ diff --git a/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/hover-interactions/images/jQuery_Category_Highlight_Layer_02.png b/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/hover-interactions/images/jQuery_Category_Highlight_Layer_02.png new file mode 100644 index 0000000000..4b04e313b6 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/hover-interactions/images/jQuery_Category_Highlight_Layer_02.png differ diff --git a/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/hover-interactions/images/jQuery_Category_Tooltip_Layer_01.png b/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/hover-interactions/images/jQuery_Category_Tooltip_Layer_01.png new file mode 100644 index 0000000000..cfd0792203 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/hover-interactions/images/jQuery_Category_Tooltip_Layer_01.png differ diff --git a/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/hover-interactions/images/jQuery_Category_Tooltip_Layer_02.png b/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/hover-interactions/images/jQuery_Category_Tooltip_Layer_02.png new file mode 100644 index 0000000000..1a74c622d7 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/hover-interactions/images/jQuery_Category_Tooltip_Layer_02.png differ diff --git a/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/hover-interactions/images/jQuery_Crosshair_Layer_01.png b/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/hover-interactions/images/jQuery_Crosshair_Layer_01.png new file mode 100644 index 0000000000..5905c3056c Binary files /dev/null and b/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/hover-interactions/images/jQuery_Crosshair_Layer_01.png differ diff --git a/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/hover-interactions/images/jQuery_Crosshair_Layer_02.png b/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/hover-interactions/images/jQuery_Crosshair_Layer_02.png new file mode 100644 index 0000000000..8d9df16ec5 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/hover-interactions/images/jQuery_Crosshair_Layer_02.png differ diff --git a/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/hover-interactions/images/jQuery_Final_Value_Layer_01.png b/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/hover-interactions/images/jQuery_Final_Value_Layer_01.png new file mode 100644 index 0000000000..fb3c3c6e31 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/hover-interactions/images/jQuery_Final_Value_Layer_01.png differ diff --git a/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/hover-interactions/images/jQuery_Hover_Interactions_Legend_01.png b/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/hover-interactions/images/jQuery_Hover_Interactions_Legend_01.png new file mode 100644 index 0000000000..835d4a6166 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/hover-interactions/images/jQuery_Hover_Interactions_Legend_01.png differ diff --git a/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/hover-interactions/images/jQuery_Item_Highlight_Layer_01.png b/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/hover-interactions/images/jQuery_Item_Highlight_Layer_01.png new file mode 100644 index 0000000000..b49f9ab47a Binary files /dev/null and b/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/hover-interactions/images/jQuery_Item_Highlight_Layer_01.png differ diff --git a/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/hover-interactions/images/jQuery_Item_Highlight_Layer_02.png b/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/hover-interactions/images/jQuery_Item_Highlight_Layer_02.png new file mode 100644 index 0000000000..219542af4b Binary files /dev/null and b/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/hover-interactions/images/jQuery_Item_Highlight_Layer_02.png differ diff --git a/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/hover-interactions/images/jQuery_Item_Tooltip_Layer_01.png b/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/hover-interactions/images/jQuery_Item_Tooltip_Layer_01.png new file mode 100644 index 0000000000..0b15c26355 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/hover-interactions/images/jQuery_Item_Tooltip_Layer_01.png differ diff --git a/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/hover-interactions/images/jQuery_Item_Tooltip_Layer_02.png b/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/hover-interactions/images/jQuery_Item_Tooltip_Layer_02.png new file mode 100644 index 0000000000..6c96b6f08d Binary files /dev/null and b/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/hover-interactions/images/jQuery_Item_Tooltip_Layer_02.png differ diff --git a/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/hover-interactions/images/jQuery_Multiple_Layers_01.png b/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/hover-interactions/images/jQuery_Multiple_Layers_01.png new file mode 100644 index 0000000000..5d0a26c4db Binary files /dev/null and b/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/hover-interactions/images/jQuery_Multiple_Layers_01.png differ diff --git a/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/hover-interactions/item-tooltip-layer.mdx b/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/hover-interactions/item-tooltip-layer.mdx new file mode 100644 index 0000000000..22be67e7fa --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/hover-interactions/item-tooltip-layer.mdx @@ -0,0 +1,114 @@ +--- +title: "項目ツールチップ レイヤーの構成 (igDataChart)" +slug: hoverinteractions-item-tooltip-layer +--- + +# 項目ツールチップ レイヤーの構成 (igDataChart) + + +## トピックの概要 + +### 目的 + + +このトピックは、ホバー操作に使用される項目ツールチップ レイヤーについての情報を提供します。項目ツールチップ レイヤーのプロパティについて説明し、実装例も提供します。 + +### 前提条件 + +このトピックを理解するために、以下のトピックを参照することをお勧めします。 + +- [igDataChart の追加](/igdatachart-adding): このトピックでは、`igDataChart`™ コントロールをページに追加し、データにバインドする方法を紹介します。 + +- [igDataChart をデータにバインド](/igdatachart-databinding): このトピックでは、`igDataChart`™ コントロールを各種データ ソース (JavaScript 配列、`IQueryable`、Web サービス) にバインドする方法について説明します。 + + + + +### このトピックの内容 + +このトピックは、以下のセクションで構成されます。 + +- [概要](#overview) + - [プレビュー](#preview) +- [プロパティ](#properties) +- [例](#example) +- [関連コンテンツ](#related-content) + - [トピック](#topics) + - [サンプル](#samples) + + + +## 概要 + +#### 項目ツールチップ レイヤーの概要 + +`itemToolTipLayer` は、特定のシリーズにマウスがホバーする場合に `igDataChart` コントロール上のすべてのシリーズに関するヒントを個別に表示します。 + +ツールチップのスタイルはチャートから継承しますが、`toolTipStyle` プロパティを設定すると、このデフォルト ビヘイビアーを上書きできます。このプロパティの詳細は、以下の[プロパティ](#properties) セクションを参照してください。 + +### プレビュー + +以下の画像は、追加の` itemToolTipLayer `で描画される` igDataChart `コントロールのプレビューです。 + +![](../../../../images/images/jQuery_Item_Tooltip_Layer_01.png) + + +## プロパティ + +#### 項目ツールチップ レイヤーについて + +以下の表で、`itemToolTipLayer` レイヤーのプロパティを簡単に説明します。 + +プロパティ名|プロパティ タイプ|説明 +---|---|--- +targetSeries|series|このプロパティは、どのシリーズに有効な項目ツールチップ レイヤーを設定するかを指定します。各シリーズごとに別々の項目ツールチップ レイヤーを作成して個別に構成できます。 +toolTipStyle|style|このプロパティは、表示されるヒントに適用するスタイルを指定します。デフォルトではツールチップはチャートからスタイルを継承しますが、このプロパティを設定するとこのデフォルト設定を上書きできます。 +pointerToolTipStyle|style|このプロパティは、ヒントのポインター エリアに適用するスタイルを指定します。 +useInterpolation|bool|このプロパティは、ツールチップの x 位置がグリッド ラインや中央スペースにスナップするのでなく補間されるべきであるかどうかを指定します。 + + +## 例 + +このサンプルは、すべてのターゲット シリーズに項目ツールチップ レイヤーを表示するツールチップ レイヤーを紹介します。 +このサンプル オプション ペインでは、トランジション期間の変更など、レイヤー プロパティを編集できます。 + +
    + [項目ツールチップ レイヤー]({environment:SamplesEmbedUrl}/data-chart/item-tooltip-layer) + ![](../../../../images/images/jQuery_Item_Tooltip_Layer_01.png) +
    + + +## 関連コンテンツ + +### トピック + +- [ホバー操作の概要 (igDataChart)](/hoverinteractions-hover-interactions-overview): このトピックは、利用可能な異なる型のホバー操作レイヤーなど、`igDataChart` コントロール上で利用できるホバー操作について概念的な情報を提供します。 + +- [ホバー操作プロパティ参照 (igDataChart)](/hoverinteractions-common-properties): このトピックは、ホバー操作機能が、`series` クラスから継承したツールチップの相互作用を強調表示、ホバリングおよび相互作用するために使用するプロパティおよびメソッドについての情報を提供します。 + +- [カテゴリ ハイライト レイヤーの構成 (igDataChart)](/hoverinteractions-category-highlight-layer): このトピックは、ホバー操作に使用されるカテゴリ ハイライト レイヤーについての情報を提供します。カテゴリ ハイライト レイヤーのプロパティについて説明し、実装例を示します。 + +- [カテゴリ項目ハイライト レイヤーの構成 (igDataChart)](/hoverinteractions-category-item-highlight-layer): このトピックは、ホバー操作に使用されるカテゴリ項目ハイライト レイヤーについての情報を提供します。カテゴリ項目ハイライト レイヤーのプロパティについて説明し、実装例を示します。 + +- [カテゴリ ツールチップ レイヤーの構成 (igDataChart)](/hoverinteractions-category-tooltip-layer): このトピックは、ホバー操作に使用されるカテゴリ ツールチップ レイヤーについての情報を提供します。カテゴリ ツールチップ レイヤーのプロパティについて説明し、実装例を提供します。 + +- [十字線レイヤーの構成 (igDataChart)](/hoverinteractions-crosshair-layer): このトピックは、ホバー操作に使用される十字線レイヤーについての情報を提供します。十字線のプロパティについて説明し、実装例を示します。 + + +### サンプル + +このトピックについては、以下のサンプルも参照してください。 + +- [ホバー操作 - カテゴリ ハイライト レイヤー](/hoverinteractions-category-highlight-layer#example): このサンプルは、`igDataChart`™ コントロールで 1 つまたはすべてのカテゴリ軸を対象としたカテゴリ ハイライト レイヤーを紹介します。このサンプル オプション ペインでは、カテゴリ ハイライト レイヤーのプロパティを変更できます。強調表示の色、アウトライン、太さなどの変更が可能です。 + +- [ホバー操作 - カテゴリ項目ハイライト レイヤー](/hoverinteractions-category-item-highlight-layer#example): このサンプルは、カテゴリ軸を使用するシリーズの項目を強調表示するカテゴリ項目ハイライト レイヤーを紹介します。その位置にバンド図形、またはマーカーを描画して、項目を強調表示します。このサンプル オプション ペインでは、カテゴリ ハイライト レイヤーのプロパティを変更できます。強調表示の色、アウトライン、太さなどの変更が可能です。 + +- [ホバー操作 - カテゴリ ツールチップ レイヤー](/hoverinteractions-category-tooltip-layer#example): このサンプルでは、カテゴリ軸を使用するシリーズのグループ化されたツールチップを表示するカテゴリ ツールチップ レイヤを紹介します。このサンプル オプション ペインでは、ツールチップの位置の変更など、レイヤーのプロパティを編集できます。 + +- [ホバー操作 - 十字線レイヤー](/hoverinteractions-crosshair-layer#example): このサンプルは、ターゲットとする各シリーズの実際の値で交差する、十字線を提供する十字線レイヤーを紹介します。このサンプル オプション ペインでは、十字線の太さの変更など、レイヤー プロパティを編集できます。 + +- [ホバー操作 - 複数レイヤー]({environment:SamplesUrl}/data-chart/multiple-layers): このサンプルは、`igDataChart` コントロール内での複数レイヤーの相互作用を紹介します。このサンプルでは、項目ツールチップ レイヤー、十字線レイヤー、およびカテゴリ ハイライト レイヤーを表示します。 + + + + diff --git a/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/igchart-transitions-in-animations.mdx b/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/igchart-transitions-in-animations.mdx new file mode 100644 index 0000000000..a99d538aa8 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/igchart-transitions-in-animations.mdx @@ -0,0 +1,157 @@ +--- +title: "トランジション イン アニメーション" +slug: igchart-transitions-in-animations +--- + +# トランジション イン アニメーション + + + +##トピックの概要 + + +### 目的 + +このトピックは、`igDataChart`™ コントロールのトランジション アニメーション機能およびサポートされるシリーズのリストについての情報を提供します。 + +### 前提条件 + +このトピックを理解するためには、以下のトピックを理解しておく必要があります: + +- [igDataChart の追加](/igdatachart-adding) + +このトピックでは、`igDataChart`™ コントロールをページに追加し、データにバインドする方法を紹介します。 + + + +### このトピックの内容 + +このトピックは、以下のセクションで構成されます。 + +- [はじめに](#introduction) + - [概要](#overview) + - [サポートされるシリーズ](#supported-series) + - [サポートされるトランジションのタイプ](#supported-transition-types) + - [サポートされるトランジションのスピード タイプ](#supported-transition-speed-types) + - [サポートされるイージング関数のタイプ](#supported-easing-function-types) +- [トランジション イン アニメーションを構成する](#transition-in-animations) + - [概要](#transition-overview) + - [例](#transition-example) +- [関連コンテンツ](#related-content) + - [トピック](#topics) + - [サンプル](#samples) + + + +##はじめに + + +### 概要 + +この機能は、新しいデータ ソースを読み込むときのシリーズのアニメーション化を可能にします。利用可能なアニメーションは、シリーズのタイプに基づきます。たとえば、`columnSeries` は x 軸から上昇するアニメーション、`lineSeries` は y 軸から描画するアニメーションを再生します。シリーズのアニメーションについて、[トランジション アニメーション]({environment:SamplesUrl}/data-chart/transition-animation) サンプルおよび[トランジション アニメーション (財務)](/igchart-transitions-in-animations#transition-example) を参照してください。 + +`isTransitionInEnabled` プロパティを `true` に設定すると、アニメーション化されたトランジションを有効にします。 + +デフォルトで、アニメーション化されたトランジションは無効になっています。 + +アニメーション化されたトランジションのトランジション タイプ、データ ポイントに相対するスピード、およびイージング関数によって管理されるイージング トランジションを構成できます。 + +### サポートされるシリーズ + +以下のシリーズ タイプはトランジション アニメーション機能をサポートします: + +- カテゴリ シリーズ +- 範囲カテゴリ シリーズ +- 財務物価シリーズ +- 財務指標 + +### サポートされるトランジションのタイプ + +移動および方向に基づいて複数のアニメーション トランジションのタイプがサポートされます。 + +- `fromZero` - シリーズが数値軸の参照値からトランジションします。 +- アコーディオン型のトランジション: + - 側面から: + - `accordionFromLeft` - シリーズは左側からアコーディオンします。 + - `accordionFromRight` - シリーズは右側からアコーディオンします。 + - `accordionFromTop` - シリーズは上側からアコーディオンします。 + - `accordionFromBottom` - シリーズは下側からアコーディオンします。 + - 軸から: + - `accordionFromCategoryAxisMinimum` - シリーズはカテゴリ軸の最小値からアコーディオンします。 + - `accordionFromCategoryAxisMaximum` - シリーズはカテゴリ軸の最大値からアコーディオンします。 + - `accordionFromValueAxisMaximum` - シリーズは値軸の最大値からアコーディオンします。 + - `accordionFromValueAxisMinimum` - シリーズは値軸の最小値からアコーディオンします。 +- `expand` - シリーズは値の中点から展開します。 +- スイープ型のトランジション: + - 側面から: + - `sweepFromLeft` - シリーズは左側からスイープします。 + - `sweepFromRight` - シリーズは右側からスイープします。 + - `sweepFromTop` - シリーズは上側からスイープします。 + - `sweepFromBottom` - シリーズは下側からスイープします。 + - `sweepFromCenter` - シリーズは中央からスイープします。 + - 軸から: + - `sweepFromCategoryAxisMaximum` - シリーズはカテゴリ軸の最大値からスイープします。 + - `sweepFromCategoryAxisMinimum` - シリーズはカテゴリ軸の最小値からスイープします。 + - `sweepFromValueAxisMaximum` - シリーズは値軸の最大値からスイープします。 + - `sweepFromValueAxisMinimum` - シリーズは値軸の最小値からスイープします。 + +### サポートされるトランジションのスピード タイプ + +トランジションのスピード タイプは、アニメーション化されたトランジションが再生されているときに、現在シリーズの項目に相対するスピードを決定します。以下のはスピード タイプです: + +- `auto` - 自動的にスピード タイプを選択します。 +- `indexScaled` - データ ポイントのインデックスが軸基点から離れるほど、ポイントへの到着は遅くなります。 +- `normal` - すべてのスピードは標準です。データ ポイントが同時に表示されます。 +- `random` - データ ポイントは時間的にランダムに表示されます。 +- `valueScaled` - データ ポイントの値が開始ポイントから離れるほど、ポイントへの到着が遅くなります。 + +### サポートされるイージング関数のタイプ + +イージング関数は、アニメーションのイーズ インする方法を決定します。イージング関数を適用できます。デフォルト値は `cubicEase` です。 + + + +##トランジション イン アニメーションを構成する + + +### 概要 + +トランジション タイプは、`transitionInMode` プロパティを任意のトランジション名に設定して構成します。プロパティを "auto" (デフォルト値) に設定すると、シリーズ タイプに基づきトランジション タイプを自動的に選択することもできます。 + +### 例 + +以下の例は、財務チャートでトランジション イン アニメーションを有効にして変更する方法を紹介します。 + +
    + [トランジション アニメーション (財務)]({environment:SamplesEmbedUrl}/data-chart/transition-animation-financial) +
    + +##関連コンテンツ + + +### トピック + +以下のトピックでは、このトピックに関連する追加情報を提供しています。 + +- [igDataChart の追加](/igdatachart-adding) + +このトピックでは、`igDataChart`™ コントロールをページに追加する方法を紹介します。 +and bind it to data. + + + +### サンプル +このトピックについては、以下のサンプルも参照してください。 + + +- [トランジション アニメーション]({environment:SamplesUrl}/data-chart/transition-animation): このサンプルは、チャートの初期化で再生するアニメーション機能を紹介します。 + + + + + + + + + + diff --git a/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/knockoutjs-support.mdx b/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/knockoutjs-support.mdx new file mode 100644 index 0000000000..1df015a44c --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/knockoutjs-support.mdx @@ -0,0 +1,213 @@ +--- +title: "Knockout サポートの構成 (igDataChart)" +slug: igdatachart-knockoutjs-support +--- +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# Knockout サポートの構成 (igDataChart) + + + +##トピックの概要 + +### 目的 + +このトピックは、Knockout ライブラリにより管理されるビューモードのオブジェクトをバインドするために `igDataChart`™ コントロールを構成する方法について説明します。 + +### 前提条件 + +以下の表は、このトピックを理解するための前提条件として必要なトピックと外部リソースの一覧です。 + +**トピック** + +- [igDataChart の概要](/igdatachart-overview) : このトピックでは、`igDataChart` コントロールについての概念情報を提供します。これには、その主な機能、チャートとユーザー機能を使用するための最低要件が含まれます。 + +- [シリーズ タイプ (igDataChart)](/igdatachart-series-types): このトピックでは、`igDataChart` コントロールにより生成できるあらゆる種類のチャートを表示します。 + +- [igDataChart の追加](/igdatachart-adding): このトピックでは、`igDataChart` コントロールをページに追加し、データにバインドする方法を紹介します。 + + +**外部リソース** + +- [**Knockout インタラクティブ チュートリアル**](http://learn.knockoutjs.com/#/?tutorial=intro) + +##概要 + +### Knockout サポートの概要 + +`igDataChart` コントロールにおける Knockout ライブラリのサポートは、開発者が Knockout ライブラリとその宣言構文を使用して、チャート コントロールのインスタンスを作成し構成するための簡単な方法を提供することを目的としています。 + +Knockout のサポートは、Knockout バインディングがページに適用されるときに最初に呼び出される Knockout 拡張機能として、ページの存続期間中にビューモデルへの外部更新が発生した場合に実装されます。 + +Knockout 管理データ構造へバインドされるチャート コントロールのインスタンスを作成するには、`igDataChart` 構成オプションを HTML div 要素または span 要素の data-bind 属性に指定する必要があります。これにより、JavaScript を使用してコントロールを作成する場合と同様に、HTML タグの位置にチャートが描画されます。通常使用されるオプションに関する情報については、[](#Configuring_igDataChart)[Knockout サポートによる `igDataChart` 構成](#Configuring_igDataChart)のセクションを参照してください。data-bind 属性を使用して、ビジネス ケースに関連する他のすべての igDataChart オプションを指定することもできます。 + +>**注:** Knockout サポートはビューモデルからビューの間、つまり igDataChart コントロールでのみ有効です。 +ビューモデルの更新は dataSource プロパティとして `igDataChart` に渡され、`igDataChart` UI に通知されて新しい値の描画が実行されます。`igDataChart` の編集に API メソッドを使用した場合、ビューモデルは更新されません。これは、`igDataChart` が HTML キャンバス要素の内部にあるため、ビューから igDataChart が更新できないためです。 + +>**注:** `igDataChart` の Knockout 拡張機能により、非表示の HTML div 要素が UL リストを含むブラウザーの DOM ツリーに追加されます。チャートが単一の HTML キャンバスで、各チャート項目のバインド ハンドラーが追加の DOM 要素 (この場合、HTML LI) を要求するためです。非常に大きなデータを視覚化する場合は注意が必要です。 + + + +## Knockout サポートによる igDataChart 構成 + + +### Knockout サポートによる igDataChart 構成の概要表 + +以下の表は、これらのタスクを管理する各プロパティに対し Knockout 使用シナリオに関連する `igDataChart` コントロールの構成タスクをマップします。実際の実装コード例の一部を、表の下に示します。 + + +| 構成タスク | 必須ですか？ | 詳細 | プロパティ | +| --- | --- | --- | --- | +| チャート項目のデータ ソースの指定 | 必須 | チャートの dataSource のデータ ソースを構成するためのプロパティです。 以下の[コード例: 項目の編集、追加、削除](#Code_Example_igDataChart)のために igDataChart を構成するのセクションに示すように、フラット データ ソースとなります。 **注:** このオプションを監視可能に設定すると、要素を追加または削除するためのデータ ソースへの直接アクセスができるようになり、チャートを変更します。 **注:** プロパティが監視可能に設定されたデータ ソースのレコードがある場合、更新され、レコードの更新による影響が *igDataChart* 項目にすぐに反映されます。 **Knockout JS のチャート拡張機能を使用している場合、チャートをデータ ソースの配列にバインドすることはできません。** | | +| データ ビジュアライゼーションを表示するメンバー パスの構成 | 必須 | シリーズの種類によっては、さまざまなメンバー パスを使用し、パスをデータ ソース レコードのオブジェクト フィールドにマップして、オプションのデータをチャートに表示する場合があります。 シリーズおよび対応するメンバー パスの詳細は、[シリーズのタイプ (*igDataChart*)](/igdatachart-series-types)のトピックを参照してください。 | | + + +##コード例: 項目の編集、追加、削除のために igDataChart を構成する + + +### 説明 + +この例は、`igDataChart` コントロールのインスタンスを作成し、Knockout で管理されるデータ構造にバインドする方法について示します。Knockout の宣言構文を使用して、div 要素の data-bind 属性からチャートのインスタンスを作成し、ビューモデル監視可能プロパティにバインドします。 + +### コード + +以下のコード スニペットは、Knockout により管理される監視可能なフラットな構造とプロパティを持つ ビューモデル オブジェクトを表示します。この例ではデータ構造を明確にするために明示的に宣言していますが、データがリモート データ ソース (データベースなど) から提供される実環境では、データは JSON 形式になります。その後、データは Knockout マッピング ライブラリを使用して監視できるようになります。 + +>**注:** 配列構造と各オブジェクト フィールドの両方が監視可能として宣言される点に注意してください。データ項目が追加、削除または変更される場合にビューを更新でき、ユーザーが編集を行う場合にビューモデルを変更できます。 + +**JavaScript の場合:** + +```js +var viewModel = { + data: ko.observableArray( + [{ + label: ko.observable("I"), + value1: ko.observable(90.34), + value2: ko.observable(15.77), + value3: ko.observable(10.09) + }, { + label: ko.observable("II"), + value1: ko.observable(45.11), + value2: ko.observable(80.12), + value3: ko.observable(9.89) + }, { + . . . + }]; + ); +} +``` + +以下のコード スニペットは、宣言されたKnockout バインディングをページに適用する方法を示します。 + +>**注: **`ko.applyBindings()` 呼び出しは、 Loader の即時コールバック内で出される点に注意してください。これは、Knockout のチャート拡張機能はバインディングが適用される前にページに読み込まなければならないため必要です。 + +**JavaScript の場合:** + +```js +$.ig.loader({ + scriptPath: "http://localhost/ig_ui/js/", + cssPath: "http://localhost/ig_ui/css/", + resources: "igDataChart.Category,extensions/infragistics.ui.datachart.knockout-extensions.js", + ready: function () { + ko.applyBindings(viewModel); + } +}); +``` + +以下のコード スニペットは、3 つの異なる折れ線シリーズを持つチャート コントロールのバインディング オプションをビュー内で宣言する方法を示します。最も重要なのは、div 要素の data-bind 属性におけるインスタンス化オプションの宣言部分です。 + +**HTML の場合:** + +```html +
    +``` + +コントロールが Knockout を通してビューモデルにバインドされる場合、すべての変更に関する通知を受け取ります。 + +コントロールを監視不可能な配列にバインドすることもできますが、更新機能が使用できず、KnockoutJS のコンテキストで使用する意味がなくなります。 + +## サンプル: KnockoutJS でチャート項目の編集 + +このサンプルは、Knockout ビュー モデルのデータ ソースの変更を処理する igDataChart コントロールを紹介します。コントロールを再バインドせずにチャートが更新されます。デフォルトで、サンプルは月の最初の 10 日の売上および経費を表示します。チャートに日を追加/削除するか、項目を移動し、チャートを更新します。 + +>**注:** Knockout 拡張子が {environment:ProductNameMVC} との互換性がありません。 + +
    + [{environment:SamplesEmbedUrl}/data-chart/edit-chart-items-with-knockout]({environment:SamplesEmbedUrl}/data-chart/edit-chart-items-with-knockout) +
    + +##関連コンテンツ + + +### トピック + +このトピックの追加情報については、以下のトピックも合わせてご参照ください。 + +- [igDataChart の概要](/igdatachart-overview): このトピックでは、`igDataChart` コントロールについての概念情報を提供します。これには、その主な機能、チャートとユーザー機能を使用するための最低要件が含まれます。 + +- [シリーズ タイプ (igDataChart)](/igdatachart-series-types): このトピックでは、`igDataChart` コントロールにより生成できるあらゆる種類のチャートを表示します。 + +- [igDataChart の追加](/igdatachart-adding): このトピックでは、`igDataChart` コントロールをページに追加し、データにバインドする方法を紹介します。 + +- [Knockout サポートの構成 (igCombo)](/igbulletgraph-configuring): このトピックは、Knockout ライブラリにより管理されるビューモードのオブジェクトをバインドするために `igCombo` コントロールを構成する方法について説明します。 + +- [Knockout サポートの構成 (igEditors)](../../igEditors/Config/02_Configuring Knockout Support (Editors).mdx): このトピックは、Knockout ライブラリを使用してビューモード オブジェクトをバインドするために {environment:ProductName} エディター コントロールを構成する方法について説明します。 + +- [Knockout サポートの構成 (igTree)](/igcombo-knockoutjs-support): このトピックは、Knockout ライブラリにより管理される View-Model オブジェクトをバインドするために `igTree` コントロールを構成する方法について説明します。 + + + +### サンプル + +このトピックについては、以下のサンプルも参照してください。 + +- [KnockoutJS で igDataChart をバインド]({environment:SamplesUrl}/data-chart/bind-data-chart-with-ko): このサンプルでは、コントロールの Infragistics Knockout 拡張機能を使用して `igDataChart` を Knockout ビューモデルとバインドする方法を紹介します。 + + + +### リソース + +以下に、このトピックに関連する追加情報を示します (Infragistics のコンテンツ ファミリー以外にも利用できます)。 + +- [Knockout Web サイト](http://knockoutjs.com/): これは、すべての必要なドキュメンテーションおよびサンプルが利用可能な Knockout ライブラリのホーム ページホーム ページです。 + + + + + + + + + + diff --git a/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/series-highlighting.mdx b/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/series-highlighting.mdx new file mode 100644 index 0000000000..c8be9f0418 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/series-highlighting.mdx @@ -0,0 +1,174 @@ +--- +title: "シリーズの強調表示の構成 (igDataChart)" +slug: igdatachart-series-highlighting +--- + +# シリーズの強調表示の構成 (igDataChart) + + + +##トピックの概要 + + +### 目的 + +このトピックは、サポートされるシリーズのリストに従って、シリーズの強調表示機能の有効化についての情報を提供します。このトピックでは、利用可能なイベントを使用してシリーズの協調表示を構成する方法についても説明します。 + +### 前提条件 + +このトピックを理解するためには、以下のトピックを理解しておく必要があります: + + +[igDataChart の追加](/igdatachart-adding) + +このトピックでは、`igDataChart`™ コントロールをページに追加し、データにバインドする方法を紹介します。 + +### このトピックの内容 + +このトピックは、以下のセクションで構成されます。 + +- [シリーズの強調表示](#series-highlighting) + - [概要](#overview) + - [プレビュー](#preview) + - [プロパティ](#properties) + - [例](#example) +- [イベント](#events) + - [概要](#events-overview) + - [イベント引数のプロパティ](#event-arguments-properties) + - [例](#event-example) +- [関連コンテンツ](#related-content) + + + +## シリーズの強調表示 + + +### 概要 + +この機能は、シリーズ全体またはシリーズ内の個別の項目を強調表示します。たとえば、`lineSeries` などのシリーズ内の線全体を 1 つの図形として強調表示します。また、`columnSeries` などのシリーズの各列を個別に強調表示することもできます。サポートされるすべてのシリーズで、各マーカーを強調表示できます。 + +現在は、マウスによる強調表示のみがサポートされています。 + +シリーズの強調表示機能は、以下のシリーズで使用可能です。 + +- カテゴリ シリーズ +- RangeCategory シリーズ + +- 財務物価シリーズ +- 財務指標 + +### プレビュー + +以下のスクリーンショットは、シリーズの強調表示機能が有効な `columnSeries` の `igDataChart` コントロールのプレビューです。 + +![](../../../images/images/jQuery_Series_Highlighting_01.png) + +### プロパティ + +以下の表で、シリーズの強調表示で使用されるプロパティを簡単に説明します。これらのプロパティはサポートされるシリーズに設定されています。 + + +| | | | +| --- | --- | --- | +| プロパティ名 | プロパティ タイプ | 説明 | +| isHighlightingEnabled | boolean | シリーズの強調表示機能を有効にします。デフォルトは False に設定されています。 | +| highlightingTransitionDuration | timeSpan | 強調表示になるまでの時間を指定します。 | + + +### コード例 +このサンプルは、`isHighlightingEnabled` および `highlightingTransitionDuration` シリーズ プロパティを構成すると、複数のシリーズ タイプでシリーズの強調表示機能を紹介します。 + +
    + [シリーズの強調表示]({environment:SamplesEmbedUrl}/data-chart/series-highlighting) + ![](../../../images/images/jQuery_Series_Highlighting_01.png) +
    + +以下の実例は同じ機能を財務チャートに適用します。 +
    + [シリーズの強調表示 (財務)]({environment:SamplesEmbedUrl}/data-chart/series-highlighting-financial) +
    + +## イベント + + +### 概要 + +特に、シリーズの強調表示機能と関連があるイベントは 2 つあります。 + +- `assigningCategoryStyle` +- `assigningCategoryMarkerStyle` + +これらのイベントは次の目的で構成することができます。 + +- 強調表示の指定方法の変更 +- `lineSeries` などのシリーズ全体に割り当てられた外観プロパティや、`columnSeries` のように個別の項目を持つシリーズの各項目の外観プロパティを変更します。 + +前述のシリーズを使用してシリーズの強調表示を設定した場合、特定のシリーズで有効なプロパティのみが使用できます。たとえば `lineSeries` の fill または `radiusX` プロパティのオーバーライドは、それらのプロパティが `lineSeries` に作用しないため影響がありません。 + +### イベント引数のプロパティ + +以下の表で、`assigningCategoryStyleEventArgsBase` のプロパティを簡単に説明します。 + + +| | | | +| --- | --- | --- | +| プロパティ名 | プロパティ タイプ | 説明 | +| startIndex | int | 現在、強調表示されているデータの範囲の開始インデックスです。 | +| endIndex | int | 現在、強調表示されているデータの範囲の終了インデックスです。 | +| startDate | dateTime | 現在、強調表示されているデータの範囲の開始日付です。 | +| endDate | dateTime | 現在、強調表示されているデータの範囲の終了日付です。 | +| getItems | getCategoryItemsEventHandler | 強調表示されているデータ ソースの実際の項目です。非常に多くのデータが対象の場合にイベントが発生するたびに呼び出すと、パフォーマンスが低下します。 | +| Fill | brush | シリーズのデフォルトの fill プロパティをオーバーライドします。Fill プロパティが特定のシリーズに影響を与える場合のみ、このプロパティが作用します。 | +| stroke | brush | シリーズのデフォルトの stroke プロパティをオーバーライドします。 | +| opacity | double | シリーズのデフォルトの opacity プロパティをオーバーライドします。 | +| highlightingInfo | higlightingInfo | 強調表示されたシリーズのスタイル設定を指定します。 | +| maxAllSeriesHighlightingProgress | double | シリーズの強調表示の進捗状況です。0 から 1 の値です。 | +| sumAllSeriesHighlightingProgress | double | シリーズの強調表示の進捗状況です。 0 から 1 の値です。 | +| highlightingHandled | bool | True に設定すると、デフォルトの強調表示が適用されません。 | +| HasDateRange | bool | | + + + + +以下の表で、`assigningCategoryMarkerStyleEventArgs` のプロパティを簡単に説明します。 + + +| | | | +| --- | --- | --- | +| プロパティ名 | プロパティ タイプ | 説明 | +| strokeThickness | double | マーカーのデフォルトの StrokeThickness プロパティをオーバーライドします。 | +| strokeDashArray | doubleCollection | マーカーのデフォルトの StrokeDashArray プロパティをオーバーライドします。 | +| strokeDashCap | penLineCap | マーカーのデフォルトの StrokeDashCap プロパティをオーバーライドします。 | +| radiusX | double | デフォルトの RadiusX プロパティをオーバーライドします。 | +| radiusY | double | デフォルトの RadiusY プロパティをオーバーライドします。 | + + + + +### 例 + +以下の実例は、強調表示列を変更する代わりに、非強調表示列をフェードするために、`assigningCategoryStyle` イベントを使用して強調表示機能を変更する使用を示しています。 + +
    + [カスタム シリーズの強調表示]({environment:SamplesEmbedUrl}/data-chart/custom-series-highlighting) + ![](../../../images/images/jQuery_Series_Highlighting_02.png) +
    + +## 関連コンテンツ + + +### トピック + +以下のトピックでは、このトピックに関連する追加情報を提供しています。 + + +- [igDataChart の追加](/igdatachart-adding): このトピックでは、`igDataChart` コントロールをページに追加し、データにバインドする方法を紹介します。 + + + + + + + + + diff --git a/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/shape-series/polygon-series.mdx b/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/shape-series/polygon-series.mdx new file mode 100644 index 0000000000..0182ea93bf --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/shape-series/polygon-series.mdx @@ -0,0 +1,103 @@ +--- +title: "散布多角形シリーズの構成 (igDataChart)" +slug: shapeseries-polygon-series +--- + +# 散布多角形シリーズの構成 (igDataChart) + +## トピックの概要 + +### 目的 + +このトピックでは、`igDataChart` コントロールで散布多角形シリーズ要素を使用する方法を提供します。 + +### 前提条件 + +以下のトピックを事前に読んでおくことをお勧めします。 + +- [igDataChart の追加](/igdatachart-adding): このトピックでは、`igDataChart`™ コントロールをページに追加し、データにバインドする方法を紹介します。 + +- [igDataChart をデータにバインド](/igdatachart-databinding): このトピックでは、`igDataChart`™ コントロールを各種データ ソース (JavaScript 配列、`IQueryable`、Web サービス) にバインドする方法について説明します。 + + + +### このトピックの内容 + +このトピックは、以下のセクションで構成されます。 + +- [概要](#overview) + - [プレビュー](#preview) +- [データ要件](#data-requirements) +- [例](#example) +- [関連コンテンツ](#related-content) + - [トピック](#topics) + - [サンプル](#samples) + +## 概要 + +`igDataChart` コントロールで、散布多角形シリーズは多角形を使用してデータを表示するビジュアル要素です。このシリーズのタイプは任意の図形を描画できます。散布多角形シリーズは、データがポリラインの代わりに多角形で描画されることを除いて、散布ポリライン シリーズとほどんど同様に機能します。 + +### プレビュー + +以下は、建物の間取り図を描画する散布多角形シリーズを持つ `igDataChart` コントロールのプレビューです。 + +![](../../../../images/images/jquery_scatter_polygon_01.png) + +## データ要件 + +`igDataChart` コントロールのシリーズの他のタイプと同様、散布多角形シリーズには、データ バインディングのための `dataSource` オプションがあります。このオプションは項目の配列を受けます。各項目には、図形の X および Y 値のポイント位置を配列として保存するデータ列が必要です。このデータ列は、`shapeMemberPath` オプションにマップされます。散布多角形シリーズは、`igDataChart` コントロールで多角形をプロットするために、このマップされたデータ列のポイントを使用します。 + +## 例 + +データ要件に基づいて、以下はデータの構造の例です。 + +**JavaScript の場合:** + +```js +var data = [ + { Points: [ + [{x: 0, y: 0}, {x: 0.5, y: 1}, {x: -0.5, y:1}], + [{x: 2, y: 0}, {x: 2.5, y: 1}, {x: 1.5, y:1}]]}] +``` + +データの準備ができた後、チャートに設定します。 + +**JavaScript の場合:** + +```js +$("#chart").igDataChart({ + width: "400px", + height: "400px", + axes: [{ + name: "xAxis", + type: "numericX", + }, { + name: "yAxis", + type: "numericY", + }], + series: [{ + name: "series1", + type: "scatterPolygon", + dataSource: data, + xAxis: "xAxis", + yAxis: "yAxis", + shapeMemberPath: "Points", + }], +}); +``` + +上記のようにデータとチャートを構成すると、以下のようになります。 + +![](../../../../images/images/jquery_scatter_polygon_02.PNG) + +## 関連コンテンツ + +### トピック + +- [シェープ シリーズの構成](/shapeseries-shape-series): このトピックでは、`igDataChart` コントロールで散布多角形および散布ポリライン シリーズの概要を提供します。 + +- [散布ポリライン シリーズの構成](/shapeseries-polyline-series): このトピックでは、`igDataChart` コントロールで散布ポリライン シリーズを構成する方法について説明します。 + +### サンプル + +- [散布多角形シリーズ]({environment:SamplesUrl}/data-chart/polygon): このサンプルでは、`igDataChart` コントロールの多角形シリーズを紹介します。 diff --git a/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/shape-series/polyline-series.mdx b/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/shape-series/polyline-series.mdx new file mode 100644 index 0000000000..a78a6c6e96 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/shape-series/polyline-series.mdx @@ -0,0 +1,104 @@ +--- +title: "散布ポリライン シリーズの構成 (igDataChart)" +slug: shapeseries-polyline-series +--- + +# 散布ポリライン シリーズの構成 (igDataChart) + +## トピックの概要 + +### 目的 + +このトピックでは、`igDataChart` コントロールで散布ポリライン シリーズ要素を使用する方法を説明します。 + +### 前提条件 + +以下のトピックを事前に読んでおくことをお勧めします。 + +- [igDataChart の追加](/igdatachart-adding): このトピックでは、`igDataChart`™ コントロールをページに追加し、データにバインドする方法を紹介します。 + +- [igDataChart をデータにバインド](/igdatachart-databinding): このトピックでは、`igDataChart`™ コントロールを各種データ ソース (JavaScript 配列、`IQueryable`、Web サービス) にバインドする方法について説明します。 + + + +### このトピックの内容 + +このトピックは、以下のセクションで構成されます。 + +- [概要](#overview) + - [プレビュー](#preview) +- [データ要件](#data-requirements) +- [例](#example) +- [関連コンテンツ](#related-content) + - [トピック](#topics) + - [サンプル](#samples) + + +## 概要 + +`igDataChart` コントロールで、散布ポリライン シリーズはポリラインを使用してデータを表示するシリーズです。この散布シリーズのタイプは、ネットワーク グラフなどの切断された折れ線の描画が必要な場合に使用されます。散布ポリライン シリーズは、データが多角形の代わりにポリラインで描画されることを除いて、散布多角形シリーズとほどんど同様に機能します。 + +### プレビュー + +以下は、様々なポイントの間に接続を描画する散布ポリライン シリーズを持つ `igDataChart` コントロールのプレビューです。 + +![](../../../../images/images/jquery_scatter_polyline_01.png) + +## データ要件 + +`igDataChart` コントロールのシリーズの他のタイプと同様、散布ポリライン シリーズには、データ バインディングのための `dataSource` オプションがあります。このオプションは項目の配列を受けます。各項目には、図形の X および Y 値のポイント位置を配列として保存するデータ列が必要です。このデータ列は、`shapeMemberPath` オプションにマップされます。散布ポリライン シリーズは、`igDataChart` コントロールでポリラインをプロットするために、このマップされたデータ列のポイントを使用します。 + +## 例 + +以下はデータ要件に基づいたデータ構造の例です。 + +**JavaScript の場合:** + +```js +var data = [ + { Points: [ + [{x: 0, y: 0}, {x: 0.5, y: 1}, {x: -0.5, y:1}, {x: 0, y: 0}], + [{x: 2, y: 0}, {x: 2.5, y: 1}, {x: 1.5, y:1}, {x: 2, y: 0}]]}] +``` + +データの準備ができた後、チャートに設定します。 + +**JavaScript の場合:** + +```js +$("#chart").igDataChart({ + width: "400px", + height: "400px", + axes: [{ + name: "xAxis", + type: "numericX", + }, { + name: "yAxis", + type: "numericY", + }], + series: [{ + name: "series1", + type: "scatterPolyline", + dataSource: data, + xAxis: "xAxis", + yAxis: "yAxis", + shapeMemberPath: "Points", + }], +}); +``` + +上記のようにデータとチャートを構成すると以下のようになります。 + +![](../../../../images/images/jquery_scatter_polyline_02.PNG) + +## 関連コンテンツ + +### トピック + +- [シェープ シリーズの構成](/shapeseries-shape-series): このトピックでは、`igDataChart` コントロールで散布多角形および散布ポリライン シリーズの概要を提供します。 + +- [散布多角形シリーズの構成](/shapeseries-polygon-series): このトピックでは、`igDataChart` コントロールで散布多角形シリーズを構成する方法について説明します。 + +### サンプル + +- [散布ポリライン シリーズ]({environment:SamplesUrl}/data-chart/polyline): このサンプルでは、`igDataChart` コントロールのポリライン シリーズを紹介します。 \ No newline at end of file diff --git a/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/shape-series/shape-series.mdx b/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/shape-series/shape-series.mdx new file mode 100644 index 0000000000..5dcdeac3d1 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/shape-series/shape-series.mdx @@ -0,0 +1,26 @@ +--- +title: "シェープ シリーズの構成 (igDataChart)" +slug: shapeseries-shape-series +--- + +# シェープ シリーズの構成 (igDataChart) + +## このグループのトピックについて + +### 概要 + +このグループのトピックでは、多角形およびポリラインシリーズについて説明します。このシリーズを使用すると、igDataChart でカスタム図形を表示できます。X および Y 値を含むポイントのリストをシリーズに提供する必要があります。これらのポイントで図形が定義されます。 + +図 1.散布多角形シリーズ + +![](../../../../images/images/jquery_mini_scatter_polygon_01.png) + +図 2.散布ポリライン シリーズ + +![](../../../../images/images/jquery_mini_scatter_polyline_01.png) + +### トピック + +- [散布多角形シリーズの構成 (igDataChart)](/shapeseries-polygon-series): このトピックでは、多角形シリーズの情報を提供します。多角形シリーズのプロパティについて説明し、実装例を示します。 + +- [散布ポリライン シリーズの構成 (igDataChart)](/shapeseries-polyline-series): このトピックでは、ポリライン シリーズの情報を提供します。ポリライン シリーズのプロパティについて説明し、実装例を示します。 diff --git a/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/triangulation-series/area-series.mdx b/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/triangulation-series/area-series.mdx new file mode 100644 index 0000000000..9f71ef21b1 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/triangulation-series/area-series.mdx @@ -0,0 +1,123 @@ +--- +title: "散布エリア シリーズの構成 (igDataChart)" +slug: triangulationseries-area-series +--- + +# 散布エリア シリーズの構成 (igDataChart) + +## トピックの概要 + +### 目的 + +このトピックでは、`igDataChart` コントロールで散布エリア シリーズ要素を使用する方法を提供します。 + +### 前提条件 + +以下のトピックを事前に読んでおくことをお勧めします。 + +- [igDataChart の追加](/igdatachart-adding): このトピックでは、`igDataChart`™ コントロールをページに追加し、データにバインドする方法を紹介します。 + +- [igDataChart をデータにバインド](/igdatachart-databinding): このトピックでは、`igDataChart`™ コントロールを各種データ ソース (JavaScript 配列、`IQueryable`、Web サービス) にバインドする方法について説明します。 + +### このトピックの内容 + +このトピックは、以下のセクションで構成されます。 + +- [概要](#overview) + - [プレビュー](#preview) +- [データ要件](#data-requirements) +- [データ バインディング](#data-binding) +- [カラー スケール](#color-scale) +- [例](#example) +- [関連コンテンツ](#related-content) + - [トピック](#topics) + +## 概要 + +`igDataChart` コントロールで、散布エリア シリーズは各ポイントに割り当てられた数値を使って、X および Y データの三角測量に基づいて、色付きのサーフェスを描画します。 + +このシリーズのタイプはヒート マップ、磁場の強さ、またはオフィスの WIFI の強さを描画する場合などに便利です。散布エリア シリーズは散布等高線シリーズと同様ですが、同じ値を持つデータ ポイントを接続する等高線の代わりに補間で色つきサーフェス エリアとしてデータを表します。 + +### プレビュー + +以下は、3D サーフェス データをプロットする散布エリア シリーズを持つ `igDataChart` コントロールのプレビューです。Z 軸は、サーフェスの色の変更として描画されます。より低い Z 値は青色で、より高い値は赤色になります。 + +![](../../../../images/images/jquery_scatter_area_01.png) + +## データ要件 + +`igDataChart` コントロールのシリーズの他のタイプと同様、散布エリア シリーズには、データ バインディングのための `dataSource` オプションがあります。このオプションは配列に設定することができます。配列の各項目には、ポイント位置を保存する 2 つのデータ列が必要です (X と Y に各 1 列)。このデータ列は、`xMemberPath` および `yMemberPath` オプションにマップされます。データには各ポイントの値を保存するデータ列も 1 列必要です。この値はシリーズにサーフェスの色を設定するために使用されます。この値列は、`colorMemberPath` オプションにマップされます。 + +## データ バインディング + +以下の表は、データ バインドに使用される散布エリア シリーズ オプションの概要です。 + +プロパティ名|プロパティ タイプ|説明 +---|---|--- +`datasource` |array|三角測量を実行する項目のソース。 +`xMemberPath`|string |`dataSource` の各項目の X 位置を含むプロパティの名前。 +`yMemberPath`|string |`dataSource` の各項目の Y 位置を含むプロパティの名前。 +`colorMemberPath`|string |`colorScale` オプションに設定されて、カラー スケールによって色への変換が可能な数値を含む各項目のプロパティの名前。 +`colorScale` |オブジェクト|`colorMemberPath` プロパティの値に基づいて各項目に適用するカラー スケール。 + +## カラー スケール + +散布エリア シリーズの `colorScale` オプションを使用して、ポイントの値を解決し、シリーズのサーフェスを塗りつぶします。色は、ピクセル単位の三角ラスタライザーを三角測量データに適用することによって、サーフェスの図形の周りをなめらかに補間します。サーフェスの描画がピクセル単位であるため、カラー スケールはブラシではなく色を使用します。 + +以下の表は、散布エリア シリーズのサーフェスの色付けに関わる `colorScale` プロパティを示します。 + +プロパティ名|プロパティ タイプ|説明 +---|---|--- +`palette` |array|選択または補間するための色の配列。 +`interpolationMode` |string |色の選択に使用される補間タイプ。利用可能なオプションは `"interpolateRGB"`、`"interpolateHSV"` および `"select"` です。`"interpolateRGB"` は RGB 補間を使用します。`"interpolateHSV"` は HSV 補間を使用します。`"select"` は `palette` から色を選択します。 +`minimumValue`|string |色を割り当てるための最大値。この値より大きい項目値は透明になります。 +`maximumValue`|string |色が割り当てられる最小値。この値より小さい項目値は透明になります。 + +## 例 + +以下のコードは散布エリア シリーズをデータにバインドします。 + +```js +var data = [ + { x: 0, y: 0, z: 2 }, + { x: 10, y: 0, z: 3 }, + { x: 10, y: 10, z: 5 }, + { x: 0, y: 10, z: 1 }]; + +$("#chart").igDataChart({ + width: "400px", + height: "400px", + axes: [{ + name: "xAxis", + type: "numericX", + }, { + name: "yAxis", + type: "numericY", + }], + series: [{ + name: "polygonSeries", + type: "scatterArea", + dataSource: data, + xAxis: "xAxis", + yAxis: "yAxis", + xMemberPath: "x", + yMemberPath: "y", + colorMemberPath: "z", + colorScale: { + palette: [ "green", "yellow", "red" ], + interpolationMode: "interpolateRGB", + } + }], +}); +``` +このコードは以下の結果になります。 + +![](../../../../images/images/jquery_scatter_area_02.PNG) + +## 関連コンテンツ + +### トピック + +- [三角測量シリーズの構成](/triangulationseries-triangulation-series): このトピックでは、`igDataChart` コントロールの散布エリアおよび散布等高線シリーズの構成の概要を提供します。 + +- [散布等高線シリーズの構成](/triangulationseries-contour-series): このトピックでは、`igDataChart` コントロールで散布等高線シリーズを構成する方法について説明します。 diff --git a/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/triangulation-series/contour-series.mdx b/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/triangulation-series/contour-series.mdx new file mode 100644 index 0000000000..73f42cbca0 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/triangulation-series/contour-series.mdx @@ -0,0 +1,139 @@ +--- +title: "散布等高線シリーズの構成 (igDataChart)" +slug: triangulationseries-contour-series +--- + +# 散布等高線シリーズの構成 (igDataChart) + +## トピックの概要 + +### 目的 + +このトピックでは、`igDataChart` コントロールで散布等高線シリーズ要素を使用する方法を提供します。 + +### 前提条件 + +以下のトピックを事前に読んでおくことをお勧めします。 + +- [igDataChart の追加](/igdatachart-adding): このトピックでは、`igDataChart`™ コントロールをページに追加し、データにバインドする方法を紹介します。 + +- [igDataChart をデータにバインド](/igdatachart-databinding): このトピックでは、`igDataChart`™ コントロールを各種データ ソース (JavaScript 配列、`IQueryable`、Web サービス) にバインドする方法について説明します。 + +### このトピックの内容 + +このトピックは、以下のセクションで構成されます。 + +- [概要](#overview) + - [プレビュー](#preview) +- [データ要件](#data-requirements) +- [データ バインディング](#data-binding) +- [塗りつぶしスケール](#fill-scale) +- [値リゾルバー](#value-resolver) +- [例](#example) +- [関連コンテンツ](#related-content) + - [トピック](#topics) + +## 概要 + +`igDataChart` コントロールで、散布等高線シリーズは各ポイントに割り当てられた数値を使って、X および Y データの三角測量に基づいて、色付きの等高線を描画します。 + +このシリーズのタイプはヒート マップ、磁場の強さ、またはオフィスの WIFI の強さを描画する場合などに便利です。散布等高線シリーズは散布エリア シリーズと同様ですが、塗りつぶしスケールを使用した色付きの等高線でデータを表します。散布エリア シリーズはカラー スケールを使用して補間されサーフェスとしてデータを表します。 + +### プレビュー + +以下は、3D サーフェス データをプロットする散布等高線シリーズを持つ `igDataChart` コントロールのプレビューです。Z 軸は、サーフェスの色の変更として描画されます。より低い Z 値は青色で、より高い値は赤色になります。 + +![](../../../../images/images/jquery_scatter_contour_01.png) + +## データ要件 + +`igDataChart` コントロールのシリーズの他のタイプと同様、散布等高線シリーズには、データ バインディングのための `dataSource` オプションがあります。このオプションは配列に設定することができます。配列の各項目には、ポイント位置を保存する 2 つのデータ列が必要です (X と Y に各 1 列)。このデータ列は、`xMemberPath` および `yMemberPath` オプションにマップされます。データには各ポイントの値を保存するデータ列も 1 列必要です。この値はシリーズにサーフェスの色を設定するために使用されます。この値列は、`valueMemberPath` オプションにマップされます。 + +## データ バインディング + +以下の表に、データ バインドに使用される散布等高線シリーズのオプションをまとめています。 + +プロパティ名|プロパティ タイプ|説明 +---|---|--- +`datasource` |array |三角測量を実行する項目のソース。 +`xMemberPath`|string |`dataSource` の各項目の X 位置を含むプロパティの名前。 +`yMemberPath`|string |`dataSource` の各項目の Y 位置を含むプロパティの名前。 +`valueMemberPath`|string |数値を含む各項目のプロパティ名。この値は、近似の数値を含むポイントをグループ化して等高線を生成するために使用されます。 +`fillScale` |object |等高線に使用される色を決定するために使用されます。 + +## 塗りつぶしスケール + +散布等高線シリーズの `fillScale` オプションを使用して等高線の塗りブラシを解決します。 + +以下の表は散布等高線シリーズのサーフェスの色付けに関わる `fillScale` プロパティをリストします。 + +プロパティ名|プロパティ タイプ|説明 +---|---|--- +`brushes`|array |等高線を塗りつぶすためのブラシ配列。 +`minimumValue`|numeric |塗りつぶしスケールでブラシが割り当てられる最小値。割り当てられない場合、シリーズはデータに含まれている一番低い値を使用します。 +`maximumValue`|numeric |塗りつぶしスケールでブラシが割り当てられる最大値。割り当てられない場合、シリーズはデータに含まれている一番高い値を使用します。 + +## 値リゾルバー + +散布等高線シリーズは、`valueMemberPath` オプションにマップされた項目の最小値と最大値の間を等間隔でちょうど 10 本の等高線を使用して描画します。等高線の数を変更するには、`valueResolver` オプションをオブジェクトに設定し、`valueCount` プロパティを等高線の数に設定します。 + +以下のコードは、散布等高線シリーズの等高線の数を構成する方法を示します。 + +```js +valueResolver: { + type: "linear", + valueCount: 15, +} +``` + +## 例 + +以下のコードは散布等高線シリーズをデータにバインドします。この例は、等高線の数を 10 から 15 に変更します。 + +```js +var data = [ + { x: 0, y: 0, z: 2 }, + { x: 10, y: 0, z: 3 }, + { x: 10, y: 10, z: 5 }, + { x: 0, y: 10, z: 1 }]; + +$("#chart").igDataChart({ + width: "400px", + height: "400px", + axes: [{ + name: "xAxis", + type: "numericX", + }, { + name: "yAxis", + type: "numericY", + }], + series: [{ + name: "series1", + type: "scatterContour", + dataSource: data, + xAxis: "xAxis", + yAxis: "yAxis", + xMemberPath: "x", + yMemberPath: "y", + valueMemberPath: "z", + fillScale: { + brushes: [ "green", "yellow", "red" ], + }, + valueResolver: { + type: "linear", + valueCount: 15 + } + }], +}); +``` +このコードは以下の結果になります。 + +![](../../../../images/images/jquery_scatter_contour_02.PNG) + +## 関連コンテンツ + +### トピック + +- [三角測量シリーズの構成](/triangulationseries-triangulation-series): このトピックでは、`igDataChart` コントロールで散布エリアおよび散布等高線シリーズの概要を提供します。 + +- [散布エリア シリーズの構成](/triangulationseries-area-series): このトピックでは、`igDataChart` コントロールで散布エリア シリーズを構成する方法について説明します。 diff --git a/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/triangulation-series/triangulation-series.mdx b/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/triangulation-series/triangulation-series.mdx new file mode 100644 index 0000000000..43055f633f --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igdatachart/configuring/triangulation-series/triangulation-series.mdx @@ -0,0 +1,26 @@ +--- +title: "三角測量シリーズの構成 (igDataChart)" +slug: triangulationseries-triangulation-series +--- + +# 三角測量シリーズの構成 (igDataChart) + +## このグループのトピックについて + +### 概要 + +このグループのトピックでは、散布エリアおよび散布等高線シリーズについて説明します。両シリーズは 3 つの値 (X、Y、および Z) を含むポイントのリストを取得し、X および Y 値を使用してポイントを三角測量し、画面に描画される 2 次元サーフェスを生成します。Z 値はカラー スケールを使用してサーフェスを色付けるために使用されます。2 次元スペースで値の変更を可視化します。オフィス内の異なる場所の wifi 強さなどを可視化できます。 + +図 1.散布エリア シリーズ + +![some title](../../../../images/images/jquery_mini_scatter_area_01.png) + +図 2.散布等高線シリーズ + +![](../../../../images/images/jquery_mini_scatter_contour_01.png) + +### トピック + +- [散布エリア シリーズの構成 (igDataChart)](TriangulationSeries-Scatter-Area.html): このトピックでは、エリア シリーズの情報を提供します。エリア シリーズのプロパティについて説明し、実装例を示します。 + +- [散布等高線シリーズの構成 (igDataChart)](TriangulationSeries-Scatter-Contour.html): このトピックでは、等高線シリーズの情報を提供します。等高線シリーズのプロパティについて説明し、実装例を示します。 diff --git a/docs/jquery/src/content/ja/topics/controls/igdatachart/databinding.mdx b/docs/jquery/src/content/ja/topics/controls/igdatachart/databinding.mdx new file mode 100644 index 0000000000..8ea75bd2f8 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igdatachart/databinding.mdx @@ -0,0 +1,480 @@ +--- +title: "igDataChart をデータにバインド" +slug: igdatachart-databinding +--- + +# igDataChart をデータにバインド + + + +##トピックの概要 + + +### 目的 + +このトピックでは、`igDataChart`™ コントロールを各種データ ソース (JavaScript 配列、IQueryable<T>、Web サービス) にバインドする方法について説明します。 + +### 前提条件 + +以下の表に、このトピックを理解するための前提条件として求められる素材をリストします。 + + +**概念** + +- データ バインディング +- JSON +- XML +- Web サービス +- WCF サービス +- ASP.NET MVC + + + +**トピック** + +- [igDataSource の概要](/igdatasource-igdatasource-overview): データ バインドされたコントロールと実際のデータ ソースとの中間層として機能する `igDataSource`™ コントロールに関する全般的な説明。 + +- [igDataChart 概要](/igdatachart-overview): このトピックでは、`igDataChart` コントロールについての概念情報を提供します。これには、その主な機能、チャートとユーザー機能を使用するための最低要件が含まれます。 + +- [igDataChart の追加](/igdatachart-adding): このトピックでは、`igDataChart` をコントロールを作成して追加し、データにバインドする方法を紹介します。 + + + +### このトピックの内容 + +このトピックは、以下のセクションで構成されます。 + +- [データ ソースにバインド](#binding-to-data-sources) + - [サポートされるデータ ソース](#supported-data-sources) + - [バインドの要件](#requirements-for-binding) + - [データ ソースの要約](#data-sources-summary) +- [JavaScript 配列へのバインド](#bind-to-js-array) + - [概要](#js-introduction) + - [前提条件](#js-array-prerequisites) + - [プレビュー](#js_preview) + - [手順](#js_steps) +- [XML 文字列にバインド](#binding-to-xml) + - [概要](#xml-introduction) + - [例](#xml-example) +- [ASP.NET MVC での IQueryable<T> へのバインド](#binding-to-iqueryable) + - [概要](#mvc-introduction) + - [前提条件](#mvc_prerequisites) + - [プレビュー](#mvc_preview) + - [手順](#mvc_steps) +- [WCF サービスへのバインド](#binding_wcf) + - [概要](#wcf-introduction) + - [プレビュー](#wcf-preview) + - [手順](#wcf-steps) +- [関連コンテンツ](#related-content) + - [トピック](#topics) + - [サンプル](#samples) + - [リソース](#resources) + + + +##データ ソースにバインド + +### サポートされるデータ ソース + +`igDataChart` コントロールは以下のデータ ソースに対応しています。 + + +| データ ソース | バインディング | +| --- | --- | +| igDataSource | データ操作を管理するために、コントロールで内部で使用されます。 | +| IQueryable<T> | MVC コントローラー メソッドからデータを提供するために使用されます。 | + + +### バインドの要件 + +各データ ソースには、`igDataSource` コントロールへのデータ バインディングの異なる要件があります。以下の表に、各要件カテゴリを示します。 + + +| | | +| --- | --- | +| 要件のカテゴリ | 要件の一覧 | +| データ構造 | JSON (クライアント側、あるいは Web または WCF サービスから) XML (クライアント側、あるいは Web または WCF サービスから) JavaScript 配列 ASP.NET MVC での IQueryable<T> | +| データ型 | 文字列値 (カテゴリ軸のデータ型) 数値 日付 | + + +### データ ソースの要約 + +`igDataChart` コントロールのデータ バインドは、{environment:ProductName}™ ライブラリに含まれる他のコントロールのデータ バインドと同じです。データのバインドは、`dataSource` オプションにデータ ソースを割り当てるという形で行い、Web または WCF サービスによって提供されるデータについては `dataSourceUrl` に URL を指定するという形で行います。 + +##JavaScript 配列へのバインド + + +### 概要 + +ここでは、`igDataChart` コントロールを JavaScript データ配列にバインドする際の手順を示します。 + +### 前提条件 + +この手順を実行するには、以下のリソースが必要です。 + +- HTML5 Web ページ +- Web サイトまたは Web アプリケーション プロジェクトに追加された、必要なすべての JavaScript および CSS ファイル。igDataChart インスタンスの作成および構成の詳細については、[「igDataChart の追加」](/igdatachart-adding)を参照してください。 + +### プレビュー + +次のスクリーンショットは、サンプル配列へのバインドに成功して、所定のデータが表示されるようになった状態の `igDataChart` コントロールです。 + +![](../../images/images/Data_Binding_in_igDataChart_1.png) + +### 手順 + +ここでは、`igDataChart` コントロールを JavaScript データ配列にバインドする際の手順を示します。 + +1. データ配列を定義します。 + + 次のコードは、サンプルの JavaScript 配列を定義するものです。 + + **JavaScript の場合:** + +```js + +``` + +2. `igDataChart` コントロールを追加して構成します。 + + **1.**チャートの div 要素を Web ページに追加します。 + + Web ページの body 部分に `igDataChart` チャート コントロール用の div 要素を追加します。 + + **HTML の場合:** + +```html + + ... +
    + ... + +``` + + **2.**`igDataChart` チャート コントロールのインスタンスを作成して、そのデータ ソースを構成します。 + + これを行うには、1 つ前の手順で定義したデータ配列を `igDataChart` コントロールの `dataSource` オプションに割り当てます。 + + **JavaScript の場合:** + +```js + +``` + +このサンプルは、JSON データにバインドされたデータ チャートを表示します。 + +
    + [{environment:SamplesEmbedUrl}/data-chart/json-binding]({environment:SamplesEmbedUrl}/data-chart/json-binding) +
    + +## XML 文字列にバインド + +### 概要 + +この例では、`igDataChart` コントロールを XML 文字列にバインドする方法を示します。 + +### 例 + +
    + [{environment:SamplesEmbedUrl}/data-chart/xml-binding]({environment:SamplesEmbedUrl}/data-chart/xml-binding) +
    + +##ASP.NET MVC での IQueryable<T> へのバインド + + +### 概要 + +ここでは、{environment:ProductName} ライブラリにある ASP.NET ヘルパーを使用して一連のデータ オブジェクトをバックエンド コントローラー メソッドからデータ チャートにバインドする手順を示します。 + +### 前提条件 + +この手順を実行するには、以下のリソースが必要です。 + +- ASP.NET MVC アプリケーション +- Web サイトまたは Web アプリケーション プロジェクトに追加された、必要なすべての JavaScript および CSS ファイル。igDataChart インスタンスの作成および構成の詳細については、[「igDataChart の追加」](/igdatachart-adding)を参照してください。 + +### プレビュー + +次のスクリーンショットは、サンプル配列へのバインドに成功して、所定のデータが表示されるようになった状態の `igDataChart` コントロールです。 + +![](../../images/images/Data_Binding_in_igDataChart_2.png) + +### 手順 + +以下の手順では、ASP.NET MVC で `igDataChart` コントロールのインスタンスを作成してデータ ソースにバインドする方法を示します。ここでは、厳密に型指定されたビューに表示するデータ オブジェクトのリストを指定し、データ チャートに {environment:ProductNameMVC} DataChart を使用します。 + +1. データ モデルを定義します。 + + データ モデル クラスを定義します。 + + **C# の場合:** + +```csharp + public class StockMarketDataPoint + { + public double Open { get; set; } + public double High { get; set; } + public double Low { get; set; } + public double Close { get; set; } + public double Volume { get; set; } + public DateTime Date { get; set; } + public string DateString { get { return Date.ToShortDateString(); } } + } +``` + +2. コントローラー メソッドを定義します。 + + `StockMarketDataPoint` オブジェクトの配列を作成するためにコントローラー メソッドにロジックを追加します。ここには、データベースからのデータ取得に適用するカスタム ロジックを指定します。 + + `StockMarketDataPoint` オブジェクトのリストが IQueryable<StockMarketDataPoint> に変換されてからビューに渡されるという点に注意してください。これは {environment:ProductNameMVC} を呼び出すという形で実行することもできますが、ここに示した実装の方がきれいに実行できます。 + + **C# の場合:** + +```csharp + public ActionResult Index() + { + List stockMarketData = new List + { + new StockMarketDataPoint { Date = DateTime.Parse("2.1.2010"), Open = 1000, High = 1028.75, Low = 985.25, Close = 1020, Volume = 1995 }, + new StockMarketDataPoint { Date = DateTime.Parse("3.1.2010"), Open = 1020, High = 1032.5, Low = 999.5, Close = 1021, Volume = 1964.5 }, + new StockMarketDataPoint { Date = DateTime.Parse("4.1.2010"), Open = 1021, High = 1033.5, Low = 996, Close = 1033, Volume = 1974.75 }, + new StockMarketDataPoint { Date = DateTime.Parse("5.1.2010"), Open = 1033, High = 1062, Low = 1018.75, Close = 1042, Volume = 1978.5 }, + new StockMarketDataPoint { Date = DateTime.Parse("6.1.2010"), Open = 1042, High = 1058.5, Low = 1019.75, Close = 1029, Volume = 1979 }, + new StockMarketDataPoint { Date = DateTime.Parse("7.1.2010"), Open = 1029, High = 1050.75, Low = 1006, Close = 1042, Volume = 1990 } + }; + return View(stockMarketData.AsQueryable()); + } +``` + +3. `igDataChart` コントロールのインスタンスを作成して、データ ソースを構成します。 + + ASP.NET MVC ビューに含まれる次のコードが、`igDataChart` のインスタンスを作成して、このリストを割り当てます。厳密に型指定されたビューのデータ モデルが `DataChart(Model)` の呼び出しによってチャートにマップされる仕組みに注目してください。軸定義では、`item.DateString` プロパティが `Label()` 関数呼び出しによってカテゴリの X 軸にマップされます。シリーズの定義では、`OpenMemberPath`、`CloseMemberPath`、`LowMemberPath`、および `HighMemberPath` の各呼び出しが、対応するプロパティを金融取引チャートにバインドします。`DataBind()` メソッドが実際のデータ バインディングを実行し、最後に、`Render()` メソッドが、クライアント側で実行される最終的な JavaScript コードを発行します。 + + **ASPX の場合:** + +```csharp + <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage>" %> + <%@ Import Namespace="Infragistics.Web.Mvc" %> + ... + <%= + Html.Infragistics().DataChart(Model) + .ID("chart") + .Axes(axes => + { + axes.CategoryX("xAxis").Label(item => item.DateString); + axes.NumericY("priceAxis"); + } + ) + .Series(series => + { + series.Financial("finSeries") + .XAxis("xAxis") + .YAxis("priceAxis") + .OpenMemberPath(item => item.Open) + .CloseMemberPath(item => item.Close) + .LowMemberPath(item => item.Low) + .HighMemberPath(item => item.High); + } + ) + .DataBind() + .Render() + %> +``` + + +##WCF サービスへのバインド + + +### 概要 + +ここでは、`dataSourceUrl` オプションを利用して `igDataChart` を WCF サービスにバインドする手順を示します。Web サービスへのバインドも同様です。 + +### 前提条件 + +この手順を実行するには、以下のリソースが必要です。 + +- HTML5 Web ページ +- Web サイトまたは Web アプリケーション プロジェクトに追加された、必要なすべての JavaScript および CSS ファイル。`igDataChart` インスタンスの作成および構成の詳細については、[「igDataChart の追加」](/igdatachart-adding)を参照してください。 + +### プレビュー + +次のスクリーンショットは、サンプル配列へのバインドに成功して、所定のデータが表示されるようになった状態の `igDataChart` コントロールです。 + +![](../../images/images/Data_Binding_in_igDataChart_3.png) + +### 手順 + +`igDataChart` コントロールを WCF　サービスにバインドする手順を以下に示します。 + + +1. WCF サービス インターフェイスを定義します。 + + WCF サービスの完全な実装は、この例とは関連がないので省略します。以下に、GET HTTP 要求に応じてクライアントにデータを提供するサービス コントラクト クラスおよび操作コントラクト メソッドのサンプルを示します。データ モデル クラスは、前の手順 [ASP.NET MVC での IQueryable<T> へのバインド](#binding-to-iqueryable)で指定したものと同じです。 + + このあとに定義するのは、クライアントに `StockMarketDataPoint` オブジェクトのリストという形で金融取引データを送るサンプルの `StockMarket` WCF サービスのインターフェイスです。 + + **C# の場合:** + +```csharp + [ServiceContract] + [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)] + public class StockMarket + { + [OperationContract] + [WebGet(BodyStyle = WebMessageBodyStyle.Bare, ResponseFormat = WebMessageFormat.Json)] + public List GetStockData() + { + return StockMarketGenerator.GenerateData(); + } + } +``` + + ここで注目すべき重要なものは、サーバー メソッド `GetStockData()` に適用される `WebGet` 属性です。これは、このメソッドが GET 要求に応答し、その応答がむき出しの（ラップされていない）JSON エンコード データ配列であることを宣言します。 + +2. チャート コントロールのインスタンスを作成し、データ ソースを設定します。 + + **HTML/jQuery** + + `igDataChart` のインスタンスを作成するために次のコードを HTML5 ページの冒頭部に追加します。WCF サービス アドレスは、アドレスを `dataSourceUrl` オプションに割り当てることによって、データ ソースとして設定されます。X 軸定義では、軸のラベルが、サーバーから取得したデータの `DateString` プロパティにマップされます。同じように、金融取引データ シリーズのデータ オプションは、WCF データ ソースの Open (寄り値)、High　(高値)、Low(低値)、および Close (引け値) プロパティにマップされます。 + + このサンプルでは、WCF サービスがインストール/実行されている場所のアドレスを `http://www.example.com/Services/StockMarket.svc/GetStockData` とします。 + + **JavaScript の場合:** + +```js + $(function () { + $("#chart").igDataChart({ + dataSourceUrl: "http://www.example.com/Services/StockMarket.svc/GetStockData", + axes: [{ + name: "xAxis", + type: "categoryX", + label: "DateString" + }, + { + name: "yAxis", + type: "numericY" + }], + series: [{ + name: "dataSeries", + title: "stockPrice", + type: "financial", + xAxis: "xAxis", + yAxis: "yAxis", + openMemberPath: "Open", + highMemberPath: "High", + lowMemberPath: "Low", + closeMemberPath: "Close" + }] + }); + }); +``` + + **ASP.NET MVC** + + `igDataChart` のインスタンスを作成して WCF サービス アドレスを設定するために、次のコードを ASP.NET MVC ビューに追加します。このコードは HTML サンプルのコードと同じ意味を持ち、このコードで重要な箇所は、WCF サービスの URL を設定する呼び出しが定義されている部分です。この呼び出しにより、`DataSourceUrl 属性が http://www.example.com/Services/StockMarket.svc/GetStockData に設定されます。` + + **ASPX の場合:** + +```csharp + <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %> + <%@ Import Namespace="Infragistics.Web.Mvc" %> + ... + <%= + Html.Infragistics().DataChart() + .ID("chart") + .Axes((axes) => + { + axes.CategoryX("xAxis").Label("DateString"); + axes.NumericY("yAxis"); + }) + .Series((series) => + { + series + .Financial("finSeries") + .XAxis("xAxis").YAxis("yAxis") + .OpenMemberPath("Open") + .CloseMemberPath("Close") + .LowMemberPath("Low") + .HighMemberPath("High") + .VolumeMemberPath("Volume") + }) + .DataSourceUrl("http://www.example.com/Services/StockMarket.svc/GetStockData") + .DataBind() + .Render() + %> +``` + +##関連コンテンツ + + +### トピック + +このトピックの追加情報については、以下のトピックも合わせてご参照ください。 + +- [igDataSource のクライアント側データへのバインド](/igdatasource-binding-igdatasource-to-client-side-data): このトピックでは、`igDataSource` をクライアント側の JavaScript 配列および JSON データにバインドする方法を説明します。 + +- [igDataSource を REST サービスへバインド](/igdatasource-binding-to-rest-services): このトピックでは、`igDataSource` コントロールを REST サービスにバインドする方法を説明します。 + +- [igDataSource を WCF データ サービスへバインド](/igdatasource-binding-to-wcf-data-services): このトピックでは、`igDataSource` コンポーネントを WCF サービスにバインドする方法を説明します。 + + + +### サンプル + +このトピックについては、以下のサンプルも参照してください。 + +- [大量のデータのバインド]({environment:SamplesUrl}/data-chart/binding-high-volume-data): このサンプルは、大量のレコードが `igDataChart` にバインドされる実例を示すものです。 + + + +### リソース + +以下の資料 (Infragistics のコンテンツ ファミリー以外でもご利用いただけます) は、このトピックに関連する追加情報を提供します。 + +- [WCF サービスのホストおよび利用](http://msdn.microsoft.com/ja-jp/library/bb332338.aspx): この MSDN 掲載記事は、WCF サービスの作成/ホスト/利用方法を詳しく解説したものです。 + +- [チュートリアル: Visual Web Developer での ASP.NET Web サービスの作成および使用](http://msdn.microsoft.com/ja-jp/library/8wbhsy70%28v=vs.80%29.aspx): この MSDN 掲載記事は、Visual Web Developer で Web サービスを作成する方法を詳しく解説したものです。 + + + + + + + + + + diff --git a/docs/jquery/src/content/ja/topics/controls/igdatachart/known-issues.mdx b/docs/jquery/src/content/ja/topics/controls/igdatachart/known-issues.mdx new file mode 100644 index 0000000000..0ec9ed8b10 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igdatachart/known-issues.mdx @@ -0,0 +1,64 @@ +--- +title: "既知の問題と制限 (igDataChart)" +slug: igdatachart-known-issues +--- + +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# 既知の問題と制限 (igDataChart) + + + +### 目的 + +このトピックでは、`igDataChart`™ コントロールにおける既知の問題と制限をリストします。 + + + +##既知の問題と制限 + + +### 概要 + +以下の表に、`igDataChart` コントロールの既知の問題と制限を簡単に説明します。いくつかの問題については、この概要表の後に、既知の問題点に関する詳しい説明と、考えられる回避策を示します。 + +凡例: | +--------|------ +![](../../images/images/positive.png) | 回避策 +![](../../images/images/negative.png) | 既知の回避策はありません +![](../../images/images/plannedFix.png) | 修正予定です + + + +| 機能 | 説明 | 状態 | +| --- | --- | --- | +| [財務シリーズ チャートでは先頭の項目と最後の項目が半分切れた状態で表示される](#first-last-items-half-cut) | 財務シリーズにおいて、先頭と最後の項目はチャートのビュー上にすべてが表示されず、半分にカットされた状態でプロットされます。 | ![](../../images/images/plannedFix.png) | +| [軸範囲が変更された時にはチャート アニメーションは無効化されます](#chart-animation-issue) | チャートの Motion Framework を使用しデータを更新した場合、Y 軸の範囲が変更され、チャート アニメーションはすべて無効となり、新しいデータはモーションのエフェクトがまったくない形で即座に表示されます。 | ![](../../images/images/positive.png) | +| [モノリス シャドウは、ぼかし効果を許可しません。](#monolith_shadow) | シリーズの プロパティを true に設定した場合、 設定は無視され、ぼかしはシャドウに適用されません。 | ![](../../images/images/positive.png) | + + +### 財務シリーズ チャートでは先頭の項目と最後の項目が半分切れた状態で表示される + +財務シリーズでは、先頭の項目と最後の項目はチャート ビューに全体が表示されず、半分切れた状態でプロットされます。 + +データ チャートの新機能はこの問題を解決する将来のリリースで実装されます。 + +### 軸範囲が変更された時にはチャート アニメーションは無効化されます + +チャートの Motion Framework を使用しデータを更新した場合、Y 軸の範囲が変更され、チャート アニメーションはすべて無効となり、新しいデータはモーションのエフェクトがまったくない形で即座に表示されます。 + +この問題を解決するには、チャートのY軸範囲を適切に選び、軸範囲が変化しないよう `minimumValue`と `maximumValue` を設定します。 + +### モノリス シャドウは、ぼかし効果を許可しません。 + +シリーズの プロパティを true に設定した場合、 設定は無視され、ぼかしはシャドウに適用されません。これは、[Google® Chrome™ のバグ](https://code.google.com/p/chromium/issues/detail?id=100703)に対応するための制限です。すべての主要なブラウザーで同じ動作効果を保証することが目的です。上記の Chrome のバグが解消され次第、この効果はアップデートの対象となる予定です。 + +影をぼかす必要がある場合、コンパウンド シャドウを使用してください (`useSingleShadow = "true"`)。 + + + + + + + + diff --git a/docs/jquery/src/content/ja/topics/controls/igdatachart/landing-page.mdx b/docs/jquery/src/content/ja/topics/controls/igdatachart/landing-page.mdx new file mode 100644 index 0000000000..cabedc2cb9 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igdatachart/landing-page.mdx @@ -0,0 +1,77 @@ +--- +title: "igDataChart" +slug: igdatachart-landing-page +--- + +# igDataChart + + +##このグループのトピックについて + + +### 概要 + +`igDataChart`™ コントロールは、HTML5 Canvas 要素に基づいて Web アプリケーションで各種のチャートを表示する機能を提供します。 + +{/* image not found: igDataChart_%28Landing_Page%29_1.png */} + +### トピック + +このセクションのトピックでは、 `igDataChart` コントロールの詳細情報を提供します。 + + +- [](/igdatachart-overview)[igDataChart の概要](/igdatachart-overview): このトピックでは、`igDataChart` コントロールについての概念情報を提供します。これには、その主な機能、チャートとユーザー機能を使用するための最低要件が含まれます。 + +- [シリーズ タイプ (igDataChart)](/igdatachart-series-types): このトピックでは、`igDataChart` コントロールにより生成できるあらゆる種類のチャートを表示します。 + +- [構成可能な視覚要素 (igDataChart)](/igdatachart-visual-elements): このトピックでは、`igDataChart` コントロールとそれらを管理するプロパティの構成可能なすべての視覚要素の一覧を示します。 + +- [igDataChart の追加](/igdatachart-adding): このトピックでは、`igDataChart` コントロールをページに追加し、データにバインドする方法を紹介します。 + +- [igDataChart をデータにバインド](/igdatachart-databinding): このトピックは、`igDataChart` コントロールを各種のデータ ソース (JavaScript 配列、`IQueryable`、Web サービス) にバインドする方法を説明します。 + +- [シリーズ要件](/igdatachart-series-requirements): このトピックでは、各シリーズの指定要件を説明します。 + +- [igDataChart のスタイル設定](/igdatachart-styling-themes): このトピックでは、スタイル設定を使用して `igDataChart` にテーマを適用する方法を説明します。 + +- [軸のタイトルの構成 (igDataChart)](/igdatachart-axis-title): このトピックでは、`igDataChart`™ コントロールでの軸タイトルの設定に関する情報を提供します。 + +- [チャートのタイトル / サブタイトルの構成 (igDataChart)](/igdatachart-chart-titles-and-subtitles): このトピックでは、`igDataChart`™ コントロールのチャート タイトルとサブタイトル機能を使用する方法を説明します。 + +- [軸間隔の構成 (igDataChart)](igdatachart-axis-intervals.html): このトピックでは、`igDataChart`™ コントロールの主軸および副軸の間隔機能を構成する方法を説明します。 + +- [ホバー操作の構成 (igDataChart)](./04_Configuring/04_Hover Interactions/~HoverInteractions_Hover_Interactions.mdx): このセクションは、利用可能な異なる型のホバー操作レイヤーなど、`igDataChart` コントロール上で利用できるホバー操作について情報を提供します。 + +- [シリーズの強調表示の構成 (igDataChart)](/igdatachart-series-highlighting): このトピックは、サポートされるシリーズのリストに従って、シリーズの強調表示機能の有効化についての情報を提供します。 + +- [アクセシビリティ準拠 (igDataChart)](/igdatachart-accessibility-compliance): このトピックでは、`igDataChart`のアクセシビリティ機能について説明し、チャートを含むページのアクセシビリティ準拠を実現する方法について説明します。 + +- [jQuery および MVC API リファレンス リンク (igDataChart)](/igdatachart-api-links): このトピックでは、 `igDataChart` コントロールの jQuery および {environment:ProductNameMVC} クラスの API ドキュメントへのリンクを提供します。 + +- [既知の問題と制限 (igDataChart)](/igdatachart-known-issues): このトピックでは、`igDataChart` コントロールのすべての既知の問題と制限を示します。 + + + + + +##関連コンテンツ + + +### トピック + +このトピックの追加情報については、以下のトピックも合わせてご参照ください。 + + +- [{environment:ProductName} の概要](/igniteui-for-jquery-overview): このトピックでは、{environment:ProductName}™ ライブラリの一般情報を提供します。 + +- [igPieChart の概要](/igbulletgraph-overview): このトピックは、`igPieChart`™ コントロールについて、その主要機能、最低必須事項、ユーザー機能といった事項の概念的情報を提供します。 + + + + + + + + + + diff --git a/docs/jquery/src/content/ja/topics/controls/igdatachart/overview/hoverinteractions-hover-interactions-overview.mdx b/docs/jquery/src/content/ja/topics/controls/igdatachart/overview/hoverinteractions-hover-interactions-overview.mdx new file mode 100644 index 0000000000..5afdb64a1d --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igdatachart/overview/hoverinteractions-hover-interactions-overview.mdx @@ -0,0 +1,172 @@ +--- +title: "ホバー操作の概要 (igDataChart)" +slug: hoverinteractions-hover-interactions-overview +--- + +# ホバー操作の概要 (igDataChart) + +#### 目的 + +このトピックは、利用可能な異なる型のホバー操作レイヤーなど、`igDataChart` コントロール上で利用できるホバー操作について概念的な情報を提供します。 + +#### 前提条件 + +このトピックを理解するために、以下のトピックを参照することをお勧めします。 + +- [igDataChart の追加](/igdatachart-adding): このトピックでは、`igDataChart`™ コントロールをページに追加し、データにバインドする方法を紹介します。 + +- [igDataChart をデータにバインド](/igdatachart-databinding): このトピックでは、`igDataChart`™ コントロールを各種データ ソース (JavaScript 配列、`IQueryable`、Web サービス) にバインドする方法について説明します。 + + +#### このトピックの内容 + +このトピックは、以下のセクションで構成されます。 + +- [概要](#overview) +- [共通のプロパティ](#common-properties) +- [レイヤーのタイプ](#types-of-layers) + - [十字線レイヤー](#crosshair-layer) + - [カテゴリ ハイライト レイヤー](#category-highlight-layer) + - [カテゴリ項目 ハイライト　レイヤー](#category-item-highlight-layer) + - [カテゴリ ツールチップ レイヤー](#category-tooltip-layer) + - [項目ツールチップ レイヤー](#item-tooltip-layer) + - [最終値レイヤー](#final-value-layer) + - [コールアウト レイヤー](#callout-layer) +- [関連コンテンツ](#related-content) + - [トピック](#topics) + - [サンプル](#samples) + + + +## 概要 + +#### ホバー 操作のサマリー + +ホバー操作は、シリーズ コレクションに追加されるシリーズであるホバー操作レイヤーを介して実装されます。これらのレイヤーはカーソルの位置に依存します。ホバー操作レイヤーを `igDataChart` コントロールに追加すると、十字線およびツールチップまたはいずれか一方のデフォルト ビヘイビアが無効になります (追加されるレイヤーのタイプによって異なります)。 + +デフォルトのビヘイビアーは、ホバー操作レイヤーのカーソルを動かすときの組み込みビヘイビアーと視覚的な機能が似ているため無効にします。しかしこのビヘイビアは上書きし、ホバー操作レイヤーの機能に加えてデフォルトの十字線機能を実行できるようにできます。また、一度に 1 つのツールチップ レイヤーで 1 つのシリーズのみが対象になります。1 つのシリーズで複数のヒントレイヤーを目標にすると、ヒントを使用するホバー操作レイヤーは期待通りに動作しなくなります。シリーズに対してツールチップを複数の場所で使用することはできません。 + +以下のスクリーンショットは、カテゴリ ハイライト レイヤー、十字線レイヤー、および品目ツールチップ レイヤーが実装された `igDataChart` コントロールを示しています。 + +![](../configuring/hover-interactions/images/jQuery_Multiple_Layers_01.png) + + +## 共通のプロパティ + +#### 共通のプロパティおよびメソッドの概要 + +ホーバー操作レイヤーは `Series` オブジェクトから継承するため、`Series` 基本クラスで利用可能な多くのプロパティおよびメソッドを取得します。しかし、`Series` クラスからのすべてがホバー操作レイヤーで意味をなすわけではありません。たとえば、ホバー操作レイヤーはマウスと対話するようには設計されておらずヒットでテストできません。従って、マウス関連のイベントは起動されません。 + +共通のプロパティおよびメソッドの詳細は、[ホバー操作プロパティ参照 (igDataChart)](../04_Configuring/04_Hover Interactions/07_HoverInteractions_Common_Properties.mdx) のトピックを参照してください。 + + + +## レイヤーのタイプ + +#### 概要 + +現在、`igDataChart` コントロールで利用可能なホバー操作レイヤーは 5 種類あります。これらのホバー操作レイヤーのそれぞれが、異なる強調表示、ホバーおよびツールチップの操作を個別に、または組み合わせて提供し、強力なホバー操作を実現します。 + +以下で、`igDataChart` コントロールで利用可能な各レイヤー タイプを簡単に説明します。 + +### 十字線レイヤー + +`crosshairLayer` は、対象となる各シリーズの実際の値に合った十字線を提供します。 + +![](../configuring/hover-interactions/images/jQuery_Crosshair_Layer_01.png) + +詳細は、[十字線レイヤー (igDataChart)](../04_Configuring/04_Hover Interactions/03_HoverInteractions_Crosshair_Layer.mdx) のトピックを参照してください。 + +### カテゴリ ハイライト レイヤー + +`categoryHighlightLayer` は、`igDataChart` コントロール内の 1 つまたはすべてのカテゴリ軸を対象にしています。カーソル位置に最も近い軸のエリアを照らすシェイプを描画します。 + +![](../configuring/hover-interactions/images/jQuery_Category_Highlight_Layer_01.png) + +詳細は、[十字線レイヤーの構成 (igDataChart)](../04_Configuring/04_Hover Interactions/00_HoverInteractions_Category_Highlight_Layer.mdx) のトピックを参照してください。 + +### カテゴリ項目ハイライト レイヤー + +`categoryItemHighlightLayer` レイヤーは、その位置で縞模様シェイプまたはマーカーを描画することにより、カテゴリ軸を使用するシリーズ内の項目を強調表示します。 + +![](../configuring/hover-interactions/images/jQuery_Item_Highlight_Layer_01.png) + +詳細は、[カテゴリ項目ハイライト レイヤーの構成 (igDataChart)](../04_Configuring/04_Hover Interactions/01_HoverInteractions_Category_Item_Highlight_Layer.mdx) のトピックを参照してください。 + +### カテゴリ ツールチップ レイヤー + +`categoryTooltipLayer` は、カテゴリ軸を使用するシリーズ用にグループ化されたツールチップを表示します。 + +![](../configuring/hover-interactions/images/jQuery_Category_Tooltip_Layer_01.png) + +詳細は、[カテゴリ ツールチップ レイヤーの構成 (igDataChart)](../04_Configuring/04_Hover Interactions/02_HoverInteractions_Category_Tooltip_Layer.mdx) のトピックを参照してください。 + +### 項目ツールチップ レイヤー + +`itemTooltipLayer` は、対象となるすべてのシリーズに対して個別にツールチップを表示します。 + +![](../configuring/hover-interactions/images/jQuery_Item_Tooltip_Layer_01.png) + +詳細は、[項目ツールチップ レイヤーの構成 (igDataChart)](../04_Configuring/04_Hover Interactions/04_HoverInteractions_Item_Tooltip_Layer.mdx) のトピックを参照してください。 + +### 最終値レイヤー + +`finalValueLayer` は、チャートでシリーズの現在の (最終) 値を表す注釈を表示します。 + +![](../configuring/hover-interactions/images/jQuery_Final_Value_Layer_01.png) + +詳細は、[最終値レイヤーの構成 (igDataChart)](../04_Configuring/04_Hover Interactions/05_HoverInteractions_Final_Value_Layer.mdx) のトピックを参照してください。 + +### コールアウト レイヤー + +`calloutLayer` はチャート既存または新しいデータの注釈を表示します。 + +![](../configuring/hover-interactions/images/jQuery_Callout_Layer_01.png) + +詳細は、[コールアウト レイヤー (igDataChart)](../04_Configuring/04_Hover Interactions/06_HoverInteractions_Callout_Layer.mdx) のトピックを参照してください。 + + +## 関連コンテンツ + +### トピック + +- [ホバー操作の概要 (igDataChart)](/hoverinteractions-hover-interactions-overview): このトピックは、利用可能な異なる型のホバー操作レイヤーなど、`igDataChart` コントロール上で利用できるホバー操作について概念的な情報を提供します。 + +- [ホバー操作プロパティ参照 (igDataChart)](../04_Configuring/04_Hover Interactions/07_HoverInteractions_Common_Properties.mdx): このトピックは、ホバー操作機能が、`series` クラスから継承したツールチップの相互作用を強調表示、ホバリングおよび相互作用するために使用するプロパティおよびメソッドについての情報を提供します。 + +- [十字線レイヤーの構成 (igDataChart)](../04_Configuring/04_Hover Interactions/03_HoverInteractions_Crosshair_Layer.mdx): このトピックは、ホバー操作に使用される十字線レイヤーについての情報を提供します。十字線のプロパティについて説明し、実装例を示します。 + +- [カテゴリ ハイライト レイヤーの構成 (igDataChart)](../04_Configuring/04_Hover Interactions/00_HoverInteractions_Category_Highlight_Layer.mdx): このトピックは、ホバー操作に使用されるカテゴリ ハイライト レイヤーについての情報を提供します。カテゴリ ハイライト レイヤーのプロパティについて説明し、実装例を示します。 + +- [カテゴリ項目ハイライト レイヤーの構成 (igDataChart)](../04_Configuring/04_Hover Interactions/01_HoverInteractions_Category_Item_Highlight_Layer.mdx): このトピックは、ホバー操作に使用されるカテゴリ項目ハイライト レイヤーについての情報を提供します。カテゴリ項目ハイライト レイヤーのプロパティについて説明し、実装例を示します。 + +- [カテゴリ ツールチップ レイヤーの構成 (igDataChart)](../04_Configuring/04_Hover Interactions/02_HoverInteractions_Category_Tooltip_Layer.mdx): このトピックは、ホバー操作に使用されるカテゴリ ツールチップ レイヤーについての情報を提供します。カテゴリ ツールチップ レイヤーのプロパティについて説明し、実装例を提供します。 + +- [項目ツールチップ レイヤーの構成 (igDataChart)](../04_Configuring/04_Hover Interactions/04_HoverInteractions_Item_Tooltip_Layer.mdx): このトピックは、ホバー操作に使用される項目ツールチップ レイヤーについての情報を提供します。項目ツールチップ レイヤーのプロパティについて説明し、実装例も提供します。 + + +### サンプル + +このトピックについては、以下のサンプルも参照してください。 + +- [ホバー操作 - 十字線レイヤー](../04_Configuring/04_Hover Interactions/03_HoverInteractions_Crosshair_Layer.mdx#example): このサンプルは、ターゲットとする実際の値に一致する十字線を提供する十字線レイヤーを紹介します。このサンプル オプション ペインでは、十字線の太さの変更など、レイヤー プロパティを編集できます。 + +- [ホバー操作 - カテゴリ ハイライト レイヤー](../04_Configuring/04_Hover Interactions/00_HoverInteractions_Category_Highlight_Layer.mdx#example): このサンプルは、`igDataChart`™ コントロールで単一/複数のカテゴリ軸をターゲットにしたカテゴリ ハイライト レイヤーを紹介します。このサンプル オプション ペインでは、カテゴリ ハイライト レイヤーのプロパティを変更できます。強調表示の色、アウトライン、太さなどの変更が可能です。 + +- [ホバー操作 - カテゴリ項目の強調表示レイヤー](../04_Configuring/04_Hover Interactions/01_HoverInteractions_Category_Item_Highlight_Layer.mdx#example): このサンプルは、カテゴリ項目ハイライト レイヤーでカテゴリ軸を使用、その場でバンド図形またはマーカーを描画してシリーズの項目を強調表示します。このサンプル オプション ペインでは、カテゴリ ハイライト レイヤーのプロパティを変更できます。強調表示の色、アウトライン、太さなどの変更が可能です。 + +- [ホバー操作 - カテゴリ ツールチップ レイヤー](../04_Configuring/04_Hover Interactions/02_HoverInteractions_Category_Tooltip_Layer.mdx#example): このサンプルは、カテゴリ軸を使用してグループ化されたツールチップを表示するカテゴリ ツール チップ レイヤーを紹介します。このサンプル オプション ペインでは、ツールチップの位置の変更など、レイヤーのプロパティを編集できます。 + +- [ホバー操作 - 項目ツールチップ レイヤー](../04_Configuring/04_Hover Interactions/04_HoverInteractions_Item_Tooltip_Layer.mdx#example): このサンプルは、すべてのターゲット シリーズに項目ツールチップ レイヤーを表示するツールチップ レイヤーを紹介します。 このサンプル オプション ペインでは、トランジション期間の変更など、レイヤー プロパティを編集できます。 + +- [ホバー操作 - 複数レイヤー]({environment:SamplesUrl}/data-chart/multiple-layers): このサンプルは、`igDataChart` コントロール内での複数レイヤーの相互作用を紹介します。このサンプルでは、項目ツールチップ レイヤー、十字線レイヤー、およびカテゴリ ハイライト レイヤーを表示します。 + + + + + + + + + + diff --git a/docs/jquery/src/content/ja/topics/controls/igdatachart/overview/overview.mdx b/docs/jquery/src/content/ja/topics/controls/igdatachart/overview/overview.mdx new file mode 100644 index 0000000000..981481f177 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igdatachart/overview/overview.mdx @@ -0,0 +1,332 @@ +--- +title: "概要 (igDataChart)" +slug: igdatachart-overview +--- +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# 概要 (igDataChart) + + + +### 目的 + +このトピックは、`igDataChart`™ コントロールについて、その主要機能、最低必須事項、ユーザー機能といった事項の概念的情報を提供します。 + +### 必要な背景 + +以下の表に、このトピックを理解するための前提条件として求められる素材をリストします。 + + +**概念** + +- チャート作成 +- チャート タイプ +- データの可視化 + +**トピック** + + +- [{environment:ProductName} の概要](/igniteui-for-jquery-overview) + +{environment:ProductName}™ ライブラリにつぃての一般的情報 + +### このトピックの構成 + +このトピックは、以下のセクションで構成されます。 + +- [概要](#introduction) +- [サポートされるチャート タイプ](#supported-chart-types) +- [最低必要条件](#min-requirements) +- [主要機能](#main-features) + - [機能の概要](#features-overview) + - [凡例](#legend) + - [複合チャート](#composite-charts) + - [ナビゲーション](#navigation) + - [軸](#axis-options) + - [ツールチップ](#tooltips) + - [十字線](#crosshairs) + - [マーカー](#markers) + - [トレンドライン](#trend-lines) +- [ユーザー相互作用と操作性](#user-interaction) +- [関連コンテンツ](#related-content) + - [トピック](#topics) + - [サンプル](#samples) + + + +##概要 + + +### igDataChart の概要 + +igDataChart は、さまざまな種類のチャートを HTML5 Web アプリケーションおよびサイトに描画するチャート コントロールです。HTML5 の新しい Canvas タグを使用して、データ シリーズを Web ページにプロットします。 + +![](../../../images/images/igDataChart_Overview_1.png) + +`igDataChart` コントロールを使用すると、多くのさまざまなシリーズ タイプを棒チャート/柱状チャート、財務、カテゴリ (折れ線、スプライン、エリアなど)、極座標、ラジアル、散布図 (散布図および散布図折れ線) 他のように描画できます。チャートは、各データ シリーズの意味をマークする 1 つまたは複数の凡例で構成できます。さらに、他のビジュアル要素およびユーザー操作要素を、十字線、概要と詳細 (OPD) ペイン、軸の主線/副線、軸の幅などのように構成できます。詳細については、[主な機能](#main-features)のセクションを参照してください。 + + + +##サポートされるチャート タイプ + + +### サポートされるチャート タイプの概要 + +`igDataChart` コントロールは、さまざまな可視化の目的に対して導入されるいろいろなシリーズ タイプを可能にします。 + +サポートされるチャート タイプの詳細と基本的な構成情報については、[サポートされるチャート タイプの表](#supported-chart-types)のブロックを参照してください。 + +>**注:** 円グラフは別のコントロール `igPieChart`™ で作成されます。詳細は [igPieChart の概要](/igbulletgraph-overview)をご覧ください。 + +### サポートされるチャート タイプの表 + +以下の表はサポートされているチャート タイプを示します。 + + +| チャート タイプ | シリーズ タイプ | 説明 | Series.type プロパティの設定 | データ バインディング プロパティ | +| --- | --- | --- | --- | --- | +| 棒と柱状 | 棒 | 分類されたデータを水平の棒で可視化します。 | bar | | +| | 列 | 分類されたデータを垂直の柱で可視化します。 | column | | +| カテゴリ | 線 | 分類されたデータをデータ ポイントに鋭い角をもつ線で可視化します。 | line | | +| | エリア チャート | 分類されたデータをデータ ポイントに鋭い角をもつ線の下の色づけされた領域で可視化します。 | area | | +| | スプライン | 分類されたデータをデータ ポイント上のなめらかな角をもつ線で可視化します。 | spline | | +| | スプライン エリア チャート | 分類されたデータをデータ ポイントになめらかな角をもつ線の下の色づけされた領域で可視化します。 | splineArea | | +| | ウォーターフォール | 分類されたデータを垂直の柱で可視化し、先頭のカテゴリーに対応する先頭の柱は x 軸から始まり、続くカテゴリーはそれぞれ前のカテゴリーが終わったとこから始まります。 | waterfall | | +| 財務 | ロウソク足チャート | ロウソク足の形で財務 (投資) 指標の始値、終値、安値、高値を表示します。 | candlestick | | +| | OHLC チャート | Open、High、Low、Close の略開始と終わりの値のマーキングをもつ垂直線の形で財務 (投資) 指標の始値、終値、安値、高値を表示します。 | ohlc | | +| 極座標 | 極座標散布図 | 極座標系でドット (またはその他のマーカー) によるデータの可視化を行います。 | polarScatter | | +| | 極座標折れ線チャート | 極座標系でデータ ポイントを直線で結んだ線によりデータを可視化します。 | polarLine | | +| | 極座標エリア チャート | 極座標系でデータ ポイントを直線で結んだ線の下の色づけされた領域でデータを可視化します。 | polarArea | | +| ラジアル | ラジアル折れ線チャート | カテゴリー化されたデータをデータ ポイントを直線で結んだ線により可視化し、すべてのカテゴリーを円内に配置します。 | radialLine | | +| | ラジアル柱状チャート | カテゴリー化されたデータを共通の中心から異なる角度で伸ばした柱で可視化します。 | radialColumn | | +| | ラジアル円チャート | カテゴリー化されたデータを共通の中心から異なる角度で伸ばしたパイのスライス型要素で可視化します。 | radialPie | | +| 範囲カテゴリ | 範囲エリア チャート | 2 つの値の間の範囲内にある分類されたデータをデータ ポイントを 2 本の直線で結び、間の領域を色づけして可視化します。 | rangeArea | | +| | 範囲柱状チャート | 2 つの値の間の範囲内にある分類されたデータを柱で可視化します。 | rangeColumn | | +| バブル | バブル | 複数のパラメータで記述されたデータを異なる直径の色づけされた円で可視化します。 | bubble | | +| 散布図 | 散布図 | データをデカルト座標系上のドットで可視化します。 | scatter | | +| | 散布図 - 折れ線 | デカルト座標系でデータ ポイントを直線で結んだ線によりデータを可視化します。 | scatterLine | | + + + + +##最低必要条件 + + +### 最低要件の概要 + +`igDataChart` コントロールは jQuery UI ウィジェットの 1 つであるため、jQuery ライブラリと jQuery UI ライブラリに依存します。Modernzr ライブラリは、内部的にブラウザーと装置の機能を検出するためにも使用されています。コントロールは、機能とデータのバインド用の {environment:ProductName}™ の共有リソースのいくつかを使用します。これらのリソースへの参照は、実際の jQuery または {environment:ProductNameMVC} が使用されているとしても必要となります。コントロールが ASP.NET MVC のコンテクスト内で使用されている場合、`Infragistics.Web.Mvc` アセンブリが必要です。 + +### 最低要件の概要表 + +以下の表で、 `igDataChart` コントロールを使用するための要件を簡単に説明します。 + + +| 要件 | 説明 | +| --- | --- | +| HTML5 キャンバス API | チャート用ライブラリの機能は、HTML5 Canvas タグとそれに関する API に基づきます。これらをサポートする Web ブラウザーは、igDataChart コントロールで生成されたチャートを描画し、表示できます。その他の HTML5 機能は、igDataChart コントロールの操作に必要です。[Wikipedia™](http://en.wikipedia.org/wiki/Main_Page) の[キャンバス 要素: サポート](http://en.wikipedia.org/wiki/Canvas_element#Support)のトピックには、HTML5 キャンバス API をサポートしている、最も一般的なデスクトップとモバイル Web ブラウザのバージョンがが詳述されています。 | +| jQuery および jQuery UI JavaScript リソース | environment:ProductName は、これらのフレームワークの最上位にビルドされます。 [jQuery](http://docs.jquery.com/Main_Page) [jQuery UI](http://jqueryui.com/) | +| Modernizr | Modernizr ライブラリはブラウザー機能とデバイス機能を検出するため igDataChart で使用されます。これは必須ではなく、含まれていない場合、コントロールは HTML5 をサポートするブラウザーが動作する通常のデスクトップ環境であるように動作します。 [Modernizr](http://modernizr.com/docs/) | +| 一般のチャート JavaScript リソース | environment:ProductName ライブラリのチャート表示機能は、シリーズ タイプに応じて複数のファイルに渡って配布されます。 手動でリソースを組み込む場合は、以下の表に示す依存関係を使用する必要があります。 JS リソース | +| infragistics.util.js, infragistics.util.jquery.js | environment:ProductName ユーティリティ | +| infragistics.datasource.js | igDataSource コントロール | +| infragistics.ext_core.js, infragistics.ext_collections.js, infragistics.ext_ui.js, infragistics.dv_jquerydom.js, infragistics.dv_core.js, infragistics.dv_geometry.js, infragistics.datachart_core.js | データ可視化コア機能 | +| infragistics.dvcommonwidget.js | チャートおよびマップの共通ウィジェット | +| infragistics.ui.chart.js | チャート UI ウィジェット | +| infragistics.legend.js, infragistics.ui.chartlegend.js | チャート凡例機能および UI ウィジェット | +| infragistics.dv_opd.js | チャートの概要と詳細ペイン機能 | +| infragistics.ui.widget.js | すべての environment:ProductName ウィジェットの基本 igWidget。 | + + </td> +</tr> + + <tr> + <td>チャート タイプ固有の JavaScript リソース</td> + <td>上記の一般的なチャート リソースに加えて、使用しているそれぞれのチャート タイプに関連する参照を組み込む必要があります。 | チャート シリーズの種類 | JS リソース | | --- | --- | | 共有のカテゴリ機能 | infragistics.datachart_categorycore.js | | エリア チャート、棒チャート、柱状チャート、折れ線チャート、スプライン チャートすべて、ウォーターフォール | infragistics.datachart_category.js | | 棒チャート | infragistics.datachart_verticalcategory.js | | Financial、平均値インジケーター | infragistics.datachart_financial.js, infragistics.datachart_extendedfinancial.js | | 極座標エリア チャート、極座標折れ線チャート、極座標チャートすべて | infragistics.datachart_polar.js (依存関係: infragistics.datachart_extendedaxes.js) | | ラジアル チャートすべて | infragistics.datachart_radial.js (依存関係: infragistics.datachart_extendedaxes.js) | | 範囲 チャートすべて | infragistics.datachart_rangecategory.js | | 散布図すべて | infragistics.datachart_scatter.js | | すべての積層型チャート | infragistics.datachart_stacked.js (依存関係: infragistics.datachart_verticalcategory.js, infragistics.datachart_extendedaxes.js) | | ツールチップ、強調表示、注釈 | infragistics.datachart_annotation.js | | DateTimeAxis / TimeAxis | infragistics.datachart_extendedaxes.js |</td> +</tr> + + <tr> + <td>IG テーマ</td> + <td>このテーマには、{environment:ProductName} ライブラリ向けに作成されたカスタム ビジュアル スタイルが含まれます。これは次のファイルに含まれます。
    • {IG CSS root}/themes/Infragistics/infragistics.theme.css
    </td> +</tr> + + <tr> + <td>チャート構造</td> + <td>この CSS リソースは、コントロールのさまざまな要素を描画するためにチャート コンポーネントによって使用されます。
    • {IG CSS root}/structure/modules/infragistics.ui.chart.css
    </td> +</tr> + </tbody> +</table> + + +>**注:** 詳細については、[{environment:ProductName} で JavaScript リソースを使用](/deployment-guide-javascript-resources)トピックをご覧ください。 + + + +##主要機能 + + +### 機能の概要 + +以下の表は、`igDataChart` コントロールの主な機能についてまとめています。追加の詳細は、以下の概要表の下に示します。 + + +| | | +| --- | --- | +| 機能 | 説明 | +| [シリーズ タイプの選択](#supported-chart-types) | チャートは複数の異なるシリーズ タイプを描画し ([複合チャート](#composite-charts)を参照)、シリーズ タイプは各 series オブジェクトの type オプションで決まります。シリーズ タイプに応じて、異なるタイプの x 軸および y 軸を選択する必要があり、異なるデータ バインディング オプションを設定する必要があります。 | +| [複合チャート](#composite-charts) | 複合チャートには、タイプが異なる複数のシリーズ、または範囲が異なる複数の y 軸があります。 | +| [凡例](#legend) | チャートには凡例を構成し、視覚化されたあらゆるデータ シリーズのタイトルを表示できます。 | +| [ナビゲーション](#navigation) | drag-to-zoom、drag-to-pan、概要と詳細ペイン (OPD) パネルなどのインタラクティブ機能により、簡単に詳細情報を拡大し、チャートの異なるエリア間をナビゲートできます。 | +| [軸](#axis-options) | すべての軸で初期の範囲を定義し、後で外部コントロールをユーザー操作することで、実行時に範囲を変更できます。また、構成可能な軸ラベル、軸線、主線および副線、軸のストライプがあります。 | +| [ツールチップ](#tooltips) | ツールチップはチャートの上に浮かぶように表示されます。ツールチップは、ツールチップ内に表示される特定の構造とデータを定義するテンプレートに基づいています。 | +| [十字線](#crosshairs) | 十字線は、チャート上のマウスの動作に合わせて動き、2 本の線が正しい角度で交わることでマウス ポインターの先端の場所を指定します。 | +| [マーカー](#markers) | チャートのデータ ポイントを指定する場合に、さまざまなマーカーを使用できます。これらのマーカーは、三角形、ひし形、四角などタイプもさまざまです。 | +| [トレンドライン](#trend-lines) | 各種データ シリーズでは、示したデータのトレンドラインをコントロールにより計算し、表示できます。トレンドラインでは、既知の数学関数による傾向などを、視覚データで視覚的に特定できます。 | + + +### 凡例 + +凡例は、チャートの各データ シリーズのアイコンとタイトルを表示するビジュアル パネルです。 + +![](../../../images/images/igDataChart_Overview_2.png) + +凡例は `igChartLegend` という {environment:ProductName} ライブラリとは異なるコントロールで実装されており、ページに異なる div 要素が必要です。div 要素は、凡例に含まれるよう各 series オブジェクトで参照されます。`igChartLegend` は、以下で記述するトピックでカバーされる非常にシンプルなコントロールです。 + +### 複合チャート + +チャートは、タイプが異なる複数のシリーズを組み合わせたり、y 軸の範囲が異なるシリーズを持ったりすることができます。つまり、2 つのデータ シリーズは棒チャートや折れ線チャートなど異なるグラフで示すことができたり、値の範囲が異なるデータを同じチャートで示したりすることができます。 + +以下の図は、列と線のカテゴリ シリーズを組み合わせた複合チャートを示し、レグは個々の値を表し、線はこれらの値の合計を示し、その形式はトレンドを思わせます。 + +![](../../../images/images/igDataChart_Overview_3.png) + +### ナビゲーション + +ズーム、パンニング、概要と詳細 (OPD) ウィンドウによりチャートのナビゲーションが可能です。ズームはマウスをスクロールするか、拡大する領域を四角形にドラッグして行います。パンニングは、チャートがズームされているときにマウスをドラッグして行います。 + +OPD ウィンドウは、別のナビゲーション ツールです。ユーザーがチャートがアクティブ ビューのどこにあるのかわかるよう、アクティブ ビューがマークされたチャートを小型化した画像です。 + +![](../../../images/images/igDataChart_Overview_4.png) + +OPD ウィンドウはデフォルトで表示したり、API メソッドで起動して表示するよう構成できます。ズームとパンニングは両方とも、マウス ボタンを押したまま動かすといったドラッグ操作に依存しているため、デフォルトのドラッグ操作や、ドラッグ操作に代わるどの修飾キー (Ctrl、Alt、Shift) を使用するか構成できます。 + +### 軸 + +軸はすべてのチャートの主要機能で、さまざまな設定ができます。あらゆる軸の範囲は API 呼び出しにより定義および変更でき、アクティブ ビューのチャートで表示される値の範囲を定義できます。主な軸線の他に、チャートはキー値のタイトル、主グリッド線および副グリッド線、チャート上のエリアを簡単に区別できる軸のストライプも表示できます。 + +軸の要素は以下の図をご覧ください。 + +![](../../../images/images/igDataChart_Overview_5.png) + +**凡例:** + +1. 軸線 +2. 軸ラベル +3. 副線 +4. 主線 +5. 軸のストライプ + +### ツールチップ + +ツールチップは、現在のマウス位置に表示され、ツールチップ テンプレートで定義済みの情報を表示する小型のパネルです。通常は、チャートの特定のポイントで示された数値や他の関連する情報です。 + +![](../../../images/images/igDataChart_Overview_6.png) + +ツールチップ テンプレートは「`text/x-jquery-tmp`l」型の HTML script タグで定義したり、単に HTML マークアップによる文字列の場合があります。実質的にツールチップは、画面に描画される、パラメーター付きの HTML マークアップを定義します。置き換える値は `${item.Price}` などの jQuery テンプレート構文で定義します。 + +### 十字線 + +十字線は、マウス ポインターをチャートに置いたときに、正しい角度で交わる現在のマウス位置に表示されている 2 本の線です。十字線は、チャート シリーズのデータを関連する軸上の同等の位置と画面上で揃えるのに役立ちます。 + +赤色の両矢印でマークされた十字線ラインは以下の図をご覧ください。 + +![](../../../images/images/igDataChart_Overview_7.png) + +### マーカー + +マーカーは、データ シリーズのデータ ポイントごとに表示される小さな挿絵です。円、三角形、ひし形、ピラミッド、四角、五角形、六角形など多数のマーカー タイプが使用できます。 + +円のマーカーがあるチャート (一部のマーカーは赤の矢印で指定されている) は以下の図をご覧ください。 + +![](../../../images/images/igDataChart_Overview_8.png) + +### 関連トピック: + +- [igDataChart の追加](/igdatachart-adding) + +### トレンドライン + +トレンドラインでは、既知の数学関数による傾向などを、視覚データで視覚的に特定できます。これにより、データの特性を「この系はリニアである」または「この値は指数関数的に増加している」などと特定できます。トレンドラインは通常、財務およびカテゴリのデータ シリーズに適用されます。 + +データが五次関数 (五次の多項式) とどれだけ密接に一致しているかを示す、「quintic fit」型トレンドラインの線のカテゴリ シリーズは、以下の図をご覧ください。 + +![](../../../images/images/igDataChart_Overview_9.png) + + + +##ユーザー相互作用と操作性 + + +###ユーザー インタラクションの概要 + +以下の表で、`igDataChart` コントロールのユーザー相互作用機能を簡単に説明します。Configurable? 列にあるトピックに、さらに詳しい説明があります。 + + +| 目的 | 方法 | 構成方法 | +| --- | --- | --- | +| ズーム | ドラッグ マウス スクロール 二重タップ | ![](../../../images/images/positive.png) | +| パン | ドラッグ Ctrl/Alt/Shift キー + ドラッグ | ![](../../../images/images/positive.png) | +| 移動する | OPD ウィンドウ | ![](../../../images/images/positive.png) | +| ホバー | マウス ホバー | ![](../../../images/images/positive.png) | +| 軸線のオン/オフ | 外部チェック ボックス | ![](../../../images/images/positive.png) | +| 軸の主線および副線のオン/オフ | 外部チェック ボックス | ![](../../../images/images/positive.png) | +| 軸のストライプのオン/オフ | 外部チェック ボックス | ![](../../../images/images/positive.png) | +| 軸ラベルのオン/オフ | 外部チェック ボックス | ![](../../../images/images/positive.png) | +| データ シリーズのオン/オフ | 外部チェック ボックス | ![](../../../images/images/positive.png) | +| 凡例のオン/オフ | 外部チェック ボックス | ![](../../../images/images/positive.png) | +| マーカーのオン/オフ | 外部チェック ボックス | ![](../../../images/images/positive.png) | + + + +##関連コンテンツ + + +### トピック + +このトピックの追加情報については、以下のトピックも合わせてご参照ください。 + +- [igPieChart の概要](/igbulletgraph-overview) + +Web ページに円グラフを表示するための関連 `igPieChart` コントロールに関する基本情報が入っています。 + +- [シリーズ タイプ (igDataChart)](/igdatachart-series-types): このトピックでは、`igDataChart` コントロールにより生成できるあらゆる種類のチャートを表示します。 + +- [構成可能な視覚要素 (igDataChart)](/igdatachart-visual-elements): このトピックでは、`igDataChart` コントロールとそれらを管理するプロパティの構成可能なすべての視覚要素の一覧を示します。 + +- [jQuery および MVC API リファレンス リンク (igDataChart)](/igdatachart-api-links): `igDataChart` の jQuery API リファレンスを参照し、すべての MVC ヘルパー プロパティとコード スニペットを記載したリファレンス テーブルが入っています。 + +- [igDataChart をデータにバインド](/igdatachart-databinding): 各種データ ソースから chart コントロールにデータをバインドする方法を示します。これには、JavaScript 配列、JSON、WCF サービスがあります。どれだけのボリュームのデータを chart コントロールにデータ バインドできるかを示します。 + +- [igDataChart のスタイル設定](/igdatachart-styling-themes): さまざまなスタイルとテーマを chart コントロールに適用する方法と、標準テーマの要素を変更する方法を示します。 + + + +### サンプル + +このトピックについては、以下のサンプルも参照してください。 + + +- [JSON のバインド]({environment:SamplesUrl}/data-chart/json-binding): このサンプルでは、`igDataChart` を JSON データにバインドする方法を示しています。 + +- [棒および柱状シリーズ]({environment:SamplesUrl}/data-chart/bar-and-column-series): `igDataChart` コントロールを使用して棒チャートおよび柱状チャートを実装する方法を紹介します。 + +- [チャート ナビゲーション](/igdatachart-configuring-navigation-features#example): ズーム、パンニング、ドラッグなどチャートに対するユーザー操作、およびこれらを API から制御する方法を紹介します。 + +- [リアルタイムにデータをバインド]({environment:SamplesUrl}/data-chart/binding-real-time-data): リアルタイム データを動的にデータ チャートにバインドする方法を紹介します。 + + + + + + + + diff --git a/docs/jquery/src/content/ja/topics/controls/igdatachart/overview/series-types.mdx b/docs/jquery/src/content/ja/topics/controls/igdatachart/overview/series-types.mdx new file mode 100644 index 0000000000..028c0a931c --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igdatachart/overview/series-types.mdx @@ -0,0 +1,245 @@ +--- +title: "シリーズ タイプ (igDataChart)" +slug: igdatachart-series-types +--- +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# シリーズ タイプ (igDataChart) + + + +##トピックの概要 + + +### 目的 + +このトピックでは、`igDataChart`™ コントロールが生成できるチャート シリーズの種類を概念的に説明します。 + +### 必要な背景 + +このトピックを理解するためには、以下のトピックを理解しておく必要があります。 + + + +- [igDataChart の概要](/igdatachart-overview) + +このトピックでは、`igDataChart` コントロールについての概念情報を提供します。これには、その主な機能、チャートとユーザー機能を使用するための最低要件が含まれます。 + + + +#### このトピックの構成 + +このトピックは、以下のセクションで構成されます。 + +- [チャート シリーズの種類](#chart-series-types) + - [サポートされるチャート タイプの概要](#supported-chart-types) + - [サポートされるチャート タイプの表](#supported-chart-types-table) + - [棒と柱のシリーズ](#bars-and-columns) + - [バブル シリーズ](#bubble) + - [カテゴリー シリーズ](#category-series) + - [財務シリーズ](#financial-series) + - [極座標シリーズ](#polar-series) + - [レーダー シリーズ](#radial-series) + - [範囲カテゴリ シリーズ](#range-series) + - [散布シリーズ](#scatter-series) +- [複合チャート](#composite) +- [関連コンテンツ](#related-content) + - [トピック](#topics) + - [サンプル](#samples) + + + +##チャート シリーズの種類 + + +### サポートされるチャート タイプの概要 + +`igDataChart` コントロールは、さまざまな可視化の目的に対して導入されるいろいろなシリーズ タイプを可能にします。 + +サポートされるシリーズ タイプと基本の構成情報に関する詳細な情報については次のブロックをご覧ください。 + +>**注:** 円グラフは別の `igPieChart` コントロールで作成されます。詳細は [igPieChart の概要](/igbulletgraph-overview)をご覧ください。 + +### サポートされるチャート タイプの表 + + +| チャート タイプ | シリーズ タイプ | 説明 | `Series.type` プロパティの設定 | データ バインディング プロパティ | +| --- | --- | --- | --- | --- | +| [棒と柱状](#bars-and-columns) | 棒 | 分類されたデータを水平の棒で可視化します。 | `bar` | | +| | 柱状 | 分類されたデータを垂直の柱で可視化します。 | `column` | | +| | 積層型棒 | 分類されたデータを水平に積層型のセグメントを含む水平棒で可視化します。 | `stackedBar` | | +| | 積層型 100 棒 | 分類されたデータをパーセント値に正規化される水平に積層型のセグメントを含む水平棒で可視化します。 | `stacked100Bar` | | +| | 積層型柱状 | 分類されたデータを垂直に積層型の柱で可視化します。 | `stackedColumn` | | +| | 積層型 100 柱状 | 分類されたデータをパーセント値に正規化される垂直に積層型の柱で可視化します。 | `stacked100Column` | | +| [バブル](#bubble) | バブル | 複数のパラメータで記述されたデータを異なる直径の色づけされた円で可視化します。 | `bubble` | | +| [カテゴリ](#category-series) | 折れ線 | 分類されたデータをデータ ポイントに鋭い角をもつ線で可視化します。 | `line` | | +| | エリア チャート | 分類されたデータをデータ ポイントに鋭い角をもつ線の下の色づけされた領域で可視化します。 | `area` | | +| | スプライン | 分類されたデータをデータ ポイント上のなめらかな角をもつ線で可視化します。 | `spline` | | +| | スプライン エリア チャート | 分類されたデータをデータ ポイントになめらかな角をもつ線の下の色づけされた領域で可視化します。 | `splineArea` | | +| | ウォーターフォール | 分類されたデータを垂直の柱で可視化し、先頭のカテゴリーに対応する先頭の柱は x 軸から始まり、続くカテゴリーはそれぞれ前のカテゴリーが終わったとこから始まります。 | `waterfall` | | +| | ポイント | 分類されたデータを別々にプロットされるポイント マーカーで可視化します。 | `point` | | +| | 積層型エリア | 分類されたデータをデータ ポイントに鋭い角をもつ線の下の積層型の色づけされた領域で可視化します。 | `stackedArea` | | +| | 積層型折れ線 | 分類されたデータをデータ ポイントに鋭い角をもつ積層型の線で可視化します。 | `stackedLine` | | +| | 積層型スプライン | 分類されたデータをデータ ポイント上のスムーズな角をもつ線で可視化します。 | `stackedSpline` | | +| | 積層型スプライン エリア | 分類されたデータをデータ ポイントにスムーズな角をもつ線の下の積層型の色づけされた領域で可視化します。 | `stacked100Bar` | | +| | 積層型 100 エリア | 分類されたデータを値がパーセンテージに正規化されるデータ ポイントに鋭い角をもつ線の下の積層型の色づけされた領域で可視化します。 | `stacked100Area` | | +| | 積層型 100 折れ線 | 分類されたデータを値がパーセンテージに正規化されるデータ ポイントに鋭い角をもつ積層型の線で可視化します。 | `stacked100Line` | | +| | 積層型 100 スプライン | 分類されたデータを値がパーセンテージに正規化されるデータ ポイントにスムーズな角をもつ積層型の線で可視化します。 | `stacked100Spline` | | +| | 積層型 100 スプライン エリア | 分類されたデータを値がパーセンテージに正規化されるデータ ポイントにスムーズな角をもつ線の下の積層型の色づけされた領域で可視化します。 | `stacked100SplineArea` | | +| [財務](#financial-series) | ロウソク足チャート | ロウソク足の形で財務 (投資) 指標の始値、終値、安値、高値を表示します。 | `candlestick` | | +| | OHLC チャート | Open、High、Low、Close の略開始と終わりの値のマーキングをもつ垂直線の形で財務 (投資) 指標の始値、終値、安値、高値を表示します。 | `ohlc` | | +| [極座標](#polar-series) | 極座標散布図 | 極座標系でドット (またはその他のマーカー) によるデータの可視化を行います。 | `polarScatter` | | +| | 極座標折れ線チャート | 極座標系でデータ ポイントを直線で結んだ線によりデータを可視化します。 | `polarLine` | | +| | 極座標エリア チャート | 極座標系でデータ ポイントを直線で結んだ線の下の色づけされた領域でデータを可視化します。 | `polarArea` | | +| | 極座標スプライン | 極座標系でデータ ポイントの間にベジエ曲線のトランジションを表示するスプラインによりデータを可視化します。 | `polarSpline` | | +| | 極座標スプライン エリア | 極座標系でデータ ポイントの間にベジエ曲線のトランジションを表示するスプラインの下の色づけされた領域によりデータを可視化します。 | `polarSplineArea` | | +| [ラジアル](#radial-series) | ラジアル折れ線チャート | カテゴリー化されたデータをデータ ポイントを直線で結んだ線により可視化し、すべてのカテゴリーを円内に配置します。 | `radialLine` | | +| | ラジアル柱状チャート | カテゴリー化されたデータを共通の中心から異なる角度で伸ばした柱で可視化します。 | `radialColumn` | | +| | ラジアル円チャート | カテゴリー化されたデータを共通の中心から異なる角度で伸ばしたパイのスライス型要素で可視化します。 | `radialPie` | | +| | ラジアル エリア | 分類されたデータをデータ ポイントを直線で結んだ線の下に色付きの領域により可視化し、すべてのカテゴリーを円内に配置します。 | `radialArea` | | +| [範囲カテゴリ](#range-series) | 範囲エリア チャート | 2 つの値の間の範囲内にある分類されたデータをデータ ポイントを 2 本の直線で結び、間の領域を色づけして可視化します。 | `rangeArea` | | +| | 範囲柱状チャート | 2 つの値の間の範囲内にある分類されたデータを柱で可視化します。 | `rangeColumn` | | +| [散布図](#scatter-series) | 散布図 | データをデカルト座標系上のドットで可視化します。 | `scatter` | | +| | 散布図 - 折れ線 | デカルト座標系でデータ ポイントを直線で結んだ線によりデータを可視化します。 | `scatterLine` | | +| | 散布図 - スプライン | デカルト座標系でデータ ポイントの間にベジエ曲線のトランジションを表示するスプラインによりデータを可視化します。 | `scatterSpline` | | +| | 散布エリア | デカルト座標システムの X+Y+Value ポイントの三角測量に基づいて、データを色付きの 2D サーフェスとして視覚化します。 | `scatterArea` | | +| | 散布等高線 | デカルト座標システムの X+Y+Value ポイントの三角測量に基づいて、データを等高線として視覚化します。 | `scatterContour` | | +| | 散布多角形 | デカルト座標システムで、データを多角形のシリーズとして視覚化します。 | `scatterPolygon` | | +| | 散布ポリライン | デカルト座標システムで、データをポリラインのシリーズとして視覚化します。 | `scatterPolyline` | | + + +### 棒と柱のシリーズ + +棒チャートと柱チャートは、可視化される値に大きさが対応する塗りつぶしされた四角形でデータを可視化します。 + +![](../../../images/images/igDataChart_Types_1.png) + +技術的には棒チャートと柱チャートは同じですが、棒チャートは棒が水平に伸び、柱チャートは棒が垂直に伸びます。 + +棒チャートは、離散型のカテゴリー軸値に対して分離されたデータ関数を表示するのに使用されます。たとえば、以下の図は異なる地理的領域 (離散型のカテゴリー軸値) での 3 つのメーカー (個別の関数、つまりメーカー 1 社の販売が関数の領域) の自動車販売数を棒チャートで示したものです。 + +### バブル シリーズ + +バブル チャートは、4 つの独立した数値パラメータをもつデータ要素を塗りつぶされた (通常は) 円で表現します。 + +![](../../../images/images/igDataChart_Types_2.png) + +それぞれの円の座標は各要素の通常の x-y 座標パラメータです。バブルの半径は 3 番目のパラメータを表します。バブルの一部を別の色で塗りつぶすことにより、データをシリーズの 4 番目のパラメータを表すことができます。4 番目のパラメータは必須ではなく、これを使用しない場合はすべてのバブルが同じ色で塗られます。5 つ目のパラメータを追加して、それぞれのデータ ポイントに対するラベルとして使用できます。 + +### カテゴリー シリーズ + +カテゴリー シリーズ チャートは、データの相異なるカテゴリーの軸値をプロットすることができる `igDataChart` コントロールに対する シリーズ タイプの一群です。タイプとしては、領域、柱、線、スプライン、スプライン領域、ステップ領域、ステップ ライン、ウォーターフォールなどがあります。詳細については、カテゴリー シリーズ チャートに関するトピックを参照してください。 + +次に挙げたものはウォーターフォール チャートの例です。 + +![](../../../images/images/igDataChart_Types_7.png) + +### 財務シリーズ + +財務チャート (ロウソク足とも呼ばれます) は、さらに多くの変数を表現することができる棒チャートの変形版です。 + +![](../../../images/images/igDataChart_Types_3.png) + +これは主に、一定期間での特定の商品や為替、株価の始値、終値、安値、高値を表します。各「ローソク」は、特定の時間範囲 (たとえば、日) を表し、ローソクの最下部が安値、最高部が高値で、棒の下部と上部が終値と始値をそれぞれ表します。 + +通常、このチャートはデータ シリーズに何らかの数学的演算を施してデータの近似や推定を計算することで得られるトレンドラインと組み合わされます。たとえば、平均、二次方程式、対数関数などです。 + +### 極座標シリーズ + +極散布図は極座標でプロットされるもので、1 番目の座標は角度 (度、ラジアン) で、2 番目は中心からの距離 (半径) を使って表現されます。このチャートは連結されていない離散型ポイントを表示し、ポイントがチャート上の特定部分に集まった状態の「密度」を調べるのに有効です (たとえば、測定サンプル)。 + +![](../../../images/images/igDataChart_Types_4.png) + +目的に応じて、極線や領域をプロットすることもできます。 + +### レーダー シリーズ + +レーダー図は極散布図と似ていますが、こちらはカテゴリー タイプのシリーズです。つまり、角度座標がない代わりにデータは円全体に均一に拡がるカテゴリーに分割されます。中心からの距離が可視化された値を表現します。 + +![](../../../images/images/igDataChart_Types_5.png) + +これは通常、小さなデータ集合を可視化し、ひとつのオブジェクトに対する複数の側面を量的に比較するのに用いられます。たとえば、敏捷さ、速さ、効果など、スポーツにおける選手の統計情報用に使われます。 + +### 範囲カテゴリ シリーズ + +範囲カテゴリ チャートは、特定のカテゴリに合致する 2 つの値の間での拡がりを示すのに使われます。このチャートをプロットするために使われる変数は、カテゴリー座標で、そのカテゴリーに対する同じ測定単位の 2 つ値です。 + +![](../../../images/images/igDataChart_Types_8.png) + +このチャートは株式市場のトレーダーによって考案されたもので、主にその業界で使われます。具体的な機能としては、このチャートは時間ではなく*動き*を基本としたものです。つまり、カテゴリー (x) 軸の 2 つの異なる値は 2 つの異なる動きを表し、取引間の変化が追跡されます。 + +`igDataChart` を使用して、範囲領域チャートと範囲棒チャートを実現できます。上のサンプル チャートは範囲領域チャートです。 + +### 散布シリーズ + +散布図は直交座標系に個々のポイントを示すもので、XY チャートとも呼ばれます。離散型のポイントをプロットすることも、ポイント間を線でつなぐこともできます。 + +![](../../../images/images/igDataChart_Types_6.png) + +散布図は、2 つの変数が関係する科学的な測定やその他のデータ収集に使われ、測定の特定の分野での標本の密度をわかりやすく示すことができ、データの分布についてトレンドを示すこともできます。 + +`scatterPolygon` および `scatterPolyline` の散布タイプは他のタイプとは異なるデータ表示を使用します。このタイプでは、ポイントのコレクションが 2 次元の図形として描画されます。各ポイントはその図形の 1 つの角または頂点を構成します。たとえば、矩形は各角を表す 4 つのポイントで定義されます。`scatterPolygon` 型は塗りつぶされた図形を表示し、`scatterPolyline` 型はポイント コレクションを各ポイントを接続する線分として表示します。 + +![](../../../images/images/igDataChart_Types_10.png) + +##　複合チャート + + +### 複合チャートの概要 + +複合チャートは、異なる軸範囲を使用するかまたはグラフの 2 つの異なるタイプによって可視化されるかのいずれかによって 2 つのデータ シリーズをプロットします。これはたとえば、1 つの関数が 1 と 100 の間をとり、他方が 5 から 500 までをとる、あるいは対数目盛、または1 つの関数が棒で他方が線で示されるというような形です。 + +このサンプルでは、別の範囲を持つ 2 つの Y 軸と柱状シリーズと折れ線シリーズの 2 つのデータ シリーズ タイプを含む複合チャートを構成する方法を紹介します。 + +複合チャートをつくるための特定の設定はなく、異なるシリーズ タイプと複数の軸を組み合わせます。 + +
    + [複合チャート]({environment:SamplesEmbedUrl}/data-chart/composite-chart) + ![](../../../images/images/igDataChart_Types_9.png) +
    + +##関連コンテンツ + +### トピック + +このトピックの追加情報については、以下のトピックも合わせてご参照ください。 + + +- [igDataChart の追加](/igdatachart-adding): このトピックでは、igDataChart コントロールを Web ページに追加し、データにバインドする方法を紹介します。 + +- [](/igdatachart-api-links)[jQuery および MVC API リファレンス リンク (igDataChart)](/igdatachart-api-links): このトピックでは、 `igDataChart` の jQuery および ASP.NET MVC ヘルパー クラスの API ドキュメントへのリンクを提供します。 + + + +### サンプル + +このトピックについては、以下のサンプルも参照してください。 + + +- [棒および柱状シリーズ]({environment:SamplesUrl}/data-chart/bar-and-column-series): このサンプルは棒シリーズ チャートと柱状シリーズ チャートの作成を例示します。 + +- [カテゴリ シリーズ]({environment:SamplesUrl}/data-chart/category-series): このサンプルはカテゴリー シリーズ チャートの作成を例示します。 + +- [複合チャート]({environment:SamplesUrl}/data-chart/composite-chart): このサンプルは複合チャートの作成を例示します。 + +- [財務シリーズ]({environment:SamplesUrl}/data-chart/financial-series): このサンプルは財務 (「ローソク足」) チャートの作成を例示します。 + +- [極座標シリーズ]({environment:SamplesUrl}/data-chart/polar-series): このサンプルは極座標チャートの作成を例示します。 + +- [ラジアル シリーズ]({environment:SamplesUrl}/data-chart/radial-series): このサンプルはレーダー チャートの作成を例示します。 + +- [範囲カテゴリ シリーズ]({environment:SamplesUrl}/data-chart/range-category-series): このサンプルはカテゴリー チャートの作成を例示します。 + +- [散布図シリーズ]({environment:SamplesUrl}/data-chart/scatter-series): このサンプルは散布部 (XY シリーズ) チャートの作成を例示します。 + +- [積層シリーズ]({environment:SamplesUrl}/data-chart/stacked-series): このサンプルは積層シリーズ チャート (XY チャート) の作成を例示します。 + + + + + + + + + + diff --git a/docs/jquery/src/content/ja/topics/controls/igdatachart/overview/visual-elements.mdx b/docs/jquery/src/content/ja/topics/controls/igdatachart/overview/visual-elements.mdx new file mode 100644 index 0000000000..f65503cfdd --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igdatachart/overview/visual-elements.mdx @@ -0,0 +1,111 @@ +--- +title: "構成可能な視覚要素 (igDataChart)" +slug: igdatachart-visual-elements +--- +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# 構成可能な視覚要素 (igDataChart) + + + +##トピックの概要 + +### 目的 + +このトピックでは、構成可能な `igDataChart`™ コントロールの視覚要素とそれらを管理するプロパティをすべてリストします。 + +### 必要な背景 + +このトピックを理解するためには、以下のトピックを理解しておく必要があります。 + + +- [igDataChart の概要](/igdatachart-overview) + +このトピックでは、`igDataChart` コントロールについての概念情報を提供します。これには、その主な機能、チャートとユーザー機能を使用するための最低要件が含まれます。 + + +`igDataChart` コントロールの構成可能な視覚要素と関連プロパティ + + +### 構成可能な視覚要素の概要 + +次の図は、`igDataChart` コントロールの構成可能な視覚要素を説明したものです。それらを管理するプロパティのリストは、以下の [構成可能な視覚要素と関連プロパティ](#configuring-visual-elements-properties) ブロックにあります。 + +![](../../../images/images/igDataChart_Visual_Elements_1.png) + +**構成可能な視覚要素:** + +1) データ シリーズ + +2) 凡例 + +3) 軸ラベル + +4) 軸線 + +5) 軸の主線 + +6) 軸の副線 + +7) 軸のストライプ + +8) 概要と詳細パネル + +9) 十字線と十字線ポイント + +10) ツールチップ + +### 構成可能な視覚要素および関連プロパティ + +次の表では、`igDataChart` コントロールの視覚要素とそれらを構成するプロパティをマップします。 + + +| 視覚要素 | プロパティ | +| --- | --- | +| データ シリーズ | | +| 凡例 | | +| 軸ラベル | , , , , , , , , | +| 軸線 | | +| 軸の主線 | | +| 軸の副線 | | +| 軸のストライプ | | +| 軸目盛り | , , , | +| 概要と詳細ウィンドウ | | +| 十字線 | , | +| ツールチップ | , | + + +### サンプル + +このサンプルでは、`igDataChart` コントロールのさまざまな要素を構成します。 +軸、ラベル、グリッド線、ストライプ、ズームバー、シリーズ、トレンドライン、インジケーター、十字線などのチャート要素をコントロールに使用し、高度なデータ視覚化を実現します。 + +
    + [チャート要素]({environment:SamplesEmbedUrl}/data-chart/chart-elements) +
    + +以上の設定に追加して、以下のサンプルはチャートのシリーズのデフォルト ツールチップの有効化、および「United States」シリーズにカスタム ツールチップ テンプレートを構成する方法を紹介します。 + +
    + [シリーズのツールチップ]({environment:SamplesEmbedUrl}/data-chart/series-tooltips) +
    + +## 関連コンテンツ + +### トピック + +このトピックの追加情報については、以下のトピックも合わせてご参照ください。 + +- [igDataChart の追加](/igdatachart-adding): このトピックは、`igDataChart`™ コントロールの追加とそれへデータをバインドする方法を説明します。 + +- [](/igdatachart-api-links)[jQuery および MVC API リファレンス リンク (igDataChart)](/igdatachart-api-links): このトピックは、`igDataChart`™ の jQuery および ASP.NET MVC ヘルパー クラスのたえの API マニュアルへのリンクを提供します。 + + + + + + + + + + diff --git a/docs/jquery/src/content/ja/topics/controls/igdatachart/series-requirements.mdx b/docs/jquery/src/content/ja/topics/controls/igdatachart/series-requirements.mdx new file mode 100644 index 0000000000..b672d63cc0 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igdatachart/series-requirements.mdx @@ -0,0 +1,1103 @@ +--- +title: "シリーズ要件" +slug: igdatachart-series-requirements +--- + +# シリーズ要件 + + + +`igDataChart`™ コントロールは、多数のさまざまなシリーズをサポートしており、これらのシリーズの一部はチャート プロット領域に正しく描画するために固有の軸タイプおよびデータ マッピングを必要とします。 + +### 概要 + + +トピックは以下のとおりです。 + +- [カテゴリ シリーズの要件](#category) +- [範囲シリーズの要件](#range) +- [積層シリーズシリーズの要件](#stacked) +- [散布シリーズの要件](#scatter) +- [極座標シリーズおよびラジアル シリーズの要件](#polar-and-radial) +- [財務シリーズの要件](#financial) + +## カテゴリ シリーズの要件 + + +以下の表は `igDataChart` コントロールでカテゴリ シリーズと共に使用できる軸タイプを示します。この表は、これらのシリーズによって必要とされるデータ メンバーも示します。 + +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    軸型シリーズ プロパティ
    シリーズ タイプnumericXnumericYcategoryXcategoryYtimeordinalTimeXpercentChangeYvalueMemberPath
    エリアXXXXXX
    棒XXX
    柱状XXXXXX
    折れ線XXXXXX
    ポイントXXXXXX
    スプラインXXXXXX
    スプライン エリアXXXXXX
    ステップ エリアXXXXXX
    ステップ折れ線XXXXXX
    ウォーターフォールXXXXXX
    +
    + +## 範囲シリーズの要件 + +以下の表は `igDataChart` コントロールで範囲シリーズで使用できる軸タイプを示します。この表は、これらのシリーズによって必要とされるデータ メンバーも示します。 + +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    軸型MemberPath プロパティ
    シリーズ タイプnumericYcategoryXtimeordinalTimeXpercentChangeYhighlow
    rangeAreaXXXXXXX
    rangeColumnXXXXXXX
    +
    + +## 積層シリーズの要件 + +以下の表は `igDataChart` コントロールで積層シリーズで使用できる軸タイプを示します。この表は、これらのシリーズによって必要とされるデータ メンバーも示します。 + +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    軸型MemberPath プロパティ
    シリーズ タイプnumericXnumericYcategoryXcategoryYtimevalue
    stackedAreaXXXX
    stackedBarXXX
    stackedColumnXXXX
    stackedLineXXXX
    stackedSplineXXXX
    stackedSplineAreaXXXX
    stacked100AreaXXX
    stacked100BarXXX
    stacked100ColumnXXXX
    stacked100LineXXXX
    stacked100SplineXXXX
    stacked100SplineAreaXXXX
    +
    + + +## 散布シリーズの要件 + +以下の表は `igDataChart` コントロールで散布シリーズと共に使用できる軸タイプを示します。この表は、これらのシリーズによって必要とされるデータ メンバーも示します。 + +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    軸型MemberPath プロパティ
    シリーズ タイプnumericYnumericXpercentChangeYxyradiusfillvalueshape
    scatterPointXXXXX
    scatterLineXXXXX
    scatterSplineXXXXX
    scatterBubbleXXXXXXX\*
    scatterHDXXXX
    scatterAreaXXXXX
    scatterContourXXXXX
    scatterPolygonXXX
    scatterPolylineXXX
    +
    + +## 極座標シリーズおよびラジアル シリーズの要件 + +以下の表は `igDataChart` コントロールで極座標シリーズおよびラジアル シリーズと共に使用できる軸タイプを示します。この表は、これらのシリーズによって必要とされるデータ メンバーも示します。 + +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    軸型MemberPath プロパティ
    シリーズ タイプnumericRadiusnumericAnglecategoryAnglevalueangleradius
    polarAreaXXXX
    polarLineXXXX
    polarScatterXXXX
    polarSplineAreaXXXX
    polarSplineXXXX
    radialAreaXXX
    radialColumnXXX
    radialLineXXX
    radialPieXXX
    +
    + +## 財務シリーズの要件 + +以下の表は `igDataChart` コントロールで財務物価シリーズおよび財務インジケーターと共に使用できる軸タイプを示します。この表は、これらのシリーズによって必要とされるデータ メンバーも示します。 + +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    軸型MemberPath プロパティ
    シリーズ タイプnumericYcategoryXtimeordinalTimeXpercentChangeYhighlowopenclosevolume
    FinancialPriceXXXXXXXXX
    AbsoluteVolumeOscillatorIndicatorXXXXXX
    AccumulationDistributionIndicatorXXXXXXXXX
    AverageDirectionalIndexIndicatorXXXXXXXXXX
    AverageTrueRangeIndicatorXXXXXXXX
    BollingerBandsOverlayXXXXXXXX
    BollingerBandWidthIndicatorXXXXXXXX
    ChaikinOscillatorIndicatorXXXXXXXXX
    ChaikinVolatilityIndicatorXXXXXXX
    CommodityChannelIndexIndicatorXXXXXXXX
    DetrendedPriceOscillatorIndicatorXXXXXX
    EaseOfMovementIndicatorXXXXXXXX
    FastStochasticOscillatorIndicatorXXXXXXXX
    ForceIndexIndicatorXXXXXXX
    FullStochasticOscillatorIndicatorXXXXXXXX
    MarkerFacilitationIndexIndicatorXXXXXXXX
    MassIndexIndicatorXXXXXXX
    MedianPriceIndicatorXXXXXXX
    MoneyFlowIndexIndicatorXXXXXXXXX
    MovingAverageConvergenceDivergenceIndicatorXXXXXXXX
    NegativeVolumeIndexIndicatorXXXXXXXXX
    OnBalanceVolumeIndicatorXXXXXXX
    PercentagePriceOscillatorIndicatorXXXXXXXX
    PercentageVolumeOscillatorIndicatorXXXXXX
    PositiveVolumeIndexIndicatorXXXXXXX
    PriceVolumeTrendIndicatorXXXXXXX
    PriceChannelOverlayXXXXXXX
    RateOfChangeAndMomentumIndicatorXXXXXX
    RelativeStrengthIndexIndicatorXXXXXX
    SlowStochasticOscillatorIndicatorXXXXXXXX
    StandardDeviationIndicatorXXXXXXXX
    StochRSIIndicatorXXXXXX
    TRIXIndicatorXXXXXX
    TypicalPriceIndicatorXXXXXXXX
    UltimateOscillatorIndicatorXXXXXXXX
    WeightedCloseIndicatorXXXXXXXX
    WilliamsPercentRIndicatorXXXXXXXX
    +
    \ No newline at end of file diff --git a/docs/jquery/src/content/ja/topics/controls/igdatachart/styling/styling-the-chart-series.mdx b/docs/jquery/src/content/ja/topics/controls/igdatachart/styling/styling-the-chart-series.mdx new file mode 100644 index 0000000000..f8331c896a --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igdatachart/styling/styling-the-chart-series.mdx @@ -0,0 +1,245 @@ +--- +title: "チャート シリーズのスタイル設定 (igDataChart)" +slug: igdatachart-styling-the-chart-series +--- + +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# チャート シリーズのスタイル設定 (igDataChart) + + + +##トピックの概要 + +### 目的 + +このトピックは、`igDataChart`™ コントロールのシリーズのスタイル設定方法の概要について紹介し、例として影付きの効果をシリーズに適用する方法を紹介します。 + +### 前提条件 + +このトピックを理解するために、以下のトピックを参照することをお勧めします。 + + +- [igDataChart の追加](/igdatachart-adding) + +このトピックでは、`igDataChart` コントロールをページに追加し、データにバインドする方法を紹介します。 + + + +### このトピックの内容 + +このトピックは、以下のセクションで構成されます。 + +- [概要](#introduction) +- [線状グラデーション色を適用したチャート シリーズのスタイル設定](#linear-gradient) +- [影付きの効果を適用したチャート シリーズのスタイル設定](#drop-shadow-effect) + - [影付き効果の構成の概要](#drop-shadow-effect-config) + - [影のタイプ](#shadow-types) + - [影付き効果の構成の概要表](#drop-shadow-effect-chart) + - [プロパティ設定](#property-settings) + - [例 - モノリス シャドウによる影付き効果](#example) + - [例 - コンパウンド シャドウによる影付き効果](#example-drop-shadow-effect) +- [関連コンテンツ](#related-content) + - [トピック](#topics) + + + +## 概要 + + +### チャート シリーズのスタイル設定の概要 + +igDataChart のシリーズは、複数の要素でスタイル設定できますが、異なるフィールとアウトライン ブラシをシリーズに適用することが重要な点です。これはシリーズの と プロパティで処理されます。シリーズのルック アンド フィールのその他の要素、たとえばアウトラインの太さやシリーズの不透明度なども、シリーズの および のプロパティで構成できます。 + +上記で説明するスタイル設定の制御に加え、 プロパティでも[影付き効果をチャート シリーズに適用できます](#drop-shadow-effect)。 + +## 線状グラデーション色を適用したチャート シリーズのスタイル設定 + または の型を `"linearGradient"` に設定し、色およびオフセットを持つ 2 つ以上の `colorStops` の配列を提供すると、線状グラデーションが適用されます。 + +以下のサンプルは、線状グラデーションを設定するチャート構成を定義します。 + +
    + [チャート塗りつぶしのグラデーション]({environment:SamplesEmbedUrl}/data-chart/chart-fill-gradients) +
    + +##影付きの効果を適用したチャート シリーズのスタイル設定 + +### 影付き効果の構成の概要 + +影付き効果により、シリーズはあたかも3Dのように見えます。 + +
    + [ドロップ シャドウ]({environment:SamplesEmbedUrl}/data-chart/drop-shadows) + ![](../../../images/images/igDataChart_Styling_the_Chart_Series_1.png) +
    + +シリーズの プロパティを "true" に設定すると、シリーズに影付き効果が適用されます。[構成可能な影のタイプ](#shadow-types)の場合、効果のカスタマイズとして、ぼかしの半径、色、方向、および不透明度が[series](/igdatachart-series-types) の影に関連するプロパティでサポートされています (詳細は[影付き効果の構成の概要表](#drop-shadow-effect-chart)、[プロパティの設定](#property-settings)およびコード例を参照してください)。 + +### 影のタイプ + +2 種類の影が影付き効果で使用できます。シリーズの影が、塗りつぶし図形やアウトライン図形の個別の影、または単独のモノリス シャドウかにより使用するタイプが決定されます。 + +- モノリス シャドウ - シリーズで表示される影は 1 種類のみ。 +- コンパウンド シャドウ - シリーズの塗りつぶし部分およびアウトライン部分で個別の影。 + +影のタイプのデフォルトはモノリスです。コンパウンド タイプを使用するメリットは、影付き効果の表示を微調整できる点です。 + +>**注:** 現在、コンパウンド シャドウにのみ [blur](#blur) が適用できます。制限についての詳細は、[注意事項](#GoogleBug)を参照してください。 + +影のタイプは、 プロパティで制御されます。このプロパティを *"true"* (既定) に設定するとモノリス シャドウが適用され、"false" に設定するとコンパウンド シャドウが適用されます。 + +### 影付き効果の構成の概要表 + +以下の表で、チャートの影付き効果で構成できる要素を簡単に説明し、構成に使用するプロパティにマップします。既定の影付き効果のスタイル設定は、シリーズのタイプによって異なります。表の後に、影のタイプの設定について、詳細や例が記載されています。 + + +| 構成可能な項目 | 詳細 | プロパティ | +| --- | --- | --- | +| 構成可能な影のタイプ | 各シリーズに対し個別に影を構成 (スタイル設定) する、またはシリーズ全体を 1 つの表示にするのいずれかを指定します。 | | +| 方向とオフセット | 投影する方向。シリーズの境界線四角形の左上端を基点に X/Y オフセット座標で指定した水平および垂直のオフセットです。 | , | +| 色と不透明度 | 影の色。半透明が指定されている場合は、半透明な影を描画します。 | | +| ぼかし | 影の縁の定義レベル (シャープとぼかし) です。ぼかしのレベルは、等高線の広がりやフェード アウトの全体のピクセル数で定義されます。値が大きいと、影のぼかしが強くなります。 | | + + + + +### プロパティ設定 + +以下の表は、影付き効果の各プロパティ設定で構成できる項目を示しています。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    構成の目的:使用するプロパティ:設定の選択肢:
    使用される影付き効果\*“true”\*
    影のタイプ“true” or “false”
    影の色や不透明度任意の HTML カラー名、HEX カラー コードまたは RGBA カラー定義
    方向とオフセットシリーズ表示の影の水平オフセットピクセルで指定したオフセットを表す double 値
    シリーズ表示の影の垂直オフセットピクセルで指定したオフセットを表す double 値
    ぼかしのレベルぼかしのレベルを表す、任意のピクセルの double 値。値が大きいと、影のぼかしが強くなります。
    \*\*注:\*\* モノリス シャドウには、ぼかし効果は適用できません。 \*\*useSingleShadow\*\* プロパティが "true" に設定されている場合、shadowBlur 設定は無視され、影にぼかしが適用されることはありません。これは、[Google® Chrome™ のバグ](https://code.google.com/p/chromium/issues/detail?id=100703)に対応するための制限です。すべての主要なブラウザーで同じ動作効果を保証することが目的です。上記の Chrome のバグが解消され次第、この効果はアップデートの対象となる予定です。 それまでは、影をぼかす必要がある場合、コンパウンド シャドウを使用してください (useSingleShadow:"true")。
    + +### 例 - モノリス シャドウによる影付き効果 + +この例は、[モノリス](#shadow-types)の影付きを適用しスタイル設定する方法を示します。 プロパティは デフォルトで"true" に設定されているため、明示的なコード設定は必要ありません。 + +以下のスクリーンショットは、以下の影の設定の結果、`igDataChart` コントロールの折れ線シリーズの外観がどのようになるか示しています。 + +プロパティ | 値 +---|--- + | true + | 20 + | "darkBlue" + | 10 + | -15 + + +![](../../../images/images/igDataChart_Styling_the_Chart_Series_2.png) + +以下のコードはこの例を実装します。 + +**JavaScript の場合:** + +```js +series: [ + { + type: "column", + isDropShadowEnabled: true, + shadowBlur: 20, + shadowColor: "darkBlue", + shadowOffsetX: 10, + shadowOffsetY: -15 + } +``` + +### 例 - コンパウンド シャドウによる影付き効果 + +この例は、[コンパウンド](#shadow-types)の影付きにぼかしを適用する方法を示します。 + +以下のスクリーンショットは、以下の影の設定の結果、`igDataChart` コントロールの柱状シリーズの外観がどのようになるか示しています。 + +プロパティ | 値 +---|--- + | true + | false + | 20 + | “darkBlue” + | 10 + | -15 + + + +![](../../../images/images/igDataChart_Styling_the_Chart_Series_3.png) + +以下のコードはこの例を実装します。 + +**JavaScript の場合:** + +```js +series: [ + { + type: "column", + isDropShadowEnabled: true, + useSingleShadow: false, + shadowBlur: 20, + shadowColor: "darkBlue", + shadowOffsetX: 10, + shadowOffsetY: -15, + } +``` + + + +##関連コンテンツ + + +### トピック + +このトピックの追加情報については、以下のトピックも合わせてご参照ください。 + + +- [igDataChart のスタイル設定](/igdatachart-styling-themes): このトピックは、`igDataChart` コントロールにスタイルおよびテーマを適用する方法を紹介します。 + +- [{environment:ProductName} のスタイル設定とテーマ設定](/deployment-guide-styling-and-theming): {environment:ProductName}™ ライブラリのスタイルとテーマの更新に関する概要とその手順を説明します。 + + + + + + + + + + + diff --git a/docs/jquery/src/content/ja/topics/controls/igdatachart/styling/styling-themes.mdx b/docs/jquery/src/content/ja/topics/controls/igdatachart/styling/styling-themes.mdx new file mode 100644 index 0000000000..964806d593 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igdatachart/styling/styling-themes.mdx @@ -0,0 +1,368 @@ +--- +title: "igDataChart のスタイル設定" +slug: igdatachart-styling-themes +--- + +# igDataChart のスタイル設定 + + + +##トピックの概要 + + +### 目的 + +このトピックは、`igDataChart`™ コントロールにスタイルおよびテーマを適用する方法を紹介します。 + +### 必要な背景 + +**概念** + +- カスケード スタイル シート +- リンクされた CCS ファイルの変更によるテーマの適用 + +**トピック** + +- [{environment:ProductName} のスタイル設定とテーマ設定](/deployment-guide-styling-and-theming): {environment:ProductName}™ ライブラリのスタイルとテーマの更新に関する概要とその手順を説明します。 + +**外部リソース** + + +- [jQuery UI](http://jqueryui.com/): jQuery UI ライブラリの概要 + +- [jQuery UI のテーマ設定](http://docs.jquery.com/UI/Theming): jQuery UI ライブラリでのテーマの使用に関する情報を提供します。 + +- [jQuery UI CSS Framework](http://docs.jquery.com/UI/Theming/API): jQuery UI Styling Framework に関する情報を提供します。 + +### このトピックの構成 + +このトピックは、以下のセクションで構成されます。 + +- [概要](#topic-introduction) +- [テーマの概要](#themes-summary) +- [必要なカスケード スタイル シート (CSS)](#required-css) + - [必要な CSS の概要](#required-css-summary) + - [必要な CSS コード: HTML](#required-css-html) + - [必要な CSS コード: ASPX](#required-css-aspx) +- [チャート スタイル参照](#chart-style-reference) +- [igDataChart スタイル設定オプション](#igDataChart-styling-options) + - [概要](#style-options-introduction) + - [igDataChart プロパティの構成可能なスタイル設定項目](#igDataChart-property-config) +- [テーマを使用したチャート固有の視覚要素の変更](#modify-chart-specific) + - [概要](#modify-chart-introduction) + - [プレビュー](#preview) + - [概要](#overview) + - [手順](#steps) +- [関連コンテンツ](#related-content) + - [トピック](#topics) + - [リソース](#resources) + + + +##概要 + + +### テーマの紹介 + +`igDataChart` は、スタイルおよびテーマを適用するために jQuery UI CSS Framework を使用します。デフォルトでは、`igDataChart` は、アプリケーションで使用するためインフラジスティックスにより提供される jQuery UI テーマである、IG テーマを使用します。さらに、IG テーマにはその他のチャート固有のスタイルがいくつかあります。つまり、チャートの外観をカスタマイズするには、一般的な jQuery UI テーマでは十分ではありません。データ シリーズや軸などチャート固有の要素を変更するその他の style クラスを提供する必要があります。 + +テーマのカスタマイズには、ThemeRoller ツールを使用できます。この jQuery UI ツールにより jQuery UI ウィジェットと互換性のあるカスタム テーマを簡単に作成できるようになります。数々のビルド済みテーマをご自分の Web サイトにダウンロードして使用できます。`igDataChart` コントロールは ThemeRoller のテーマの使用に対応しています。 + +{environment:ProductName} ライブラリでテーマを使用する方法の詳細については、「[{environment:ProductName} のスタイル設定とテーマ設定](/deployment-guide-styling-and-theming)」トピックをご覧ください。 + +注: {environment:ProductName} のベース テーマはチャートには不要で、チャートのみ表示されたページでは省略できます。 + + + +##テーマの概要 + +`igDataChart` コントロールで使用できるテーマの概要です。 + + + + + + + + + + + + + + + + + + + + +
    テーマ説明
    IG テーマ

    パス: `{IG CSS root}/themes/Infragistics/`

    ファイル: `infragistics.theme.css`

    		このテーマは、すべての {environment:ProductName} コントロールの一般的なビジュアル機能を定義します。IG テーマの使用方法の詳細については、「{environment:ProductName} のスタイル設定とテーマ設定」トピックをご覧ください。
    チャート構造

    パス: `{IG CSS root}/structure/modules/`

    ファイル: `infragistics.ui.chart.css`

    		このテーマは、チャートに固有の視覚要素を定義します。
    + +##必要なカスケード スタイル シート (CSS) + +###必要な CSS の概要 + +チャートを正しく描画するためには以下の CSSリソースが必要です。 + +- `infragistics.theme.css` - IG テーマが含まれています。 +- `infragistics.ui.chart.css` - チャート構造が含まれています。 + +以下のコード スニペットでは、CSS リソースが Web サイトまたはアプリケーション ルート下の `Content/ig` フォルダーに保存されていることを前提としています。 + +>**注:** 以下のブロックは、手動で必要な CSS ファイルを組み込む場合の情報を提供しています。ただし、Infragistics Loader コントロールを使用してこれらのファイルをページに読み込むことをお勧めします。 + +###必要な CSS コード: HTML + +**HTML の場合:** + +```html + + +``` + +###必要な CSS コード: ASPX + +**ASPX の場合:** + +```csharp + + +``` + + + +##チャート スタイル参照 + + +###スタイル リファレンスの概要 + +`igDataChart` のスタイルの目的と機能の概要です。 + + +| | | +| --- | --- | +| プロパティ | 説明 | +| .ui-chart-palette-1 ~ .ui-chart-palette-N | データ シリーズ 1 の境界線と背景の色をデータ シリーズ N に設定します。アプリケーションで必要なだけ ui-chart-palette クラスを持つことができます。 | +| .ui-chart-axis | チャート軸の境界線と背景の色を設定します。 | +| .ui-chart-legend-items-list | チャートの凡例のすべてのスタイル設定オプションを設定します。 | +| .ui-chart-legend-item-text | 凡例項目のテキストのすべてのスタイル設定オプションを設定します。 | +| .ui-chart-legend-item-badge | 凡例項目のアイコンのすべてのスタイル設定オプションを設定します。 | +| .ui-chart-tooltip | チャートのツールチップのすべてのスタイル設定オプションを設定します。 | + + + + +>**注:** すべての style クラスで、境界線の色設定は対応する要素のアウトラインを決定し、背景色の設定は要素の背景または塗りつぶしの色を決定します。 + + + +##igDataChart スタイル設定オプション + + +###概要 + +`igDataChart` コントロールはビジュアル コンテンツ用で、チャートのレイアウトおよび色を変更するための多数のプロパティおよびスタイル設定オプションがあります。CSS で、以下を定義できます。 + +- データ シリーズの色、 +- トレンドラインの色、 +- 凡例リスト項目、テキスト、およびアイコン両方の色、および +- ツールチップのフォーマット用の色、網掛け、フォント、その他の CSS プロパティ。 + +個々のチャート コントロール オプションで、以下を定義できます。 + +- マーカーの色と形状、 +- 軸ストローク、主ストロークおよび副ストロークの色と太さ、および +- データ シリーズおよびトレンドラインの色。 + +設定されたチャート オプションは CSS ファイルで定義された style クラスより優先されます。これらのプロパティによりは、実行時にチャートの外観をプログラム的に変更できます。 + +###igDataChart プロパティの構成可能なスタイル設定項目 + +`igDataChart` コントロールのプロパティの構成可能なスタイル設定項目と、それらを管理する該当プロパティをマップします。 + + +| | | +| --- | --- | +| 構成可能な項目 | プロパティ | +| key という名前の軸の主軸線の色。 | axes[“key”].stroke | +| key という名前の主ストロークの色。 | axes[“key”].majorStroke | +| key という名前の副ストロークの色。 | axes[“key”].minorStroke | +| key という名前のデータ シリーズの負の値の色。 | series[“key”].negativeBrush | +| key という名前のデータ シリーズの色。 | series[“key”].brush | +| key という名前のデータ シリーズのマーカーの色。 | series[“key”].markerBrush | +| key という名前のデータ シリーズのアウトラインの色。 | series[“key”].markerOutline | +| key という名前のデータ シリーズのトレンドラインの色。 | series[“key”].trendLineBrush | +| データ シリーズの色のリスト | brushes | +| マーカー アウトラインの色のリスト | markerOutlines | +| マーカーの色のリスト | markerBrushes | +| key という名前の軸の主軸線の太さ。 | axes[“key”].strokeThickness | +| key という名前の軸の主ストロークの太さ。 | axes[“key”].majorStrokeThickness | +| key という名前の軸の副ストロークの太さ。 | axes[“key”].minorStrokeThickness | +| key という名前のデータ シリーズのトレンドラインの太さ。 | series[“key”].trendLineThickness | + + + +##テーマを使用したチャート固有の視覚要素の変更 + + +###概要 + +`infragistics.ui.chart.css` チャート固有スタイルを変更することで `igDataChart` コントロールのさまざまな視覚要素のデフォルト設定を変更する方法を説明します。 + +この例ではチャートの作成手順を説明していないため、チャートのある既存のページをご覧ください。例では、チャート スタイルを変更する方法を示します。 + +この例では、データ シリーズの色を変更しています。 + +###プレビュー + +以下のスクリーンショットは、サンプル チャートのデフォルトおよび更新されたビューを示しています。 + +デフォルトのチャート カラー|更新されたチャート カラー +---|--- +![](../../../images/images/Using_Themes_with_igDataChart_1.png)|![](../../../images/images/Using_Themes_with_igDataChart_2.png) + + + +###前提条件 + +この手順を実行するには、以下のリソースが必要です。 + +- 既存の `igDataChart` コントロールがある HTML5 Web ページ + +###概要 + +プロセスの高度な概要は以下の通りです。 + +1. [デフォルト チャート CSS ファイルをコピーする](#copy-default-css) +2. [チャートの視覚要素のスタイルを変更する](#modify-sryles) +3. [デフォルト チャート CSS ファイルから変更されたファイルへのリンクを変更する](#change-css-links) +4. [結果を確認します。](#final-result) + +###手順 + +デフォルト IG Chart スタイルを好みの設定で変更する方法を紹介します。 + +1. デフォルト チャート CSS ファイルをコピーする + + **チャート スタイルがデフォルトの CSS ファイル (`infragistics.ui.chart.css`) を {environment:ProductName} インストール フォルダーから Web サイトまたはアプリケーションの themes フォルダーにコピーします。** + + たとえば、アプリケーションで使用する CSS ファイルを保存している Web サイトまたはアプリケーションに `Content/themes` フォルダーがある場合、上記のデフォルト チャート CSS ファイルを `Content/themes/MyChartTheme/ig.ui.chart.custom.css` にコピーします。 + +2. チャートの視覚要素のスタイルを変更します + + CSS ファイルのコピーを開き、目的の変更をスタイルに行います。(個々の `igDataChart` スタイルの詳細については、[チャート スタイル参照](#chart-style-reference)のセクションを参照してください。) + + **CSS の場合:** + +```css + .ui-chart-palette-1 + { + border-color: rgb(35, 128, 168); + border-color: rgba(35, 128, 168, .8); + background-color: rgb(68, 172, 214); + background-color: rgba(68, 172, 214, .8); + } + .ui-chart-palette-2 + { + border-color: rgb(51, 51, 51); + border-color: rgba(51, 51, 51, .8); + background-color: rgb(73, 73, 73); + background-color: rgba(73, 73, 73, .8); + } + .ui-chart-palette-3 + { + border-color: rgb(128, 128, 128); + border-color: rgba(128, 128, 128, .8); + background-color: rgb(168, 168, 168); + background-color: rgba(168, 168, 168, .8); + } + .ui-chart-palette-4 + { + border-color: rgb(24, 81, 112); + border-color: rgba(24, 81, 112, .8); + background-color: rgb(33, 110, 153); + background-color: rgba(33, 110, 153, .8); + } + .ui-chart-palette-5 + { + border-color: rgb(135, 153, 34); + border-color: rgba(135, 153, 34, .8); + background-color: rgb(164, 186, 41); + background-color: rgba(164, 186, 41, .8); + } + .ui-chart-axis + { + border-color: #989EA3; + background-color: #989EA3; + } + .ui-chart-legend-items-list + { + padding: 10; + margin: 5px; + } + .ui-chart-legend-item-text + { + vertical-align: text-bottom; + } + .ui-chart-legend-item-badge + { + vertical-align: baseline; + } + .ui-chart-tooltip + { + -moz-box-shadow: 5px 5px rgba(0,0,0,0.5); + -webkit-box-shadow: 5px 5px rgba(0,0,0,0.5); + box-shadow: 5px 5px rgba(0,0,0,0.5); + } +``` + +3. デフォルト チャート CSS ファイルから変更されたファイルへのリンクを変更する + + デフォルト チャート CSS ファイルへのリンクを更新し、前のステップで変更された CSS ファイルをポイントします。 + + **HTML の場合:** + +```html + +``` + + **ASPX の場合:** + +```csharp + +``` + +4. 結果を検証します。 + + チャートの色とスタイルが変更されたことを確認するには、Web ページを保存し、ブラウザーで開きます。 + + +##関連コンテンツ + +###トピック + +このトピックの追加情報については、以下のトピックも合わせてご参照ください。 + + +- [igDataChart の概要](/igdatachart-overview): `igDataChart` コントロールについての概念情報を提供します。これには、その主な機能、チャートとユーザー機能を使用するための最低要件が含まれます。 + +- [igDataChart の追加](/igdatachart-adding): `igDataChart` をコントロールを作成して、データにバインドする方法を紹介します。 + +###リソース + +以下のサード パーティ資料には、このトピックに関連する追加情報を記載しています。 + +- [jQuery Themeroller](http://jqueryui.com/themeroller/): プレビューとダウンロードのため jQuery UI テーマを提供します。 + +- [チャート シリーズのスタイル設定 (igDataChart)](/igdatachart-styling-the-chart-series): このトピックは、`igDataChart`™ コントロールのシリーズのスタイル設定方法の概要について紹介し、例として影付きの効果をシリーズに適用する方法を紹介します。 + + + + + + + + + + diff --git a/docs/jquery/src/content/ja/topics/controls/igdialog/accessibility-compliance.mdx b/docs/jquery/src/content/ja/topics/controls/igdialog/accessibility-compliance.mdx new file mode 100644 index 0000000000..4f1e49ccd6 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igdialog/accessibility-compliance.mdx @@ -0,0 +1,64 @@ +--- +title: "アクセシビリティ準拠 (igDialog)" +slug: igdialog-accessibility-compliance +--- + +# アクセシビリティ準拠 (igDialog) + +### 目的 + +このトピックでは、`igDialog`™ のアクセシビリティ機能について説明し、ダイアログ ウィンドウを含むページのアクセシビリティ準拠の実現方法に関する情報を提供します。 + +### 前提条件 + +このトピックを理解するためには、以下のトピックを理解しておく必要があります。 + +- [**アクセシビリティ準拠のリファレンス**](#accessibility-compliance) + - [概要](#accessibility-compliance-intro) + - [アクセシビリティ準拠のリファレンスの概要](#accessibility-compliance-summary) +- [**関連コンテンツ**](#related-content) + - [トピック](#topics) + + + +## アクセシビリティ準拠のリファレンス + +### 概要 + +すべての {environment:ProductName}™ コントロールおよびコンポーネントは、1973 年リハビリテーション法第 508 条第 1194 部 22 条を遵守しています。表 1 には、コントロールに関連する第 1194 部 22 条の特定の規則が記載されています。また、グリッド コントロールが各規則をどのように順守しているかに関する詳細情報も示されています。 + +各アクセシビリティ規則の要件を満たすために、場合によっては、コントロールを操作して特定のプロパティを設定する必要がありますが、それ以外の場合は、コントロール自身がこの作業を行います。 + +> **注:** jQuery コントロールはクライアント専用のため、一部の規則はサポートされておらず、制限として記されています。 + +### アクセシビリティ準拠のリファレンスの概要 + +以下の表は、igDialog のアクセシビリティ順守機能についてまとめたものです。 + +規則|規則内容|準拠方法 +---------| -----------| ---------- +(c)|色によって伝達されるすべての情報が色を使用しなくても理解できるように (たとえば、コンテキストやマークアップ) Web ページを設計するものとします。|クライアント側イベントを使用すると、現在の状態を反映する任意のコントロールの DOM 要素の属性をユーザーは変更できます。 +(d)*|関連付けられたスタイル シートがなくても読めるようにドキュメントを構成するものとします。|コントロールのマークアップは、クライアント側コントロールであり CSS のルールに依存するため関連づけられるスタイル シートなしでは読み取ることはできません。 +(l)|ページがスクリプト言語を利用してコンテンツを表示、またはインターフェイス要素を作成する場合、スクリプトによって提供される情報は、支援技術で読み取ることのできる機能テキストで識別するものとします。|コントロールのスクリプトがページ マークアップを変更している場合、規則 (c) で説明されている属性のために、新しく作成されたコンテンツはスクリーン リーダーに準拠します。 + + +\* - コントロールの制限 + +## 関連コンテンツ + +### トピック + +このトピックの追加情報については、以下のトピックも合わせてご参照ください。 + +- [アクセシビリティ準拠](/accessibility-compliance): すべての {environment:ProductName} コントロールのアクセシビリティ準拠のための参照情報を提供します。 +- [***igDialog* の概要**](./00_igDialog Overview.mdx): このトピックでは、`igDialog` コントロールの主な機能を紹介します。 + + + + + + + + + + diff --git a/docs/jquery/src/content/ja/topics/controls/igdialog/adding-igdialog.mdx b/docs/jquery/src/content/ja/topics/controls/igdialog/adding-igdialog.mdx new file mode 100644 index 0000000000..e9f6c61f44 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igdialog/adding-igdialog.mdx @@ -0,0 +1,208 @@ +--- +title: "igDialog の追加" +slug: adding-igdialog +--- + +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# igDialog の追加 + +## 概要 + +ここでは、`igDialog` コントロールを Web ページに追加する手順について説明します。`igDialog` では、[最小化]、[最大化]、[ピン固定]、[閉じる] ボタンなど、ヘッダーのボタンがすべて有効になるように構成されています。 + +コントロールのインスタンスを作成する方法はいくつかかあります。このトピックでは、一般的な jQuery UI メソッドの作成方法、(属性を使用することによる) jQuery モバイル メソッドの作成方法、および {environment:ProductNameMVC} ダイアログを使用したコントロール インスタンスの作成方法を示します。 + +### プレビュー + +次のスクリーンショットは最終結果のプレビューです。 + +![](../../images/images/03_Adding_igDialog_1.png) + +## 手順 + +ここでは、`igDialog` コントロールを Web ページに追加する手順について説明します。 + +### 1.必要な JavaScript および CSS ファイルを参照します。 + +必要なファイルを追加する方法は 2 つあります。1 つは個別のスクリプトを使用した方法であり、もう 1 つは [Infragistics Loader コンポーネント](/using-infragistics-loader)を使用した方法です。 + +`igDialog` コントロールのインスタンスを作成する方法としては、ローダーを使用した方法をお勧めします。以下の各コードは、ローダー コンポーネントを設定して手動でローダーを作動させる方法を示したものです。 + +- **個々のファイルを使用して参照します。** + + **HTML の場合:** + +```html + + + +``` + +- **Infragistics ローダーを使用して参照します。** + + **HTML の場合:** + +```html + + + +``` + + **JavaScript の場合:** + +```js + +``` + +> **注:** {environment:ProductNameMVC} ダイアログを使用する際には、***Infragistics.Web.Mvc*** dll への参照をプロジェクトに追加することを忘れないでください。 + + +### 2.igDialog インスタンスを作成します。 + +次のコードでは、ヘッダーの `igDialog` コントロールをフルコントロールでで初期化する方法を示します。コードをご覧になれば分かるように、ここで定義されているプロパティは、既定値をオーバーライドする必要のあるプロパティだけです。 のようなプロパティは、デフォルトで `true` になるため、構成する必要はありません。 + +- **JavaScript におけるインスタンス化** + + - `DIV` HTML プレースホルダーを定義します。 + + **HTML の場合:** + +```html +
    + igDialog Content +
    +``` + + - JavaScript 初期化コード + + Infragistics ローダー コンポーネントを使用する場合、次のコードをローダーのコールバック関数に挿入しておくことができます。 + + **JavaScript の場合:** + +```js + $.ig.loader(function () { + /* Initialization code here */ + }); +``` + + 個々のファイルを参照する場合、次のコードで示すように、jQuery ready イベントにバインドできます。 + + **JavaScript の場合:** + +```js + $(function () { + $("#igDialog1").igDialog({ + showMinimizeButton: true, + showMaximizeButton: true, + showPinButton: true, + width: "400px", + height: "500px" + }); + }); +``` + +`igDialog` を TypeScript で使用するには、以上のコードを使用してインスタンス化できます。そのためには TypeScript 用の {environment:ProductFamilyName} と jQuery の型定義への参照パスを指定する必要があります。 + + **TypeScript の場合:** +```typescript + /// + /// + /// +``` + +>**注:** TypeScript の 1.5 以前のバージョンでは、コンパイラがコンパイル中にプログラムに依存関係を組み込むため、型定義への参照パスは必須です。1.5 以降のバージョンでは、単独の tsconfig.json ファイルで定義することができます。詳細は、[tsconfig.json wiki のページ](https://github.com/Microsoft/TypeScript/wiki/tsconfig.json)を参照してください。 + +> TypeScript の {environment:ProductName} 定義を使用する詳細については、[「TypeScript で {environment:ProductName} を使用」](using-ignite-ui-with-typescript.html)トピックを参照してください。 + +- **Razor の初期化** + + {environment:ProductNameMVC} ダイアログは、HTML を表示すると同時に、コントロールを初期化する JavaScript コードを表示するものであるという点で他のコントロールとは異なります。この点を理解しておくことは非常に重要です。`igDialog` のコンテンツには任意の HTML マークアップを使用することができるため、このマークアップを最初に定義しておく必要があります。コードを定義しておけば、あとは、コントロールのすべての構成が {environment:ProductNameMVC} によって自動的に定義されることになります。 + + - `DIV` HTML プレースホルダーを定義します。 + + **HTML の場合:** + +```html +
    + igDialog Content +
    +``` + + {environment:ProductNameMVC} コード: + + **C# の場合:** + +```csharp + @(Html + .Infragistics() + .Dialog() + .ContentID("igDialog1") + .ShowMinimizeButton(true) + .ShowMaximizeButton(true) + .ShowPinButton(true) + .Width("400px") + .Height("500px") + .Render() + ) +``` + +> **注:** {environment:ProductNameMVC} ダイアログの ID を設定したいという場合には、3 つの選択肢があります。詳細については、[プロパティ リファレンス](./03_API Reference/00_igDialog Property Reference.mdx)のトピックを参照してください。定義済みの HTML プレースホルダーに上記のサンプルと同じ ID (`igDialog1`) が設定されている場合、次のいずれかのメソッドを使用できます。 + +> `Dialog.ContentJquerySelector(“#igDialog1”)`- jQuery の場合と同じ形でセレクターを定義します。 + +> `Dialog.ContentID(“igDialog1”)` - # を付けずにセレクターを定義します。この場合、セレクターは、{environment:ProductNameMVC} によって自動的に表示されます。 + +> `Dialog.ID(“igDialog1”)` - `ContentID(“igDialog1”)` と同じです。 + +> **注:** {environment:ProductNameMVC} を使用して HTML DIV プレースホルダー コードを定義したい場合は、ダイアログ ヘルパーで示される次のメソッドを使用することができます。DIV HTML プレースホルダーの定義と同じ効果を実現したい場合は、次のメソッドを使用してください。 `Dialog.ContentHTML("
    igDialog Content
    ")` + +- **AngularJS でのインスタンス化** + +以下のサンプルは、AngularJS ディレクティブを使用してダイアログ ウィンドウを宣言する方法を紹介します。 + +
    + [{environment:SamplesEmbedUrl}/dialog-window/angular]({environment:SamplesEmbedUrl}/dialog-window/angular) +
    + +> AngularJS の {environment:ProductName} 命令を使用する詳細については、[「AngularJS で {environment:ProductName} を使用」](../../10_AngularJS Directives/00_Using_Ignite_UI_with_AngularJS.mdx)トピックを参照してください。 + +## igDialog の破棄 + +### 概要 + +igDialog をブラウザー DOM ツリーに追加すると、ターゲット igDialog HTML 要素が元の親要素から削除され、動的に作成された要素に挿入されます。これにより、igDialog の絶対位置を決めることができるようになります。ページからコントロールを動的に削除したい場合、最も楽な方法は、 メソッドを使用することです。このメソッドを使用すると、当該の要素が DOM ツリーから削除されると同時に、ターゲット igDialog 要素が元の親要素に戻されることになります。 + +ウィジェットを作成し直したいときには、 メソッドの使用が適切な場合もあります。一例を挙げると、他の削除操作では削除できないプロパティの値を動的に変更したいという場合がこれに当たります。たとえば、 は、動的に変更できないプロパティの　1 つです。 + +### コード + +次の JavaScript スニペットは、`igDialog` メソッドを呼び出す方法を示します。 + +**JavaScript の場合:** + +```js +$('#igDialog).igDialog("destroy"); +``` + +## 関連コンテンツ + +### トピック + +このトピックの追加情報については、以下のトピックも合わせてご参照ください。 + +- [igDialog の概要](./00_igDialog Overview.mdx): このトピックでは、`igDialog` コントロールの主な機能を紹介します。 +- [igDialog の構成](./02_Configuring/~Configuring igDialog.mdx): このトピックでは、`igDialog` の主な機能をすべて取り上げ、それぞれの構成および使用法について説明します。 +- [API リファレンス](./03_API Reference/~igDialog API Reference.mdx): このトピックでは、`igDialog` API のカテゴリーを紹介します。ここでは、制御プロパティ、メソッド、イベント、および CSS クラスに関するリファレンス情報を提供し、具体的な API の使用例をいくつか示します。 + +### サンプル + +このトピックについては、以下のサンプルも参照してください。 + +- [アイコン]({environment:SamplesUrl}/dialog-window/icons): このサンプルでは、`igDialog` のアイコンを表示する方法を紹介します。 diff --git a/docs/jquery/src/content/ja/topics/controls/igdialog/api-reference/api-reference.mdx b/docs/jquery/src/content/ja/topics/controls/igdialog/api-reference/api-reference.mdx new file mode 100644 index 0000000000..940dd6266c --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igdialog/api-reference/api-reference.mdx @@ -0,0 +1,34 @@ +--- +title: "API リファレンス (igDialog)" +slug: igdialog-api-reference +--- + +# API リファレンス (igDialog) + +## このグループのトピックについて + +#### 概要 + +このトピックでは `igDialog`™ API カテゴリを紹介します。このトピックでは、コントロール プロパティ、メソッド、イベント、CSS クラスへのすべての参照、さらに API を使用した場合の特定のケースについてもご覧いただけます。 + +#### トピック + +このセクションには、`igDialog` コントロールの API を説明するトピックが含まれています。 + +- [**プロパティ リファレンス (*igDialog*)**](./00_igDialog Property Reference.mdx): このトピックでは、`igDialog` コントロールのプロパティを紹介します。 + +- [**メソッドのリファレンス (*igDialog*)**](./01_igDialog Method Reference.mdx): このトピックでは `igRating` コントロールのメソッドを紹介します。 + +- [**イベント リファレンス (*igDialog*)**](./02_igDialog Event Reference.mdx): このトピックでは、`igDialog` コントロールのイベントを紹介します。 + +- [**CSS クラス リファレンス (*igDialog*)**](./03_igDialog Css Classes Reference.mdx): このトピックでは、`igDialog` コントロールの CSS クラスを紹介します。 + + + + + + + + + + diff --git a/docs/jquery/src/content/ja/topics/controls/igdialog/api-reference/css-classes-reference.mdx b/docs/jquery/src/content/ja/topics/controls/igdialog/api-reference/css-classes-reference.mdx new file mode 100644 index 0000000000..a4da7d5993 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igdialog/api-reference/css-classes-reference.mdx @@ -0,0 +1,234 @@ +--- +title: "CSS クラス リファレンス (igDialog)" +slug: igdialog-css-classes-reference +--- + +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# CSS クラス リファレンス (igDialog) + +## トピックの概要 + +### 目的 + +このトピックでは、`igDialog`™ コントロールの CSS クラスを紹介します。 + +#### このトピックの内容 + +このトピックは、以下のセクションで構成されます。 + +- [概要](#intro) +- [CSS クラス リファレンス](#classes) +- [関連コンテンツ](#related-content) + + +## Mobile CSS クラスの igDialog の紹介 + +このセクションでは、`igDialog` CSS クラスを説明します。操作説明に従って、すべてのスタイルをオーバーライドして、カスタム `igDialog` コントロール レイアウトを作成できます。 + + + +## CSS クラス リファレンス + +以下に、`igDialog` コントロールの特長である の目的と機能をまとめました。 + +**メイン/トップ要素**に適用するクラス。 + +``` +ui-igdialog +ui-dialog +ui-widget +ui-widget-content +ui-corner-all +``` + +**ヘッダー**に適用するクラス。 + +``` +ui-igdialog-header +ui-dialog-titlebar +ui-widget-header +ui-corner-top +ui-helper-clearfix +``` + +**フォーカス状態のヘッダー**に適用するクラス。 + +``` +ui-igdialog-header-focus +ui-state-focus +``` + +**最小化状態のヘッダー**に適用するクラス。 + +``` +ui-corner-bottom +``` + +**ヘッダー テキスト**に適用するクラス。 + +``` +ui-igdialog-headertext +ui-dialog-title +``` + +"image" オプションを設定したときに**ヘッダーのイメージ**を表す SPAN に適用される追加のクラス。 + +``` +ui-igdialog-headerimage +``` + + +ダイアログが**最小化状態**のときに**ヘッダー テキスト**に適用するクラス。 + +``` +ui-igdialog-headertext-minimized +``` + +ヘッダーにある**ボタン**に適用するクラス。 + +``` +ui-igdialog-headerbutton +ui-corner-all +ui-state-default +``` + +**マウス ポインターを合わせた**ときにヘッダーの**ボタン**に適用するクラス。 + +``` +ui-igdialog-headerbutton-hover +ui-state-hover +``` + +ヘッダーの**閉じるボタン**に適用するクラス。 + +``` +ui-igdialog-buttonclose +``` + +ヘッダーの**最小化ボタン**に適用するクラス。 + +``` +ui-igdialog-buttonminimize +``` + +ヘッダーの**最大化ボタン**に適用するクラス。 + +``` +ui-igdialog-buttonmaximize +``` + +ヘッダーの**ピン留めボタン**に適用するクラス。 + +``` +ui-igdialog-buttonpin +``` + +**閉じる**ボタンのアイコンに適用するクラス。 + +``` +ui-igdialog-close-icon +ui-icon ui-icon-close +``` + +**最小化**ボタンのアイコンに適用するクラス。 + +``` +ui-igdialog-minimize-icon +ui-icon +ui-icon-minus +``` + +**最大化**ボタンのアイコンに適用するクラス。 + +``` +ui-igdialog-maximize-icon +ui-icon +ui-icon-extlink +``` + +**元に戻す**ボタンのアイコンに適用するクラス。 + +``` +ui-igdialog-restore-icon +ui-icon +ui-icon-copy +``` + +**ピン留め**ボタンのアイコンに適用するクラス。 + +``` +ui-igdialog-pin-icon +ui-icon +ui-icon-pin-s +``` + +**ピン留め解除**ボタンのアイコンに適用するクラス。 + +``` +ui-igdialog-unpin-icon +ui-icon +ui-icon-pin-w +``` + +**フッター**に適用するクラス。 + +``` +ui-igdialog-footer +ui-widget-header +ui-corner-bottom +ui-helper-clearfix +``` + +**サイズ変更時**にダイアログに適用するクラス。 + +``` +ui-igdialog-resizing +``` + +**ドラッグ時**にダイアログに適用するクラス。 + +``` +ui-igdialog-dragging +``` + +最大化やピン留めなどダイアログが**移動不可状態**のときに**ヘッダー**に適用するクラス。 + +``` +ui-igdialog-unmovable +``` + +ダイアログが**モーダル状態**のときに**シェル要素**に適用するクラス。 + +``` +ui-igdialog-overlay +ui-widget-overlay +``` + +ダイアログの**コンテンツ領域**に適用するクラス。 + +``` +ui-igdialog-content +ui-widget-contentui-dialog-content +``` + + +## 関連コンテンツ + +### トピック + +このトピックの追加情報については、以下のトピックも合わせてご参照ください。 + +- [プロパティ リファレンス (*igDialog*)](./00_igDialog Property Reference.mdx): このトピックでは、`igDialog` コントロールのプロパティを紹介します。 +- [メソッドのリファレンス (*igDialog*)](./01_igDialog Method Reference.mdx): このトピックでは `igDialog` コントロールのメソッドを紹介します。 +- [イベント リファレンス (*igDialog*)](./02_igDialog Event Reference.mdx): このトピックでは、`igDialog` コントロールのイベントを紹介します。 + + + + + + + + + + diff --git a/docs/jquery/src/content/ja/topics/controls/igdialog/api-reference/event-reference.mdx b/docs/jquery/src/content/ja/topics/controls/igdialog/api-reference/event-reference.mdx new file mode 100644 index 0000000000..8663b09504 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igdialog/api-reference/event-reference.mdx @@ -0,0 +1,94 @@ +--- +title: "イベント リファレンス (igDialog)" +slug: igdialog-event-reference +--- + +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# イベント リファレンス (igDialog) + +## トピックの概要 + +### 目的 + +このトピックでは、`igDialog`™ コントロールのイベントを紹介します。 + +#### このトピックの内容 + +このトピックは、以下のセクションで構成されます。 + +- [**イベント リファレンス**](#events) +- [**jQuery および MVC でイベント ハンドラーを添付する**](#attaching-handlers) + - [jQuery でイベント ハンドラーを添付する](#attaching-handlers-jquery) + - [MVC でイベント ハンドラーを添付する](#attaching-handlers-mvc) +- [**関連コンテンツ**](#related-content) + - [トピック](#topics) + + + +## イベント リファレンス + +以下の表に、`igDialog` コントロールの主なイベントの目的と機能の概要を示します。 + +イベント|説明|キャンセル可能 +------|-------------|----------- + |イベントは、ダイアログの状態が変更される前に発生します。|True + |イベントは、ダイアログの状態が変更された後に発生します。|False + |イベントは、ダイアログが閉じるまたは開いたとき、終了アニメーションの後に発生します。|False + |イベントは、ダイアログまたはそのコンテンツがフォーカスされるときに発生します。|False + |イベントは、ダイアログまたはそのコンテンツがフォーカスを失ったときに発生します。|False + + + +## jQuery および MVC でイベント ハンドラーを添付する + +### jQuery でイベント ハンドラーを添付する + +イベントに添付するには、プロパティの定義と同じようにイベントのハンドラーを定義します。これでイベントをトリガーすると、ハンドラーが呼び出されます。 + +**JavaScript の場合:** + +```js +$("#igDialog1").igDialog({ + stateChanging: function (e, args) { + // Handle event + } +}); +``` + +以下のサンプルは、使用する方法を紹介し、イベント ハンドラーを指定した要素にアタッチするための jQuery の [`on`](http://api.jquery.com/on/) メソッドの使用も紹介します。 + +
    + [{environment:SamplesEmbedUrl}/dialog-window/api-and-events]({environment:SamplesEmbedUrl}/dialog-window/api-and-events) +
    + +### MVC でイベント ハンドラーを添付する + +MVC でハンドラーを添付する場合、ハンドラーをウィジェット イベントに添付する jQuery User Interface (UI) パターンを使用します。つまり、jQuery の [`on`](http://api.jquery.com/on/)、[`bind`](http://api.jquery.com/bind/)、または [`live`](http://api.jquery.com/live/) 関数を使用して、イベントの名前をそれらに渡す必要があります。イベント名は、コントロールおよびイベントの名前を連結した小文字の文字列でなければなりません。jQuery ウィジェットでも同様のことができますが、コントロールを初期化するときにイベント ハンドラーを直接添付できるため、これは必要ありません。詳細は、[jQuery ウィジェット ファクトリ](http://wiki.jqueryui.com/w/page/12138135/Widget%20factory)を参照してください。以下のコードは、MVC ソリューションを実装する場合にハンドラーを igDialog イベントに添付する方法を示しています。 + +**JavaScript の場合:** + +```js +$("#igDialog1").live({ igdialogstatechanging: function (e, args) { + // Handle event +}}); +``` + +> **注:** jQuery [`live`](http://api.jquery.com/live/) 関数は、イベントをハンドラーに添付した後に一部の DOM 要素が追加される場合に使用されます。 + +## 関連コンテンツ + +### トピック + +このトピックの追加情報については、以下のトピックも合わせてご参照ください。 + +- [プロパティ リファレンス (*igDialog*)](./00_igDialog Property Reference.mdx): このトピックでは、`igDialog` コントロールのプロパティを紹介します。 +- [メソッドのリファレンス (*igDialog*)](./01_igDialog Method Reference.mdx): このトピックでは `igRating` コントロールのメソッドを紹介します。 +- [CSS クラス リファレンス (*igDialog*)](./03_igDialog Css Classes Reference.mdx): このトピックでは、`igDialog` コントロールの CSS クラスを紹介します。 + + + + + + + diff --git a/docs/jquery/src/content/ja/topics/controls/igdialog/api-reference/method-reference.mdx b/docs/jquery/src/content/ja/topics/controls/igdialog/api-reference/method-reference.mdx new file mode 100644 index 0000000000..df613527ab --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igdialog/api-reference/method-reference.mdx @@ -0,0 +1,74 @@ +--- +title: "メソッドのリファレンス (igDialog)" +slug: igdialog-method-reference +--- + +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# メソッドのリファレンス (igDialog) + +## トピックの概要 + +### 目的 + +このトピックでは、igDialog™ コントロールの各種メソッドを紹介します。 + +#### このトピックの内容 + +このトピックは、以下のセクションで構成されます。 + +- [メソッド リファレンス](#methods) +- [**関連コンテンツ**](#related-content) + - [トピック](#topics) + - [サンプル](#samples) + + + +## メソッド リファレンス + +igDialog コントロールの各種メソッドの目的と機能を表にまとめると、次のようになります。 + +メソッド|説明 +--- | --- +|エディターの状態を取得します。 + |動的に作成される div 要素 (ダイアログを表す要素) への参照を取得します。 + |`igDialog` コンテンツのコンテナーを取得するか、提供された新しいコンテンツを設定します。ヘッダー、サイズ変更のハンドルなど以外のダイアログ ウィンドウの内部コンテナーです。 + |開いている `igDialog` を閉じます。 + |閉じている `igDialog` を開きます。 + |開いている `igDialog` を最小化します。 + |開いている `igDialog` を最大化します。 + |ピン固定されていない `igDialog` をピン固定します。 + |ピン固定されている `igDialog` の固定を解除します。 + |一番上のモーダル ダイアログへの参照を取得します。 + |ダイアログがモーダルで現在アクティブであることを示します。 + |ダイアログを一番上に移動させます。 +|`igDialog` コントロールを破棄します。 + +## 関連コンテンツ + +### トピック + +このトピックの追加情報については、以下のトピックも合わせてご参照ください。 + +- [プロパティ リファレンス (*igDialog*)](./00_igDialog Property Reference.mdx): このトピックでは、`igDialog` コントロールのプロパティを紹介します。 +- [イベント リファレンス (*igDialog*)](./02_igDialog Event Reference.mdx): このトピックでは、`igDialog` コントロールのイベントを紹介します。 +- [CSS クラス リファレンス (*igDialog*)](./03_igDialog Css Classes Reference.mdx): このトピックでは、`igDialog` コントロールの CSS クラスを紹介します。 + + + +### サンプル + +このトピックについては、以下のサンプルも参照してください。 + +- [API およびイベント](./02_igDialog Event Reference.mdx#attaching-handlers-jquery): このサンプルでは、ダイアログ ウィンドウ コントロールのイベントを処理および API を使用する方法を紹介します。 +- [モーダル ダイアログ]({environment:SamplesUrl}/dialog-window/modal-dialog): このサンプルでは、モーダル ダイアログを作成する方法を紹介します。 + + + + + + + + + + diff --git a/docs/jquery/src/content/ja/topics/controls/igdialog/api-reference/property-reference.mdx b/docs/jquery/src/content/ja/topics/controls/igdialog/api-reference/property-reference.mdx new file mode 100644 index 0000000000..27dfe3468f --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igdialog/api-reference/property-reference.mdx @@ -0,0 +1,167 @@ +--- +title: "プロパティ リファレンス (igDialog)" +slug: igdialog-property-reference +--- + +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# プロパティ リファレンス (igDialog) + +## トピックの概要 + +### 目的 + +このトピックでは、`igDialog`™ コントロールのプロパティを紹介します。 + +### このトピックの内容 + +このトピックは、以下のセクションで構成されます。 + +- [**jQuery プロパティのリファレンス**](#jquery) +- [**MVC プロパティのリファレンス**](#mvc) +- [**関連コンテンツ**](#related-content) + - [トピック](#topics) + - [サンプル](#samples) + + + +## jQuery プロパティのリファレンス + +以下の表は、`igDialog` コントロールの主なプロパティの目的と機能の概要をまとめたものです。 と の値以外、プロパティはすべて動的に変更できます。 + +| | | | | +| --- | --- | --- | --- | +| プロパティ | タイプ | 値 (デフォルト値) | 説明 | +| | object | **null** DOM オブジェクト | このプロパティでは、jQuery HTML DIV オブジェクトの設定と取得ができます。このオブジェクトはダイアログのメイン コンテナーとして使用します。このプロパティの使用時には以下の制約が課せられるので注意してください。 コンテナーはオプションであり、子は格納できません。 コンテナーに親は設定できません。 コンテナーに属性は収容できません。 このオプションは変更できません。 | +| | object | **null** DOM オブジェクト jQuery オブジェクト | igDialog の HTML コンテナー要素を取得または設定します。デフォルトで、オリジナル ターゲット要素の親フォームを使用します。親が利用できない場合は HTML body オブジェクトを使用します。CSS コンテナー プロパティ 「position」 の設定値が 「static」でない場合、位置の値は「relative」になります。 | +| | string | **opened** “closed” “minimized” “maximized” | このプロパティでは、ダイアログの状態の設定と取得ができます。 | +| | boolean | true **false** | ダイアログのピン留め状態を取得または設定します。 | +| | object | **null** [100, 200] { my: “left top”, at: “left top”, offset: “100 200” } | igDialog の初期位置を取得または設定します。位置は、左座標と上座標を表す 2 つの数値の配列で指定できます。もう 1 つのオプションは、jQuery [`position()`](http://jqueryui.com/demos/position/) メソッドがサポートするオブジェクトです。 | +| | boolean | true **false** | igDialog のモーダル状態を取得または設定します。ウィンドウが最小化やピン留めの状態では、この状態は利用できません。 | +| | boolean | **true** false | igDialog コントロールをドラッグする機能を取得または設定します。 | +| | boolean | **true** false | igDialog のサイズを変更する機能を取得または設定します。 | +| | boolean | **true** false | ダイアログにあるコントロール自体と、その子要素のフォーカス イベントとブラー イベントを処理する機能を取得または設定します。 | +| | boolean | **true** false | ヘッダーの状態を、フォーカス設定状態と非フォーカス状態に調節する機能を取得または設定します。このプロパティは、 プロパティを有効にしたときにだけ機能します。 | +| | number | **0** | igDialog メイン HTML 要素に適用した 属性の値を取得または設定します。 | +| | number | **1000** | igDialog メイン HTML 要素に適用した の値を取得または設定します。 | +| | string | **null** “” | IFRAME src 属性の一時値を取得または設定します。基本要素の親が HTML IFRAME 要素の場合、このプロパティで親を変更します。このプロパティは必須ではありませんが、これが例外防止になる場合があります。 | +| | string/boolean | **“auto”** true false | igDialog ヘッダーをダブル クリックしたときに生じるアクションを取得または設定します。 値が false の場合、マウスをダブル クリックしてもウィンドウは反応しません。値を true に設定したときは反応します。また、auto 状態になると、ヘッダーに最大化アイコンがある場合にだけ、ダブル クリックに igDialog が反応します。 | +| | number | **null** 100 “100px” “2em” “100%” | ノーマル状態ダイアログのピクセル単位の初期高さを取得または設定します。「%」を使用すると、window ブラウザー オブジェクトのサイズが適用され、igDialog を開くときにだけ反応します。 | +| | number | **300** “300px” “2em” “100%” | ノーマル状態ダイアログのピクセル単位の初期幅を取得または設定します。「%」を使用すると、window ブラウザー オブジェクトのサイズが適用され、igDialog を開くときにだけ反応します。 | +| | number | **100** “100px” “2em” “100%” | ノーマル状態ダイアログの最低高さを取得または設定します。 | +| | number | **150** “150px” “2em” “100%” | ノーマル状態ダイアログの最低幅を取得または設定します。 | +| | number | **null** 1500 “1500px” “5em” “100%” | ノーマル状態ダイアログの最高高さを取得または設定します。このオプションの値が反映されるのは、igDialog のサイズ変更時だけです。 | +| | number | **null** 1500 “1500px” “5em” “100%” | ノーマル状態ダイアログの最大幅を取得または設定します。注: このオプションが有効なのは、エンド ユーザーがダイアログのサイズを変更するときだけです。 | +| | boolean | **true** false | Esc キーでダイアログを閉じる機能を取得または設定します。 | +| | boolean | **true** false | igDialog ヘッダー内の閉じるボタンの可視性を取得または設定します。 | +| | boolean | true **false** | igDialog ヘッダー内の最大化ボタンの可視性を取得または設定します。 | +| | boolean | true **false** | ヘッダー内のピン留めボタンの可視性を取得または設定します。 | +| | boolean | true **false** | ダイアログを最小化したときに igDialog を自動的にピン留めする機能を取得または設定します。 | +| | string/number | **null** “slide” “explode” 500 | ダイアログを開くときにダイアログに適用されるアニメーションを取得または設定します。jQuery show() メソッドがサポートするオブジェクトはすべて対象です。 | +| | string/number | **null** “slide” “explode” 500 | ダイアログを閉じるときに適用されるアニメーションを取得または設定します。jQuery hide() メソッドがサポートするオブジェクトはすべて対象です。 | +| | string | **null** “container-class” | CSS クラスの名前を取得または設定します。このクラスは igDialog のメイン DIV 要素に適用します。 | +| | string | **null** **“img-class”** | CSS クラスの名前を取得または設定します。このクラスは igDialog ヘッダーの左側にある SPAN 要素に適用します。 | +| | string | **null** “HEADER” | igDialog ヘッダーに表示されるテキストを取得または設定します。 | +| | boolean | **true** false | igDialog ヘッダーの可視性を取得または設定します。 | +| | boolean | true **false** | igDialog ヘッダーの可視性を取得または設定します。 | +| | string | **null** “FOOTER” | igDialog フッターに表示するテキストを取得または設定します。 | +| | string | **null** “X” | igDialog の閉じるボタンのツールチップを取得または設定します。 | +| | string | **null** “MIN” | igDialog の最小化ボタンのツールチップを取得または設定します。 | +| | string | **null** “MAX” | igDialog の最大化ボタンのツールチップを取得または設定します。 | +| | string | **null** “PIN” | igDialog のピン留めボタンのツールチップを取得または設定します。 | +| | string | **null** “UNPIN” | igDialog のピン留め解除ボタンのツールチップを取得または設定します。 | +| | string | **null** “RESTORE” | igDialog の元に戻すボタンのツールチップを取得または設定します。 | + + + + + + +## MVC メソッド リファレンス + +以下の表は、* {environment:ProductNameMVC} * `Dialog` の目的と機能をまとめたものです。 と を除くほとんどのメソッドは、jQuery プロパティに対応します。対応する igDialog プロパティがない MVC メソッドには、これ以外にも、[`ContentJquerySelector`](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~ContentJquerySelector.html)、[`ContentID`](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~ContentID.html)、[`ID`](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~ID.html)、[`ContentHTML`](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogWrapper~ContentHTML.html) などがあります。 + + +| | | | | +| --- | --- | --- | --- | +| プロパティ | パラメーター タイプ | 値 (デフォルト値) | 説明 | +| [ContentJquerySelector](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~ContentJquerySelector.html) | string | “#igDialog1” | このプロパティは、environment:ProductNameMVC Dialog のセレクターを定義します。このセレクターは jQuery のみのウィジェットを作成するときと同じセレクターにしてください。たとえば、HTML プレースホルダーの ID が “igDialog1” の場合、[ContentJquerySelector](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~ContentJquerySelector.html) の値は 「#igDialog」になります。次に、environment:ProductNameMVC は以下のコードをレンダリングします。 $(“#igDialog”).igDialog(); | +| [ContentID](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~ContentID.html) | string | “igDialog1” | このプロパティは、environment:ProductNameMVC Dialog のセレクターを定義します。[ContentJquerySelector](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~ContentJquerySelector.html) プロパティと違って、渡す情報は # を除いた HTML プレースホルダーの ID だけです。environment:ProductNameMVC はウィジェットを自動的にレンダリングします。[ContentID](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~ContentID.html) の値が「igDialog」の場合、先のプロパティと同様の結果が得られます。 $(“#igDialog”).igDialog(); | +| [ID](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~ID.html) | string | “igDialog1” | このプロパティは、environment:ProductNameMVC Dialog のセレクターを定義します。このプロパティは [ContentID](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogWrapper~ContentID.html) プロパティとまったく同じ働きをします。パラメーターでは同じフォーマットを使用し、同じコードをレンダリングします。 | +| [ContentHTML](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~ContentHTML.html) | string | “<div id="igDialog1”> igDialog Content </div>” | このプロパティでは、environment:ProductNameMVC Dialog の一部として igDialog の HTML プレースホルダーを定義できます。この HTML コードは、igDialog のコンテンツになります。 | +| [Container](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~Container.html) | string | “#idContainer” “.classContainer” | igDialog の HTML コンテナー要素を取得または設定します。デフォルトで、オリジナル ターゲット要素の親フォームを使用し、その親が利用できない場合は、HTML body オブジェクトを使用します。CSS コンテナー プロパティ「position」を設定しないと値は「static」になり、位置の値の設定は「relative」になります。 | +| [State](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~State.html) | string | **DialogState.Opened** DialogState.Closed DialogState.Minimized DialogState.Maximized | このプロパティでは、ダイアログの状態を取得または設定します。 | +| [Pinned](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~Pinned.html) | bool? | true **false** | ダイアログのピン留め状態を取得または設定します。 | +| [Position](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~Position.html) | int | Position(100, 200) | igDialog の初期位置を取得または設定します。左と上の位置を引数として渡します。 | +| [Modal](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~Modal.html) | bool? | true **false** | igDialog のモーダル状態を取得または設定します。ウィンドウを最小化したときやピン留めしたときは、この状態は利用できません。 | +| [Draggable](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~Draggable.html) | bool? | **true** false | igDialog コントロールをドラッグする機能を取得または設定します。 | +| [Resizable](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~Resizable.html) | bool? | **true** false | igDialog のサイズを変更する機能を取得または設定します。 | +| [TrackFocus](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~TrackFocus.html) | bool? | **true** false | フォーカス状態を維持するため、igDialog にある子要素のフォーカス イベントとブラー イベントを処理する機能を取得または設定します。このオプションが有効な場合、そのダイアログのすべての子要素にフォーカス イベント ハンドラーとブラー イベント ハンドラーが追加されます。ダイアログがモーダルの場合や最大化されている場合、このオプションは無効にしないでください。 | +| [EnableHeaderFocus](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogWrapper~EnableHeaderFocus.html) | bool? | **true** false | ヘッダーの状態を、フォーカス設定状態と非フォーカス状態に調節する機能を取得または設定します。このプロパティは、[trackFocus](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~TrackFocus.html) プロパティを有効にしたときにだけ機能します。 | +| [TabIndex](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogWrapper~TabIndex.html) | int | **0** | igDialog メイン HTML 要素に適用した tabIndex 属性の値を取得または設定します。 | +| [ZIndex](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~ZIndex.html) | int | **1000** | igDialog メイン HTML 要素に適用した zIndex の値を取得または設定します。 | +| [EnableDblclick](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~EnableDblclick.html) | bool? | true false | igDialog ヘッダーをダブル クリックしたときに生じるアクションを取得または設定します。 値が false の場合、ウィンドウはマウスのダブル クリックに反応しません。一方、値が true のときは反応します。「auto」状態の場合、ダブルクリックで igDialog が反応するのはヘッダーのアイコンが最大化されているときだけです。 「Auto」はデフォルト状態ですが、environment:ProductNameMVC で動的に変更することはできません。 | +| [Height](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~Height.html) | string | 100 “100px” “2em” “100%” | ノーマル状態ダイアログのピクセル単位の初期高さを取得または設定します。「%」を使用すると、window ブラウザー オブジェクトのサイズを使用し、igDialog が開いていないと結果は反映されません。 | +| [Width](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~Width.html) | string | **300** “300px” “2em” “100%” | ノーマル状態ダイアログのピクセル単位の初期幅を取得または設定します。「%」を使用すると、window ブラウザー オブジェクトのサイズを使用し、igDialog が開いていないと結果は反映されません。 | +| [MinHeight](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~MinHeight.html) | string | **100** “100px” “2em” “100%” | ノーマル状態ダイアログの最低高さを取得または設定します。 | +| [MinWidth](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~MinWidth.html) | string | **150** “150px” “2em” “100%” | ノーマル状態ダイアログの最低幅を取得または設定します。 | +| [MaxHeight](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~MaxHeight.html) | string | 1500 “1500px” “5em” “100%” | ノーマル状態ダイアログの最高高さを取得または設定します。このオプションの値が反映されるのは、igDialog のサイズ変更時だけです。 | +| [MaxWidth](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~MaxWidth.html) | string | 1500 “1500px” “5em” “100%” | ノーマル状態ダイアログの最大幅を取得または設定します。注: このオプションが有効なのは、エンド ユーザーがダイアログのサイズを変更するときだけです。 | +| [CloseOnEscape](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~CloseOnEscape.html) | bool? | **true** false | Esc キーでダイアログを閉じる機能を取得または設定します。 | +| [ShowCloseButton](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~ShowCloseButton.html) | bool? | **true** false | igDialog ヘッダー内の閉じるボタンの可視性を取得または設定します。 | +| [ShowMaximizeButton](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~ShowMaximizeButton.html) | bool? | true **false** | igDialog ヘッダー内の最大化ボタンの可視性を取得または設定します。 | +| [ShowPinButton](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~ShowPinButton.html) | bool? | true **false** | ヘッダー内のピン留めボタンの可視性を取得または設定します。 | +| [pinOnMinimized](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~PinOnMinimized.html) | bool? | true **false** | ダイアログを最小化したときに igDialog を自動的にピン留めする機能を取得または設定します。 | +| [openAnimation](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~OpenAnimation.html) | string/integer | “slide” “explode” 500 | ダイアログを開くときに適用されるアニメーションを取得または設定します。jQuery show() メソッドがサポートするオブジェクトはすべて対象です。 | +| [CloseAnimation](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~CloseAnimation.html) | string/integer | “slide” “explode” 500 | ダイアログを閉じるときに適用されるアニメーションを取得または設定します。jQuery hide() メソッドがサポートするオブジェクトはすべて対象です。 | +| [DialogClass](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~DialogClass.html) | string | “container-class” | CSS クラスの名前を取得または設定します。このクラスは igDialog のメイン DIV 要素に適用します。 | +| [imageClass](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~ImageClass.html) | string | “img-class” | CSS クラスの名前を取得または設定します。このクラスは igDialog ヘッダーの左側にある SPAN 要素に適用します。 | +| [HeaderText](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~HeaderText.html) | string | “HEADER” | igDialog ヘッダーに表示されるテキストを取得または設定します。 | +| [ShowHeader](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~ShowHeader.html) | bool? | **true** false | igDialog ヘッダーの可視性を取得または設定します。 | +| [ShowFooter](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~ShowFooter.html) | bool? | true **false** | igDialog ヘッダーの可視性を取得または設定します。 | +| [FooterText](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~FooterText.html) | string | “FOOTER” | igDialog フッターに表示されるテキストを取得または設定します。 | +| [CloseButtonTitle](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~CloseButtonTitle.html) | string | “X” | igDialog の閉じるボタンのツールチップを取得または設定します。 | +| [minimizeButtonTitle](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~MinimizeButtonTitle.html) | string | “MIN” | igDialog の最小化ボタンのツールチップを取得または設定します。 | +| [MaximizeButtonTitle](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~MaximizeButtonTitle.html) | string | “MAX” | igDialog の最大化ボタンのツールチップを取得または設定します。 | +| [PinButtonTitle](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~PinButtonTitle.html) | string | “PIN” | igDialog のピン留めボタンのツールチップを取得または設定します。 | +| [UnpinButtonTitle](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~UnpinButtonTitle.html) | string | “UNPIN” | igDialog のピン留め解除ボタンのツールチップを取得または設定します。 | +| [RestoreButtonTitle](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DialogModel~RestoreButtonTitle.html) | string | “RESTORE” | igDialog の元に戻すボタンのツールチップを取得または設定します。 | + + +## 関連コンテンツ + +### トピック + +このトピックの追加情報については、以下のトピックも合わせてご参照ください。 + +- [メソッドのリファレンス (*igDialog*)](./01_igDialog Method Reference.mdx): このトピックでは `igRating` コントロールのメソッドを紹介します。 + +- [イベント リファレンス (*igDialog*)](./02_igDialog Event Reference.mdx): このトピックでは、`igDialog` コントロールのイベントを紹介します。 + +- [CSS クラス リファレンス (*igDialog*)](./03_igDialog Css Classes Reference.mdx): このトピックでは、`igDialog` コントロールの CSS クラスを紹介します。 + + + +### サンプル + +このトピックについては、以下のサンプルも参照してください。 + +- [基本的な使用方法]({environment:SamplesUrl}/dialog-window/basic-usage): このサンプルでは、`igDialog` の高さ、幅、状態を設定する方法を紹介します。 + +- [API およびイベント](./02_igDialog Event Reference.mdx#attaching-handlers-jquery): このサンプルでは、ダイアログ ウィンドウ コントロールのイベントを処理および API を使用する方法を紹介します。 + +- [ASP.NET MVC の基本的な使用方法]({environment:SamplesUrl}/dialog-window/aspnet-mvc-helper): このサンプルでは、ダイアログ ウィンドウの ASP.NET MVC ヘルパーを使用する方法を紹介します。 + +- [モーダル ダイアログ]({environment:SamplesUrl}/dialog-window/modal-dialog): このサンプルでは、モーダル ダイアログを作成する方法を紹介します。 + +- [外部ページの読み込み]({environment:SamplesUrl}/dialog-window/loading-external-page): このサンプルでは、URL から外部のコンテンツを読み込む方法を紹介します。 + + + + + + + + + + diff --git a/docs/jquery/src/content/ja/topics/controls/igdialog/configuring/animations.mdx b/docs/jquery/src/content/ja/topics/controls/igdialog/configuring/animations.mdx new file mode 100644 index 0000000000..23a18941fa --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igdialog/configuring/animations.mdx @@ -0,0 +1,111 @@ +--- +title: "igDialog のアニメーション" +slug: igdialog-animations +--- + +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# igDialog のアニメーション + +## トピックの概要 + +### 目的 + +このトピックでは、オープンまたはクローズ時に、{environment:ProductNameMVC} Dialog をアニメーション化する方法を示します。 + +### 前提条件 + +このトピックを理解するために、以下のトピックを参照することをお勧めします。 + +- [***igDialog* の概要**](../00_igDialog Overview.mdx): このトピックでは、`igDialog` コントロールの主な機能を紹介します。 + +- [***igDialog*** の追加](../01_Adding igDialog.mdx): このトピックでは、`igDialog` コントロールを Web ページに追加する方法について説明します。 + + +### このトピックの内容 + +このトピックは、以下のセクションで構成されます。 + +- [**コントロールの構成の概要**](#configuration-summary) +- [**igDialog アニメーションの構成**](#configuring) + - [プロパティ設定](#configure-properties) + - [jQuery の例](#configure-jquery) + - [MVC の例](#configure-mvc) +- [**関連コンテンツ**](#related-content) + - [トピック](#topics) + + + +## コントロールの構成の概要 + +`igDialog` を閉じるまたは開くときにアニメーション化するよう構成する必要があるプロパティ。 + +- +- + + +## igDialog アニメーションの構成 + +ユーザー インターフェイスのエクスペリエンスを向上させるため、ダイアログを開くまたは閉じるときにアニメーションを作成できます。アニメーション プロパティの値は jQuery UI [`show()`](http://docs.jquery.com/UI/Effects/show)/[`hide()`](http://docs.jquery.com/UI/Effects/hide) メソッドの任意のパラメーターが考えられます。パラメーターの詳細については、jQuery ドキュメントをご覧ください。 + +### プロパティ設定 + +以下の表では、目的のアニメーション機能をプロパティ設定にマップしています。 + +目的:|使用するプロパティ:|設定の選択肢: +--- | --- | --- +開くときに *igDialog* アニメーション化する| |slide +閉じるときに *igDialog* アニメーション化する| |explode + + +### jQuery の例 + +以下のコードは、jQuery で `igDialog` アニメーションを設定する方法を示しています。 + +**JavaScript の場合:** + +```js +$("#dialog").igDialog({ + openAnimation: “slide” + closeAnimation: "explode" +}); +``` + +### MVC の例 + +以下のコードは、Dialog ラッパーを使用して `igDialog` アニメーションを設定する方法を示しています。 + +**C# の場合:** + +```csharp +<%= Html.Infragistics() + .Dialog() + .ContentID("dialog") + .OpenAnimation("slide") + .CloseAnimation("explode") + .Render() +%> +``` + + + +## 関連コンテンツ + +### トピック + +このトピックの追加情報については、以下のトピックも合わせてご参照ください。 + +- [***igDialog* の概要**](../00_igDialog Overview.mdx): このトピックでは、`igDialog` コントロールの主な機能を紹介します。 + +- [*igDialog* の追加](../01_Adding igDialog.mdx): このトピックでは、`igDialog` コントロールを Web ページに追加する方法について説明します。 + + + + + + + + + + + diff --git a/docs/jquery/src/content/ja/topics/controls/igdialog/configuring/external-page.mdx b/docs/jquery/src/content/ja/topics/controls/igdialog/configuring/external-page.mdx new file mode 100644 index 0000000000..9d0af59351 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igdialog/configuring/external-page.mdx @@ -0,0 +1,103 @@ +--- +title: "igDialog 外部ページ" +slug: igdialog-external-page +--- + +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# igDialog 外部ページ + +## トピックの概要 + +## 目的 + +このトピックは、外部ページを `igDialog`™ コントロールに読み込む方法を紹介します。 + +### 前提条件 + +このトピックを理解するために、以下のトピックを参照することをお勧めします。 + +- [***igDialog* の概要**](../00_igDialog Overview.mdx): このトピックでは、`igDialog` コントロールの主な機能を紹介します。 + +- [***igDialog*** の追加](../01_Adding igDialog.mdx): このトピックでは、`igDialog` コントロールを Web ページに追加する方法について説明します。 + + + +### このトピックの内容 + +このトピックは、以下のセクションで構成されます。 + +- [**外部ページを使用した igDialog の構成**](#configuring) + - [概要](#overview) + - [プロパティの設定](#property-settings) + - [例](#example) +- [**関連コンテンツ**](#related-content) + - [トピック](#topics) + - [サンプル](#samples) + + + +## 外部ページを使用した igDialog の構成 + +### 概要 + +`igDialog` を使用して、一連の HTML 要素だけでなくページ全体を読み込むことができます。おわかりのように、`igDialog` を HTML `DIV` 要素に適用でき、その `DIV` 内のコンテンツはダイアログ ウィンドウのコンテンツになります。これは `igDialog` が外部ページを読み込むときと似ています。違いは HTML コンテナーが `IFRAME` 要素でなければならないという点です。`IFRAME` のコンテンツ ページは `igDialog` のコンテンツになります。 + +**HTML の場合:** + + +```html + +``` + +### プロパティの設定 + +外部ページを `igDialog` に読み込むには、前のパラグラフのコードで十分です。次の `igDialog` プロパティのみお勧めしています。それらのプロパティによりウィンドウがユーザー フレンドリになります。 + +以下の表では、目的のプロパティ設定をマップしています。 + +目的:|使用するプロパティ:|設定の選択肢: +--- | --- | --- +サイトのヘッダー テキスト - タイトルを表示する||Infragistics +`igDialog` を最大化できるようにする| |true +一時 `IFRAME` URL ソースを設定する| |Infragistics.com + + + +> **注:** プロパティを使用しなければならないわけではありませんが、使用すると例外を回避できます。外部ページの `igDialog` を作成すると、ターゲット要素がその元のコンテナーから削除され、動的に作成されたメイン要素に挿入されます。`IFRAME` 要素にソースとして一時 URL がない場合、これにより例外が発生する場合があります。外部ページの読み込み中にエラーが表示された場合、`IFRAME` 要素の非永続的なソースを設定する プロパティを使用できます。 + +### 例 + +以下のスクリーンショットは、上記の設定の結果として、`igDialog` は外部のページを読み込む方法を紹介しています。 + +![](../../../images/images/04_6_igDialog_ExternalPage_1.png) + + + +## 関連コンテンツ + +### トピック + +このトピックの追加情報については、以下のトピックも合わせてご参照ください。 + +- [***igDialog* の概要**](../00_igDialog Overview.mdx): このトピックでは、`igDialog` コントロールの主な機能を紹介します。 + +- [***igDialog*** の追加](../01_Adding igDialog.mdx): このトピックでは、`igDialog` コントロールを Web ページに追加する方法について説明します。 + + + +### サンプル + +このトピックについては、以下のサンプルも参照してください。 + +- [外部ページの読み込み]({environment:SamplesUrl}/dialog-window/loading-external-page): このサンプルでは、URL から外部のコンテンツを読み込む方法を紹介します。 + + + + + + + + + + diff --git a/docs/jquery/src/content/ja/topics/controls/igdialog/configuring/header-and-footer.mdx b/docs/jquery/src/content/ja/topics/controls/igdialog/configuring/header-and-footer.mdx new file mode 100644 index 0000000000..217b945c12 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igdialog/configuring/header-and-footer.mdx @@ -0,0 +1,137 @@ +--- +title: "igDialog のヘッダーとフッター" +slug: igdialog-header-and-footer +--- + +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# igDialog のヘッダーとフッター + +## トピックの概要 + +### 目的 + +このトピックでは、`igDialog`™ のフッターとヘッダーを有効にする方法、およびそれらをカスタマイズする方法を示しています。 + +### 前提条件 + +このトピックを理解するために、以下のトピックを参照することをお勧めします。 + +- [***igDialog* の概要**](../00_igDialog Overview.mdx): このトピックでは、`igDialog` コントロールの主な機能を紹介します。 + +- [***igDialog*** の追加](../01_Adding igDialog.mdx): このトピックでは、`igDialog` コントロールを Web ページに追加する方法について説明します。 + + + +### このトピックの内容 + +このトピックは、以下のセクションで構成されます。 + +- [**コントロールの構成の概要**](#configuration-summary) +- [**igDialog ヘッダーの有効化と構成**](#header) + - [プロパティの設定](#header-property-settings) + - [例](#header-example) +- [**igDialog フッターの有効化と構成**](#footer) + - [プロパティの設定](#footer-property-settings) + - [例](#footer-example) +- [**関連コンテンツ**](#related-content) + - [トピック](#topics) + - [サンプル](#samples) + + + +## コントロールの構成の概要 + +以下の表は、`igDialog` の*ヘッダーおよびフッター* コントロールの構成可能な要素を示しています。このメソッドについては、表の下にある解説も参照してください。 + + +| | | | +| --- | --- | --- | +| 構成可能な要素 | 詳細 | プロパティ | +| `igDialog` ヘッダーの有効化と構成 | `igDialog` を有効にし、その要素のカスタマイズを可能にするために構成する必要があるプロパティ。 | | +| `igDialog` フッターの有効化と構成 | `igDialog` を有効にし、その要素のカスタマイズを可能にするために構成する必要があるプロパティ。 | | + + +ヘッダー ボタンを有効/無効にする方法については、[**最小化/最大化および固定**](./01_igDialog Maximize and Minimize.mdx)トピックを参照してください。 + + + +## igDialog ヘッダーの有効化と構成 + +`igDialog` API は、そのヘッダーを修正するための、いくつかの API プロパティを提案します。 + +### プロパティの設定 + +以下の表では、目的のヘッダーをプロパティ設定にマップしています。 + +目的:|使用するプロパティ:|設定の選択肢: +--- | --- | --- +igDialog ヘッダーを表示します| |true +igDialog ヘッダーのタイトルを設定します| |“HEADER” +igDialog ヘッダーの画像を設定します| |clsImage +igDialog ヘッダーの閉じるボタンを設定します| |“X” +igDialog の最小化ボタンのタイトルを設定します| |“MIN” +igDialog の最大化ボタンのタイトルを設定します| |“MAX” +igDialog の固定ボタンのタイトルを設定します| |“PIN” +igDialog の固定解除ボタンのタイトルを設定します| |“UNPIN” +igDialog の復元ボタンのタイトルを設定します| |“RESTORE” + + +### 例 + +下のスクリーンショットは、上記の設定を行った場合に表示される `igDialog` です。 + +![](../../../images/images/04_5_igDialog_HeaderAndFooter_1.png) + +> **注:**CSS で定義される `clsImage` のため、赤い四角形が上部にあります。 +> `.clsImage { background-color: red; width: 5px; height: 5px; }` + + + +## igDialog フッターの有効化と構成 + +`igDialog` API は、そのフッターを修正するための、2 つの API プロパティを提案します。 + +### プロパティの設定 + +以下の表は、目的のヘッダー機能とプロパティ設定の対応表です。 + +目的:|使用するプロパティ:|設定の選択肢: +--- | --- | --- +`igDialog` フッターを表示します| |true +`igDialog` フッター タイトルを設定する| |“FOOTER” + + +### 例 + +以下のスクリーンショットは、上の設定、および前の項でのヘッダー設定の結果、`igDialog` がどのように表示されるかを示しています。 + +![](../../../images/images/04_5_igDialog_HeaderAndFooter_2.png) + + + +## 関連コンテンツ + +### トピック + +このトピックの追加情報については、以下のトピックも合わせてご参照ください。 + +- [***igDialog* の概要**](../00_igDialog Overview.mdx): このトピックでは、`igDialog` コントロールの主な機能を紹介します。 + +- [***igDialog*** の追加](../01_Adding igDialog.mdx): このトピックでは、`igDialog` コントロールを Web ページに追加する方法について説明します。 + +### サンプル + +このトピックについては、以下のサンプルも参照してください。 + +- [アイコン]({environment:SamplesUrl}/dialog-window/icons): `igDialog` のアイコンの表示方法を示すサンプル。 + + + + + + + + + + diff --git a/docs/jquery/src/content/ja/topics/controls/igdialog/configuring/igdialog.mdx b/docs/jquery/src/content/ja/topics/controls/igdialog/configuring/igdialog.mdx new file mode 100644 index 0000000000..a7363a0fdd --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igdialog/configuring/igdialog.mdx @@ -0,0 +1,44 @@ +--- +title: "igDialog の構成" +slug: configuring-igdialog +--- + +# igDialog の構成 + +## このグループのトピックについて + +### 概要 + +このトピックでは、すべての主な `igDialog`™ の機能、その構成および使用方法を参照します。 + +### トピック + +このセクションには、`igDialog` の機能を説明するトピックが含まれています。 + +- [*igDialog* の表示と非表示](./00_igDialog Show and Hide.mdx): このトピックでは、`igDialog` をオープンまたはクローズできるように構成する方法、およびこれらのアクションの実行方法を示します。 + +- [*igDialog* の最大化と最小化](./01_igDialog Maximize and Minimize.mdx): このトピックでは、`igDialog` を最小化および最大化できるように構成する方法、およびこれらのアクションの実行方法を示します。 + +- [*igDialog* の固定](./02_igDialog Pin.mdx): このトピックでは、`igDialog` を固定または固定解除できるように構成する方法、およびこれらのアクションの実行方法を示します。 + +- [*igDialog* の配置](./03_igDialog Position.mdx): このトピックでは、igDialog の配置方法を示します。 + +- [*igDialog* のヘッダーとフッター](./04_igDialog Header and Footer.mdx): このトピックでは、`igDialog` のフッターとヘッダーを有効にする方法、およびそれらをカスタマイズする方法を示しています。 + +- [*igDialog* での外部ページの読み込み](./05_igDialog External Page.mdx): このトピックでは、外部ページを `igDialog` コントロールに読み込む方法について示しています。 + +- [モーダル igDialog](./06_igDialog Modal State.mdx): このトピックでは、`igDialog` のモーダルの作成方法を示します。 + +- [複数の *igDialog*](./07_igDialog Multiple Dialogs.mdx): このトピックでは、入れ子の `igDialog` ウィンドウの構築方法を示します。 + +- [*igDialog* のアニメーション](./08_igDialog Animations.mdx): このトピックでは、オープンまたはクローズ時に、`igDialog` をアニメーション化する方法を示します。 + + + + + + + + + + diff --git a/docs/jquery/src/content/ja/topics/controls/igdialog/configuring/maximize-and-minimize.mdx b/docs/jquery/src/content/ja/topics/controls/igdialog/configuring/maximize-and-minimize.mdx new file mode 100644 index 0000000000..ce8ffdac86 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igdialog/configuring/maximize-and-minimize.mdx @@ -0,0 +1,223 @@ +--- +title: "igDialog の最大化と最小化" +slug: igdialog-maximize-and-minimize +--- + +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# igDialog の最大化と最小化 + +## トピックの概要 + +### 目的 + +このトピックでは、`igDialog` を最小化および最大化できるように構成する方法、およびこれらのアクションの実行方法を示します。 + +### 前提条件 + +このトピックを理解するために、以下のトピックを参照することをお勧めします。 + +- [***igDialog* の概要**](../00_igDialog Overview.mdx): このトピックでは `igDialog` コントロールの主な機能を紹介します。 + +- [***igDialog*** の追加](../01_Adding igDialog.mdx): このトピックでは、`igDialog` コントロールを Web ページに追加する方法について説明します。 + + + +### このトピックの内容 + +このトピックは、以下のセクションで構成されます。 + +- [**コントロールの状態**](#control-states) + - [状態](#states) + - [通常状態でのプレビュー](#normal-state) + - [最大化された状態でのプレビュー](#maximized-state) + - [最小化された状態でのプレビュー](#minimized-state) +- [**コントロールの構成の概要**](#configuration-summary) +- [**最小化と最大化アイコンの構成**](#minimize-maximize) + - [プロパティの設定](#minimize-maximize-properties) + - [例](#minimize-maximize-example) +- [**ダブル マウス クリック時に最大化と最小化**](#double-click) + -[プロパティ設定](#property-settings) +- [**igDialog の最小化**](#minimize) + - [コード](#minimize-code) + - [例](#minimize-example) +- [**igDialog の最大化**](#maximize) + - [コード](#maximize-code) + - [例](#maximize-example) +- [**関連コンテンツ**](#related-content) + - [トピック](#topics) + - [サンプル](#samples) + + + +## コントロールの状態 + +### 状態 + +すでにご存知のように、`igDialog` にはオープン、クローズ、最小化、最大化の 4 つの状態があります。このトピックの中で最大化と最小化について話すとき、「開いた状態」を通常の状態とします。これはウィンドウが最小化も最大化もされていない場合の状態です。 + +以下の表では、コントロールの可能性のあるすべての状態をまとめていす。さらなる詳細については、以下のセクションをご覧ください。 + +状態|説明 +--- | --- +標準|これはウィンドウが最小化も最大化もされていない場合の状態です。 +最小化|この状態では、`igDialog` は最小化されています。 +最大化|この状態では、`igDialog` は最大化されています。 + +### 通常状態でのプレビュー + +以下の画像は、通常状態の `igDialog` を示しています。この状態のときは、ウィンドウのサイズ変更や移動が可能です。 + +![](../../../images/images/04_2_igDialog_MamimizeAndMinimize_1.png) + +上の画像のボタン: + +1. 最小化ボタン +2. 最大化ボタン + +### 最大化された状態でのプレビュー + +以下の画像は、最大化された状態の `igDialog` の一部を示しています。最大化された状態では、`igDialog` はその親の領域全体を占めます。この状態のときは、ウィンドウのサイズ変更や移動はできません。 + +![](../../../images/images/04_2_igDialog_MamimizeAndMinimize_2.png) + +上の画像のボタン: + +1. 最小化ボタン +2. 復元ボタン + +### 最小化された状態でのプレビュー + +以下の画像は、最小化された状態の `igDialog` を示しています。この状態のときは、ウィンドウのサイズ変更はできません。 + +![](../../../images/images/04_2_igDialog_MamimizeAndMinimize_3.png) + +上の画像のボタン: + +1. 復元ボタン +2. 最大化ボタン + + + +## コントロールの構成の概要 + +次の表は、 `igDialog` コントロールで構成可能な項目の一覧です。このメソッドについては、表の下にある解説も参照してください。 + + +| | | | +| --- | --- | --- | +| 構成可能な要素 | 詳細 | プロパティとメソッド | +| 最小化と最大化アイコンの構成 | コントロール UI を使用して、*igDialog*の最小化と最大化を可能にするように構成するために必要なプロパティ。 | | +| ダブル クリックで最大化と最小化 | ヘッダーがダブル クリックされたときに最大化または最小化するように、*igDialog* を構成するのを可能にするプロパティ。 | | +| *igDialog* の最大化 | 最大化を可能にする *igDialog* API からのメソッド 。 | | +| *igDialog* の最小化 | 最小化を可能にする *igDialog* API からのメソッド 。 | | + + +## 最小化と最大化アイコンの構成 + +以下の表は、`igDialog` コントロールを最小化/最大化するために構成する必要があるプロパティを示しています。これらのプロパティを設定することによって、最大化と最小化ボタンが `igDialog` ヘッダーに現れます。 + +### プロパティの設定 + +以下の表では、目的の機能をプロパティ設定にマップしています。 + +目的:|使用するプロパティ:|設定の選択肢: +--- | --- | --- +最大化ボタンを表示| |true +最小化ボタンを表示| |true + + +### 例 + +下のスクリーンショットは、上記の設定を行った場合に表示される `igDialog` です。 + +![](../../../images/images/04_2_igDialog_MamimizeAndMinimize_4.png) + + + +## ダブル マウス クリック時に最大化と最小化 + +`igDialog` を構成すると、ヘッダーがダブル クリックされたときに反応することができます。そのときの状態に応じて最小化または最大化します。 + +### プロパティの設定 + +以下の表は、 プロパティの値に従った、`igDialog` の動作を示しています。 + +値|使用するプロパティ: +--- | --- +true|ウィンドウが最小化されていた場合、その状態は通常になります。
    ウィンドウが通常だった場合、その状態は最大化されます。
    ウィンドウが最大化されていた場合、通常に戻ります。 +false|`igDialog` はマウスのダブル クリックに反応しません。 +“auto” | プロパティを true に設定した場合 (つまり `igDialog` ウィンドウに最大化ボタンがある)、コントロールは、 の値が true に設定された場合と同じ様に反応します。
    プロパティを false に設定した場合 (つまり `igDialog` ウィンドウに最大化ボタンがない)、コントロールはマウスのダブル クリックに影響を受けません。 + + +## igDialog の最小化 + +前の項での構成の結果として、ヘッダーの右上隅のボタンを使用して、ダイアログ ウィンドウを最小化できるようになります。 オプションが無効になっている場合、その API を使用してコントロールを最小化できます。 + +### コード + +次のコードは、`igDialog` をその API を使用して閉じる方法を示したものです。 + +**JavaScript の場合:** + +```js +$('#igDialog).igDialog("minimize"); +``` + +### 例 + +以下のスクリーンショットは、最小化ボタンの位置を示しています。 + +![](../../../images/images/04_2_igDialog_MamimizeAndMinimize_5.png) + + + +## igDialog の最大化 + +前の項での構成の結果として、ヘッダーの右上隅のボタンを使用して、またはダイアログ ヘッダーをダブル クリックすることによって、ダイアログ ウィンドウを最大化できるようになります。 オプションが無効になっている場合、その API を使用してコントロールを最大化できます。 + +### コード + +次のコードは、`igDialog` をその API を使用して表示する方法を示したものです。 + +**JavaScript の場合:** + +```js +$('#igDialog).igDialog("maximize"); +``` + +### 例 + +以下のスクリーンショットは、最大化ボタンの位置を示しています。 + +![](../../../images/images/04_2_igDialog_MamimizeAndMinimize_6.png) + + + +## 関連コンテンツ + +### トピック + +このトピックの追加情報については、以下のトピックも合わせてご参照ください。 + +- [***igDialog* の概要**](../00_igDialog Overview.mdx): このトピックでは、`igDialog` コントロールの主な機能を紹介します。 + +- [*igDialog* の追加](../01_Adding igDialog.mdx): このトピックでは、`igDialog` コントロールを Web ページに追加する方法について説明します。 + + + +### サンプル + +このトピックについては、以下のサンプルも参照してください。 + +- [アイコン]({environment:SamplesUrl}/dialog-window/icons): `igDialog` のアイコンの表示方法を示すサンプル。 + + + + + + + + + + diff --git a/docs/jquery/src/content/ja/topics/controls/igdialog/configuring/modal-state.mdx b/docs/jquery/src/content/ja/topics/controls/igdialog/configuring/modal-state.mdx new file mode 100644 index 0000000000..051dbc4106 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igdialog/configuring/modal-state.mdx @@ -0,0 +1,110 @@ +--- +title: "igDialog モーダル状態" +slug: igdialog-modal-state +--- + +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# igDialog モーダル状態 + +## トピックの概要 + +### 目的 + +このトピックでは、`igDialog`™ のモーダルの作成方法を示します。 + +### 前提条件 + +このトピックを理解するために、以下のトピックを参照することをお勧めします。 + +- [***igDialog* の概要**](../00_igDialog Overview.mdx): このトピックでは、`igDialog` コントロールの主な機能を紹介します。 + +- [***igDialog*** の追加](../01_Adding igDialog.mdx): このトピックでは、`igDialog` コントロールを Web ページに追加する方法について説明します。 + + + +### このトピックの内容 + +このトピックは、以下のセクションで構成されます。 + +- [**概要**](#introduction) +- [**コントロールの構成の概要**](#configuration-summary) +- [**モーダル igDialog の構成**](#configuring) + - [プロパティの設定](#configuring-properties) + - [例](#configuring-example) +- [**関連コンテンツ**](#related-content) + - [トピック](#topics) + - [サンプル](#samples) + + + +## モーダル igDialog とは + +`igDialog` はモーダルに設定できます。その場合、背後のコンテンツはすべて無効で、非表示になります。モーダル ダイアログは複数表示できます。複数のモーダル ダイアログ インスタンスがあるとき、最後に開かれたダイアログがページの先頭になります。1 ページで複数のモーダル ダイアログを処理するときは、[複数のダイアログ](./07_igDialog Multiple Dialogs.mdx) トピックを参照してください。以下の例で示したのは、1 つのモーダル ダイアログの構成方法だけです。 + +> **注:** `igDialog` ウィンドウのモーダル状態は、最小化されているダイアログやピン留めされているダイアログではサポートしません。 + + + +## コントロールの構成の概要 + +次の表は、 `igDialog` コントロールで構成可能な項目の一覧です。このメソッドについては、表の下にある解説も参照してください。 + +構成可能な要素|詳細|プロパティ +--- | --- | --- +モーダル `igDialog` の構成|`igDialog`モーダルの作成時に構成する必要のあるプロパティ。| + + + +## モーダル igDialog の構成 + +`igDialog` はモーダルに設定できます。その場合、背後のコンテンツはすべて無効で、非表示になります。 + +> **注:** `igDialog` ウィンドウのモーダル状態は、最小化されているダイアログやピン留めされているダイアログではサポートしません。 + +### プロパティの設定 + +以下の表は、目的のヘッダー機能とプロパティ設定の対応表です。ダイアログの状態は最小化とピン留め以外とします。 + +目的:|使用するプロパティ:|設定の選択肢: +--- | --- | --- +igDialog モーダルにする||true +igDialog フッター タイトルを設定する||false +igDialog 状態を設定する||opened + + +### 例 + +下のスクリーンショットは、上記の設定を行った場合に表示される `igDialog` です。 + +![](../../../images/images/04_7_igDialog_ModalState_1.png) + + + +## 関連コンテンツ + +### トピック + +このトピックの追加情報については、以下のトピックも合わせてご参照ください。 + +- [***igDialog* の概要**](../00_igDialog Overview.mdx): このトピックでは、`igDialog` コントロールの主な機能を紹介します。 + +- [*igDialog* の追加](../01_Adding igDialog.mdx): このトピックでは、`igDialog` コントロールを Web ページに追加する方法について説明します。 + + + +### サンプル + +このトピックについては、以下のサンプルも参照してください。 + +- [モーダル ダイアログ]({environment:SamplesUrl}/dialog-window/modal-dialog) : このサンプルでは、モーダル `igDialog` を作成する方法を紹介します。 + + + + + + + + + + diff --git a/docs/jquery/src/content/ja/topics/controls/igdialog/configuring/multiple-dialogs.mdx b/docs/jquery/src/content/ja/topics/controls/igdialog/configuring/multiple-dialogs.mdx new file mode 100644 index 0000000000..405f6a6cd1 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igdialog/configuring/multiple-dialogs.mdx @@ -0,0 +1,126 @@ +--- +title: "igDialog の複数ダイアログ" +slug: igdialog-multiple-dialogs +--- + +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# igDialog の複数ダイアログ + +## トピックの概要 + +### 目的 + +このトピックでは、`igDialog`™ ウィンドウを次々に構築する方法を紹介します。 + +### 前提条件 + +このトピックを理解するために、以下のトピックを参照することをお勧めします。 + +- [***igDialog* の概要**](../00_igDialog Overview.mdx): このトピックでは、`igDialog` コントロールの主な機能を紹介します。 + +- [***igDialog*** の追加](../01_Adding igDialog.mdx): このトピックでは、`igDialog` コントロールを Web ページに追加する方法について説明します。 + + + +### このトピックの内容 + +このトピックは、以下のセクションで構成されます。 + +- [**複数の igDialog の構成**](#configuring) + - [概要](#configuring-overview) + - [コード](#configuring-code) + - [例](#configuring-example) +- [**複数の igDialog API**](#api) + - [メソッドの設定](#api-methods) + - [コード](#api-code) +- [**関連コンテンツ**](#related-content) + - [トピック](#topics) + - [サンプル](#samples) + + + +## 複数の igDialog の構成 + +### 概要 + +複数の `igDialog` ウィジェットを 1 ページに表示できます。これらのウィジェットは互いの関係を定義しなくても正しく表示されます。必要な作業は、これらのダイアログを開閉するスクリプトを作成することだけです。通常の `igDialog` とモーダル ダイアログを組み合わせて使用することもできます。 + +コントロールが自動的に、最初の HTML プレースホルダーを検出して、最初のダイアログ ウィジェットを最下位で初期化します。最後の `igDialog` HTML プレースホルダーが、ひとつひとつ最初のウィジェットに対応します。`igDialog` は、最上位のダイアログのアクセスを許可し、他のダイアログが最上位レベルになければそれらのダイアログを最上位まで移動する機能を与える API メソッドを開示します。 + +> **注:** この機能は、{environment:ProductNameMVC} Dialog では利用できません。 + +### コード + +以下のコードでは、第 2 のダイアログを最初のダイアログより前に表示するためのマークアップの定義方法を紹介します。 + +**HTML の場合:** + +```html +
    + Child HTML markup +
    +``` + +### 例 + +上のコードを使用し、追加でいくつか HTML コンテンツを定義すると、以下のスクリーンショットにあるような結果が得られます。イメージ ソースの詳細については、 このトピック最後の関連サンプルを参照してください。 + +![](../../../images/images/04_8_igDialog_MultipleDialogs_1.png) + + + +## 複数の igDialog API + +`igDialog` は、最上位のモーダルと非モーダル ダイアログへのアクセスを許可し、それらのダイアログが最上位レベルになければそれらのダイアログを最上位まで移動する機能を与える API メソッドを開示します。 + +### メソッドの設定 + +以下の表は、目的の機能と、それを提示するメソッドとの対応表です。 + +目的:|このメソッドを使用:|パラメーター|戻り型 +--- | --- | --- | --- +最上位モーダル ダイアログとの参照情報を取得します。| |なし|object - `igDialog` への参照情報 +ダイアログがモーダルで、現在アクティブかどうかを確認します。| |なし|boolean +モーダルでないダイアログを先頭に移動する| |*e* - ブラウザー イベント|object - 移動した `igDialog` への参照情報 + + +### コード + +以下のコードでは、前述の `igDialog` メソッドを 1 つ呼び出す方法を紹介します。 + +``` +$(“#dialog”).igDialog(“moveToTop”, e); +``` + + + +## 関連コンテンツ + +### トピック + +このトピックの追加情報については、以下のトピックも合わせてご参照ください。 + +- [***igDialog* の概要**](../00_igDialog Overview.mdx): このトピックでは、`igDialog` コントロールの主な機能を紹介します。 + +- [*igDialog* の追加](../01_Adding igDialog.mdx): このトピックでは、`igDialog` コントロールを Web ページに追加する方法について説明します。 + + +### サンプル + +このトピックについては、以下のサンプルも参照してください。 + +- [API およびイベント](../03_API Reference/02_igDialog Event Reference.mdx#attaching-handlers-jquery) : このサンプルでは、ダイアログ ウィンドウ コントロールのイベントを処理および API を使用する方法を紹介します。 + + + + + + + + + + diff --git a/docs/jquery/src/content/ja/topics/controls/igdialog/configuring/pin.mdx b/docs/jquery/src/content/ja/topics/controls/igdialog/configuring/pin.mdx new file mode 100644 index 0000000000..a6d085e6bf --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igdialog/configuring/pin.mdx @@ -0,0 +1,183 @@ +--- +title: "igDialog の固定" +slug: igdialog-pin +--- + +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# igDialog の固定 + +## トピックの概要 + +### 目的 + +このトピックでは、`igDialog`™ を固定または固定解除できるように構成する方法およびこれらのアクションの実行方法を示します。 + +### 前提条件 + +このトピックを理解するために、以下のトピックを参照することをお勧めします。 + +- [***igDialog* の概要**](../00_igDialog Overview.mdx): このトピックでは、`igDialog` コントロールの主な機能を紹介します。 + +- [***igDialog*** の追加](../01_Adding igDialog.mdx): このトピックでは、`igDialog` コントロールを Web ページに追加する方法について説明します。 + + + +### このトピックの内容 + +このトピックは、以下のセクションで構成されます。 + +- [**概要**](#introduction) +- [**コントロールの構成の概要**](#configuration-summary) +- [**固定/固定解除の構成**](#pin-unpin) + - [プロパティの設定](#pin-unpin-properties) + - [例](#pin-unpin-example) +- [**初期化の固定**](#pin-on-minimized) + - [プロパティの設定](#pin-on-minimized-properties) + - [例](#pin-on-minimized-example) +- [**igDialog の固定**](#pin) + - [コード](#pin-code) + - [例](#pin-example) +- [**igDialog の固定解除**](#unpin) + - [コード](#unpin-code) + - [例](#unpin-example) +- [**関連コンテンツ**](#related-content) + - [トピック](#topics) + - [サンプル](#samples) + + + +## 概要 + +`igDialog` が固定されると、その HTML コンテンツを含めたコントロール全体がオリジナルのコンテナーに移動し、ダイアログの絶対位置が削除されます。固定された `igDialog` はモーダルおよび最大化された状態をサポートせず、またこれは移動できません。 + +> **注:** オリジナル `igDialog` コンテナーの親要素が非表示の場合にダイアログが固定されると、ダイアログも非表示になります。 + + +## コントロールの構成の概要 + +次の表は、 `igDialog` コントロールで構成可能な項目の一覧です。このメソッドについては、表の下にある解説も参照してください。 + +| | | | +| --- | --- | --- | +| 構成可能な要素 | 詳細 | プロパティとメソッド | +| 固定/固定解除の構成 | コントロール UI を使用して、*igDialog* の固定または固定解除を構成するのに必要なプロパティです。 | | +| 初期化の固定 | 状態が最小化に変更された場合に、その親に固定されるように *igDialog* を構成するプロパティです。 | | +| *igDialog* の固定 | 固定を可能にする *igDialog* API からのメソッド 。 | | +| *igDialog* の固定解除 | 固定解除を可能にする *igDialog* API からのメソッド 。 | | + + +## 固定/固定解除の構成 + +以下の表は、`igDialog` コントロールを固定するために構成する必要があるプロパティを示しています。 プロパティを設定すると ヘッダーのピン アイコンが有効になり、一方、 プロパティを設定するとコントロールの初期状態が構成されます。 + +### プロパティの設定 + +以下の表では、目的の機能をプロパティ設定にマップしています。 + +目的:|使用するプロパティ:|設定の選択肢: +--- | --- | --- +固定ボタンを表示| |true +igDialog を固定| |true + + +### 例 + +以下のスクリーンショットは、上記の設定の結果、`igDialog` がどのように表示されるかを示しています。ウィンドウはその親の左上隅に固定されます。 + +![](../../../images/images/04_3_igDialog_Pin_1.png) + + + +## 初期化の固定 + +最小化されたときに常に固定されるように、`igDialog` を構成します。この例のような要求の場合、`igDialog` は構成されると 、最小化されます。 + +### プロパティの設定 + +以下の表では、目的の機能をプロパティ設定にマップしています。 + +目的:|使用するプロパティ:|設定の選択肢: +--- | --- | --- +最小化して固定| |true +igDialog の最小化| |minimized + + +### 例 + +以下のスクリーンショットは、上記の設定の結果、`igDialog` がどのように表示されるかを示しています。ウィンドウは最小化され、その親の左上隅に固定されます。 + +![](../../../images/images/04_3_igDialog_Pin_2.png) + + + +## igDialog の固定 + +前の項での構成の結果として、ウィンドウの固定が解除されているときにヘッダーの右上隅のボタンを押すことによって、ダイアログ ウィンドウを固定できます。 オプションが無効になっている場合、その API を使用してコントロールを固定できます。 + +### コード + +以下のコードは、その API を使って `igDialog` を固定する方法を示しています。 + +**JavaScript の場合:** + +```js +$('#igDialog).igDialog("pin"); +``` + +### 例 + +以下のスクリーンショットは、固定ボタンの位置を示しています。 + +![](../../../images/images/04_3_igDialog_Pin_3.png) + + + +## igDialog の固定解除 + +前の項での構成の結果として、ウィンドウが固定されているときにヘッダーの右上隅のボタンを押すことによって、ダイアログ ウィンドウの固定を解除できます。 オプションが無効になっている場合、その API を使用してコントロールを固定解除できます。 + +### コード + +以下のコードは、その API を使用して `igDialog` の固定を解除する方法を示しています。 + +**JavaScript の場合:** + +```js +$('#igDialog).igDialog("unpin"); +``` + +### 例 + +以下のスクリーンショットは、固定解除ボタンの位置を示しています。 + +![](../../../images/images/04_3_igDialog_Pin_4.png) + + +## 関連コンテンツ + +### トピック + +このトピックの追加情報については、以下のトピックも合わせてご参照ください。 + +- [***igDialog* の概要**](../00_igDialog Overview.mdx): このトピックでは、`igDialog` コントロールの主な機能を紹介します。 + +- [*igDialog* の追加](../01_Adding igDialog.mdx): このトピックでは、`igDialog` コントロールを Web ページに追加する方法について説明します。 + + + +### サンプル + +このトピックについては、以下のサンプルも参照してください。 + +- [アイコン]({environment:SamplesUrl}/dialog-window/icons): `igDialog` のアイコンの表示方法を示すサンプル。 + + + + + + + + + + diff --git a/docs/jquery/src/content/ja/topics/controls/igdialog/configuring/position.mdx b/docs/jquery/src/content/ja/topics/controls/igdialog/configuring/position.mdx new file mode 100644 index 0000000000..ed2cc7b124 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igdialog/configuring/position.mdx @@ -0,0 +1,165 @@ +--- +title: "igDialog 配置" +slug: igdialog-position +--- + +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# igDialog 配置 + +## トピックの概要 + +### 目的 + +このトピックでは、`igDialog`™ の配置方法を示します。 + +### 前提条件 + +このトピックを理解するために、以下のトピックを参照することをお勧めします。 + +- [***igDialog* の概要**](../00_igDialog Overview.mdx): このトピックでは、`igDialog` コントロールの主な機能を紹介します。 + +- [***igDialog*** の追加](../01_Adding igDialog.mdx): このトピックでは、`igDialog` コントロールを Web ページに追加する方法について説明します。 + + + +### このトピックの内容 + +このトピックは、以下のセクションで構成されます。 + +- [**コントロールの構成の概要**](#configuration-summary) +- [**igDialog 位置の構成**](#position) + - [プロパティ形式](#position-formats) + - [オブジェクトの例](#position-object) + - [jQuery UI オブジェクトの例](#position-jquery-object) +- [**igDialog 積み重ね順の構成**](#stack-order) +- [**関連コンテンツ**](#related-content) + - [トピック](#topics) + - [サンプル](#samples) + + + +## コントロールの構成の概要 + +次の表は、 `igDialog` コントロールで構成可能な項目の一覧です。このメソッドについては、表の下にある解説も参照してください。 + +構成可能な要素|詳細|プロパティ +--- | --- | ---- +`igDialog` 位置の構成|`igDialog` を配置するよう構成する必要があるプロパティ。| +`igDialog` 積み重ね順の構成|ダイアログの積み重ね順を指定するプロパティ。| + + + + + +## igDialog 位置の構成 + +`igDialog` は、その親にしたがって配置できます。コントロール API には、動的に構成し、変更できる というプロパティがあります。以下の表は、このプロパティの使用方法と指定できる値を示します。 + +### プロパティ形式 + +以下の表は、プロパティ で指定できる種類の形式を示しています。 + + +| | | | +| --- | --- | --- | +| 書式 | 例 | タイプ | +| { left: leftPos, top: topPos } | { left: 100, top: 200 } | JavaScript オブジェクト | +| {, my: “position”,, at: “position”,, of: “parent”,, offset: “left top”,, collision: “alternative position”, using: function(){}, } | { my: “left top”, at: “left top”, of: window, offset: “100 200”} | object (jQuery UI [position()](http://jqueryui.com/demos/position/) メソッドでサポート) | + + +### オブジェクトの例 + +以下のコードは、オブジェクトを使用して `igDialog` をどのように配置できるかを示しています。 + +**JavaScript の場合:** + +```js +$("#dialog").igDialog({ + position: { left: 100, top: 200 } +}); +``` + +**C# の場合:** + +```csharp +<%= Html.Infragistics() + .Dialog() + .Position(100,200) + .Render() +%> +``` + +### jQuery UI 位置オブジェクトの例 + +以下のコードは、jQuery UI の [`.position()`](http://api.jqueryui.com/position/) によってサポートされる特別に定義したオブジェクトを使用して `igDialog` をどのように配置できるかを示しています。 + +**JavaScript の場合:** + +```js +var dialogPosition = { + my: “left top”, + at: “left top”, + of: window, + offset: “100 200” +} +$("#dialog").igDialog({ + position: dialogPosition +}); +``` + + + +## igDialog 積み重ね順の構成 + +デフォルトで、ページ スタックの上部に `igDialog` ウィンドウが表示されます。そのデフォルト 値は 1000 です。これは、1000 より大きな値で他の DOM 要素を変更しない場合、ダイアログがページ上部に表示されます。要素を別の要素の上または下に表示するために、このデフォルト値を変更する場合は、 値を変更してこれを実行できます。 + +### 例 + +以下のコードは、 を変更する方法を示しています。 + +**JavaScript の場合:** + +```js +$("#dialog").igDialog({ + zIndex: 1001 +}); +``` + +**C# の場合:** + +```csharp +<%= Html.Infragistics() + .Dialog() + .ZIndex(1001) + .Render() +%> +``` + + +## 関連コンテンツ + +### トピック + +このトピックの追加情報については、以下のトピックも合わせてご参照ください。 + +- [***igDialog* の概要**](../00_igDialog Overview.mdx): このトピックでは、`igDialog` コントロールの主な機能を紹介します。 + +- [***igDialog*** の追加](../01_Adding igDialog.mdx): このトピックでは、`igDialog` コントロールを Web ページに追加する方法について説明します。 + + +### サンプル + +このトピックについては、以下のサンプルも参照してください。 + +- [API およびイベント](../03_API Reference/02_igDialog Event Reference.mdx#attaching-handlers-jquery): このサンプルでは、ダイアログ ウィンドウ コントロールのイベントを処理および API を使用する方法を紹介します。 + + + + + + + + + + diff --git a/docs/jquery/src/content/ja/topics/controls/igdialog/configuring/show-and-hide.mdx b/docs/jquery/src/content/ja/topics/controls/igdialog/configuring/show-and-hide.mdx new file mode 100644 index 0000000000..8c8216a24c --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igdialog/configuring/show-and-hide.mdx @@ -0,0 +1,147 @@ +--- +title: "igDialog の表示と非表示" +slug: igdialog-show-and-hide +--- + +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# igDialog の表示と非表示 + +## トピックの概要 + +### 目的 + +このトピックでは、`igDialog`™ を構成して開閉できるようにする手順と、開閉アクションの実行方法を示します。 + +### 前提条件 + +このトピックを理解するために、以下のトピックを参照することをお勧めします。 + +- [**igDialog の概要**](../00_igDialog Overview.mdx): このトピックでは、`igDialog` コントロールの主な機能を紹介します。 + +- [**igDialog の追加**](../01_Adding igDialog.mdx): このトピックでは、`igDialog` コントロールを Web ページに追加する方法について説明します。 + + + +### このトピックの内容 + +- [**コントロールの構成の概要**](#configuration-summary) +- [**閉じことのできるコントロールとして igDialog を構成する**](#allow-closing) + - [プロパティとメソッドの設定](#closing-properties-methods) + - [例](#closing-example) +- [**igDialog を非表示にする**](#hide) + - [コード](#hide-code) + - [例](#hide-example) +- [**igDialog を表示する**](#show) + - [コード](#show-code) +- [**関連コンテンツ**](#related-content) + - [トピック](#topics) + - [サンプル](#samples) + + + +## コントロールの構成の概要 + + +次の表は、 `igDialog` コントロールで構成可能な項目の一覧です。このメソッドについては、表の下にある解説も参照してください。 + +| | | | +| --- | --- | --- | +| 構成可能な要素 | 詳細 | プロパティとメソッド | +| 閉じることのできるコントロールとして *igDialog* を構成する | *igDialog* コントロールをこのコントロール自体の UI からクローズできるようにするために構成する必要のあるプロパティです。 | | +| *igDialog* を非表示にする | *igDialog* コントロールをこのコントロール自体の API からを閉じるようにするメソッドです。 | | +| *igDialog* を表示する | *igDialog* コントロールをこのコントロール自体の API からを開くようにするメソッドです。 | | + +</table> + + + +## 閉じことのできるコントロールとして igDialog を構成する + +`igDialog` コントロールをこのコントロール自体の UI からクローズできるようにするために構成する必要のあるプロパティを下の表に示します。デフォルトでは、両方のプロパティが希望の値に設定されます。 + +### プロパティとメソッドの設定 + +次の表は、表示/非表示機能の設定とプロパティの設定値との対応関係を示したものです。 + +目的:|使用するプロパティ:|設定の選択肢: +--- | --- | --- +[閉じる] ボタンを表示する| |true +キーボードを使用して *igDialog* を閉じる| |true + + +#### 例 + +下のスクリーンショットは、上記の設定を行った場合に表示される `igDialog` です。 + +![](../../../images/images/04_1_igDialog_ShowAndHide_1.png) + + + +## igDialog を非表示にする + +上のパラグラフで示した構成を行うと、ヘッダーの右上隅にあるボタンでダイアログ ウィンドウをクローズできるようになります。下の表に示す手順に従ってコントロールを構成すれば、Esc キーを使用してコントロールを閉じるようにすることもできます。 + + と の両方を無効にした場合、このコントロールをコントロール自体の API を使用して非表示にできます。 + +#### コード + +次のコードは、`igDialog` をその API を使用して閉じる方法を示したものです。 + +**JavaScript の場合:** + +```js +$('#igDialog).igDialog("close"); +``` + +#### 例 + +このスクリーンショットは、[閉じる] ボタンの位置を示しています。 + +![](../../../images/images/04_1_igDialog_ShowAndHide_2.png) + + + +## igDialog を表示する + +`igDialog` は、その API を使用する以外の方法では表示できません。 + +#### コード + +次のコードは、`igDialog` をその API を使用して表示する方法を示したものです。 + +**JavaScript の場合:** + +```js +$('#igDialog).igDialog("open"); +``` + + + + +## 関連コンテンツ + +### トピック + +このトピックの追加情報については、以下のトピックも合わせてご参照ください。 + +- [igDialog の概要](../00_igDialog Overview.mdx): このトピックでは、`igDialog` コントロールの主な機能を紹介します。 + +- [*igDialog* の追加](../01_Adding igDialog.mdx): このトピックでは、`igDialog` コントロールを Web ページに追加する方法について説明します。 + + +### サンプル + +このトピックについては、以下のサンプルも参照してください。 + +- [基本的な使用方法]({environment:SamplesUrl}/dialog-window/basic-usage): このサンプルでは、`igDialog` の高さ、幅、状態を設定する方法を紹介します。 + + + + + + + + + + diff --git a/docs/jquery/src/content/ja/topics/controls/igdialog/igdialog.mdx b/docs/jquery/src/content/ja/topics/controls/igdialog/igdialog.mdx new file mode 100644 index 0000000000..d17697db3a --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igdialog/igdialog.mdx @@ -0,0 +1,40 @@ +--- +title: "igDialog" +slug: igdialog +--- + +# igDialog + +## このグループのトピックについて + +#### 概要 + +`igDialog`™ を簡単に起動する方法と、便利な使用方法については、以下のリンクをクリックしてください。 + +#### トピック + +このセクションは、`igDialog` の実装に関するトピックで構成されています。 + +- [*igDialog* の概要](./00_igDialog Overview.mdx): このトピックでは、`igDialog` コントロールの主な機能を紹介します。 + +- [*igDialog* の追加](./01_Adding igDialog.mdx): このトピックでは、`igDialog` コントロールを Web ページに追加する方法について説明します。 + +- [*igDialog* の構成](./02_Configuring/~Configuring igDialog.mdx): このトピックでは、`igDialog` の主な機能のほか、構成方法と使用方法を紹介します。 + +- [API リファレンス (*igDialog*)](./03_API Reference/~igDialog API Reference.mdx): このトピックでは、`igDialog` API のカテゴリーを紹介します。コントロール プロパティ、メソッド、イベント、CSS クラスのほか、API を使用するときの特殊事例に関するリファレンスがあります。 + +- [*igDialog* のスタイル設定とテーマ設定](./04_igDialog Styling and Theming.mdx): このトピックでは、`igDialog` のさまざまなスタイル設定方法を紹介します。 + +- [既知の問題と制限 (*igDialog*)](./05_igDialog Known Issues.mdx): このトピックでは、`igDialog` コントロールに関する既知の問題を明らかにします。 + +- [アクセシビリティ準拠 (*igDialog*)](./06_igDialog Accessibility Compliance.mdx): このトピックでは、`igDialog` のアクセシビリティ機能について説明し、ダイアログ ウィンドウがるページのアクセシビリティ準拠を達成する方法についてヒントを紹介します。 + + + + + + + + + + diff --git a/docs/jquery/src/content/ja/topics/controls/igdialog/known-issues.mdx b/docs/jquery/src/content/ja/topics/controls/igdialog/known-issues.mdx new file mode 100644 index 0000000000..a4387a1140 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/controls/igdialog/known-issues.mdx @@ -0,0 +1,48 @@ +--- +title: "既知の問題と制限 (igDialog)" +slug: igdialog-known-issues +--- + +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# 既知の問題と制限 (igDialog) + + + +## 既知の問題点と制限の概要 + +### 既知の問題点と制約の概要表 + +以下の表で、`igDialog`™ コントロールの既知の問題と制限を簡単に説明します。いくつかの問題については、この概要表の後に、既知の問題点に関する詳しい説明と、考えられる回避策を示します。 + +凡例: | +--------|-------- +![](../../images/images/positive.png) | 回避策 +![](../../images/images/negative.png) | 既知の回避策はありません +![](../../images/images/plannedFix.png) | 既知の回避策はありません。修正予定です + +### [igDialog](#ig-dialog) + +問題|説明|状態 +------|---------|-------- +[*igDialog* の内部情報と幅や高さの情報に強い関連性がある場合、コントロールのサイズが正しく設定されない](#relative-width-height)|`igDialog` 内部のコントロールは、表示される幅や高さの情報と相対的であると正しいディメンションにはなりません。これは、`igDialog` が表示される前に、埋め込まれたコントロールのインスタンスが作成されるため、コントロールのディメンションを正しく計算できないことが原因です。 | ![](../../images/images/positive.png) +[埋め込み iframe (*igHtmlEditor* などのコントロールも) が再読み込みされ、コンテンツを失うことがあります。](#embedded-iframe) |`igDialog` の最大化、最小化がコンテンツのフレーム要素 (`igHtmlEditor` などのコントロールも) の再読み込みを引き起こすことがあります。これは、ドキュメント本文の下に配置するためにダイアログが DOM で移動されるためです。構成によっては、ピン固定で同様の動作が可能です。 | ![](../../images/images/positive.png) + +## igDialog + +### *igDialog* の内部情報と幅や高さの情報に関連性がある場合、コントロールのサイズが正しく設定されない + +視覚エフェクト コントロールが `igDialog` に埋め込まれている場合、埋め込みコントロールの幅および高さ (またはそのいずれか) がパーセンテージで相対的に設定されている場合、ダイアログが作成されないため埋め込みコントロールのディメンションが正確に計算されず、埋め込みコントロールが正しくサイズ変更されません。 + +これは、埋め込みコントロールが `igDialog` をレンダリングする前に + +> **回避方法** +> +相対ディメンションのある埋め込みコントロールを使用する場合、`igDialog` が開いた後に初期化してください。 + +### 埋め込み iframe (*igHtmlEditor* などのコントロールも) が再読み込みされ、コンテンツを失う可能性があります。 + +`igDialog` にインスタンス化された要素がその他の要素でネストされ、DOM 階層の本体の下に移動する場合、最大化/最小化操作で発生することがあります。ブラウザーが ` +
    +``` + +igDialog を作成 - `igDialog` を閉じた状態で作成します。ボタンの `click` イベントにイベント ハンドラーをアタッチすると、ボタンをクリックしたときにモーダル ダイアログが表示されます。 + +**TypeScript の場合:** +```typescript +$(function () { + + // Initialize the open button with igButton + $("#openDialog").igButton({ labelText: "Open Dialog" }); + + // Initialize the igDialog + $("#dialog").igDialog({ + state: "closed", + modal: true, + draggable: false, + resizable: false, + height: 500, + width: 400 + }); + + $("#openDialog").on({ + click: function (e) { + // Open the igDialog + $("#dialog").igDialog("open"); + } + }); +}); +``` + +### テンプレート エンジンのサンプル +このサンプルは、`igTemplatingEngine` を TypeScript で使用する方法を紹介します。 + +#### プレビュー +以下のスクリーンショットは最終結果のプレビューです。 + +![](../images/images/igTemplating_TypeScript.png) + +####詳細 +HTML を作成 - このサンプルは、TypeScript で Infragistics テンプレート エンジンを使用してネストされたテンプレートを使用する方法を紹介します。この例では、各俳優の映画コレクションが繰り返され、映画データがツリーで表示されます。 + +**HTML の場合:** +```html + + +
    +``` + +`Movie` および `Actor` クラスを追加し、映画および俳優のデータを初期化します。 + +**TypeScript の場合:** +```typescript +/// +/// +/// + +class Movie { + name: string; + year: number; + genre: string; + rating: number; + languages: string; + subtitles: string; + constructor(inName: string, inYear: number, inGenre: string, inRating: number, inLanguage: string, inSubs: string) { + this.name = inName; + this.year = inYear; + this.genre = inGenre; + this.rating = inRating; + this.languages = inLanguage; + this.subtitles = inSubs; + } +} + +class Actor { + firstName: string; + lastName: string; + nationality: Object; + movies: Movie[]; + constructor(inFirstName: string, inLastName: string, inNationality: Object, inMoviesArray: Movie[]) { + this.firstName = inFirstName; + this.lastName = inLastName; + this.nationality = inNationality; + this.movies = inMoviesArray; + } +} + +var moviesDWashington: Movie[] = []; +moviesDWashington.push(new Movie("American Gangster", 2007, "Biography, Crime, Drama", 7.9, "English, German", "Japanese, English")); + +var moviesAJolie: Movie[] = []; +moviesAJolie.push(new Movie("In the Land of Blood and Honey", 2011, "Drama, Romance, War", 3.2, "English", "English, French")); + +var moviesPCruz: Movie[] = []; +moviesPCruz.push(new Movie("Sahara", 2005, "Action, Adventure, Comedy", 5.9, "English, Spanish", "Japanese, French")); + +var moviesGClooney: Movie[] = []; +moviesGClooney.push(new Movie("Ocean's Thirteen", 2007, "Crime, Thriller", 6.9, "English", "Spanish, French")); + +var moviesJRoberts: Movie[] = []; +moviesJRoberts.push(new Movie("Eat Pray Love", 2010, "Drama, Romance", 5.3, "English, German", "Spanish, French")); + +var actors: Actor[] = []; +actors.push(new Actor("Denzel", "Washington", { key: "USA", value: "USA" }, moviesDWashington)); +``` + +次に `igGrid` および `igTree` コントロールを初期化します。 + +**TypeScript の場合:** +```typescript +$(function () { + var i = 0, currentValue, limit, + imagesRoot = "http://www.igniteui.com/images/samples/templating-engine/multiConditionalColTemplate"; + + $("#resultGrid").igGrid({ + dataSource: actors, + width: "100%", + autoGenerateColumns: false, + columns: [ + { headerText: "First Name", key: "firstName", width: 100 }, + { headerText: "Last Name", key: "lastName", width: 200 }, + { headerText: "Nationality", key: "nationality", width: 100, template: " ${nationality.value} " }, + { headerText: "Movies", key: "movies", width: 500, template: $("#colTmpl").html() }, + ], + rendered: function () { + initializeInnerControls(); + }, + features: [ + { + name: "Paging", + type: "local", + pageSize: 3, + pageSizeChanged: function () { + initializeInnerControls(); + }, + pageIndexChanged: function () { + initializeInnerControls(); + } + } + ] + }); + + function initializeInnerControls() { + $(".tree").igTree({ hotTracking: false }); + limit = $('.rating').length; + for (i = 0; i < limit; i++) { + currentValue = parseFloat($($('.rating')[i]).html()); + $($('.rating')[i]).igRating({ + voteCount: 10, + value: currentValue, + valueAsPercent: false, + precision: "exact" + }); + } + } +}); +``` + +### データ チャート サンプル +このサンプルでは、データ構成のクラス ベースの方法を使用して TypeScript でデータ チャートを作成する方法を紹介します。 +#### プレビュー +以下のスクリーンショットは最終結果のプレビューです。 + +![](../images/images/igDataChart_TypeScript.png) + +#### 詳細 + +HTML を作成します。 + +**HTML の場合:** +```html +
    + +
    + Population data from:
    + U.S. Census Bureau +
    +``` + +TypeScript でデータ ソースおよび `igDataChart` を作成します。 + +**TypeScript の場合:** +```typescript +/// +/// +/// + +class CountryPopulation { + countryName: string; + population2005: number; + population1995: number; + constructor(inName: string, populationIn1995: number, populationIn2005: number) { + this.countryName = inName; + this.population2005 = populationIn2005; + this.population1995 = populationIn1995; + } + +} + +var samplePopulation: CountryPopulation[] = []; +samplePopulation.push(new CountryPopulation("China", 1216, 1297)); +samplePopulation.push(new CountryPopulation("India", 920, 1090)); +samplePopulation.push(new CountryPopulation("United States", 266, 295)); +samplePopulation.push(new CountryPopulation("Indonesia", 197, 229)); +samplePopulation.push(new CountryPopulation("Brazil", 161, 186)); + +$(function () { + $("#data-chart").igDataChart({ + width: "80%", + height: "400px", + title: "Population per Country", + subtitle: "Five largest projected populations for 1995 and 2005", + dataSource: samplePopulation, + axes: [ + { + name: "NameAxis", + type: "categoryX", + title: "Country", + label: "countryName" + }, + { + name: "PopulationAxis", + type: "numericY", + minimumValue: 0, + title: "Millions of People", + } + ], + series: [ + { + name: "1995Population", + title: "1995", + type: "column", + isDropShadowEnabled: true, + useSingleShadow: false, + shadowColor: "#666666", + isHighlightingEnabled: true, + isTransitionInEnabled: true, + xAxis: "NameAxis", + yAxis: "PopulationAxis", + valueMemberPath: "population1995", + showTooltip: true + }, + { + name: "2005Population", + title: "2005", + type: "column", + isDropShadowEnabled: true, + useSingleShadow: false, + shadowColor: "#666666", + isHighlightingEnabled: true, + isTransitionInEnabled: true, + xAxis: "NameAxis", + yAxis: "PopulationAxis", + valueMemberPath: "population2005", + showTooltip: true + }, + { + name: "categorySeries", + type: "categoryToolTipLayer", + useInterpolation: false, + transitionDuration: 150 + }, + { + name: "crosshairLayer", + title: "crosshair", + type: "crosshairLayer", + useInterpolation: false, + transitionDuration: 500 + } + ] + }); +}) +``` + +### 円チャート サンプル +このサンプルでは、凡例および複数のレイアウト オプションを持つ円チャート コントロールを TypeScript で作成する方法を紹介します。 +#### プレビュー +以下のスクリーンショットは最終結果のプレビューです。 + +![](../images/images/igPieChart_TypeScript.PNG) + +#### 詳細 + +HTML を作成 - ラベル位置、線、角度、半径、および凡例を含む複数のオプション設定が可能な円チャートを作成します。 + +**HTML の場合:** +```html +
    +
    + + +| Start Angle: | | +| --- | --- | +| Radius: | | +| Label Position: | None Center Inside End Outside End Best Fit | +| Leader Line: | Straight Arc Spline | + +``` + +データ ソースを作成 - `PieChartCountryPopulation` クラスを追加し、国人口データを初期化します。`PieChartCountryPopulation` 配列に保存されます。 + +**TypeScript の場合:** +```typescript +/// +/// +/// + +class PieChartCountryPopulation { + countryName: string; + population2008: number; + constructor(inName: string, populationIn2008: number) { + this.countryName = inName; + this.population2008 = populationIn2008; + } +} + +var pieChartSample: PieChartCountryPopulation[] = []; +pieChartSample.push(new PieChartCountryPopulation("China", 1333)); +pieChartSample.push(new PieChartCountryPopulation("India", 1140)); +pieChartSample.push(new PieChartCountryPopulation("United States", 304)); +pieChartSample.push(new PieChartCountryPopulation("Indonesia", 228)); +pieChartSample.push(new PieChartCountryPopulation("Brazil", 192)); +``` + +igPieChart を作成 - レイアウトを構成するために、`igPieChart`、その他の必要なコントロール (`igCombo`、`slider`、など) を作成します。 + +```typescript +$(function () { + $('#pieChart').igPieChart({ + dataSource: pieChartSample, + width: "430px", + height: "430px", + dataLabel: 'countryName', + dataValue: 'population2008', + explodedSlices: [2, 3, 4], + radiusFactor: .6, + startAngle: -30, + labelsPosition: "outsideEnd", + leaderLineType: "straight", + labelExtent: 40, + legend: { element: 'legend', type: "item" } + }); + + $("#angle").slider({ + slide: function (event, ui) { + $("#pieChart").igPieChart("option", "startAngle", ui.value); + }, + min: 0, + max: 360 + }); + + $("#radius").slider({ + slide: function (event, ui) { + $("#pieChart").igPieChart("option", "radiusFactor", ui.value / 1000.0); + }, + min: 0, + max: 1000, + value: 600 + }); + + $("#labelPosition").igCombo({ + enableClearButton: false, + mode: "dropdown", + selectionChanged: function (evt, ui) { + if ($.isArray(ui.items) && ui.items[0] != undefined) { + $("#pieChart").igPieChart("option", "labelsPosition", ui.items[0].data.value); + + $("#labelExtent").slider("option", "disabled", ui.items[0].data.value != "outsideEnd"); + $("#leaderLine").igCombo("option", "disabled", ui.items[0].data.value != "outsideEnd" ? true : false); + } + } + }); + + $("#leaderLine").igCombo({ + enableClearButton: false, + mode: "dropdown", + selectionChanged: function (evt, ui) { + if ($.isArray(ui.items) && ui.items[0] != undefined) { + $("#pieChart").igPieChart("option", "leaderLineType", ui.items[0].data.value); + } + } + }); +}); +``` + +### ツリー サンプル +このサンプルは、`igTree` を TypeScript で使用する方法を紹介します。 + +#### プレビュー +以下のスクリーンショットは最終結果のプレビューです。 + +![](../images/images/igTree_TypeScript.png) + +#### 詳細 +HTML を作成 - フォルダーおよびファイルを含むファイル エクスプローラーを表す `igTree` を作成します。 + +**HTML の場合:** +```html +
    +``` + +データ ソースを作成 - フォルダー、サブフォルダー、およびファイルを含む階層構造を作成します。 + +**TypeScript の場合:** +```typescript +/// +/// +/// + +class FileType { + name: string; + type: string; + imageUrl: string; + folder: FileType[]; + constructor(inName: string, inType: string, inImageUrl: string, inFolder: FileType[]) { + this.name = inName; + this.type = inType; + this.imageUrl = inImageUrl; + this.folder = inFolder; + } +} + +function createSubfolderFiles(parentFolder: FileType, subFolders: string[], files: string[][], + folderPicture: string, filePicture: string) { + var fileIndex, subFolderIndex; + for (subFolderIndex = 0; subFolderIndex < subFolders.length; subFolderIndex++) { + parentFolder.folder.push(new FileType(subFolders[subFolderIndex], "Folder", folderPicture, [])); + + for (fileIndex = 0; fileIndex < files[subFolderIndex].length; fileIndex++) { + parentFolder.folder[subFolderIndex].folder.push(new FileType(files[subFolderIndex][fileIndex], "File", filePicture, [])); + } + } +} + +var folderMusic = new FileType("Music", "Folder", "../../images/samples/tree/book.png", []); +var musicSubFolders = ["Y.Malmsteen", "WhiteSnake", "AC/DC", "Rock"]; +var musicFiles = [["Making Love", "Rising Force", "Fire and Ice"], ["Trouble", "Bad Boys", "Is This Love"], + ["ThunderStruck", "T.N.T.", "The Jack"], ["Bon Jovi - Always"]]; +createSubfolderFiles(folderMusic, musicSubFolders, musicFiles, "../../images/samples/tree/book.png", "../../images/samples/tree/music.png"); + +... + +var folderDeleted = new FileType("Deleted", "Folder", "../../images/samples/tree/bin_empty.png", []); +var folderComputer = new FileType("Computer", "Folder", "../../images/samples/tree/computer.png", []); +folderComputer.folder.push(folderMusic); +folderComputer.folder.push(folderDocuments); +folderComputer.folder.push(folderPictures); +folderComputer.folder.push(folderNetwork); +folderComputer.folder.push(folderDeleted); + +var files = [folderComputer]; +``` + +`igTree` を作成 - `igTree` を作成し、生成されたデータ ソースにバインドします。 + +**TypeScript の場合:** +```typescript +$(function () { + var options: IgTree = { + checkboxMode: 'triState', + singleBranchExpand: true, + dataSource: $.extend(true, [], files), + initialExpandDepth: 0, + pathSeparator: '.', + bindings: { + textKey: 'name', + valueKey: 'type', + imageUrlKey: 'imageUrl', + childDataProperty: 'folder' + }, + dragAndDrop: true, + dragAndDropSettings: { + allowDrop: true, + customDropValidation: function (element) { + // Validates the drop target + var valid = true, + droppableNode = $(this); + + if (droppableNode.is('a') && droppableNode.closest('li[data-role=node]').attr('data-value') === 'File') { + valid = false; + } + + return valid; + } + } + } + + $("#tree").igTree(options); +}); +``` + +### バーコード サンプル +このサンプルでは、バーコードの作成時の TypeScript の使用方法およびその設定の構成を紹介します。 +#### プレビュー +以下のスクリーンショットは最終結果のプレビューです。 + +![](../images/images/igBarcode_TypeScript.PNG) + +#### 詳細 + +HTML を作成 - Infragistics サイトへのハイパーリンクを含むデータに基づいてバーコードを作成します。バーコード モードを変更するには、`エンコード モード`および `ECI ヘッダーの表示モード`を使用します。 + +**HTML の場合:** +```html + +| | +| --- | +| Data: | +| Encoding Mode: | +| Eci Header Display Mode: | + +``` +データ ソースを作成 - `IGProducts` クラスを追加し、 Infragistics 製品データを初期化します。すべてが `igProductsData` 配列に保存されます。 + +**TypeScript の場合:** +```typescript +/// +/// +/// + +class IGProducts { + id: number; + name: string; + constructor(productId: number, productName: string) { + this.id = productId; + this.name = productName; + } +} + +var igProductsData: IGProducts[] = []; +igProductsData.push(new IGProducts(1, "http://www.infragistics.com/products/ultimate")); +igProductsData.push(new IGProducts(2, "http://www.infragistics.com/products/professional")); +igProductsData.push(new IGProducts(3, "http://www.infragistics.com/products/jquery")); + +``` +igBarcode を作成 - レイアウトを構成するために、`igBarcode`、その他の必要なコントロール (`igCombo`、など) を作成します。 + +```typescript +$(function () { + $("#barcode").igQRCodeBarcode({ + height: "300px", + width: "100%", + data: "http://www.infragistics.com/products/jquery/samples", + }); + + $("#dataInput").igTextEditor({ + width: "300px", + value: "http://www.infragistics.com/products/jquery/help" + }); + + $("#setButton").click(function () { + $("#barcode").igQRCodeBarcode("option", "data", $("#dataInput").igTextEditor("value")); + }); + + $('#combo').igCombo({ + dataSource: igProductsData, + textKey: 'Name', + valueKey: 'ID', + width: "500px", + initialSelectedItems: [{ + index: 0 + }] + }); + + $("#encodingMode").igCombo({ + enableClearButton: false, + mode: "dropdown", + selectionChanged: function (evt, ui) { + if ($.isArray(ui.items) && ui.items[0] != undefined) { + $("#barcode").igQRCodeBarcode("option", "encodingMode", ui.items[0].data.value); + } + } + }); + + $("#eciHeaderDisplayMode").igCombo({ + enableClearButton: false, + mode: "dropdown", + selectionChanged: function (evt, ui) { + if ($.isArray(ui.items) && ui.items[0] != undefined) { + $("#barcode").igQRCodeBarcode("option", "eciHeaderDisplayMode", ui.items[0].data.value); + } + } + }); +}); +``` + +### レイアウト マネージャー サンプル +このサンプルでは、レイアウト マネージャーのグリッド レイアウトを構成する方法を紹介します。定義済みサイズのグリッドで項目を任意の位置に配置する機能も紹介します。 +#### プレビュー +以下のスクリーンショットは最終結果のプレビューです。 + +![](../images/images/igLayoutManager_TypeScript.PNG) + +#### 詳細 + +HTML を作成 - コンテンツを体系化し、さまざまなコンテナー レイアウトの設定が可能なグリッド レイアウトのレイアウト マネージャーを作成します。 + +**HTML の場合:** +```html +.. + + + +
    + +.. +``` +`igLayoutManager` を作成 - レイアウトの構造を構成するために、`items` および `gridLayout` オプションを変更します。 + +**TypeScript の場合:** +```typescript +/// +/// +/// + +$(function () { + options: IgLayoutManager = { + layoutMode: "grid", + width: "100%", + height: "600px", + gridLayout: { cols: 3, rows: 3 }, + items: [ + { rowSpan: 2, colSpan: 2, colIndex: 0, rowIndex: 0 }, + { rowSpan: 1, colSpan: 1, rowIndex: 0, colIndex: 2 }, + { rowSpan: 1, colSpan: 1, rowIndex: 1, colIndex: 2 }, + { rowSpan: 1, colSpan: 3, colIndex: 0, rowIndex: 2 } + ], + itemRendered: function(evt, ui){ + args.item.append("
    • colspan: " + args.itemData.colSpan + "
    • rowspan: " + args.itemData.rowSpan + "
    "); + + // get the element + if (args.itemData.colSpan == 2 && args.itemData.rowSpan == 2) { + args.item.css("background-color", "#eee"); + args.item.css("color", "#555"); + } else if (args.itemData.rowSpan == 1 && args.itemData.colSpan == 1) { + if (args.itemData.rowIndex == 0) { + args.item.css("background-color", "#2CBDF9"); + args.item.css("color", "#FFF"); + } else { + args.item.css("background-color", "#FFA72D"); + args.item.css("color", "#FFF"); + } + } else { + args.item.css("background-color", "#2CBDF9"); + args.item.css("color", "#FFF"); + } + } + }; + + $('#layout').igLayoutManager(options); +}); + +``` + +### ピボット ビュー サンプル +このサンプルでは、TypeScript を使用して igPivotView を作成する方法、そしてクラス ベースのアプローチでデータを割り当てる方法も紹介します。 +#### プレビュー +以下のスクリーンショットは最終結果のプレビューです。 + +![](../images/images/igPivotView_TypeScript.PNG) + +#### 詳細 + +HTML を作成 - `igPivotGrid`、`igPivotDataSelector`、および `igSplitter` の 3 つのコンポーネントを含むピボット グリッド ビューを作成します。 + +**HTML の場合:** +```html +
    +``` +`igPivotView` を作成 - ピボット グリッドで多次元 (OLAP) データを操作するツールを提供します。 + +**TypeScript の場合:** +```typescript +/// +/// +/// + +class SelectorProduct { + ProductCategory: string; + SellerName: string; + Country: string; + City: string; + Date: string; + UnitPrice: number; + UnitsSold: number; + constructor(public category, public sellerName, public country, public city, + public date, public unitPrice, public unitsSold) { + this.ProductCategory = category; + this.SellerName = sellerName; + this.Country = country; + this.City = city; + this.Date = date; + this.UnitPrice = unitPrice; + this.UnitsSold = unitsSold; + } +} + +var dataView: SelectorProduct[] = []; +dataView.push(new SelectorProduct("Clothing", "Stanley Brooker", "Bulgaria", "Plovdiv", "01/01/2012", 12.81, 282)); +dataView.push(new SelectorProduct("Clothing", "Elisa Longbottom", "US", "New York", "01/05/2013", 49.57, 296)); +dataView.push(new SelectorProduct("Bikes", "Lydia Burson", "Uruguay", "Ciudad de la Costa", "01/06/2011", 3.56, 68)); +dataView.push(new SelectorProduct("Accessories", "David Haley", "UK", "London", "04/07/2012", 85.58, 293)); +dataView.push(new SelectorProduct("Components", "John Smith", "Japan", "Yokohama", "12/08/2012", 18.13, 240)); +dataView.push(new SelectorProduct("Clothing", "Larry Lieb", "Uruguay", "Ciudad de la Costa", "05/12/2011", 68.33, 456)); +dataView.push(new SelectorProduct("Components", "Walter Pang", "Bulgaria", "Sofia", "02/19/2013", 16.05, 492)); + +function saleValueCalculator(items, cellMetadata) { + var sum = 0; + $.each(items, function (index, item) { + sum += item.UnitPrice * item.UnitsSold; + }); + return (Math.round(sum * 10) / 10).toFixed(2); +}; + +dataSource = new $.ig.OlapFlatDataSource({ + dataSource: dataView, + metadata: { + cube: { + name: "Sales", + caption: "Sales", + measuresDimension: { + caption: "Measures", + measures: [ //for each measure, name and aggregator are required + { + caption: "Units Sold", name: "UnitsSold", + aggregator: $.ig.OlapUtilities.prototype.sumAggregator('UnitsSold') + }, + { + caption: "Unit Price", name: "UnitPrice", + aggregator: $.ig.OlapUtilities.prototype.sumAggregator('UnitPrice') + }, + { + caption: "Sale Value", name: "SaleValue", aggregator: saleValueCalculator + }] + }, + dimensions: [ // for each dimension + { + caption: "Date", name: "Date", /*displayFolder: "Folder1\\Folder2",*/ hierarchies: [ + $.ig.OlapUtilities.prototype.getDateHierarchy( + "Date", // the source property name + ["year", "quarter", "month", "date"], // the date parts for which levels will be generated (optional) + "Dates", // The name for the hierarchy (optional) + "Date", // The caption for the hierarchy (optional) + ["Year", "Quarter", "Month", "Day"], // the captions for the levels (optional) + "All Periods") // the root level caption (optional) + ] + }, + { + caption: "Location", name: "Location", hierarchies: [{ + caption: "Location", name: "Location", levels: [ + { + name: "AllLocations", caption: "All Locations", + memberProvider: function (item) { return "All Locations"; } + }, + { + name: "Country", caption: "Country", + memberProvider: function (item) { return item.Country; } + }, + { + name: "City", caption: "City", + memberProvider: function (item) { return item.City; } + }] + }] + }, + { + caption: "Product", name: "Product", hierarchies: [{ + caption: "Product", name: "Product", levels: [ + { + name: "AllProducts", caption: "All Products", + memberProvider: function (item) { return "All Products"; } + }, + { + name: "ProductCategory", caption: "Category", + memberProvider: function (item) { return item.ProductCategory; } + }] + }] + }, + { + caption: "Seller", name: "Seller", hierarchies: [{ + caption: "Seller", name: "Seller", levels: [ + { + name: "AllSellers", caption: "All Sellers", + memberProvider: function (item) { return "All Sellers"; } + }, + { + name: "SellerName", caption: "Seller", + memberProvider: function (item) { return item.SellerName; } + }] + }] + }] + } + }, + + rows: "[Date].[Dates]", + columns: "[Product].[Product]", + measures: "[Measures].[UnitsSold]" +}); + +$(function () { + $("#pivotView").igPivotView({ + dataSource: dataSource + }); +}); + +``` + +### マップ サンプル +このサンプルでは、TypeScript を使用して、地理図形シリーズで世界の国のデータベースおよびシェープ ファイルをマップコントロールにバインドする方法を紹介します。 + +#### プレビュー +以下のスクリーンショットは最終結果のプレビューです。 + +![](../images/images/igMap_TypeScript.png) + +#### 詳細 + +HTML を作成 - 国をホバーしたときにツールチップを表示するマップを作成します。 + +**HTML の場合:** +```html + + +
    +``` +`igMap` を初期化して地理図形シリーズを定義します。 + +**TypeScript の場合:** +```typescript +/// +/// +/// + +class ColorPicker { + brushes: string[]; + interval: number; + constructor(_min: number, _max: number) { + this.brushes = ["#d9c616", "#d96f17", "#d1150c"]; + this.interval = (_max - _min) / (this.brushes.length - 1); + } + + getColorByIndex(val) { + var index = Math.round(val / this.interval); + if (index < 0) { + index = 0; + } else if (index > (this.brushes.length - 1)) { + index = this.brushes.length - 1; + } + return this.brushes[index]; + } +} + +var colorPicker = new ColorPicker(100000, 500000000); + +$(function () { + $("#map").igMap({ + width: "700px", + height: "500px", + windowRect: { left: 0.1, top: 0.1, height: 0.7, width: 0.7 }, + overviewPlusDetailPaneVisibility: "visible", + overviewPlusDetailPaneBackgroundImageUri: "http://www.igniteui.com/images/samples/maps/world.png", + series: [{ + type: "geographicShape", + name: "worldCountries", + markerType: "none", + shapeMemberPath: "points", + shapeDataSource: 'http://www.igniteui.com/data-files/shapes/world_countries_reg.shp', + databaseSource: 'http://www.igniteui.com/data-files/shapes/world_countries_reg.dbf', + opacity: 0.8, + outlineThickness: 1, + showTooltip: true, + tooltipTemplate: "geoShapeTooltip", + shapeStyleSelector: { + selectStyle: function (s, o) { + var pop = s.fields.item("POP2005"); + var popInt = parseInt(pop); + var colString = colorPicker.getColorByIndex(popInt); //getColorValue(popInt); + return { + fill: colString, + stroke: "gray" + }; + } + } + }] + }); + $("#map").find(".ui-widget-content").append("© OpenStreetMap contributors"); +}); +``` + +### ローダー サンプル +このサンプルでは、TypeScript で Infragistics ローダーを使用して複数のコンポーネントと機能の読み込みを紹介します。表示されるデータ チャートの型がコンボ ボックスから選択されます。データ チャートの凡例も含まれています。 + +#### プレビュー +以下のスクリーンショットは最終結果のプレビューです。 + +![](../images/images/igLoader_TypeScript.png) + +#### 詳細 + +HTML を作成します。 + +**HTML の場合:** +```html +
    + +
    + +
    +
    +``` + +TypeScript でデータ、`igLoader`、`igDataChart`、および `igCombo` を作成します。 + +**TypeScript の場合:** +```typescript +/// +/// +/// + +class DepartmentData { + label: string; + budget: number; + spending: number; + constructor(_label: string, _budget: number, _spending: number) { + this.label = _label; + this.budget = _budget; + this.spending = _spending; + } +} + +var companyData: DepartmentData[] = []; +companyData.push(new DepartmentData("Administration", 75, 35)); +companyData.push(new DepartmentData("Sales", 30, 80)); +companyData.push(new DepartmentData("IT", 60, 20)); +companyData.push(new DepartmentData("Marketing", 50, 70)); +companyData.push(new DepartmentData("Development", 80, 40)); +companyData.push(new DepartmentData("Support", 20, 45)); + +$.ig.loader({ + scriptPath: "http://www.igniteui.com/igniteui/js/", + cssPath: "http://www.igniteui.com/igniteui/css/", + resources: "igDataChart.Radial,igCombo, igChartLegend" +}); + +// jQuery's ready event can be used with the loader. +// The loader calls holdReady until all JS and CSS files are loaded. +$(function () { + + $("#chart").igDataChart({ + width: "500px", + height: "500px", + dataSource: companyData, + legend: { element: "legend" }, + axes: [{ + name: "angleAxis", + type: "categoryAngle", + label: "label", + interval: 1 + }, { + name: "radiusAxis", + type: "numericRadius", + innerRadiusExtentScale: .1, + maximumValue: 100, + minimumValue: 0, + interval: 25, + radiusExtentScale: .6 + }], + series: [{ + name: "series1", + title: 'Budget', + type: "radialLine", + angleAxis: "angleAxis", + valueAxis: "radiusAxis", + valueMemberPath: "budget", + thickness: 5, + markerType: "circle" + }, { + name: "series2", + title: 'Spending', + type: "radialLine", + angleAxis: "angleAxis", + valueAxis: "radiusAxis", + valueMemberPath: "spending", + thickness: 5, + markerType: "circle" + }], + horizontalZoomable: true, + verticalZoomable: true, + windowResponse: "immediate" + }); + + $("#seriesType").igCombo({ + selectionChanged: function (evt, ui) { + if (ui.items[0].data.value != undefined) { + $("#chart").igDataChart("option", "series", [{ + name: "series1", remove: true + }, { + name: "series2", remove: true + }, { + name: "series1", + title: "Budget", + type: ui.items[0].data.value, + angleAxis: "angleAxis", + valueAxis: "radiusAxis", + valueMemberPath: "budget", + thickness: 5, + markerType: "circle" + }, { + name: "series2", + title: 'Spending', + type: ui.items[0].data.value, + angleAxis: "angleAxis", + valueAxis: "radiusAxis", + valueMemberPath: "spending", + thickness: 5, + markerType: "circle" + }]); + } + } + }); +}); +``` + +### 関連コンテンツ +以下のトピックでは、このトピックに関連する追加情報を提供しています。 + +[TypeScript で {environment:ProductName} を使用](Using-Ignite-UI-with-TypeScript.html) - このトピックでは、{environment:ProductName} の型定義を TypeScript で使用する方法の概要を説明します。 diff --git a/docs/jquery/src/content/ja/topics/typescript-definitions/using-ignite-ui-with-typescript.mdx b/docs/jquery/src/content/ja/topics/typescript-definitions/using-ignite-ui-with-typescript.mdx new file mode 100644 index 0000000000..f011059ba9 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/typescript-definitions/using-ignite-ui-with-typescript.mdx @@ -0,0 +1,142 @@ +--- +title: "TypeScript で {environment:ProductName} を使用" +slug: using-ignite-ui-with-typescipt +--- + +# TypeScript で {environment:ProductName} を使用 + +## トピックの概要 + +このトピックでは、{environment:ProductName} の型定義を TypeScript で使用する方法の概要を説明します。 + +### 前提条件 + +以下の表に、このトピックを理解するための前提条件として必要な情報を示しています。 + +**概念** + +- jQuery、jQuery UI +- [TypeScript](http://www.typescriptlang.org/) + +**トピック** + +- [{environment:ProductName} の概要](/igniteui-for-jquery-overview) + + +### このトピックの内容 + +このトピックは、以下のセクションで構成されます。 + +- [概要](#introduction) +- [構文](#syntax) +- [{environment:ProductName} を使用した TypeScript アプリケーションの作成](#creating-app) +- [関連コンテンツ](#related-content) + +## 概要 + +{environment:ProductName}® は、強い型付け、コンパイル時のチェック、intellisense 機能を利用できるように TypeScript の型定義を提供します。 + +コントロールの定義を NPM でインストールするには、`npm install @types/ignite-ui` コマンドを使用してください。TypeScript 用の定義は、jQuery と jQuery UI の定義を拡張しているため、元の定義に依存します。 + +## 構文 + +TypeScript アプリケーションで {environment:ProductName} コントロールを使用するための構文は、一般的な JavaScript アプリケーションの構文と同じです。したがって、コード スニペットのリファレンスは、[{environment:ProductName} API ヘルプ](https://jp.igniteui.com/help/api/2025.1)を参照できます。 + +## {environment:ProductName} を使用した TypeScript アプリケーションの作成 + +### 要件 + +必要なリソースは、[{environment:ProductName} での JavaScript リソースの使用](/deployment-guide-javascript-resources) で説明している要件とオプションと同じです。その後に {environment:ProductName} Angular ディレクティブ モジュールも読み込む必要があります。アプリケーションにはいくつかのスタイルと共に、以下も含める必要があります。 + +- [jQuery](http://www.jquery.com/) 1.9 以降 +- [jQuery UI](http://jqueryui.com/) 1.10 以降 +- [TypeScript ](http://www.typescriptlang.org/) 1.4 以降 +- [{environment:ProductName}](http://jp.igniteui.com/) 15.1 以降 + +### 手順 + +1. Visual Studio で TypeScript を使用した新しい HTML アプリケーションを作成します。 +2. {environment:ProductName} のテーマと構造ファイルを含めます。 + + **HTML の場合:** +```html + + + +``` + +3. JavaScript ライブラリを追加します ([modernizr](http://modernizr.com/) はオプションです)。 + + **HTML の場合:** +```html + + + + +``` +4. {environment:ProductName} スクリプトを含めます。必要に応じて、カスタム ダウンロードを使用しますが、[いずれかの方法で {environment:ProductName} を含める](/deployment-guide-javascript-resources)こともできます。 + + **HTML の場合:** +```html + + + + + +``` + +5. アプリケーション用の TypeScript ファイルの参照パスを追加します。 + + **HTML の場合:** +```html + +``` + +6. TypeScript 用の {environment:ProductName} と jQuery の型定義への参照パスを含めます。 + + **TypeScript の場合:** +```typescript + /// + /// + /// +``` + +>**注**: TypeScript の 1.5 以前のバージョンでは、コンパイラがコンパイル中にプログラムに依存関係を組み込むため、型定義への参照パスは必須です。1.5 以降のバージョンでは、単独の tsconfig.json ファイルで定義することができます。詳細は、[tsconfig.json wiki ](https://github.com/Microsoft/TypeScript/wiki/tsconfig.json) のページを参照してください。 + +7. アプリケーションを実行する場所を、ビューで指示する必要があります。例： + + **HTML の場合:** +```typescript + + +
    + + +``` + +8. 最後に、igDialog など、必要なコントロールを追加します。 + + **TypeScript の場合:** +```typescript + $(function () { + // Initialize the igDialog + $("#sampleAppID").igDialog({ + state: "closed", + modal: true, + draggable: false, + resizable: false, + height: 500, + width: 400 + }); + }); +``` + +## 関連コンテンツ + +### サンプル + +このトピックについては、以下のサンプルも参照してください。 + +- [igHierarchicalGrid TypeScript]({environment:SamplesUrl}/hierarchical-grid/typescript) +- [igTreeGrid TypeScript]({environment:SamplesUrl}/tree-grid/typescript) +- [igPivotGrid TypeScript]({environment:SamplesUrl}/pivot-grid/typescript) diff --git a/docs/jquery/src/content/ja/topics/whats-new/00-general-changelog.mdx b/docs/jquery/src/content/ja/topics/whats-new/00-general-changelog.mdx new file mode 100644 index 0000000000..8020a38d0d --- /dev/null +++ b/docs/jquery/src/content/ja/topics/whats-new/00-general-changelog.mdx @@ -0,0 +1,144 @@ +--- +title: "変更ログ" +slug: general-changelog +--- + +# 変更ログ + +- **リリースされたバージョン** + - 2025 年 7 月 + - [24.2.12](#24212) + - [24.1.16](#24116) + - [24.2.10](#24210) + - 2025 年 5 月 + - [24.2.8](#2428) + - [24.1.14](#24114) + - 2025 年 4 月 + - [24.2.7](#2427) + - [24.1.12](#24112) + - 2025 年 2 月 + - [24.2.6](#2426) + - [24.1.11](#24111) + - [23.2.60](#23260) + - 2025 年 1 月 + - [24.2.3](#2423) + - 2024 年 9 月 + - [24.1.9](#2419) + - [23.2.58](#23258) + +## 24.2.12 + +### 修正 + +- バグ #36448 - ラジアル ラベルの書式設定プロパティ (例: Title、SubTitles) が機能しない。 +- バグ #37244 - Excel ライブラリ - カスタム DataValidation が機能しない。 +- バグ #37023 - DataChart - overflow: hidden が設定されている場合、ツールチップが切り取られて画面外に表示される。 +- バグ #37685 - Spreadsheet - Arial フォントで書式設定された数値が正しく描画されない。 + +## 24.1.16 + +### 修正 + +- バグ #36448 - ラジアル ラベルの書式設定プロパティ (例: Title、SubTitles) が機能しない。 +- バグ #37244 - Excel ライブラリ - カスタム DataValidation が機能しない。 + +## 24.2.10 + +### リファクタリング + +- `igTemplating` を 2 つのモジュールに分割しました。元の igTemplating では、条件分岐や繰り返し (`{{if}}` および `{{each}}` 句) は使用できなくなりました。これにより、動的関数の生成に依存しないため、CSP (Content Security Policy) に準拠できるようになりました。条件分岐や繰り返しを使用するには、新しい `igAdvancedTemplating` をローダー設定に追加するか、`infragistics.templating.advanced.js` ファイルを読み込んでください。`infragistics.core.js` バンドルには引き続き両方のモジュールが含まれており、`igTemplating` の全機能が利用可能です。 + +## 24.2.8 + +### 修正 + +- 残っていた非推奨の jQuery API の使用を置き換えました。 +- `startsWith` や `endsWith` などの文字列関数は、最新のブラウザではポリフィルで置き換えられなくなりました。 + +## 24.1.14 + +### 修正 + +- 残っていた非推奨の jQuery API の使用を置き換えました。 +- `startsWith` や `endsWith` などの文字列関数は、最新のブラウザではポリフィルで置き換えられなくなりました。 + +## 24.2.7 + +### 修正 + +- 非推奨となった以下の jQuery API の使用を置き換えました: + - `jQuery.css` による `outline` の 0 設定 + - `jQuery.isArray` + - `keydown`、`mousedown`、`dblclick`、`focus`、`select` などのショートハンド関数 + +## 24.1.12 + +### 修正 + +- 非推奨となった以下の jQuery API の使用を置き換えました: + - `jQuery.css` による `outline` の 0 設定 + - `jQuery.isArray` + - `keydown`、`mousedown`、`dblclick`、`focus`、`select` などのショートハンド関数 + +## 24.2.6 + +### 修正 + +- さまざまな 3.x リリースから非推奨の jQuery API の使用を置き換えました。 + +## 24.1.11 + +### 修正 + +- さまざまな 3.x リリースから非推奨の jQuery API の使用を置き換えました。 + +## 23.2.60 + +### 修正 + +- さまざまな 3.x リリースから非推奨の jQuery API の使用を置き換えました。 + +## 24.2.3 + +### 追加 +- Infragistics {environment:ProductNameASPNETCore} で ASP.NET Core for .NET 9 プロジェクトがサポートされます。詳細情報は、[{environment:ProductNameASPNETCore} の使用](Using-IgniteUI-Controls-in-ASP.NET-Core-project.html)トピックを参照してください。 +- Infragistics {environment:ProductName} は、最近リリースされた jQuery 3.7 および jQuery UI 1.14 をサポートするようになりました。 +- igGrid および igHierarchicalGrid + - 新しいプロパティ `rowAttributeTemplate` を使用すると、行に任意の属性を追加できます [#2249](https://github.com/IgniteUI/ignite-ui/issues/2249) +- igGridFiltering + - 新しいプロパティ `filterCellLabelTemplate` (対応する列設定を通じて列ごとにオーバーライド可能) を使用すると、列フィルターに関する追加情報を提供する視覚的なラベルをヘッダー セルに表示できます [#2244](https://github.com/IgniteUI/ignite-ui/issues/2244) + +## 24.1.9 + +### 修正 + +- グリッド フィルタリング - アクセシビリティ ツールの使用時に条件ドロップダウンをナビゲートできるようになりました [#2245](https://github.com/IgniteUI/ignite-ui/issues/2245) + +### 追加 + +- グリッド フィルタリング - 条件ドロップダウンの展開/縮小状態を示す ARIA 属性 [#2241](https://github.com/IgniteUI/ignite-ui/issues/2241)、[#2243](https://github.com/IgniteUI/ignite-ui/issues/2243) +- グリッド フィルタリング - フィルタリング行のボタンの ARIA ロール [#2240](https://github.com/IgniteUI/ignite-ui/issues/2240) +- グリッド フィルタリング - フィルター入力用のより詳細な ARIA ラベル [#2242](https://github.com/IgniteUI/ignite-ui/issues/2242) + +### 変更 + +- グリッド - グリッドのコンテナー要素はフォーカスできなくなりました [#2251](https://github.com/IgniteUI/ignite-ui/issues/2251) + + +## 23.2.58 + +### 修正 + +- グリッド フィルタリング - アクセシビリティ ツールの使用時に条件ドロップダウンをナビゲートできるようになりました [#2245](https://github.com/IgniteUI/ignite-ui/issues/2245) + +### 追加 + +- グリッド フィルタリング - 条件ドロップダウンの展開/縮小状態を示す ARIA 属性 [#2241](https://github.com/IgniteUI/ignite-ui/issues/2241)、[#2243](https://github.com/IgniteUI/ignite-ui/issues/2243) +- グリッド フィルタリング - フィルタリング行のボタンの ARIA ロール [#2240](https://github.com/IgniteUI/ignite-ui/issues/2240) +- グリッド フィルタリング - フィルター入力用のより詳細な ARIA ラベル [#2242](https://github.com/IgniteUI/ignite-ui/issues/2242) + +### 変更 + +- グリッド - グリッドのコンテナー要素はフォーカスできなくなりました [#2251](https://github.com/IgniteUI/ignite-ui/issues/2251) + + diff --git a/docs/jquery/src/content/ja/topics/whats-new/jquery-whats-new-landing-page.mdx b/docs/jquery/src/content/ja/topics/whats-new/jquery-whats-new-landing-page.mdx new file mode 100644 index 0000000000..7c234ab1e8 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/whats-new/jquery-whats-new-landing-page.mdx @@ -0,0 +1,28 @@ +--- +title: "新機能" +slug: jquery-whats-new-landing-page +--- + +# 新機能 + + +### 概要 + +このグループのトピックでは、さまざまなバージョンの {environment:ProductName}™ ライブラリのコントロールで導入されている新しいコントロールおよび機能に関する情報を提供します。 + +### トピック + +- [一般的な変更ログ](/general-changelog): このトピックでは、2024 Volume 1 リリース以降に {environment:ProductName} ライブラリのメジャー バージョンとマイナー バージョンの両方で導入されたすべての変更について説明します。 + +- [改訂履歴](./02_Revision History/~jQuery_Whats_New_Revision_History.mdx): このトピックは、以前のバージョンの「新機能」のトピックのアーカイブです。 + + + + + + + + + + + diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/00-whats-new-in-2023-volume2.mdx b/docs/jquery/src/content/ja/topics/whats-new/revision-history/00-whats-new-in-2023-volume2.mdx new file mode 100644 index 0000000000..e1c1578491 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/whats-new/revision-history/00-whats-new-in-2023-volume2.mdx @@ -0,0 +1,15 @@ +--- +title: "2023 Volume 2 の新機能" +slug: whats-new-in-2023-volume2 +--- + +# 2023 Volume 2 の新機能 + +このトピックは、{environment:ProductFamilyName}™ 2023 Volume 2 リリースの新機能について説明します。 + +### {environment:ProductNameASPNETCore} +Infragistics {environment:ProductNameASPNETCore} で ASP.NET Core for .NET 8 プロジェクトがサポートされます。詳細情報は、[{environment:ProductNameASPNETCore} の使用](Using-IgniteUI-Controls-in-ASP.NET-Core-project.html)トピックを参照してください。 + + +### {environment:ProductNameASPNETCore} タグ ヘルパー +{environment:ProductNameASPNETCore} タグ ヘルパーで ASP.NET Core for .NET 8 プロジェクトがサポートされます。詳細情報は、[{environment:ProductNameASPNETCore} タグ ヘルパーの使用](using-ignite-ui-tag-helpers.html)トピックを参照してください。 diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/01-whats-new-in-2022-volume2.mdx b/docs/jquery/src/content/ja/topics/whats-new/revision-history/01-whats-new-in-2022-volume2.mdx new file mode 100644 index 0000000000..1fc6605980 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/whats-new/revision-history/01-whats-new-in-2022-volume2.mdx @@ -0,0 +1,31 @@ +--- +title: "2022 Volume 2 の新機能" +slug: whats-new-in-2022-volume2 +--- + +# 2022 Volume 2 の新機能 + +このトピックは、{environment:ProductFamilyName}™ 2022 Volume 2 リリースの新機能について説明します。 + +### {environment:ProductNameASPNETCore} +Infragistics {environment:ProductNameASPNETCore} で ASP.NET Core for .NET 7 プロジェクトがサポートされます。詳細情報は、[{environment:ProductNameASPNETCore} の使用](Using-IgniteUI-Controls-in-ASP.NET-Core-project.html)トピックを参照してください。 + + +### {environment:ProductNameASPNETCore} タグ ヘルパー +{environment:ProductNameASPNETCore} タグ ヘルパーで ASP.NET Core for .NET 7 プロジェクトがサポートされます。詳細情報は、[{environment:ProductNameASPNETCore} タグ ヘルパーの使用](using-ignite-ui-tag-helpers.html)トピックを参照してください。 +## チャートの改善 + +デフォルトの動作を大幅に改善し、カテゴリ チャート API を改良して使いやすくしました。 + +これらの新しいチャートの改善点は次のとおりです: + +* ブラウザー / 画面サイズに基づいた水平ラベル回転のレスポンシブ レイアウト。 +* すべてのプラットフォームでの丸型ラベルの描画が強化されました。 +* StackedFragmentSeries にマーカー プロパティを追加しました。 +* `ShouldPanOnMaximumZoom` プロパティを追加しました。 +* 新しいカテゴリ軸プロパティ: + + - `ZoomMaximumCategoryRange` + - `ZoomMaximumItemSpan` + - `ZoomToCategoryRange` + - `ZoomToItemSpan` \ No newline at end of file diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/02-whats-new-in-2022-volume1.mdx b/docs/jquery/src/content/ja/topics/whats-new/revision-history/02-whats-new-in-2022-volume1.mdx new file mode 100644 index 0000000000..63b9fcbe13 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/whats-new/revision-history/02-whats-new-in-2022-volume1.mdx @@ -0,0 +1,46 @@ +--- +title: "2022 Volume 1 の新機能" +slug: whats-new-in-2022-volume1 +--- + +# 2022 Volume 1 の新機能 + +このトピックは、{environment:ProductFamilyName}™ 2022 Volume 1 リリースの新機能について説明します。 + +## データ凡例 + +`igDataLegend` は `Legend` のように機能する新しいコンポーネントですが、シリーズの値の表示や、シリーズの行と値の列のフィルタリング、値のスタイルと書式を設定するための多くの構成プロパティを提供します。この凡例は、さまざまな Ignite UI チャート コントロールのプロット領域内でマウスを動かすと更新されます。 + +`igDataLegend` についての完全なヘルプ トピックは、以下のリンクにあります。 + +- [igCategoryChart データ凡例](categorychart-datalegend.html) +- [igDataChart データ凡例](igdatachart-configuring-datalegend.html) +- [igFinancialChart データ凡例](financial-chart-datalegend.html) + +## データ ツールチップ レイヤー + +`DataToolTipLayer` は、シリーズの値とタイトル、およびシリーズの凡例バッジをツールチップに表示する新しい注釈レイヤーです。さらに、シリーズの行と値の列をフィルタリングし、値をスタイル設定し、書式を設定するための XamDataLegend の多くの構成プロパティを提供します。ツールチップの値は、さまざまな Infragistics チャート コントロールのプロット領域内でマウスを動かすと更新されます。 + +`DataToolTipLayer` は、各 Infragistics チャート コントロールのデフォルトのツールチップ タイプになりました。XamDataChart の `DataToolTipLayer` に存在する各プロパティは、`igCategoryChart`、`igFinancialChart`、および `igShapeChart` コントロールでも使用でき、`DataTooltip` がプレフィックスとして付けられます。 + +`DataToolTipLayer` についての完全なヘルプ トピックは、以下のリンクにあります。 + +- [igCategoryChart データ ツールチップ レイヤー](igcategorychart-datatooltip.html) +- [igDataChart データ ツールチップ レイヤー](igdatachart-configuring-datatooltip.html) +- [igFinancialChart データ ツールチップ レイヤー](financial-chart-datatooltip.html) + +## チャート機能 +=== データ チャート: + * 積層シリーズのアニメーションとトランジションインのサポートが追加されました。`IsTransitionInEnabled` プロパティを true に設定すると、アニメーションを有効にできます。そこから、`TransitionInDuration` プロパティを設定してアニメーションが完了するまでの時間を決定し、`TransitionInMode` でアニメーションのタイプを決定できます。 +=== カテゴリ チャー、財務チャート、データ チャート + * 追加された `AssigningCategoryStyle` イベントは、DataChart のすべてのシリーズで利用できるようになりました。このイベントは、背景色の `Fill` や強調表示など、シリーズ項目の外観を条件付きで構成する場合に処理されます。 + * CalloutLayer の新しい `AllowedPositions` 列挙体。チャート内のどこにコールアウトを配置するかを制限するために使用されます。デフォルトでは、コールアウトは最適な場所に配置されますが、これは TopLeft、TopRight、BottomLeft、または BottomRight を強制するために使用されます。 + * 注釈レイヤーに追加された新しいコーナー半径プロパティ。各コールアウトのコーナーを丸めるために使用されます。コーナー半径がデフォルトで追加されていることに注意してください。 + - CalloutLayer の `CalloutCornerRadius` + - FinalValueLayer の `AxisAnnotationBackgroundCornerRadius` + - CrosshairLayer の `XAxisAnnotationBackgroundCornerRadius` と `YAxisAnnotationBackgroundCornerRadius` + * さまざまな方法でスクロールバーを有効にするための新しい `HorizontalViewScrollbarMode` および `VerticalViewScrollbarMode` 列挙体。`IsVerticalZoomEnabled` または `IsHorizontalZoomEnabled` と組み合わせると、チャートをナビゲートするための軸に沿ったスクロールバーを、常設またはフェードインおよびフェードアウトすることができます。 + * 新しい `FavorLabellingScaleEnd` は、軸がスケールの最後にラベルを表示することを優先するかどうかを決定します。数値軸 (NumericX、NumericY、PercentChangeY など) とのみ互換性があります。 + * 新しい `IsSplineShapePartOfRange` は、軸に要求された軸範囲にスプライン形状を含めるかどうかを決定します。 + * 新しい `XAxisMaximumGap` は、`XAxisGap` を使用するときにプロットされたシリーズの最大許容値を決定します。ギャップは、プロットされたシリーズの列またはバー間のスペースの量を決定します。 + * 新しい `XAxisMinimumGapSize` は、XAxisGap を使用するときに、プロットされたシリーズの最小許容ピクセルベース値を決定し、各カテゴリ間に常にある程度の間隔があることを保証します。 diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/03-whats-new-in-2021-volume2.mdx b/docs/jquery/src/content/ja/topics/whats-new/revision-history/03-whats-new-in-2021-volume2.mdx new file mode 100644 index 0000000000..91198cb157 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/whats-new/revision-history/03-whats-new-in-2021-volume2.mdx @@ -0,0 +1,46 @@ +--- +title: "2021 Volume 2 の新機能" +slug: whats-new-in-2021-volume2 +--- + +# 2021 Volume 2 の新機能 + +このトピックは、{environment:ProductFamilyName}™ 2021 Volume 2 リリースの新機能について説明します。 + +### {environment:ProductNameASPNETCore} +Infragistics {environment:ProductNameASPNETCore} で ASP.NET Core for .NET 6 プロジェクトがサポートされます。詳細情報は、[{environment:ProductNameASPNETCore} の使用](Using-IgniteUI-Controls-in-ASP.NET-Core-project.html)トピックを参照してください。 + + +### {environment:ProductNameASPNETCore} タグ ヘルパー +{environment:ProductNameASPNETCore} タグ ヘルパーで ASP.NET Core for .NET 6 プロジェクトがサポートされます。詳細情報は、[{environment:ProductNameASPNETCore} タグ ヘルパーの使用](using-ignite-ui-tag-helpers.html)トピックを参照してください。 + + +### Infragistics Documents +Infragistics Documents アセンブリが、ASP.NET Core for .NET6 プロジェクトで利用可能になりました。 + +### {environment:ProductName} +{environment:ProductName} は、最近リリースされた jQuery UI 1.13.0 をサポートするようになりました。 + +## チャート機能 + +このリリースでは、すべてのチャート コンポーネント、例えば、データ チャート、カテゴリ チャート、およびファイナンシャル チャートに、いくつかの新しく改善されたビジュアル デザインと構成オプションが導入されています。 + +このリリースでは、地理マップとすべてのチャート コンポーネントのビジュアル デザインと構成オプションにいくつかの改善と簡素化が導入されています。 + +* `FinancialChart` と `CategoryChart` にデフォルトの十字線を追加しました。 +* `FinancialChart` と `CategoryChart` にデフォルトの十字線の注釈を追加しました。 +* `FinancialChart` にデフォルトの最終値の注釈を追加しました。 +* カテゴリ チャートとファイナンシャル チャートに新しいプロパティを追加しました: + - 十字線をカスタマイズするための `CrosshairsLineThickness` およびその他のプロパティ + - 十字線の注釈をカスタマイズするための `CrosshairsAnnotationXAxisBackground` およびその他のプロパティ + - 最終値の注釈をカスタマイズするための `FinalValueAnnotationsBackground` およびその他のプロパティ + - 塗りつぶしの図形 (エリア チャートなど) の不透明度を変更するための `AreaFillOpacity` + - マーカーの厚さを変更するための `MarkerThickness` +* カテゴリ チャート、ファイナンシャル チャート、データ チャート、および地理マップに新しいプロパティを追加しました: + - 同じチャート内の複数のシリーズにどのマーカー タイプを割り当てるための `MarkerAutomaticBehavior` + - 凡例で表されるすべてのシリーズのバッジの形状を設定するための `LegendItemBadgeShape` + - 凡例のすべてのシリーズにバッジの複雑さを設定するための `LegendItemBadgeMode` +* データ チャートと地理マップのシリーズに新しいプロパティを追加しました: + - 凡例で表される特定のシリーズにバッジの形状を設定するための `LegendItemBadgeShape` + - 凡例の特定のシリーズにバッジの複雑さを設定するための `LegendItemBadgeMode` +* チャートの凡例のシリーズの簡略化された図形で、円、線、または四角のみを表示します。これは、チャートの `LegendItemBadgeMode` プロパティを `MatchSeries` 列挙値に設定することで元に戻すことができます。 \ No newline at end of file diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/04-whats-new-in-2021-volume1.mdx b/docs/jquery/src/content/ja/topics/whats-new/revision-history/04-whats-new-in-2021-volume1.mdx new file mode 100644 index 0000000000..81f770e4cc --- /dev/null +++ b/docs/jquery/src/content/ja/topics/whats-new/revision-history/04-whats-new-in-2021-volume1.mdx @@ -0,0 +1,101 @@ +--- +title: "2021 Volume 1 の新機能" +slug: whats-new-in-2021-volume1 +--- +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# 2021 Volume 1 の新機能 + +このトピックは、{environment:ProductFamilyName}™ 2021 Volume 1 リリースの新機能について説明します。 + +## チャート機能 + +このリリースでは、すべてのチャート コンポーネント、例えば、データ チャート、カテゴリ チャート、およびファイナンシャル チャートに、いくつかの新しく改善されたビジュアル デザインと構成オプションが導入されています。 + +### チャート デフォルト値のデザイン更新 (i.e.1-6): + +* すべてのチャートのシリーズ/マーカーの新しい色パレット + +![](../../images/images/chartDefaults1.png) | ![](../../images/images/chartDefaults2.png) +------------- | ------------- +![](../../images/images/chartDefaults3.png) | ![](../../images/images/chartDefaults4.png) + + +* 棒/縦棒/ウォーターフォール シリーズを、角丸ではなく角が四角になるように変更しました。 + +* 散布高密度シリーズの最小/最大ヒート プロパティの色を変更しました。 + +* ファイナンシャル/ウォーターフォール シリーズのビジュアルの負の塗りつぶしの色を変更しました。 + +* マーカーの厚さを 1 px から 2 px に変更しました。 + +* PointSeries、BubbleSeries、ScatterSeries、PolarScatterSeries のマーカーのアウトラインに一致するようにマーカーの塗りつぶしを変更しました。 + + プロパティを Normal に設定すると、この変更を元に戻すことができます。 + +* TimeXAxis および OrdinalTimeXAxis のラベリングを圧縮しました。 + +* 新しいマーカー プロパティ: + + - - マーカーがアウトラインに依存するように、'MatchMarkerOutline' に設定できます。 + - - 0〜1 の値に設定できます。 + - - マーカーのアウトラインが塗りブラシの色に依存するように、'MatchMarkerBrush' に設定できます。 + +* 新シリーズ プロパティ: + +シリーズ アウトラインの表示を切り替えるように設定できます。データ チャートの場合、プロパティはシリーズ上にあることに注意してください。 + +* 新しいプロット エリア マージン プロパティ: + + プロット領域のマージン プロパティは、チャートがデフォルト ズーム レベルにある場合、ビューポートのブリード オーバー領域を定義します。一般的な使用例では、軸と最初/最後のデータ ポイントの間にスペースを提供します。以下にリストされている は、マーカーが有効になっているときに自動的にマージンを設定することに注意してください。その他は、厚さを表す `Double` を指定するように設計されており、PlotAreaMarginLeft などがチャートの 4 辺すべてにスペースを調整します。これらの新しいプロパティが追加されました: + + - + - + - + - + - + +* 新しい強調表示プロパティ: + +シリーズの強調表示にいくつかの構成が追加されました。以前のリリースでは、強調表示はホバー時にフェードするように制限されていました。これらの新しいプロパティが追加されました: + +- - ホバーされたシリーズとホバーされていないシリーズをフェードまたは明るくするかを設定します。 +- - 真上または最も近い項目など、マウスの位置に応じてシリーズを強調表示するかどうかを設定します。 + +* 次のシリーズの強調表示を追加しました: + +- 積層型 +- 散布図 +- 極座標 +- ラジアル +- 図形 + +* 次のシリーズに注釈レイヤーを追加しました: + +- 積層型 +- 散布図 +- 極座標 +- ラジアル +- 図形 + +* 積層型シリーズ内の個々の積層フラグメントのデータ ソースをオーバーライドするためのサポートが追加されました。 + +* 積層型、散布、範囲、極座標、ラジアル、シェイプ シリーズにカスタム スタイルのイベントを追加しました。 + +* 表示された最初のラベルに基づいてチャートの水平マージンを自動的に拡張するサポートが追加されました。 + +### チャート凡例の機能: + +* - 凡例項目にカーソルを合わせると、シリーズの強調表示が有効になります。 + +### 地理マップの機能 (CTP): + +* マップの表示を折り返すためのサポートが追加されました (水平方向に無限にスクロールできます)。 + +* 座標原点を折り返しながら、一部のマップ シリーズの表示をシフトするためのサポートが追加されました。 + +* シェイプ シリーズの強調表示のサポートが追加されました。 + +* シェイプ シリーズの強調表示のサポートが追加されました。 + + diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/05-whats-new-in-2020-volume2.mdx b/docs/jquery/src/content/ja/topics/whats-new/revision-history/05-whats-new-in-2020-volume2.mdx new file mode 100644 index 0000000000..28800feec2 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/whats-new/revision-history/05-whats-new-in-2020-volume2.mdx @@ -0,0 +1,19 @@ +--- +title: "2020 Volume 2 の新機能" +slug: whats-new-in-2020-volume2 +--- + +# 2020 Volume 2 の新機能 + +このトピックは、{environment:ProductFamilyName}™ 2020 Volume 2 リリースの新機能について説明します。 + +### {environment:ProductNameASPNETCore} +Infragistics {environment:ProductNameASPNETCore} で ASP.NET Core 5 プロジェクトがサポートされるようになりました。詳細情報は、[{environment:ProductNameASPNETCore} の使用](Using-IgniteUI-Controls-in-ASP.NET-Core-project.html)トピックを参照してください。 + + +### {environment:ProductNameASPNETCore} タグ ヘルパー +{environment:ProductNameASPNETCore} タグ ヘルパーで ASP.NET Core 5 プロジェクトがサポートされます。詳細情報は、[{environment:ProductNameASPNETCore} タグ ヘルパーの使用](using-ignite-ui-tag-helpers.html)トピックを参照してください。 + + +### Infragistics Documents +Infragistics Documents アセンブリが ASP.NET Core 5 プロジェクトで利用可能になりました。 diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/06-whats-new-in-2019-volume2.mdx b/docs/jquery/src/content/ja/topics/whats-new/revision-history/06-whats-new-in-2019-volume2.mdx new file mode 100644 index 0000000000..8651e3943d --- /dev/null +++ b/docs/jquery/src/content/ja/topics/whats-new/revision-history/06-whats-new-in-2019-volume2.mdx @@ -0,0 +1,19 @@ +--- +title: "2019 Volume 2 の新機能" +slug: whats-new-in-2019-volume2 +--- + +# 2019 Volume 2 の新機能 + +このトピックは、{environment:ProductFamilyName}™ 2019 Volume 2 リリースの新機能について説明します。 + +### {environment:ProductNameASPNETCore} +Infragistics {environment:ProductNameASPNETCore} で ASP.NET Core 3 プロジェクトがサポートされるようになりました。詳細情報は、[{environment:ProductNameASPNETCore} の使用](Using-IgniteUI-Controls-in-ASP.NET-Core-project.html)トピックを参照してください。 + + +### {environment:ProductNameASPNETCore} タグ ヘルパー +{environment:ProductNameASPNETCore} タグ ヘルパーで ASP.NET Core 3 プロジェクトがサポートされます。詳細情報は、[{environment:ProductNameASPNETCore} タグ ヘルパーの使用](using-ignite-ui-tag-helpers.html)トピックを参照してください。 + + +### Infragistics Documents +Infragistics Documents アセンブリが ASP.NET Core 3 プロジェクトで利用可能になりました。 diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/07-whats-new-in-2018-volume2.mdx b/docs/jquery/src/content/ja/topics/whats-new/revision-history/07-whats-new-in-2018-volume2.mdx new file mode 100644 index 0000000000..86bf6e1850 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/whats-new/revision-history/07-whats-new-in-2018-volume2.mdx @@ -0,0 +1,328 @@ +--- +title: "2018 Volume 2 の新機能" +slug: whats-new-in-2018-volume2 +--- + +# 2018 Volume 2 の新機能 + +このトピックでは、{environment:ProductFamilyName}™ 2018 Volume 2 リリースのコントロールと新機能および拡張機能を紹介します。 + +### 概要 + +以下の表は、2018 Volume 2 リリースの新機能の概要です。機能の詳細については表の下をご覧ください。 + +### Infragistics JavaScript Excel ライブラリ +機能|説明 +---|--- +[チャート サポート](#ChartSupport) |70 チャート タイプ +[スパークライン サポート](#SparklineSupport) |異なる 3 タイプ + +### igGrid +機能|説明 +---|--- +[Time Column](#TimeColumn) |igGrid の時刻列 +[フィルター セルのカスタム エディター プロバイダー](#FilteringCustomProvider)|igGrid のフィルター セルでカスタム エディター プロバイダーの実装が可能 + +### igSpreadsheet +機能|説明 +---|--- +[カスタム並べ替えダイアログ](#SortDialog)|並べ替え条件を表、ワークシート、フィルター領域に追加します。 +[トップ 10 フィルター ダイアログ](#Top10Dialog)|数字の一覧を上位パーセンテージでフィルターします。 +[フィルタリングと並べ替えの改善](#FilteringandSortingImprovements)|オートフィルター ドロップダウン +[フィルタリング メニュー](#FilteringMenu)|フィルター コンテキスト メニュー +[並べ替えメニュー](#SortingMenu)|並べ替えコンテキスト メニュー +[選択の解除](#Deselect)|セル範囲の選択を解除します。 +[FormatCells ダイアログ](#FormatCellsDialog)|スプレッドシートの FormatCells ダイアログ + +### igFinancialChart +機能|説明 +---|--- +[凡例](#NewLegend)|凡例は、ツールバーとプロット領域間に表示されます。 +[X-軸スケール区切り](#ScaleBreaks)|データのカスタム範囲を除外します。 +[コールアウト注釈](#CalloutsAnnotationFinancial)|重要なデータ ポイントを注釈します。 +[十字線レイヤー](#CrosshairsLayerFinancial)|マウス カーソルの場所でプロット領域に沿って水平線または垂直線を表示します。 +[最終値の注釈](#FinalValueAnnotationFinancial)|データソースで最後のデータポイントを注釈します。 +[ツールチップ タイプ](#TooltipTypesFinancial)|カテゴリ ツールチップと項目ツールチップ + +### igCategoryChart +機能|説明 +---|--- +[注釈のハイライト](#HighlightAnnotationCategory)|カテゴリ ハイライト レイヤーと項目ハイライト レイヤー +[コールアウト注釈](#CalloutsAnnotationCategory)|重要なデータ ポイントを注釈します。 +[十字線レイヤー](#CrosshairsLayerCategory)|マウス カーソルの場所でプロット領域に沿って水平線または垂直線を表示します。 +[最終値の注釈](#FinalValueAnnotationCategory)|データソースで最後のデータポイントを注釈します。 +[ツールチップ タイプ](#TooltipTypesCategory)|カテゴリ ツールチップと項目ツールチップ + +### igDataChart +機能|説明 +---|--- +[コールアウト注釈](#CalloutsAnnotationDataChart)|重要なデータ ポイントを注釈します。 +[十字線レイヤー](#CrosshairsLayersDataChart)|マウス カーソルの場所でプロット領域に沿って水平線または垂直線を表示します。 +[最終値の注釈](#FinalValueAnnotationDataChart)|データソースで最後のデータポイントを注釈します。 + +## Infragistics JavaScript Excel ライブラリ + +### + +![](../../images/images/whats_new_excel_charts.png) + +Excel ライブラリにチャーティング サポートが追加されました。70 タイプを超えるチャートは、ダッシュボード レポートでデータを簡単に可視化します。Excel チャーティング API は、凡例、タイトル、軸タイトル、その他グリッドライン、目盛線、色などのスタイル設定オプションを多数含むチャートの描画を完全に制御できます。簡単に　Excel チャート機能を再現できます。MS Excel をインストール必要はありません。 + +Excel ドキュメントにチャートを追加Infragistics Excel ライブラリは、Worksheet オブジェクトのインスタンスを取得し、Shapes コレクションで AddChart メソッドを呼び出します。作成するチャートのタイプ (70 タイプ)、チャートのサイズと位置、チャートに適用する書式設定を提供します。 + +#### 関連トピック +- [ワークシートにチャートを追加](../../09_JavaScript Excel Library/01_Using/JavaScript_Excel_Library_Worksheet_Charts.mdx) + +### スパークライン サポート + +![](../../images/images/whats_new_excel_sparklines.png) + +スパークラインは、ワークシート セル内に小さなチャートを表示します。スパークラインは、時期的な増加や減少、景気循環、最大値や最小値のハイライトなど値シリーズでトレンドを表示するために使用します。ワークシート データでトレンドを表示、共有できます。 + +Infragistics Worksheet のインスタンスは、SparklineGroups コレクションで Add メソッドを呼び出します。作成するスパークラインのタイプ (Column、Line、Stacked) 、スパークラインを挿入するセル、スパークラインを使用してデータを表示するセル範囲を提供します。 + +スパークラインを作成後、Infragistics Excel Library の直感的な API でスパークラインをビジュアル要件に合わせてスタイル設定できます。 API は、ポイントの高/低、マイナス ポイント、最初のポイント、最終ポイントの色を制御できます。 + +#### 関連トピック +- [スパークラインの使用](../../09_JavaScript Excel Library/01_Using/JavaScript_Excel_Library_Adding_a_Sparkline_to_an_excel_worksheet.mdx) + +## igGrid + +### 時刻列 + +![](../../images/images/time_column.png) + +時刻列の新しい列型を igGrid コントロールに追加しました。列 `dataType` を `time` に設定します。定義済みのタイムピッカー エディターを使用して時刻データをフィルターして更新できます。 + +### フィルター セルのカスタム エディター プロバイダー + +フィルター セルのためにカスタム エディター プロバイダーを作成できます。つまり、igGrid コンテンツをフィルターするために igEditorProvider クラスを拡張してカスタム エディターを設定できます。詳細については、以下のサンプルを参照してください。 + +### サンプル +[Excel スタイル フィルタリング]({environment:SamplesUrl}/grid/filtering-combo-editor-provider) + +## igSpreadsheet + +### カスタム並べ替えダイアログ + +![](../../images/images/spreadsheet_sort_dialog_whats_new.png) + +Excel ドキュメントで並べ替えは重要な機能ですが、ユーザー設定の並べ替えダイアログでは Excel データのカスタムな並べ替えが可能です。たとえば、Department 列と Employee 列がある場合に Department (すべての従業員を同じ部署でグループ化) で並べ替えてから名前 (各部署内でアルファベット順) で並べ替えるなどの設定が可能です。 + +igSpreadsheet の並べ替えダイアログの詳細については、『並べ替えダイアログのインタラクション』トピックを参照してください。 + +#### 関連トピック +- [カスタム並べ替えダイアログ](/images/igspreadsheet-sort-dialog) + +### トップ 10 フィルター ダイアログ + +![](../../images/images/whats_new_excel_top_10.png) + +トップ 10 機能を使用してリストをフィルター時に上位 10 項目または 10 パーセントのみが表示されます。また、数値またはパーセンテージが下位のレコードを表示することも可能です。たとえば、企業のトップ給与を示す場合、Salary 列をフィルターしてトップ 10 の給与のレコードのみ表示できます。トップ 10 パーセントの給与所得者をフィルターした場合は、合計の 10 % の収入を得た人のみが含まれます。 + +トップ 10 は、任意のパーセンテージでフィルターできます。 + +### フィルタリングと並べ替えの改善 + +18.1 でオートフィルター ドロップダウンを追加しました。ドロップダウンは昇順/降順に並べ替えるメニュー項目が含まれ、列に適用されたフィルターをクリアして数値/日付/テキスト フィルターを適用できます。ただし、前景色、塗りつぶし、アイコンにもどついて並べ替えやフィルターする機能はサポートされませんでした。18.2 では、ドロップダウンの項目を前景、塗りつぶし、列内のセル アイコンに基づいてフィルタリング、並べ替えできます。 + +### フィルタリング メニュー + +![](../../images/images/whats_new_excel_filter_menu.png) + +### 並べ替えメニュー + +![](../../images/images/whats_new_excel_sorting_menu.png) + +### 選択の解除 + +Excel で複数のセルまたは範囲の選択時に必要のないセルを選択した場合、選択解除機能で選択範囲内のセルの選択を解除できます。Ctrl キーを押しならがらクリック、あるいはクリックアンドドラッグで選択したセルまたは範囲の選択を解除できます。セルを再度選択する場合は、Ctrl キーを押しながらセルをクリックして選択します。 + +### FormatCellsDialog + +igSpreadsheet を使用してセル データの表示方法を変更できます。たとえば、小数点の右にある桁数を指定、あるいはセルにパターンおよび境界線を追加できます。この設定を「セルの書式設定」ダイアログ ボックスでアクセスして変更できます。 + +- 表示形式タブ + +デフォルトですべてのワークシート セルが一般的な数値形式で書式設定されます。一般的な形式では、セルに入力された値はそのまま使用されます。たとえば、セルに 36526 と入力して Enter を押した場合、セル コンテンツは 36526 と表示されます。セルで一般的な数値形式が使用されるためです。ただし、最初にセルを通貨として書式設定した場合、数字 36526 は $36,526.00 として表示されます。 + +![](../../images/images/Format_Cells_Dialog_Number.png) + +- 配置タブ + +テキストと数値を配置し、配置タブを使用してセルの方向を変更してテキスト コントロールを指定できます。 + +![](../../images/images/Format_Cells_Dialog_Alignment.png) + +- フォント タブ + +用語「フォント」は、書体 (Arial など) とその属性 (ポイント サイズ、フォント スタイル、下線、色、エフェクト) を指します。セル書式設定ダイアログ ボックスのフォント タブを使用してこれらの設定を制御します。ダイアログ ボックスのプレビュー セクションのレビューで設定のプレビューを表示できます。 + +![](../../images/images/Format_Cells_Dialog_Font.png) + +- 罫線タブ + +Excel で単一セルまたはセルの範囲の周りに境界線を配置できます。セルの左上角から右下角、またはセルの左下角から右上角へ線を描画できます。線のスタイル、線の太さ、または線の色を変更してデフォルト設定のセルの境界線をカスタマイズできます。 + +![](../../images/images/Format_Cells_Dialog_Border.png) + +- 塗りつぶしタブ + +セル書式設定ダイアログ ボックスの塗りつぶしタブを使用して選択セルの背景色を設定します。[パターン リスト] を使用して 2 色パターンまたはセル背景にシェードを適用できます。 + +![](../../images/images/Format_Cells_Dialog_Fill.png) + +- 保護タブ + +[保護] タブでワークシートをロックしてデータや数式を保護できます。このオプションは、ワークシートも保護しない限り、効果はありません。 + +![](../../images/images/Format_Cells_Dialog_Protection.png) + + +## igFinancialChart + +### 凡例 + +![](../../images/images/whats_new_financial_chart_legend.png) + +ファイナンシャル チャートは、ツールバーとプロット領域の間に表示する凡例がビルトインで含まれます。凡例はデータソースのタイトル、最終値、最初と最後の値間のパーセンテージの変更を示します。 + +### コールアウト注釈 + +![](../../images/images/whats_new_financial_chart_callouts.png) + + +コールアウト注釈は重要なデータポイントに注釈を追加したり、ロジックに基づくコールアウト ボックスの値をカスタマイズしたりできます。たとえば、株式分割や配当を表示して、データ ソース内の最大値段を計算できます。 + +#### 関連トピック +- [注釈とインタラクション レイヤー](financial-chart-annotation-and-interaction-layers.html#CalloutLayer) + +### 十字線レイヤー + +![](../../images/images/whats_new_financial_chart_crosshair.png) + + +カーソルの位置に水平線、垂直線またはその両方で十字線の表示を設定できます。十字線注釈はカーソルの位置に一致するデータ ポイントを表示し、X 軸と Y 軸ラベルの上にカラーボックスで値を表示できます。 + +#### 関連トピック +- [注釈とインタラクション レイヤー](financial-chart-annotation-and-interaction-layers.html#CrosshairLayer) + +### 最終値 + +![](../../images/images/whats_new_financial_chart_final_values.png) + +ファイナンシャル チャートでは、データ ソース内の最終データ ポイントの値に最終値注釈を追加する方法を示します。この注釈は Y 軸ラベルの上にカラーボックスとして描画されます。 + +#### 関連トピック +- [注釈とインタラクション レイヤー](financial-chart-annotation-and-interaction-layers.html#FinalValueLayer) + +### ツールチップ タイプ + +![](../../images/images/whats_new_financial_chart_tooltips.png) + +ファイナンシャル チャートの ToolTipType プロパティは 2 つのツールチップタイプが追加されました。 + +* 特定の日付のすべてのシリーズのツールチップを組み合わせて描画するカテゴリ ツールチップ。 + +* 特定の日付で各シリーズの個々のツールチップを描画する項目ツールチップ。 + +#### 関連トピック +- [注釈とインタラクション レイヤー](financial-chart-annotation-and-interaction-layers.html#CategoryTooltipLayer) + +### X-軸スケール区切り + +![](../../images/images/whats_new_financial_chart_scale_breaks.png) + +ファイナンシャル チャートに X-軸でスケール区切りを定義してデータソースや曜日で任意の範囲を除外できます。たとえば、週末に分類されるすべてのデータ項目を除外できます。 + +#### 関連トピック +- [X-軸スケール区切りの設定](financial-chart-configuring-axis-scale-breaks.html) + +## igCategoryChart + +### 強調表示レイヤー + +![](../../images/images/whats_new_category_chart_highlight.png) + + +カテゴリ チャートは、ユーザーがプロットしたデータ ポイントをホバーする 2 つのハイライト レイヤーを表示できます。 + +* カテゴリ ハイライト レイヤーは、マウスカーソルに最も近いカテゴリの最初から最後に拡張する垂直の長方形を描画します。この長方形は、デフォルトで半透明な灰色で塗りつぶされます。 + +* 項目ハイライト レイヤーは、マウスカーソルに最も近いカテゴリの各データ項目の垂直長方形を描画します。この長方形は、デフォルトでシリーズの色と一致する半透明色で塗りつぶされます。 + +#### 関連トピック +- [カテゴリ ハイライト レイヤー](/igcategorychart-category-highlight-layer) +- [項目ハイライト レイヤー](/igcategorychart-item-highlight-layer) + +### コールアウト注釈 + +![](../../images/images/whats_new_category_chart_callouts.png) + + +コールアウト注釈は重要なデータポイントに注釈を追加、あるいはロジックに基づくコールアウト ボックスの値をカスタマイズできます。たとえば、データ ソース内の最大値を計算できます。 + +#### 関連トピック +- [コールアウト レイヤー](/igcategorychart-callouts-layer) + +### 十字線レイヤー + +![](../../images/images/whats_new_category_chart_crosshair.png) + + +カーソルの位置に水平線、垂直線またはその両方で十字線の表示を設定できます。十字線注釈はカーソルの位置に一致するデータ ポイントを表示し、X 軸と Y 軸ラベルの上にカラーボックスで値を表示できます。 + +#### 関連トピック +- [十字線レイヤー](/igcategorychart-crosshairs-layer) + +### 最終値 + +![](../../images/images/whats_new_category_chart_final_value.png) + +カテゴリ チャートでは、データ ソース内の最終データ ポイントの値に最終値注釈を追加する方法を示します。この注釈は Y 軸ラベルの上にカラーボックスとして描画されます。 + +#### 関連トピック +- [最終値レイヤー](/igcategorychart-final-value-layer) + +### ツールチップ タイプ + +![](../../images/images/whats_new_category_chart_tooltip.png) + +カテゴリ チャートの ToolTipType プロパティは 2 つのツールチップタイプが追加されました。 + +* データ カテゴリ内のすべてのシリーズのツールチップを組み合わせて描画するカテゴリ ツールチップ。 + +* データ カテゴリの各シリーズの個々のツールチップを描画する項目ツールチップ。 + +#### 関連トピック +- [カテゴリ ツールチップ レイヤー](/igcategorychart-category-tooltip-layer) +- [項目ツールチップ レイヤー](/igcategorychart-item-tooltip-layer) + +## igDataChart + +### コールアウト注釈 + +![](../../images/images/whats_new_datachart_callout.png) + +コールアウト レイヤーは、データ チャートの新機能です。データ ポイントに注釈したり、値を表示したりできます。コールアウト レイヤーは複数データ シリーズまたは単一のデータ シリーズで使用できます。このコールアウト レイヤーの外観をカスタマイズして、コールアウト ラベルをデータ項目にバインドや連続したデータ ポイント間の変更を計算します。 + +#### 関連トピック +- [コールアウト レイヤー](../../02_Controls/igDataChart/04_Configuring/04_Hover Interactions/06_HoverInteractions_Callout_Layer.mdx) + +### 十字線レイヤー + +![](../../images/images/whats_new_datachart_crosshair.png) + +十字線レイヤーの注釈機能は、マウス カーソルの位置にデータ ポイントの値を表示し、X 軸と Y 軸ラベルの上にカラーボックスで値を表示できます。 + +#### 関連トピック +- [十字線レイヤー](../../02_Controls/igDataChart/04_Configuring/04_Hover Interactions/03_HoverInteractions_Crosshair_Layer.mdx) + +### 最終値の注釈 + +![](../../images/images/whats_new_datachart_final_value.png) + +最終値レイヤーは、データソースの最後のデータポイントの値を示す注釈レイヤーです。この注釈は Y 軸ラベルで各データソースにカラーボックスとして描画されます。 + +#### 関連トピック +- [最終値レイヤー](../../02_Controls/igDataChart/04_Configuring/04_Hover Interactions/05_HoverInteractions_Final_Value_Layer.mdx) diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/08-whats-new-in-2018-volume1.mdx b/docs/jquery/src/content/ja/topics/whats-new/revision-history/08-whats-new-in-2018-volume1.mdx new file mode 100644 index 0000000000..408599581d --- /dev/null +++ b/docs/jquery/src/content/ja/topics/whats-new/revision-history/08-whats-new-in-2018-volume1.mdx @@ -0,0 +1,151 @@ +--- +title: "2018 Volume 1 の新機能" +slug: whats-new-in-2018-volume1 +--- + +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# 2018 Volume 1 の新機能 + +このトピックでは、{environment:ProductFamilyName}™ 2018 Volume 1 リリースのコントロールと新機能および拡張機能を紹介します。 + + +### 概要 + +以下の表は、2018 Volume 1 リリースの新機能の概要です。機能の詳細については表の下をご覧ください。 + +### スプレッドシート +機能 | 説明 +---|--- +[並べ替え](#SpreadSheetSorting)| Worksheet レベルの並べ替え。 +[条件付き書式](#ConditionalFormattingSpreadsheet)| Worksheet で条件付き書式の表示のサポート。 +[ワークシート フィルタリング](#WorksheetFiltering)| ワークシート レベル フィルターが追加されました。 +[表の機能拡張](#TableImprovments)| 複数の機能拡張が追加されました。 + +### Excel エンジン +機能 | 説明 +---|--- +[条件付き書式](#ConditionalFormattingExcel)| 条件付き書式の作成、保存、読み込みのサポート。 +[ワークシートのフィルター処理と並べ替え](#ExcelWorksheetFiltering)| ワークシート レベルのフィルター処理と並べ替えが追加されました。 +[サポートされるその他の Excel 関数](#ExcelFunctions)| サポートされる Excel 関数が追加されました。 + +### igFinancialChart + +機能 | 説明 +---|--- +[ファイナンシャル チャート](#financialChart)| このリリースではファイナンシャル チャートが追加されました。 + +### igTimePicker + +機能 | 説明 +---|--- +[タイムピッカー](#timepicker)| igTimePicker コントロールは、時間のみの入力を表示します。ドロップダウンは時:分の値をリストします。 + +### igUpload + +機能|説明 +---|--- +[複数ファイルのアップロードで単一の要求を使用](#useSingleRequest)|コントロールで単一の HTTP 要求を使用して複数のファイルをアップロードできます。 + +## Excel + +### 条件付き書式の作成、保存、読み込みのサポート +条件付き書式は、セル値に基づいてセルに色、アイコン、またはデータ バーなどの書式設定を適用します。条件付き書式ルールを作成する必要があります。たとえば、条件付き書式ルールは、値が $2000 より小さい場合、セルの色を赤に設定します。このルールを適用する場合、$2000 より小さい値を持つセルを簡単に表示できます。 + +#### 関連トピック +- [Excel Engine の条件付き書式設定](../../09_JavaScript Excel Library/01_Using/JavaScript_Excel_Library_Conditional_Formatting.mdx) + +### ワークシート レベルのフィルター処理と並べ替え +WorksheetTable のエンジンに並べ替えおよびフィルタリングのサポートがあります。Excel では、ワークシートでテーブル以外に並べ替えおよびフィルタリングが可能な単一の領域を定義できます。また、ワークシートで並べ替えたその他の領域を定義できます。したがって、ワークシート レベル並べ替えおよびフィルタリング操作のサポートを Excel Engine に追加しました。また、アイコン並べ替え/フィルタリング クラスを公開しました。以前アイコンはアイコン セットの条件付き書式で指定していましたが、条件付き書式はサポートされていなかったために内部仕様でした。 + +#### 関連トピック +- [Excel エンジンでワークシートのフィルタリング](javascript-excel-library-worksheet-level-filtering.html) +- [Excel エンジンでワークシートの並べ替え](javascript-excel-library-worksheet-level-sorting.html) + +### サポートされるその他の Excel 関数 + +100 個以上の新しい関数を Excel Engine に追加しました。 + +- [Infragistics Excel Engine でサポートされる関数](ExcelEngine-List-of-Supported-Built-in-Functions.html) +- [JavaScript Excel Library でサポートされる関数](JavaScript-Excel-Library-List-of-Supported-Built-in-Functions.html) + +## スプレッドシート + +### WorkSheet レベルの並べ替え + +このリリースでは、igSpreadsheet コントロールおよび Excel エンジンで Worksheet オブジェクトに並べ替え機能を追加しました。列または行を昇順または降順に並べ替えることができます。 + +#### 関連トピック +[igSpreadsheet の並べ替え](javascript-excel-library-worksheet-level-sorting.html) + +### Spreadsheet の条件付き書式設定 + +Excel Engine に条件付き書式機能が追加されたことにより、この機能をスプレッドシートでも使用できます。スプレッドシートは Microsoft Excel に利用可能なすべての条件付き書式機能の描画をサポートします。Microsoft Excel に複数の定義済みスタイル (プリセット) があります。これを使用すると、条件付き書式をデータにすばやく適用できます。3 つのカテゴリにグループ化されます。 +- データ バーは、各セルに追加された棒グラフのようなデータ バー水平バーです。 +- カラー スケールは、各セルの色をその値に基づいて変更します。各色スケールは、2 色または 3 色のカラー グラデーションを使用します。たとえば、緑黄赤 (GYR) 色スケールで最大値の色は緑、平均値は黄色、最小値は赤になります。 +- アイコン セットは特定のアイコンをその値に基づいて各セルに追加します。 + +#### 関連トピック +- [条件付き書式](/igspreadsheet-conditional-formatting) + +### ワークシート レベル フィルター + +ワークシートの情報をフィルタリングして値をすばやく見つけることができます。1 列以上のデータをフィルターでき、表示する項目だけでなく除外する項目もフィルター設定できます。リストの選択に基づいてフィルタリング、または特定のフィルターを作成して必要なデータのみ表示できます。データのフィルター時、1 列以上の値がフィルター条件に合わない場合、すべての行が非表示になります。数値またはテキスト値をフィルター、あるいは背景やテキストに色書式を適用したセルの色でフィルターできます。 + +igSpreadsheet のセルのコンキスト メニューでフィルター オプションを使用できます。フィルター適用後、ユーザーはフィルター ドロップダウンでカスタム フィルター オプションを選択し、その他のフィルタリング オプションのあるフィルタードロップダウンを開くことができます。 + +#### 関連トピック +- [ワークシートのフィルタリング](javascript-excel-library-worksheet-level-filtering.html) + +### AutoFilter + +WorksheetTable のヘッダーとワークシート レベルのフィルタリング領域のヘッダー セルにフィルター関連メニューを表示するドロップダウン ボタンを表示します。ボタンは並べ替えとフィルター、ツールチップは列のフィルターを表示します。メニューは並べ替えとフィルタリングのオプションを表示します。フィルター オプションは、Excel と同様に列のデータ タイプに依存しません。以下のいずれかが表示されます。 +- テキスト フィルター +- 数値フィルター +- 日付フィルター + +### 複数の機能拡張 + +#### コピー/貼り付け +表は、ソース選択がテーブル全体を含む場合にコピーされます。テーブル全体 (セルでクリック、ctrl+a を数回押下) を選択、クリップボードにコピー、貼り付けます。これで表のコピーが作成されました。WorksheetTable 内で貼り付けした場合、自動的に表を展開して貼り付け領域を含みます。 + +#### 編集 +WorksheetTable の右端/下端に直ちに合わせるために入力または編集した場合、表を展開 (Excel と同様の個別の処理の取り消し不可) します。 + +#### タブ ナビゲーション +表内のタブ ナビゲーションは、次行または前行にラップするテーブル内をナビゲーションします。Excel 同様、表の最後の表示セルからタブしたときに表が自動的に展開されます。 + +#### 集計行の数式 +Excel で表の集計行がアクティブな場合、ドロップダウン ボタンが表示されて表に共通の数式を選択できます。Excel ではその他の数式を選択するためのダイアログを表示するオプションがあります。ドロップダウン ボタンをクリックまたはセルがアクティブなときに Alt+Down を押して表示できます。 + +#### コンテキスト メニュー機能拡張 +コンテキスト メニュー項目が追加されました。行列を表に挿入や追加、表の行列の選択、集計行の切り替え、表を範囲に変換を追加がメニュー項目に含まれます。 + +表のセル コンテキストは、アクティブ セルが WorksheetTable の一部である場合に表示される以外はセル コンテキスト メニューと同様です。新しいメニューには、表に影響する新しいコマンドがあります。ActiveTable および ActiveCell が表の一部として公開されました。 + +#### リスト検証 +Excel では、値を明示的なリスト、または値を含むセルの範囲にポイントを含むセルのリスト データ入力規則と呼ばれる特別なデータ入力規則タイプを定義できます。セル ドロップダウンを表示するかどうかを確認するオプションがあります。Excel エンジンではデータ入力規則クラスをサポートし、スプレッドシートでも編集時に入力規則を使用していますが、有効な値一覧は公開していませんでした。本リリースではエンドユーザーに一覧を公開します。ドロップダウン ボタンの表示をサポート (ShowDropdown が true の場合) し、値のドロップダウン リストを表示します。ドロップダウン ボタンをクリックまたはセルがアクティブなときに Alt+Down を押して表示できます。 + +#### セル ドロップダウン +セル ドロップダウンを表示する方法は 2 通りあり、セルのコンテキスト メニューの [ドロップダウン リストから選択] または Alt+Down で表示できます。アクティブ セルの真上または真下にテキスト/文字列の値のドロップダウンを表示します。そのため、リスト データの検証のようにはリストのコンテンツを明示的に定義しません。注: igSpreadsheet は Excel とは異なり、このドロップダウンは編集時には表示されません。Excel 同様、数値を無視して空白や境界などで停止します。 + +## igFinancialChart +igFinancialChart は軽量で高パフォーマンスなチャートです。このチャートは、シンプルで直感的な API を使用した財務データの表示を簡単に構成できます。データ (コレクションまたはコレクションのコレクション) をバインドするだけで後の作業はチャートがすべて行います。チャートを使用してデータを可視化する複数方法を提供します。価格およびボリュームに複数の表示モードおよび財務指標の大量を提供します。チャートにデータ コンテキストを表示するためにラベルの書式設定を使用します。 + +#### 関連トピック +- [ファイナンシャル チャート](financial-chart-overview.html) + +## igTimePicker +igTimePicker コントロールでは、時刻のみの入力と指定した時刻：分の値を含むドロップダウンのあるエディターを使用できます。デフォルトでリストされる時間値は 30 分のデルタです。igTimePicker 入力および表示書式設定の構成が可能で、コントロールはデフォルトで 12 時間形式を使用します。 + +#### 関連トピック +- [igTimePicker の概要](/igtimepicker-overview) + +## igUpload + +### 複数ファイルのアップロードで単一の要求を使用 + + オプションは、複数のファイル アップロード処理を構成するために使用します。 + +#### 関連トピック +- [igUpload の構成](../../02_Controls/igUpload/01_Working with igUpload/00_igUpload_Configuring_igUpload.mdx) diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/09-whats-new-in-2017-volume2.mdx b/docs/jquery/src/content/ja/topics/whats-new/revision-history/09-whats-new-in-2017-volume2.mdx new file mode 100644 index 0000000000..9d42b81788 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/whats-new/revision-history/09-whats-new-in-2017-volume2.mdx @@ -0,0 +1,312 @@ +--- +title: "2017 Volume 2 の新機能" +slug: whats-new-in-2017-volume2 +--- + +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# 2017 Volume 2 の新機能 + +このトピックでは、{environment:ProductFamilyName}™ 2017 Volume 2 リリースのコントロールと新機能および拡張機能を紹介します。 + + +## 概要 + +以下の表に 2017 Volume 2 の新機能の概要を示します。追加の詳細は以下のとおりです。 + +機能 | 説明 +---|--- +[新規のバンドル ファイル](#bundledFiles)| Excel、スプレッドシート、およびスケジューラの新規のバンドル ファイルがあります。 +[新しいローカライズおよびグローバリゼーション設定](#localization) | ローカライズおよびグローバリゼーション オプションをすべてのローカライズ可能なコンポーネントに設定できます。ページのすべてのコントロールで設定するか、コントロールごとに設定できます。初期化またはランタイムに設定できます。 +.NET Core 2.0 サポート | IgniteUI MVC ラッパーは .NET Core 2.0 および Razor Pages で使用可能になりました。 + +### スプレッドシート +機能 | 説明 +---|--- +[編集](#spreadsheetEditing)| スプレッドシート コンテンツの編集。 +[MVC ラッパー](#spreadsheetMVCWrapper)| スプレッドシート コントロールの MVC ラッパー。 + +### エディター + +機能 | 説明 +---|--- +[キーボードの制御](#suppressKeyboard)| ドロップダウン ボタンがクリック/タップされたときにスクリーン キーボードが表示されないようにします。 + +### igDateEditor/igDatePicker + +機能 | 説明 +---|--- +[スピン デルタをオブジェクトとして構成](#spinDeltaObject)| スピン デルタを各時間間隔の指定値を定義するオブジェクトとして構成できます。 + +### igValidator + +機能 | 説明 +---|--- +[すべてのルールの実行](#execute-all-rules)| 新しいオプションは、複数のルールを実行し、複数のエラー メッセージを表示できます。 + +### igShapeChart + +機能 | 説明 +---|--- +[igShapeChart - 新しいコントロール](#igshapechart-control)| 軽量かつ高速な新しいチャート + +### igDataChart + +機能 | 説明 +---|--- +[TimeXAxis - 軸](#time-x-axis)| igDataChart の新しい軸タイプ +[新しいシリーズ タイプ](#new-series)| igDataChart に新しいシリーズ タイプが追加されました。 + +### igGrid + +機能 | 説明 +---|--- +[物理セル結合](#cell-merging) | igGrid のセル結合機能は物理セル結合をサポートします。 + +### igScheduler + +機能 | 説明 +---|--- +[週表示](#weekView)| 時間帯の垂直リストで描画してアクティビティを可視化します。| +[日表示](#dayView)| 時間帯の垂直リストで描画してアクティビティを可視化します。時間帯の期間を構成できます。| +[定期的な予定](#recurrentActivity)| 特定の定期的なパターンでアクティビティを繰り返す場合に使用します。たとえば、各日の特定の時間、または各月の特定の日などです。 +[スケジューラ MVC ラッパー](igscheduler-configure-asp-net-mvc.html) | `igScheduler` の ASP.NET MVC ラッパー。 + +## 全般 + +### 新規のバンドル ファイル + +17.2 リリースには、Excel、スプレッドシート、およびスケジューラの新規のバンドル ファイルが含まれています。各必須リソースを読み込むか、igLoader を使用する代わりにバンドル ファイルを使用できます。Excel、スプレッドシート、またはスケジューラを実行するには、以下のバンドル リソースを読み込む必要があります。 + +igExcel を使用した igGrid の Excel エクスポート + +``` + + + + +``` + +igSpreadsheet + +``` + + + + +``` + +igScheduler + +``` + + + +``` + +### 新しいローカライズおよびグローバリゼーション設定 + +ページですべてのローカライズ可能なコンポーネントまたはコントロールごとに現在の言語/地域設定をランタイムに変更するために以下の新しいオプションおよびメソッドを追加しました。 + +#### グローバル設定および API +##### 設定 + +オプション名 | 説明| デフォルト値 +------------|----------- |-------------- +$.ig.util.language | 初期化ですべてのコントロールに使用されるグローバル言語を取得または設定します。 | en +$.ig.util.regional | 初期化ですべてのコントロールに使用されるグローバル地域設定を取得または設定します。 | en-US + +##### API + +メソッド名 | 説明 +------------|----------- +$.ig.util.changeGlobalLanguage | ページのすべてのコントロールの言語を変更します。 +$.ig.util.changeGlobalRegional | ページのすべてのコントロールの地域設定を変更します。 + + +#### コントロール固有の設定 + +オプション名 | 説明| デフォルト値 +-------------|------------| ------------- +language | ウィジェットのロケール言語設定を取得または設定します。| en +regional | ウィジェットの地域設定を取得または設定します。 | en-US +locale | ウィジェットのロケール設定を取得または設定します。 | null + +## スプレッドシート + +### スプレッドシート コンテンツの編集 + +製品の 17.2 バージョンはスプレッドシートのセルに編集のサポートを追加します。スプレッドシート コンテンツの編集で使用可能な新しい API イベント、メソッド、およびオプションがあります。 + +新しいイベント: +- - Spreadsheet が のインプレース編集を開始しようとするときに呼び出されます。 +- - Spreadsheet が のインプレース編集を開始したときに呼び出されます。 +- - Spreadsheet が のインプレース編集を終了しようとするときに呼び出されます。 +- - Spreadsheet が のインプレース編集を終了したときに呼び出されます。 +- - Spreadsheet が編集モードを終了し、 の新しい値がセルの の条件に基づいて有効ではない場合に発生されます。 + + +新しいメソッド: +- - コントロールが現在 の値を編集しているかどうかを示します。 +- - 現在の編集モード状態を示すために使用する列挙体を返します。 + +新しいオプション: +- - 編集モードで整数が入力されたときに固定小数位が自動的に追加されるかどうかを示します。 +- - 編集モードで入力された整数に使用される小数位。 + +#### 関連トピック +- [igSpreadsheet の概要](/igspreadsheet-overview) +- [編集 API (igSpreadsheet)](/igspreadsheet-editing) + +#### 関連サンプル +- [概要]({environment:SamplesUrl}/spreadsheet/overview) +- [表示の構成]({environment:SamplesUrl}/spreadsheet/create-view-save) +- [エクセル ファイルからデータをインポート]({environment:SamplesUrl}/spreadsheet/loading-data) + +## エディター + +### キーボードの制御 + + オプションは、ドロップダウン ボタンがクリックまたはタップされたとき、デバイスで利用可能な場合に画面にキーボードの表示を回避します。このオプションは最初のフォーカスを回避するか、ドロップダウン ボタンがクリックまたはタップされたときにフォーカスを解除します。 + +## igDateEditor/igDatePicker + +### スピン デルタをオブジェクトとして構成 + + オプションを各時間間隔の指定値を定義するオブジェクトとして構成できます。 +クライアント側ウィジェットのデルタに有効な値は正の整数で、浮動小数点数の分数が無視されます。 +MVC ラッパーのデルタの有効な値は整数です。 + +このオプションは以下の形式が有効です。 + +``` +$("#editor").igDateEditor({ + value: new Date(2017, 11, 8, 1, 1, 1), + dateInputFormat: "dateTime", + spinDelta: { + year: 4, + month: 3, + day: 10, + hours: 12, + minutes: 15, + seconds: 10, + milliseconds: 100 + } +}); +``` + +MVC の場合: +``` +@(Html.Infragistics() + .DateEditor() + .Value(new DateTime(2017, 11, 8, 1, 1, 1)) + .DateInputFormat("dateTime") + .SpinDelta(deltas => + { + deltas.Year(4); + deltas.Month(3); + deltas.Day(10); + deltas.Hours(12); + deltas.Minutes(15); + deltas.Seconds(10); + deltas.Milliseconds(100); + }) + .Render()) +``` + +## igValidator + +### すべてのルールの実行 + +`igValidator` は、ルールが失敗した場合も複数のルールを実行し、複数のエラー メッセージを表示する新しい オプションをサポートします。 + +![](../../images/images/igValidator-execute-all-rules.png) + + または などのエラーに関連するイベントは `ui.rules` および `ui.messages` 配列引数を提供します。これは失敗したルールおよびそのメッセージを示します。 + +この実行処理の変更で、ルールが空値の場合も実行するかどうかを指定し、 ルールも値なしで実行できます。 `required` オプションに関係なく外部の要件に基づく検証が空の値に適用できます。 + +#### 関連トピック +- [入力規則](/igvalidator-validation-rules) + +## igShapeChart + +`igShapeChart` は軽量で高パフォーマンスなチャートです。このチャートは散布 X/Y ポイント、シェープ ファイルまたは X/Y ポイントの配列の配列を使用して定義されるカスタム図形のデータを表示するために構成できます。`igShapeChart` コントロールはスマートなデータ アダプターを使用してバインドされるデータを解析して描画する適切なビジュアライゼーションを選択します。ただし、以下の値に `chartType` プロパティを設定すると、`igShapeChart` が使用するチャート タイプを指定できます: `Area`、`Bubble`、`Contour`、`HighDensity`、`Point`、`Line`、`Spline`、`Polygon`、または `Polyline`。 + +![](../../images/images/shapechart_overview.png) + +また、このチャートは、`FixedCost`、`VariableCost`、`SalesRevenue`、および `SalesUnits` データ列を持つデータ項目が 1 つあれば損益分岐点データを描画できます。 + +![](../../images/images/shapechart-breakeven-01.png) + +#### 関連トピック +- [igShapeChart の概要](/shapechart-overview) +- [ShapeChart を使用した作業の開始](/shapechart-getting-started-with-shapechart) + +## igDataChart + +### TimeXAxis + +このリリースでは、時間 X 軸を igDataChart に追加しました。この軸はデフォルトで、ユーザーのズームによって動的に変更されるラベル書式設定を自動的にデータに適用します。また、軸ブレークを構成すると、特定の範囲内の日付を除外できます。たとえば、週末、またはその他の必須ではない日付の範囲を非表示できます。軸は、デフォルトのラベル書式設定スキーマをオーバーライドして表示される日付範囲でラベルの構成をカスタマイズできます。 + +#### 関連トピック +- [TimeXAxis の構成 (igDataChart)](/igdatachart-configuring-timexaxis) + +### 新しいシリーズ タイプ + +以下のシリーズ タイプを igDataChart コントロールで使用できます。 + +* [散布エリア シリーズ](../../02_Controls/igDataChart/04_Configuring/05_Triangulation Series/00_TriangulationSeries_Area_Series.mdx) +* [散布等高線シリーズ](../../02_Controls/igDataChart/04_Configuring/05_Triangulation Series/01_TriangulationSeries_Contour_Series.mdx) +* [散布ポリライン シリーズ](../../02_Controls/igDataChart/04_Configuring/06_Shape Series/01_ShapeSeries_Polyline_Series.mdx) +* [散布多角形シリーズ](../../02_Controls/igDataChart/04_Configuring/06_Shape Series/00_ShapeSeries_Polygon_Series.mdx) + +![](../../images/images/chart_scatter_series.png) + +## igScheduler + +### 週表示 +このビューは時間帯の垂直リストで描画してアクティビティを可視化します。`weekViewDiplayMode` プロパティを使用してすべての 7 曜日を表示するか、稼動日のみを表示できます。 +24 時間または稼働時間のみの表示も構成できます。 + +### 日表示 +時間帯の垂直リストで描画してアクティビティを可視化します。各アクティビティは、開始時刻と終了時刻の間の時間帯のみ使用します。 +このビューには 7 日まで表示できます。日表示は、24 時間すべてまたは稼働時間のみの表示が構成できます。 + +### 定期的な予定 +アクティビティの定期的な予定は特定の定期的なパターンでアクティビティを繰り返す場合に使用します。 + +## igGrid + +### igGrid の物理セル結合 + +igGrid のセル結合機能は物理セル結合をサポートします。結合モードは オプションで指定されます。 + +**物理セル結合を有効にする** + +```js +$("#grid").igGrid({ + features: [ + { + name: "Sorting" + }, + { + name: "CellMerging", + mergeType: "physical" + } + ] +}); + +``` +このモードで、セルの DOM 要素が相対する rowSpan 属性を持つ 1 つのセルに物理的に結合されます。「ビジュアル」結合モードで、DOM セルは DOM 構造を変更せずに CSS を使用して可視化的に結合されます。 + +以下のオプションが結合動作の詳細なカスタマイズ化を可能にするために追加されました。 + + オプション名 | 説明 | デフォルト値 +-------------|-------------|--------------- + | 結合がいつ適用されるかを定義します。 | "sorting" + | 結合が基準にするルールを定義します。 | "duplicate" + | 非表示オプションを列ごとに指定する列設定のリスト。 | [ ] + +#### 関連トピック +- [セル結合の概要 (igGrid)](../../02_Controls/igGrid/03_Features/07_Cell Merging/00_igGrid_CellMerging_Overview.mdx): このトピックは、`igGrid` コントロールのセル結合機能とその機能性について説明します。`igGrid` においてセル結合を有効にし構成する方法のコード例が含まれます。 \ No newline at end of file diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/10-whats-new-in-2017-volume1.mdx b/docs/jquery/src/content/ja/topics/whats-new/revision-history/10-whats-new-in-2017-volume1.mdx new file mode 100644 index 0000000000..18673c5c0f --- /dev/null +++ b/docs/jquery/src/content/ja/topics/whats-new/revision-history/10-whats-new-in-2017-volume1.mdx @@ -0,0 +1,328 @@ +--- +title: "2017 Volume 1 の新機能" +slug: whats-new-in-2017-volume1 +--- + +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# 2017 Volume 1 の新機能 + +このトピックでは、{environment:ProductFamilyName}™ 2017 Volume 1 リリースのコントロールと新機能および拡張機能を紹介します。 + +## 新機能の概要 + +以下の表に 2017 Volume 1 の新機能の概要を示します。追加の詳細は以下のとおりです。 + +### igSpreadsheet + +機能 | 説明 +---|--- +[igSpreadsheet - 新しいコントロール](#spreadsheet)| igSpreadsheet は、最新のあらゆるブラウザーで Excel ドキュメントを視覚化する jQuery ウィジェットです。 + +### igScheduler + +機能 | 説明 +---|--- +[igScheduler - 新しいコントロール](#scheduler)| igScheduler は、時間範囲および関連アクティビティを表示し、管理するスケジュール ソリューションを提供する jQuery ウィジェットです。 + +### igDataSource + +機能 | 説明 +---|--- +[テキストでフィルターする](#filterbytext)| igDataSource コンポーネントは、すべてのフィールドで特定の単語または句を検索する方法を提供します。 + +### igGrid + +機能 | 説明 +---|--- +[データ処理](#griddatehandling)| igGrid は、別のタイム ゾーンにあるクライアントで日付値の表示および編集を制御する方法を提供します。 +[キャプションのカスタマイズ化](#gridcaption)| igGrid の新しいキャプションはよりカスタマイズしやすくなりました。 +[GroupBy 集計](#groupSummaries)| GroupBy 機能により集計行を各グループのデータ アイランドの下に表示できるようになりました。 + +### igCombo + +機能 | 説明 +---|--- +[Knockout の Disable ハンドラー](#comboKnockoutDisable)| Knockout の Disable バインディング ハンドラーがコンボで実装されます。 + +### Editors + +機能 | 説明 +---|--- +[Knockout の Disable ハンドラー](#editorsKnockoutDisable)| Knockout の Disable バインディング ハンドラーがエディターで実装されます。 + +### igNumericEditor + +機能 | 説明 +---|--- +[10 進数の丸み](#roundDecimals)| 数値エディターに小数部を持つ値の丸みを許可する新しい オプションを追加しました。 + +### igDateEditor/igDatePicker + +機能 | 説明 +---|--- +[データ処理](#dateHandling)| データ変換を処理する際にエディターの設定が必要です。 + +### igDatePicker + +機能 | 説明 +---|--- +[日付の選択オプション MVC ラッパー](#pickerOptionsWrapper) | DatePicker MVC ラッパーを使用する場合に、日付の選択オプションの追加のラッパーが利用できます。 + +### igDataChart + +機能 | 説明 +---|--- +[ズームを有効にするオプション](#zoomEnablingProperties) | および と呼ばれる新しいオプションが追加されました。水平軸または垂直軸でズームを許可するかどうかを制御します。 + +### igMap + +機能 | 説明 +---|--- +[OpenStreet タイル パス](#tilePathProperty) | OpenStreet タイル ソースで オプションが オプションに追加されました。 + +### igRadialGauge, igLinearGauge, igBulletGraph +機能 | 説明 +---|--- +[デザインの更新](#gaugeDesignChanges) | ゲージのビジュアルが更新されました。 + +## igSpreadsheet + +2017.1 バージョンで igSpreadsheet コントロールを追加しました。最新のあらゆるブラウザーで Excel ドキュメントを視覚化する jQuery ウィジェットです。MVC バージョンでは、コントロールの以下の領域と機能が使用できます。 + +- 構成可能なコンポーネント領域 + - 数式バー + - コンテキスト メニュー + - タブ バー領域 + - ヘッダー + +- コントロールの変更 + + - 選択 + - サイズ変更 + - 非表示 + - ペインのフリーズ + - ペインの分割 + - ズーム + +- データの変更 + - セル、列、行の挿入と削除 + - 元に戻す / やり直し + - コピー / 貼り付け + - データ検証 + - ワークシート + - ハイパーリンク + +- 外観の構成 + - グリッド線 + - セルの配置 + - セルの境界線 + - フォント スタイル + +![](../../images/images/spreadsheet.png) + +#### 関連トピック +- [igSpreadsheet の概要](/igspreadsheet-overview) +- [igSpreadsheet の追加](/adding-igspreadsheet) +- [igSpreadsheet の構成](configuring-igspreadsheet.html) + + +#### 関連サンプル +- [概要]({environment:SamplesUrl}/spreadsheet/overview) +- [表示の構成]({environment:SamplesUrl}/spreadsheet/create-view-save) +- [エクセル ファイルからデータをインポート]({environment:SamplesUrl}/spreadsheet/loading-data) + +## igScheduler +### 新しいコントロール + +`igScheduler`™ コントロールは、時間範囲および関連アクティビティを表示し、管理するスケジュール ソリューションを提供します。 + +### サポートされる機能 +- 予定の作成、編集、削除 + - 月表示で構成可能な予定表示モード (インジケーターまたはイベントの件名) + - 予定を色付きリソースへの割り当て +- 別のビューの使用 (月表示および予定一覧ビュー) + - 月表示および予定一覧ビューの間の切り替え + - 月表示での予定一覧ビュー + - 構成可能な予定一覧ビューの日の表示範囲 +- 終日イベントのサポート +- デスクトップ、タブレット、および携帯レイアウト +- レスポンシブ デザイン + - デスクトップ環境に最適化された UI +- リソースの色スキーマ サポート +- キーボード ナビゲーション サポート +- ローカライズのサポート + +![](../../images/images/scheduler.png) + +#### 関連トピック +- [igScheduler の概要](/igScheduler-overview) +- [igScheduler の構成](/igscheduler-configuring) +- [igScheduler の追加](/igscheduler-adding-igscheduler) +- [igScheduler の構成](/igscheduler-configuring) +- [igScheduler のスタイル設定](/igscheduler-using-themes) +- [アクセシビリティの遵守 (igScheduler)](/igscheduler-accessibility-compliance) +- [既知の問題と制限 (igScheduler)](/igscheduler-known-limitations) + +#### 関連サンプル + +- [igScheduler 予定一覧ビュー]({environment:SamplesUrl}/scheduler/agenda-view) +- [igScheduler 予定インジケーター]({environment:SamplesUrl}/scheduler/appointment-indicators) + +## igDataSource + +### テキストでフィルタリング + +igDataSource コンポーネントは、 メソッドによってすべてのフィールドで特定の単語または句を検索する方法を提供します。 + +#### 関連トピック +- [igDataSource の概要](/igdatasource-igdatasource-overview) + +#### 間連サンプル +- [簡易なフィルタリング]({environment:SamplesUrl}/grid/simple-filtering) + +## igGrid + +### データ処理 + + オプションが変更しました。日付のシリアル化のみに影響します。 日付はローカル時間およびゾーン値の代わりにクライアント側の日付を [UTC ISO 8061](https://en.wikipedia.org/wiki/ISO_8601#UTC) 文字列としてのシリアル化されます。 + +日付の表示を処理するには、新しい オプションはグリッドの列定義に設定できます。`date` 型の列のみに影響します。 + +#### 関連トピック +- [17.1 の enableUTCDates オプションの移行](/migrating-enableUTCDates-option-in-17-1) + +### グリッドのキャプション + +カスタマイズするために igGrid のキャプションで HTML 要素を描画できます。初期化を制御するイベントも追加しました。 + +### GroupBy 集計 + +GroupBy 集計機能は、そのアイランドにあるデータ列の集計情報を表示するグループ データ アイランドの上下に追加の集計行を表示します。集計行は、関連するグループが展開された場合のみ表示されます。 + +![](../../images/images/group-summaries.png) + +#### 関連トピック +- [GroupBy 集計の機能概要 (igGrid)](/iggrid-groupby-summaries) + +#### 関連サンプル +- [集計とグループ化]({environment:SamplesUrl}/grid/grouping) + +## igCombo + +### Knockout の Disable ハンドラー + +開発者がコンボ コントロールに Knockout の [`disabled`](http://knockoutjs.com/documentation/disable-binding.html) バインディング ハンドラーを適用したい場合、ハンドラーは動作せず、自動的に有効/無効にしません。コンボにコントロールの有効化/無効化を処理する特別なロジックがあります。そのため、Knockout `disabled` ハンドラーを使用時に予期される動作を実装する追加の `igComboDisable` バインディング ハンドラーが作成されます。 + +#### 関連トピック +- [Knockout サポートの構成 (igCombo)](/igcombo-knockoutjs-support#) + +## エディター + +### Knockout の Disable ハンドラー + +開発者がエディターに Knockout の [`disabled`](http://knockoutjs.com/documentation/disable-binding.html) バインディング ハンドラーを適用したい場合、ハンドラーは動作せず、自動的に有効/無効にしません。エディターにコントロールの有効化/無効化を処理する特別なロジックがあります。そのため、Knockout `disabled` ハンドラーを使用時の予期される動作を実装する追加の `igEditorDisable` バインディング ハンドラーが作成されます。 + +#### 関連トピック +- [Knockout サポートの構成 (エディター)](../../02_Controls/igEditors/Config/02_Configuring Knockout Support (Editors).mdx) + +## igNumericEditor + +### 10 進数の丸み + +製品の以前バージョンで、ユーザーが `maxDecimals` オプションで定義される数より大きい小数位がある値を数値エディターに入力すると、値が切り捨てられます。つまり、`maxDecimals` が `3` に設定されるエディターが `123.4567` の値を受けると、`123.456` に切り捨てられます。製品の 17.1 バージョンで新しい オプションを追加しました。デフォルトで有効で、JavaScript の `Math.round()` 関数を使用して数値を丸めます。`123.4567` の値は丸めて、エディターで `123.457` として表示されます。 オプションが無効な場合、値を切り捨て、以前のバージョンと同じように `123.456` を表示します。 + +## igDateEditor/igDatePicker + +### データ処理 + +エディターの日付をクライアントからサーバーへ、またはサーバーからクライアントへ転送する場合、オプション および を使用してエディターを構成し、適切に日付を転送します。 + +#### 関連トピック +- [17.1 の enableUTCDate オプションの移行](/igDateEditor-migrating-date-handling-in-17-1) +- [Ignite UI コントロールを異なるタイム ゾーンで使用](/Using-igniteui-controls-in-different-time-zones) + +## igDatePicker + +### 日付の選択オプション MVC ラッパー + +追加の MVC ラッパーを使用して DatePicker MVC ラッパーが日付の選択オプションの定義を許可するよう拡張されます。新しいラッパーは、すべての jQuery UI 日付の選択オプションを含み、igDatePicker に適用することができます。以下は、MVC で構成する方法です。 + +``` +@(Html.Infragistics() + .DatePicker() + .DropDownAnimationDuration(1000) + .DatePickerOptions(options => { + options.DefaultDate("+8"); + options.MinDate("-5d"); + options.MaxDate("+10d"); + + options.FirstDay(FirstWeekDay.Monday); + options.ShowWeek(true); + + options.ShowOtherMonths(true); + options.SelectOtherMonths(true); + + options.ChangeMonth(true); + options.ChangeYear(true); + options.AddClientEvent("onChangeMonthYear", "onChangeMonthYearHandler"); + + options.ShowButtonPanel(true); + options.GoToCurrent(true); + + options.ShowAnim(AnimationEffect.Show); + + options.AddClientEvent("onSelect", "onSelectHandler"); + options.AddClientEvent("onClose", "onCloseHandler"); + }) + .Render()) +``` + +## igDataChart +### ズームを有効にするオプション + + および と呼ばれる新いオプションが追加されました。既存の および オプションは非推奨になりました。 非推奨のオプションは後方互換性のために残されています。 + +## igMap +### OpenStreet のタイル パス + +Open Street Map は、`backgroundContent` オブジェクトの `tilePath` オプションを使用してカスタム タイル ソースを使用できます。 + +**JavaScript の場合** + + $(function () { + $("#map").igMap({ + width: "700px", + height: "500px", + windowRect: { left: 0.1, top: 0.1, height: 0.7, width: 0.7 }, + // specifies imagery tiles from OpenStreetMap + backgroundContent: { + type: "openStreet", + tilePath: "tile.openstreetmap.org/{Z}/{X}/{Y}.png" + } + }); + }); + +この変更の前は `tilePath` は Bing Maps のみに適用可能でした。変更後は Open Street Maps でも使用可能となります。 + +プロトコル指定子 (*http:* または *https:*) を URL から解除すると、コントロールがホストの web サイトのプロトコルを検出、使用できます。`tilePath` オプションで明示的に設定してコントロールのプロトコルを設定できます。 + +**JavaScript の場合** + + tilePath: "https://tile.openstreetmap.org/{Z}/{X}/{Y}.png" + +`{Z}`、`{X}`、および `{Y}` トークンは、タイル描画で各タイルのズーム、水平位置、および垂直位置で置き換えられます。 + +## igRadialGauge, igLinearGauge, igBulletGraph +### デザインの更新 + +`infragistics.theme.css` を含む場合、igRadialGauge、 igLinearGauge および igBulletGraph に新しいスタイル設定があります。新しいスタイル設定は以下のようです: + +#### igRadialGauge: +![](../../images/images/radialgauge_igtheme_17_1.png) + +#### igLinearGauge: +![](../../images/images/lineargauge_igtheme_17_1.png) + +#### igBulletGraph: +![](../../images/images/bulletgraph_igtheme_17_1.png) diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/11-whats-new-in-2016-volume2.mdx b/docs/jquery/src/content/ja/topics/whats-new/revision-history/11-whats-new-in-2016-volume2.mdx new file mode 100644 index 0000000000..efb93ba9df --- /dev/null +++ b/docs/jquery/src/content/ja/topics/whats-new/revision-history/11-whats-new-in-2016-volume2.mdx @@ -0,0 +1,583 @@ +--- +title: "2016 Volume 2 の新機能" +slug: whats-new-in-2016-volume2 +--- + +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +#2016 Volume 2 の新機能 + +このトピックでは、{environment:ProductFamilyName}™ 2016 Volume 2 リリースのコントロールと新機能および拡張機能を紹介します。 + + +##新機能 + +以下の表に 2016 Volume 2 の新機能の概要を示します。追加の詳細は以下のとおりです。 + +### 全般 + +機能 | 説明 +---|--- +{environment:ProductName} OSS | {environment:ProductName} ツールセットの一部がオープンソースになりました。 [GitHub](https://github.com/IgniteUI/ignite-ui) でリポジトリを参照してください。| +Angular 2 (RTM) 用の {environment:ProductName} ディレクティブ | {environment:ProductName} ウィジェットは Angular 2 のコンポーネント ラッパーがあります。詳細については、 [{environment:ProductName} Angular 2 GitHub](https://github.com/IgniteUI/igniteui-angular-wrappers) ページを参照してください。| +React (CTP)用の {environment:ProductName} コンポーネント | {environment:ProductName} ウィジェットは [React](https://facebook.github.io/react/) のコンポーネント ラッパーがあります。詳細については、[{environment:ProductName} Components for React](https://github.com/IgniteUI/igniteui-react) ページを参照してください。| +ASP.NET Core 1.0 MVC ヘルパー | {environment:ProductName} MVC ヘルパーで ASP.NET Core 1.0 がサポートされるようになりました。[{environment:ProductName} コントロールを ASP.NET Core 1.0 で使用](Using-IgniteUI-Controls-in-ASP.NET-Core-1.0-project.html) トピックを参照してください。| +ASP.NET Core 1.0 MVC タグ ヘルパー | {environment:ProductName} ASP.NET Core 1.0 MVC タグ ヘルパーを提供します。[{environment:ProductName} タグ ヘルパーの使用](Using-Ignite-UI-Tag-Helpers.html) トピックを参照してください。| +[新しい Javascript ファイル分割](#javascript-file-breakdown) | 変更の主要な目的は、特定の機能をロードするときに必要なコードの量を縮小することです。 | +DPI スケール | デフォルトで 高DPI スケールを有効にすることにより、コンポーネントに鮮明でクリアな外観を実現できます。デフォルトで 高DPI スケールを有効にしたコンポーネントは、igDataChart、igPieChart、igFunnelChart、igDoughnutChart、igRadialGauge、igLinearGauge、igBulletGraph、igSparkline、igRadialMenu です。 | +標準モジュール サポート | すべての IgniteUI JavaScript ファイルは AMD モジュール定義が含まれます。したがって、ファイルは Require.JS、System.JS など、標準モジュール ローダーを使用してロードできます。| +[{environment:ProductName} NuGet パッケージ](#ignite-ui-nuget-packages) | .NET Core アプリケーションを作成するためのパッケージをはじめとして、新しい {environment:ProductName} NuGet パッケージを提供します。| + + +### igCategoryChart + +機能 | 説明 +---|--- +[新しいコントロール](#igcategorychart)| 簡易な API を使用して簡単にカテゴリ データ表示を構成します。 | + +### igDataChart + +機能 | 説明 +---|--- +[新しいプロパティ](#new-chart-property) | 単一視覚要素に統合ざれた列の配置ロジックを決定するための、新しい ConsolidatedColumnVerticalPosition プロパティを提供しています。| +[機能向上](#performance-enhancements)| Infragistics 2016 volume 2 リリースでは、igDataChart コントロールのパフォーマンスを改善しました。 | +[デザインの更新](#design-changes) | igDataChart、igPieChart、igFunnelChart、igDoughnutChart、igRadialGauge、igLinearGauge、igBulletGraph および igSparkline コントロールのデフォルト値を更新しました。| +[ファイル サイズの縮小](#file-size-reduction) | カテゴリ チャートの読み込みに必要なサイズを縮小しました。また、igDataChart コントロールをモジュール化しました。| + +### igDataSource + +機能 | 説明 +---|--- +新しいグループ化機能| igDataSource はグループ化をサポートしグループ化の展開および縮小状態を保持します。 | +並べ替えパフォーマンスの最適化 | ローカルの並べ替えが 10 倍まで高速化されています。 | + +### igFunnelChart + +機能 | 説明 +---|--- +[ラベルのスタイル設定](#funnel-styling) | ファンネル チャートの内部ラベル及び外部ラベルの色を指定できるようになりました。 + +### igGrid + +機能 | 説明 +---|--- +[Group By の向上](#groupby-improvements) | Group By には仮想化サポートおよび行の展開/縮小のための API を追加しました。 | +並べ替えパフォーマンスの最適化 | ローカルの並べ替えが 10 倍まで高速化されています。 | +[複数行レイアウトでのインライン編集](#mrl-inline-editing)| 複数行レイアウト機能が行およびセルのインライン編集をサポートします。 | +複数列ヘッダーの縮小可能な列グループ | 縮小可能な列グループは、複数列ヘッダーをより小さいデータ セットに縮小/展開する方法を提供します。 | +列セッター | 列のコレクションをランタイムで変更できるようになりました。 | +igGrid モーダル ダイアログの拡張性| ダイアログを含むグリッド機能 (更新、フィルター、並べ替え、非表示、GroupBy、列移動) に、カスタムのダイアログ実装を可能にする、新しい `dialogWidget` オプションを追加しました。 - [サンプル]({environment:SamplesUrl}/grid/custom-modal-dialog)または[トピック](Extending_igGrid_Modal_Dialog.html)を参照してください。 | +リアルタイム データにバインド サンプル| igGrid をリアルタイム データにバインドすることを紹介するサンプルが追加されました - [サンプルの表示]({environment:SamplesUrl}/grid/binding-real-time-data) | +パフォーマンス オプション サンプル| igGrid のパフォーマンス オプションを紹介するサンプルが追加されました - [サンプルの表示]({environment:SamplesUrl}/grid/grid-performance). | + + +### igPieChart + +機能 | 説明 +---|--- +[スライスの選択](#slice-selection) | igPieChart コントロールでスライスの選択が可能になりました。| +[新しいイベント](#pie-event)| ラベルをクリックすると発生する新しいイベント。 | +[ラベルの色付け](#pie-label-coloring) | 円チャートの内部ラベル及び外部ラベルの色を指定できるようになりました。| +[データ パス オプション名の変更](#pie-data-path-renaming) | valueMemberPath および labelMemberPath オプションの名前を変更しました。| + +### igScroll + +機能 | 説明 +---|--- +[新しいコントロール](#igscroll)| igScroll™ コントロールがさまざまなブラウザーとデバイスで一貫性のあるエクスペリエンスを提供します。 | + +### igZoombar + +機能 | 説明 +---|--- +カスタム コンポーネントとの統合| igZoombar は、サードパーティーのカスタム コンポーネント用のプラッグ可能な統合機能を公開します。[igZoombar のカスタム コンポーネントとの統合](igZoombar-Integration-with-Custom-Components.html) トピックを参照してください。| + +## igCategoryChart + +### 新しいコントロール + +Infragistics 2016 Volume 2 リリースでは、カテゴリ チャートという新しいコントロールを提供します。簡易な API を使用して、チャートにカテゴリ データの表示を簡単に構成できます。データ (コレクションまたはコレクションのコレクション) をバインドするのみで作業を開始します。 + +スマート データ アダプターを使用して、データは分析されて適切なビジュアライゼーションが描画されます。たとえば ｃhartType を Auto に設定した場合、大きなデータセットで折れ線チャートを描画する間、コントロールは小さなデータセットを提供して列チャートがプロットされるかどうかを決定します。 + +一方、 chartType を line、area、column、point、spline、splineArea、stepArea、stepLine または waterfall に設定して、チャート タイプを明示的に指定することも可能です。 + +その他のカテゴリチャート コントロールの直感的な動作の例は、明示的にラベルを設定する必要がないことです。カテゴリ チャートは、最初の適切な文字列プロパティを使用し、ラベルに使用します。 + +コントロールは簡単に構成できるよう構築されており、エンジンとして igDataChart コントロールを使用しています。つまり、高パフォーマンスでパワフルなデータ チャートの利点を備えています。 + +#### 関連トピック: +- [igCategoryChart の概要](/categorychart-overview) + + +### 新しい JavaScript ファイルの分割 + +igDataChart、igPieChart、igFunnelChart、igDoughnutChart、igRadialGauge、igLinearGauge、igBulletGraph および igMap コントロールのすべては、必要とする js ファイルで重要な変更が導入されました。変更の主要な目的は、特定の機能をロードするときに必要なコードの量を縮小することです。機能によって正確な順序で必要なファイルのみを含む、結合されたファイルをダウンロードするために、スクリプト コンバイナーを更新しました。必要な機能に基づいて適切なファイルの読み込みが可能な igLoader も更新しました。 + +手動でファイルを読み込む場合、以下のファイルが必要になります。 + +igDataChart、igCategoryChart、igPieChart、igFunnelChart、igDoughnutChart、igRadialGauge、igLinearGauge、igBulletGraph および igMap の場合は最初に次のファイルを追加します。 + +* infragistics.util.js + +* infragistics.util.jquery.js + +* infragistics.ext_core.js + +* infragistics.ext_collections.js + +* infragistics.ext_ui.js + +* infragistics.dv_core.js + +igDataChart、igCategoryChart、igPieChart、igDoughnutChart、igRadialGauge、igLinearGauge、igBulletGraph および igMap の場合は次のファイルを追加します。 + +* infragistics.dv_geometry.js + +igRadialGauge を読み込む場合: + +* infragistics.radialgauge.js + +* infragistics.ui.radialgauge.js + +igLinearGauge を読み込む場合: + +* infragistics.lineargauge.js + +* infragistics.ui.lineargauge.js + +igBulletGraph を読み込む場合: + +* infragistics.bulletgraph.js + +* infragistics.ui.bulletgraph.js + +igPieChart を読み込む場合: + +* infragistics.piechart.js + +* infragistics.dvcommonwidget.js + +* infragistics.ui.piechart.js + +igDoughnutChart を読み込む場合、円チャートに必要なファイルに加えて次のファイルも追加します。 + +* infragistics.doughnutchart.js + +* infragistics.ui.doughnutchart.js + +igFunnelChart を読み込む場合: + +* infragistics.funnelchart.js + +* infragistics.ui.funnelchart.js + +igDataChart または igMap の機能を読み込む場合: + +* infragistics.datachart_core.js + +igMap を読み込む場合: + +* infragistics.ext_text.js + +* infragistics.ext_io.js + +* infragistics.ext_web.js + +* infragistics.dv_geo.js + +* infragistics.datachart_scatter.js + +* infragistics.dvcommonwidget.js + +* infragistics.geographicmap.js + +* infragistics.ui.geographicmap.js + +igDataChart を読み込む場合、必要なチャート機能を読み込んでから次のファイルを追加します: + +* infragistics.datachart.js + +* infragistics.ui.chart.js + +チャートに任意のカテゴリ シリーズ (柱状、エリア、折れ線、スプラいン、splineArea、stepLine、stepArea、ポイント、ウォーターフォール) を読み込む場合: + +* infragistics.datachart_categorycore.js + +* infragistics.datachart_category.js + +垂直カテゴリシリーズ (棒) を読み込む場合: + +* infragistics.datachart_categorycore.js + +* infragistics.datachart_category.js + +* infragistics.datachart_verticalcategory.js + +チャートに散布シリーズ ( 散布、scatterLine、scatterSpline、highDensityScatter、バブル) を読み込む場合: + +* infragistics.datachart_scatter.js + +範囲カテゴリシリーズ (rangeColumn、rangeArea) を読み込む場合: + +* infragistics.datachart_categorycore.js + +* infragistics.datachart_rangecategory.js + +範囲カテゴリシリーズ (rangeColumn、rangeArea) を読み込む場合: + +* infragistics.datachart_extendedaxes.js + +* infragistics.datachart_polar.js + +極座標シリーズ (radialColumn, radialLine, radialPie, radialArea) の場合: + +* infragistics.datachart_extendedaxes.js + +* infragistics.datachart_radial.js + +積層シリーズの場合: + +* infragistics.datachart_categorycore.js + +* infragistics.datachart_category.js + +* infragistics.datachart_stacked.js + +注釈レイヤー (crosshairLayer, itemToolTipLayer, categoryToolTipLayer, categoryHighlightLayer) の場合: + +* infragistics.datachart_annotation.js + +チャート凡例の場合: + +* infragistics.legend.js + +* infragistics.ui.chartlegend.js + +新しい igCategoryChart コントロールを読み込む場合、データ チャートにカテゴリ シリーズをロードするのに必要なファイルに加えて以下のファイルも追加します。 + +* infragistics.dv_dataseriesadapter.js + +* infragistics.categorychart.js + +* infragistics.dvcommonwidget.js + +* infragistics.ui.basechart.js + +* infragistics.ui.categorychart.js + +### {environment:ProductName} NuGet パッケージ + +2016 volume 2 リリースより、3 つの {environment:ProductName} NuGet パッケージが新規追加されました。これらのパッケージでアプリケーションをより速くセットアップできるため、生産性の向上につながります。パッケージは、プロジェクトに必要な {environment:ProductName} ファイルおよび参照を自動的に追加します。 + +新しい ASP.NET では、ほとんどのモジュールが NuGet パッケージとしてラップされています。そのため、ASP.NET Core 上に構築されている新しい MVC ラッパーも NuGet パッケージとして提供されます。 + +NuGet パッケージが製品インストーラーでインストールされる際、新しいローカル フィードが作成されます。そのため、NuGet パッケージ マネージャーを設定する必要はありません。次回 Visual Studio を実行した際にローカル NuGet フィード Infragistics (ローカル) が表示されます。 + +#### 関連トピック: +- [Using {environment:ProductName} パッケージの使用](/Using-Ignite-UI-NuGet-Packages) + +## igDataChart + +### 新しいチャート オプション + +本リリースでは、単一視覚要素に統合ざれた列の配置ロジックを決定するための、新しい consolidatedColumnVerticalPosition オプションを提供します。 + +プロパティは以下の値を含みます。 + +*Minimum* - 統合された項目は最小値を使用して配置されます。 + +*Maximum* - 統合された項目は最大値を使用して配置されます。 + +*Median* - 統合された項目は中央値を使用して配置します。 + +*RelativeMinimum* - 統合された項目が相対する軸の参照値に一番近い値を使用して配置します。 + +*RelativeMaximum* - 連結された項目が相対する軸の参照値に一番遠い値を使用して配置します。 + +#### 関連トピック: +- [シリーズ タイプ](/igdatachart-series-types) + +### 機能向上 +igDataChart コントロールのパフォーマンスを著しく向上しました。 +igDataChart の 16.1 と 16.2 の違いは、データセットが 5 万ポイントを含み、バインドされたデータの最後に 10 ミリ秒ごとに新しいデータ ポイントを追加してからデータの初めからポイントを取り除く、というライブ更新において明確です。 + +**Chrome:** + +16.1: 70fps (1 秒あたりのフレーム数) + +16.2: 144fps + +**Edge:** + +16.1 55fps + +16.2: 105fps + +**Internet Explorer:** + +16.1: 44fps + +16.2: 100fps + +上記のデータから、この raw インプット シナリオでは、16.2 の igDataChart が 16.1 と比べておおよそ 2 倍速くなっていることが明らかになっています。 + +### デザインの更新 +Infragistics 2016 volume 2 リリースでは、igDataChart、igPieChart、igFunnelChart、igSparkline、igRadialGauge、igLinearGauge、igBulletGraph コントロールのデフォルト値を更新しました。 + +以下のスクリーンショットで新しいデフォルト値と以前のデフォルト値を比較します。 + +#### 柱状チャート + +**現在** + + +![](../../images/images/chart_design_column_new.png) + + +**以前** + + +![](../../images/images/chart_design_column_previous.png) + + +#### 凡例 + +**現在** + + +![](../../images/images/chart_design_legend_new.png) + + +**以前** + + +![](../../images/images/chart_design_legend_previous.png) + + +#### 積層型エリア + +**現在** + +![](../../images/images/chart_design_gallery_new.png) + +**以前** + + +![](../../images/images/chart_design_gallery_previous.png) + +#### 財務チャート + +**現在** + +![](../../images/images/chart_design_financial_new.png) + +**以前** + +![](../../images/images/chart_design_financial_previous.png) + +#### 円チャート + +**現在** + +![](../../images/images/chart_design_pie_new.png) + +**以前** + +![](../../images/images/chart_design_pie_previous.png) + +#### ファンネル チャート + +**現在** + +![](../../images/images/chart_design_funnel_new.png) + +**以前** + +![](../../images/images/chart_design_funnel_previous.png) + +#### ドーナツ型チャート + +**現在** + +![](../../images/images/chart_design_doughnut_new.png) + +**以前** + +![](../../images/images/chart_design_doughnut_previous.png) + + +#### ラジアル ゲージ + +**現在** + +![](../../images/images/chart_design_radial_gauge_new.png) + +**以前** + +![](../../images/images/chart_design_radial_gauge_previous.png) + +#### リニア ゲージ + +**現在** + +![](../../images/images/chart_design_linear_gauge_new.png) + +**以前** + +![](../../images/images/chart_design_linear_gauge_previous.png) + +#### ブレット グラフ + +**現在** + +![](../../images/images/chart_design_bullet_graph_new.png) + +**以前** + +![](../../images/images/chart_design_bullet_graph_previous.png) + +#### スパークライン + +**現在** + +![](../../images/images/chart_design_sparkline_new.png) + +**以前** + +![](../../images/images/chart_design_sparkline_previous.png) + +### ファイル サイズの縮小 +16.2 と 16.1 を比べて、カテゴリ シリーズを igDataChart (柱状、アリア、折れ線、スプライン、splineArea、stepLine、stepArea、ウォーターフォール) にロードするために必要なファイルのサイズは 24% 縮小されました。 + +さらに、igDataChart の機能を個別のモジュールに分割し必要な機能のみをロードできる詳細な制御が可能になりました。したがって、ペイロード サイズも縮小されます。チャート機能モジュールが重複しなくなったため、複数の機能セットをロードするときのペイロード サイズを抑えることができます。 + +## igFunnelChart +### 新しいスタイル設定のプロパティ + + および オプションを使用して、ラベルがスライスの内、または外に表示されることにとって、異なる色を設定できます。さらに、 および オプションを使用して、内部ラベルと外部ラベルのテキストをスタイル設定できます。 +以下のスクリーンショットでは、内部ラベルと外部ラベルのテキストおよびスタイルを変更する方法を示します。 + +![](../../images/images/funnelchart_text_style.png) + +**関連トピック:** + +- + +- + +- + +- + +## igGrid + +### Group By の向上 + +Group By の仮想化の統合機能が向上しました。 +仮想化フレーム間でグループ化された行展開状態を保持し、エンドユーザー エクスペリエンスを向上します。 +グループの行を し するための API メソッドが 2 つ追加されました。 +ローカル グループ化パフォーマンスを最適化し 10 倍まで高速化しています。 + +#### 関連トピック +- [列のグループ化の概要 (igGrid)](/iggrid-groupby-overview#api-usage) + +#### 関連サンプル +- [連続仮想化]({environment:SamplesUrl}/grid/virtualization-continuous) +- [グループ化 API]({environment:SamplesUrl}/grid/grouping-api) + +### 複数行レイアウトでのインライン編集 + +複数行レイアウトが構成されている場合、更新機能が行およびセルの編集モードで機能します。 オプションを使用して編集モードのエディターの順序を構成します。 + +![](../../images/images/mrl-inline-editing.png) + +#### 関連トピック +- [グリッドの複数行レイアウト](/iggrid-multirowlayout#features-integration) + +#### 関連サンプル +- [複数行レイアウトのインライン編集]({environment:SamplesUrl}/grid/multi-row-layout-inline-editing) + + +## igPieChart + +### スライスの選択 + +igPieChart コントロールでスライスの選択が可能になりました。この機能はデフォルトで有効です。オプションを設定して単一および複数選択をサポートします。また、 オプションを設定して単一および複数選択をサポートします。また、 または オプションを使用して選択されたスライスに関連付けられたデータ項目を取得します。 + +選択イベントも追加しました。一部はキャンセル可能なもので、特定のスライス選択の無効化が可能です。イベントは以下の通りです。 + +* +* +* +* + +選択されたスライスは異なるスタイルで表示されるため特定しやすくなっています。以下のスクリーンショットでは、Marketing スライスが選択されています。 + +![](../../images/images/piechart_slice_selection.png) + +#### 関連トピック: +[igPieChart](/igpiechart) + +### 円チャートの新しいイベント + +igPieChart コントロールには、スライスをクリックすると発生する があります。 + +#### 関連トピック: +[igPieChart の概要](/igpiechart-overview) + +### ラベルの色付け + +次のオプションを設定して、ラベルをスライス内または外のどちらに表示するかに基づいて異なる色を指定できます。 +- +- + +![](../../images/images/piechart_inner_outer_label_color.png) + +#### 関連トピック: + +- +- + + +### データ パス オプション名の変更 + および オプションに代わって、igPieChart コントロールに新しいオプションを追加しました。 新規のオプションは および です。 新しいオプションの追加により、 および は非推奨となります。 + +## igScroll + +### 新しいコントロール + +igScroll は、デスクトップ、ハイブリッド、およびモバイル環境でカスタム スクロールバーを有効にするスタンドアロン jQueryUI ウィジェットです。 +すべてのデバイスのスクロール コンテナー間で一貫性のあるスクロール エクスペリエンスを作成できます。 + +![](../../images/images/igscroll-basic.png) + + +#### 関連トピック +- [igScroll の概要](/igscroll-overview) +- [igScroll の構成](Configuring-igScroll.html) + +#### 関連サンプル +- [基本的な使用方法]({environment:SamplesUrl}/scroll/basic-usage) +- [複数のコンテナーを一度にスクロール]({environment:SamplesUrl}/scroll/scrolling-multiple-containers) +- [構成オプション]({environment:SamplesUrl}/scroll/configuration-options) + + +## igValidator + +### クレジット カードの検証を追加 + + オプションおよび入力規則を追加しました。 + +#### 関連トピック: +[Validation Rules](/igvalidator-validation-rules) + + +## igEditors + +### EmailAddress および Compare Data Annotation 検証属性の追加 + +機能 | 説明 +---|--- +EmailAddress | テキスト エディターを標準の MVC 電子メールパターンで検証します。| +Compare | 関連付けられたエディターを比較する場合に使用します。たとえば、パスワード フィールドのパスワードが一致するかどうかという場面で使用されます。| \ No newline at end of file diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/12-whats-new-in-2016-volume1.mdx b/docs/jquery/src/content/ja/topics/whats-new/revision-history/12-whats-new-in-2016-volume1.mdx new file mode 100644 index 0000000000..1075d3801b --- /dev/null +++ b/docs/jquery/src/content/ja/topics/whats-new/revision-history/12-whats-new-in-2016-volume1.mdx @@ -0,0 +1,141 @@ +--- +title: "2016 Volume 1 の新機能" +slug: whats-new-in-2016-volume1 +--- + +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +#2016 Volume 1 の新機能 + +このトピックでは、{environment:ProductFamilyName}™ 2016 Volume 1 リリースのコントロールと新機能および拡張機能を紹介します。 + + +##新機能: + +以下の表に 2016 Volume 1 の新機能の概要を示します。追加の詳細は以下のとおりです。 + +### 全般 + +機能|説明 +---|--- +新しい Bootstrap 4 テーマ|新しい Bootstrap 4 互換性のあるテーマが {environment:ProductName} に含まれます - [サンプルの表示]({environment:SamplesUrl}/themes/bootstrap4-default)。 +Angular 2 コンポーネント (CTP) |{environment:ProductName} ウィジェットは Angular 2 のコンポーネント ラッパーがあります。詳細については、[{environment:ProductName} Angular 2 GitHub](https://github.com/IgniteUI/igniteui-angular-wrappers) ページを参照してください。| +新しいスケール可能なフォント アイコン|デフォルトの Infragistics テーマは画像アイコンの代わりに [jQuery UI フォント アイコン](https://github.com/mkkeck/jquery-ui-iconfont) を使用します。 | +Modernizr 3.x サポート|{environment:ProductName} は、Modernizr ライブラリを使用してタッチ環境を検出します。詳細については、[{environment:ProductName} コントロールのタッチ サポート](/touch-support-for-igniteui-for-jquery-controls)を参照してください。[Mordernizr 3.x](https://modernizr.com/) は、以前の Modernizr バージョンもサポートされます。 | + +### igTileManager + +機能|説明 +---|--- +スプリッター オプション|`splitterOptions` は `showSplitter` オプションに代わります。表示および非表示、その他複数のオプションが追加されました。スプリッターを縮小可能に構成し、collapsed/expanded イベントにアタッチできます。新しいオプションの使用は次のサンプルを参照ください - [サンプルの表示]({environment:SamplesUrl}/tile-manager/collapsible-splitter)。 + +### igDataSource + +機能|説明 +---|--- +新しいフィールド オプション - `mapper`|dataType="object" のフィールドの場合、複合オブジェクトから複合データ抽出で使用する 関数の設定を許可します。その戻り値は特定のフィールドに実行されるすべてのデータ操作で使用されます。
    詳細については、次のトピックを参照してください: [igDataSource 概要](/igdatasource-igdatasource-overview#schema-fields-mapper)| + +### igGrid + +機能|説明 +---|--- +新しい列オプション - mapper|dataType="object" の列の場合、複合オブジェクトから複合データ抽出で使用する、mapper 関数の設定を許可します。その戻り値は、その列に対するすべてのデータ操作（更新、フィルター、並べ替えなど）で使用されます - [サンプルの表示]({environment:SamplesUrl}/grid/handling-complex-objects)。
    詳細については、次のトピックを参照してください: [列およびレイアウト](/iggrid-columns-and-layout#defining-mapper)| +ColumnFixing 機能は、パーセンテージで設定されるグリッド幅で使用できます。|ColumnFixing 機能は、グリッドの幅がパーセンテージで設定される場合に使用できるようになりました。
    **注**: 列幅は依然としてピクセル単位で定義します。明示的に設定するか、 オプションを使用できます。| +[複数行レイアウト機能](#multi-row-layout)|複数行レイアウト機能は、複数の列および行にまたがるセルを含む多数の行で構成される複雑なグリッド レコード レイアウトを作成できます。 | +[チェックボックスの外観](#checkbox-appearance)|チェックマークが表示モードで操作できないことを示すためにチェックボックス列の外観が変更されました。 | +Excel からの貼り付けサンプル|Excel クリップボード データを igGrid に貼り付けることを紹介するサンプルが追加されました - [サンプルの表示]({environment:SamplesUrl}/grid/paste-from-excel)。 | + +### igTreeGrid + +機能|説明 +---|--- +[向上された更新機能](#treegrid-updating) |igTreeGrid の更新機能に、ルートおよび子レベル行を追加するための UI を導入しました。 + +### TypeScript サポート + +サポートされる TypeScript のバージョンは 1.4 およびそれ以降です。 + +機能|説明 +---|--- +[共用体型のサポート](#union-types) |タイプ チェックを向上するためにウィジェット メンバーは共用体型をサポートします。 +[Intellisense の機能向上](#intellisense-improvements) |Intellisense はオプションおよびメソッドで機能が向上しました。 +[メンバーの説明](#member-descriptions) |すべてのメンバーに説明があります。 + +## igGrid + +### 複数行レイアウト機能 + +複数行レイアウト機能は、複数の列および行にまたがるセルを含む多数の行で構成される複雑なグリッド レコード レイアウトを作成できます。この構造は、列が多くあるため水平スクロールバーが必要なグリッド、または表以外の表示の方が必要なグリッドの代替描画オプションを提供します。 +複数行レイアウトの初期化は、igGrid の列コレクションにより実行できます。列の位置およびサイズを指定する 4 つの新しいプロパティが列定義に追加されました - 、、 および 。 + +![](../../images/images/iggrid-multi-row-layout.png) + +#### 関連トピック +- [グリッドの複数行レイアウト](/iggrid-multirowlayout) + +#### 関連サンプル +- [複数行レイアウト]({environment:SamplesUrl}/grid/multi-row-layout) + +### チェックボックスの外観 +チェックボックス列の外観が変更されました。グリッドが表示モードにある場合、四角ボックスが描画されません。プレーン チェックマークのみが表示されます。この変更はユーザー エクスペリエンスの向上です。切り替えるためにクリックできないため、クリック可能として表示されません。 + +![](../../images/images/iggrid-checkbox.png) + +#### 関連トピック +- [列のチェックボックスのレンダリング](/iggrid-columns-and-layout#checkboxes) + +#### 関連サンプル +- [チェックボックス列]({environment:SamplesUrl}/grid/checkbox-column) + +## igTreeGrid + +### 向上された更新機能 + +[新規行の追加] がユーザー インターフェイスで有効になりました。更に TreeGrid 更新機能の新しいレコードの追加はルート レベルおよび指定したレベルに子レコードをサポートします。行の追加は UI および API により実行できます。 +行がマウスでホバーされるか、タッチ デバイスで行がスワイプされたとき、子行の追加ボタンは行の削除ボタンの隣に表示されます。 +![](../../images/images/igtreegrid-updating.png) + +[新規行の追加] UI は親の隣にインラインで描画されます。 + +![](../../images/images/igtreegrid-updating-add-child.png) + +#### 関連トピック +- [更新 (igTreeGrid)](/igtreegrid-updating) + +#### 関連サンプル +- [更新]({environment:SamplesUrl}/tree-grid/updating) + +## TypeScript サポート + +### 共用体型のサポート + +TypeScript 1.4 で追加された[共用体型](https://github.com/Microsoft/TypeScript/blob/master/doc/spec.md#3.4)は、変数またはメンバーが複数型のセットの 1 つの型に設定することを可能にします。以前、`any` 型として宣言されたメンバーは、特定の型のセットを宣言するために共用体型を使用するようになりました。 + +![](../../images/images/union-types.png) + +### Intellisense の向上 + +オプションおよびメソッドの Intellisense がウィジェットのすべてのオーバーロードを表示するために向上されました。 + +#### オプションのオーバーロード + +getter および setter を含むすべての利用可能なオプションが Intellisense にリストされます。 + +![](../../images/images/option-overloads.png) + +#### メソッドのオーバーロード + +パラメーターを含むすべての利用可能なメソッドが Intellisense にリストされます。 + +![](../../images/images/method-overloads.png) + +#### ウィジェットの `data` にメソッドの Intellisense があります +jQuery UI 構文でウィジェットのメソッドをウィジェットの data から起動できます: $(".selector").data('widgetName')。{environment:ProductName} TypeScript ディレクティブでも可能になりました。 + +![](../../images/images/method-data-overloads.png) + +### メンバーの説明 + +ウィジェットのオプション、イベント、およびメソッドに説明を追加しました。ウィジェットのユーザビリティを向上するために Intellisense で説明が表示されます。 + +![](../../images/images/member-descriptions.png) diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/13-whats-new-in-2015-volume2.mdx b/docs/jquery/src/content/ja/topics/whats-new/revision-history/13-whats-new-in-2015-volume2.mdx new file mode 100644 index 0000000000..555606e715 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/whats-new/revision-history/13-whats-new-in-2015-volume2.mdx @@ -0,0 +1,311 @@ +--- +title: "2015 Volume 2 の新機能" +slug: whats-new-in-2015-volume2 +--- + +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +#2015 Volume 2 の新機能 + +このトピックでは、{environment:ProductFamilyName}™ 2015 Volume 2 リリースのコントロールと新機能および拡張機能を紹介します。 + + +##新機能: + +以下の表に 2015 Volume 2 の新機能の概要を示します。追加の詳細は以下のとおりです。 + +### 全般 + +機能|説明 +---|--- +[MVC 向けの新しい {environment:ProductName} Scaffolder](#igniteui-scaffolder) |{environment:ProductName} ウィジェット用の新しい Scaffolder +{environment:ProductName} のすべてのウィジェットを対象とした ASP.NET MVC 6 の完全なサポート|ASP.NET MVC 6 のバージョン ビルドが、Infragistics.Web.Mvc.dll に含まれるようになりました。 +{environment:ProductName} の TypeScript 1.5 定義|{environment:ProductName} の TypeScript 定義は、TypeScript 1.5 をサポートするようになりました。ウィジェットのメソッドに Intellisense が追加されました。 + +### igCombo +機能|説明 +---|--- +オートコンプリート|コンボに入力すると、一覧から一致する結果を絞り込み表示します。[サンプルの表示]({environment:SamplesUrl}/combo/filtering) +[グループ化](#combo-grouping)|コンボ リスト内の項目をグループ化することができるようになりました。[サンプルの表示]({environment:SamplesUrl}/combo/grouping) +ヘッダーとフッターのテンプレート|テンプレートを使用して、ヘッダーとフッターをコンボで構成できるようになりました。[サンプルの表示]({environment:SamplesUrl}/combo/templates) +RTL サポート|右から左に記述する言語のサポートを追加しました。 +[ドロップダウンの方向](#combo-dd-orientation) |デフォルトで、ドロップダウン リストは使用可能なスペースに応じて上部または下部に自動的に表示されます。ドロップダウン リストのこの動作は、`dropDownOrientation` オプションを使用して明示的に構成することもできます。 +カスタム値|コンボのテキスト入力でカスタム値を設定する `allowCustomValue` オプションは、15.1 で削除されましたが、お客様からのフィードバックに応え、このリリースで復活させました。[サンプルの表示]({environment:SamplesUrl}/combo/editing) +パフォーマンスの向上|コンボを使用するすべての操作は、10,000 個以上のレコードでスムーズに動作します。初期ロード時間、ドロップダウン リストのオープン時およびクローズ時のアニメーション、選択、オート コンプリートおよびオート セレクトによる入力はいずれも、高速で動作します。 + +### igDataChart + +機能|説明 +---|--- +[新しい軸間隔](#chart-axis-intervals) |`igDataChart` コントロールの主軸および副軸の間隔機能を使用すると、指定された色および太さの間隔を `igDataChart` コントロールの x および y 軸に適用することができます。 + +### エディター + +機能|説明 +---|--- +[新しいエディター](#new-editors)|15.2 には、より堅牢で豊富な機能を持つ、高性能な新しいエディターが付属しています。 + +### igGrid + +機能|説明 +---|--- +[リファクタリングされた更新機能](#grid-refactored-updating)|リファクタリングされたグリッドの更新機能は、新しいエディターおよび検証メカニズムを利用し、設計し直されたダイアログ編集モードを提供します。 +列の自動サイズ変更|グリッド列は、セルの内容の幅に基づく自動サイズ変更をサポートするようになりました。自動サイズ変更を有効にするには、列の オプションの値として `*` を使用します。 +[フィルタリングの向上](#grid-filtering-improvements)|カスタム フィルター条件を追加し、特定の列に対するフィルター条件を選択できるようになりました。 +KnockoutJS サポートの改善|レスポンシブ垂直列レンダリングが KnockoutJS でサポートされるようになりました。 +JavaScript ベースの Excel グリッド エクスポーター (RTM)|現在、RTM 版の JavaScript ベースの Excel グリッド エクスポーターは、igGrid、igTreeGrid、igHierarchicalGrid をサポートします。 +ARIA のサポート|W3C WAI-ARIA 仕様に準拠するようになりました。これにより無効化されたユーザーに対しても満足のいくエクスペリエンスが提供できます。 +[RowSelectors の向上](#grid-row-selectors-improvements) |チェックボックス付きの行セレクターおよびページングが有効な場合、すべてのページで選択を有効にできます。 + +### igHierarchicalGrid + +機能|説明 +---|--- +JavaScript ベースの Excel グリッド エクスポーター (RTM)|現在、RTM 版の JavaScript ベースの Excel グリッド エクスポーターは、igGrid、igTreeGrid、igHierarchicalGrid をサポートします。 +ARIA のサポート|W3C WAI-ARIA 仕様に準拠するようになりました。これにより無効化されたユーザーに対しても満足のいくエクスペリエンスが提供できます。 + +### igTreeGrid + +機能|説明 +---|--- +[行セレクター](#treegrid-row-selectors)|TreeGrid の行セレクター機能は、igGrid の行セレクターの機能を継承し、tri-state モードが追加されています。 +[TreeGrid の MVC ラッパーにおけるリモートの並び替え、ページング、フィルタリング、ロードオンデマンド](#treegrid-remote-mvc-features) |リモート シナリオで、標準の並び替え、ページング、フィルタリング、ロードオンデマンドのすべての機能が、MVC ラッパー内部でデフォルト設定のまま使用できるようになりました。 +列移動|TreeGrid に、igGrid の列移動機能を継承する機能が組み込まれました。 +サイズ変更|TreeGrid に、igGrid のサイズ変更機能を継承する機能が組み込まれました。 +キーボード ナビゲーション|TreeGrid のキーボード ナビゲーション機能が向上しました。 +[コンテキスト行のページング](#treegrid-paging-context-row) |リーフレベルのコンテキストを説明する、コンテキスト行のページング機能が追加されました。 +JavaScript ベースの Excel グリッド エクスポーター (RTM)|現在、RTM 版の JavaScript ベースの Excel グリッド エクスポーターは、igGrid、igTreeGrid、igHierarchicalGrid をサポートします。 +ARIA のサポート|W3C WAI-ARIA 仕様に準拠するようになりました。これにより無効化されたユーザーに対しても満足のいくエクスペリエンスが提供できます。 + +### igNotifier +機能|説明 +---|--- +[新しいコンポーネント](#notifier)|Notifier コンポーネントは、ポップオーバー コンポーネントの拡張機能で、エンドユーザーに通知情報を提供します。 + +### igValidator +機能|説明 +---|--- +[リファクタリングされたバリデーター](#validator) |標準の入力フォーム要素だけではなく、一連の {environment:ProductName} コンポーネントも柔軟に検証できるように、バリデーターが作り直されました。 + +### igUpload + +機能|説明 +---|--- +ファイル アップロード時の、クライアントとサーバー間での追加データの送信|ファイルのアップロード プロセス中にクライアントとサーバーとの間でデータを送信できるようになりました。 + +##全般 + +### MVC 向けの新しい {environment:ProductName} Scaffolder + +{environment:ProductName} ウィジェット用の新しい Scaffolder を公開しました。これにより、開発者の生産性が大幅に向上します。データの作成、読み込み、アップデート、削除などの標準的なデータ操作を迅速に絞り込む、コード生成およびテンプレートを提供します。数回のクリック操作で、グリッドの完全な構成やコントローラーの作成、手動によるコーディングの所要時間を短縮することができます。HierarchicalGrid、TreeGrid、DataChart などの他のウィジェットの構成は、すでに進行中です。 +ASP.NET MVC とともに出荷される、作成、編集、削除、詳細、リストの標準テンプレートに加え、新しいエディター ウィジェットを使用する、カスタマイズされた {environment:ProductName} テンプレートを提供します。 + +![](../../images/images/igniteui_scafolder.png) + +#### 関連トピック + +- [{environment:ProductName} Scaffolder の Visual Studio 拡張機能](/mvc-scaffolding) + +## igCombo +### +####グループ化 +新しいグループ化機能は、項目が属するカテゴリに基づき、項目 (たとえば、社員および社員が属する部門) をグループ化し、分類する方法を提供します。 + +![](../../images/images/combo-grouping.png) + +### +####ドロップダウンの方向 +ドロップダウンの方向は、デフォルトで「auto」に設定されています。この場合、利用できるスペース (コンボの上部、下部) に基づき、ドロップダウンの位置は自動的に計算されます。下部にドロップダウンを表示するには、この値を「bottom」に設定し、上部に表示するには「top」に設定します。 + +#### 関連サンプル + +- [オートコンプリート]({environment:SamplesUrl}/combo/filtering) +- [グループ化]({environment:SamplesUrl}/combo/grouping) +- [ヘッダーとフッターのテンプレート]({environment:SamplesUrl}/combo/templates) +- [カスタム値]({environment:SamplesUrl}/combo/editing) + + + + + +## igDataChart + +### 新しい軸間隔 + +igDataChart では、Interval プロパティおよび MinorInterval プロパティを使用して、主間隔および副間隔をすべての数値型およびカテゴリ型の軸に実装できるようになりました。この機能には、チャート軸から公開される MajorStroke、MajorThickness、MinorStroke、MinorThickness の各プロパティを使用して、間隔を色と太さでカスタマイズする機能が含まれています。 + +以下の例では、igDataChart LineSeries の NumericX 軸で主軸および副軸の間隔を使用する方法を示します。 + +![](../../images/images/jQuery_AxisIntervals_NumericX_X_Intervals.png) + +この例では、igDataChart LineSeries のNumericY 軸で主軸および副軸の間隔を使用する方法を示します。 + +![](../../images/images/jQuery_AxisIntervals_NumericY_Y_Intervals.png) + +#### 関連トピック + +- [igDataChart の概要](/igdatachart-overview) +- [軸間隔の構成 (igDataChart)](/igdatachart-configuring-axis-intervals) + +#### 関連サンプル + +- [NumericAxesIntervals](igDataChart-Axis-Intervals.html#preview) : このサンプルでは、NumericX 軸およびNumericY 軸を使用して ScatterLineSeries の主軸および副軸の間隔の使用を紹介します。 +- [CategoryXAxisIntervals](igDataChart-Axis-Intervals.html#categoryxexample) : このサンプルでは、CategoryXAxis を使用して ColumnSeries の主軸および副軸の間隔の使用を紹介します。 + +## エディター + +### 新しいエディター + +このリリースでは、より堅牢で豊富な機能を持つ、高性能なエディター ウィジェットを提供することが 1 つの目的です。エディター の各コンポーネントには、膨大な量のコードで支援された多くの機能があります。弊社の開発チームは、エディターの最適なユーザビリティのためにすべてのエディターを設計し直し、新しいコンポーネントの Checkbox ウィジェットを追加しました。そのため、この最新リリースは、もう 1 つの大型開発キャンペーンとなりました。 +以下に、新しいエディターの主要なゴールの一部を紹介します。 + - 最高のユーザー エクスペリエンスの提供 - すべてのエディターの全体的なユーザー エクスペリエンスを再検討しました。そのため、詳細な設定なしで、従来よりも優れたエクスペリエンスが提供されています。HTML5 の編集機能のメリット、最新のルック アンド フィール、タッチ フレンドリーなインターフェイスを提供します。ラベルの配置から検証、さまざまな状態での対話まで、細部に至るまで配慮しました。 + - より直感的な API - ヘルプ トピックを見る必要はありません。直感的で、確かめられるエディターになりました。基本的に、コントロールを書き込む場合と同様にコード化するだけです。新しいAPIは明示的で、不要なメソッドやオプションはありません。 + - 信頼性の向上 - 低減されたコードの複雑さ、向上したパフォーマンス、高いテスト容易性は、この新しいリリースで提供される全般的な品質向上のごく一部です。 + +![](../../images/images/new_editors.png) + +新しいエディターへの移行方法に関する詳細は、以下の「関連トピック」を参照してください。 + +#### 関連トピック + +- [新しい igCurrencyEditor への移行](/migrating-to-the-new-igcurrencyeditor) +- [新しい igDateEditor への移行](/migrating-to-the-new-igdateeditor) +- [新しい igMaskEditor への移行](/migrating-to-the-new-igmaskeditor) +- [新しい igNumericEditor への移行](/migrating-to-the-new-ignumericeditor) +- [新しい igPercentEditor への移行](/migrating-to-the-new-igpercenteditor) +- [新しい igTextEditor への移行](/migrating-to-the-new-igtexteditor) +- [新しい igDatePicker への移行](/migrating-to-the-new-igdatepicker) + +#### 関連サンプル + +- [新しいテキストエディター]({environment:SamplesUrl}/editors/text-editor) +- [クレジット]({environment:SamplesUrl}/editors/credit) +- [数値エディター]({environment:SamplesUrl}/editors/numeric-editor) +- [マスク エディター]({environment:SamplesUrl}/editors/mask-editor) +- [チェックボックス エディター]({environment:SamplesUrl}/editors/checkbox-editor) +- [日付エディター]({environment:SamplesUrl}/editors/date-editor) + +## igGrid + +### リファクタリングされた更新機能 +リファクタリングされたグリッドの更新機能は、新しいエディターおよび検証メカニズムの特長が活かされています。このリリースで初公開となる機能には、リファクタリングされたダイアログ編集モード (「行編集ダイアログ」と名前を変更しました) もあります。このモードは、ダイアログが簡単にカスタマイズできるように、外観もアーキテクチャも新しく設計し直されています。リファクタリングされた更新機能への移行方法の詳細は、[新しい更新への移行 (igGrid)](/iggrid-updating-migrating-to-the-new-updating) を参照してください。 +グリッド コンポーネントの新しい更新機能は、コードの軽量化、柔軟性の向上、最適化のためにリファクタリングされています。 + +![](../../images/images/updating_row_edit_dialog.png) + +#### 関連トピック +- [新しい更新への移行 (igGrid)](/iggrid-updating-migrating-to-the-new-updating) +- [行編集ダイアログの概要 (igGrid)](/iggrid-updating-roweditdialog) +- [行編集ダイアログの構成 (igGrid)](iggrid-updating-roweditdialog-configuring.html) + +#### 関連サンプル +- [行編集ダイアログ]({environment:SamplesUrl}/grid/row-edit-dialog) +- [編集 - カスタム エディター プロバイダー]({environment:SamplesUrl}/grid/editing-custom-editor-provider) + +### フィルタリングの向上 + +カスタム フィルター条件を追加し、特定の列に対するフィルター条件を選択できるようになりました。 + +フィルタリング機能に、2 つのオプションが組み込まれました。 +- - 列単位でカスタム条件を定義する一連のオブジェクト。 + +![](../../images/images/filtering_custom_conditions.png) + +- - 列単位で有効にする一連の条件。 + +#### 関連サンプル +- [フィルタリング]({environment:SamplesUrl}/grid/custom-conditions-filtering) + +### RowSelectors の向上 +行セレクターと組み合わせてページング機能を有効にすると、すべての行をすべてのページにわたって選択できるように、追加 UI が表示されます。 + +![](../../images/images/grid_improvements_row_selectors.png) + +この機能は、 オプション、、および オプションを設定して有効にします。 + +#### 関連トピック +- [行セレクターの構成 (igGrid)](../../02_Controls/igGrid/03_Features/02_Row Selectors/01_igGrid_Configuring_Row_Selectors.mdx) + +## igTreeGrid + +### 行セレクター + +igTreeGrid の行セレクター機能は、igGrid の RowSelectors が拡張されています。 +この機能には、階層番号付けモードと tri-state チェックボックスという 2 つの新しい機能が導入され、階層データが簡単に選択できるようにカスタマイズされています。 +階層番号付けモードの場合、行番号に、階層の各レベルのカウンターが含まれます。この機能は オプションにより管理します。 + +![](../../images/images/tregrid_row_selectors_hierarchical_numbering_mode.png) + +tri-state チェックボックスには、親行にオン状態の子行があることを示す、部分的なチェック状態が導入されています。この機能は オプションにより管理します。 + +![](../../images/images/tregrid_row_selectors_tri_state_checkboxes.png) + +さらに、行セレクターと組み合わせてページング機能を有効にすると、すべてのページを跨ぎすべての行が選択できるように、追加の UI が表示されます。 + +![](../../images/images/tregrid_row_selectors_paging.png) + +#### 関連トピック +- [行セレクター (igTreeGrid)](/igtreegrid-row-selectors) + +#### 関連サンプル +- [行セレクター]({environment:SamplesUrl}/tree-grid/row-selectors) + +### TreeGrid の MVC ラッパーにおけるリモートの並び替え、ページング、フィルタリング、ロードオンデマンド + +TreeGrid の MVC ラッパーは、並び替え、ページング、フィルタリング、ロードオンデマンドのリモート操作をデフォルト設定のままで処理できるようになりました。 +必要なのは、`TreeGridDataSourceAction` 属性を使用して、リモート機能を処理するアクションの追加だけです。 + +#### 関連トピック +- [リモート機能 (igTreeGrid)](/igtreegrid-remote-features) + +#### 関連サンプル +- [リモート機能]({environment:SamplesUrl}/tree-grid/remote-features) + +### コンテキスト行のページング + +大量な階層データセットでは、階層内の場所を特定するのが難しい場合があります。リーフレベルのコンテキストを説明する、コンテキスト行のページング機能を追加しました。このトレイルは、リーフからすべての先祖までの完全なパスを表しています。使用可能なコンテキストは以下のとおりです。 + - none - コンテキスト行は描画されません。 + - parent - 直近の親行の読み取り専用表記を描画します。 + - breadcrumb - すべての先祖にわたる完全なパスを表す読み取り専用ブレッドクラムトレイルを描画します。 +この機能は オプションにより管理します。 + +![](../../images/images/treegrid_paging_context_row.png) + +#### 関連トピック +- [ページング (igTreeGrid)](/igtreegrid-paging) + +#### 関連サンプル +- [ページング]({environment:SamplesUrl}/tree-grid/paging) + +## igNotifier + +### 新しいコンポーネント + +Notifier コンポーネントは、ポップオーバー コンポーネントの拡張機能で、エンドユーザーに通知情報を提供します。通知状態は、success、info、warning、errorの 4 つが事前定義されています。 +コンポーネントは、単純なインライン スタイルのメッセージングだけではなく、ポップオーバー モードもサポートします。さらに、ディター ウィジェットを使用した自動ペアリング機能が追加され、定義済みの範囲外の入力エラーが検出できるようになりました。 +Notifier コンポーネントは、{environment:ProductName} ウィジェットでの使用または単独での使用にかかわらず、簡単で直観的な方法でユーザー エクスペリエンスを向上させます。 + +![](../../images/images/notifier.png) + +#### 関連トピック +- [igNotifier の概要](/ignotifier-overview) + +#### 関連サンプル +- [基本的な使用方法]({environment:SamplesUrl}/notifier/basic-usage) +- [インライン メッセージ]({environment:SamplesUrl}/notifier/inline-messages) +- [igEditors を使用するNotifier]({environment:SamplesUrl}/editors/with-igEditors) + +## igValidator + +### リファクタリングされたバリデーター + +リファクタリングされた igValidator コンポーネントを使用すると、標準の入力フォーム要素だけではなく、一連の {environment:ProductName} コンポーネントも柔軟に検証できます。このメカニズムは、検証プロセスの処理とエンド ユーザーに対する柔軟で視覚的な通知の表示の両方で、igNotification コンポーネントの機能を使用します。リファクタリングされた igValidator への移行方法については、[新しい igValidator コントロールへの移行](/igvalidator-migration-topic)を参照してください。 + +![](../../images/images/validator.png) + +#### 関連トピック +- [igValidator の概要](/igvalidator-overview) +- [新しい igValidator コントロールへの移行](/igvalidator-migration-topic) + +#### 関連サンプル +- [基本的な使用方法]({environment:SamplesUrl}/validator/basic-usage) diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/14-whats-new-in-2015-volume1.mdx b/docs/jquery/src/content/ja/topics/whats-new/revision-history/14-whats-new-in-2015-volume1.mdx new file mode 100644 index 0000000000..9c2f6a5234 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/whats-new/revision-history/14-whats-new-in-2015-volume1.mdx @@ -0,0 +1,257 @@ +--- +title: "2015 Volume 1 の新機能" +slug: whats-new-in-2015-volume1 +--- + +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +#2015 Volume 1 の新機能 + +このトピックでは、{environment:ProductFamilyName}™ 2015 Volume 1 リリースのコントロールと新機能および拡張機能を紹介します。 + + +##新機能の概要 + +以下の表に 2015 Volume 1 の新機能の概要を示します。追加の詳細は以下のとおりです。 + +### 全般 + +機能|説明 +---|--- +[新しい {environment:ProductName} ヘルプ ビューアー](#help-viewer)|{environment:ProductName} の新しいヘルプ ビューアーを公開しました。 + +### {environment:ProductName} ページのデザイナー + +機能|説明 +---|--- +[設定不要のテーマ サポート](#page-designer-theming-support) |その他の {environment:ProductName} テーマおよび定義済みのテーマ ピッカーで選択可能な Bootstrap テーマのサポートを追加しました。 +[改良されたデータ ソース エクスペリエンス](#page-designer-datasource-expirience) |JSONP データ ソースおよびローカル データ ソースの明示的サポートと、新しいデータ ソース エディターを追加しました。 +[Ace に対する IntelliSense サポート](#page-designer-intellisense-support) |デザイナーがコード ビューであるときに、ユーザーが入力を開始すると、IntelliSense を表示するサポートが追加されました。 +[リモート データ ソース - ユーザー フレンドリなエラー](#page-designer-remote-dataSource) |リモート データ ソースへの接続中にWeb デザイナーで、発生する可能性のある問題に関する詳細な情報を表示する、ユーザー インターフェイスが利用できるようになりました + + +### Infragistics JavaScript Excel ライブラリ + +機能|説明 +---|--- +[新しいライブラリ (RTM)](#new-javascript-excel-library)|ブラウザーでの Excel 文書の作成、読み込み、編集に使用できる純粋な JavaScript ベースのクライアント サイドの Excel ライブラリです。 + +### igGrid + +機能|説明 +---|--- +[JavaScript Excel グリッド エクスポーター (CTP)](#grid-excel-exporter)|サーバーとの送信なしで表示されるデータを Excel ファイルにエクスポートできます。 +列固定と列移動との互換性|グリッドで列固定と列移動の両方を有効にすることができるようになりました。 +向上された列固定 API|グリッドで列を特定の位置に固定するには、グリッドで列のターゲット キーを移動先に提供します。 +選択機能の向上|複数の領域選択は、Ctrl + マウス ドラッグを使用して実行できます。非連続の選択領域は可能です。 +ページングの永続化|persist オプションは Paging 機能に追加されました。 +[レスポンシブ機能の向上](#grid-responsive-feature-improvements)|新しい単一列テンプレート モードが追加されました。 +[列のスタイル設定](#grid-column-styling)|igGrid の列構成でカスタム ヘッダーおよび列 CSS クラスを指定するための新しい設定を追加しました。 + + + +### igTreeGrid + +機能|説明 +---|--- +[新しいコントロール (RTM)](#tree-grid)|igTreeGrid™ コントロールは RTM になりました。igTreeGrid™ コントロールでは、一般的なデータ スキーマを使用して階層データを一連の列に入れ見えるようにすることができます。 +[ツリー固有のフィルター](#tree-grid-filtering)|igTreeGrid は、グリッドでフィルター結果のコンテキストを表示する特別なフィルター視覚化があります。 +ツリー固有のページング|グリッドでデータをページングするとき、ルート レベルまたはすべての表示可能なレベルで表示可能なデータをページングするオプションがります。 +拡張された展開オプション|ツリー グリッドは構成可能な展開インジケーターを提供します。最初のデータ列または単独列に描画できます。展開インジケーターは、カスタム視覚化のために別のルック アンド フィールでもカスタマイズできます。 +仮想化|igTreeGrid は連続仮想化を含みます。これにより、高いパフォーマンスのエクスペリエンスを維持しながら、グリッドを階層データの大きなセットにバインドできます。 +[リモート ロード オン デマンド](#tree-grid-remote-load-on-demand)|グリッドにデータの大きなセットが描画される場合に、一度にデータの小さなセットの入ったページのみを提供したいことがあります。リモート ロード オン デマンドを使用すると、igTreeGrid でユーザーの要求に応じて全データの一部分のみをグリッドに追加できます。 +ローカル ロード オン デマンド|グリッドの高いパフォーマンスをさらに維持するために、igTreeGrid には展開されたノードのみをブラウザーに描画することを保証するローカル ロード オン デマンドがあります。ユーザーが親ノードを展開すると、ページで新しい要素がその場で作成され、ユーザーに表示する新しいデータをサポートします。 + + + +### igCombo + +機能|説明 +---|--- +[書き換えられたコントロール](#combo)|15.1 では、優れた UX と信頼性を最優先に構築した新しいコンボを発表されました。 +スタイリングの改善|新しいコンボは、配置とサイズ設定にインライン CSS スタイリングを使用しないため、ブラウザーの描画最適化機能を一層活用できます。 +デフォルトの改善|設定なしでよりよい UX を提供できるように、一部の領域でデフォルトを変更しました。これは、エンド ユーザーに最適なエクスペリエンスを提供するためにプログラムが必要なコードも削減します。 +新しいキーボード操作|古いコンボも基本的な操作を備えていましたが、キーボードでできる操作を大幅に拡張しました。マウスとキーの間を交互に行き来せずに、ナビゲート、選択、展開などをエンド ユーザーは一層効率的に自然に実行することができます。 +改善された信頼性|コンボのサイズを 44% 削減したため、コードの複雑性が減少し、オートメーション コード カバレッジが一層高くなりました。 +API 改善|また、この機会に、改善の余地のある API 選択を再考し、API の発見可能性と分かりやすさを改善しました。 +[Knockout 拡張機能の改善](#combo_ko)|現在、igCombo は完全な Knockout 拡張機能を備え、Knockout 監視可能コレクションと igCombo リストの間の TwoWay データ バインディング、ならびにコンボで選択した項目の TwoWay データ バインディングをサポートします。 + +### モバイル コントロール + +機能|説明 +---|--- +jQuery Mobile 1.4+ サポート |{environment:ProductName} モバイル コントロールは、jQuery Mobile 1.4+ の最新バージョンと互換性があります。 + + +##全般 + +### 新しい {environment:ProductName} ヘルプ ビューアー + +{environment:ProductName} の新しいヘルプ ビューアーを公開しました。これにより、各トピックのナビゲートと共有が一層容易になり、製品バージョン（14.1 以降）をトピック内で直接容易に切り替えることもできるようになりました。 +一層使いやすいエクスペリエンスだけでなく、実際のトピック自体も Markdown の GitHub で使用可能になりました。GitHub のプル要求によって、トピックに関する問題を容易にレポートでき、トピックに対して追加や変更を送信することもできます。 + +#### 関連コンテンツ + +- [GitHub の {environment:ProductName} ヘルプ トピック](https://github.com/IgniteUI/help-topics) + +##{environment:ProductName} ページのデザイナー + +### テーマ サポート +リストからテーマを選択すると、デザイン表面にすでにドロップされているすべてのコンポーネントのテーマが変更されます。 + +![](../../images/images/Whats_New_In_Ignite_UI_2015_Volume_1_2.png) +### データ ソース エクスペリエンスの改善 +ページ デザイナーには、ローカル、リモート、Northwind の 3 つの事前定義されたデータ ソース型があります。ローカル型とリモート型はいずれも構成設定のための異なるガイドを提供します。NorthWind データ ソースは、特定の列を持つ Customers を要求する Northwind odata サービスをポイントするように事前定義された構成を持つリモート データ ソースです。 + +####ローカル データ ソース +![](../../images/images/Whats_New_In_Ignite_UI_2015_Volume_1_local_dataSource.png) +####リモート データ ソース +![](../../images/images/Whats_New_In_Ignite_UI_2015_Volume_1_remote_dataSource.png) +####NorthWind データ ソース +![](../../images/images/Whats_New_In_Ignite_UI_2015_Volume_1_northwind_dataSource.png) + +### Ace に対する IntelliSense サポート +Web デザイナーは、デザイナーがコードモードでカーソルがコンポーネントの内部にあるときに、IntelliSense をサポートするようになりました。ユーザーが入力を開始すると、ウィジェットに関係する事前定義されたオプションに基づく示唆が提供されます。 + +![](../../images/images/Whats_New_In_Ignite_UI_2015_Volume_1_intellisense.png) +### リモート データ ソース - ユーザー フレンドリーなエラー +データ ソースをリモート データにバインドする場合、リモート要求からのエラーが発生することがあります。リモート データ ソースへの接続中にWeb デザイナーでは、発生する可能性のある問題に関する詳細な情報を表示するユーザー インターフェイスを利用できるようになりました。ユーザーは、応答状態、エラー、データ型、コンテンツに関する重要な情報を得ることができます。ブラウザー ツールを使用して問題を調査する必要はありません。 + +##Infragistics JavaScript Excel ライブラリ + + +### 新しいライブラリ (RTM) + +14.2では、「クライアント サイド Excel ライブラリ」の最初のバージョンを CTP しました。現在は「Infragistics JavaScript Excel ライブラリ」という名前に変更されています。RTM バージョンではファイル サイズが小さくなり、ブラウザー互換性が強化されました。 + +#### 関連トピック + +- [Infragistics JavaScript Excel ライブラリの理解](../../09_JavaScript Excel Library/00_Understanding/~Understanding_the_Infragistics_JavaScript_Excel_Library.mdx) +- [{environment:ProductName} JavaScript Excel ライブラリの使用](../../09_JavaScript Excel Library/01_Using/~Using_The_JavaScript_Excel_Library.mdx) + +#### 関連サンプル + +- [Excel の表]({environment:NewSamplesUrl}/javascript-excel-library/excel-table) +- [Excel の書式設定]({environment:NewSamplesUrl}/javascript-excel-library/excel-formatting) +- [Excel の数式]({environment:NewSamplesUrl}/javascript-excel-library/excel-formulas) + + +## igGrid + +### JavaScript Excel グリッド エクスポーター (CTP) + +igGridExcelExporter コンポーネントにより、igGrid から Microsoft Excel ドキュメントにデータをエクスポートできます。エクスポートは、テーマとワークブックのカスタマイズをサポートし、並べ替え、フィルタリング、ページングなどの機能によりグリッドで操作されたデータを反映します。以下のスクリーンショットは、エクスポートされた igGrid の Excel での実際の表示を示しています。 + +#### 関連トピック + +- [Grid Excel エクスポーターの概要](../../02_Controls/igGrid/05_igGridExcelExporter Overview.mdx) + +#### 関連サンプル + +- [基本グリッドを Excel にエクスポート]({environment:NewSamplesUrl}/grid/export-basic-grid) +- [機能とグリッドを Excel にエクスポート]({environment:NewSamplesUrl}/grid/export-feature-rich-grid) +- [グリッド Excel エクスポートのカスタマイズ]({environment:NewSamplesUrl}/grid/export-client-events) +- [進行状況インジケーターとグリッドを Excel にエクスポート]({environment:NewSamplesUrl}/grid/export-grid-loading-indicator) + + +### レスポンシブ機能の向上 + +新しいオプション はレスポンシブ ウェブ デザイン モードに追加され、特定のプロファイルに単一列テンプレートを定義できます。 + +![](../../images/images/Whats_New_In_Ignite_UI_2015_Volume_1_3.png) + +#### 関連サンプル + +- [レスポンシブ単一列テンプレート]({environment:NewSamplesUrl}/grid/responsive-single-column-template) + +### 列のスタイル設定 +新しい および 列設定を使用して、以下のスクリーンショットに示すように CSS クラスをヘッダーと列データ セルの両方に適用できます。 +![](../../images/images/Whats_New_In_Ignite_UI_2015_Volume_1_column_styling.png) + + +##igTreeGrid + +### 新しいコントロール (RTM) + +`igTreeGrid`™ コントロールでは、一般的なデータ スキーマを使用して、一連の列で階層データを見えるようにすることができます。 + +RTM でサポートされる機能 + +- 列の固定 +- 非表示 +- フィルタリング +- 並べ替え +- 更新 +- ページング +- 選択 +- ツールチップ +- 複数列ヘッダー + +![](../../images/images/Whats_New_In_Ignite_UI_2015_Volume_1_TreeGrid.png) + +#### 関連トピック + +- [概要 (igTreeGrid)](/igtreegrid-overview) + +#### 関連サンプル + +- [JSON のバインド]({environment:NewSamplesUrl}/tree-grid/json-binding) +- [貸借対照表]({environment:NewSamplesUrl}/tree-grid/balance-sheet) + +### ツリー固有のフィルタリング + +igTreeGrid 固有のフィルタリングにより、一致する結果をユーザーに表示する方法を細かく制御できます。新しい プロパティは、フィルター処理された結果のグリッドで表示される状態を制御します。デフォルトは `"showWithAncestors"` で、一致を完全な不透明で描画し、その親ノードをそれより低い不透明度で描画します (以下の画像参照)。 +使用可能なその他のモードに `showWithAncestorsAndDescendants` があります。これはデフォルトに加えて、子レコードがフィルタリング条件に一致しない場合でも、子レコードも描画します。 + +![](../../images/images/Whats_New_In_Ignite_UI_2015_Volume_1_TreeGrid_Filtering.png) + +#### 関連トピック + +- [フィルタリング (igTreeGrid)](/igtreegrid-filtering) + +#### 関連サンプル + +- [ファイル エクスプローラー]({environment:NewSamplesUrl}/tree-grid/file-explorer) + +### リモート ロード オン デマンド + +ロード オン デマンド機能は、ユーザーがツリー グリッドのノードを展開するときにサーバーから子ノードのデータを要求します。このタイプの操作により、ページの読み込みやツリー グリッド バインディングがより速くなり、初期フットプリントが軽くなります。結果として最新のデータを提供できる可能性が広がります。 + +![](../../images/images/Whats_New_In_Ignite_UI_2015_Volume_1_TreeGrid_Load_on_Demand.png) + +#### 関連トピック + +- [ロード オン デマンド (igTreeGrid)](/igtreegrid-load-on-demand) + +#### 関連サンプル + +- [ロード オン デマンド]({environment:NewSamplesUrl}/tree-grid/load-on-demand) + +##igCombo + +### 書き換えられたコントロール + +約 4 年前に出荷されたオリジナルの jQuery ベースのコンボはすぐれた機能を持っていましたが、年月の経過につれて、古さも目につき始めました。15.1 では、優れた UX と信頼性を最優先に構築した新しいコンボを発表しました。コンボを大きく改善する一方で、API 変更は最小限にとどめたため、最小限の削除と置換で新しいコンボのメリットを活用することができます。 + +![](../../images/images/Whats_New_In_Ignite_UI_2015_Volume_1_Combo.png) + +#### 関連トピック + +- [igCombo の概要](/igcombo-overview) +- [新しいコンボへの移行](/igcombo-migrating-to-the-new-combo) + +#### 関連サンプル + +- [JSON のバインド]({environment:NewSamplesUrl}/combo/json-binding) +- [選択およびチェックボックス]({environment:NewSamplesUrl}/combo/selection-and-checkboxes) +- [フィルタリング]({environment:NewSamplesUrl}/combo/filtering) +- [ロード オン デマンド]({environment:NewSamplesUrl}/combo/load-on-demand) +- [キーボード ナビゲーション]({environment:NewSamplesUrl}/combo/keyboard-navigation) + +### 書き換えられた Knockout 拡張機能 + +igCombo の Knockout 拡張機能は、新しい igCombo の要件に応じて調整されました。オプションの一部が削除され、新しいオプションが導入されました。すべての変更は、igCombo が Knockout View-Model にバインドされる際に、ユーザーが igCombo を容易に構成できることを目的にしています。 + +#### 関連サンプル + +- [KnockoutJS のバインド]({environment:NewSamplesUrl}/combo/bind-combo-with-ko) diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/15-whats-new-in-2014-volume2.mdx b/docs/jquery/src/content/ja/topics/whats-new/revision-history/15-whats-new-in-2014-volume2.mdx new file mode 100644 index 0000000000..75cd0aefb5 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/whats-new/revision-history/15-whats-new-in-2014-volume2.mdx @@ -0,0 +1,260 @@ +--- +title: "2014 Volume 2 の新機能" +slug: whats-new-in-2014-volume2 +--- + +#2014 Volume 2 の新機能 + +このトピックでは、{environment:ProductFamilyName}™ 2014 Volume 2 リリースのコントロールと新機能および拡張機能を紹介します。 + + +##新機能の概要 + +以下の表に 2014 Volume 2 の新機能の概要を示します。追加の詳細は以下のとおりです。 + +### 全般 + +機能|説明 +---|--- +[AngularJS ディレクティブ](#angular-directives)|{environment:ProductName} コントロールに、AngularJS のカスタム ディレクティブが組み込まれました。 + + + + +### {environment:ProductName} ページ デザイナー + +機能|説明 +---|--- +[HTML5 に対応する WYSIWYG](#wysiwyg)|{environment:ProductName} コントロールを使用する最新 Web 用ドラッグ アンド ドロップ UI デザイン領域。 +レスポンシブな Web デザイン (RWD)|レスポンシブなデザインを簡単に作成するために、ブレークポイントを可視化し管理します。 +クリーンなコード エディター|プロジェクトに組み込むための、クリーンなコードを確認、編集、コピーします。 +簡単なデータ アクセス|コントロールをデータに接続するための、{environment:ProductName} のデータ ソースのコンポーネントが簡単に構成できます。 +API の統合ヘルプ|コンポーネント エディターとコード エディターで API メンバーについてのヘルプを参照してください。 + + + +### クライアント サイドの Excel ライブラリ + +機能|説明 +---|--- +[新しいライブラリ (CTP)](#new-library)|ブラウザーでの Excel 文書の作成、読み込み、編集に使用できる純粋な JavaScript ベースのクライアント サイドの Excel ライブラリです。 + + + +### igGrid + +機能|説明 +---|--- +[行仮想化と連動する列固定](#column-fixing-row-virtualization)|グリッドで列固定と行仮想化の両方を有効にすることができるようになりました。 +[オン デマンドの行追加 (RTM)](#append-rows-on-demand)|ロード オン デマンド機能は RTM であるため、オン デマンドの行追加と名前を変更しました。 +[選択機能の向上](#selection-feature-improvements)|選択機能のコードベースを完全に作り直しました。 + + + +### igTreeGrid + +機能|説明 +---|--- +[新しいコントロール (CTP)](#new-control)|igTreeGrid™ コントロールでは、一般的なデータ スキーマを使用して階層データを一連の列に入れ見えるようにすることができます。 + + + +### igPivotGrid + +機能|説明 +---|--- +[ツリー レイアウト](#tree-layout)|`igPivotGrid`™ コントロールにより、行階層をツリー構造で表示できるようになりました。 + + + +### テーマ + +機能|説明 +---|--- +[Bootstrap でのテーマ化](#bootstrap-theming)|{environment:ProductName} コントロールは、Bootstrap でのテーマ化をサポートします。 +[新しいテーマ (RTM)](#new-theme)|iOS 7 スタイルのテーマは現在 RTM 版ですが、iOS テーマという名前に変更されました。このテーマが従来の iOS6 スタイルのテーマに置き換わります。このテーマには、jQuery Mobile 1.4 以降のコントロールのサポートも追加されました。 +[jQuery UI 1.11 以降をサポートするために更新されたテーマ](#update-themes)|jQuery UI 1.11 以降のユーザー独自のコントロールをサポートするために、新しいテーマ ファイルが追加されました。 + + +##全般 + +### AngularJS ディレクティブ + +Infragistics の GitHub リポジトリで、最新版の AngularJS ディレクティブのプレビューを公開しました。これらのディレクティブは現在、正式な製品版ですが、RTM 版でもあります。 + +すべての {environment:ProductName} コントロールはカスタム タグ、コントローラー、またはコントローラー オプションを使用して、宣言によってインスタンス化できます。さらに以下のコントロールは、双方向のデータ バインディングをサポートします。 + +- igGrid +- igCombo +- igEditors +- igTree +- igDataChart + +#### 関連コンテンツ + +[AngularJS ディレクティブ](../../10_AngularJS Directives/~AngularJS_Directives.mdx) + +[GitHub に公開されている AngularJS 用の {environment:ProductName} ディレクティブ](https://github.com/IgniteUI/igniteui-angularjs) + +#### 関連サンプル + +[AngularJS のサンプル用の {environment:ProductName} ディレクティブ](http://igniteui.github.io/igniteui-angularjs/) + + + +##{environment:ProductName} ページ デザイナー + + +### HTML5 に対応する WYSIWYG + +LOB ページをレイアウトし活性化するために、一般的な HTML 要素、Bootstrap コンポーネント、{environment:ProductName} コンポーネントを活用します。{environment:ProductName} の使用方法の学習や、{environment:ProductName} コントロールを素早く構成してプロジェクトにコピーするには、これが最善の方法です。 + +**ページ デザイナー： [{environment:DesignerUrl}]({environment:DesignerUrl})** + + +![](../../images/images/Whats_New_In_Ignite_UI_2014_Volume_2_1.png) + +### レスポンシブな Web デザイン (RWD) + +レスポンシブ CSS ブレークポイントの可視化と編集を行います。ブレークポイントに対して CSS の編集をすぐに開始できます。さらに、Bootstrap の行コンポーネントまたは {environment:ProductName} のレイアウト コンポーネントを使用すると、レスポンシブなページのグリッド レイアウトを簡単に定義することができます。 + +![](../../images/images/Whats_New_In_Ignite_UI_2014_Volume_2_2.png) + +### クリーンなコード エディター + +プロジェクトに必要なクリーンなコードの確認、編集、コピー、およびコンポーネントのオプションの定義に役立つように、世界水準の ACE コード エディターをベースに、クリーンなコード エディターを開発しました。 + +![](../../images/images/Whats_New_In_Ignite_UI_2014_Volume_2_3.png) + +### 簡単なデータ アクセス + +{environment:ProductName} のデータ ソースの各コンポーネントにより、コントロールをデータに接続する操作が簡単になります。カスタム コンポーネント エディターであるページのデザイナーにより、これらのコントロールとデータを簡単に使用できるようになり、これらのコントロールとデータを使用するコンポーネントでのデータ ソースの設定が容易になります。データ ソースは、コンポーネント エディターでリストから選択、またはグリッドのようにデータ ソースをコントロールにドロップするのみです。 + +### API の統合ヘルプ + +デザイナー全体に API ヘルプが組み込まれているため、ヘルプ情報を詳しく調べる必要はありません。コード エディターとコンポーネント エディターにも、API ヘルプが組み込まれています。 + +1. {environment:ProductName} のコンポーネントの場合は、コンポーネント エディターで ? リンクをクリックすると、対象のコンポーネントに関する API ドキュメントに直接移動できます。 +2. プロパティやイベント上にホバーすると、関連する API ドキュメントを表示することもできます。 + +![](../../images/images/Whats_New_In_Ignite_UI_2014_Volume_2_4.png) + + + +##クライアント サイドの Excel ライブラリ + + +### 新しいライブラリ (CTP) + +Infragistics の新しい Excel ライブラリは、純粋な JavaScript ベースのクライアント サイドのライブラリです。ブラウザーでのExcel 文書の読み込みや Excel 2003 以降の形式での保存をサポートしています。セルの書式とスタイル、数式の解決、結合されたセル、データの入力規則などを、JavaScript から管理できます。 + +#### 関連トピック + +- [{environment:ProductName} のクライアント サイド Excel ライブラリの概要](../../09_JavaScript Excel Library/00_Understanding/JavaScript_Excel_Library_Overview.mdx) +- [{environment:ProductName} のクライアント サイド Excel ライブラリの使用](../../09_JavaScript Excel Library/01_Using/~Using_The_JavaScript_Excel_Library.mdx) + + +## igGrid + +### 行仮想化と連動する列固定 + +列固定に加え、固定式または連続式の仮想化を有効にすることができるようになりました。 + +![](../../images/images/Whats_New_In_Ignite_UI_2014_Volume_2_5.png) + +### オン デマンドの行追加 (RTM) + +従来、ロード オン デマンドと呼ばれていた機能を、オン デマンドの行追加という名前に変更しました。これは、この機能が実行する内容を明確にし、他のコントロールで同じような名前を持つ機能と区別するためです。 + +![](../../images/images/Whats_New_In_Ignite_UI_2014_Volume_2_6.png) + +#### 関連トピック + +[オン デマンドの行追加の概要 (igGrid)](/append-rows-on-demand-overview) + +### 選択機能の向上 + +`igGrid`™ の選択機能を完全に作り直しました。その結果、コードベースが 30% 減少し、グリッド内のすべての行の選択などのリリース集中型の操作の一部が最適化されました。操作完了までの時間が短縮されています。 + + + +##igTreeGrid + +### 新しいコントロール (CTP) + +`igTreeGrid`™ コントロールでは、一般的なデータ スキーマを使用して、一連の列で階層データを見えるようにすることができます。お客様からのフィードバックを歓迎いたします。是非、ご意見をお寄せください。 + +CTP でサポートされる機能 + +- 列の固定 +- 非表示 +- フィルタリング +- 並べ替え +- 更新 +- ページング +- サイズ変更 +- 選択 +- ツールチップ +- 複数列ヘッダー + +![](../../images/images/Whats_New_In_Ignite_UI_2014_Volume_2_7.png) + +#### 関連トピック + +- [igTreeGrid の概要](/igtreegrid-overview) + +#### 関連サンプル + +- [ファイル エクスプローラー]({environment:NewSamplesUrl}/tree-grid/file-explorer) +- [貸借対照表]({environment:NewSamplesUrl}/tree-grid/balance-sheet) + + +##igPivotGrid + +### ツリー レイアウト + +`igPivotGrid`™ コントロールにより、行階層をツリー構造で表示できるようになりました。複数の階層が追加されると、各階層のメンバーが一つ前の階層の各メンバーの上または下に一覧表示されます。 + +![](../../images/images/Whats_New_In_Ignite_UI_2014_Volume_2_8.png) + +#### 関連サンプル + +- [レイアウト モード]({environment:NewSamplesUrl}/pivot-grid/layout-modes) + +##テーマ + +### Bootstrap でのテーマ化 + +このリリースでは、Bootstrap のテーマ (Bootstrap で定義されている LESS 変数を使用) のルック アンド フィールを {environment:ProductName} コントロールに適用するメカニズムを追加しました。結果として生成されるテーマは、スタンドアロンとなり Bootstrap の有無にかかわらず使用できます。 + +製品には、「Bootstrap」 (デフォルトの Bootstrap テーマと同じ)、「Superhero」、「Yeti」、「Flatly」の 4 つのテーマがプリセットされています。これらのテーマは、[bootswatch.com](http://bootswatch.com/) サイトから取得した各テーマに対してコンパイルされます。 + +テーマの作成やカスタマイズに役立つ新しいサイトもあります。 + +![](../../images/images/Whats_New_In_Ignite_UI_2014_Volume_2_9.png) + +注:プリセットされた 4 つのテーマと、テーマの生成に使用する LESS ファイルと互換性があるのは、jQuery UI 1.11 以降のコントロールのみです (これは、jQuery UI 1.11 には、コントロールの CSS 構造に関する重大な変更があったためです)。 + +#### 関連コンテンツ + +- [Bootstrap 用テーマ ジェネレーター]({environment:NewSamplesUrl}/bootstrap-theme-generator) + +### 新しいテーマ (RTM) + +従来の iOS7 テーマという名前を iOS に変更しました。これが、以前の iOS6 スタイルのテーマと置き換わります。iOS テーマは現在 RTM 版ですが、{environment:ProductName} のモバイル コントロールのサポートが追加されています。 + +![](../../images/images/Whats_New_In_Ignite_UI_2014_Volume_2_10.png) + +>**注:**モバイル iOS テーマは、jQuery Mobile 1.4.2 以降をサポートしています。igListView コントロールは、jQuery Mobile 1.4 をサポートせず、このテーマとも互換性はありません。 + +#### 関連サンプル + +- [iOS テーマ]({environment:NewSamplesUrl}/themes/ios) + +### jQuery UI 1.11 以降をサポートするために更新されたテーマ + +jQuery UI 1.11 以降の独自のコントロールをサポートするために、Infragistics のテーマを更新しました。ただし、jQuery UI には CSS 構造に関する重大な変更があったため、{environment:ProductName} のテーマを使用する際に、jQuery UI のネイティブなコントロールのルック アンド フィールに若干の問題が発生する場合があります。 + + + + diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/16-whats-new-in-2014-volume1.mdx b/docs/jquery/src/content/ja/topics/whats-new/revision-history/16-whats-new-in-2014-volume1.mdx new file mode 100644 index 0000000000..1ef6a85c84 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/whats-new/revision-history/16-whats-new-in-2014-volume1.mdx @@ -0,0 +1,395 @@ +--- +title: "2014 Volume 1 の新機能" +slug: whats-new-in-2014-volume1 +--- + +import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; + +# 2014 Volume 1 の新機能 + +## トピックの概要 +### 目的 + +このトピックでは、{environment:ProductFamilyName}™ 2014 Volume 1 リリースのコントロールと新機能および拡張機能を紹介します。 + + +## 新機能の概要 +### 新機能の概要表 + +以下の表は 2014 Volume 1 の新機能の概要を提供します。詳細については、概要表の後をご覧ください。 + +### 全般 + +機能|説明 +---|--- +[新しい Visual Studio テンプレート](#new-vs-template)|Microsoft® Visual Studio® のファイル > 新しいプロジェクト ダイアログで新しい Infragistics テンプレートを提供します。 +[新しいテーマ (CTP)](#new-theme)|iOS 7 という名称の新しいテーマが追加されています。このテーマは、アップルの iOS 7 のデザインをモデルにしています。 + + + +### igDataChart + +機能|説明 +---|--- +[新しいデフォルトのスタイル](#igdatachart-new-default-style)|このスタイルは、チャートをさらに洗練された印象にするための、さまざまな視覚効果を変更する機能があります。 + + + +### igColorPicker + +機能|説明 +---|--- +[新規コントロール (CTP)](#igcolorpicker-new-control)|`igColorPicker`™ コントロールでは、定義済みのカラーの選択、またはカスタム カラー パレットの定義ができます。 + + + +### igGrid + +機能|説明 +---|--- +[列固定と非表示列](#column-fixing-hidden-columns)|グリッドで固定列と非表示列の両方を持つことができます。 +[機能状態の保持](#feature-persistence)|機能状態の保持とは、再バインド間でグリッド機能の状態を保持することを意味します。 +[タッチ デバイスの行削除の向上](#improved-delete-row-mobile)|タッチ対応デバイスで行を削除するユーザー エクスペリエンスが向上しました。 + + + +### igHierarchicalGrid + +機能|説明 +---|--- +[機能状態の保持](#ighierarchicalgrid-feature-persistence)|機能状態の保持とは、再バインドの間に階層グリッド機能の状態を保持することを意味します。 +[タッチ デバイスの行削除の向上](#ighierarchicalgrid-improved-delete-row-mobile)|タッチ対応デバイスで行を削除するユーザー エクスペリエンスが向上しました。 + + + +### igHtmlEditor + +機能|説明 +---|--- +[新しいデフォルトのスタイル](#htmleditor-default-style)|ツールバーとボタンの新しいルック アンド フィールです。 + + + +### igPivotGrid、igPivotDataSelector、igOlapXmlaDataSource + +機能|説明 +---|--- +[KPI サポート](#kpi-support)|`igOlapXmlaDataSource`™ に、キューブに定義された KPI を表示する組み込みサポートが提供されました。データ ソースから提供された KPI は、`igPivotDataSelector`™ および `igPivotGrid`™ で視覚化されます。 +[リモート ADOMD.NET データ プロバイダーのサポート](#remote-adomnet-data-provider)|`igOlapXmlaDataSource` により、SSAS サーバーの通信で ADOMD.NET を使用するもう 1 つのリモート構成もサポートされています。 + + + +### igPopover + +機能|説明 +---|--- +[新規コントロール (RTM)](#igpopover-newcontrol)|`igPopover`™ コントロール (現在は、RTM) は、ツールチップに似た機能を DOM 要素に追加します。 + + + +### igRadialMenu + +機能|説明 +---|--- +[新規コントロール (RTM)](#igradialmenu-new-control)|`igRadialMenu`™ コントロールは、中央ボタンの周りに項目を円形の配置で表示するコンテキスト メニューです。 + + + +### igSplitButton + +機能|説明 +---|--- +[新規コントロール (CTP)](#igsplitter-new-control)|`igSplitButton` は、プライマリ ボタンにバインドするデフォルト値の選択、またはドロップダウン リストに表示されたリストからセカンダリ ボタンにバインドする値の選択ができるドロップダウン ボタンです。ボタンにデフォルトの操作/コマンドを提供すると同時に、補助的なオプションも提供したい場合に便利です。 + + + +### igToolbar + +機能|説明 +---|--- +[新規コントロール (CTP)](#igtoolbar)|`igToolbar`™ コントロールにより、`igHtmlEditor`™ のカスタム ツールバーのようなツールバーを作成できます。 + + + +### igUpload + +機能|説明 +---|--- +[Web Farm / Web Garden のサポート](#igupload-support-web-gardens)|`igUpload`™ コントロールが、Web Farm / Web Garden Internet Information Services (IIS) 構成をサポートするようになりました。 + + + +## 全般 +### 新しい Visual Studio テンプレート + +Visual Studio 2012 以後のバージョンでファイル > 新しいプロジェクト ダイアログから新しい Infragistics テンプレートをダウンロードできます。このテンプレートを使用することで高度な機能、デザイン、スタイルを持つアプリケーションの作成作業をすぐに開始できます。 + +各テンプレートでヘルプが提供されます。複数のアプリケーション シナリオに合わせるために Infragistics テンプレート ギャラリーにテンプレートを追加する予定があります。 + +![](../../images/images/Whats_New_Project_Dialog.png) + +注: {environment:ProductName} の以前のバージョンで、テンプレートが製品インストーラーによってインストールされます。テンプレートは Infragistics テンプレート ギャラリーからアクセスできるようになりました。 + +### 新しいテーマ (CTP) + +iOS 7 という名称の新しいテーマが追加されています。このテーマは、アップルの iOS 7 のデザインをモデルにしています。 + +![](../../images/images/Whats_New_In_Ignite_UI_2014_Volume_1_16.png) + +#### 関連サンプル + +- [iOS 7 テーマ]({environment:SamplesUrl}/themes/ios) + + + +## チャートの共通機能 +### 新しいデフォルトのスタイル + +新しいデフォルトのスタイルがチャート コントロールに適用され、より洗練された外観のチャートが作成できます。(必要に応じて、`legacy.css` スタイル ファイル を使用する従来のデフォルトのスタイルに、チャート コントロールを戻すこともできます。) + +古いデフォルトのスタイル + +![](../../images/images/Whats_New_In_Ignite_UI_2014_Volume_1_1.png) + + + +新しいデフォルトのスタイル + +![](../../images/images/Whats_New_In_Ignite_UI_2014_Volume_1_2.png) + + + +### サポートされるコントロール + +- igDataChart +- igDoughnutChart +- igFunnelChart +- igPieChart + +#### 関連トピック + +- [新しいデフォルトのスタイル](igDataChart-New-Default-Style.html) + + + +## igColorPicker +### 新規コントロール (CTP) + +`igColorPicker` コントロールでは、事前定義されたカラーの選択、またはカスタム カラー パレットを定義できます。 + +![](../../images/images/Whats_New_In_Ignite_UI_2014_Volume_1_3.png) + + + +## igGrid +### 列固定と非表示列 + +グリッドで固定列と非表示列の両方を持つことができます。(列固定機能が列非表示機能と統合されています。) + +![](../../images/images/Whats_New_In_Ignite_UI_2014_Volume_1_4.png) + +### 機能状態の保持 + +機能状態の保持とは、再バインド間でグリッド機能の状態を保持することを意味します。 + +### サポートされる機能 + +- フィルタリング +- Groupby +- RowSelectors +- 選択 +- 並べ替え + +新しいプロパティの が、これらの機能に追加されました。機能状態の保持はデフォルトで有効です。 + +### 関連トピック + +- [選択の概要](/iggrid-selection-overview) +- [列のグループ化の概要](/iggrid-groupby-overview) +- [フィルタリング](/iggrid-filtering) +- [並べ替え概要](/iggrid-sorting-overview) + +#### 関連サンプル + +- [機能の永続化]({environment:SamplesUrl}/grid/feature-persistence) + +### タッチ デバイスの行削除の向上 + +タッチ対応デバイスで行を削除するユーザー エクスペリエンスが向上しました。 + +セル編集モードで、左右へのスワイプにより行の削除ボタンが表示されます。 + +![](../../images/images/Whats_New_In_Ignite_UI_2014_Volume_1_5.png) + +行編集モードでは、キャセルボタンや完了ボタンと共に、行の削除ボタンを使用できます。 + +![](../../images/images/Whats_New_In_Ignite_UI_2014_Volume_1_6.png) + +>**注:** この機能の稼働には、Modernizr ライブラリが必要です。 + +#### 関連サンプル + +- [基本編集]({environment:SamplesUrl}/grid/basic-editing) + + + +## igHierarchicalGrid +### 機能状態の保持 + +機能状態の保持とは、再バインド間でグリッド機能の状態を保持することを意味します。 + +### サポートされる機能 + +- フィルタリング +- Groupby +- RowSelectors +- 選択 +- 並べ替え + +新しいプロパティ - + +が、これらの機能に追加されました。 機能状態の保持はデフォルトで有効です。 + +#### 関連トピック + +- [選択の概要](/iggrid-selection-overview) +- [列のグループ化の概要](/iggrid-groupby-overview) +- [フィルタリング](/iggrid-filtering) +- [並べ替え概要](/iggrid-sorting-overview) + +#### 関連サンプル + +- [機能の永続化]({environment:SamplesUrl}/grid/feature-persistence) + +### タッチ デバイスの行削除の向上 + +タッチ対応デバイスで行を削除するユーザー エクスペリエンスが向上しました。 + +セル編集モードで、左右へのスワイプにより行の削除ボタンが表示されます。 + +![](../../images/images/Whats_New_In_Ignite_UI_2014_Volume_1_7.png) + +行編集モードでは、キャセルボタンや完了ボタンと共に、行の削除ボタンを使用できます。 + +![](../../images/images/Whats_New_In_Ignite_UI_2014_Volume_1_8.png) + + + +## igHtmlEditor +### 新しいデフォルトのスタイル + +新しいデフォルトのスタイルにより、`igHtmlEditor` のルールバーとボタンが新しいルック アンド フィールで提供されます。 + +古いデフォルトのスタイル + +![](../../images/images/Whats_New_In_Ignite_UI_2014_Volume_1_9.png) + + + +新しいデフォルトのスタイル + +![](../../images/images/Whats_New_In_Ignite_UI_2014_Volume_1_10.png) + + + + + +## igPivotGrid、igPivotDataSelector、igOlapXmlaDataSource +### KPI サポート + +キューブに定義された KPI を表示する組み込みサポートが、`igOlapXmlaDataSource` に提供されています。データ ソースから提供された KPI は、`igPivotDataSelector` および `igPivotGrid` で視覚化されます。 + +![](../../images/images/Whats_New_In_Ignite_UI_2014_Volume_1_11.png) + +#### 関連トピック + +- [KPI (キー パフォーマンス インジケーター) のサポート (igPivotGrid、igPivotDataSelector、igOlapXmlaDataSource)](/igpivotgrid-kpi-support) + +#### 関連サンプル + +- [XMLA データ ソースにバインド]({environment:SamplesUrl}/pivot-grid/binding-to-xmla-data-source) + +### リモート ADOMD.NET データ プロバイダーのサポート + +`igOlapXmlaDataSource` により、SSAS サーバーの通信で ADOMD.NET を使用するもう 1 つのリモート構成もサポートされています。 + +#### 関連トピック + +- [データ プロバイダーの構成の概要 (igOlapXmlaDataSource)](../../04_Data-Sources/OLAP/02_Xmla/02_Config/00_Data Provider/00_igOlapXmlaDataSource_Data_Provider_Configuration_Overview.mdx) + +#### 関連サンプル + +- [リモート ADOMD.NET プロバイダー]({environment:SamplesUrl}/pivot-grid/remote-adomd-provider) + + + +## igPopover +### 新規コントロール (RTM) + +`igPopover` コントロール (現在は RTM) は、ツールチップに似た機能を DOM 要素に追加します。`igPopover` はコンテキスト依存メニューです。動的コンテンツ、詳細情報、オーバーレイされたフォーム、または特定の要素に表示されるすべての情報を表示します。ポップオーバー領域はカスタマイズでき、ロード オン デマンドすることもできます。コンテンツ、アクティブ化および位置について構成できます。 + +![](../../images/images/Whats_New_In_Ignite_UI_2014_Volume_1_12.png) + +#### 関連トピック + +- [igPopover](/igpopover-landingpage) + +#### 関連サンプル + +- [基本的な使用方法]({environment:SamplesUrl}/popover/basic-popover) + + + +## igRadialMenu +### 新規コントロール (RTM) + +`igRadialMenu` コントロールは、中央ボタンの周りに項目を円形の配置で表示するコンテキスト メニューです。項目を円形に配置することで項目をすばやく選択できます。各項目は中央に対して均等に配置されます。`igRadialMenu` は、数値、色値、または操作を実行する項目タイプをサポートします。サブ項目もサポートします。 + +![](../../images/images/Whats_New_In_Ignite_UI_2014_Volume_1_13.png) + +#### 関連するトピック: + +- [igRadialMenu](/igradialmenu) + +#### 関連サンプル + +- [ボタン項目]({environment:SamplesUrl}/radial-menu/button-items) + + + +## igSplitButton +### 新規コントロール (CTP) + +`igSplitButton` コントロールは、プライマリ ボタンにバインドするデフォルト値の選択、またはドロップダウン リストに表示されたリストからセカンダリ ボタンにバインドする値の選択ができるドロップダウン ボタンです。ボタンにデフォルトの操作/コマンドを提供すると同時に、補助的なオプションも提供したい場合に便利です。 + +![](../../images/images/Whats_New_In_Ignite_UI_2014_Volume_1_14.png) + +#### 関連サンプル + +- [分割ボタンの基本機能]({environment:SamplesUrl}/split-button/change-shapes) + + + +## igToolbar +### 新規コントロール (CTP) + +`igToolbar` コントロールによって、`igHtmlEditor` のカスタム ツールバーのようなツールバーを作成できます。 + +![](../../images/images/Whats_New_In_Ignite_UI_2014_Volume_1_15.png) + +#### 関連サンプル + +- [スタンドアロン ツールバー]({environment:SamplesUrl}/html-editor/standalone-toolbar) + + + +## igUpload +### Web Farm / Web Garden のサポート + +`igUpload` コントロールが、Web Farm / Web Garden Internet Information Services (IIS) 構成をサポートするようになりました。サード パーティ プロバイダーが `igUpload` のデータ構造を使用できるように、アプリケーション全体で `CustomDictionaryProvider` オプションを持ちます。オプションの値は、`ISafeDictionary<文字列, UploadInfo>` インターフェイスを実装する型名です。型を実装すると、単一行ソースからのアップロード ファイルの共通データの保存や読み取りができます。 + + + + + + diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/17-whats-new-in-2013-volume2.mdx b/docs/jquery/src/content/ja/topics/whats-new/revision-history/17-whats-new-in-2013-volume2.mdx new file mode 100644 index 0000000000..6477ec27e3 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/whats-new/revision-history/17-whats-new-in-2013-volume2.mdx @@ -0,0 +1,623 @@ +--- +title: "2013 Volume 2 の新機能" +slug: whats-new-in-2013-volume2 +--- + +# 2013 Volume 2 の新機能 + +## トピックの概要 +### 目的 + +このトピックは、{environment:ProductName}™ 2013 Volume 2 リリースの新機能の概要について紹介します。 + +## 新機能 +### 新機能の概要表 + +以下の表に、{environment:ProductName} 2013 Volume 2 リリースの新機能を簡単に説明します。詳細は、概要表の後に記載されています。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    コントロール機能説明
    {environment:ProductName}カスタム ダウンロードカスタム ダウンロードを作成する新しいツールが使用できます。使用するコントロールを選択すると、ツールがカスタマイズ、結合、および縮小された JavaScript ファイルとテーマ ファイルを含むダウンロード パッケージを作成します。[ダウンロードのページ]({environment:SamplesUrl}/download) で詳細を参照してください。
    [igBulletGraph](#igbulletgraph)[新規コントロール](#igbulletgraph-new-control)`igBulletGraph` コントロールは、データをブレット グラフ形式で視覚化するコントロールです。
    [igDataChart](#igdatachart)[タイトルとサブタイトル](#title-subtitle)チャートの上セクションにタイトル、サブタイトル、またはその両方を追加できます。
    [軸のタイトルとサブタイトル](#axis-title-subtitle)コントロールの x 軸および y 軸にタイトル、サブタイトル、またはその両方を追加できます。
    [シリーズの強調表示](#series-highting)シリーズ全体を強調表示、またはシリーズ内の特定の項目を強調表示することもできます。
    [アニメーション化されたトランジション](#animation-transition)チャートを最初に読み込んだときに、シリーズをアニメーションで表示できます。
    [ホバー操作](#hover-interactions)ホバー操作機能を使用して、チャートのシリーズにアノテーションを表示することができます。これらのアノテーションは、カーソルに依存せず、構成可能なホバー操作レイヤーを介して実装されます。
    [軸目盛り](#axis-ticks)垂直軸および水平軸で目盛を表示できます。
    [カラー グラデーション](#color-gradients)チャート内にグラデーション カラーを使用することができます。
    [デフォルト ツールチップ](#default-tooltips)デフォルト ツールチップを使用できます。つまり、プロパティを設定せずにシリーズでツールチップを表示することが可能です。
    [ドロップ シャドウ](#drop-shadow)影付き効果をシリーズに適用できます。
    [新しい CSS スタイル](#new-css-style)`igDataChart` コントロールには、新しい CSS スタイルがあります。このスタイルは、チャートを見やすくするために、さまざまな視覚効果を変更する機能があります。
    [Knockout のサポート](#knockout-support)`igDataChart` コントロール内の Knockout ライブラリをサポートしています。
    igDataSource日付毎の oData フィルタリング`igDataSource` を oData サービスにバインドすると、日付列のフィルタリングが可能になります。
    [igDoughnutChart](#igdoughnutchart)[新規コントロール](#igdoughnutchart-new-control)`igDoughnutChart` は、データをドーナツ型チャート形式で視覚化するコントロールです。
    [igGrid](#iggrid)[列の固定](#iggrid-column-fixing)以前は CTP として配布されていた列固定機能が製品版としてリリースされ、マニュアルも完備しています。この機能はグリッドの右または左の列を固定して、水平方向にスクロールしたときにビューの外に出ないようにします。
    [jsRender の結合](#jsrender-integration)`igGrid` コントロールは、 jsRender テンプレート エンジンをサポートします。
    [RWD モードの垂直柱レンダリング](#vertical-column-rendering)垂直柱レンダリング機能は、ブラウザーのビューポートの幅を変更するレスポンシブ Web デザイン (RWD) として、2 つの列でグリッドを描画します。最初の列は列のキャプションを表示し、2 番目の列はデータを表示します。
    [機能セレクターの新しいデザイン](#feature-chooser-new-design)機能セレクターは、デザインを一新し、タッチ対応デバイスのサポートを強化しました。
    [ロードオンデマンド (CTP)](#load-on-demand)`igGrid` ロード オン デマンド機能 (現在は CTP の一部) を使用した場合、要求されたデータがビューで必要になるまで、データはグリッドにロードされません。これにより、大きなデータセットの場合にグリッドの性能が大幅に向上します。
    [igLayoutManager](#iglayoutmanager)[新規コントロール](#iglayoutmanager-new-control)igLayoutManager はすでに製品版 (RTM) です。
    [igLinearGauge](#iglineargauge)[新規コントロール](#iglineargauge-new-control)`igLinearGauge` コントロールはリニア ゲージでデータを視覚化します。スケールおよび 1 つ以上の比較範囲と比較したパフォーマンス値をシンプルで簡潔に表示します。
    [igMap](#igmap)[高密度散布シリーズ](#high-density-scatter-series)新しいグラフィック高密度シリーズを使用すると、数百から数百万のデータ ポイントから広がる散布図データを最短の読み込み時間でバインドして表示できます。
    [igPieChart](#igpiechart)[ラベルの引き出し曲線](#curved-label)`igPieChart` のラベル引き出し線に、2 つのタイプの曲線を追加できます。
    [igPopover](#igpopover)[新規コントロール (CTP)](#igpopover-new-control)`igPopover` コントロール (現在は CTP の一部) は、ツールチップに似た機能を DOM 要素に追加します。
    [igQRCodeBarcode](#qrcode)[新規コントロール](#qrcode-new-control)`igQRCodeBarcode` コントロールは、Web アプリケーションで使用する QR (Quick Response) バーコード画像を生成します。
    [igRadialGauge](#igradialgauge)[新規コントロール](#igradialgauge-new-control)`igRadialGauge` は、ゲージを表示するデータ ビジュアライゼーション ツールです。スケール、目盛、ラベル、針、および範囲の数などの複数の視覚要素を含むことができます。
    [igTileManager](#igtilemanager)[新規コントロール](#igtilemanager-new-control)以前は CTP として配布されていた `igTileManager` が製品版としてリリースされ、マニュアルも完備しています。`igTileManager` は、データをタイルに描画して管理できるレイアウト コントロールです。
    [igZoombar](#igzoom)[新規コントロール](#igzoom-new-control)`igZoombar` コントロールは、`igDataChart` と同様に、範囲対応コントロールにズーム機能を提供します
    + + + + + +## igBulletGraph +### 新規コントロール + +`igBulletGraph` コントロールは、データをブレット グラフ形式で視覚化するコントロールです。このコントロールはリニアのデザインで、スケールおよびオプションで他の複数の測定との比較を、パフォーマンス バーにシンプルで簡潔に表示します。 + +![](../../images/images/igBulletGraph.png) + +#### 関連トピック + +- [igBulletGraph](/igbulletgraph) + +#### 関連サンプル + +- [基本構成]({environment:SamplesUrl}/bullet-graph/basic-configuration) + + + +## igDataChart +### タイトルとサブタイトル + +チャートの上セクションにタイトル、サブタイトル、またはその両方を追加できます。タイトルまたはサブタイトルを追加すると、チャートのコンテンツがタイトル / サブタイトルのコンテンツに合わせて自動的にサイズ変更されます。 + +![](../../images/images/Whats_New_In_Ignite_UI_2013_Volume_2_2.png) + +#### 関連トピック + +- [**チャートのタイトル / サブタイトルの構成 (igDataChart)**](/igdatachart-chart-titles-and-subtitles) + +#### 関連サンプル + +- [タイトルとサブタイトル]({environment:SamplesUrl}/data-chart/chart-title) + +### 軸のタイトルとサブタイトル + +コントロールの x 軸および y 軸に、タイトルやサブタイトルを追加できます。 + +![](../../images/images/Whats_New_In_Ignite_UI_2013_Volume_2_3.png) + +#### 関連トピック + +- [**軸のタイトルの構成 (igDataChart)**](/igdatachart-axis-title) + +#### 関連サンプル + +- [軸のタイトルとサブタイトル]({environment:SamplesUrl}/data-chart/axis-title) + +### シリーズの強調表示 + +シリーズ全体を強調表示、またはシリーズ内の特定の項目を強調表示することもできます。 + +強調表示は、シリーズ固有の機能です。Line シリーズなどの単一図形シリーズでは、折れ線全体が強調表示されます。Column シリーズなどの複数の図形から構成されるシリーズは、各図形 (柱状) が強調表示されます。サポートされるすべてのシリーズで、各マーカーを強調表示できます。 + +強調表示は、マウスでのみサポートされます。 + +シリーズの強調表示は、以下のシリーズでサポートされます。 + +- カテゴリ シリーズ +- 範囲カテゴリ シリーズ +- 財務物価シリーズ +- 財務指標 + +#### 関連トピック + +- [シリーズの強調表示の構成 (igDataChart)](/igdatachart-series-highlighting) + +#### 関連サンプル + +- [シリーズの強調表示](/igdatachart-series-highlighting#series-highlighting-examples) + +### アニメーション化されたトランジション + +この機能は、`igDataChart` コントロールの初期化時に、シリーズのアニメーションを可能にします。 + +#### 関連トピック + +- [トランジション イン アニメーション](/igchart-transitions-in-animations) + +#### 関連サンプル + +- [トランジション アニメーション]({environment:SamplesUrl}/data-chart/transition-animation) +- [トランジション アニメーション (財務)](/igchart-transitions-in-animations#transition-example) + +### ホバー操作 + +ホバー操作機能を使用して、チャートのシリーズにアノテーションを表示することができます。これらのアノテーションは、カーソルに依存せず、構成可能なホバー操作レイヤーを介して実装されます。 + +![](../../images/images/Whats_New_In_Ignite_UI_2013_Volume_2_4.png) + +ホバー操作 レイヤーは 、実際にはシリーズ コレクションに追加されるシリーズで、カーソル位置に依存します。`igDataChart` コントロールにホバー操作レイヤーを追加すると、追加されたレイヤー タイプに基づいて十字線およびツールチップのデフォルト動作を無効にします。 + +#### 関連トピック + +- [**ホバー操作の構成 (igDataChart)**](../../02_Controls/igDataChart/04_Configuring/04_Hover Interactions/~HoverInteractions_Hover_Interactions.mdx) + +#### 関連サンプル + +- [**カテゴリ ハイライト レイヤー**](../../02_Controls/igDataChart/04_Configuring/04_Hover Interactions/00_HoverInteractions_Category_Highlight_Layer.mdx#example) +- [**カテゴリ項目ハイライト レイヤー**](../../02_Controls/igDataChart/04_Configuring/04_Hover Interactions/01_HoverInteractions_Category_Item_Highlight_Layer.mdx#example) +- [**カテゴリ ツールチップ レイヤー**](../../02_Controls/igDataChart/04_Configuring/04_Hover Interactions/02_HoverInteractions_Category_Tooltip_Layer.mdx#example) +- [**十字線レイヤー**](../../02_Controls/igDataChart/04_Configuring/04_Hover Interactions/03_HoverInteractions_Crosshair_Layer.mdx#example) +- [**項目ツールチップ レイヤー**](../../02_Controls/igDataChart/04_Configuring/04_Hover Interactions/04_HoverInteractions_Item_Tooltip_Layer.mdx#example) + +### 軸目盛り + +チャート プロット領域の外側に軸目盛を表示できます。これにより、各ラベルに目盛が表示できます。また軸のグリッドラインを目盛で置き換えるとチャート外観が簡素化し見やすくなります。 + +![](../../images/images/Whats_New_In_Ignite_UI_2013_Volume_2_5.png) + +#### 関連トピック + +- [設定可能なビジュアル要素](/igdatachart-visual-elements) + +### カラー グラデーション + +チャート内にグラデーション カラーを使用することができます。 + +![](../../images/images/Whats_New_In_Ignite_UI_2013_Volume_2_6.png) + +#### 関連トピック + +- [データのビジュアル化でのグラデーション カラーの使用](/using-gradient-colors-in-data-visualizations) + +#### 関連サンプル + +- [カラー グラデーション]({environment:SamplesUrl}/data-chart/chart-fill-gradients) + +### デフォルト ツールチップ + +デフォルト ツールチップを使用できます。つまり、プロパティを設定せずにシリーズでツールチップを表示することが可能です。デフォルト ツールチップ テンプレートは、シリーズ タイプによって情報を最適化します。 + +![](../../images/images/Whats_New_In_Ignite_UI_2013_Volume_2_7.png) + +#### 関連トピック + +- [**設定可能なビジュアル要素**](/igdatachart-visual-elements) + +#### 関連サンプル + +- [シリーズのツールチップ](/igdatachart-visual-elements#samples) + +### ドロップ シャドウ + +影付き効果をシリーズのビジュアル表示に適用できます。 + +![](../../images/images/Whats_New_In_Ignite_UI_2013_Volume_2_8.png) + +#### 関連トピック + +- [チャート シリーズのスタイル設定 (igDataChart)](/igdatachart-styling-the-chart-series) + +### 新しい CSS スタイル + +`igDataChart` コントロールには、新しい CSS スタイルがあります。このスタイルは、チャートを見やすくするために、複数のビジュアル変更と設定を行う機能があります。 + +### 古いスタイル + +![](../../images/images/Applying_the_New_Style_1.png) + +### 新しいスタイル設定 + +![](../../images/images/Applying_the_New_Style_2.png) + +#### 関連トピック + +- 新しいデフォルト スタイル (`igDataChart`) + +### Knockout のサポート + +`igDataChart` コントロール内の Knockout ライブラリをサポートしています。これは Knockout ライブラリとその宣言構文を使いやすくし、`igDataChart` のインスタンス作成と構成を容易にします。 + +#### 関連トピック + +- [**Knockout サポートの構成 (igDataChart)**](/igdatachart-knockoutjs-support) + + + +## igDoughnutChart +### 新規コントロール + +`igDoughnutChart` は、データをドーナツ型チャート形式で視覚化するコントロールです。これは、変数の発生を比例的に示すことが可能です。コントロールの内部半径は構成可能で、ドーナツ型チャート シリーズにはスライスの選択および展開のサポートが内蔵されています。 + +複数の変数の発生 (複数シリーズの追加) は、同心リングを使用して視覚化できます。チャートは、プロパティを構成する、またはテーマを適用することでスタイル設定できます。 + +![](../../images/images/Whats_New_In_Ignite_UI_2013_Volume_2_11.png) + +#### 関連トピック + +- [igDoughnutChart](/igdoughnutchart) + +#### 関連サンプル + +- [ドーナツ型チャート]({environment:SamplesUrl}/doughnut-chart/overview) + + + +## igGrid +### 列の固定 + +以前は CTP として配布されていた列固定機能が製品版としてリリースされ、マニュアルも完備しています。この機能はグリッドの右または左の列を固定して、水平方向にスクロールしたときにビューの外に出ないようにします。これは、グリッド インターフェイスから、または列固定機能の API を介してプログラムで実行できます。列固定がアクティブになると、固定した列と固定できる列のヘッダーにはピン固定ボタンが表示されます。 + +![](../../images/images/Whats_New_In_Ignite_UI_2013_Volume_2_12.png) + +#### 関連トピック + +- [**列固定の概要 (igGrid)**](/iggrid-columnfixing-overview) + +#### 関連サンプル + +- [列の固定]({environment:SamplesUrl}/grid/column-fixing) + +### jsRender の結合 + +`igGrid` コントロールは、 jsRender テンプレート エンジンをサポートします。 + +#### 関連トピック + +- [**jsRender の統合 (igGrid)**](/iggrid-jsrender-integration) + +#### 関連サンプル + +- [**jsRender の結合**]({environment:SamplesUrl}/grid/jsrender-integration) + +### RWD モードの垂直柱レンダリング + +垂直柱レンダリング機能は、ブラウザーのビューポートの幅を変更するレスポンシブ Web デザイン (RWD) として、2 つの列でグリッドを描画します。最初の列は、列のキャプションが存在するヘッダー列です。2 番目の列には、行データが含まれます。 + +![](../../images/images/Whats_New_In_Ignite_UI_2013_Volume_2_13.png) + +#### 関連トピック + +- [**垂直柱レンダリングの構成 (RWD モード、igGrid)**](/iggrid-responsive-web-design-mode-configuring-vertical-column-rendering) + +#### 関連サンプル + +- [**レスポンシブ垂直レンダリング**]({environment:SamplesUrl}/grid/responsive-vertical-rendering) + +### 機能セレクターの新しいデザイン + +機能セレクターは、デザインを一新し、タッチ対応デバイスのサポートを強化しました。 + +![](../../images/images/Whats_New_In_Ignite_UI_2013_Volume_2_14.png) + +#### 関連トピック + +- [機能セレクター](/iggrid-feature-chooser) + +#### 関連サンプル + +- [機能セレクター]({environment:SamplesUrl}/grid/feature-chooser) + +### ロードオンデマンド (CTP) + +`igGrid` ロード オン デマンド機能 (現在は CTP の一部) を使用した場合、要求されたデータがビューで必要になるまで、データはグリッドにロードされません。これにより、大きなデータセットの場合にグリッドの性能が大幅に向上します。ロード オン デマンドは、Automatic と Manual の 2 つのモードで動作できます。 + +- Automatic モードの場合は、グリッドをスクロール ダウンした時に、必要に応じてデータが追加されます。 +- Manual モードの場合は、グリッドの下の [その他のデータを読み込む] ボタンを押した時に、データが追加されます。 + +![](../../images/images/Whats_New_In_Ignite_UI_2013_Volume_2_15.png) + +#### 関連サンプル + +- [ロード オン デマンド]({environment:SamplesEmbedUrl}/grid/append-rows-on-demand) + + + +## igLayoutManager +### 新規コントロール + +`igLayoutManager` は、ページ要素を定義済み (カスタマイズ可能) のレイアウト パターン (「レイアウト」と呼びます) に配置することで、Web アプリケーションの HTML ページのレイアウト全体を管理するレイアウト コントロールです。 + +![](../../images/images/Whats_New_In_Ignite_UI_2013_Volume_2_16.png) + +#### 関連トピック + +- [igLayoutManager](/iglayoutmanager-landing-page) + +#### 関連サンプル + +- [レスポンシブ列レイアウト]({environment:SamplesUrl}/layout-manager/column-layout-markup) +- [レスポンシブ フロー レイアウト]({environment:SamplesUrl}/layout-manager/flow-layout) + + + +## igLinearGauge +### 新規コントロール + +`igLinearGauge` コントロールはリニア ゲージでデータを視覚化します。 +スケールおよび 1 つ以上の比較範囲と比較したパフォーマンス値をシンプルで簡潔に表示します。 + +![](../../images/images/igLinearGauge.png) + +#### 関連トピック + +- [igLinearGauge](/iglineargauge) + +#### 関連サンプル + +- [基本構成]({environment:SamplesUrl}/linear-gauge/basic-configuration) + + + +## igMap +### 高密度散布シリーズ + +新しいグラフィック高密度シリーズを使用すると、数百から数百万のデータ ポイントから広がる散布図データを最短の読み込み時間でバインドして表示できます。 + +シリーズではデータ ポイントが非常に多いため、散布データを通常のマーカーではなく、小さなドットで表示します。最もデータが集約した領域は、データ ポイントのクラスターを高濃度の色で表します。 + +![](../../images/images/Whats_New_In_Ignite_UI_2013_Volume_2_18.png) + +#### 関連トピック + +- [**地理高密度散布シリーズの構成 (igMap)**](/igmap-using-geographic-high-density-scatter-series) + +#### 関連サンプル + +- [ギャラリー - 高密度散布シリーズ]({environment:SamplesUrl}/map/geo-high-density-scatter-series) + + + +## igPieChart +### ラベルの引き出し曲線 + +`igPieChart` のラベル引き出し線に、2 つのタイプの曲線を追加できます。直線または曲線の使用、線のスタイル変更、ラベルと線の端の間のスペースなどを選択できます。 + +![](../../images/images/Whats_New_In_Ignite_UI_2013_Volume_2_19.png) + +#### 関連サンプル + +- [レイアウトの構成]({environment:SamplesUrl}/pie-chart/layout-configuration) + + + +## igPopover +### 新規コントロール (CTP) + +`igPopover` コントロール (現在は CTP の一部) は、ツールチップに似た機能を DOM 要素に追加します。これはツールチップに対して、以下のような各種のカスタム化を可能にします: + +- HTML コンテンツの表示 +- 「Left」、「Right」、「Top」、「Bottom」の位置のカスタマイズ +- ルック アンド フィールのカスタマイズ +- トリガー (`igPopover` を表示するイベント) のカスタマイズ +- 複数の要素のインスタンス作成 +- タッチ サポート + +![](../../images/images/Whats_New_In_Ignite_UI_2013_Volume_2_20.png) + +#### 関連サンプル + +- [ベーシック ポップオーバー]({environment:SamplesUrl}/popover/basic-popover) + + + +## igQRCodeBarcode +### 新規コントロール + +`igQRCodeBarcode` コントロールは、Web アプリケーションで使用する QR (Quick Response) バーコード画像を生成します。以下のスクリーンショットは、http://www.infragistics.com データをエンコードした `igQRCodeBarcode` コントロールのサンプルを示します。 + +![](../../images/images/Whats_New_In_Ignite_UI_2013_Volume_2_21.png) + +#### 関連トピック + +- [igQRCodeBarcode](/igqrcodebarcode) + +#### 関連サンプル + +- [QR バーコードの基本構成]({environment:SamplesUrl}/barcode/basic-configuration) + + + +## igRadialGauge +### 新規コントロール + +`igRadialGauge` は、ゲージを表示するデータ ビジュアライゼーション ツールです。スケール、目盛、ラベル、針、および範囲の数などの複数の視覚要素を含むことができます。このコントロールは、スケールの視覚的な合図である範囲もサポートします。 + +![](../../images/images/Whats_New_In_Ignite_UI_2013_Volume_2_22.png) + +#### 関連トピック + +- [igRadialGauge](/igradialgauge) + +#### 関連サンプル + +- [igRadialGauge]({environment:SamplesUrl}/radial-gauge/overview) + + + +## igTileManager +### 新規コントロール + +以前は CTP として配布されていた `igTileManager` が製品版としてリリースされ、マニュアルも完備しています。 + +`igTileManager` は、データをタイルに描画して管理できるレイアウト コントロールです。タイルは、レスポンシブ グリッド レイアウト (グリッド、チャート、マップなどの異なるコンポーネントを持つダッシュボードなど) で表示されます。 + +![](../../images/images/Whats_New_In_Ignite_UI_2013_Volume_2_23.png) + +#### 関連トピック + +- [igTileManager](/igtilemanager-landing-page) + +#### 関連サンプル + +- [ASP.NET MVC の基本的な使用方法]({environment:SamplesUrl}/tile-manager/aspnet-mvc-helper) +- [JSON データへのバインド]({environment:SamplesUrl}/tile-manager/bind-json) +- [項目の構成]({environment:SamplesUrl}/tile-manager/item-configurations) +- [リード タイルの構成]({environment:SamplesUrl}/tile-manager/leading-tile) + + + +## igZoombar +### 新規コントロール + +`igZoombar` コントロールは、範囲対応コントロールにズーム機能を提供します。`igZoombar` には、水平スクロールバー、全範囲の縮小表示、サイズ変更可能なズーム範囲ウィンドウの機能があります。`igZoombar` は、追加設定なしで、`igDataChart` コントロールを統合します。 + + ![](../../images/images/Whats_New_In_Ignite_UI_2013_Volume_2_24.png) + +#### 関連トピック + +- [igZoombar](/igzoombar-landingpage) + +#### 関連サンプル + +- [ズームバー財務チャート]({environment:SamplesUrl}/zoombar/financial-chart) + + + + + + + + diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/18-whats-new-in-2013-volume1.mdx b/docs/jquery/src/content/ja/topics/whats-new/revision-history/18-whats-new-in-2013-volume1.mdx new file mode 100644 index 0000000000..2d811655de --- /dev/null +++ b/docs/jquery/src/content/ja/topics/whats-new/revision-history/18-whats-new-in-2013-volume1.mdx @@ -0,0 +1,682 @@ +--- +title: "2013 Volume 1 の新機能" +slug: whats-new-in-2013-volume1 +--- + +# 2013 Volume 1 の新機能 + +## トピックの概要 +### 目的 + +このトピックは、{environment:ProductName}® 2013 Volume 1 リリースの新機能の概要について紹介します。 + + +## 新機能 +### 新機能の概要表 + +以下の表は、{environment:ProductName}® 2013 Volume 1 リリースの新機能をまとめたものです。詳細は、概要表の後に記載されています。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    コントロール機能説明
    igCombo™[Knockout のサポート](/igcombo-knockoutjs-support)`igCombo` コントロールにおける Knockout ライブラリのサポートは、開発者が Knockout ライブラリとその宣言構文を使用してツリー コントロールを初期化し構成するための簡単な方法を提供することを目的としています。
    igDataChart™[新シリーズ](#igdatachart-new-series)`igDataChart` は、40 を超えるチャート タイプをサポートし、ポイント、各種スプライン チャート、面チャートおよび集合形式のチャートなど 17 個の新しいチャート タイプがこのリリースで追加されました。
    igEditors™[Knockout のサポート](#igeditors-knockout-support){environment:ProductName} エディター コントロールにおける Knockout ライブラリのサポートは、開発者が Knockout ライブラリとその宣言構文を使用して {environment:ProductName} エディターを初期化し構成するための簡単な手段を提供することを目的としています。
    igFunnelChart™[新規コントロール](#igfunnelchart)`igFunnelChart`™ は、データをファンネル シェイプで表示するファンネル チャート コントロールです。トップダウンの構成でセクションを表示し、それぞれが最大値から最小値までに及ぶスライス データを表します。
    igGrid™[列移動機能 (RTM)](#iggrid-column-moving)`igGrid`/`igHierarchicalGrid` の列移動機能は RTM です。
    [セル結合 (RTM)](#cell-merging-rtm)`igGrid`/`igHierarchicalGrid` のセル結合機能は RTM です。
    [レスポンス Web デザイン モード](#responsive-web-design)`igGrid` レスポンス Web デザイン (RWD) モード機能により、`igGrid` を レスポンス Web デザインのウェブ サイトで構成しやすくなります。
    [列の固定化 (CTP)](#column-fixing-ctp)`igGrid` 列の固定化機能により、グリッドの左または右に列の表示を固定し常に表示されるようにします。
    [Knockout サポート (RTM)](#knockout-support){environment:ProductName} `igGrid` エディター コントロールにおけるKnockout ライブラリのサポートは、開発者が Knockout ライブラリとその宣言構文を使用して {environment:ProductName} グリッドを初期化し構成するための簡単な手段を提供することを目的としています。
    igHierarchicalGrid™[列移動機能 (RTM)](#hierarchicalgrid-column-moving-features-rtm)`igHierarchicalGrid`™ の列移動機能は RTM です。
    [セル結合 (RTM)](#hierarchicalgrid-cell-merging-rtm)`igHierarchicalGrid`™ のセル結合機能は RTM です。
    [Knockout サポート (RTM)](#hierarchicalgrid-knockout-support){environment:ProductName} `igHierarchicalGrid`™ コントロールにおける Knockout ライブラリのサポートは、開発者が Knockout ライブラリとその宣言構文を使用して {environment:ProductName} グリッドを初期化し構成するための簡単な手段を提供することを目的としています。
    igListView™[縮小可能なグループ](#iglist-collapsible-grouping)`igListView`™ 携帯電話リスト コントロールは、縮小可能なグループをサポートします。
    igOlapFlatDataSource™[新規コンポーネント](#igolapflatdatasource-new-component)フラットなデータ コレクション上で OLAP のようなデータ解析を可能にする OLAP データ ソース コンポーネント。
    igOlapXmlaDataSource™[新規コンポーネント](#igolapxmladatasource-new-component)MS SSAS OLAP サーバーとのコミュニケーションを促進する OLAP データ ソース コンポーネント。
    igPivotDataSelector™[新規コントロール](#igpivotdataselector-new-control)`igPivotDataSelector` は、データが [igPivotGrid](/igpivotgrid)™ で可視化されている場合にユーザーがデータ スライスを選択できるインタラクティブな UI コントロール (jQuery UI ウィジェット) です。
    igPivotGrid™[新規コントロール](#igpivotgrid-new-component)`igPivotGrid` コントロールは、ピボット テーブル にデータを表示するためのデータ プレゼンテーション コントロールです。ユーザーは提供されたデータで複雑な解析を実行できます。
    igPivotView™[新規コントロール](#igpivorview-new-control)`igPivotView` は、1 か所でピボット グリッド内の多次元 (OLAP) データを操作するためのすべての必要なツールを提供するコントロールです。
    igSparkline™[新規コントロール](#igsparkline-new-control)`igSparkline`™ は新しいjQUery UI スパークライン コントロールであり、これらの要素が構成およびカスタマイズできるいくつかの視覚要素と対応する機能を持ちます。
    igSplitter™[新規コントロール](#igsplitter-new-control)`igSplitter`™ は、2 つの異なるパネルにレイアウトを分けることにより HTML5 Web アプリケーションおよびサイトでレイアウトを管理するためのコンテナー コントロールです。
    igTree™[Knockout のサポート](#igtree-knockout-support){environment:ProductName} エディター コントロールにおける Knockout ライブラリのサポートは、開発者が Knockout ライブラリとその宣言構文を使用して {environment:ProductName} エディターを初期化し構成するための簡単な手段を提供することを目的としています。
    igUpload™[全般的改善](#igupload-general-improvements)HTML 5 対応ブラウザでは、`igUpload`™ は [XMLHttpRequest Level 2](http://www.w3.org/TR/XMLHttpRequest2/) を使用してアップロードのステータスを取得します。
    [ファイルを MemoryStream として保存](#saving-files-as-memorystream)igUpload™ により、ファイルを MemoryStream オブジェクトとして処理できます。
    [アップロードする複数ファイルを一度に選択](#selecting-multiple-files)`igUpload`™ により、ブラウザのファイルを開くダイアログから、またはドラッグ アンド ドロップによって一度に複数のファイルを選択できます。この機能は HTML 5 が有効なブラウザーで使用できます。
    {environment:ProductNameMVC}[イベント追加のサポート](#support-adding-events)`AddClientEvent` ヘルパー メソッドを使用することにより {environment:ProductNameMVC} コントロールにクライアントのイベントを追加できます。イベント名および関数名をヘルパーに提供し、必要な JavaScript をコントロール上で描画してイベントを処理します。
    TypeScript 定義ファイル[新規機能 (CTP)](#typescript-new-feature)TypeScript は、JavaScript アプリケーションの開発で型付きレイヤーを JavaScript に追加する言語です。{environment:ProductName} は、すべてのコントロールの型定義を提供する `igniteui.d.ts` の TypeScript 定義ファイルを含みます。
    igDoughnutChart™[新規コントロール (CTP)](#igDoughnutchart-new-control)`igDoughnutChart`™ コントロールは `igPieChart` と同様、変数の発生を比例的に示します。`igDoughnutChart` は、複数の変数をコンセントリック リングで表示でき、階層データの視覚化を組み込みでサポートします。
    igLayoutManager™[新規コントロール (CTP)](#iglayoutmanager-new-control)`igLayoutManager`™ は、HTML Web アプリケーションで全般的なレイアウトを管理するためのレイアウト コントロールです。コントロールは、グリッド、列、フロー、境界線および垂直のレイアウトをサポートします。
    igTileManager™[新規コントロール (CTP)](#igtilemanager-newcontrol)`igTileManager`™ は、データをタイル表示にレンダリングして管理するためのレイアウト コントロールです。タイル表示はレスポンシブ グリッド レイアウトで表示されます。
    igRadialGauge™[新規コントロール (CTP)](#igradialgauge-new-control)`igRadialGauge`™ コントロールは、円形に配置された値の範囲を表します。`igRadialGauge` コントロールは通常、特定の値の範囲を表す 1 つ以上のスケールを含みます。次に針はスケールに沿って移動し値を示します。
    + + + + + +## igCombo +### Knockout のサポート + +`igCombo` コントロールにおけるKnockout ライブラリのサポートは、開発者がKnockout ライブラリとその宣言構文を使用してツリー コントロールを初期化し構成するための簡単な方法を提供することを目的としています。 + +Knockout のサポートは、Knockout バインディングがページに適用されるときに最初に呼び出されるKnockout 拡張機能として、ページの存続期間中 (View-Model への外部更新が起こったとき) に実装されます。 + +#### 関連トピック + +[Knockout サポートの構成 (igCombo)](/igcombo-knockoutjs-support) + + + +## igDataChart +### 新シリーズ + +`igDataChart` コントロールは、40 個を超えるチャート タイプをサポートします。以下の新しいチャート タイプが `igDataChart`™ コントロールに追加されています。 + +- 棒および柱状シリーズ +- 積層型棒 +- 積層型 100 棒 +- 積層型柱状 +- 積層型 100 柱状 +- カテゴリ シリーズ +- ポイント +- 積層型エリア +- 積層型折れ線 +- 積層型スプライン +- 積層型スプライン エリア +- 積層型 100 エリア +- 積層型 100 折れ線 +- 積層型 100 スプライン +- 積層型 100 スプライン エリア +- 極座標シリーズ +- 極座標スプライン +- 極座標スプライン エリア +- ラジアル シリーズ +- ラジアル エリア +- 散布図シリーズ +- 散布図 - スプライン + +#### 関連サンプル + +- [カテゴリ シリーズ]({environment:SamplesUrl}/data-chart/category-series) +- [極座標シリーズ]({environment:SamplesUrl}/data-chart/polar-series) +- [ラジアル シリーズ]({environment:SamplesUrl}/data-chart/radial-series) +- [散布図シリーズ]({environment:SamplesUrl}/data-chart/scatter-series) +- [積層シリーズ]({environment:SamplesUrl}/data-chart/stacked-series) + + + +## igEditors +### Knockout のサポート + +{environment:ProductName} エディター コントロールにおける Knockout ライブラリのサポートは、開発者が Knockout ライブラリとその宣言構文を使用して {environment:ProductName} エディターを初期化し構成するための簡単な手段を提供することを目的としています。 + +Knockout のサポートは、Knockout バインディングがページに適用されるときに最初に呼び出される Knockout 拡張機能として実装されます。ページの存続期間中 、View-Model への外部更新が起こると、Knockout サポートは Knockout 機能拡張として実装されます。また、data-bind 属性においてビジネス案件に対して関連度を有するいずれかのエディター コントロール オプションを指定できます。 + +#### 関連トピック + +[Knockout サポートの構成](../../02_Controls/igEditors/Config/02_Configuring Knockout Support (Editors).mdx) + + + +## igFunnelChart +### 新規コントロール + +`igFunnelChart` は、カテゴリ データのサイズ間のリレーションシップを示すために並び替えられた数量でデータを表示するデータ バインド コントロールです。チャートは、ツールチップ、ベジエ曲線、選択、チャート凡例、および幅広いビジュアル カスタマイズをサポートします。 + +![](../../images/images/Whats_New_In_Ignite_UI_2013_Volume_1_1.png) + +#### 関連トピック + +[igFunnelChart の概要](/igfunnelchart-overview) + + + +## igGrid +### 列移動機能 (RTM) + +列移動は `igGrid`/`igHierarchicalGrid` の機能であり、グリッド内の列の位置を変更し、事実上グリッドの列の順序を再設定できます。これは、グリッド インターフェイスを介して、または列移動機能の API を介してプログラム的に実行できます。ユーザーはドラッグする、または特別な列移動インターフェイス (列ヘッダー内のボタンで起動) から任意の列の位置を選択することにより列を移動できます。ドラッグは、タッチ対応デバイス上ではサポートされません。 + +![](../../images/images/Whats_New_In_Ignite_UI_2013_Volume_1_2.png) + +#### 関連トピック + +[列移動の概要 (igGrid)](/iggrid-columnmoving-overview) + +### セル結合 (RTM) + +セル結合は `igGrid`/`igHierarchicalGrid` の機能であり、値が同じであると (表示テキスト)、ユーザーは列内のセルを可視的にに結合できます。 + +![](../../images/images/Whats_New_In_Ignite_UI_2013_Volume_1_3.png) + +#### 関連トピック + +[**セル結合の概要 (igGrid)**](../../02_Controls/igGrid/03_Features/07_Cell Merging/00_igGrid_CellMerging_Overview.mdx) + +### レスポンス Web デザイン モード + +`igGrid` コントロールの レスポンス Web デザイン (RWD) モード機能は、異なるデバイスにおけるユーザー エクスペリエンスを改善するために[レスポンス Web デザイン](http://alistapart.com/article/responsive-web-design)という概念を採用します。レスポンス Web デザイン モードにより、複数の画面サイズおよびフォーム要素を単一のコード ベースおよび設計でサポートできます。 + +RWD モードでは、グリッドのデバイス画面への適用は以下のいずれかに構成できます。 + +- 列の自動非表示 + +これは、RWD モード機能の列非表示機能を介して構成されます。 + +- 構造および書式設定の変更は、グリッド テンプレートを介して実装できます。 + +このために RWD モード機能は、RWD モード機能が有効になると `igGrid` テンプレートを置き換える定義済みグリッド テンプレートのセットをサポートします。テンプレートを使用すると、広範囲の適応において、行の非表示など異なるフォントやフォント サイズを用いて複数の行や列を 1 つの行や列およびその他にマージします。 + +#### 関連トピック + +[**レスポンス Web デザイン (RWD) モードの概要 (igGrid)**](/iggrid-responsive-web-design-mode-overview) + +### Knockout サポート (RTM) + +{environment:ProductName} `igGrid` エディター コントロールにおけるKnockout ライブラリのサポートは、開発者が Knockout ライブラリとその宣言構文を使用して {environment:ProductName} グリッドを初期化し構成するための簡単な手段を提供することを目的としています。 + +Knockout のサポートは、Knockout バインディングがページに適用されるときに最初に呼び出される Knockout 拡張機能として、View-Model への外部更新が起こったときにページの存続期間中に実装されます。また、data-bind 属性においてビジネス案件に対して関連度を有するいずれかのエディター コントロール オプションを指定できます。 + +#### 関連トピック + +[**グリッド Knockoutjs の結合**](/iggrid-configuring-knockout-support) + +### 列の固定化 (CTP) + +`igGrid`™ 列の固定化機能により、グリッドの左または右に列の表示を固定し常に表示されるようにします。 + +![](../../images/images/Whats_New_In_Ignite_UI_2013_Volume_1_4.png) + +#### 関連サンプル + +[**列の固定化 (igGrid)**]({environment:SamplesUrl}/grid/column-fixing) + + + +## igHierarchicalGrid +### 列移動機能 (RTM) + +列移動は `igGrid/igHierarchicalGrid` の機能であり、グリッド内の列の位置を変更し、事実上グリッドの列の順序を再設定できます。これは、グリッド インターフェイスを介して、または列移動機能の API を介してプログラム的に実行できます。ユーザーはドラッグする、または特別な列移動インターフェイス (列ヘッダー内のボタンで起動) から任意の列の位置を選択することにより列を移動できます。ドラッグは、タッチ対応デバイス上ではサポートされません。 + +![](../../images/images/Whats_New_In_Ignite_UI_2013_Volume_1_2.png) + +#### 関連トピック + +[列移動の概要 (igGrid)](/iggrid-columnmoving-overview) + +### セル結合 (RTM) + +セル結合は `igHierarchicalGrid` の機能であり、値が同じであると (表示テキスト)、ユーザーは列内のセルを可視的にに結合できます。 + +![](../../images/images/Whats_New_In_Ignite_UI_2013_Volume_1_3.png) + +#### 関連トピック + +[セル結合の概要 (igGrid)](../../02_Controls/igGrid/03_Features/07_Cell Merging/00_igGrid_CellMerging_Overview.mdx) + +### 列の固定化 (CTP) + +`igGrid` 列の固定化機能により、グリッドの左または右に列の表示を固定し常に表示されるようにします。 + +![](../../images/images/Whats_New_In_Ignite_UI_2013_Volume_1_4.png) + +#### 関連サンプル + +[**列の固定化 (igGrid)**]({environment:SamplesUrl}/grid/column-fixing) + +### Knockout サポート (RTM) + +{environment:ProductName} `igHierarchicalGrid` エディター コントロールにおける Knockout ライブラリのサポートは、開発者が Knockout ライブラリとその宣言構文を使用して {environment:ProductName} グリッドを初期化し構成するための簡単な手段を提供することを目的としています。 + +Knockout のサポートは、Knockout バインディングがページに適用されるときに最初に呼び出される Knockout 拡張機能として、View-Model への外部更新が起こったときにページの存続期間中に実装されます。 +また、data-bind 属性においてビジネス案件に対して関連度を有するいずれかのエディター コントロール オプションを指定できます。 + +#### 関連サンプル + +[**階層グリッド Knockoutjs の結合**]({environment:SamplesUrl}/hierarchical-grid/bind-hgrid-with-ko) + + + +## igListView +### 縮小可能なグループ + +`igListView` は、このリリースにおいてデフォルトのグループ化機能に縮小可能グループを追加します。ユーザーはグループを展開および縮小して、それらに重要なデータのセクションを表示します。 + +![](../../images/images/Whats_New_In_Ignite_UI_2013_Volume_1_8.png) + +#### 関連サンプル + +[カスタム グループ]({environment:SamplesUrl}/mobile-list-view/custom-groups) + + + +## igOlapFlatDataSource +### 新規コンポーネント + +`igOlapFlatDataSource` コンポーネントは、フラットなデータ コレクション上で多次元の (OLAP のような) 解析を実施できます。データ収集または [igDataSource](/igdatasource-igdatasource)™ インスタンスが与えられユーザー構成に基づく場合、`igOlapFlatDataSource` は階層およびメジャーの分析コードを作成するため必要なメタデータを抽出します。 + +#### 関連トピック + +[igOlapFlatDataSource の概要](/igolapflatdatasource-overview) + + + +## igOlapXmlaDataSource +### 新規コンポーネント + +`igOlapXmlaDataSource` コンポーネントは、JavaScript クライアント アプリケーションと `msmdpump.dll` HTTP データ プロバイダで構成された Microsoft® SQL Server Analysis Services (SSAS) サーバーの間のコミュニケーションを取り扱います。Microsoft SQL Server Analysis Services (MS SASS) からデータを取得するためユーザー フレンドリなやり方を公開します。 + +#### 関連トピック + +[igOlapXmlaDataSource の概要](/igolapxmladatasource-overview) + + + +## igPivotDataSelector +### 新規コントロール + +`igPivotDataSelector` は、データが [igPivotGrid](/igpivotgrid)™ で可視化されている場合にユーザーがデータ スライスを選択できるインタラクティブな UI コントロール (jQuery UI ウィジェット) です。 + +![](../../images/images/Whats_New_In_Ignite_UI_2013_Volume_1_9.png) + +#### 関連トピック + +[igPivotDataSelector の概要](/igpivotdataselector-overview) + + + +## igPivotGrid +### 新規コントロール + +`igPivotGrid` コントロールは、[ピボット テーブル](http://en.wikipedia.org/wiki/Pivot_table) にデータを表示するためのデータ プレゼンテーション コントロールです。ユーザーは提供されたデータで複雑な解析を実行できます。`igPivotGrid` は、オンライン解析処理 (OLAP) アプローチを使用して、分かりやすい方法で多次元クエリーの結果を表示します。`igPivotGrid` コントロールは、 `igOlapFlatDataSource`™ コンポーネントまたは `igOlapXmlaDataSource`™ コンポーネントのインスタンスをデータ ソースとして使用します。 + +![](../../images/images/Whats_New_In_Ignite_UI_2013_Volume_1_10.png) + +#### 関連トピック + +[igPivotGrid の概要](/igpivotgrid-overview) + + + +## igPivotView +### 新規コントロール + +`igPivotView` は、ピボット グリッドと、スプリッターで区切られるデータ選択ウィザードを組み合わせる 2 パネル コントロールです。これは、[igPivotGrid](/igpivotgrid)™、[igPivotDataSelector](/igpivotdataselector)™ および [igSplitter](/igsplitter)™ の 3 つの個別コンポーネントのコンストラクションです。まとめてアセンブルし、ピボット グリッドで多次元 (OLAP) データを操作するために必要なすべてのツールを 1 カ所で提供します。 + +![](../../images/images/Whats_New_In_Ignite_UI_2013_Volume_1_11.png) + +#### 関連トピック + +[igPivotView 概要](/igpivotview-overview) + + + +## igSparkline +### 新規コントロール + +`igSparkline` は、テキストまたは表形式データでデータの可視化を折れ線チャートに埋め込むために使用される新しいデータ バインド コントロールです。コントロールは、いくつかの異なるチャート タイプ、ツールチップ、標準範囲の可視化、マーカー、傾向線および幅広いビジュアル カスタマイズをサポートします。 + +![](../../images/images/Whats_New_In_Ignite_UI_2013_Volume_1_12.png) + +#### 関連トピック + +[igSparkline の概要](/igsparkline-overview) + + + +## igSplitter +### 新規コントロール + +`igSplitter` は、レイアウトを 2 つの異なるパネルに分けることにより HTML5 Web アプリケーションおよびサイトでレイアウトを管理するためのコンテナー コントロールです。パネルは、サイズ変更、折りたたみ、または展開できます。 + +![](../../images/images/Whats_New_In_Ignite_UI_2013_Volume_1_13.png) + +#### 関連トピック + +[igSplitter の概要](/igsplitter-overview) + + + +## igTree +### Knockout のサポート + +{environment:ProductName} エディター コントロールにおける Knockout ライブラリのサポートは、開発者が Knockout ライブラリとその宣言構文を使用して {environment:ProductName} エディターを初期化し構成するための簡単な手段を提供することを目的としています。 + +Knockout のサポートは、Knockout バインディングがページに適用されるときに最初に呼び出される Knockout 拡張機能として、View-Model への外部更新が起こったときにページの存続期間中に実装されます。 +また、data-bind 属性においてビジネス案件に対して関連度を有するいずれかのエディター コントロール オプションを指定できます。 + +#### 関連トピック + +[Knockout サポートの構成 (igTree)](/igtree-knockoutjs-support) + + + +## igUpload +### 全般的改善 + +`igUpload` は、 [XMLHttpRequest Level 2](http://www.w3.org/TR/XMLHttpRequest2/) を使用してこの仕様を実装するブラウザ上でアップロードするファイルの状態を取得します。HTTP ハンドラーはこの場合は使用されません。 + +### ファイルを MemoryStream として保存 + +新規アプリケーションにおよぶオプション `FileSaveType` は `igUpload` MVC ラッパーに追加されます。このオプションは、filestream と memorystream の 2 つの値を承諾します。デフォルトで、オプションは filestream に設定されます。このモードにより、`igUpload` MVC ラッパーにおいて機能が使用可能になります。 + +新しい memorystream オプションにより、ファイルをメモリストリーム機能として保存できます。このモードでは、`FileUploading` イベントを取り扱うことにより、アップロードされたファイルを `MemoryStream` として公開できます。 + +#### 関連トピック + +[ファイルをストリームとして保存 (igUpload)](../../02_Controls/igUpload/01_Working with igUpload/04_igUpload_Saving_Files_as_Stream.mdx) + +### アップロードする複数ファイルを一度に選択 + +ユーザーによるファイル選択が可能かどうか、いつファイルを選択するか、また一度に複数のファイルを選択できるかどうかを構成できます。この機能は、`igUpload` のファイル選択モードにより管理されます。ファイル選択モードは、単一ファイル (ユーザーは 1 パスで 1 ファイル選択可能) または複数ファイル (ユーザーは 1 パスで複数ファイル選択可能) です。 + +複数ファイル選択は、入力要素の [HTML 5 multiple attribute](http://www.w3.org/TR/html-markup/input.file.html#input.file.attrs.multiple) を利用します。 + +ユーザーは、複数のファイルを 2 通りの方法で `igUpload` に追加できます。 + +- 「ファイルを開く」ダイアログから +- `igUpload` コントロールでドラッグ アンド ドロップすることにより + +機能は、入力要素の複数の属性をサポートするブラウザでのみ使用可能です。 + +![](../../images/images/Whats_New_In_Ignite_UI_2013_Volume_1_14.png) + +#### 関連トピック + +[igUpload の構成](../../02_Controls/igUpload/01_Working with igUpload/00_igUpload_Configuring_igUpload.mdx) + + + +## {environment:ProductNameMVC} +### イベント追加のサポート + +ASP.NET MVC ヘルパーへ追加することにより {environment:ProductName} コントロールにイベントを追加できます。`AddClientEvent` メソッドを使用してイベント名およびハンドラー関数名を供給します。ヘルパーは、クライアント上で適切なインスタンス化 JavaScript に描画しイベントを発生します。 + +**ASPX の場合:** + +```csharp +<%= Html.Infragistics().Combo() + .DataSource(Model) + .TextKey("DisplayText") + .ValueKey("Value") + .AddClientEvent("selectionChanged", "comboSelectionChanged") + .Render() +%> +``` + +注: `igUpload`、`igGrid`/`igHierarchicalGrid` およびその機能は、13.1 の最初のサービス リリースでこの機能性を取得します。 + + + +## TypeScript 定義ファイル +### 新規機能 (CTP) + +TypeScript は、JavaScript アプリケーションの開発で型付きレイヤーを JavaScript に追加する言語です。 +{environment:ProductName} は、すべてのコントロールの型定義を提供する `igniteui.d.ts` の TypeScript 定義ファイルを含みます。 + +定義ファイルは、{environment:ProductName} インストール ディレクトリで `{Installation Directory}typingsigniteui.t.ds` にあります。詳しくは、以下の記事を参照してください。 + +### 関連の記事 + +- [TypeScript のダウンロード](http://www.typescriptlang.org/#Download) +- [{environment:ProductName} で TypeScript サポートの紹介](http://www.infragistics.com/community/blogs/angel_todorov/archive/2012/10/27/introducing-typescript-support-for-ignite-ui.aspx) +- [TypeScript チュートリアル](http://www.typescriptlang.org/Tutorial/) +- [TypeScript: JavaScript アプリケーションへの追加 - パート 2](http://msdn.microsoft.com/ja-jp/magazine/jj983351.aspx) + + + +## igDoughnutChart +### 新規コントロール (CTP) + +このバージョンで CTP としてリリースされ、`igDoughnutChart` は円チャートに似たデータを表示し、共通の中心部の周りに複数のデータ セットを表示できます。 + +![](../../images/images/Whats_New_In_Ignite_UI_2013_Volume_1_15.png) + +#### 関連サンプル + +- [JSON へのバインド]({environment:SamplesUrl}/doughnut-chart/bind-json) +- [Collection にバインド]({environment:SamplesUrl}/doughnut-chart/bind-to-collection) + + + +## igLayoutManager +### 新規コントロール (CTP) + +`igLayoutManager`™ は、HTML Web アプリケーションで全般的なレイアウトを管理するためのレイアウト コントロールです。コントロールは、グリッド、列、フロー、境界線および垂直のレイアウトをサポートします。コントロールは、任意のレイアウトに従って対応するアプリケーション内にコンテナーを配置します。 + +![](../../images/images/Whats_New_In_Ignite_UI_2013_Volume_1_16.png) + +#### 関連サンプル + +- [HTML マークアップからの境界線のレイアウト]({environment:SamplesUrl}/layout-manager/border-layout-markup) +- [レスポンシブ列レイアウト]({environment:SamplesUrl}/layout-manager/column-layout-markup) +- [レスポンシブ フロー レイアウト]({environment:SamplesUrl}/layout-manager/flow-layout) +- [レスポンシブ垂直レイアウト]({environment:SamplesUrl}/layout-manager/vertical-layout) +- [列および行のスパンがあるグリッド レイアウト]({environment:SamplesUrl}/layout-manager/grid-layout) + + + +## igTileManager +### 新規コントロール (CTP) + +`igTileManager` は、データをタイルに描画して管理できるレイアウト コントロールです。タイルはレスポンシブ グリッド レイアウトで表示され、コントロールは各タイルに対応するレイアウト構成を提供します。位置 (行スパンと列スパン) およびディメンション (行位置と列位置) を設定します。 + +![](../../images/images/Whats_New_In_Ignite_UI_2013_Volume_1_17.png) + +#### 関連サンプル + +- [JSON へのバインド]({environment:SamplesUrl}/tile-manager/bind-json) +- [ASP.NET MVC の基本的な使用方法]({environment:SamplesUrl}/tile-manager/aspnet-mvc-helper) +- [項目の構成]({environment:SamplesUrl}/tile-manager/item-configurations) + + + +## igRadialGauge +### 新規コントロール (CTP) + +CTP としてリリースされる `igRadialGauge` は、スケールに沿って数値を示すゲージ コントロールです。広範囲におよぶビジュアル カスタマイズがあり、なめらかなアニメーションのコントロールのレンダリングを動的に変更するための運動フレームワークをサポートします。 + +![](../../images/images/Whats_New_In_Ignite_UI_2013_Volume_1_18.png) + +#### 関連サンプル + +- [MVC の初期化]({environment:SamplesUrl}/radial-gauge/mvc-initialization) +- [ゲージのアニメーション]({environment:SamplesUrl}/radial-gauge/motion-framework) + + + +##関連コンテンツ + +###トピック + +このトピックの追加情報については、以下のトピックも合わせてご参照ください。 + +- [Knockout サポートの構成 (igCombo)](/igcombo-knockoutjs-support): このトピックは、Knockout ライブラリ により管理されるView-Model のオブジェクトをバインドするために `igCombo`™ コントロールを構成する方法について説明します。 + +- [Knockout サポートの構成 (igEditors)](../../02_Controls/igEditors/Config/02_Configuring Knockout Support (Editors).mdx): このトピックは、Knockout ライブラリを使用して View-Model のオブジェクトをバインドするために {environment:ProductName}® エディター コントロールを構成する方法について説明します。 + +- [igFunnelChart の概要](/igfunnelchart-overview): このトピックでは、主要機能、最小要件、ユーザー機能性など、`igFunnelChart`™ コントロールに関する概念的な情報を提供します。 + +- [列移動の概要 (igGrid)](/iggrid-columnmoving-overview): このトピックでは、`igGrid`™ コントロールの列移動機能およびこの機能が提供する機能性について概念的に説明します。 + +- [セル結合の概要 (igGrid)](../../02_Controls/igGrid/03_Features/07_Cell Merging/00_igGrid_CellMerging_Overview.mdx): このトピックは、`igGrid`™ コントロールのセル結合機能とその機能性について説明します。`igGrid` においてセル結合を有効にし構成する方法のコード例が含まれます。 + +- [レスポンス Web デザイン (RWD) モードの概要 (igGrid)](/iggrid-responsive-web-design-mode-overview): このトピックは、`igGrid`™ コントロールの レスポンス Web デザイン (RWD) モード機能およびこの機能が提供する機能について概念的に説明します。 + +- [igOlapFlatDataSource の概要](/igolapflatdatasource-overview): このトピックは、`igFlatDataSource`™ コンポーネントおよびその機能の概要を説明します。 + +- [igOlapXmlaDataSource の概要](/igolapxmladatasource-overview): このトピックは、`igXmlaDataSource`™ コンポーネントおよびその機能の概要を説明します。 + +- [igPivotDataSelector の概要](/igpivotdataselector-overview): このトピックは、主要機能、最小要件、ユーザー機能性など、`igPivotDataSelector`™ コントロールに関する概念的な情報を提供します。 + +- [igPivotGrid の概要](/igpivotgrid-overview): このトピックは、主要機能、最小要件、ユーザー機能性など、`igPivotGrid`™ コントロールに関する概念的な情報を提供します。 + +- [igPivotView 概要](/igpivotview-overview): このトピックは、主要機能、最小要件、ユーザー機能性など、`igPivotView`™ コントロールに関する概念的な情報を提供します。 + +- [igSparkline の概要](/igsparkline-overview): このトピックでは、`igSparkline`™ コントロール、そのメリットおよびサポートされるチャート タイプの概要を示します。 + +- [igSplitter の概要](/igsplitter-overview): このトピックでは、機能、ユーザー機能性など、`igSplitter`™ コントロールに関する概念的な情報を提供します。 + +- [Knockout サポートの構成 (igTree)](/igtree-knockoutjs-support): このトピックは、Knockout ライブラリにより管理される View-Model オブジェクトをバインドするために `igTree`™ コントロールを構成する方法について説明します。 + +- [ファイルをストリームとして保存 (igUpload)](../../02_Controls/igUpload/01_Working with igUpload/04_igUpload_Saving_Files_as_Stream.mdx): このトピックは、アップロード ファイルをファイルまたはメモリストリームとして処理し、保存する方法を説明します。詳細な手順は、各プロセスでメモリストリームとしてファイルを保存トピックをご参照ください。 + +- [igUpload の構成](../../02_Controls/igUpload/01_Working with igUpload/00_igUpload_Configuring_igUpload.mdx): このトピックは、`igUpload`™ コントロールの構成方法をコード例を用いて説明します。 + + + + + + + + + + diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/19-whats-new-in-2012-volume2.mdx b/docs/jquery/src/content/ja/topics/whats-new/revision-history/19-whats-new-in-2012-volume2.mdx new file mode 100644 index 0000000000..0cfd8a61bc --- /dev/null +++ b/docs/jquery/src/content/ja/topics/whats-new/revision-history/19-whats-new-in-2012-volume2.mdx @@ -0,0 +1,373 @@ +--- +title: "2012 Volume 2 の新機能" +slug: whats-new-in-2012-volume2 +--- + +# 2012 Volume 2 の新機能 + +## 新機能 +### 機能の概要 + +以下の表に、{environment:ProductName}™ 2012 Volume 2 リリースの新機能を簡単に説明します。詳細は、概要表の後に記載されています。 + +- [igHtmlEditor コントロール](#ightmleditor-control): 新しい `igHtmlEditor`™ は jQuery WYSIWYG コントロールです。Web ブラウザーで HTML を編集する機能があります。 + +- [igDialog コントロール](#igdialog-control): Infragistics® `igDialog`™ は、jQuery UI を利用したウィジェットです。アプリケーションで利用できるロバストなダイアログ レイアウトを備えています。 + +- [カスケード igCombo](#cascading-igcombo): `igCombo`™ コントロールのカスケード機能では、親子関係でバインドされている少なくとも 2 つのコントロール インスタンスを構成する必要があります。親 `igCombo` に入力されている値が選択されると、子に入力されている値がフィルターされます。 + +- [igTree のノードの追加と削除](#add-remove-nodes-igtree): `igTree`™ コントロールのノードの追加と削除機能では、ツリー ノードの追加や削除ができます。 + +- [igTree のドラッグ アンド ドロップ](#drag-drop-tree): `igTree` コントロールのドラッグ アンド ドロップ機能では、ツリー ノードをドラッグ アンド ドロップできます。ドラッグ アンド ドロップは、同じツリー内でも 2 つのツリー間でも操作できます。 + +- [複数列ヘッダー](#multi-column-headers): 複数列のヘッダー機能は、`igGrid` と `igHierarchicalGrid`™ に使用できます。 + +- [REST サポート](#rest-support): REST サービスとのバインドは、`igGrid` と `igHiearchicalGrid` に使用できます。 + +- [列の移動 (CTP)](#column-moving-ctp): 列の移動機能では、列の順序を変更できます。 + +- [igGrid と igHierarchicalGrid の DataTable と DataSet のバインディング](#datatable-dataset-binding): `igGrid` と `igHierarchicalGrid` では DataTable や DataSet とのバインディングができます。 + +- [非バインド列](#unbound-columns): 非バインド列の機能では、データ ソースにバインドされておらず、計算値やその他のカスタム値をレンダリングするときに使用できる列を `igGrid` と `igHierarchicalGrid` に定義できます。 + +- [行編集テンプレート](#row-edit-template): バージョン 12.2 以降、`igGrid` の更新機能には、行 編集テンプレートが用意され、インライン編集より強力なポップアップ ダイアログのレコード編集機能が備わりました。 + +- [日付のグループ分け](#grouping-dates): グリッドのグループ分け機能では、日付の値のグループ分けの機能が強力になりました。 + +- [ExcelNavigationMode と HorizontalMoveOnEnter](#excel-navigation-mode): `igGrid` と `igHierarchicalGrid` の`更新`機能に、新たに 2 つのプロパティが加わりました。`ExcelNavigationMode` では、矢印キーで編集したセル内にカーソルを移動できます。`HorizontalMoveOnEnter` では、セルの編集時に Enter キーを押すと次のセルにカーソルが移動します。 + +- [igMap コントロールは RTM](#igmap-rtm): 地図を表示するために `igMap`™ コントロールをリリースしました。 + +- [igDataChart コントロールに財務指標が加わりました。](#financial-indicators): `igDataChart`™ コントロールは、株価に関するさまざまな財務指標の表示用に新たに 35 シリーズの財務シリーズをサポートするようになりました。 + +- [igRating のホバーと null サポート(Mobile)](#hover-null-support-igrating): `igRating`™ Mobile コントロールの値は、評価済みであれば null に設定できます。`igRating`™ Mobile コントロールをデスクトップ ブラウザーで使用すると、評価結果によってマウスのホバー スタイルが表示されます。 + +- [igListView における子レイアウトとのダイレクトリンクの生成](#generating-direct-links): `igListView`™ コントロールには新しい機能が加わり、子レイアウトの静的リンクを生成できるようになりました。 + +- [Mobile Button](#mobile-button): Button ASP.NET MVC ヘルパーは、ウィジェットをレンダリングするサーバー側のヘルパーです。 + +- [Mobile CheckBox](#mobile-checkbox): CheckBox ASP.NET MVC ヘルパーは、ウィジェットをレンダリングするサーバー側のヘルパーです。 + +- [Mobile CheckBoxGroup](#mobile-checkbox-group): CheckBoxGroup ASP.NET MVC ヘルパーでは、複数のチェック ボックスを 1 つのコンテキストにまとめることができます。 + +- [Mobile Collapsible](#mobile-collapsible): Collapsible ASP.NET MVC ヘルパーでは折り畳み可能なコンテンツ ブロックを作成できます。 + +- [Mobile CollapsibleSet](#mobile-collapse-set): Collapsible Set ASP.NET MVC ヘルパーでは、複数の折り畳み可能なコンテンツ ブロックからなる折り畳み可能なコンテンツ ブロックを作成できます。 + +- [Mobile Link](#mobile-link): Link ASP.NET MVC ヘルパーは HTML リファレンスのレンダリングに使用します。このリファレンスには Link をカスタマイズする複数の追加メソッドがあります。 + +- [Mobile NavBar](#mobile-navbar): NavBar ASP.NET MVC ヘルパーは外部ページや内部ページ ブロックを参照する項目メニューを定義します。 + +- [Mobile Page, PageContent, PageFooter, PageHeader](#mobile-page): {environment:ProductNameMVC} では、Razor 構文や ASPX 構文で jQuery Mobile ページを作成できます。 + +- [Mobile Popup](#mobile-popup): Popup は、ポップアップ ウィンドウに HTML コンテンツを表示できるウィジェットです。 + +- [Mobile RadioButtonGroup](#mobile-radio-button): RadioButtonGroup ASP.NET MVC ヘルパーはオプション セットをレンダリングします。ただし、選択できるオプションはその 1 つだけです。 + +- [Mobile SelectMenu](#mobile-select-menu): SelectMenu ASP.NET MVC ヘルパーは、ネイティブの select 要素に基づいて jQuery モバイルの selectmenu ウィジェットを生成します。 + +- [Mobile Slider](#mobile-slider): スライダー ASP.NET MVC ヘルパーは、jQuery モバイルのスライダー ウィジェットを ASP.NET ビューに表示するために使用します。 + +- [Mobile TextBox](#mobile-textbox): TextBox ASP.NET MVC ヘルパーは標準 HTML 入力をレンダリングします。 + +- [Mobile ToggleSwitch](#mobile-toggle-switch): Toggle Switch ASP.NET MVC ヘルパーは、データ入力のオン/オフまたは true/false を切り替えるバイナリ 「フリップ スイッチ」 を作成します。 + + + +## igHtmlEditor コントロール + +`igHtmlEditor` コントロールは、標準 HTML 編集機能を備えた jQuery HTML エディター コントロールです。書式設定オプションは、フォント フェイス、フォント サイズ、テキスト、イメージの調整機能があり、リンクとテーブルをサポートしています。この API のクラス、オプション、イベント、メソッドおよびテーマに関する詳細は、上記の関連するタブを参照してください。 + +![](../../images/images/Whats_New_in_2012_Volume_2_Latest2_1.png) + +###関連トピック: + +- [igHtmlEditor の概要](/ightmleditor-overview) + +## igDialog コントロール + +Infragistics `igDialog` は jQuery UI 方式のウィジェットです。ダイアログのコンテンツとしてターゲット要素を表示します。`igDialog` のコンテンツには、有効な HTML コードのほか、別のダイアログ ウィンドウがあります。`igDialog` ウィジェットは、HTML DIV 要素や IFRAME 要素に適用されます。また、DIV/IFRAME 内部のコンテンツがダイアログ ウィンドウのコンテンツになります。 + +**HTML の場合:** + +```html +
    + igDialog Content +
    +``` + +![](../../images/images/Whats_New_in_2012_Volume_2_Latest2_2.png) + +### 関連トピック: + +- [igDialog の概要](../../02_Controls/igDialog/00_igDialog Overview.mdx) + +## カスケード igCombo + +`igCombo` コントロールのカスケード機能では、親子関係でバインドされている少なくとも 2 つのコントロール インスタンスを構成する必要があります。親 `igCombo` に入力されている値が選択されると、子に入力されている値がフィルターされます。これは、`igCombo` から 「すぐに利用できる」 機能であり、あとは親と子の `igCombo` とそのデータ ソースを構成するだけです。 + +![](../../images/images/Whats_New_in_2012_Volume_2_Latest2_3.png) + +## igTree のノードの追加と削除 + +`igTree` コントロールの追加機能と削除機能では、ツリー ノードの追加や削除ができます。 + +![](../../images/images/Whats_New_in_2012_Volume_2_Latest2_4.png) + +![](../../images/images/Whats_New_in_2012_Volume_2_Latest2_5.png) + +### 関連トピック: + +- [ノード追加/削除の概要と例 (igTree)](../../02_Controls/igTree/06_Adding and Removing Nodes/00_igTree_Adding_Removing_Nodes_Overview_Examples.mdx) + +## igTree のドラッグ アンド ドロップ + +ドラッグ アンド ドロップは、同じ `igTree` コントロール内だけでなく、2 つの `igTree` コントロール間で操作できます。2 つの igTree コントロール間で動作するよう設定できます。ドラッグ アンド ドロップ機能の操作方法を指定できます。サポートされる[ドラッグ アンド ドロップ モード](../../02_Controls/igTree/07_Drag and Drop/00_igTree_Drag-and-Drop_Overview.mdx#drag-drop-modes) に設定する必要があります。 + +![](../../images/images/Whats_New_in_2012_Volume_2_Latest2_6.png) + +### 関連トピック: + +- [ドラッグ アンド ドロップの概要 (igTree)](../../02_Controls/igTree/07_Drag and Drop/00_igTree_Drag-and-Drop_Overview.mdx) + +## 複数列ヘッダー + +`igGrid` と `igHierarchicalGrid` は、複数列ヘッダーをサポートするようになりました。複数列ヘッダー機能では、ヘッダーをグループ分けできます。この機能は、非表示、サイズ変更、列移動機能とうまく統合されています。 + +![](../../images/images/Whats_New_in_2012_Volume_2_Latest2_7.png) + +### 関連トピック: + +[複数列ヘッダー (igGrid)](/iggrid-multicolumnheaders-landingpage) + +[複数列ヘッダー (igHierarchicalGrid)](/ighierarchicalgrid-multicolumnheaders-configuring) + +## REST サポート + +`$.ig.DataSource` から継承した新しいタイプ `$.ig.RESTDataSource` は、REST をサポートします。`igGrid` および `igHierarchicalGrid` は内部的に `$.ig.RESTDataSource` を使用して REST バインディングをサポートしています。すべての `$.ig.RESTDataSource` オプションを継承するため、これらのオプションはグリッドに直接設定できます。 + +![](../../images/images/Whats_New_in_2012_Volume_2_Latest2_8.png) + +### 関連トピック: + +[REST の更新 (igGrid)](/iggrid-rest-updating) + +[igHierarchicalGrid を REST サービスへバインド](/ighierarchicalgrid-binding-to-rest-services) + +## 列の移動 (CTP) + +列の移動機能では、列の順序を変更できます。列の移動には 2 つのモードがあります。 + +即時モードでは、ドラッグの間に列のヘッダーが移動し、アニメーションで他の列とスワップします。列コンテンツは、実際には列ヘッダーをドロップした時点で実際に移動します。 + +遅延モードでは、ドロップしたときに列が配置される位置を示す矢印が表示されます。 + +以下のスクリーンショットは即時モードによる列の移動機能の働きを示しています。 + +![](../../images/images/Whats_New_in_2012_Volume_2_Latest2_9.png) + +### 関連サンプル: + +[列の移動 (igGrid)]({environment:SamplesUrl}/grid/column-moving) + +## igGrid と igHierarchicalGrid の DataTable と DataSet のバインディング + +`igGrid` と `igHierarchicalGrid` では ADO.NET DataTable と DataSet へのバインディングが可能です。`igGrid` ASP.NET MVC ヘルパーに新しいプロパティ `DataMember` を導入しました。このプロパティを設定すると、グリッドは、DataSet から取得した `DataMember` 値と一致する DataTable の名前を検索して、それにグリッドをバインドします。`AutoGenerateLayouts` が false で、レイアウトを手動定義するとき、このプロパティが便利です。 + +v12.2 では、`AutogenerateLayouts` がデフォルトで false になるように変更しました。 + +![](../../images/images/Whats_New_in_2012_Volume_2_Latest2_10.png) + +###関連トピック: + +[igGrid を DataTable にバインディング (igGrid)](/iggrid-binding-to-datatable) + +[igHierarchicalGrid を DataSet にバインディング (igHierarchicalGrid)](/ighierarchicalgrid-binding-to-dataset) + +## 非バインド列 + +非バインド列の機能では、データ ソースにバインドされておらず、計算値やその他のカスタム値をレンダリングするときに使用できる列を `igGrid` と `igHierarchicalGrid` に定義できます。`igGrid` には新しいプロパティ MergeUnboundColumns を導入しました。 : `MergeUnboundColumns`.これは、データ ソースのタイプがリモートのときに非バインド列をクライアントに送信する方法を定義します。 + +`MergeUnboundColumns` が true のとき、非バインド値は JSON 応答内のデータ行にマージします。マージしない場合、非バインド値は JSON 応答のメタデータ プロパティに保存します。 + +`MergeUnboundColumns` =true で、`SetUnboundValues` で非バインド値を設定していない場合、データ ソース全体のトラバースにより、非バインド列のすべての値がデフォルト値 (null 値) に設定されます。 + +![](../../images/images/Whats_New_in_2012_Volume_2_Latest2_11.png) + +### 関連サンプル: + +[非バインド列 (igGrid)]({environment:SamplesUrl}/grid/unbound-column) + +[非バインド列 (igHierarchicalGrid)]({environment:SamplesUrl}/hierarchical-grid/unbound-column) + +## 行編集テンプレート + +バージョン 12.2 以降、`igGrid` の更新機能には、行編集テンプレートが用意され、インライン編集より強力なポップアップ ダイアログのレコード編集機能が備わりました。 + +この機能は、グリッド更新機能の一部として実装します。`editMode` オプションには、現在の 「row」 と 「cell」 以外に新しい値 「`rowEditTemplate`」 が加わりました。 + +行編集テンプレートを自動的に生成するとき、列のデータ タイプが基準になります。行編集テンプレートは、更新機能に columnSettings を使用し、レンダリングするエディターをこれで決めます。 + +また、`rowEditDialogRowTemplate` オプションを使用するか、`rowEditDialogRowTemplateID` オプションでテンプレート要素を参照して、テンプレート文字列として指定すれば、行編集テンプレートを定義することもできます。これらのオプションは、行編集ダイアログのフォーマットとスタイル設定に使用できます。 + +行編集テンプレートには検証統合機能があります。 + +![](../../images/images/Whats_New_in_2012_Volume_2_Latest2_12.png) + +### 関連トピック: + +[行編集テンプレート (igGrid)](igGrid-Updating-RowEditTemplate.html) + +[行編集テンプレートを構成 (igGrid)](igGrid-Updating-RowEditTemplate-Configuring.html) + +## 日付別グループ分け + +`groupBy` 機能では、フォーマットを考慮して、日付別にグループ分けができるようになりました。強化されたのは、リモートとローカル両方のグループ分け機能です。 + +新しい機能では、日付は 「*yyyy/dd/mm*」 フォーマットで表示され、年、日、月を比べてグループ分けが行われます。日付のフォーマットが 「*yyyy/dd/mm hh:mm*」 の場合は、値の比較によってグループ分けが行われます。 + +## ExcelNavigationMode と HorizontalMoveOnEnter + +`igGrid` と `igHierarchicalGrid` の更新機能に、新たに 2 つのプロパティが加わりました。ExcelNavigationMode では、矢印キーで編集したセル内にカーソルを移動できます。デフォルト値は 「false」 です。 + +HorizontalMoveOnEnter では、セルの編集時に Enter キーを押すと編集可能な次のセルにカーソルが移動します。デフォルト値は 「false」 です。 + +## igMap コントロールは RTM + +地図を表示する `igMap` コントロールをリリースしました。HTML5 Web アプリケーションやサイトでカスタム オーバーレイしたマップを作成するときに便利です。これは、HTML5 の Canvas タグを使って実際のマップを描画し、マップ上でデータを視覚化します。このコントロールでは、5 つのタイプの地理シリーズにより各種地理的視覚化が可能です。 + +- 地理記号シリーズ +- 地理シェイプ シリーズ +- 地理ポリライン シリーズ +- 地理散布 シリーズ +- 地理等高線シリーズ + +以下に示したのは、地理シェイプ シリーズで人口別に色分けしたすべての国を網羅した世界地図の例です。 + +![](../../images/images/Whats_New_in_2012_Volume_2_Latest2_13.png) + +### 関連トピック: + +- [igMap の概要 ](/overview-igmap) + +## igDataChart コントロールに財務指標が加わりました。 + +`igDataChart` コントロールは、さまざまな財務指標の表示用に新たに 35 の財務シリーズをサポートするようになりました。財務指標シリーズは、既存の財務シリーズと同じフォーマットでデータを受け付けます。レコードーには、一定期間の株価を表現した Open、Close、High、Low [price] などのプロパティがあります。財務指標は、価格変動のさまざまな特性を示し、補助的な情報や財務分析の洞察情報を提供します。 + +以下に示したのは標準的な財務チャートと新しいサポート対象財務指標を示すチャートです。 + +![](../../images/images/Whats_New_in_2012_Volume_2_Latest2_14.png) + +### 関連サンプル: + +- [財務指標](/igdatachart-databinding) + +## igRating のホバーと null サポート(Mobile) + +`igRating` Mobile コントロールの値は、評価済みであれば null に設定できます。設定はスワイプ イベントで行います。現在の値から初めて、コントロールの最初までスワイプすると、評価済みの値が null に設定されます。これは、マウスを使用するデスクトップ環境では不可能です。 + +`igRating`™ Mobile コントロールをデスクトップ ブラウザーで使用すると、評価結果によってマウスのホバー スタイルが表示されます。 + +### 関連トピック: + +- [igRating の概要 ](/igrating-overview) + +## igListView における子レイアウトとのダイレクトリンクの生成 + +`igListView` コントロールでは、子レイアウトの静的リンクを生成できるようになりました。子レイアウトの静的リンクを生成すると、外部 Web ページのどれかから直接子レイアウトに移動できます。 + +![](../../images/images/Whats_New_in_2012_Volume_2_Latest2_15.png) + +### 関連トピック: + +- [子レイアウトとの直接リンクの生成](igListView-Generating-Direct-Links-to-Child-Layouts.html) + +## Mobile Button + +Button ASP.NET MVC ヘルパーは、コントロールをレンダリングするサーバー側のヘルパーです。このヘルパーは、ASP.NET MVC アプリケーションにボタンを追加し、クライアントかサーバーにその状態を構成します。 + +![](../../images/images/Whats_New_in_2012_Volume_2_Latest2_16.png) + +## Mobile CheckBox + +CheckBox ASP.NET MVC ヘルパーは、コントロールをレンダリングするサーバー側のヘルパーです。このヘルパーは、ASP.NET MVC アプリケーションにチェック ボックスを追加し、クライアントかサーバーにその状態を構成します。したがって、jQuery Mobile プラグインでチェックボックスを動的に変更できます。 + +![](../../images/images/Whats_New_in_2012_Volume_2_Latest2_17.png) + +## Mobile CheckBoxGroup + +CheckBoxGroup ASP.NET MVC ヘルパーでは、複数のチェック ボックスを 1 つのコンテキストにまとめることができます。したがって、jQuery Mobile プラグインでチェックボックスを動的に変更できます。個々のチェックボックスの構成方法と使用方法の詳細については、[CheckBox](CheckBox.html) トピックを参照してください。 + +![](../../images/images/Whats_New_in_2012_Volume_2_Latest2_18.png) + +## Mobile Collapsible + +Collapsible ASP.NET MVC ヘルパーでは折り畳み可能なコンテンツ ブロックを作成できます。 + +![](../../images/images/Whats_New_in_2012_Volume_2_Latest2_19.png) + +折り畳み可能ブロックのヘッダーをクリック可能ボタンのように設定するオプションがあります。折り畳み可能ブロックのコンテンツには、任意の HTML コンテンツを使用できます。 + +## Mobile CollapsibleSet + +CollapsibleSet ASP.NET MVC ヘルパーでは折り畳み可能なレイアウト コンテナーを作成できます。このヘルパーは折り畳み可能なコントロールをグループ分けします。同時に展開できる折り畳み可能コントロール グループは 1 つだけです。折り畳み可能なグループを展開すると、それまで展開されていたグループは自動的に折り畳まれます。 + +## Mobile Link + +Link ASP.NET MVC ヘルパーは HTML ハイパーリンクのレンダリングに使用します。このヘルパーには Link を構成し、それをカスタマイズするための補助メソッドがいくつかあります。 + +![](../../images/images/Whats_New_in_2012_Volume_2_Latest2_20.png) + +![](../../images/images/Whats_New_in_2012_Volume_2_Latest2_21.png) + +## Mobile NavBar + +NavBar ASP.NET MVC ヘルパーは外部ページや内部ページ ブロックを参照する項目メニューを定義します。コントロールには、個々の項目を構成しスタイルを設定できる API のほか、全体を設定する NavBar があります。NavBar ヘルパーは jQuery Mobile ウィジェットをレンダリングします。 + +![](../../images/images/Whats_New_in_2012_Volume_2_Latest2_22.png) + +## Mobile Page、PageContent、PageFooter、PageHeader + +Page ASP.NET MVC ヘルパーは、コンテキストのシングル ページのコンテナーを定義します。Page ラッパーのフラグメントを開いて閉じるまでの間に、Page HTML コンテンツのほか、[Page Content](PageContent.html)、[Page Footer](PageFooter.html)、[Page Header](PageHeader.html)、その他 jQuery モバイル コントロールを定義できます。1 つの MVC ビューに複数のページを定義できますが、最初のページだけがアクティブになります。ページを変更したい場合は、手動で変更する必要があります。Page MVC ヘルパーは jQuery Mobile [Page](Page.html) ウィジェットをレンダリングします。ページの構造やページの繊維の詳細については、jQuery Mobile が提供する[チュートリアル リスト](http://jquerymobile.com/demos/1.1.1/docs/pages/index.html)を参照してください。 + +## Mobile Popup + +Popup は、ポップアップ ウィンドウに HTML コンテンツを表示できるウィジェットです。任意の HTML コンテンツを表示できます。ポップアップは HTML アンカーを利用すればを開きやすくなります。このウィジェットには、そのまますぐに使用できる機能セットがあります。 + +![](../../images/images/Whats_New_in_2012_Volume_2_Latest2_23.png) + +## Mobile RadioButtonGroup + +RadioButtonGroup ASP.NET MVC ヘルパーはオプション セットをレンダリングします。ただし、選択できるオプションはその 1 つだけです。他の一部のコントロール同様に、RadioButtonGroup ASP.NET MVC ヘルパーは標準 HTML 入力要素を使用します。タッチ環境のサポートのためには補助マークアップや機能を追加します。たとえば、すべてラジオ ボタンによる通常の上下の位置決めの代わりに、RadioButtonGroup ASP.NET MVC ヘルパーでは、水平ボタン リストも使用できます。jQuery Mobile ウィジェットでは、任意のラジオ ボタンにアクセスできます。 + +![](../../images/images/Whats_New_in_2012_Volume_2_Latest2_24.png) + +## Mobile SelectMenu + +SelectMenu ASP.NET MVC ヘルパーは、ネイティブの select 要素に基づいて jQuery モバイルの selectmenu ウィジェットを生成します。 + +## Mobile Slider + +スライダー ASP.NET MVC ヘルパーは、jQuery モバイルのスライダー ウィジェットを ASP.NET ビューに表示するために使用します。スライダーは、モバイル デバイスで数値データ入力用に使用される一般的な UI 要素です。次のスクリーンショットは、オプションと設定値を既定値のままで使用した場合のスライダーです。 + +![](../../images/images/Whats_New_in_2012_Volume_2_Latest2_25.png) + +## Mobile TextBox + +TextBox ASP.NET MVC ヘルパーは標準 HTML 入力をレンダリングします。レンダリングすると、jQuery Mobile はモバイル デバイスとタッチ デバイスに最適化します。したがって、jQuery Mobile プラグインで入力を動的に変更できます。 + +![](../../images/images/Whats_New_in_2012_Volume_2_Latest2_26.png) + +## Mobile ToggleSwitch + +Toggle Switch ASP.NET MVC ヘルパーは、データ入力のオン/オフまたは true/false を切り替えるバイナリ 「フリップ スイッチ」 を作成します。こうした仮想スイッチはモバイル デバイスの一般的なユーザー インターフェイス (UI)　要素です。Toggle Switch は、「スイッチ」の　2 つの状態 (つまり、有効状態と無効状態) を表す択一的な 2 つの位置 (左側と右側の位置) を備えたトラック スイッチです。現在の状態を示し、状態によって配色の変わるラベルもあります。 + +![](../../images/images/Whats_New_in_2012_Volume_2_Latest2_27.png) + + + + + + + + diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/20-jquery-whats-new-12-1-landing-page.mdx b/docs/jquery/src/content/ja/topics/whats-new/revision-history/20-jquery-whats-new-12-1-landing-page.mdx new file mode 100644 index 0000000000..e789b1a3f6 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/whats-new/revision-history/20-jquery-whats-new-12-1-landing-page.mdx @@ -0,0 +1,259 @@ +--- +title: "2012 Volume 1 の新機能" +slug: jquery-whats-new-12-1-landing-page +--- + +# 2012 Volume 1 の新機能 + +## 新機能 + +以下の表に、{environment:ProductName}™ 2012 Volume 1 リリースの新機能を簡単に説明します。詳細は、概要表の後に記載されています。 + +- [階層グリッド GroupBy](#hierarchical-grid-grouping): フラット グリッドで使用可能なグループ化機能が、階層グリッドで完全にサポートされるようになりました。 + +- [階層グリッドの選択](#hierarchical-grid-selection): フラット グリッドで使用可能な選択機能が、階層グリッドで完全にサポートされるようになりました。 + +- [階層グリッドの行セレクター](#hierarchical-grid-row-selectors): フラット グリッドの行選択機能が、階層グリッドで完全にサポートされるようになりました。 + +- [igGrid 用のチェックボックス エディター](#checkbox-editor): チェックボックス エディターは、`igGrid`™ コントロールのブール データ型の列で使用可能になりました。 + +- [グリッド正味トランザクション](#grid-net-transactions): グリッド編集機能が最適化され、データが更新、追加、または削除されるときに、コントロールから正味トランザクションのみが報告されます。 + +- [グリッドの仮想化](#grid-virtualization): 仮想化が階層グリッドと GroupBy モードでサポートされるようになり、ユーザー インターフェイスのパフォーマンスが向上しています。 + +- [グリッド MVC ラッパーの AutoGenerateColumns プロパティ](#autogeneratecolumns-mvc): AutoGenerateColumns プロパティの動作が変更されました。true に設定され、個別の列オプションを使用して列が明示的に定義されている場合、グリッド MVC ラッパーは、まず定義された列を表示し、その後新しい列をすべてのデータ ソース フィールドに自動的にバインドして、定義された列の後に表示します。 + +- [igHierarchicalGrid の OData へのバインド](#hierarchical-grid-odata): `igHierarchicalGrid` を OData サービスにバインドするとき、JSONPDataSource を中間レイヤーとして使用する必要はなく、OData サービスの URL をグリッド データ ソースとして直接設定できます。 + +- [チャート](#charting): `igDataChart`™、`igPieChart`™、および `igChartLegend`™ コントロールは、HTML5 キャンバスでデータ ビジュアライゼーションを描画する新しいチャート コントロールです。 + +- [チャートのモーション フレームワーク](#charts-motion-framework): チャート コントロールは、チャートの内容をさまざまな方法でアニメーション化できる新しいモーション フレームワークをサポートしています。 + +- [jQuery コントロール用のテンプレート エンジン](#templating-engine): 新しい `igTemplating`™ エンジンが {environment:ProductName} バンドルに追加されました。`igTemplating` エンジンは、jQuery コントロールの内部での動的なテキスト レンダリング用のテンプレートを作成するための強力な機能を公開しています。 + +- [モバイル リスト ビュー コントロール](#mobile-list): 新しい `igListView`™ コントロールは、jQuery モバイル プラットフォーム用のリスト表示と相互作用機能を備えています。 + +- [モバイル レーティング コントロール](#mobile-rating): モバイル デバイス用の新しい `igRating`™ コントロールが、モバイルおよびタッチ デバイス環境固有の要件に対応するため、既存の `igRating` コントロールとは別に実装されました。 + +- [モバイル コントロールの iOS テーマ](#mobile-ios-theme): モバイル デバイス アプリケーションの外観を向上させるため、iPhone アプリケーション用の新しい iOS テーマが {environment:ProductName} ライブラリに追加されました。 + +- [タッチ サポート](#touch-support): {environment:ProductName} ライブラリのすべてのコントロールが、モバイル デバイスのタッチ インターフェイスをサポートするために設計およびテストされました。 + +- [コンボ ボックスのロード オン デマンド](#combo-load-on-demand): コンボ ボックスのロード オン デマンドは、多数のリモート データを、一度にすべてロードするのではなく、バッチでロードすることで、`igCombo`™ のパフォーマンスを向上させる新機能です。 + +- [MVC 検証のサポート](#mvc-validation): データ注釈を使用した MVC 検証のサポートが、コンボおよびエディター コントロールに取り込まれました。 + +- [新しい jQuery テーマと JavaScript リソース構造](#themes-resources-structure): {environment:ProductName} ライブラリのすべての JavaScript リソースと CSS リソースが新しいフォルダー構造に整理され、その一部の名称が変更されて、ライブラリを使用する開発者が各項目の目的と場所をより容易に理解できるようになりました。これは最新の変更であることに注意してください。 + +- [CSS/JS リソース ローダー](#resources-loader): 新しい `igLoader` コントロールが追加され、新しいリソース構造との関連で、JavaScript リソースと CSS リソースを Web ページに容易にロードできるようになりました。 + +- [Metro テーマ](#metro-theme): 新しい Metro テーマが追加され、{environment:ProductName} コントロールが、Microsoft® Windows® の次期バージョンの新しい Metro UI とより一体化されます。 + + + +## 階層グリッド GroupBy + +フラット グリッドで使用可能なグループ化機能が、階層グリッドで完全にサポートされるようになりました。1 つ以上の列に基づく行の柔軟なグループ化、要約値 (小計) の計算、展開/縮小ボタン、ツールチップ、グループ ヘッダー行テンプレートなどの UI 要素の構成が可能です。以下のスクリーンショットで、GroupBy 機能の主な要素 (上部のグループ化領域、ルートおよび子レベルのグループ ヘッダー行) が強調表示されています。子レイアウトのグループ化された列の先頭に、GroupBy 領域の子レイアウト名が追加されていることに注意してください。 + +![](../../images/images/Whats_New_in_2012_Volume_1_1.png) + +### 関連トピック: + +- [igHierarchicalGrid のグループ化の概要](/ighierarchicalgrid-grouping-overview) + +## 階層グリッドの選択 + +選択機能によって `igHierarchicalGrid`™ コントロールの行およびセルの選択が可能になります。その機能は Microsoft® Windows Explorer および Microsoft® Excel の選択およびアクティブ化動作を厳密に踏襲したものです。単一のみまたは複数項目の選択を構成できます。階層グリッドで複数選択が有効になっている場合、ユーザーは、単一のレイアウトのみで複数の項目を選択できます。以下のスクリーンショットに、いくつかのセルが選択された階層グリッドを示します。 + +![](../../images/images/Whats_New_in_2012_Volume_1_2.png) + +### 関連トピック: + +- [igHierarchicalGrid Selection の概要](/jquery-ighierarchical-grid-selection-overview) + +## 階層グリッドの行セレクター + +行選択機能は、グリッドの最初の列の左側に配置された行セレクター列をクリックすることで、行全体を選択する機能をユーザーに提供します。この機能は、`igRowSelectors`™ ウィジェットによって提供されます。この主な機能に加えて、このウィジェットはオプションで行の番号付け機能や行を選択するためのチェックボックスを備えています。このウィジェットは選択機能と密接に連携しますが、行の番号付け機能のために個別に使用することもできます。新しいオプション `showCheckBoxesOnFocus` があります。このオプションを有効にすると、チェックボックスの動作を変更できます。チェックボックスは最初に表示されず、ユーザーが行を選択するためにクリックすると、チェックボックスが表示され、複数選択が容易になります。以下のスクリーンショットで、行選択列が強調表示され、1 つの行が選択されています。 + +![](../../images/images/Whats_New_in_2012_Volume_1_3.png) + +### 関連トピック: + +- [igHierarchicalGrid の行セレクターの有効化](/ighierarchicalgrid-enabling-rowselectors) + +## igGrid 用のチェックボックス エディター + +フラット グリッドおよび階層グリッドで、ブール データ列を、チェックボックスを使用して表示できます。これにより、ブール データ型を容易に扱うことができます。以下のスクリーンショットに、チェックボックス エディターを使用したブール列のグリッドを示します。 + +![](../../images/images/Whats_New_in_2012_Volume_1_4.png) + +### 関連トピック: + +- [igGrid の列とレイアウト](/iggrid-columns-and-layout) +- [igHierarchicalGrid の列とレイアウト](/ighierarchicalgrid-columns-and-layouts) + +## グリッド正味トランザクション + +グリッド編集機能が改良され、データが更新、追加、または削除されるときに、グリッド コントロールから正味トランザクションのみが報告されます。つまり、互いに取り消すトランザクションは報告されず、クライアント アプリケーションは、下位のデータに対する実効的な変更のみを受け取ります。たとえば以下のようになります。行が追加されて削除された場合、挿入トランザクションも削除トランザクションも報告されません。以下の図に、更新および削除された行があるグリッドを示します。 + +![](../../images/images/Whats_New_in_2012_Volume_1_5.png) + +### 関連トピック: + +- [igGrid の更新](/iggrid-updating) + +## グリッドの仮想化 + +大量のデータ セットを表示するときにパフォーマンスを向上させるために使用される仮想化技術が改良され、階層グリッドと、階層グリッドの GroupBy モードがサポートされています。現時点では、固定と連続の 2 つの仮想化モードがあります。固定モードは、{environment:ProductName} コントロールに組み込まれている既存の仮想化機能です。連続モードは、子行の数が可変の状況に対処するために、階層グリッドと Group By 機能をサポートする、新たに開発された機能です。 + +### 関連トピック: + +- [igGrid の仮想化の概要](/iggrid-virtualization-overview) +- [igHierarchicalGrid の仮想化の概要](/ighierarchicalgrid-virtualization-overview) + +## グリッド MVC ラッパーの AutoGenerateColumns プロパティ + +MVC ラッパーの `AutoGenerateColumns` プロパティが、`igGrid` ウィジェットの対応するプロパティと同様に振る舞うようになりました。`AutoGenerateColumns` プロパティに true を設定し、個別の列オプションを表す定義済みの列設定配列を使用した場合、グリッド MVC ラッパーは、まず明示的に定義された列を表示し、次に他のすべての列をすべてのデータ ソース フィールドに自動的にバインドし、定義された列の後に表示します。これは、以前の 11.2 リリースのグリッド MVC の動作と異なります。以前のリリースでは、列設定の定義があり、`AutoGenerateColumns` プロパティに true が設定されている場合、定義された列のみが考慮されます。 + +注: この変更は、11.2 サービス リリースより有効です。 + +## igHierarchicalGrid の OData へのバインド + +`igHierarchicalGrid` を OData サービスにバインドするとき、`JSONPDataSource` を中間レイヤーとして使用する必要はなく、OData サービスの URL をグリッド データ ソースとして直接設定できます。このアプローチを使用しない場合、複雑にネストしたスキーマにより、以下の問題に遭遇する可能性があります。 + +- ルート リモート機能が動作しない +- 第 2 レベルの子がまったく表示されず、JavaScript エラーが発生する。 + +注: この変更は、11.2 サービス リリースより有効です。 + +## チャート作成 + +Web ページでチャートを操作する必要性に対処するため、新しいコントロール `igDataChart`™、`igPieChart`™、および `igChartLegend`™ がライブラリに追加されました。これらのコントロールは、HTML5 のキャンバス要素とキャンバス API に基づいています。 + +- `igDataChart`では、財務、バー/列、スキャッター、極、ラジアルなど、さまざまな種類のデータ シリーズを表現できます。 +- `igPieChart` は、円チャートを表示するために設計されています。 +- `igChartLegend` はチャートの凡例を生成するために内部的に使用されます。 + +以下のスクリーンショットに、3 つのデータ シリーズがある列状チャートを示します。 + +![](../../images/images/Whats_New_in_2012_Volume_1_6.png) + +### 関連トピック: + +- [igDataChart 概要](/igdatachart-overview) +- [igPieChart の概要](/igpiechart-overview) + +## チャートのモーション フレームワーク + +チャートの Motion Framework を使用すると、{environment:ProductName} のチャート コントロールを使用する開発者は、チャートの内容をアニメーション化して見た目を向上させ、データの背後にある傾向などの意味を表現できます。フレームワークの基本的な原則として、チャートの背後にあるデータが更新されると、`igDataChart` コントロールの対応する API メソッドが必ず呼び出され、チャートのアニメーションが開始されます。 + +### 関連トピック: + +- [チャートの Motion Framework](/igdatachart-motion-framework) + +## jQuery コントロール用のテンプレート エンジン + +新しい `igTemplating` エンジンは、{environment:ProductName} コントロールの内部での動的なコンテンツ レンダリング用のテンプレートを作成するための強力な機能を開発者に公開しています。このエンジンは、UI 要素内のテキストをカスタマイズしてコンテンツを動的に表示できるときには必ず、{environment:ProductName} ライブラリ全体で、jQuery テンプレート プラグインの代わりに使用されています。以下のスクリーンショットで、データ グリッドの最初の 2 列にテンプレートが適用されています。 + +![](../../images/images/Whats_New_in_2012_Volume_1_7.png) + +### 関連トピック: + +- [igTemplating の概要](../../06_Infragistics-Templating-Engine/01_igTemplating Overview.mdx) + +## モバイル リスト ビュー コントロール + +新しい `igListView`™ コントロールは、jQuery モバイル プラットフォーム用のリスト表示と相互作用機能を備えています。モバイル リスト ビュー コントロールは、`igDataSource` と、UL または OL HTML 要素で使用可能なすべてのデータ ソースにバインドできます。このコントロールは、jQuery のモバイル ナビゲーションの概念に従った階層化ナビゲーションをサポートしています。テンプレートを使用すると、リスト要素の表示とレイアウトをカスタマイズできます。並べ替え、フィルター処理、およびグループ化機能も使用できます。モバイル リスト ビュー コントロールは、実行時のパフォーマンスを向上させるため、ロード オン デマンドをサポートしています。 + +![](../../images/images/Whats_New_in_2012_Volume_1_8.png) + +### 関連トピック: + +- [igListView の概要](igListView-Overview.html) + +## モバイル レーティング コントロール + +項目のカスタマー レーティングが要件である場合に、モバイルおよびタッチ アプリケーションをサポートするため、モバイル デバイス用の新しい `igRating` コントロールが実装されました。これは、既存の `igRating` コントロールとは別のコントロールであり、その対象はタッチ機能を備えたモバイル デバイスです。 + +![](../../images/images/Whats_New_in_2012_Volume_1_9.png) + +### 関連トピック: + +- [igRating (モバイル) の概要](igRating%28Mobile%29-Overview.html) + +## モバイル コントロールの iOS テーマ + +モバイル デバイスを対象にするため、モバイル {environment:ProductName} コントロール用の新しい iOS テーマが実装されました。その目的は、iPhone および iPad のモバイルおよびタッチ対応アプリケーションに外観を合わせ、一体性を高めるためです。 + +![](../../images/images/Whats_New_in_2012_Volume_1_10.png) + +## タッチ サポート + +すべてのインフラジスティックス jQuery コントロールがタッチ操作をサポートしています。すべてのコントロールがタッチ インターフェイスと互換になるように、新しい機能とコンポーネントが追加されました。インフラジスティックス jQuery コントロールのコンセプトは、デスクトップ プラットフォームとタッチ プラットフォームで外観と動作を同じにすることです。 + +![](../../images/images/Whats_New_in_2012_Volume_1_11.png) + +### 関連トピック: + +- [{environment:ProductName} コントロールのタッチ サポート](/touch-support-for-igniteui-for-jquery-controls) + +## コンボ ボックスのロード オン デマンド + +`igCombo` コントロールは、構成可能なロード オン デマンド機能をサポートしています。ロード オン デマンドを有効にすると、サーバーとクライアントの両方で帯域幅と処理のオーバーヘッドが大幅に削減されます。 + +ロード オン デマンドを有効にする場合は、最初にドロップダウン コンテナにスクロールバーを表示します。リストの最後までスクロールすると、非同期コールバックを介して追加の項目がフェッチされてリストの一番下に追加されます。 + +### 関連トピック: + +- [ロードオンデマンド (igCombo)](/igcombo-load-on-demand) + +## MVC 検証のサポート + +データ注釈を使用した MVC スタイルの検証が、コンボおよびエディター コントロールに取り込まれました。この機能を使用すると、データ注釈を使用して、{environment:ProductName} の検証機能を既存のアプリケーションにシームレスに統合できます。 + +![](../../images/images/Whats_New_in_2012_Volume_1_12.png) + +### 関連トピック: + +- [ASP.NET MVC 検証の構成](../../02_Controls/igEditors/Config/00_Configuring ASP.NET MVC Validation.mdx) + +## 新しい jQuery テーマと JavaScript リソース構造 + +{environment:ProductName} ライブラリのすべての JavaScript リソースと CSS リソースが新しいフォルダー構造に整理され、その一部の名称が変更されて、ライブラリを使用する開発者が各項目の目的と場所をより容易に理解できるようになりました。新しい構造を使用すると、アプリケーションが不可欠なリソースのみをロードできるため、スクリプトとリソースをはるかに高速にロードできます。結合および縮小されたバージョンのリソースも引き続き使用できます。 + +注: これは重大な変更です。 + +![](../../images/images/Whats_New_in_2012_Volume_1_13.png) + +### 関連トピック: + +- [{environment:ProductName} での JavaScript ファイル](/deployment-guide-javascript-files) +- [プロジェクトを {environment:ProductName} の最新バージョンにアップグレード](/manually-updating-previous-versions) + +## CSS/JS リソース ローダー + +新しい `igLoader` コントロールが追加され、新しいリソース構造との関連で、JavaScript リソースと CSS リソースを Web ページに容易にロードできるようになりました。コントロールによって必要なリソースのロードが自動化され、アプリケーションで {environment:ProductName} JavaScript ファイルと CSS ファイルの場所を指定する必要があります。純粋な HTML/jQuery ページでは、たとえば、ページ上でインスタンスを作成するコントロールと機能を指定する必要があります。フラット グリッドのすべての機能の場合は "`igGrid`.*"、カテゴリ チャートのプロットのみの場合は "`igDataChart.Category`" とします。MVC 側のローダーでは、ロードする必要があるスクリプトと CSS ファイルが自動的に検出されるため、アプリケーションで必要なリソースを指定する必要はありません。 + +`igLoader` コントロールは、以前のバージョンからアップグレードするための最も簡単で推奨される方法であり、複数の JS ファイルと CSS ファイルを Web ページの head 部分で指定する必要がありません。 + +### 関連トピック: + +- [プロジェクトを {environment:ProductName} の最新バージョンにアップグレード](/manually-updating-previous-versions) + +## Metro テーマ + +新しい Metro テーマは、Microsoft® Windows® の次期バージョン向けに、ネイティブな Metro UI のルック アンド フィールを {environment:ProductName} コントロールに与えるための研究作業の成果です。スタイル設定とカラーのみでなく、動作とタッチに適したユーザー インターフェイスも目的としています。以下の図に、Metro テーマを適用したフラット グリッドを示します。 + +![](../../images/images/Whats_New_in_2012_Volume_1_14.png) + +### 関連トピック: + +- [{environment:ProductName} のスタイル設定とテーマ設定](/deployment-guide-styling-and-theming) + + + + + + + + diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/21-whats-new-in-2011-volume2.mdx b/docs/jquery/src/content/ja/topics/whats-new/revision-history/21-whats-new-in-2011-volume2.mdx new file mode 100644 index 0000000000..55a90738bd --- /dev/null +++ b/docs/jquery/src/content/ja/topics/whats-new/revision-history/21-whats-new-in-2011-volume2.mdx @@ -0,0 +1,142 @@ +--- +title: "2011 Volume 2 の新機能" +slug: whats-new-in-2011-volume2 +--- + +# 2011 Volume 2 の新機能 + +## トピックの概要 +このトピックでは、Infragistics {environment:ProductName}™ 2011 Volume 2 で導入された、新しい機能およびコンポーネントの概要について説明します。 + +### このトピックの内容 +このドキュメントには次のセクションが含まれています: + +- [新機能とコンポーネント](#new-functionalities) +- [igHierarchicalGrid (新規コントロール)](#ighierarchicalgrid) +- [igTree (新規コントロール)](#igtree) +- [igComboBox (新規コントロール)](#igcombobox) +- igGrid (新機能) + - [igGrid - 更新](#updating) + - [igGrid - Outlook GroupBy](#groupby) + - [igGrid - 列の非表示](#column-hiding) + - [igGrid - 列のサイズ変更](#column-resizing) + - [igGrid - 行セレクター](#row-selectors) + - [igGrid - ツールチップ](#tooltips) + - [igGrid - 列集計](#column-summaries) + - [igGrid モデル メタデータの拡張](#metadata) + + + +## 新機能とコンポーネント +### igHierarchicalGrid™ +`igHierarchicalGrid` コントロールは、階層データを描画するために使用される新しいグリッド コントロールであり、フラット `igGrid`™ コントロールを内部的に使用します。グリッド行を展開した時に、子レイアウトに `igGrid` が作成される場合のインスタンス。パフォーマンスを最適化するため、`igHierarchicalGrid` コントロールは、行が展開するまで子グリッドのインスタンスを決して作成しません。`igHierarchicalGrid` コントロールの構成方法について理解するには、`igHierarchicalGrid` を使用した作業の開始のトピックを参照してください。 + +![](../../images/images/JQuery_Whats_New_11.2_Pic1.png) + +#### 関連トピック +[igHierarchicalGrid の初期化](/ighierarchicalgrid-initializing) + +### igTree™ +{environment:ProductName} 2011 Volume 2 リリースの主要機能に、ツリー コントロールがあります。`igTree` コントロールは多数の役立つ機能を備えています。このコントロールは、最適化されたパフォーマンス プロファイルを可能にする、ロード オン デマンドをサポートします。bi-state および tri-state の選択を含む、複数選択がサポートされています。選択機能は、チェックボックス、キーボード入力および個々の選択を含む、構成可能な選択オプションのセットによって実行されます。ノード画像はカスタマイズ可能であり、バインディングによって直接、または明示的な URL パスを画像に提供することによって、CSS を通して画像を構成するオプションがあります。コントロールは、純粋な JavaScript コンテキスト、または ASP.NET MVC ヘルパーを通して作成および管理できます。 + +![](../../images/images/JQuery_Whats_New_11.2_Pic2.png) + +#### 関連トピック +[igTree を使用した作業の開始](/igtree-getting-started) + +### igCombo™ +{environment:ProductName} 2011 Volume 2 リリースの主要機能に、コンボ コントロールがあります。`igCombo` コントロールは多数の役立つ機能を備えています。ユーザー インターフェイスの仮想化サポートには、コントロールの表示可能な領域にあるデータ項目の HTML 要素の作成のみを目的としたコントロールの機能が含まれます。可視のデータ以外の追加データが求められると、コントロールは既存の HTML 要素を再利用し、相対データ位置と同期してスクロールバーの位置を保持します。オートコンプリート機能によって、ユーザーがコンボ ボックスで入力を始めると入力ボックスに一致する選択肢が現れ始め、そこから簡単に選択することができます。自動候補の機能によって、ユーザーが入力ボックスへの入力を始めると、コントロールは、入力されたテキストに基づいて可能性のある一致リストを返し、ユーザーはそこから選択することができます。選択機能によって、ユーザーはチェックボックス、キーボード入力、または標準のクリック選択によって、1 つまたは複数の項目を選択することができます。 + +![](../../images/images/JQuery_Whats_New_11.2_Pic3.png) + +#### 関連トピック +[igCombo を使用した作業の開始](/igcombo-getting-started) + +### igGrid™ - 更新 +`igGrid` コントロールの更新機能には、新しい行の更新、追加、および行の削除の、3 種類の動作があります。行全体または個々のセルを編集することができます。行の編集が有効な場合、行のすべてのセルが編集モードに入ります。グリッド データの変更を破棄するには、キャンセル キーを押すと編集モードが終了し、グリッドは更新されません。編集モードを Enter キーで終了するとグリッドは更新され、次の行 (またはセル) が編集モードに入ります。編集モードが「cell」の場合、編集モードは Tab キーで終了できます。Tab キーを使用して編集を終了すると、右側のセルが編集モードに入ります。前に編集したセルが行の最後のセルの場合、次の行の最初のセルが編集モードに入ります。 + +#### 関連トピック +[igGrid の更新](/iggrid-updating) + +### igGrid - Outlook GroupBy +`igGrid` の Group By 機能によって、一連の列をグループ化することができます。このグリッドによって、列をドラッグ アンド ドロップして、グリッドの「group by」領域でグループ化することができます。列がグループ領域でドロップされると、グリッドは、グループ化された列の個々の値と同数の行グループで再配置されます。複数のグループを作成することができます。この場合、入れ子になったグループがプライマリ グループの下に表示されます。カスタムのグループ化メソッドを定義することによって、グループ化機能をカスタマイズすることもできます。グループ化に関する詳細は、Grid の Group By を使用した作業の開始のトピックを参照してください。 + +![](../../images/images/JQuery_Whats_New_11.2_Pic4.png) + +#### 関連トピック +[igGrid の Outlook GroupBy を有効にする](/iggrid-enabling-groupby) + +### igGrid 列の非表示 +{environment:ProductName} 2011 Volume 2 リリースには、`igGrid` コントロールの列の非表示機能が含まれています。この機能を使用すると、グリッドの描画の前後に、ユーザーに対して列を非表示にすることができます。さらに、プログラムで、または列ヘッダーの UI 要素を使用して列を非表示にすることができます。以下の画像は、非表示列を持つ `igGrid` コントロールを示しています。赤色の矢印は非表示列のインジケーターを指しています。 + +![](../../images/images/JQuery_Whats_New_11.2_Pic5.png) + +#### 関連トピック +[列の非表示を有効にする](/iggrid-column-hiding-enabling-column-hiding) + +### igGrid 列のサイズ変更 +{environment:ProductName} 2011 Volume 2 リリースには、`igGrid` の列のサイズ変更機能が含まれています。列のサイズ変更機能によって、ユーザーはグリッドの列の幅を変更することができます。サイズ変更アクションの効果は、サイズ変更アクションが終了した後、またはこのアクションが発生している時に同時に、グリッドに適用することができます。列のサイズ変更の機能には、コードの構成に利用できる複数の機能があります。これには、グリッド全体および個々の列に対するサイズ変更を許可するレベルがあります。以下の画像は、ユーザーによって Color 列がサイズ変更されているグリッドを示しています。 + +![](../../images/images/JQuery_Whats_New_11.2_Pic6.png) + +#### 関連トピック +[igGrid 列のサイズ変更](/iggrid-column-resizing) + +### igGrid 行セレクター +{environment:ProductName} 2011 Volume 2 リリースには、`igGrid` の行セレクター機能が含まれています。行セレクター機能は、チェックボックス、行の番号付けを有効にし、また `igGrid` コントロールの複数選択機能と結合するためのオプションを公開します (以下の画像を参照)。 + +![](../../images/images/JQuery_Whats_New_11.2_Pic7.png) + +#### 関連トピック +[行セレクターを有効にする](../../02_Controls/igGrid/03_Features/02_Row Selectors/00_igGrid_Enabling_Row_Selectors.mdx) + +### igGrid のヒント +{environment:ProductName} 2011 Volume 2 リリースには、`igGrid` のツールチップ機能が含まれています。この機能によって、グリッドのセルにツールチップが表示されます。ツールチップの目的は、セル全体のコンテンツを可視にし、ユーザーがツールチップ コンテナー内のテキストを選択してコピーできるようにすることです。 + +![](../../images/images/JQuery_Whats_New_11.2_Pic8.png) + +#### 関連トピック +[igGrid ツールチップの有効化](/iggrid-enabling-tooltips) + +### igGrid 列集計 +{environment:ProductName} 2011 Volume 2 リリースには、`igGrid` の列集計機能が含まれています。列の集計機能は、列のデータに基づいて集計を計算するオプションを公開します。グリッドには多数のデフォルトの集計関数が含まれており、また集計を計算するためのカスタム関数を定義する機能も提供されています。さらに、集計をリモートまたはローカルで計算するかどうかを選択できるオプションもあります。以下の画像は、集計が有効になったグリッドを示しています。 + +![](../../images/images/JQuery_Whats_New_11.2_Pic9.png) + +#### 関連トピック +[列集計を有効にする](../../02_Controls/igGrid/03_Features/00_Columns/05_Summaries/00_igGrid_Enabling _Column_Summaries.mdx) + +### igGrid モデル メタデータの拡張 +{environment:ProductName} 2011 Volume 2 リリースには、`DisplayName` 属性を認識するための `igGrid` MVC ヘルパーの機能が含まれています。`DisplayName` 属性の使用によって、MVC ヘルパーは指定した列の `headerText` としてこの属性を自動的に使用できます。`headerText` がグリッドで明示的に設定されている場合、`DisplayName` の値が上書きされることに留意してください。以下の例は、`headerText` を `DisplayName` 属性の値に自動的にバインドするシンプルなモデルおよび `igGrid` を示しています。 + + + +**MVC モデル:** + +```csharp +class Customer + { + [DisplayName("First Name")] + public string FirstName { get; set; } + [DisplayName("Family Name")] + public string FamilyName { get; set; } + } +``` + + + +**MVC ASPX ビュー:** + +```csharp +<%= Html.Infragistics().Grid(Model).ID("grid").Columns(column => { + column.For(c => c.FirstName); + column.For(c => c.FamilyName); + }) + %> +``` + + + + + + diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/ExcelChart_Sparklines.PNG b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/ExcelChart_Sparklines.PNG new file mode 100644 index 0000000000..32d542a79b Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/ExcelChart_Sparklines.PNG differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Format_Cells_Dialog_Alignment.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Format_Cells_Dialog_Alignment.png new file mode 100644 index 0000000000..5047009f6e Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Format_Cells_Dialog_Alignment.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Format_Cells_Dialog_Border.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Format_Cells_Dialog_Border.png new file mode 100644 index 0000000000..5a170ce597 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Format_Cells_Dialog_Border.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Format_Cells_Dialog_Fill.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Format_Cells_Dialog_Fill.png new file mode 100644 index 0000000000..ed38d4b0d5 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Format_Cells_Dialog_Fill.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Format_Cells_Dialog_Font.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Format_Cells_Dialog_Font.png new file mode 100644 index 0000000000..ef1e7acedb Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Format_Cells_Dialog_Font.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Format_Cells_Dialog_Number.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Format_Cells_Dialog_Number.png new file mode 100644 index 0000000000..3ca164bff1 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Format_Cells_Dialog_Number.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Format_Cells_Dialog_Protection.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Format_Cells_Dialog_Protection.png new file mode 100644 index 0000000000..a5177cfbf3 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Format_Cells_Dialog_Protection.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/JQuery_Whats_New_11.2_Pic1.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/JQuery_Whats_New_11.2_Pic1.png new file mode 100644 index 0000000000..cd0a21a3b4 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/JQuery_Whats_New_11.2_Pic1.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/JQuery_Whats_New_11.2_Pic2.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/JQuery_Whats_New_11.2_Pic2.png new file mode 100644 index 0000000000..4ecc9ab40c Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/JQuery_Whats_New_11.2_Pic2.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/JQuery_Whats_New_11.2_Pic3.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/JQuery_Whats_New_11.2_Pic3.png new file mode 100644 index 0000000000..0d8767a925 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/JQuery_Whats_New_11.2_Pic3.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/JQuery_Whats_New_11.2_Pic4.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/JQuery_Whats_New_11.2_Pic4.png new file mode 100644 index 0000000000..1674d1ce94 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/JQuery_Whats_New_11.2_Pic4.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/JQuery_Whats_New_11.2_Pic5.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/JQuery_Whats_New_11.2_Pic5.png new file mode 100644 index 0000000000..383138e764 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/JQuery_Whats_New_11.2_Pic5.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/JQuery_Whats_New_11.2_Pic6.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/JQuery_Whats_New_11.2_Pic6.png new file mode 100644 index 0000000000..fc660a3154 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/JQuery_Whats_New_11.2_Pic6.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/JQuery_Whats_New_11.2_Pic7.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/JQuery_Whats_New_11.2_Pic7.png new file mode 100644 index 0000000000..d0c470085e Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/JQuery_Whats_New_11.2_Pic7.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/JQuery_Whats_New_11.2_Pic8.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/JQuery_Whats_New_11.2_Pic8.png new file mode 100644 index 0000000000..d56edc702d Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/JQuery_Whats_New_11.2_Pic8.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/JQuery_Whats_New_11.2_Pic9.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/JQuery_Whats_New_11.2_Pic9.png new file mode 100644 index 0000000000..9a5694016f Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/JQuery_Whats_New_11.2_Pic9.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_1.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_1.png new file mode 100644 index 0000000000..c6d949cf76 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_1.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_10.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_10.png new file mode 100644 index 0000000000..d11821c9b9 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_10.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_11.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_11.png new file mode 100644 index 0000000000..984ec69b6e Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_11.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_12.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_12.png new file mode 100644 index 0000000000..9d00776583 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_12.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_13.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_13.png new file mode 100644 index 0000000000..9eb7de9cf8 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_13.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_14.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_14.png new file mode 100644 index 0000000000..6e96590666 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_14.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_15.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_15.png new file mode 100644 index 0000000000..4771b676bc Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_15.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_16.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_16.png new file mode 100644 index 0000000000..6a8a486278 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_16.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_17.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_17.png new file mode 100644 index 0000000000..536f69924e Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_17.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_18.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_18.png new file mode 100644 index 0000000000..77ee25a1c4 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_18.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_2.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_2.png new file mode 100644 index 0000000000..51c725f3ab Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_2.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_3.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_3.png new file mode 100644 index 0000000000..ee7db59da9 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_3.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_4.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_4.png new file mode 100644 index 0000000000..2ab21dd14a Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_4.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_8.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_8.png new file mode 100644 index 0000000000..86ba630602 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_8.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_9.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_9.png new file mode 100644 index 0000000000..8c1fd20e0c Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_1_9.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_11.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_11.png new file mode 100644 index 0000000000..efd488f3bd Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_11.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_12.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_12.png new file mode 100644 index 0000000000..77ca68f390 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_12.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_13.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_13.png new file mode 100644 index 0000000000..ec3751f2aa Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_13.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_14.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_14.png new file mode 100644 index 0000000000..e90c827739 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_14.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_15.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_15.png new file mode 100644 index 0000000000..24e7fae839 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_15.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_16.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_16.png new file mode 100644 index 0000000000..2b1124db75 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_16.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_18.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_18.png new file mode 100644 index 0000000000..bc89c42c9a Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_18.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_19.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_19.png new file mode 100644 index 0000000000..dafb6f87d4 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_19.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_2.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_2.png new file mode 100644 index 0000000000..9ffbb32be2 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_2.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_20.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_20.png new file mode 100644 index 0000000000..73a23ec169 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_20.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_21.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_21.png new file mode 100644 index 0000000000..89bee9f69b Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_21.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_22.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_22.png new file mode 100644 index 0000000000..66441c7488 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_22.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_23.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_23.png new file mode 100644 index 0000000000..6abccac4c0 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_23.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_24.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_24.png new file mode 100644 index 0000000000..415067f5d8 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_24.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_3.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_3.png new file mode 100644 index 0000000000..e95987e886 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_3.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_4.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_4.png new file mode 100644 index 0000000000..fe66eab4d4 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_4.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_5.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_5.png new file mode 100644 index 0000000000..464dfbca41 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_5.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_6.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_6.png new file mode 100644 index 0000000000..e2ba1ae817 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_6.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_7.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_7.png new file mode 100644 index 0000000000..cff4088102 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_7.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_8.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_8.png new file mode 100644 index 0000000000..181e1c3b48 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2013_Volume_2_8.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_1.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_1.png new file mode 100644 index 0000000000..69f20a50b6 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_1.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_10.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_10.png new file mode 100644 index 0000000000..51a02681eb Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_10.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_11.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_11.png new file mode 100644 index 0000000000..24e42a6ebf Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_11.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_12.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_12.png new file mode 100644 index 0000000000..fd669fae0b Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_12.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_13.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_13.png new file mode 100644 index 0000000000..23c637388d Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_13.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_14.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_14.png new file mode 100644 index 0000000000..e91255744a Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_14.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_15.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_15.png new file mode 100644 index 0000000000..1fa862493f Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_15.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_16.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_16.png new file mode 100644 index 0000000000..4d86d59635 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_16.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_2.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_2.png new file mode 100644 index 0000000000..1ed7bff4de Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_2.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_3.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_3.png new file mode 100644 index 0000000000..10c0c62c96 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_3.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_4.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_4.png new file mode 100644 index 0000000000..1591ee12cb Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_4.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_5.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_5.png new file mode 100644 index 0000000000..f8a8b7d8be Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_5.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_6.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_6.png new file mode 100644 index 0000000000..24896eea35 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_6.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_7.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_7.png new file mode 100644 index 0000000000..9e06fd800d Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_7.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_8.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_8.png new file mode 100644 index 0000000000..55dbc4eed5 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_8.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_9.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_9.png new file mode 100644 index 0000000000..1280f99756 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_1_9.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_2_1.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_2_1.png new file mode 100644 index 0000000000..b81566a427 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_2_1.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_2_10.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_2_10.png new file mode 100644 index 0000000000..442061426d Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_2_10.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_2_2.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_2_2.png new file mode 100644 index 0000000000..17c7cc679a Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_2_2.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_2_3.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_2_3.png new file mode 100644 index 0000000000..f96b40de26 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_2_3.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_2_4.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_2_4.png new file mode 100644 index 0000000000..01a30cb4a9 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_2_4.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_2_5.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_2_5.png new file mode 100644 index 0000000000..5f7eed5bfe Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_2_5.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_2_6.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_2_6.png new file mode 100644 index 0000000000..f3a453c092 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_2_6.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_2_7.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_2_7.png new file mode 100644 index 0000000000..41646eea04 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_2_7.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_2_8.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_2_8.png new file mode 100644 index 0000000000..66ffdc772c Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_2_8.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_2_9.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_2_9.png new file mode 100644 index 0000000000..1dd6f11d01 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2014_Volume_2_9.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2015_Volume_1_2.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2015_Volume_1_2.png new file mode 100644 index 0000000000..5f8ef2aa5a Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2015_Volume_1_2.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2015_Volume_1_3.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2015_Volume_1_3.png new file mode 100644 index 0000000000..60019ebae9 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2015_Volume_1_3.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2015_Volume_1_Combo.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2015_Volume_1_Combo.png new file mode 100644 index 0000000000..c80a8c036b Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2015_Volume_1_Combo.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2015_Volume_1_TreeGrid.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2015_Volume_1_TreeGrid.png new file mode 100644 index 0000000000..359eeddc2e Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2015_Volume_1_TreeGrid.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2015_Volume_1_TreeGrid_Filtering.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2015_Volume_1_TreeGrid_Filtering.png new file mode 100644 index 0000000000..d9172de9dd Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2015_Volume_1_TreeGrid_Filtering.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2015_Volume_1_TreeGrid_Load_on_Demand.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2015_Volume_1_TreeGrid_Load_on_Demand.png new file mode 100644 index 0000000000..82d41d7f32 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2015_Volume_1_TreeGrid_Load_on_Demand.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2015_Volume_1_column_styling.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2015_Volume_1_column_styling.png new file mode 100644 index 0000000000..30ea3b4e05 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2015_Volume_1_column_styling.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2015_Volume_1_intellisense.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2015_Volume_1_intellisense.png new file mode 100644 index 0000000000..5fef9be13d Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2015_Volume_1_intellisense.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2015_Volume_1_local_dataSource.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2015_Volume_1_local_dataSource.png new file mode 100644 index 0000000000..88c33afa55 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2015_Volume_1_local_dataSource.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2015_Volume_1_northwind_dataSource.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2015_Volume_1_northwind_dataSource.png new file mode 100644 index 0000000000..2e5bccbd13 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2015_Volume_1_northwind_dataSource.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2015_Volume_1_remote_dataSource.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2015_Volume_1_remote_dataSource.png new file mode 100644 index 0000000000..4a52242a1b Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_In_Ignite_UI_2015_Volume_1_remote_dataSource.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_Project_Dialog.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_Project_Dialog.png new file mode 100644 index 0000000000..cd3fa730ad Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_Project_Dialog.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_1_1.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_1_1.png new file mode 100644 index 0000000000..b7877920a8 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_1_1.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_1_10.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_1_10.png new file mode 100644 index 0000000000..6d3adb0d53 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_1_10.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_1_11.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_1_11.png new file mode 100644 index 0000000000..013481017a Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_1_11.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_1_12.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_1_12.png new file mode 100644 index 0000000000..50baf9b81e Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_1_12.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_1_13.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_1_13.png new file mode 100644 index 0000000000..b07c0a2d74 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_1_13.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_1_14.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_1_14.png new file mode 100644 index 0000000000..20710effa7 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_1_14.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_1_2.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_1_2.png new file mode 100644 index 0000000000..6fad2cd0db Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_1_2.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_1_3.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_1_3.png new file mode 100644 index 0000000000..344f924f7a Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_1_3.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_1_4.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_1_4.png new file mode 100644 index 0000000000..ac38e937fb Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_1_4.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_1_5.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_1_5.png new file mode 100644 index 0000000000..3bf83800b3 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_1_5.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_1_6.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_1_6.png new file mode 100644 index 0000000000..b97b6d7cb2 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_1_6.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_1_7.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_1_7.png new file mode 100644 index 0000000000..f1dd3896f6 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_1_7.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_1_8.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_1_8.png new file mode 100644 index 0000000000..0e79022fbe Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_1_8.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_1_9.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_1_9.png new file mode 100644 index 0000000000..d4a13fd1cd Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_1_9.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_1.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_1.png new file mode 100644 index 0000000000..5cbb3f2188 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_1.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_10.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_10.png new file mode 100644 index 0000000000..a03e212e55 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_10.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_11.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_11.png new file mode 100644 index 0000000000..a405843bc0 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_11.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_12.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_12.png new file mode 100644 index 0000000000..37a9e8e853 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_12.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_13.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_13.png new file mode 100644 index 0000000000..dc5d44c4c2 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_13.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_14.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_14.png new file mode 100644 index 0000000000..fb515b4406 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_14.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_15.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_15.png new file mode 100644 index 0000000000..325331e222 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_15.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_16.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_16.png new file mode 100644 index 0000000000..f5d2862d06 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_16.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_17.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_17.png new file mode 100644 index 0000000000..fe0ee2ed26 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_17.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_18.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_18.png new file mode 100644 index 0000000000..976a7ed937 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_18.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_19.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_19.png new file mode 100644 index 0000000000..8d3eff8e79 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_19.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_2.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_2.png new file mode 100644 index 0000000000..9d66941045 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_2.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_20.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_20.png new file mode 100644 index 0000000000..16759d2a36 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_20.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_21.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_21.png new file mode 100644 index 0000000000..e352c29c20 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_21.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_22.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_22.png new file mode 100644 index 0000000000..e7237bb118 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_22.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_23.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_23.png new file mode 100644 index 0000000000..89f5bc4154 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_23.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_24.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_24.png new file mode 100644 index 0000000000..1994f2ee4d Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_24.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_25.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_25.png new file mode 100644 index 0000000000..55e23e623d Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_25.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_26.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_26.png new file mode 100644 index 0000000000..9c7ba81c99 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_26.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_27.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_27.png new file mode 100644 index 0000000000..d544e7e747 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_27.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_3.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_3.png new file mode 100644 index 0000000000..4859a737f4 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_3.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_4.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_4.png new file mode 100644 index 0000000000..e6248e906f Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_4.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_5.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_5.png new file mode 100644 index 0000000000..254ac787e9 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_5.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_6.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_6.png new file mode 100644 index 0000000000..7645902046 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_6.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_7.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_7.png new file mode 100644 index 0000000000..40954ff4c8 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_7.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_8.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_8.png new file mode 100644 index 0000000000..2d1e2506b0 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_8.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_9.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_9.png new file mode 100644 index 0000000000..75a72b6d3a Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/Whats_New_in_2012_Volume_2_Latest2_9.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/bulletgraph_igtheme_17_1.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/bulletgraph_igtheme_17_1.png new file mode 100644 index 0000000000..96afa2a43c Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/bulletgraph_igtheme_17_1.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/chart_design_bullet_graph_new.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/chart_design_bullet_graph_new.png new file mode 100644 index 0000000000..ffa5c3763c Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/chart_design_bullet_graph_new.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/chart_design_bullet_graph_previous.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/chart_design_bullet_graph_previous.png new file mode 100644 index 0000000000..a9d2436e25 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/chart_design_bullet_graph_previous.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/chart_design_column_new.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/chart_design_column_new.png new file mode 100644 index 0000000000..2fd2d104af Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/chart_design_column_new.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/chart_design_column_previous.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/chart_design_column_previous.png new file mode 100644 index 0000000000..5b990caf2c Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/chart_design_column_previous.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/chart_design_doughnut_new.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/chart_design_doughnut_new.png new file mode 100644 index 0000000000..cdbbf65a73 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/chart_design_doughnut_new.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/chart_design_doughnut_previous.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/chart_design_doughnut_previous.png new file mode 100644 index 0000000000..44b86c2af3 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/chart_design_doughnut_previous.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/chart_design_financial_new.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/chart_design_financial_new.png new file mode 100644 index 0000000000..861e9ea865 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/chart_design_financial_new.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/chart_design_financial_previous.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/chart_design_financial_previous.png new file mode 100644 index 0000000000..f122cf9c14 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/chart_design_financial_previous.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/chart_design_funnel_new.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/chart_design_funnel_new.png new file mode 100644 index 0000000000..1374acea35 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/chart_design_funnel_new.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/chart_design_funnel_previous.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/chart_design_funnel_previous.png new file mode 100644 index 0000000000..73e88ecd72 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/chart_design_funnel_previous.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/chart_design_gallery_new.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/chart_design_gallery_new.png new file mode 100644 index 0000000000..37c79da3e1 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/chart_design_gallery_new.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/chart_design_gallery_previous.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/chart_design_gallery_previous.png new file mode 100644 index 0000000000..97e78ba47d Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/chart_design_gallery_previous.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/chart_design_legend_new.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/chart_design_legend_new.png new file mode 100644 index 0000000000..aa0e42f10d Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/chart_design_legend_new.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/chart_design_legend_previous.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/chart_design_legend_previous.png new file mode 100644 index 0000000000..e29b01de9a Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/chart_design_legend_previous.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/chart_design_linear_gauge_new.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/chart_design_linear_gauge_new.png new file mode 100644 index 0000000000..59666aff16 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/chart_design_linear_gauge_new.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/chart_design_linear_gauge_previous.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/chart_design_linear_gauge_previous.png new file mode 100644 index 0000000000..25d38b4a58 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/chart_design_linear_gauge_previous.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/chart_design_pie_new.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/chart_design_pie_new.png new file mode 100644 index 0000000000..184fbc718b Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/chart_design_pie_new.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/chart_design_pie_old.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/chart_design_pie_old.png new file mode 100644 index 0000000000..6edf11e215 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/chart_design_pie_old.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/chart_design_pie_previous.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/chart_design_pie_previous.png new file mode 100644 index 0000000000..a5dd40a269 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/chart_design_pie_previous.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/chart_design_radial_gauge_new.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/chart_design_radial_gauge_new.png new file mode 100644 index 0000000000..76dc3537aa Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/chart_design_radial_gauge_new.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/chart_design_radial_gauge_previous.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/chart_design_radial_gauge_previous.png new file mode 100644 index 0000000000..7281cdb01c Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/chart_design_radial_gauge_previous.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/chart_design_sparkline_new.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/chart_design_sparkline_new.png new file mode 100644 index 0000000000..3de1f95732 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/chart_design_sparkline_new.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/chart_design_sparkline_previous.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/chart_design_sparkline_previous.png new file mode 100644 index 0000000000..d5405f129d Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/chart_design_sparkline_previous.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/chart_scatter_series.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/chart_scatter_series.png new file mode 100644 index 0000000000..e3e3eb735c Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/chart_scatter_series.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/combo-grouping.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/combo-grouping.png new file mode 100644 index 0000000000..6f39c466be Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/combo-grouping.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/filtering_custom_conditions.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/filtering_custom_conditions.png new file mode 100644 index 0000000000..3ea9ae641d Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/filtering_custom_conditions.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/funnelchart_text_style.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/funnelchart_text_style.png new file mode 100644 index 0000000000..f25b3c84a0 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/funnelchart_text_style.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/grid_improvements_row_selectors.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/grid_improvements_row_selectors.png new file mode 100644 index 0000000000..ea95307e0b Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/grid_improvements_row_selectors.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/group-summaries.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/group-summaries.png new file mode 100644 index 0000000000..c56effa33d Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/group-summaries.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/iggrid-checkbox.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/iggrid-checkbox.png new file mode 100644 index 0000000000..b724f34b5f Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/iggrid-checkbox.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/iggrid-multi-row-layout.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/iggrid-multi-row-layout.png new file mode 100644 index 0000000000..689b22e026 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/iggrid-multi-row-layout.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/igniteui_scafolder.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/igniteui_scafolder.png new file mode 100644 index 0000000000..46297793d6 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/igniteui_scafolder.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/igscroll-basic.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/igscroll-basic.png new file mode 100644 index 0000000000..a5557e72a1 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/igscroll-basic.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/igtreegrid-updating-add-child.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/igtreegrid-updating-add-child.png new file mode 100644 index 0000000000..b64d83e619 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/igtreegrid-updating-add-child.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/igtreegrid-updating.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/igtreegrid-updating.png new file mode 100644 index 0000000000..79c6774116 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/igtreegrid-updating.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/jQuery_AxisIntervals_NumericX_X_Intervals.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/jQuery_AxisIntervals_NumericX_X_Intervals.png new file mode 100644 index 0000000000..505bb588ee Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/jQuery_AxisIntervals_NumericX_X_Intervals.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/jQuery_AxisIntervals_NumericY_Y_Intervals.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/jQuery_AxisIntervals_NumericY_Y_Intervals.png new file mode 100644 index 0000000000..99cf33fb88 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/jQuery_AxisIntervals_NumericY_Y_Intervals.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/lineargauge_igtheme_17_1.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/lineargauge_igtheme_17_1.png new file mode 100644 index 0000000000..183d363c91 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/lineargauge_igtheme_17_1.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/member-descriptions.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/member-descriptions.png new file mode 100644 index 0000000000..40e311dc3b Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/member-descriptions.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/method-data-overloads.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/method-data-overloads.png new file mode 100644 index 0000000000..ec158c0359 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/method-data-overloads.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/method-overloads.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/method-overloads.png new file mode 100644 index 0000000000..6c1c86cd8c Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/method-overloads.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/mrl-inline-editing.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/mrl-inline-editing.png new file mode 100644 index 0000000000..b65a1b39d4 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/mrl-inline-editing.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/new_editors.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/new_editors.png new file mode 100644 index 0000000000..4adca6bcf2 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/new_editors.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/notifier.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/notifier.png new file mode 100644 index 0000000000..ec94cb585b Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/notifier.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/option-overloads.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/option-overloads.png new file mode 100644 index 0000000000..7b7b2f4bd6 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/option-overloads.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/piechart_inner_outer_label_color.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/piechart_inner_outer_label_color.png new file mode 100644 index 0000000000..faa255c855 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/piechart_inner_outer_label_color.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/piechart_slice_selection.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/piechart_slice_selection.png new file mode 100644 index 0000000000..68ae9fef56 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/piechart_slice_selection.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/radialgauge_igtheme_17_1.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/radialgauge_igtheme_17_1.png new file mode 100644 index 0000000000..dab52b389e Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/radialgauge_igtheme_17_1.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/spreadsheet.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/spreadsheet.png new file mode 100644 index 0000000000..17e593f904 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/spreadsheet.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/spreadsheet_sort_dialog_whats_new.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/spreadsheet_sort_dialog_whats_new.png new file mode 100644 index 0000000000..153ebdd3d6 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/spreadsheet_sort_dialog_whats_new.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/time_column.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/time_column.png new file mode 100644 index 0000000000..36d090da64 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/time_column.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/treegrid_paging_context_row.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/treegrid_paging_context_row.png new file mode 100644 index 0000000000..4c278931cb Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/treegrid_paging_context_row.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/tregrid_row_selectors_hierarchical_numbering_mode.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/tregrid_row_selectors_hierarchical_numbering_mode.png new file mode 100644 index 0000000000..a4649284b2 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/tregrid_row_selectors_hierarchical_numbering_mode.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/tregrid_row_selectors_paging.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/tregrid_row_selectors_paging.png new file mode 100644 index 0000000000..3ebab975d7 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/tregrid_row_selectors_paging.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/tregrid_row_selectors_tri_state_checkboxes.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/tregrid_row_selectors_tri_state_checkboxes.png new file mode 100644 index 0000000000..9187cee3eb Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/tregrid_row_selectors_tri_state_checkboxes.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/union-types.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/union-types.png new file mode 100644 index 0000000000..146cfdb3bc Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/union-types.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/updating_row_edit_dialog.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/updating_row_edit_dialog.png new file mode 100644 index 0000000000..04a1abfeb0 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/updating_row_edit_dialog.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/validator.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/validator.png new file mode 100644 index 0000000000..c42a8fcc72 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/validator.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/whats_new_category_chart_callouts.PNG b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/whats_new_category_chart_callouts.PNG new file mode 100644 index 0000000000..63479f1a27 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/whats_new_category_chart_callouts.PNG differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/whats_new_category_chart_crosshair.PNG b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/whats_new_category_chart_crosshair.PNG new file mode 100644 index 0000000000..ed59be338c Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/whats_new_category_chart_crosshair.PNG differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/whats_new_category_chart_final_value.PNG b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/whats_new_category_chart_final_value.PNG new file mode 100644 index 0000000000..6c3eb9e570 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/whats_new_category_chart_final_value.PNG differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/whats_new_category_chart_highlight.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/whats_new_category_chart_highlight.png new file mode 100644 index 0000000000..8efa99b79b Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/whats_new_category_chart_highlight.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/whats_new_category_chart_tooltip.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/whats_new_category_chart_tooltip.png new file mode 100644 index 0000000000..8497f3696a Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/whats_new_category_chart_tooltip.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/whats_new_datachart_callout.PNG b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/whats_new_datachart_callout.PNG new file mode 100644 index 0000000000..e9ac01e428 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/whats_new_datachart_callout.PNG differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/whats_new_datachart_crosshair.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/whats_new_datachart_crosshair.png new file mode 100644 index 0000000000..0313b339de Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/whats_new_datachart_crosshair.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/whats_new_datachart_final_value.PNG b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/whats_new_datachart_final_value.PNG new file mode 100644 index 0000000000..9a4b3f8157 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/whats_new_datachart_final_value.PNG differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/whats_new_excel_charts.PNG b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/whats_new_excel_charts.PNG new file mode 100644 index 0000000000..22e2a1d282 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/whats_new_excel_charts.PNG differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/whats_new_excel_filter_menu.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/whats_new_excel_filter_menu.png new file mode 100644 index 0000000000..3dc0952a9f Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/whats_new_excel_filter_menu.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/whats_new_excel_sorting_menu.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/whats_new_excel_sorting_menu.png new file mode 100644 index 0000000000..1342bde0a4 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/whats_new_excel_sorting_menu.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/whats_new_excel_sparklines.PNG b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/whats_new_excel_sparklines.PNG new file mode 100644 index 0000000000..b07231c349 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/whats_new_excel_sparklines.PNG differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/whats_new_excel_top_10.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/whats_new_excel_top_10.png new file mode 100644 index 0000000000..1252b6236a Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/whats_new_excel_top_10.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/whats_new_financial_chart_callouts.PNG b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/whats_new_financial_chart_callouts.PNG new file mode 100644 index 0000000000..6f17bb4c95 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/whats_new_financial_chart_callouts.PNG differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/whats_new_financial_chart_crosshair.PNG b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/whats_new_financial_chart_crosshair.PNG new file mode 100644 index 0000000000..31d53f73dd Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/whats_new_financial_chart_crosshair.PNG differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/whats_new_financial_chart_final_values.PNG b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/whats_new_financial_chart_final_values.PNG new file mode 100644 index 0000000000..154dcdb14b Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/whats_new_financial_chart_final_values.PNG differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/whats_new_financial_chart_legend.PNG b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/whats_new_financial_chart_legend.PNG new file mode 100644 index 0000000000..9b7ecdddb7 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/whats_new_financial_chart_legend.PNG differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/whats_new_financial_chart_scale_breaks.PNG b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/whats_new_financial_chart_scale_breaks.PNG new file mode 100644 index 0000000000..3bdfb481f3 Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/whats_new_financial_chart_scale_breaks.PNG differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/whats_new_financial_chart_tooltips.png b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/whats_new_financial_chart_tooltips.png new file mode 100644 index 0000000000..ef5eccc46f Binary files /dev/null and b/docs/jquery/src/content/ja/topics/whats-new/revision-history/images/whats_new_financial_chart_tooltips.png differ diff --git a/docs/jquery/src/content/ja/topics/whats-new/revision-history/jquery-whats-new-revision-history.mdx b/docs/jquery/src/content/ja/topics/whats-new/revision-history/jquery-whats-new-revision-history.mdx new file mode 100644 index 0000000000..7db16d3fd3 --- /dev/null +++ b/docs/jquery/src/content/ja/topics/whats-new/revision-history/jquery-whats-new-revision-history.mdx @@ -0,0 +1,68 @@ +--- +title: "新機能のリビジョン履歴" +slug: jquery-whats-new-revision-history +--- + +# 新機能のリビジョン履歴 + +### 概要 + +以下のトピックでは、コントロールの {environment:ProductName}™ ライブラリの以前のバージョンでどんな新しいコントロールおよび機能が導入されたかに関する情報を提供します。 + +### トピック + +導入された新しいコントロールおよび機能に関する詳細は、以下のトピックで説明されています。 + +- [2023 Volume 2 の新機能](/whats-new-in-2023-volume2): このトピックでは、Infragistics {environment:ProductName}™ 2023 Volume 2 で導入された、新しい機能およびコンポーネントの概要について説明します。 + +- [2022 Volume 2 の新機能](/whats-new-in-2022-volume2): このトピックでは、Infragistics {environment:ProductName}™ 2022 Volume 2 で導入された、新しい機能およびコンポーネントの概要について説明します。 + +- [2022 Volume 1 の新機能](/whats-new-in-2022-volume1): このトピックでは、Infragistics {environment:ProductName}™ 2022 Volume 1 で導入された、新しい機能およびコンポーネントの概要について説明します。 + +- [2021 Volume 2 の新機能](/whats-new-in-2021-volume2): このトピックでは、Infragistics {environment:ProductName}™ 2021 Volume 2 で導入された、新しい機能およびコンポーネントの概要について説明します。 + +- [2021 Volume 1 の新機能](/whats-new-in-2021-volume1): このトピックでは、Infragistics {environment:ProductName}™ 2021 Volume 1 で導入された、新しい機能およびコンポーネントの概要について説明します。 + +- [2020 Volume 2 の新機能](/whats-new-in-2020-volume2): このトピックでは、Infragistics {environment:ProductName}™ 2020 Volume 2 で導入された、新しい機能およびコンポーネントの概要について説明します。 + +- [2019 Volume 2 の新機能](/whats-new-in-2019-volume2): このトピックでは、Infragistics {environment:ProductName}™ 2019 Volume 2 で導入された、新しい機能およびコンポーネントの概要について説明します。 + +- [2018 Volume 2 の新機能](/whats-new-in-2018-volume2): このトピックでは、Infragistics {environment:ProductName}™ 2018 Volume 2 で導入された、新しい機能およびコンポーネントの概要について説明します。 + +- [2018 Volume 1 の新機能](/whats-new-in-2018-volume1): このトピックでは、Infragistics {environment:ProductName}™ 2018 Volume 1 で導入された、新しい機能およびコンポーネントの概要について説明します。 + +- [2017 Volume 2 の新機能](/whats-new-in-2017-volume2): このトピックでは、Infragistics {environment:ProductName}™ 2017 Volume 2 で導入された、新しい機能およびコンポーネントの概要について説明します。 + +- [2017 Volume 1 の新機能](/whats-new-in-2017-volume1): このトピックでは、Infragistics {environment:ProductName}™ 2017 Volume 1 で導入された、新しい機能およびコンポーネントの概要について説明します。 + +- [2016 Volume 2 の新機能](/whats-new-in-2016-volume2): このトピックでは、Infragistics {environment:ProductName}™ 2016 Volume 2 で導入された、新しい機能およびコンポーネントの概要について説明します。 + +- [2016 Volume 1 の新機能](/whats-new-in-2016-volume1): このトピックでは、Infragistics {environment:ProductName}™ 2016 Volume 1 で導入された、新しい機能およびコンポーネントの概要について説明します。 + +- [2015 Volume 2 の新機能](/whats-new-in-2015-volume2): このトピックでは、Infragistics {environment:ProductName}™ 2015 Volume 2 で導入された、新しい機能およびコンポーネントの概要について説明します。 + +- [2015 Volume 1 の新機能](/whats-new-in-2015-volume1): このトピックでは、Infragistics {environment:ProductName}™ 2015 Volume 1 で導入された、新しい機能およびコンポーネントの概要について説明します。 + +- [2014 Volume 2 の新機能](/whats-new-in-2014-volume2): このトピックでは、Infragistics {environment:ProductName}™ 2014 Volume 2 で導入された、新しい機能およびコンポーネントの概要について説明します。 + +- [2014 Volume 1 の新機能](/whats-new-in-2014-volume1): このトピックでは、Infragistics {environment:ProductName}™ 2014 Volume 1 で導入された、新しい機能およびコンポーネントの概要について説明します。 + +- [2013 Volume 2 の新機能](/whats-new-in-2013-volume2): このトピックでは、Infragistics {environment:ProductName}™ 2013 Volume 2 で導入された、新しい機能およびコンポーネントの概要について説明します。 + +- [2013 Volume 1 の新機能](/whats-new-in-2013-volume1): このトピックでは、Infragistics {environment:ProductName}™ 2013 Volume 1 で導入された、新しい機能およびコンポーネントの概要について説明します。 + +- [2012 Volume 2 の新機能](/whats-new-in-2012-volume2): このトピックでは、Infragistics {environment:ProductName}™ 2012 Volume 2 で導入された、新しい機能およびコンポーネントの概要について説明します。 + +- [2012 Volume 1 の新機能](/jquery-whats-new-12-1-landing-page): このトピックでは、Infragistics {environment:ProductName}™ 2012 Volume 1 で導入された、新しい機能およびコンポーネントの概要について説明します。 + +- [2011 Volume 2 の新機能](/whats-new-in-2011-volume2): このトピックでは、Infragistics {environment:ProductName}™ 2011 Volume 2 で導入された、新しい機能およびコンポーネントの概要について説明します。 + + + + + + + + + + diff --git a/docs/jquery/src/content/toc.json b/docs/jquery/src/content/toc.json new file mode 100644 index 0000000000..4198738455 --- /dev/null +++ b/docs/jquery/src/content/toc.json @@ -0,0 +1,6113 @@ +[ + { + "name": "Ignite UI for jQuery の概要", + "href": "igniteui-for-jquery-overview.mdx", + "order": 0, + "slug": "igniteui-for-jquery-overview" + }, + { + "name": "Ignite UI for jQuery を使用した作業の開始", + "href": "general-and-getting-started/getting-started.mdx", + "order": 1, + "items": [ + { + "name": "コントロールを MVC プロジェクトに追加", + "href": "general-and-getting-started/adding-igniteui-controls-to-an-mvc-project.mdx", + "order": 0, + "slug": "adding-igniteui-controls-to-an-mvc-project" + }, + { + "name": "必要なリソースを手動で追加する", + "href": "general-and-getting-started/adding-the-required-resources-for-igniteui-for-jquery.mdx", + "order": 1, + "slug": "adding-the-required-resources-for-igniteui-for-jquery" + }, + { + "name": "Infragistics Loader による必要なリソースを自動で追加する", + "href": "general-and-getting-started/using-infragistics-loader.mdx", + "order": 2, + "slug": "using-infragistics-loader" + }, + { + "name": "Ignite UI for jQuery コントロールのローカライズのカスタマイズ", + "href": "general-and-getting-started/customizing-the-localization-of-igniteui-for-jquery-controls.mdx", + "order": 3, + "slug": "customizing-the-localization-of-igniteui-for-jquery-controls" + }, + { + "name": "Ignite UI for ASP.NET MVC によるイベントの定義", + "href": "general-and-getting-started/defining-events-with-aspnet-helper.mdx", + "order": 4, + "slug": "defining-events-with-aspnet-helper" + }, + { + "name": "Ignite UI for jQuery 対応 Infragistics コンテンツ配信ネットワーク", + "href": "general-and-getting-started/deployment-guide-infragistics-content-delivery-networkcdn.mdx", + "order": 5, + "slug": "deployment-guide-infragistics-content-delivery-network(cdn)" + }, + { + "name": "Ignite UI for jQuery での JavaScript ファイル", + "href": "general-and-getting-started/deployment-guide-javascript-files.mdx", + "order": 6, + "slug": "deployment-guide-javascript-files" + }, + { + "name": "スタイル設定とテーマ設定", + "href": "general-and-getting-started/styling-and-theming/deployment-guide-styling-and-theming.mdx", + "order": 7, + "items": [ + { + "name": "データのビジュアル化でのグラデーション カラーの使用", + "href": "general-and-getting-started/styling-and-theming/using-gradient-colors-in-data-visualizations.mdx", + "order": 0, + "slug": "using-gradient-colors-in-data-visualizations" + }, + { + "name": "Ignite UI for jQuery Bootstrap テーマのカスタマイズ", + "href": "general-and-getting-started/styling-and-theming/customizing-ignite-ui-bootstrap-themes.mdx", + "order": 2, + "slug": "customizing-ignite-ui-bootstrap-themes" + } + ], + "slug": "deployment-guide-styling-and-theming" + }, + { + "name": "Ignite UI for jQuery コントロールのタッチ サポート", + "href": "general-and-getting-started/touch-support-for-igniteui-for-jquery-controls.mdx", + "order": 8, + "slug": "touch-support-for-igniteui-for-jquery-controls" + }, + { + "name": "プロジェクトを Ignite UI for jQuery の最新バージョンにアップグレード", + "href": "general-and-getting-started/manually-updating-previous-versions.mdx", + "order": 9, + "slug": "manually-updating-previous-versions" + }, + { + "name": "Ignite UI for jQuery でイベントの使用", + "href": "general-and-getting-started/using-events-in-igniteui-for-jquery.mdx", + "order": 10, + "slug": "using-events-in-igniteui-for-jquery" + }, + { + "name": "HTML5 と CSS3 をサポートしないブラウザーで Ignite UI for jQuery を使用", + "href": "general-and-getting-started/deployment-guide-using-igniteui-for-jquery-in-browsers-that-dont-support-html5-or-css3.mdx", + "order": 11, + "slug": "deployment-guide-using-igniteui-for-jquery-in-browsers-that-dont-support-html5-or-css3" + }, + { + "name": "Ignite UI for jQuery で JavaScript リソースを使用", + "href": "general-and-getting-started/deployment-guide-javascript-resources.mdx", + "order": 12, + "slug": "deployment-guide-javascript-resources" + }, + { + "name": "Ignite UI for jQuery コントロールを別のタイム ゾーンで使用", + "href": "general-and-getting-started/using-igniteui-controls-in-different-time-zones.mdx", + "order": 13, + "slug": "Using-igniteui-controls-in-different-time-zones" + }, + { + "name": "日付、数値、および文字列の書式設定", + "href": "general-and-getting-started/formatting-dates-numbers-and-strings.mdx", + "order": 14, + "slug": "formatting-dates-numbers-and-strings" + }, + { + "name": "Ignite UI for jQuery コントロールで System.JS を使用", + "href": "general-and-getting-started/using-systemjs-with-igniteui-controls.mdx", + "order": 15, + "slug": "Using-System.JS-with-igniteui-controls" + }, + { + "name": "History.js と Ignite UI for jQuery コントロールの統合", + "href": "general-and-getting-started/historyjs-integration-with-igniteui-controls.mdx", + "order": 16, + "slug": "historyjs-integration-with-igniteui-controls" + }, + { + "name": "Ignite UI for jQuery CLI の使用", + "href": "general-and-getting-started/using-ignite-ui-cli.mdx", + "order": 17, + "slug": "Using-Ignite-UI-CLI" + }, + { + "name": "Ignite UI for jQuery NuGet パッケージの使用", + "href": "general-and-getting-started/using-ignite-ui-nuget-packages.mdx", + "order": 18, + "slug": "Using-Ignite-UI-NuGet-Packages" + }, + { + "name": "Ignite UI for jQuery npm パッケージの使用", + "href": "general-and-getting-started/using-ignite-ui-npm-packages.mdx", + "order": 19, + "slug": "Using-Ignite-UI-Npm-Packages" + }, + { + "name": "アクセシビリティ準拠", + "href": "general-and-getting-started/accessibility-compliance.mdx", + "slug": "accessibility-compliance" + }, + { + "name": "配備ガイド", + "href": "general-and-getting-started/deployment-guide.mdx", + "slug": "deployment-guide" + } + ], + "slug": "getting-started" + }, + { + "name": "コントロール", + "href": "controls/jqueryuicomponents-landingpage.mdx", + "order": 2, + "items": [ + { + "name": "igBulletGraph", + "href": "controls/igbulletgraph/igbulletgraph.mdx", + "items": [ + { + "name": "igBulletGraph の概要", + "href": "controls/igbulletgraph/overview.mdx", + "order": 0, + "slug": "igbulletgraph-overview" + }, + { + "name": "igBulletGraph の追加", + "href": "controls/igbulletgraph/adding/adding.mdx", + "order": 1, + "items": [ + { + "name": "igBulletGraph の HTML ページへの追加", + "href": "controls/igbulletgraph/adding/adding-to-an-html-page.mdx", + "order": 0, + "slug": "igbulletgraph-adding-to-an-html-page" + }, + { + "name": "ASP.NET MVC アプリケーションへの igBulletGraph の追加", + "href": "controls/igbulletgraph/adding/adding-using-the-mvc-helper.mdx", + "order": 1, + "slug": "igbulletgraph-adding-using-the-mvc-helper" + } + ], + "slug": "igbulletgraph-adding" + }, + { + "name": "igBulletGraph の構成", + "href": "controls/igbulletgraph/configuring/configuring.mdx", + "order": 2, + "items": [ + { + "name": "向きと方向の構成", + "href": "controls/igbulletgraph/configuring/configuring-the-orientation-and-direction.mdx", + "order": 0, + "slug": "igbulletgraph-configuring-the-orientation-and-direction" + }, + { + "name": "視覚要素の構成", + "href": "controls/igbulletgraph/configuring/elements/configuring-the-visual-elements.mdx", + "order": 1, + "items": [ + { + "name": "スケールの構成", + "href": "controls/igbulletgraph/configuring/elements/scale/configuring-the-scale.mdx", + "order": 0, + "slug": "igbulletgraph-configuring-the-scale" + }, + { + "name": "パフォーマンス バーの構成", + "href": "controls/igbulletgraph/configuring/elements/configuring-the-performance-bar.mdx", + "order": 1, + "slug": "igbulletgraph-configuring-the-performance-bar" + }, + { + "name": "比較マーカーの構成", + "href": "controls/igbulletgraph/configuring/elements/configuring-the-comparative-marker.mdx", + "order": 2, + "slug": "igbulletgraph-configuring-the-comparative-marker" + }, + { + "name": "比較範囲の構成", + "href": "controls/igbulletgraph/configuring/elements/configuring-comparative-ranges.mdx", + "order": 3, + "slug": "igbulletgraph-configuring-comparative-ranges" + }, + { + "name": "背景の構成", + "href": "controls/igbulletgraph/configuring/elements/configuring-the-background.mdx", + "order": 4, + "slug": "igbulletgraph-configuring-the-background" + }, + { + "name": "ツールチップの構成", + "href": "controls/igbulletgraph/configuring/elements/configuring-the-tooltips.mdx", + "order": 5, + "slug": "igbulletgraph-configuring-the-tooltips" + } + ], + "slug": "igbulletgraph-configuring-the-visual-elements" + } + ], + "slug": "igbulletgraph-configuring" + }, + { + "name": "jQuery および MVC API リファレンス リンク", + "href": "controls/igbulletgraph/api-links.mdx", + "order": 3, + "slug": "igbulletgraph-api-links" + }, + { + "name": "アクセシビリティ準拠", + "href": "controls/igbulletgraph/accessibility-compliance.mdx", + "order": 4, + "slug": "igbulletgraph-accessibility-compliance" + }, + { + "name": "既知の問題と制限", + "href": "controls/igbulletgraph/known-issues-and-limitations.mdx", + "order": 5, + "slug": "igbulletgraph-known-issues-and-limitations" + } + ], + "slug": "igbulletgraph" + }, + { + "name": "igCategoryChart", + "href": "controls/igcategorychart/landingpage.mdx", + "items": [ + { + "name": "概要", + "href": "controls/igcategorychart/categorychart-overview.mdx", + "order": 0, + "slug": "categorychart-overview" + }, + { + "name": "igCategoryChart の追加", + "href": "controls/igcategorychart/adding.mdx", + "order": 1, + "slug": "igcategorychart-adding" + }, + { + "name": "データ バインド", + "href": "controls/igcategorychart/categorychart-binding-to-data.mdx", + "order": 2, + "slug": "categorychart-binding-to-data" + }, + { + "name": "チャート タイプ", + "href": "controls/igcategorychart/categorychart-chart-types.mdx", + "order": 3, + "slug": "categorychart-chart-types" + }, + { + "name": "軸", + "href": "controls/igcategorychart/axes/categorychart-axes.mdx", + "order": 4, + "items": [ + { + "name": "igCategoryChart の軸間隔と重複の構成", + "href": "controls/igcategorychart/axes/categorychart-configuring-axis-gap-and-overlap.mdx", + "order": 0, + "slug": "categorychart-configuring-axis-gap-and-overlap" + }, + { + "name": "軸ラベルの構成", + "href": "controls/igcategorychart/axes/axis-labels.mdx", + "order": 1, + "slug": "igcategorychart-axis-label" + }, + { + "name": "軸間隔", + "href": "controls/igcategorychart/axes/axis-intervals.mdx", + "order": 2, + "slug": "igcategorychart-axis-intervals" + }, + { + "name": "軸の範囲", + "href": "controls/igcategorychart/axes/categorychart-configuring-axis-range.mdx", + "order": 3, + "slug": "categorychart-configuring-axis-range" + }, + { + "name": "軸目盛", + "href": "controls/igcategorychart/axes/axis-tickmarks.mdx", + "order": 4, + "slug": "igcategorychart-axis-tickmarks" + }, + { + "name": "軸タイトル", + "href": "controls/igcategorychart/axes/categorychart-configuring-axis-titles.mdx", + "order": 5, + "slug": "categorychart-configuring-axis-titles" + } + ], + "slug": "categorychart-axes" + }, + { + "name": "チャート マーカーの構成", + "href": "controls/igcategorychart/categorychart-configuring-chart-markers.mdx", + "order": 5, + "slug": "categorychart-configuring-chart-markers" + }, + { + "name": "チャート要件", + "href": "controls/igcategorychart/categorychart-chart-requirements.mdx", + "order": 6, + "slug": "categorychart-chart-requirements" + }, + { + "name": "チャートのタイトルとサブタイトル", + "href": "controls/igcategorychart/categorychart-chart-title-subtitle.mdx", + "order": 7, + "slug": "categorychart-chart-title-subtitle" + }, + { + "name": "チャート タイプの構成", + "href": "controls/igcategorychart/categorychart-configuring-chart-types.mdx", + "order": 8, + "slug": "categorychart-configuring-chart-types" + }, + { + "name": "igCategoryChart 注釈とインタラクション レイヤー", + "href": "controls/igcategorychart/annotations-and-interactions/annotations-and-interactions.mdx", + "order": 9, + "items": [ + { + "name": "カテゴリ ハイライト レイヤー", + "href": "controls/igcategorychart/annotations-and-interactions/category-highlight-layer.mdx", + "order": 0, + "slug": "igcategorychart-category-highlight-layer" + }, + { + "name": "項目ハイライト レイヤー", + "href": "controls/igcategorychart/annotations-and-interactions/item-highlight-layer.mdx", + "order": 1, + "slug": "igcategorychart-item-highlight-layer" + }, + { + "name": "十字線レイヤー", + "href": "controls/igcategorychart/annotations-and-interactions/crosshairs-layer.mdx", + "order": 2, + "slug": "igcategorychart-crosshairs-layer" + }, + { + "name": "カテゴリ ツールチップ レイヤー", + "href": "controls/igcategorychart/annotations-and-interactions/category-tooltip-layer.mdx", + "order": 3, + "slug": "igcategorychart-category-tooltip-layer" + }, + { + "name": "項目ツールチップ レイヤー", + "href": "controls/igcategorychart/annotations-and-interactions/item-tooltip-layer.mdx", + "order": 4, + "slug": "igcategorychart-item-tooltip-layer" + }, + { + "name": "最終値レイヤー", + "href": "controls/igcategorychart/annotations-and-interactions/final-value-layer.mdx", + "order": 5, + "slug": "igcategorychart-final-value-layer" + }, + { + "name": "コールアウト レイヤー", + "href": "controls/igcategorychart/annotations-and-interactions/callouts-layer.mdx", + "order": 6, + "slug": "igcategorychart-callouts-layer" + }, + { + "name": "チャートのデータ ツールチップ", + "href": "controls/igcategorychart/annotations-and-interactions/datatooltip.mdx", + "order": 7 + } + ], + "slug": "igcategorychart-annotations-and-interactions" + }, + { + "name": "データ凡例", + "href": "controls/igcategorychart/categorychart-datalegend.mdx", + "order": 10 + }, + { + "name": "アクセシビリティの遵守", + "href": "controls/igcategorychart/categorychart-accessibility-compliance.mdx", + "order": 11, + "slug": "igcategorychart-accessibility-compliance" + }, + { + "name": "jQuery および MVC API リファレンス リンク", + "href": "controls/igcategorychart/categorychart-api-overivew.mdx", + "order": 12, + "slug": "categorychart-api-overview" + }, + { + "name": "igCategoryChart のスタイル設定", + "href": "controls/igcategorychart/categorychart-styling.mdx", + "order": 13, + "slug": "categorychart-styling" + }, + { + "name": "トランジション イン アニメーション", + "href": "controls/igcategorychart/categorychart-transition-in-animations.mdx", + "order": 14, + "slug": "categorychart-transition-in-animations" + } + ], + "slug": "igcategorychart-landingpage" + }, + { + "name": "igCombo", + "href": "controls/igcombo/igcombo.mdx", + "items": [ + { + "name": "igCombo の概要", + "href": "controls/igcombo/overview.mdx", + "order": 0, + "slug": "igcombo-overview" + }, + { + "name": "igCombo の追加", + "href": "controls/igcombo/getting-started.mdx", + "order": 1, + "slug": "igcombo-getting-started" + }, + { + "name": "新しいコンボへの移行", + "href": "controls/igcombo/migrating-to-the-new-combo.mdx", + "order": 2, + "slug": "igcombo-migrating-to-the-new-combo" + }, + { + "name": "igCombo をデータにバインド", + "href": "controls/igcombo/binding/binding-to-data.mdx", + "order": 3, + "items": [ + { + "name": "igCombo データにバインドについての概要", + "href": "controls/igcombo/binding/data-binding.mdx", + "order": 0, + "slug": "igcombo-data-binding" + }, + { + "name": "カスケード igCombo の作成", + "href": "controls/igcombo/binding/cascading.mdx", + "order": 1, + "slug": "igcombo-cascading" + } + ], + "slug": "igcombo-binding-to-data" + }, + { + "name": "igCombo の構成", + "href": "controls/igcombo/configuring/configuring.mdx", + "order": 4, + "items": [ + { + "name": "選択の構成", + "href": "controls/igcombo/configuring/configure-selection.mdx", + "order": 0, + "slug": "igcombo-configure-selection" + }, + { + "name": "自動補完の構成", + "href": "controls/igcombo/configuring/configure-auto-suggest.mdx", + "order": 1, + "slug": "igcombo-configure-auto-suggest" + }, + { + "name": "リモート フィルタリングの構成", + "href": "controls/igcombo/configuring/configure-remote-filtering.mdx", + "order": 2, + "slug": "igcombo-configure-remote-filtering" + }, + { + "name": "ロード オン デマンドを構成する", + "href": "controls/igcombo/configuring/load-on-demand.mdx", + "order": 3, + "slug": "igcombo-load-on-demand" + }, + { + "name": "Knockout サポートの構成", + "href": "controls/igcombo/configuring/knockoutjs-support.mdx", + "order": 4, + "slug": "igcombo-knockoutjs-support" + }, + { + "name": "パフォーマンスの最適化", + "href": "controls/igcombo/configuring/optimize-performance.mdx", + "order": 5, + "slug": "igcombo-optimize-performance" + }, + { + "name": "グループ化の構成", + "href": "controls/igcombo/configuring/grouping.mdx", + "order": 6, + "slug": "igCombo-grouping" + }, + { + "name": "ASP.NET MVC コンボの構成", + "href": "controls/igcombo/configuring/asp-net-mvc.mdx", + "order": 7, + "slug": "configuring-asp-net-mvc" + }, + { + "name": "AngularJS サポート", + "href": "controls/igcombo/configuring/angularjs-support.mdx", + "order": 8, + "slug": "igcombo-angularjs-support" + }, + { + "name": "TypeScript サポート", + "href": "controls/igcombo/configuring/typescript-support.mdx", + "order": 9, + "slug": "igcombo-typescript-support" + } + ], + "slug": "igcombo-configuring" + }, + { + "name": "igCombo のスタイル設定", + "href": "controls/igcombo/using-themes.mdx", + "order": 5, + "slug": "igcombo-using-themes" + }, + { + "name": "アクセシビリティ準拠", + "href": "controls/igcombo/accessibility-compliance.mdx", + "order": 6, + "slug": "igcombo-accessibility-compliance" + }, + { + "name": "既知の問題と制限", + "href": "controls/igcombo/known-limitations.mdx", + "order": 8, + "slug": "igcombo-known-limitations" + }, + { + "name": "jQuery および MVC API リファレンス リンク", + "href": "controls/igcombo/jquery-and-asp-net-mvc-helper-api-links.mdx", + "order": 9, + "slug": "igcombo-jquery-and-asp-net-mvc-helper-api-links" + } + ], + "slug": "igcombo-igcombo" + }, + { + "name": "igDataChart", + "href": "controls/igdatachart/landing-page.mdx", + "items": [ + { + "name": "概要", + "href": "controls/igdatachart/overview/overview.mdx", + "order": 0, + "items": [ + { + "name": "シリーズ タイプ", + "href": "controls/igdatachart/overview/series-types.mdx", + "order": 0, + "slug": "igdatachart-series-types" + }, + { + "name": "構成可能な視覚要素", + "href": "controls/igdatachart/overview/visual-elements.mdx", + "order": 1, + "slug": "igdatachart-visual-elements" + }, + { + "name": "ホバー操作の概要", + "href": "controls/igdatachart/overview/hoverinteractions-hover-interactions-overview.mdx", + "order": 2, + "slug": "hoverinteractions-hover-interactions-overview" + } + ], + "slug": "igdatachart-overview" + }, + { + "name": "igDataChart の追加", + "href": "controls/igdatachart/adding.mdx", + "order": 1, + "slug": "igdatachart-adding" + }, + { + "name": "igDataChart をデータにバインド", + "href": "controls/igdatachart/databinding.mdx", + "order": 2, + "slug": "igdatachart-databinding" + }, + { + "name": "シリーズ要件", + "href": "controls/igdatachart/series-requirements.mdx", + "order": 3, + "slug": "igdatachart-series-requirements" + }, + { + "name": "igDataChart の構成", + "href": "controls/igdatachart/configuring/configuring.mdx", + "order": 4, + "items": [ + { + "name": "チャートのアニメーション化", + "href": "controls/igdatachart/configuring/animating/animating-charts.mdx", + "order": 0, + "items": [ + { + "name": "チャートの Infragistics Motion Framework の概要", + "href": "controls/igdatachart/configuring/animating/motion-framework.mdx", + "order": 0, + "slug": "igdatachart-motion-framework" + }, + { + "name": "HTML および JavaScript におけるチャートのアニメーション化", + "href": "controls/igdatachart/configuring/animating/animating-html.mdx", + "order": 1, + "slug": "igdatachart-animating-html" + }, + { + "name": "ASP.NET MVC でのチャートのアニメーション化", + "href": "controls/igdatachart/configuring/animating/charts-in-aspnet-mvc.mdx", + "order": 2, + "slug": "animating-charts-in-asp.net-mvc" + } + ], + "slug": "igdatachart-animating-charts" + }, + { + "name": "チャートのタイトル / サブタイトルの構成", + "href": "controls/igdatachart/configuring/chart-titles-and-subtitles.mdx", + "order": 1, + "slug": "igdatachart-chart-titles-and-subtitles" + }, + { + "name": "軸のタイトルの構成", + "href": "controls/igdatachart/configuring/axis-title.mdx", + "order": 2, + "slug": "igdatachart-axis-title" + }, + { + "name": "シリーズの強調表示の構成", + "href": "controls/igdatachart/configuring/series-highlighting.mdx", + "order": 3, + "slug": "igdatachart-series-highlighting" + }, + { + "name": "ホバー操作の構成", + "href": "controls/igdatachart/configuring/hover-interactions/hover-interactions.mdx", + "order": 4, + "items": [ + { + "name": "カテゴリ ハイライト レイヤーの構成", + "href": "controls/igdatachart/configuring/hover-interactions/category-highlight-layer.mdx", + "order": 0, + "slug": "hoverinteractions-category-highlight-layer" + }, + { + "name": "カテゴリ項目ハイライト レイヤーの構成", + "href": "controls/igdatachart/configuring/hover-interactions/category-item-highlight-layer.mdx", + "order": 1, + "slug": "hoverinteractions-category-item-highlight-layer" + }, + { + "name": "カテゴリ ツールチップ レイヤーの構成", + "href": "controls/igdatachart/configuring/hover-interactions/category-tooltip-layer.mdx", + "order": 2, + "slug": "hoverinteractions-category-tooltip-layer" + }, + { + "name": "十字線レイヤーの構成", + "href": "controls/igdatachart/configuring/hover-interactions/crosshair-layer.mdx", + "order": 3, + "slug": "hoverinteractions-crosshair-layer" + }, + { + "name": "項目ツールチップ レイヤーの構成", + "href": "controls/igdatachart/configuring/hover-interactions/item-tooltip-layer.mdx", + "order": 4, + "slug": "hoverinteractions-item-tooltip-layer" + }, + { + "name": "最終値レイヤーの構成", + "href": "controls/igdatachart/configuring/hover-interactions/final-value-layer.mdx", + "order": 5, + "slug": "hoverinteractions-final-value-layer" + }, + { + "name": "コールアウト レイヤーの構成", + "href": "controls/igdatachart/configuring/hover-interactions/callout-layer.mdx", + "order": 6, + "slug": "hoverinteractions-callout-layer" + }, + { + "name": "ホバー操作プロパティ参照", + "href": "controls/igdatachart/configuring/hover-interactions/common-properties.mdx", + "order": 7, + "slug": "hoverinteractions-common-properties" + } + ], + "slug": "hoverinteractions-hover-interactions" + }, + { + "name": "三角測量シリーズの構成", + "href": "controls/igdatachart/configuring/triangulation-series/triangulation-series.mdx", + "order": 5, + "items": [ + { + "name": "散布エリア シリーズの構成", + "href": "controls/igdatachart/configuring/triangulation-series/area-series.mdx", + "order": 0, + "slug": "triangulationseries-area-series" + }, + { + "name": "散布等高線シリーズの構成", + "href": "controls/igdatachart/configuring/triangulation-series/contour-series.mdx", + "order": 1, + "slug": "triangulationseries-contour-series" + } + ], + "slug": "triangulationseries-triangulation-series" + }, + { + "name": "シェープ シリーズの構成", + "href": "controls/igdatachart/configuring/shape-series/shape-series.mdx", + "order": 6, + "items": [ + { + "name": "散布多角形シリーズの構成", + "href": "controls/igdatachart/configuring/shape-series/polygon-series.mdx", + "order": 0, + "slug": "shapeseries-polygon-series" + }, + { + "name": "散布ポリライン シリーズの構成", + "href": "controls/igdatachart/configuring/shape-series/polyline-series.mdx", + "order": 1, + "slug": "shapeseries-polyline-series" + } + ], + "slug": "shapeseries-shape-series" + }, + { + "name": "Knockout サポートの構成", + "href": "controls/igdatachart/configuring/knockoutjs-support.mdx", + "order": 7, + "slug": "igdatachart-knockoutjs-support" + }, + { + "name": "トランジション イン アニメーション", + "href": "controls/igdatachart/configuring/igchart-transitions-in-animations.mdx", + "order": 8, + "slug": "igchart-transitions-in-animations" + }, + { + "name": "軸間隔の構成", + "href": "controls/igdatachart/configuring/axis-intervals.mdx", + "order": 9, + "slug": "igdatachart-configuring-axis-intervals" + }, + { + "name": "TimeXAxis の構成", + "href": "controls/igdatachart/configuring/configuring-timexaxis.mdx", + "order": 10, + "slug": "igdatachart-configuring-timexaxis" + }, + { + "name": "ナビゲーション機能の構成", + "href": "controls/igdatachart/configuring/configuring-navigation-features.mdx", + "order": 11, + "slug": "igdatachart-configuring-navigation-features" + }, + { + "name": "PercentChangeYAxis の構成", + "href": "controls/igdatachart/configuring/configuring-percentchangeyaxis.mdx", + "order": 12, + "slug": "igdatachart-configuring-percentchangeyaxis" + }, + { + "name": "OrdinalTimeXAxis の構成", + "href": "controls/igdatachart/configuring/configuring-ordinaltimexaxis.mdx", + "order": 13, + "slug": "igdatachart-configuring-ordinaltimexaxis" + }, + { + "name": "データ凡例", + "href": "controls/igdatachart/configuring/configuring-datalegend.mdx", + "order": 14 + }, + { + "name": "チャートのデータ ツールチップ", + "href": "controls/igdatachart/configuring/configuring-datatooltip.mdx", + "order": 15 + } + ], + "slug": "igdatachart-configuring" + }, + { + "name": "igDataChart のスタイル設定", + "href": "controls/igdatachart/styling/styling-themes.mdx", + "order": 5, + "items": [ + { + "name": "チャート シリーズのスタイル設定", + "href": "controls/igdatachart/styling/styling-the-chart-series.mdx", + "order": 0, + "slug": "igdatachart-styling-the-chart-series" + } + ], + "slug": "igdatachart-styling-themes" + }, + { + "name": "アクセシビリティ準拠", + "href": "controls/igdatachart/accessibility-compliance.mdx", + "order": 6, + "slug": "igdatachart-accessibility-compliance" + }, + { + "name": "既知の問題と制限", + "href": "controls/igdatachart/known-issues.mdx", + "order": 7, + "slug": "igdatachart-known-issues" + }, + { + "name": "jQuery および MVC API リファレンス リンク", + "href": "controls/igdatachart/api-links.mdx", + "order": 8, + "slug": "igdatachart-api-links" + } + ], + "slug": "igdatachart-landing-page" + }, + { + "name": "igDialog", + "href": "controls/igdialog/igdialog.mdx", + "items": [ + { + "name": "igDialog の概要", + "href": "controls/igdialog/overview.mdx", + "order": 0, + "slug": "igdialog-overview" + }, + { + "name": "igDialog の追加", + "href": "controls/igdialog/adding-igdialog.mdx", + "order": 1, + "slug": "adding-igdialog" + }, + { + "name": "igDialog の構成", + "href": "controls/igdialog/configuring/igdialog.mdx", + "order": 2, + "items": [ + { + "name": "igDialog の表示と非表示", + "href": "controls/igdialog/configuring/show-and-hide.mdx", + "order": 0, + "slug": "igdialog-show-and-hide" + }, + { + "name": "igDialog の最大化と最小化", + "href": "controls/igdialog/configuring/maximize-and-minimize.mdx", + "order": 1, + "slug": "igdialog-maximize-and-minimize" + }, + { + "name": "igDialog の固定", + "href": "controls/igdialog/configuring/pin.mdx", + "order": 2, + "slug": "igdialog-pin" + }, + { + "name": "igDialog 配置", + "href": "controls/igdialog/configuring/position.mdx", + "order": 3, + "slug": "igdialog-position" + }, + { + "name": "igDialog のヘッダーとフッター", + "href": "controls/igdialog/configuring/header-and-footer.mdx", + "order": 4, + "slug": "igdialog-header-and-footer" + }, + { + "name": "igDialog 外部ページ", + "href": "controls/igdialog/configuring/external-page.mdx", + "order": 5, + "slug": "igdialog-external-page" + }, + { + "name": "igDialog モーダル状態", + "href": "controls/igdialog/configuring/modal-state.mdx", + "order": 6, + "slug": "igdialog-modal-state" + }, + { + "name": "igDialog の複数ダイアログ", + "href": "controls/igdialog/configuring/multiple-dialogs.mdx", + "order": 7, + "slug": "igdialog-multiple-dialogs" + }, + { + "name": "igDialog のアニメーション", + "href": "controls/igdialog/configuring/animations.mdx", + "order": 8, + "slug": "igdialog-animations" + } + ], + "slug": "configuring-igdialog" + }, + { + "name": "API リファレンス", + "href": "controls/igdialog/api-reference/api-reference.mdx", + "order": 3, + "items": [ + { + "name": "プロパティ リファレンス", + "href": "controls/igdialog/api-reference/property-reference.mdx", + "order": 0, + "slug": "igdialog-property-reference" + }, + { + "name": "メソッドのリファレンス", + "href": "controls/igdialog/api-reference/method-reference.mdx", + "order": 1, + "slug": "igdialog-method-reference" + }, + { + "name": "イベント リファレンス", + "href": "controls/igdialog/api-reference/event-reference.mdx", + "order": 2, + "slug": "igdialog-event-reference" + }, + { + "name": "CSS クラス リファレンス", + "href": "controls/igdialog/api-reference/css-classes-reference.mdx", + "order": 3, + "slug": "igdialog-css-classes-reference" + } + ], + "slug": "igdialog-api-reference" + }, + { + "name": "スタイル設定とテーマ設定", + "href": "controls/igdialog/styling-and-theming.mdx", + "order": 4, + "slug": "igdialog-styling-and-theming" + }, + { + "name": "既知の問題と制限", + "href": "controls/igdialog/known-issues.mdx", + "order": 5, + "slug": "igdialog-known-issues" + }, + { + "name": "アクセシビリティ準拠", + "href": "controls/igdialog/accessibility-compliance.mdx", + "order": 6, + "slug": "igdialog-accessibility-compliance" + } + ], + "slug": "igdialog" + }, + { + "name": "igDoughnutChart", + "href": "controls/igdoughnutchart/igdoughnutchart.mdx", + "items": [ + { + "name": "igDoughnutChart の概要", + "href": "controls/igdoughnutchart/overview.mdx", + "order": 0, + "slug": "igdoughnutchart-overview" + }, + { + "name": "igDoughnutChart の追加", + "href": "controls/igdoughnutchart/adding/adding.mdx", + "order": 1, + "items": [ + { + "name": "igDoughnutChart の HTML ページへの追加", + "href": "controls/igdoughnutchart/adding/adding-to-an-html-page.mdx", + "order": 0, + "slug": "igdoughnutchart-adding-to-an-html-page" + }, + { + "name": "ASP.NET MVC アプリケーションへの igDoughnutChart の追加", + "href": "controls/igdoughnutchart/adding/adding-using-the-mvc-helper.mdx", + "order": 1, + "slug": "igdoughnutchart-adding-using-the-mvc-helper" + } + ], + "slug": "igdoughnutchart-adding" + }, + { + "name": "選択と展開の構成", + "href": "controls/igdoughnutchart/configuring-selection-and-explosion.mdx", + "order": 2, + "slug": "igdoughnutchart-configuring-selection-and-explosion" + }, + { + "name": "jQuery および MVC API リファレンス リンク", + "href": "controls/igdoughnutchart/api-links.mdx", + "order": 3, + "slug": "igdoughnutchart-api-links" + }, + { + "name": "アクセシビリティの遵守", + "href": "controls/igdoughnutchart/accessibility-compliance.mdx", + "order": 4, + "slug": "igdoughnutchart-accessibility-compliance" + }, + { + "name": "既知の問題と制限", + "href": "controls/igdoughnutchart/known-issues-and-limitations.mdx", + "order": 5, + "slug": "igdoughnutchart-known-issues-and-limitations" + } + ], + "slug": "igdoughnutchart" + }, + { + "name": "igEditors", + "href": "controls/igeditors/landingpage.mdx", + "items": [ + { + "name": "igCurrencyEditor", + "href": "controls/igeditors/igcurrencyeditor/igcurrencyeditor.mdx", + "order": 0, + "items": [ + { + "name": "igCurrencyEditor の概要", + "href": "controls/igeditors/igcurrencyeditor/igcurrencyeditor-overview.mdx", + "order": 0, + "slug": "igcurrencyeditor-igcurrencyeditor-overview" + }, + { + "name": "igCurrencyEditor のスタイルおよびテーマ設定", + "href": "controls/igeditors/igcurrencyeditor/igcurrencyeditor-styling-and-theming.mdx", + "order": 1, + "slug": "igcurrencyeditor-igcurrencyeditor-styling-and-theming" + }, + { + "name": "igCurrencyEditor アクセシビリティの遵守", + "href": "controls/igeditors/igcurrencyeditor/igcurrencyeditor-accessibility-compliance.mdx", + "order": 2, + "slug": "igcurrencyeditor-igcurrencyeditor-accessibility-compliance" + }, + { + "name": "igCurrencyEditor 既知の問題", + "href": "controls/igeditors/igcurrencyeditor/igcurrencyeditor-known-issues.mdx", + "order": 3, + "slug": "igcurrencyeditor-igcurrencyeditor-known-issues" + }, + { + "name": "igCurrencyEditor jQuery および MVC API リファレンス リンク", + "href": "controls/igeditors/igcurrencyeditor/igcurrencyeditor-jquery-api.mdx", + "order": 4, + "slug": "igcurrencyeditor-igcurrencyeditor-jquery-api" + }, + { + "name": "新しい igCurrencyEditor への移行", + "href": "controls/igeditors/igcurrencyeditor/migrating-to-the-new-igcurrencyeditor.mdx", + "order": 5, + "slug": "migrating-to-the-new-igcurrencyeditor" + } + ], + "slug": "igcurrencyeditor-igcurrencyeditor" + }, + { + "name": "igDateEditor", + "href": "controls/igeditors/igdateeditor/igdateeditor.mdx", + "order": 1, + "items": [ + { + "name": "igDateEditor の概要", + "href": "controls/igeditors/igdateeditor/overview.mdx", + "order": 0, + "slug": "igdateeditor-overview" + }, + { + "name": "igDateEditor のスタイル設定とテーマ設定", + "href": "controls/igeditors/igdateeditor/styling-and-theming.mdx", + "order": 1, + "slug": "igdateeditor-styling-and-theming" + }, + { + "name": "igDateEditor アクセシビリティの遵守", + "href": "controls/igeditors/igdateeditor/accessibility-compliance.mdx", + "order": 2, + "slug": "igdateeditor-accessibility-compliance" + }, + { + "name": "igDateEditor の既知の問題", + "href": "controls/igeditors/igdateeditor/known-issues.mdx", + "order": 3, + "slug": "igdateeditor-known-issues" + }, + { + "name": "igDateEditor jQuery および MVC API リファレンス リンク", + "href": "controls/igeditors/igdateeditor/jquery-api.mdx", + "order": 4, + "slug": "igdateeditor-jquery-api" + }, + { + "name": "新しい igDateEditor への移行", + "href": "controls/igeditors/igdateeditor/migrating-to-the-new-igdateeditor.mdx", + "order": 5, + "slug": "migrating-to-the-new-igdateeditor" + }, + { + "name": "17.1 で日付処理の移行", + "href": "controls/igeditors/igdateeditor/migrating-date-handling-in-17-1.mdx", + "order": 6, + "slug": "igDateEditor-migrating-date-handling-in-17-1" + } + ], + "slug": "igdateeditor-igdateeditor" + }, + { + "name": "igMaskEditor", + "href": "controls/igeditors/igmaskeditor/igmaskeditor.mdx", + "order": 2, + "items": [ + { + "name": "igMaskEditor の概要", + "href": "controls/igeditors/igmaskeditor/overview.mdx", + "order": 0, + "slug": "igmaskeditor--overview" + }, + { + "name": "igMaskEditor のスタイル設定とテーマ設定", + "href": "controls/igeditors/igmaskeditor/styling-and-theming.mdx", + "order": 1, + "slug": "igmaskeditor-styling-and-theming" + }, + { + "name": "igMaskEditor アクセシビリティの遵守", + "href": "controls/igeditors/igmaskeditor/accessibility-compliance.mdx", + "order": 2, + "slug": "igmaskeditor-accessibility-compliance" + }, + { + "name": "igMaskEditor の既知の問題", + "href": "controls/igeditors/igmaskeditor/known-issues.mdx", + "order": 3, + "slug": "igmaskeditor-known-issues" + }, + { + "name": "igMaskEditor jQuery および MVC API リファレンス リンク", + "href": "controls/igeditors/igmaskeditor/jquery-api.mdx", + "order": 4, + "slug": "igmaskeditor-jquery-api" + }, + { + "name": "新しい igMaskEditor への移行", + "href": "controls/igeditors/igmaskeditor/migrating-to-the-new-igmaskeditor.mdx", + "order": 5, + "slug": "migrating-to-the-new-igmaskeditor" + } + ], + "slug": "igmaskeditor-igmaskeditor" + }, + { + "name": "igNumericEditor", + "href": "controls/igeditors/ignumericeditor/ignumericeditor.mdx", + "order": 3, + "items": [ + { + "name": "igNumericEditor の概要", + "href": "controls/igeditors/ignumericeditor/overview.mdx", + "order": 0, + "slug": "ignumericeditor-overview" + }, + { + "name": "igNumericEditor のスタイル設定とテーマ設定", + "href": "controls/igeditors/ignumericeditor/styling-and-theming.mdx", + "order": 1, + "slug": "ignumericeditor-styling-and-theming" + }, + { + "name": "igNumericEditor アクセシビリティの遵守", + "href": "controls/igeditors/ignumericeditor/accessibility-compliance.mdx", + "order": 2, + "slug": "ignumericeditor-accessibility-compliance" + }, + { + "name": "igNumericEditor の既知の問題", + "href": "controls/igeditors/ignumericeditor/known-issues.mdx", + "order": 3, + "slug": "ignumericeditor-known-issues" + }, + { + "name": "igNumericEditor jQuery および MVC API リファレンス リンク", + "href": "controls/igeditors/ignumericeditor/jquery-api.mdx", + "order": 4, + "slug": "ignumericeditor-jquery-api" + }, + { + "name": "新しい igNumericEditor への移行", + "href": "controls/igeditors/ignumericeditor/migrating-to-the-new-ignumericeditor.mdx", + "order": 5, + "slug": "migrating-to-the-new-ignumericeditor" + } + ], + "slug": "ignumericeditor-ignumericeditor" + }, + { + "name": "igPercentEditor", + "href": "controls/igeditors/igpercenteditor/igpercenteditor.mdx", + "order": 4, + "items": [ + { + "name": "igPercentEditor の概要", + "href": "controls/igeditors/igpercenteditor/overview.mdx", + "order": 0, + "slug": "igpercenteditor-overview" + }, + { + "name": "igPercentEditor のスタイルおよびテーマ設定", + "href": "controls/igeditors/igpercenteditor/styling-and-theming.mdx", + "order": 1, + "slug": "igpercenteditor-styling-and-theming" + }, + { + "name": "igPercentEditor アクセシビリティの遵守", + "href": "controls/igeditors/igpercenteditor/accessibility-compliance.mdx", + "order": 2, + "slug": "igpercenteditor-accessibility-compliance" + }, + { + "name": "igPercentEditor 既知の問題", + "href": "controls/igeditors/igpercenteditor/known-issues.mdx", + "order": 3, + "slug": "igpercenteditor-known-issues" + }, + { + "name": "igPercentEditor jQuery および MVC API リファレンス リンク", + "href": "controls/igeditors/igpercenteditor/jquery-api.mdx", + "order": 4, + "slug": "igpercenteditor-jquery-api" + }, + { + "name": "新しい igPercentEditor への移行", + "href": "controls/igeditors/igpercenteditor/migrating-to-the-new-igpercenteditor.mdx", + "order": 5, + "slug": "migrating-to-the-new-igpercenteditor" + } + ], + "slug": "igpercenteditor-igpercenteditor" + }, + { + "name": "igTextEditor", + "href": "controls/igeditors/igtexteditor/igtexteditor.mdx", + "order": 5, + "items": [ + { + "name": "igTextEditor の概要", + "href": "controls/igeditors/igtexteditor/overview.mdx", + "order": 0, + "slug": "igtexteditor-overview" + }, + { + "name": "igTextEditor のスタイルおよびテーマ設定", + "href": "controls/igeditors/igtexteditor/styling-and-theming.mdx", + "order": 1, + "slug": "igtexteditor-styling-and-theming" + }, + { + "name": "igTextEditor アクセシビリティの遵守", + "href": "controls/igeditors/igtexteditor/accessibility-compliance.mdx", + "order": 2, + "slug": "igtexteditor-accessibility-compliance" + }, + { + "name": "igTextEditor 既知の問題", + "href": "controls/igeditors/igtexteditor/known-issues.mdx", + "order": 3, + "slug": "igtexteditor-known-issues" + }, + { + "name": "igTextEditor jQuery および MVC API リファレンス リンク", + "href": "controls/igeditors/igtexteditor/jquery-api.mdx", + "order": 4, + "slug": "igtexteditor-jquery-api" + }, + { + "name": "新しい igTextEditor への移行", + "href": "controls/igeditors/igtexteditor/migrating-to-the-new-igtexteditor.mdx", + "order": 5, + "slug": "migrating-to-the-new-igtexteditor" + } + ], + "slug": "igtexteditor-igtexteditor" + }, + { + "name": "igCheckboxEditor", + "href": "controls/igeditors/igcheckboxeditor/igcheckboxeditor.mdx", + "order": 6, + "items": [ + { + "name": "igCheckboxEditor の概要", + "href": "controls/igeditors/igcheckboxeditor/overview.mdx", + "order": 0, + "slug": "igcheckboxeditor-overview" + }, + { + "name": "igCheckboxEditor のスタイルおよびテーマ設定", + "href": "controls/igeditors/igcheckboxeditor/styling-and-theming.mdx", + "order": 1, + "slug": "igcheckboxeditor-styling-and-theming" + }, + { + "name": "igCheckboxEditor アクセシビリティの遵守", + "href": "controls/igeditors/igcheckboxeditor/accessibility-compliance.mdx", + "order": 2, + "slug": "igcheckboxeditor-accessibility-compliance" + }, + { + "name": "igCheckboxEditor の既知の問題", + "href": "controls/igeditors/igcheckboxeditor/known-issues.mdx", + "order": 3, + "slug": "igcheckboxeditor-known-issues" + }, + { + "name": "igCheckboxEditor jQuery および MVC API リファレンス リンク", + "href": "controls/igeditors/igcheckboxeditor/jquery-api.mdx", + "order": 4, + "slug": "igcheckboxeditor-jquery-api" + } + ], + "slug": "igcheckboxeditor-igcheckboxeditor" + }, + { + "name": "igDatePicker", + "href": "controls/igeditors/igdatepicker/igdatepicker.mdx", + "order": 7, + "items": [ + { + "name": "igDatePicker の概要", + "href": "controls/igeditors/igdatepicker/overview.mdx", + "order": 0, + "slug": "igdatepicker-overview" + }, + { + "name": "igDatePicker のスタイルおよびテーマ設定", + "href": "controls/igeditors/igdatepicker/styling-and-theming.mdx", + "order": 1, + "slug": "igdatepicker-styling-and-theming" + }, + { + "name": "igDatePicker jQuery および MVC API リファレンス リンク", + "href": "controls/igeditors/igdatepicker/jquery-api.mdx", + "order": 2, + "slug": "igdatepicker-jquery-api" + }, + { + "name": "igDatePicker アクセシビリティの遵守", + "href": "controls/igeditors/igdatepicker/accessibility-compliance.mdx", + "order": 3, + "slug": "igdatepicker-accessibility-compliance" + }, + { + "name": "igDatePicker 既知の問題", + "href": "controls/igeditors/igdatepicker/known-issues.mdx", + "order": 4, + "slug": "igdatepicker-known-issues" + }, + { + "name": "新しい igDatePicker への移行", + "href": "controls/igeditors/igdatepicker/migrating-to-the-new-igdatepicker.mdx", + "order": 5, + "slug": "migrating-to-the-new-igdatepicker" + } + ], + "slug": "igdatepicker-igdatepicker" + }, + { + "name": "igTimePicker", + "href": "controls/igeditors/igtimepicker/igtimepicker.mdx", + "order": 8, + "items": [ + { + "name": "igTimePicker の概要", + "href": "controls/igeditors/igtimepicker/overview.mdx", + "order": 0, + "slug": "igtimepicker-overview" + }, + { + "name": "igTimePicker のスタイルおよびテーマ設定", + "href": "controls/igeditors/igtimepicker/styling-and-theming.mdx", + "order": 1, + "slug": "igtimepicker-styling-and-theming" + }, + { + "name": "igTimePicker アクセシビリティの遵守", + "href": "controls/igeditors/igtimepicker/accessibility-compliance.mdx", + "order": 2, + "slug": "igtimepicker-accessibility-compliance" + }, + { + "name": "igTimePicker 既知の問題", + "href": "controls/igeditors/igtimepicker/known-issues.mdx", + "order": 3, + "slug": "igtimepicker-known-issues" + }, + { + "name": "igTimePicker jQuery および MVC API リファレンス リンク", + "href": "controls/igeditors/igtimepicker/jquery-api.mdx", + "order": 4, + "slug": "igtimepicker-jquery-api" + } + ], + "slug": "igtimepicker-igtimepicker" + }, + { + "name": "エディターの構成", + "href": "controls/igeditors/config/editors-configure-editors.mdx", + "items": [ + { + "name": "ASP.NET MVC 検証の構成", + "href": "controls/igeditors/config/configuring-aspnet-mvc-validation.mdx", + "order": 0, + "slug": "configuring-asp.net-mvc-validation" + }, + { + "name": "ランタイム時の igEditors の構成", + "href": "controls/igeditors/config/configuring-igeditors-at-runtime.mdx", + "order": 1, + "slug": "configuring-igeditors-at-runtime" + }, + { + "name": "Knockout サポートの構成", + "href": "controls/igeditors/config/configuring-knockout-support-editors.mdx", + "order": 2, + "slug": "configuring-knockout-support-(editors)" + }, + { + "name": "エディターをローカライズする方法", + "href": "controls/igeditors/config/localizing-igeditors.mdx", + "order": 3, + "slug": "localizing-igeditors" + } + ], + "slug": "editors-configure-editors" + } + ], + "slug": "editors-landingpage" + }, + { + "name": "igFinancialChart", + "href": "controls/igfinancialchart/financial-chart-overview.mdx", + "items": [ + { + "name": "igFinancialChart を使用した作業の開始", + "href": "controls/igfinancialchart/financial-chart-gettingstarted.mdx", + "order": 0 + }, + { + "name": "データ バインド", + "href": "controls/igfinancialchart/bindingtodata/financial-chart-binding-to-data.mdx", + "order": 1, + "items": [ + { + "name": "単一のデータ ソースにバインド", + "href": "controls/igfinancialchart/bindingtodata/financial-chart-binding-to-single-data.mdx", + "order": 0 + }, + { + "name": "複数のデータ ソースへのバインド", + "href": "controls/igfinancialchart/bindingtodata/financial-chart-binding-to-multiple-data.mdx", + "order": 1 + }, + { + "name": "ライブ データへのバインド", + "href": "controls/igfinancialchart/bindingtodata/financial-chart-binding-to-live-data.mdx", + "order": 2 + } + ] + }, + { + "name": "チャート ナビゲーション", + "href": "controls/igfinancialchart/financial-chart-chart-navigation.mdx", + "order": 2 + }, + { + "name": "ツールバー", + "href": "controls/igfinancialchart/financial-chart-toolbar.mdx", + "order": 3 + }, + { + "name": "ツールチップ", + "href": "controls/igfinancialchart/financial-chart-tooltips.mdx", + "order": 4 + }, + { + "name": "チャート ペイン", + "href": "controls/igfinancialchart/chartpanes/financial-chart-chartpanes.mdx", + "order": 5, + "items": [ + { + "name": "インジケーター ペイン", + "href": "controls/igfinancialchart/chartpanes/financial-chart-pane-indicator.mdx", + "order": 0 + }, + { + "name": "カスタム インジケーター", + "href": "controls/igfinancialchart/chartpanes/financial-chart-custom-indicators.mdx", + "order": 1 + }, + { + "name": "ボリューム ペイン", + "href": "controls/igfinancialchart/chartpanes/financial-chart-pane-volume.mdx", + "order": 2 + }, + { + "name": "ズーム ペイン", + "href": "controls/igfinancialchart/chartpanes/financial-chart-pane-zoom.mdx", + "order": 3 + }, + { + "name": "価格ペイン", + "href": "controls/igfinancialchart/chartpanes/financial-chart-pane-price.mdx", + "order": 4 + } + ] + }, + { + "name": "注釈とインタラクション レイヤー", + "href": "controls/igfinancialchart/financial-chart-annotation-and-interaction-layers.mdx", + "order": 6 + }, + { + "name": "トレンドライン レイヤー", + "href": "controls/igfinancialchart/financial-chart-layer-trendline.mdx", + "order": 7 + }, + { + "name": "財務オーバーレイ", + "href": "controls/igfinancialchart/financial-chart-layer-overlays.mdx", + "order": 8 + }, + { + "name": "チャートのデータ ツールチップ", + "href": "controls/igfinancialchart/financial-chart-datatooltip.mdx", + "order": 9 + }, + { + "name": "軸の構成", + "href": "controls/igfinancialchart/configuringaxis/financial-chart-configuring-axis.mdx", + "order": 10, + "items": [ + { + "name": "軸間隔の構成", + "href": "controls/igfinancialchart/configuringaxis/financial-chart-configuring-axis-intervals.mdx", + "order": 0 + }, + { + "name": "軸ラベルの構成", + "href": "controls/igfinancialchart/configuringaxis/financial-chart-configuring-axis-labels.mdx", + "order": 1 + }, + { + "name": "軸モードの構成", + "href": "controls/igfinancialchart/configuringaxis/financial-chart-configuring-axis-modes.mdx", + "order": 2 + }, + { + "name": "軸範囲の構成", + "href": "controls/igfinancialchart/configuringaxis/financial-chart-configuring-axis-range.mdx", + "order": 3 + }, + { + "name": "軸スケールの構成", + "href": "controls/igfinancialchart/configuringaxis/financial-chart-configuring-axis-scale.mdx", + "order": 4 + }, + { + "name": "軸目盛", + "href": "controls/igfinancialchart/configuringaxis/financial-chart-configuring-axis-tickmarks.mdx", + "order": 5 + }, + { + "name": "軸タイトルの構成", + "href": "controls/igfinancialchart/configuringaxis/financial-chart-configuring-axis-titles.mdx", + "order": 6 + }, + { + "name": "軸スケールブレークの設定", + "href": "controls/igfinancialchart/configuringaxis/financial-chart-configuring-axis-scale-breaks.mdx", + "order": 7 + } + ] + }, + { + "name": "凡例", + "href": "controls/igfinancialchart/financial-chart-legend.mdx", + "order": 11 + }, + { + "name": "データ凡例", + "href": "controls/igfinancialchart/financial-chart-datalegend.mdx", + "order": 12 + }, + { + "name": "API 概要", + "href": "controls/igfinancialchart/financial-chart-known-limitations.mdx", + "order": 13 + }, + { + "name": "既知の問題と制限", + "href": "controls/igfinancialchart/financial-chart-api-overview.mdx", + "order": 14, + "slug": "igfinancial-chart-known-limitations" + } + ] + }, + { + "name": "igFunnelChart", + "href": "controls/igfunnelchart/igfunnelchart.mdx", + "items": [ + { + "name": "igFunnelChart の概要", + "href": "controls/igfunnelchart/overview.mdx", + "order": 0, + "slug": "igfunnelchart-overview" + }, + { + "name": "igFunnelChart の追加", + "href": "controls/igfunnelchart/adding.mdx", + "order": 1, + "slug": "igfunnelchart-adding" + }, + { + "name": "igFunnelChart のデータへのバインディング", + "href": "controls/igfunnelchart/binding-to-data.mdx", + "order": 2, + "slug": "igfunnelchart-binding-to-data" + }, + { + "name": "igFunnelChart の構成", + "href": "controls/igfunnelchart/configuring.mdx", + "order": 3, + "slug": "igfunnelchart-configuring" + }, + { + "name": "igFunnelChart のスタイル設定", + "href": "controls/igfunnelchart/styling.mdx", + "order": 4, + "slug": "igfunnelchart-styling" + }, + { + "name": "アクセシビリティ準拠", + "href": "controls/igfunnelchart/accessibility-compliance.mdx", + "order": 5, + "slug": "igfunnelchart-accessibility-compliance" + }, + { + "name": "既知の問題と制限", + "href": "controls/igfunnelchart/known-issues-and-limitations.mdx", + "order": 6, + "slug": "igfunnelchart-known-issues-and-limitations" + }, + { + "name": "jQuery と MVC API リンク", + "href": "controls/igfunnelchart/jquery-and-aspnet-mvc-helper-api-links.mdx", + "order": 7, + "slug": "igfunnelchart-jquery-and-asp.net-mvc-helper-api--links" + } + ], + "slug": "igfunnelchart-igfunnelchart" + }, + { + "name": "igGrid", + "href": "controls/iggrid/iggrid.mdx", + "items": [ + { + "name": "igGrid の概要", + "href": "controls/iggrid/overview.mdx", + "order": 0, + "slug": "iggrid-overview" + }, + { + "name": "igGrid/igDataSource アーキテクチャの概要", + "href": "controls/iggrid/igdatasource-architecture-overview.mdx", + "order": 1, + "slug": "iggrid-igdatasource-architecture-overview" + }, + { + "name": "igGrid をデータにバインディング", + "href": "controls/iggrid/binding/binding-to-data.mdx", + "order": 2, + "items": [ + { + "name": "igGrid、oData、WCF データサービスを使用した作業の開始", + "href": "controls/iggrid/binding/getting-started-with-iggrid-odata-and-wcf-data-services.mdx", + "order": 0, + "slug": "iggrid-getting-started-with-iggrid-odata-and-wcf-data-services" + }, + { + "name": "igGrid を DataTable にバインディング", + "href": "controls/iggrid/binding/binding-to-datatable.mdx", + "order": 1, + "slug": "iggrid-binding-to-datatable" + }, + { + "name": "igGrid を OData サービスにバインディング", + "href": "controls/iggrid/binding/binding-to-web-services.mdx", + "order": 2, + "slug": "iggrid-binding-to-web-services" + }, + { + "name": "igGrid の XML へのバインド", + "href": "controls/iggrid/binding/binding-iggrid-to-xml.mdx", + "order": 3, + "slug": "iggrid-binding-iggrid-to-xml" + }, + { + "name": "ASP.NET MVC WebAPI へのバインド", + "href": "controls/iggrid/binding/binding-to-webapi.mdx", + "order": 4, + "slug": "iggrid-binding-to-webapi" + }, + { + "name": "クライアント側のデータ バインディング", + "href": "controls/iggrid/binding/client-side/client-side-binding.mdx", + "items": [ + { + "name": "igGrid を HTML テーブル データにバインディング", + "href": "controls/iggrid/binding/client-side/binding-to-html-table-data.mdx", + "order": 0, + "slug": "iggrid-binding-to-html-table-data" + }, + { + "name": "igGrid を JavaScript 配列および JSON 配列にバインディング", + "href": "controls/iggrid/binding/client-side/binding-to-javascript-array-and-json-array.mdx", + "order": 1, + "slug": "iggrid-binding-to-javascript-array-and-json-array" + } + ], + "slug": "iggrid-client-side-binding" + } + ], + "slug": "iggrid-binding-to-data" + }, + { + "name": "igGrid の機能", + "href": "controls/iggrid/features/features-landing-page.mdx", + "order": 3, + "items": [ + { + "name": "列管理機能", + "href": "controls/iggrid/features/columns/columnmanagementfeatures-landingpage.mdx", + "order": 0, + "items": [ + { + "name": "列の固定化", + "href": "controls/iggrid/features/columns/fixing/columnfixing-landingpage.mdx", + "order": 0, + "items": [ + { + "name": "列固定の概要", + "href": "controls/iggrid/features/columns/fixing/columnfixing-overview.mdx", + "order": 0, + "slug": "iggrid-columnfixing-overview" + }, + { + "name": "列固定の有効化", + "href": "controls/iggrid/features/columns/fixing/columnfixing-enabling.mdx", + "order": 1, + "slug": "iggrid-columnfixing-enabling" + }, + { + "name": "列固定の構成", + "href": "controls/iggrid/features/columns/fixing/columnfixing-configuring.mdx", + "order": 2, + "slug": "iggrid-columnfixing-configuring" + }, + { + "name": "メソッドの参照", + "href": "controls/iggrid/features/columns/fixing/columnfixing-method-reference.mdx", + "order": 3, + "slug": "iggrid-columnfixing-method-reference" + } + ], + "slug": "iggrid-columnfixing-landingpage" + }, + { + "name": "列のグループ化", + "href": "controls/iggrid/features/columns/grouping/groupby.mdx", + "order": 1, + "items": [ + { + "name": "列のグループ化の概要", + "href": "controls/iggrid/features/columns/grouping/groupby-overview.mdx", + "order": 0, + "slug": "iggrid-groupby-overview" + }, + { + "name": "列のグループ化の有効化", + "href": "controls/iggrid/features/columns/grouping/enabling-groupby.mdx", + "order": 1, + "slug": "iggrid-enabling-groupby" + }, + { + "name": "グループ化ダイアログの概要", + "href": "controls/iggrid/features/columns/grouping/group-by-dialog-overview.mdx", + "order": 2, + "slug": "iggrid-group-by-dialog-overview" + }, + { + "name": "グループ化集計の機能概要", + "href": "controls/iggrid/features/columns/grouping/groupby-summaries.mdx", + "order": 3, + "slug": "iggrid-groupby-summaries" + } + ], + "slug": "iggrid-groupby" + }, + { + "name": "列の非表示", + "href": "controls/iggrid/features/columns/hiding/column-hiding.mdx", + "order": 2, + "items": [ + { + "name": "列の非表示の有効化", + "href": "controls/iggrid/features/columns/hiding/column-hiding-enabling-column-hiding.mdx", + "order": 0, + "slug": "iggrid-column-hiding-enabling-column-hiding" + }, + { + "name": "列の非表示グリッド イベント", + "href": "controls/iggrid/features/columns/hiding/column-hiding-grid-events.mdx", + "order": 1, + "slug": "iggrid-column-hiding-grid-events" + }, + { + "name": "列の非表示の構成", + "href": "controls/iggrid/features/columns/hiding/configure-column-hiding.mdx", + "order": 2, + "slug": "iggrid-configure-column-hiding" + }, + { + "name": "列チューザーの構成", + "href": "controls/iggrid/features/columns/hiding/hiding-column-chooser.mdx", + "order": 3, + "slug": "iggrid-hiding-column-chooser" + } + ], + "slug": "iggrid-column-hiding" + }, + { + "name": "列移動", + "href": "controls/iggrid/features/columns/moving/columnmoving-landingpage.mdx", + "order": 3, + "items": [ + { + "name": "列移動の概要", + "href": "controls/iggrid/features/columns/moving/columnmoving-overview.mdx", + "order": 0, + "slug": "iggrid-columnmoving-overview" + }, + { + "name": "列移動の有効化", + "href": "controls/iggrid/features/columns/moving/columnmoving-enabling.mdx", + "order": 1, + "slug": "iggrid-columnmoving-enabling" + }, + { + "name": "列移動の構成", + "href": "controls/iggrid/features/columns/moving/columnmoving-configuring.mdx", + "order": 2, + "slug": "iggrid-columnmoving-configuring" + }, + { + "name": "コードによる列の移動", + "href": "controls/iggrid/features/columns/moving/columnmoving-movingcolumnsprogrammatically.mdx", + "order": 3, + "slug": "iggrid-columnmoving-movingcolumnsprogrammatically" + }, + { + "name": "プロパティ参照", + "href": "controls/iggrid/features/columns/moving/columnmoving-propertyreference.mdx", + "order": 4, + "slug": "iggrid-columnmoving-propertyreference" + } + ], + "slug": "iggrid-columnmoving-landingpage" + }, + { + "name": "列のサイズ変更", + "href": "controls/iggrid/features/columns/column-resizing.mdx", + "order": 4, + "slug": "iggrid-column-resizing" + }, + { + "name": "列集計", + "href": "controls/iggrid/features/columns/summaries/column-summaries.mdx", + "order": 5, + "items": [ + { + "name": "列集計の有効化", + "href": "controls/iggrid/features/columns/summaries/enabling-column-summaries.mdx", + "order": 0, + "slug": "iggrid-enabling--column-summaries" + }, + { + "name": "列集計の構成", + "href": "controls/iggrid/features/columns/summaries/configuring-column-summaries.mdx", + "order": 1, + "slug": "iggrid-configuring-column-summaries" + }, + { + "name": "列集計イベント", + "href": "controls/iggrid/features/columns/summaries/column-summaries-events.mdx", + "order": 2, + "slug": "iggrid-column-summaries-events" + } + ], + "slug": "iggrid-column-summaries" + }, + { + "name": "列テンプレート", + "href": "controls/iggrid/features/columns/template/column-template.mdx", + "order": 6, + "items": [ + { + "name": "基本的な列テンプレートの作成", + "href": "controls/iggrid/features/columns/template/creating-a-basic-column-template-in-the-iggrid.mdx", + "order": 0, + "slug": "creating-a-basic-column-template-in-the-iggrid" + } + ], + "slug": "iggrid-column-template" + }, + { + "name": "フィルタリング", + "href": "controls/iggrid/features/columns/filtering.mdx", + "order": 7, + "slug": "iggrid-filtering" + }, + { + "name": "複数列ヘッダー", + "href": "controls/iggrid/features/columns/multi-headers/multicolumnheaders-landingpage.mdx", + "order": 8, + "items": [ + { + "name": "複数列ヘッダーの概要", + "href": "controls/iggrid/features/columns/multi-headers/multicolumnheaders-multicolumnheaders.mdx", + "order": 0, + "slug": "iggrid-multicolumnheaders-multicolumnheaders" + }, + { + "name": "複数列ヘッダーの構成", + "href": "controls/iggrid/features/columns/multi-headers/multicolumnheaders-configuring.mdx", + "order": 1, + "slug": "iggrid-multicolumnheaders-configuring" + } + ], + "slug": "iggrid-multicolumnheaders-landingpage" + }, + { + "name": "並べ替え", + "href": "controls/iggrid/features/columns/sorting/sorting.mdx", + "order": 9, + "items": [ + { + "name": "並べ替えの概要", + "href": "controls/iggrid/features/columns/sorting/sorting-overview.mdx", + "order": 0, + "slug": "iggrid-sorting-overview" + }, + { + "name": "複数並べ替えダイアログ", + "href": "controls/iggrid/features/columns/sorting/multiple-sorting-dialog.mdx", + "order": 1, + "slug": "iggrid-multiple-sorting-dialog" + } + ], + "slug": "iggrid-sorting" + }, + { + "name": "非バインド列", + "href": "controls/iggrid/features/columns/unbound/unboundcolumns-landing-page.mdx", + "order": 10, + "items": [ + { + "name": "非バインド列の概要", + "href": "controls/iggrid/features/columns/unbound/unboundcolumns-overview.mdx", + "order": 1, + "slug": "iggrid-unboundcolumns-overview" + }, + { + "name": "列を非バインドとして設定", + "href": "controls/iggrid/features/columns/unbound/unboundcolumns-setting-column-as-unbound.mdx", + "order": 2, + "slug": "iggrid-unboundcolumns-setting-column-as-unbound" + }, + { + "name": "非バインド列での作業", + "href": "controls/iggrid/features/columns/unbound/working/unboundcolumns-working-with-landingpage.mdx", + "order": 3, + "items": [ + { + "name": "非バインド列へデータを生成", + "href": "controls/iggrid/features/columns/unbound/working/populate/unboundcolumns-populating-with-data-landingpage.mdx", + "order": 0, + "items": [ + { + "name": "非バインド列の生成の概要", + "href": "controls/iggrid/features/columns/unbound/working/populate/unboundcolumns-populating-with-data-overview.mdx", + "order": 0, + "slug": "iggrid-unboundcolumns-populating-with-data-overview" + }, + { + "name": "非バインド列をローカルに生成", + "href": "controls/iggrid/features/columns/unbound/working/populate/unboundcolumns-populating-with-data-locally.mdx", + "order": 1, + "slug": "iggrid-unboundcolumns-populating-with-data-locally" + }, + { + "name": "非バインド列をリモートに生成", + "href": "controls/iggrid/features/columns/unbound/working/populate/unboundcolumns-populating-with-data-remotely.mdx", + "slug": "iggrid-unboundcolumns-populating-with-data-remotely" + } + ], + "slug": "iggrid-unboundcolumns-populating-with-data-landingpage" + }, + { + "name": "計算値の描画", + "href": "controls/iggrid/features/columns/unbound/working/unboundcolumns-rendering-calculated-values.mdx", + "order": 1, + "slug": "iggrid-unboundcolumns-rendering-calculated-values" + }, + { + "name": "パフォーマンスの最適化", + "href": "controls/iggrid/features/columns/unbound/working/unboundcolumns-optimize-performance.mdx", + "order": 2, + "slug": "iggrid-unboundcolumns-optimize-performance" + } + ], + "slug": "iggrid-unboundcolumns-working-with-landingpage" + }, + { + "name": "既知の問題と制限", + "href": "controls/iggrid/features/columns/unbound/unboundcolumns-known-issues.mdx", + "order": 4, + "slug": "iggrid-unboundcolumns-known-issues" + }, + { + "name": "API リファレンス", + "href": "controls/iggrid/features/columns/unbound/api/unboundcolumns-api-reference-landingpage.mdx", + "order": 5, + "items": [ + { + "name": "メソッド リファレンス", + "href": "controls/iggrid/features/columns/unbound/api/unboundcolumns-method-reference.mdx", + "slug": "iggrid-unboundcolumns-method-reference" + }, + { + "name": "プロパティ リファレンス", + "href": "controls/iggrid/features/columns/unbound/api/unboundcolumns-property-reference.mdx", + "slug": "iggrid-unboundcolumns-property-reference" + } + ], + "slug": "iggrid-unboundcolumns-api-reference-landingpage" + } + ], + "slug": "iggrid-unboundcolumns-landing-page" + } + ], + "slug": "iggrid-columnmanagementfeatures-landingpage" + }, + { + "name": "機能セレクター", + "href": "controls/iggrid/features/feature-chooser.mdx", + "order": 1, + "slug": "iggrid-feature-chooser" + }, + { + "name": "行セレクター", + "href": "controls/iggrid/features/row-selectors/row-selectors.mdx", + "order": 2, + "items": [ + { + "name": "行セレクターの有効化", + "href": "controls/iggrid/features/row-selectors/enabling-row-selectors.mdx", + "order": 0, + "slug": "iggrid-enabling-row-selectors" + }, + { + "name": "行セレクターの構成", + "href": "controls/iggrid/features/row-selectors/configuring-row-selectors.mdx", + "order": 1, + "slug": "iggrid-configuring-row-selectors" + }, + { + "name": "行セレクター イベント", + "href": "controls/iggrid/features/row-selectors/rowselectors-events.mdx", + "order": 2, + "slug": "iggrid-rowselectors-events" + } + ], + "slug": "iggrid-row-selectors" + }, + { + "name": "選択", + "href": "controls/iggrid/features/selection/selection.mdx", + "order": 3, + "items": [ + { + "name": "選択の概要", + "href": "controls/iggrid/features/selection/selection-overview.mdx", + "order": 0, + "slug": "iggrid-selection-overview" + }, + { + "name": "セルの複数選択概要", + "href": "controls/iggrid/features/selection/multiple-cell-selection.mdx", + "order": 1, + "slug": "iggrid-multiple-cell-selection" + } + ], + "slug": "iggrid-selection" + }, + { + "name": "ツールチップ", + "href": "controls/iggrid/features/tooltips/tooltips.mdx", + "order": 4, + "items": [ + { + "name": "ツールチップの概要", + "href": "controls/iggrid/features/tooltips/tooltips-overview.mdx", + "order": 0, + "slug": "iggrid-tooltips-overview" + }, + { + "name": "ツールチップの有効化", + "href": "controls/iggrid/features/tooltips/enabling-tooltips.mdx", + "order": 1, + "slug": "iggrid-enabling-tooltips" + }, + { + "name": "ツールチップの構成", + "href": "controls/iggrid/features/tooltips/using-tooltips.mdx", + "order": 2, + "slug": "iggrid-using-tooltips" + }, + { + "name": "グリッド ツールチップのスタイル設定", + "href": "controls/iggrid/features/tooltips/popover-style-for-tooltips.mdx", + "order": 4, + "slug": "iggrid-popover-style-for-tooltips" + } + ], + "slug": "igGrid_Tooltips" + }, + { + "name": "更新", + "href": "controls/iggrid/features/updating/updating-landingpage.mdx", + "order": 5, + "items": [ + { + "name": "更新の概要", + "href": "controls/iggrid/features/updating/updating.mdx", + "order": 0, + "slug": "iggrid-updating" + }, + { + "name": "新しい更新への移行", + "href": "controls/iggrid/features/updating/updating-migrating-to-the-new-updating.mdx", + "order": 1, + "slug": "iggrid-updating-migrating-to-the-new-updating" + }, + { + "name": "igCombo エディター プロバイダーの操作", + "href": "controls/iggrid/features/updating/working-with-combo-editor-provider.mdx", + "order": 2, + "slug": "working-with-combo-editor-provider" + }, + { + "name": "カスタム エディター プロバイダーの実装", + "href": "controls/iggrid/features/updating/implementing-custom-editor-provider.mdx", + "order": 3, + "slug": "implementing-custom-editor-provider" + }, + { + "name": "igGrid で Excel からの貼り付けを実装する", + "href": "controls/iggrid/features/updating/implementing-paste-from-excel.mdx", + "order": 4, + "slug": "implementing-paste-from-excel" + }, + { + "name": "行編集ダイアログ", + "href": "controls/iggrid/features/updating/row-template/updating-roweditdialog-landingpage.mdx", + "items": [ + { + "name": "行編集ダイアログの概要", + "href": "controls/iggrid/features/updating/row-template/updating-roweditdialog.mdx", + "order": 0, + "slug": "iggrid-updating-roweditdialog" + }, + { + "name": "行編集ダイアログの構成", + "href": "controls/iggrid/features/updating/row-template/updating-roweditdialog-configuring.mdx", + "order": 1, + "slug": "iggrid-updating-dialog-configuring" + } + ], + "slug": "iggrid-updating-roweditdialog-landingpage" + } + ], + "slug": "iggrid-updating-landingpage" + }, + { + "name": "ページング", + "href": "controls/iggrid/features/paging.mdx", + "order": 6, + "slug": "iggrid-paging" + }, + { + "name": "セル結合", + "href": "controls/iggrid/features/cell-merging/cellmerging-landingpage.mdx", + "order": 7, + "items": [ + { + "name": "セル結合の概要", + "href": "controls/iggrid/features/cell-merging/cellmerging-overview.mdx", + "order": 0, + "slug": "iggrid-cellmerging-overview" + }, + { + "name": "セル結合の高度なカスタマイズ", + "href": "controls/iggrid/features/cell-merging/cellmerging-advanced.mdx", + "order": 1, + "slug": "iggrid-cellmerging-advanced" + } + ], + "slug": "iggrid-cellmerging-landingpage" + }, + { + "name": "レスポンス Web デザイン モード", + "href": "controls/iggrid/features/responsive/responsive-web-design-mode-landingpage.mdx", + "order": 8, + "items": [ + { + "name": "レスポンス Web デザイン モードの概要", + "href": "controls/iggrid/features/responsive/responsive-web-design-mode-overview.mdx", + "order": 0, + "slug": "iggrid-responsive-web-design-mode-overview" + }, + { + "name": "レスポンス Web デザイン モード構成を有効にする", + "href": "controls/iggrid/features/responsive/enabling-responsive-web-design-mode.mdx", + "order": 1, + "slug": "iggrid-enabling-responsive-web-design-mode" + }, + { + "name": "レスポンス Web デザイン モードの構成", + "href": "controls/iggrid/features/responsive/configure/configuring-responsive-web-design-mode-landingpage.mdx", + "order": 2, + "items": [ + { + "name": "レスポンス Web デザイン モード構成の概要", + "href": "controls/iggrid/features/responsive/configure/configuring-responsive-web-design-mode-overview.mdx", + "order": 0, + "slug": "iggrid-configuring-responsive-web-design-mode-overview" + }, + { + "name": "列非表示の構成", + "href": "controls/iggrid/features/responsive/configure/responsive-web-design-mode-configuring-column-hiding.mdx", + "order": 1, + "slug": "iggrid-responsive-web-design-mode-configuring-column-hiding" + }, + { + "name": "列テンプレートの構成", + "href": "controls/iggrid/features/responsive/configure/responsive-web-design-mode-configuring-row-and-column-templates.mdx", + "order": 2, + "slug": "iggrid-responsive-web-design-mode-configuring-row-and-column-templates" + }, + { + "name": "カスタム レスポンス Web デザイン プロファイルの作成", + "href": "controls/iggrid/features/responsive/configure/responsive-web-design-mode-creating-custom-profile.mdx", + "order": 3, + "slug": "iggrid-responsive-web-design-mode-creating-custom-profile" + }, + { + "name": "ブートストラップ サポートの構成", + "href": "controls/iggrid/features/responsive/configure/responsive-web-design-mode-configuring-bootstrap-support.mdx", + "order": 4, + "slug": "iggrid-responsive-web-design-mode-configuring-bootstrap-support" + }, + { + "name": "垂直列レンダリングの構成", + "href": "controls/iggrid/features/responsive/configure/responsive-web-design-mode-configuring-vertical-column-rendering.mdx", + "order": 5, + "slug": "iggrid-responsive-web-design-mode-configuring-vertical-column-rendering" + }, + { + "name": "単一列テンプレートの構成", + "href": "controls/iggrid/features/responsive/configure/responsive-web-design-mode-configuring-single-column-template.mdx", + "order": 6, + "slug": "iggrid-responsive-web-design-mode-configuring-single-column-template" + } + ], + "slug": "iggrid-configuring-responsive-web-design-mode-landingpage" + } + ], + "slug": "iggrid-responsive-web-design-mode-landingpage" + }, + { + "name": "jsRender の統合", + "href": "controls/iggrid/features/jsrender-integration.mdx", + "order": 9, + "slug": "iggrid-jsrender-integration" + }, + { + "name": "REST の更新", + "href": "controls/iggrid/features/rest-updating.mdx", + "order": 10, + "slug": "iggrid-rest-updating" + }, + { + "name": "Knockout サポートの構成", + "href": "controls/iggrid/features/configuring-knockout-support.mdx", + "order": 11, + "slug": "iggrid-configuring-knockout-support" + }, + { + "name": "列とレイアウト", + "href": "controls/iggrid/features/columns-and-layout.mdx", + "order": 12, + "slug": "iggrid-columns-and-layout" + }, + { + "name": "仮想化", + "href": "controls/iggrid/features/virtualization/virtualization.mdx", + "order": 13, + "items": [ + { + "name": "仮想化概要", + "href": "controls/iggrid/features/virtualization/virtualization-overview.mdx", + "order": 0, + "slug": "iggrid-virtualization-overview" + }, + { + "name": "仮想化の有効化と構成", + "href": "controls/iggrid/features/virtualization/enabling-and-configuring-virtualization.mdx", + "order": 1, + "slug": "iggrid-enabling-and-configuring-virtualization" + } + ], + "slug": "iggrid-virtualization" + }, + { + "name": "機能互換性マトリックス", + "href": "controls/iggrid/features/feature-compatibility-matrixiggrid.mdx", + "order": 14, + "slug": "feature-compatibility-matrix(iggrid)" + }, + { + "name": "グリッドの複数行レイアウト", + "href": "controls/iggrid/features/multirowlayout.mdx", + "order": 16, + "slug": "iggrid-multirowlayout" + }, + { + "name": "igGrid モーダル ダイアログの拡張", + "href": "controls/iggrid/features/extending-iggrid-modal-dialog.mdx", + "order": 17, + "slug": "extending-iggrid-modal-dialog" + }, + { + "name": "リモート機能を手動的に処理", + "href": "controls/iggrid/features/handling-remote-features-manually.mdx", + "order": 18, + "slug": "handling-remote-features-manually" + } + ], + "slug": "iggrid-features-landing-page" + }, + { + "name": "igGrid を使用する ASP.NET MVC アプリケーションの開発", + "href": "controls/iggrid/developing-asp-net-mvc-applications-with-iggrid.mdx", + "order": 4, + "slug": "iggrid-developing-asp-net-mvc-applications-with-iggrid" + }, + { + "name": "Grid Excel エクスポーターの概要", + "href": "controls/iggrid/iggridexcelexporter-overview.mdx", + "order": 5, + "slug": "iggridexcelexporter-overview" + }, + { + "name": "パフォーマンス ガイド", + "href": "controls/iggrid/performance-guide.mdx", + "order": 6, + "slug": "iggrid-performance-guide" + }, + { + "name": "igGrid のスタイル設定", + "href": "controls/iggrid/styling-and-theming.mdx", + "order": 7, + "slug": "iggrid-styling-and-theming" + }, + { + "name": "アクセシビリティ準拠", + "href": "controls/iggrid/accessibility-compliance.mdx", + "order": 8, + "slug": "iggrid-accessibility-compliance" + }, + { + "name": "既知の問題と制限", + "href": "controls/iggrid/known-issues.mdx", + "order": 9, + "slug": "iggrid-known-issues" + }, + { + "name": "jQuery と MVC API リンク", + "href": "controls/iggrid/jquery-api.mdx", + "order": 10, + "slug": "iggrid-jquery-api" + }, + { + "name": "igGridExcelExporter の構成", + "href": "controls/iggrid/iggridexcelexporter-configuring.mdx", + "order": 11, + "slug": "iggridexcelexporter-configuring" + }, + { + "name": "17.1 の enableUTCDates オプションの移行", + "href": "controls/iggrid/migrating-enableutcdates-option-in-17-1.mdx", + "order": 12, + "slug": "migrating-enableUTCDates-option-in-17-1" + } + ], + "slug": "iggrid" + }, + { + "name": "igHierarchicalGrid", + "href": "controls/ighierarchicalgrid/ighierarchicalgrid.mdx", + "items": [ + { + "name": "igHierarchicalGrid の概要", + "href": "controls/ighierarchicalgrid/overview.mdx", + "order": 0, + "slug": "ighierarchicalgrid-overview" + }, + { + "name": "igHierarchicalGrid の初期化", + "href": "controls/ighierarchicalgrid/initializing.mdx", + "order": 1, + "slug": "ighierarchicalgrid-initializing" + }, + { + "name": "igHierarchicalGrid のデータへのバインディング", + "href": "controls/ighierarchicalgrid/bind/binding-to-rest-services-landingpage.mdx", + "order": 2, + "items": [ + { + "name": "igHierarchicalGrid を DataSet にバインド", + "href": "controls/ighierarchicalgrid/bind/binding-to-dataset.mdx", + "slug": "ighierarchicalgrid-binding-to-dataset" + }, + { + "name": "igHierarchicalGrid をローカル データにバインド", + "href": "controls/ighierarchicalgrid/bind/binding-to-local-data.mdx", + "slug": "ighierarchicalgrid-binding-to-local-data" + }, + { + "name": "igHierarchicalGrid を REST サービスへバインド", + "href": "controls/ighierarchicalgrid/bind/binding-to-rest-services.mdx", + "slug": "ighierarchicalgrid-binding-to-rest-services" + }, + { + "name": "ASP.NET MVC WebAPI へのバインド", + "href": "controls/ighierarchicalgrid/bind/binding-to-webapi.mdx", + "slug": "ighierarchicalgrid-binding-to-webapi" + } + ], + "slug": "ighierarchicalgrid-binding-to-rest-services-landingpage" + }, + { + "name": "igHierarchicalGrid 機能", + "href": "controls/ighierarchicalgrid/features/features-landingpage.mdx", + "order": 3, + "items": [ + { + "name": "列とレイアウト", + "href": "controls/ighierarchicalgrid/features/columns-and-layouts.mdx", + "order": 0, + "slug": "ighierarchicalgrid-columns-and-layouts" + }, + { + "name": "列テンプレート", + "href": "controls/ighierarchicalgrid/features/column-template/column-template.mdx", + "order": 1, + "items": [ + { + "name": "igHierarchicalGrid での基本的な列テンプレートの作成", + "href": "controls/ighierarchicalgrid/features/column-template/creating-a-basic-column-template-in-ighierarchicalgrid.mdx", + "slug": "creating-a-basic-column-template-in-ighierarchicalgrid" + } + ], + "slug": "ighierarchicalgrid-column-template" + }, + { + "name": "機能の継承", + "href": "controls/ighierarchicalgrid/features/feature-inheritance.mdx", + "order": 2, + "slug": "ighierarchicalgrid-feature-inheritance" + }, + { + "name": "グループ化", + "href": "controls/ighierarchicalgrid/features/grouping/grouping-landingpage.mdx", + "order": 3, + "items": [ + { + "name": "グループ化の概要", + "href": "controls/ighierarchicalgrid/features/grouping/grouping-overview.mdx", + "order": 0, + "slug": "ighierarchicalgrid-grouping-overview" + }, + { + "name": "仮想化の有効化と設定", + "href": "controls/ighierarchicalgrid/features/grouping/grouping-enabling-and-configuring.mdx", + "order": 1, + "slug": "ighierarchicalgrid-grouping-enabling-and-configuring" + }, + { + "name": "カスタム グループ化の構成", + "href": "controls/ighierarchicalgrid/features/grouping/grouping-custom.mdx", + "order": 2, + "slug": "ighierarchicalgrid-grouping-custom" + }, + { + "name": "集計を使用したグループ化", + "href": "controls/ighierarchicalgrid/features/grouping/grouping-with-summaries.mdx", + "order": 3, + "slug": "ighierarchicalgrid-grouping-with-summaries" + } + ], + "slug": "ighierarchicalgrid-grouping-landingpage" + }, + { + "name": "複数列ヘッダーの構成", + "href": "controls/ighierarchicalgrid/features/multicolumnheaders-configuring.mdx", + "order": 4, + "slug": "ighierarchicalgrid-multicolumnheaders-configuring" + }, + { + "name": "ロードオンデマンド", + "href": "controls/ighierarchicalgrid/features/load-on-demand.mdx", + "order": 5, + "slug": "ighierarchicalgrid-load-on-demand" + }, + { + "name": "行セレクター", + "href": "controls/ighierarchicalgrid/features/row-selectors/row-selectors-landingpage.mdx", + "order": 6, + "items": [ + { + "name": "行セレクターの有効化", + "href": "controls/ighierarchicalgrid/features/row-selectors/enabling-rowselectors.mdx", + "order": 0, + "slug": "ighierarchicalgrid-enabling-rowselectors" + }, + { + "name": "行セレクターの構成", + "href": "controls/ighierarchicalgrid/features/row-selectors/configuring-rowselectors.mdx", + "order": 1, + "slug": "ighierarchicalgrid-configuring-rowselectors" + }, + { + "name": "イベントのリファレンス", + "href": "controls/ighierarchicalgrid/features/row-selectors/rowselectors-events.mdx", + "order": 2, + "slug": "ighierarchicalgrid-rowselectors-events" + } + ], + "slug": "ighierarchicalgrid-row-selectors-landingpage" + }, + { + "name": "選択", + "href": "controls/ighierarchicalgrid/features/selection/jquery-ighierarchical-grid-selection-landing-page.mdx", + "order": 7, + "items": [ + { + "name": "選択の概要", + "href": "controls/ighierarchicalgrid/features/selection/jquery-ighierarchical-grid-selection-overview.mdx", + "order": 0, + "slug": "jquery-ighierarchical-grid-selection-overview" + }, + { + "name": "選択の有効化", + "href": "controls/ighierarchicalgrid/features/selection/jquery-ighierarchical-grid-features-selection-enabling-ighierarchical-grid-selection.mdx", + "order": 1, + "slug": "jquery-ighierarchical-grid-features-selection-enabling-ighierarchical-grid-selection" + }, + { + "name": "行とセルのプログラムによる選択および選択解除", + "href": "controls/ighierarchicalgrid/features/selection/jquery-ighierarchical-grid-selecting-and-deselecting-rows-and-cell-programmatically-in-ighierarchicalgrid.mdx", + "slug": "jquery-ighierarchical-grid-selecting-and-deselecting-rows-and-cell-programmatically-in-ighierarchicalgrid" + } + ], + "slug": "jquery-ighierarchical-grid-selection-landing-page" + }, + { + "name": "仮想化", + "href": "controls/ighierarchicalgrid/features/virtualization/virtualization.mdx", + "order": 8, + "items": [ + { + "name": "仮想化の概要", + "href": "controls/ighierarchicalgrid/features/virtualization/virtualization-overview.mdx", + "order": 0, + "slug": "ighierarchicalgrid-virtualization-overview" + }, + { + "name": "仮想化の有効化と構成", + "href": "controls/ighierarchicalgrid/features/virtualization/enabling-and-configuring-virtualization.mdx", + "order": 1, + "slug": "ighierarchicalgrid-enabling-and-configuring-virtualization" + } + ], + "slug": "ighierarchicalgrid-virtualization" + } + ], + "slug": "ighierarchicalgrid-features-landingpage" + }, + { + "name": "行のプログラムによる展開と縮小", + "href": "controls/ighierarchicalgrid/jquery-ighierarchical-grid-expanding-and-collapsing-rows-programmatically-in-ighierarchicalgrid.mdx", + "order": 4, + "slug": "jquery-ighierarchical-grid-expanding-and-collapsing-rows-programmatically-in-ighierarchicalgrid" + }, + { + "name": "igHierarchicalGrid のスタイル設定", + "href": "controls/ighierarchicalgrid/styling-and-theming.mdx", + "order": 5, + "slug": "ighierarchicalgrid-styling-and-theming" + }, + { + "name": "アクセシビリティ準拠", + "href": "controls/ighierarchicalgrid/accessibility-compliance.mdx", + "order": 6, + "slug": "ighierarchicalgrid-accessibility-compliance" + }, + { + "name": "既知の問題と制限", + "href": "controls/ighierarchicalgrid/known-issues.mdx", + "order": 7, + "slug": "ighierarchicalgrid-known-issues" + }, + { + "name": "イベント リファレンス", + "href": "controls/ighierarchicalgrid/events-api.mdx", + "order": 8, + "slug": "ighierarchicalgrid-events-api" + }, + { + "name": "Knockout サポートの構成", + "href": "controls/ighierarchicalgrid/configuring-knockout-support.mdx", + "order": 9, + "slug": "ighierarchicalgrid-configuring-knockout-support" + } + ], + "slug": "ighierarchicalgrid-ighierarchicalgrid" + }, + { + "name": "igHtmlEditor", + "href": "controls/ightmleditor/ightmleditor.mdx", + "items": [ + { + "name": "igHtmlEditor の概要", + "href": "controls/ightmleditor/overview.mdx", + "order": 0, + "slug": "ightmleditor-overview" + }, + { + "name": "igHtmlEditor の追加", + "href": "controls/ightmleditor/adding-ightmleditor.mdx", + "order": 1, + "slug": "ightmleditor-adding-ightmleditor" + }, + { + "name": "igHtmlEditor の操作", + "href": "controls/ightmleditor/working/working-with-ightmleditor.mdx", + "order": 2, + "items": [ + { + "name": "ツールバーとボタンの構成", + "href": "controls/ightmleditor/working/configuring-toolbars-and-buttons.mdx", + "order": 0, + "slug": "ightmleditor-configuring-toolbars-and-buttons" + }, + { + "name": "HTML コンテンツをコードで保存", + "href": "controls/ightmleditor/working/saving-html-content.mdx", + "order": 1, + "slug": "ightmleditor-saving-html-content" + }, + { + "name": "プログラムによるコンテンツの変更", + "href": "controls/ightmleditor/working/modifying-contents-programmatically.mdx", + "order": 2, + "slug": "ightmleditor-modifying-contents-programmatically" + }, + { + "name": "AngularJS サポート", + "href": "controls/ightmleditor/working/angularjs-support.mdx", + "order": 3, + "slug": "ightmleditor-angularjs-support" + }, + { + "name": "TypeScript サポート", + "href": "controls/ightmleditor/working/typescript-support.mdx", + "order": 4, + "slug": "ightmleditor-typescript-support" + } + ], + "slug": "ightmleditor-working-with-ightmleditor" + }, + { + "name": "カスタム ツールバー", + "href": "controls/ightmleditor/custom-toolbars/custom-toolbars.mdx", + "order": 3, + "items": [ + { + "name": "カスタム ツールバーの構成", + "href": "controls/ightmleditor/custom-toolbars/configuring-custom-toolbars.mdx", + "order": 0, + "slug": "ightmleditor-configuring-custom-toolbars" + }, + { + "name": "カスタム ツールバーへのボタンの追加", + "href": "controls/ightmleditor/custom-toolbars/adding-button-to-custom-toolbar.mdx", + "order": 1, + "slug": "ightmleditor-adding-button-to-custom-toolbar" + }, + { + "name": "カスタム ツールバーへのコンボ ボックスの追加", + "href": "controls/ightmleditor/custom-toolbars/adding-combo-to-custom-toolbar.mdx", + "order": 2, + "slug": "ightmleditor-adding-combo-to-custom-toolbar" + } + ], + "slug": "ightmleditor-custom-toolbars" + }, + { + "name": "スタイル設定とテーマ設定", + "href": "controls/ightmleditor/styling-and-theming.mdx", + "order": 4, + "slug": "ightmleditor-styling-and-theming" + }, + { + "name": "API 参照リンク", + "href": "controls/ightmleditor/asp-net-mvc-helper-api.mdx", + "order": 5, + "slug": "ightmleditor-asp-net-mvc-helper-api" + }, + { + "name": "igHtmlEditor API リファレンス", + "href": "controls/ightmleditor/api-reference.mdx", + "order": 6, + "slug": "ightmleditor-api-reference" + }, + { + "name": "アクセシビリティ準拠", + "href": "controls/ightmleditor/accessibility-compliance.mdx", + "order": 7, + "slug": "ightmleditor-accessibility-compliance" + }, + { + "name": "既知の問題と制限", + "href": "controls/ightmleditor/known-issues.mdx", + "order": 8, + "slug": "ightmleditor-known-issues" + } + ], + "slug": "ightmleditor-ightmleditor" + }, + { + "name": "igLayoutManager", + "href": "controls/iglayoutmanager/landing-page.mdx", + "items": [ + { + "name": "igLayoutManager の概要", + "href": "controls/iglayoutmanager/overview.mdx", + "order": 0, + "slug": "iglayoutmanager-overview" + }, + { + "name": "igLayoutManager の追加", + "href": "controls/iglayoutmanager/adding.mdx", + "order": 1, + "slug": "iglayoutmanager-adding" + }, + { + "name": "igLayoutManager の構成", + "href": "controls/iglayoutmanager/configuring-layouts.mdx", + "order": 2, + "slug": "iglayoutmanager-configuring-layouts" + }, + { + "name": "イベント処理", + "href": "controls/iglayoutmanager/handling-events.mdx", + "order": 3, + "slug": "iglayoutmanager-handling-events" + }, + { + "name": "アクセシビリティの遵守", + "href": "controls/iglayoutmanager/accessibility-compliance.mdx", + "order": 4, + "slug": "iglayoutmanager-accessibility-compliance" + }, + { + "name": "既知の問題と制限", + "href": "controls/iglayoutmanager/known-issues-and-limitations.mdx", + "order": 5, + "slug": "iglayoutmanager-known-issues-and-limitations" + }, + { + "name": "jQuery および MVC API リファレンス リンク", + "href": "controls/iglayoutmanager/jquery-and-aspnet-mvc-helper-api-links.mdx", + "order": 6, + "slug": "iglayoutmanager-jquery-and-asp.net-mvc-helper-api-links" + } + ], + "slug": "iglayoutmanager-landing-page" + }, + { + "name": "igLinearGauge", + "href": "controls/iglineargauge/iglineargauge.mdx", + "items": [ + { + "name": "igLinearGauge の概要", + "href": "controls/iglineargauge/overview.mdx", + "order": 0, + "slug": "iglineargauge-overview" + }, + { + "name": "jQuery および MVC API リファレンス リンク", + "href": "controls/iglineargauge/api-links.mdx", + "order": 1, + "slug": "iglineargauge-api-links" + }, + { + "name": "igLinearGauge の追加", + "href": "controls/iglineargauge/adding/adding.mdx", + "order": 2, + "items": [ + { + "name": "igLinearGauge の HTML ページへの追加", + "href": "controls/iglineargauge/adding/adding-to-an-html-page.mdx", + "order": 0, + "slug": "iglineargauge-adding-to-an-html-page" + }, + { + "name": "igLinearGauge の ASP.NET MVC アプリケーションへの追加", + "href": "controls/iglineargauge/adding/adding-using-the-mvc-helper.mdx", + "order": 1, + "slug": "iglineargauge-adding-using-the-mvc-helper" + } + ], + "slug": "iglineargauge-adding" + }, + { + "name": "igLinearGauge の構成", + "href": "controls/iglineargauge/configuring/configuring.mdx", + "order": 3, + "items": [ + { + "name": "向きと方向の構成", + "href": "controls/iglineargauge/configuring/configuring-the-orientation-and-direction.mdx", + "order": 0, + "slug": "iglineargauge-configuring-the-orientation-and-direction" + }, + { + "name": "視覚要素の構成", + "href": "controls/iglineargauge/configuring/elements/configuring-the-visual-elements.mdx", + "order": 1, + "items": [ + { + "name": "スケールの構成", + "href": "controls/iglineargauge/configuring/elements/configuring-the-scale.mdx", + "order": 0, + "slug": "iglineargauge-configuring-the-scale" + }, + { + "name": "針の構成", + "href": "controls/iglineargauge/configuring/elements/configuring-the-needle.mdx", + "order": 1, + "slug": "iglineargauge-configuring-the-needle" + }, + { + "name": "比較範囲の構成", + "href": "controls/iglineargauge/configuring/elements/configuring-comparative-ranges.mdx", + "order": 2, + "slug": "iglineargauge-configuring-comparative-ranges" + }, + { + "name": "背景の構成", + "href": "controls/iglineargauge/configuring/elements/configuring-the-background.mdx", + "order": 3, + "slug": "iglineargauge-configuring-the-background" + }, + { + "name": "ツールチップの構成", + "href": "controls/iglineargauge/configuring/elements/configuring-the-tooltips.mdx", + "order": 4, + "slug": "iglineargauge-configuring-the-tooltips" + } + ], + "slug": "iglineargauge-configuring-the-visual-elements" + } + ], + "slug": "iglineargauge-configuring" + }, + { + "name": "アクセシビリティの遵守", + "href": "controls/iglineargauge/accessibility-compliance.mdx", + "order": 4, + "slug": "iglineargauge-accessibility-compliance" + }, + { + "name": "既知の問題と制限", + "href": "controls/iglineargauge/known-issues-and-limitations.mdx", + "order": 5, + "slug": "iglineargauge-known-issues-and-limitations" + } + ], + "slug": "iglineargauge" + }, + { + "name": "igMap", + "href": "controls/igmap/landing-page.mdx", + "items": [ + { + "name": "igMap の概要", + "href": "controls/igmap/overview-igmap.mdx", + "order": 0, + "slug": "overview-igmap" + }, + { + "name": "igMap の追加", + "href": "controls/igmap/adding-igmap.mdx", + "order": 1, + "slug": "adding-igmap" + }, + { + "name": "igMap のデータへのバインディング", + "href": "controls/igmap/data-binding-igmap.mdx", + "order": 2, + "slug": "data-binding-igmap" + }, + { + "name": "igMap の構成", + "href": "controls/igmap/configuring/igmap.mdx", + "order": 3, + "items": [ + { + "name": "マップ プロバイダーの構成", + "href": "controls/igmap/configuring/configuring-map-provider.mdx", + "order": 0, + "slug": "igmap-configuring-map-provider" + }, + { + "name": "機能の構成", + "href": "controls/igmap/configuring/features/configuring-features.mdx", + "order": 1, + "items": [ + { + "name": "ナビゲーション機能の構成", + "href": "controls/igmap/configuring/features/configuring-navigation-features.mdx", + "order": 0, + "slug": "igmap-configuring-navigation-features" + }, + { + "name": "ビジュアル機能の構成", + "href": "controls/igmap/configuring/features/configuring-visual-features.mdx", + "order": 1, + "slug": "igmap-configuring-visual-features" + } + ], + "slug": "igmap-configuring-features" + }, + { + "name": "マップ シリーズの構成", + "href": "controls/igmap/configuring/series/creating-different-kinds-maps.mdx", + "order": 2, + "items": [ + { + "name": "地理等高線シリーズの構成", + "href": "controls/igmap/configuring/series/configuring-geographic-contour-line-series.mdx", + "order": 0, + "slug": "igmap-configuring-geographic-contour-line-series" + }, + { + "name": "地理高密度散布シリーズの構成", + "href": "controls/igmap/configuring/series/using-geographic-high-density-scatter-series.mdx", + "order": 1, + "slug": "igmap-using-geographic-high-density-scatter-series" + }, + { + "name": "地理ポリライン シリーズの構成", + "href": "controls/igmap/configuring/series/configuring-geographic-polyline-series.mdx", + "order": 2, + "slug": "igmap-configuring-geographic-polyline-series" + }, + { + "name": "地理散布エリア シリーズの構成", + "href": "controls/igmap/configuring/series/configuring-geographic-scatter-area-series.mdx", + "order": 3, + "slug": "igmap-configuring-geographic-scatter-area-series" + }, + { + "name": "地理図形シリーズの構成", + "href": "controls/igmap/configuring/series/configuring-geographic-shapes.mdx", + "order": 4, + "slug": "igmap-configuring-geographic-shapes" + }, + { + "name": "地理シンボル シリーズの構成", + "href": "controls/igmap/configuring/series/configuring-geographic-symbol-series.mdx", + "order": 5, + "slug": "igmap-configuring-geographic-symbol-series" + }, + { + "name": "地理比例シンボル シリーズの構成", + "href": "controls/igmap/configuring/series/configuring-geographic-proportional-symbol-series.mdx", + "order": 6, + "slug": "igmap-configuring-geographic-proportional-symbol-series" + } + ], + "slug": "igmap-creating-different-kinds-maps" + } + ], + "slug": "configuring-igmap" + }, + { + "name": "igMap のスタイル設定", + "href": "controls/igmap/styling-igmap.mdx", + "order": 4, + "slug": "styling-igmap" + }, + { + "name": "アクセシビリティの遵守", + "href": "controls/igmap/accessibility-compliance.mdx", + "order": 5, + "slug": "igmap-accessibility-compliance" + }, + { + "name": "既知の問題と制限", + "href": "controls/igmap/known-issues-limitations.mdx", + "order": 6, + "slug": "igmap-known-issues-limitations" + }, + { + "name": "jQuery と MVC API リファレンス リンク", + "href": "controls/igmap/api-links.mdx", + "order": 7, + "slug": "igmap-api-links" + } + ], + "slug": "igmap-landing-page" + }, + { + "name": "igNotifier", + "href": "controls/ignotifier/ignotifier.mdx", + "items": [ + { + "name": "igNotifier の概要", + "href": "controls/ignotifier/overview.mdx", + "order": 0, + "slug": "ignotifier-overview" + } + ], + "slug": "ignotifier" + }, + { + "name": "igPieChart", + "href": "controls/igpiechart/igpiechart.mdx", + "items": [ + { + "name": "igPieChart の概要", + "href": "controls/igpiechart/overview.mdx", + "order": 0, + "slug": "igpiechart-overview" + }, + { + "name": "igPieChart の追加", + "href": "controls/igpiechart/adding.mdx", + "order": 1, + "slug": "igpiechart-adding" + }, + { + "name": "データ バインディング", + "href": "controls/igpiechart/databinding.mdx", + "order": 2, + "slug": "igpiechart-databinding" + }, + { + "name": "アクセシビリティ準拠", + "href": "controls/igpiechart/accessibility.mdx", + "order": 3, + "slug": "igpiechart-accessibility" + }, + { + "name": "選択", + "href": "controls/igpiechart/selection.mdx", + "order": 4, + "slug": "igpiechart-selection" + }, + { + "name": "igPieChart にテーマを設定する", + "href": "controls/igpiechart/styling-themes.mdx", + "order": 5, + "slug": "igpiechart-styling-themes" + }, + { + "name": "jQuery および MVC API リファレンス リンク", + "href": "controls/igpiechart/api-links.mdx", + "order": 6, + "slug": "igpiechart-api-links" + } + ], + "slug": "igpiechart" + }, + { + "name": "igPivotDataSelector", + "href": "controls/igpivotdataselector/igpivotdataselector.mdx", + "items": [ + { + "name": "igPivotDataSelector の概要", + "href": "controls/igpivotdataselector/overview.mdx", + "order": 0, + "slug": "igpivotdataselector-overview" + }, + { + "name": "igPivotDataSelector の追加", + "href": "controls/igpivotdataselector/adding/adding.mdx", + "order": 2, + "items": [ + { + "name": "igPivotDataSelector の HTML ページへの追加", + "href": "controls/igpivotdataselector/adding/adding-to-html-page.mdx", + "order": 0, + "slug": "igpivotdataselector-adding-to-html-page" + }, + { + "name": "igPivotDataSelector を ASP.NET MVC アプリケーションに追加", + "href": "controls/igpivotdataselector/adding/adding-using-the-mvc-helper.mdx", + "order": 1, + "slug": "igpivotdataselector-adding-using-the-mvc-helper" + } + ], + "slug": "igpivotdataselector-adding" + }, + { + "name": "アクセシビリティ準拠", + "href": "controls/igpivotdataselector/accessibility-compliance.mdx", + "order": 3, + "slug": "igpivotdataselector-accessibility-compliance" + }, + { + "name": "既知の問題と制限", + "href": "controls/igpivotdataselector/known-issues-and-limitations.mdx", + "order": 4, + "slug": "igpivotdataselector-known-issues-and-limitations" + }, + { + "name": "jQuery と MVC API リンク", + "href": "controls/igpivotdataselector/api-links.mdx", + "order": 5, + "slug": "igpivotdataselector-api-links" + } + ], + "slug": "igpivotdataselector" + }, + { + "name": "igPivotGrid", + "href": "controls/igpivotgrid/igpivotgrid.mdx", + "items": [ + { + "name": "igPivotGrid の概要", + "href": "controls/igpivotgrid/overview.mdx", + "order": 0, + "slug": "igpivotgrid-overview" + }, + { + "name": "KPI のサポート", + "href": "controls/igpivotgrid/kpi-support.mdx", + "order": 1, + "slug": "igpivotgrid-kpi-support" + }, + { + "name": "igPivotGrid の追加", + "href": "controls/igpivotgrid/adding/adding.mdx", + "order": 2, + "items": [ + { + "name": "igPivotGrid の HTML ページへの追加", + "href": "controls/igpivotgrid/adding/adding-to-an-html-page.mdx", + "order": 0, + "slug": "igpivotgrid-adding-to-an-html-page" + }, + { + "name": "igPivotGrid の ASP.NET MVC アプリケーションへの追加", + "href": "controls/igpivotgrid/adding/adding-using-the-mvc-helper.mdx", + "order": 1, + "slug": "igpivotgrid-adding-using-the-mvc-helper" + } + ], + "slug": "igpivotgrid-adding" + }, + { + "name": "アクセシビリティ準拠", + "href": "controls/igpivotgrid/accessibility-compliance.mdx", + "order": 3, + "slug": "igpivotgrid-accessibility-compliance" + }, + { + "name": "既知の問題と制限", + "href": "controls/igpivotgrid/known-issues-and-limitations.mdx", + "order": 4, + "slug": "igpivotgrid-known-issues-and-limitations" + }, + { + "name": "jQuery と MVC API リンク", + "href": "controls/igpivotgrid/api-links.mdx", + "order": 5, + "slug": "igpivotgrid-api-links" + }, + { + "name": "igPivotGrid の構成", + "href": "controls/igpivotgrid/configuration.mdx", + "order": 6, + "slug": "igpivotgrid-configuration" + } + ], + "slug": "igpivotgrid" + }, + { + "name": "igPivotView", + "href": "controls/igpivotview/igpivotview.mdx", + "items": [ + { + "name": "igPivotView 概要", + "href": "controls/igpivotview/overview.mdx", + "order": 0, + "slug": "igpivotview-overview" + }, + { + "name": "igPivotView の追加", + "href": "controls/igpivotview/adding/adding.mdx", + "order": 1, + "items": [ + { + "name": "igPivotView の HTML ページへの追加", + "href": "controls/igpivotview/adding/adding-to-html-page.mdx", + "order": 0, + "slug": "igpivotview-adding-to-html-page" + }, + { + "name": "igPivotView の ASP.NET MVC アプリケーションへの追加", + "href": "controls/igpivotview/adding/adding-using-the-mvc-helper.mdx", + "order": 1, + "slug": "igpivotview-adding-using-the-mvc-helper" + } + ], + "slug": "igpivotview-adding" + }, + { + "name": "アクセシビリティ準拠", + "href": "controls/igpivotview/accessibility-compliance.mdx", + "order": 2, + "slug": "igpivotview-accessibility-compliance" + }, + { + "name": "既知の問題と制限", + "href": "controls/igpivotview/known-issues-and-limitations.mdx", + "order": 3, + "slug": "igpivotview-known-issues-and-limitations" + }, + { + "name": "jQuery と MVC API リンク", + "href": "controls/igpivotview/api-links.mdx", + "order": 4, + "slug": "igpivotview-api-links" + } + ], + "slug": "igpivotview" + }, + { + "name": "igPopover", + "href": "controls/igpopover/landingpage.mdx", + "items": [ + { + "name": "igPopover の概要", + "href": "controls/igpopover/overview.mdx", + "order": 0, + "slug": "igpopover-overview" + }, + { + "name": "igPopover の追加", + "href": "controls/igpopover/adding-igpopover.mdx", + "order": 1, + "slug": "adding-igpopover" + }, + { + "name": "igPopover の構成", + "href": "controls/igpopover/configuring-igpopover.mdx", + "order": 2, + "slug": "configuring-igpopover" + }, + { + "name": "イベントの処理", + "href": "controls/igpopover/handling-events.mdx", + "order": 3, + "slug": "igpopover-handling-events" + }, + { + "name": "igPopover のスタイル設定", + "href": "controls/igpopover/styling-igpopover.mdx", + "order": 4, + "slug": "styling-igpopover" + }, + { + "name": "アクセシビリティ準拠", + "href": "controls/igpopover/accessibility-compliance.mdx", + "order": 5, + "slug": "igpopover-accessibility-compliance" + }, + { + "name": "既知の問題と制限事項", + "href": "controls/igpopover/known-issues-and-limitations.mdx", + "order": 6, + "slug": "igpopover-known-issues-and-limitations" + }, + { + "name": "jQuery と MVC API リンク", + "href": "controls/igpopover/api-links/asp-net-mvc-helper-api.mdx", + "order": 7, + "items": [ + { + "name": "プロパティ リファレンス", + "href": "controls/igpopover/api-links/property-reference.mdx", + "order": 0, + "slug": "igpopover-property-reference" + } + ], + "slug": "igpopover-asp-net-mvc-helper-api" + } + ], + "slug": "igpopover-landingpage" + }, + { + "name": "igQRCodeBarcode", + "href": "controls/igqrcodebarcode/igqrcodebarcode.mdx", + "items": [ + { + "name": "igQRCodeBarcode の概要", + "href": "controls/igqrcodebarcode/overview.mdx", + "order": 0, + "slug": "igqrcodebarcode-overview" + }, + { + "name": "igQRCodeBarcode の追加", + "href": "controls/igqrcodebarcode/adding/adding.mdx", + "order": 1, + "items": [ + { + "name": "HTML ページへの igQRCodeBarcode の追加", + "href": "controls/igqrcodebarcode/adding/adding-to-an-html-page.mdx", + "order": 0, + "slug": "igqrcodebarcode-adding-to-an-html-page" + }, + { + "name": "ASP.NET MVC アプリケーションへの igQRCodeBarcode の追加", + "href": "controls/igqrcodebarcode/adding/adding-using-the-mvc-helper.mdx", + "order": 1, + "slug": "igqrcodebarcode-adding-using-the-mvc-helper" + } + ], + "slug": "igqrcodebarcode-adding" + }, + { + "name": "igQRCodeBarcode の構成", + "href": "controls/igqrcodebarcode/configuring/configuring.mdx", + "order": 2, + "items": [ + { + "name": "文字エンコードの構成", + "href": "controls/igqrcodebarcode/configuring/configuring-the-character-encoding.mdx", + "slug": "igqrcodebarcode-configuring-the-character-encoding" + }, + { + "name": "QR バーコードのサイズの構成", + "href": "controls/igqrcodebarcode/configuring/configuring-the-dimensions.mdx", + "slug": "igqrcodebarcode-configuring-the-dimensions" + }, + { + "name": "QR コード固有の設定の構成", + "href": "controls/igqrcodebarcode/configuring/configuring-the-qr-code-specific-settings.mdx", + "slug": "igqrcodebarcode-configuring-the-qr-code-specific-settings" + } + ], + "slug": "igqrcodebarcode-configuring" + }, + { + "name": "igQRCodeBarcode のスタイル設定", + "href": "controls/igqrcodebarcode/styling.mdx", + "order": 3, + "slug": "igqrcodebarcode-styling" + }, + { + "name": "アクセシビリティの遵守", + "href": "controls/igqrcodebarcode/accessibility-compliance.mdx", + "order": 4, + "slug": "igqrcodebarcode-accessibility-compliance" + }, + { + "name": "既知の問題と制限", + "href": "controls/igqrcodebarcode/known-issues-and-limitations.mdx", + "order": 5, + "slug": "igqrcodebarcode-known-issues-and-limitations" + }, + { + "name": "jQuery および MVC API リファレンス リンク", + "href": "controls/igqrcodebarcode/api-links.mdx", + "order": 6, + "slug": "igqrcodebarcode-api-links" + } + ], + "slug": "igqrcodebarcode" + }, + { + "name": "igRadialGauge", + "href": "controls/igradialgauge/igradialgauge.mdx", + "items": [ + { + "name": "igRadialGauge の概要", + "href": "controls/igradialgauge/igradialgauge-overview.mdx", + "order": 0, + "slug": "igradialgauge-igradialgauge-overview" + }, + { + "name": "igRadialGauge の追加", + "href": "controls/igradialgauge/getting-started-with-igradialgauge.mdx", + "order": 1, + "slug": "igradialgauge-getting-started-with-igradialgauge" + }, + { + "name": "igRadialGauge の構成", + "href": "controls/igradialgauge/configuring/using-igradialgauge.mdx", + "order": 2, + "items": [ + { + "name": "スケールの構成", + "href": "controls/igradialgauge/configuring/configuring-the-scales.mdx", + "order": 0, + "slug": "igradialgauge-configuring-the-scales" + }, + { + "name": "目盛の構成", + "href": "controls/igradialgauge/configuring/configuring-tick-marks.mdx", + "order": 1, + "slug": "igradialgauge-configuring-tick-marks" + }, + { + "name": "針の構成", + "href": "controls/igradialgauge/configuring/configuring-needles.mdx", + "order": 2, + "slug": "igradialgauge-configuring-needles" + }, + { + "name": "範囲の構成", + "href": "controls/igradialgauge/configuring/configuring-ranges.mdx", + "order": 3, + "slug": "igradialgauge-configuring-ranges" + }, + { + "name": "ラベルの構成", + "href": "controls/igradialgauge/configuring/configuring-labels.mdx", + "order": 4, + "slug": "igradialgauge-configuring-labels" + }, + { + "name": "背景の構成", + "href": "controls/igradialgauge/configuring/configuring-the-backing.mdx", + "order": 5, + "slug": "igradialgauge-configuring-the-backing" + } + ], + "slug": "igradialgauge-using-igradialgauge" + }, + { + "name": "jQuery と MVC API リファレンス リンク", + "href": "controls/igradialgauge/igradialgauge-api-reference.mdx", + "order": 3, + "slug": "igradialgauge-igradialgauge-api-reference" + }, + { + "name": "アクセシビリティ準拠", + "href": "controls/igradialgauge/accessibility-compliance.mdx", + "order": 4, + "slug": "igradialgauge-accessibility-compliance" + }, + { + "name": "既知の問題と制限", + "href": "controls/igradialgauge/known-issues-and-limitations.mdx", + "order": 5, + "slug": "igradialgauge-known-issues-and-limitations" + } + ], + "slug": "igradialgauge" + }, + { + "name": "igRadialMenu", + "href": "controls/igradialmenu/igradialmenu.mdx", + "items": [ + { + "name": "igRadialMenu の概要", + "href": "controls/igradialmenu/overview/overview.mdx", + "order": 0, + "items": [ + { + "name": "igRadialMenu の機能", + "href": "controls/igradialmenu/overview/features.mdx", + "order": 0, + "slug": "igradialmenu-features" + }, + { + "name": "igRadialMenu の視覚要素", + "href": "controls/igradialmenu/overview/visual-elements.mdx", + "order": 1, + "slug": "igradialmenu-visual-elements" + }, + { + "name": "ユーザー相互作用と操作性", + "href": "controls/igradialmenu/overview/user-interaction.mdx", + "order": 2, + "slug": "igradialmenu-user-interaction" + } + ], + "slug": "igradialmenu-overview" + }, + { + "name": "igRadialMenu の追加", + "href": "controls/igradialmenu/adding/adding.mdx", + "order": 1, + "items": [ + { + "name": "igRadialMenu の HTML ページへの追加", + "href": "controls/igradialmenu/adding/adding-html-page.mdx", + "order": 0, + "slug": "igradialmenu-adding-html-page" + }, + { + "name": "ASP.NET MVC アプリケーションへの igRadialMenu の追加", + "href": "controls/igradialmenu/adding/adding-mvc-app.mdx", + "order": 1, + "slug": "igradialmenu-adding-mvc-app" + } + ], + "slug": "igradialmenu-adding" + }, + { + "name": "igRadialMenu の構成", + "href": "controls/igradialmenu/configuring/configuring.mdx", + "order": 2, + "items": [ + { + "name": "igRadialMenu の構成の概要", + "href": "controls/igradialmenu/configuring/configuration-overview.mdx", + "order": 0, + "slug": "igradialmenu-configuration-overview" + }, + { + "name": "中央ボタンの構成", + "href": "controls/igradialmenu/configuring/configuring-center-button.mdx", + "order": 1, + "slug": "igradialmenu-configuring-center-button" + }, + { + "name": "項目の構成", + "href": "controls/igradialmenu/configuring/items/configuring-items.mdx", + "order": 2, + "items": [ + { + "name": "項目 / サブ項目の構成 - 概要", + "href": "controls/igradialmenu/configuring/items/items-sub-items-configuration-overview.mdx", + "order": 0, + "slug": "igradialmenu-items-sub-items-configuration-overview" + }, + { + "name": "ボタン項目の構成", + "href": "controls/igradialmenu/configuring/items/configuring-button-items.mdx", + "order": 1, + "slug": "igradialmenu-configuring-button-items" + }, + { + "name": "数値項目の構成", + "href": "controls/igradialmenu/configuring/items/configuring-numeric-items.mdx", + "order": 2, + "slug": "igradialmenu-configuring-numeric-items" + }, + { + "name": "色項目の構成", + "href": "controls/igradialmenu/configuring/items/configuring-color-items.mdx", + "order": 3, + "slug": "igradialmenu-configuring-color-items" + } + ], + "slug": "igradialmenu-configuring-items" + }, + { + "name": "ツールチップの構成", + "href": "controls/igradialmenu/configuring/configuring-tooltips.mdx", + "order": 3, + "slug": "igradialmenu-configuring-tooltips" + } + ], + "slug": "igradialmenu-configuring" + }, + { + "name": "jQuery と MVC API リファレンス リンク", + "href": "controls/igradialmenu/api-reference.mdx", + "order": 3, + "slug": "igradialmenu-api-reference" + } + ], + "slug": "igradialmenu" + }, + { + "name": "igRating", + "href": "controls/igrating/igrating.mdx", + "items": [ + { + "name": "igRating の概要", + "href": "controls/igrating/overview.mdx", + "order": 0, + "slug": "igrating-overview" + }, + { + "name": "スタイル設定とテーマ設定", + "href": "controls/igrating/styling-and-theming.mdx", + "order": 1, + "slug": "igrating-styling-and-theming" + }, + { + "name": "jQuery および MVC API リファレンス リンク", + "href": "controls/igrating/jquery-api.mdx", + "order": 2, + "slug": "igrating-jquery-api" + }, + { + "name": "アクセシビリティの遵守", + "href": "controls/igrating/accessibility-compliance.mdx", + "order": 3, + "slug": "igrating-accessibility-compliance" + }, + { + "name": "既知の問題と制限事項", + "href": "controls/igrating/known-issues.mdx", + "order": 4, + "slug": "igrating-known-issues" + } + ], + "slug": "igrating-igrating" + }, + { + "name": "igScheduler", + "href": "controls/igscheduler/landing.mdx", + "items": [ + { + "name": "igScheduler の概要", + "href": "controls/igscheduler/overview.mdx", + "order": 0, + "slug": "igScheduler-overview" + }, + { + "name": "igScheduler の追加", + "href": "controls/igscheduler/adding-igscheduler.mdx", + "order": 1, + "slug": "igscheduler-adding-igscheduler" + }, + { + "name": "igScheduler の構成", + "href": "controls/igscheduler/configuring/configuring.mdx", + "order": 3, + "items": [ + { + "name": "リソースの構成", + "href": "controls/igscheduler/configuring/configure-resources.mdx", + "order": 0, + "slug": "igscheduler-configure-resources" + }, + { + "name": "予定の構成", + "href": "controls/igscheduler/configuring/configure-appointments.mdx", + "order": 1, + "slug": "igscheduler-configure-appointments" + }, + { + "name": "ビューの構成", + "href": "controls/igscheduler/configuring/configure-views.mdx", + "order": 2, + "slug": "igscheduler-configure-views" + }, + { + "name": "繰り返しの構成", + "href": "controls/igscheduler/configuring/configure-recurrence.mdx", + "order": 3, + "slug": "igscheduler-configure-recurrence" + }, + { + "name": "ASP.NET MVC スケジューラの構成", + "href": "controls/igscheduler/configuring/configure-asp-net-mvc.mdx", + "order": 4, + "slug": "igscheduler-asp-net-mvc-wrapper" + } + ], + "slug": "igscheduler-configuring" + }, + { + "name": "アクセシビリティの遵守", + "href": "controls/igscheduler/accessibility-compliance.mdx", + "order": 4, + "slug": "igscheduler-accessibility-compliance" + }, + { + "name": "既知の問題と制限", + "href": "controls/igscheduler/known-limitations.mdx", + "order": 5, + "slug": "igscheduler-known-limitations" + }, + { + "name": "igScheduler のスタイル設定", + "href": "controls/igscheduler/using-themes.mdx", + "order": 6, + "slug": "igscheduler-using-themes" + } + ], + "slug": "igscheduler-landing" + }, + { + "name": "igScroll", + "href": "controls/igscroll/igscroll.mdx", + "items": [ + { + "name": "igScroll の概要", + "href": "controls/igscroll/overview.mdx", + "order": 0, + "slug": "igscroll-overview" + }, + { + "name": "igScroll の構成", + "href": "controls/igscroll/configuring-igscroll.mdx", + "order": 1, + "slug": "igscroll-configuring" + }, + { + "name": "igScroll を使用したスタイル設定", + "href": "controls/igscroll/styling.mdx", + "order": 2, + "slug": "igscroll-styling" + }, + { + "name": "アクセシビリティの遵守", + "href": "controls/igscroll/accessibility-compliance.mdx", + "order": 3, + "slug": "igscroll-accessibility-compliance" + }, + { + "name": "jQuery API リンク", + "href": "controls/igscroll/jquery-api.mdx", + "order": 4, + "slug": "igscroll-jquery-api" + }, + { + "name": "既知の問題と制限", + "href": "controls/igscroll/known-issues.mdx", + "order": 5, + "slug": "igscroll-known-issues" + } + ], + "slug": "igscroll" + }, + { + "name": "igShapeChart", + "href": "controls/igshapechart/landingpage.mdx", + "items": [ + { + "name": "概要", + "href": "controls/igshapechart/shapechart-overview.mdx", + "order": 0, + "slug": "shapechart-overview" + }, + { + "name": "igShapeChart を使用した作業の開始", + "href": "controls/igshapechart/shapechart-getting-started-with-shapechart.mdx", + "order": 1, + "slug": "shapechart-getting-started-with-shapechart" + }, + { + "name": "チャート タイプ", + "href": "controls/igshapechart/shapechart-chart-types.mdx", + "order": 2, + "slug": "shapechart-chart-types" + }, + { + "name": "シリーズ要件", + "href": "controls/igshapechart/shapechart-series-requirements.mdx", + "order": 3, + "slug": "shapechart-series-requirements" + }, + { + "name": "シェープファイル データにバインド", + "href": "controls/igshapechart/shapechart-binding-shapefile-data.mdx", + "order": 4, + "slug": "shapechart-binding-shapefile-data" + }, + { + "name": "損益分岐点データのバインド", + "href": "controls/igshapechart/shapechart-binding-break-even-data.mdx", + "order": 5, + "slug": "shapechart-binding-to-break-even-data" + }, + { + "name": "軸ラベルの構成", + "href": "controls/igshapechart/shapechart-configuring-axis-labels.mdx", + "order": 6, + "slug": "shapechart-configuring-axis-labels" + }, + { + "name": "軸間隔の構成", + "href": "controls/igshapechart/shapechart-configuring-axis-intervals.mdx", + "order": 7, + "slug": "shapechart-configuring-axis-intervals" + }, + { + "name": "軸範囲の構成", + "href": "controls/igshapechart/shapechart-configuring-axis-ranges.mdx", + "order": 8, + "slug": "shapechart-configuring-axis-ranges" + }, + { + "name": "シリーズ ブラシの構成", + "href": "controls/igshapechart/shapechart-configuring-series-brushes.mdx", + "order": 9, + "slug": "shapechart-configuring-series-brushes" + }, + { + "name": "凡例の使用", + "href": "controls/igshapechart/shapechart-using-legend-with-shapechart.mdx", + "order": 10, + "slug": "shapechart-using-legend-with-shapechart" + }, + { + "name": "jQuery API リファレンス リンク", + "href": "controls/igshapechart/shapechart-api-reference.mdx", + "order": 11, + "slug": "shapechart-api-reference" + }, + { + "name": "チャート マーカーの構成", + "href": "controls/igshapechart/shapechart-configuring-chart-markers.mdx", + "order": 12, + "slug": "shapechart-configuring-chart-markers" + }, + { + "name": "軸タイトルの構成", + "href": "controls/igshapechart/shapechart-configuring-axis-titles.mdx", + "order": 13, + "slug": "shapechart-configuring-axis-titles" + }, + { + "name": "チャートのタイトルとサブタイトル", + "href": "controls/igshapechart/shapechart-configuring-chart-titles.mdx", + "order": 14, + "slug": "shapechart-configuring-chart-titles" + }, + { + "name": "軸スケールの構成", + "href": "controls/igshapechart/shapechart-configuring-axis-scales.mdx", + "order": 15, + "slug": "shapechart-configuring-axis-scales" + } + ], + "slug": "igshapechart-landingpage" + }, + { + "name": "igSparkline", + "href": "controls/igsparkline/landing.mdx", + "items": [ + { + "name": "igSparkline の概要", + "href": "controls/igsparkline/overview.mdx", + "order": 0, + "slug": "igsparkline-overview" + }, + { + "name": "igSparkline の追加", + "href": "controls/igsparkline/adding/adding-igsparkline.mdx", + "order": 1, + "items": [ + { + "name": "igSparkline の追加の概要", + "href": "controls/igsparkline/adding/adding-igsparkline-overview.mdx", + "order": 0, + "slug": "igsparkline-adding-igsparkline-overview" + }, + { + "name": "igSparkline を HTML ドキュメントに追加", + "href": "controls/igsparkline/adding/adding-igsparkline-to-an-html-document.mdx", + "order": 1, + "slug": "igsparkline-adding-igsparkline-to-an-html-document" + }, + { + "name": "igSparkline を ASP.NET MVC ビューに追加", + "href": "controls/igsparkline/adding/adding-igsparkline-to-an-aspnet-mvc-view.mdx", + "order": 2, + "slug": "igsparkline-adding-igsparkline-to-an-aspnet-mvc-view" + } + ], + "slug": "igsparkline-adding-igsparkline" + }, + { + "name": "igSparkline をデータにバインド", + "href": "controls/igsparkline/binding-to-data.mdx", + "order": 2, + "slug": "igsparkline-binding-to-data" + }, + { + "name": "igSparkline の構成", + "href": "controls/igsparkline/configuring.mdx", + "order": 3, + "slug": "igsparkline-configuring" + }, + { + "name": "igSparkline のビジュアル要素", + "href": "controls/igsparkline/visual-elements.mdx", + "order": 4, + "slug": "igsparkline-visual-elements" + }, + { + "name": "アクセシビリティ準拠", + "href": "controls/igsparkline/accessibility-compliance.mdx", + "order": 5, + "slug": "igsparkline-accessibility-compliance" + }, + { + "name": "jQuery と MVC API リンク", + "href": "controls/igsparkline/jquery-and-aspnet-mvc-api.mdx", + "order": 6, + "slug": "igsparkline-jquery-and-aspnet-mvc-api" + } + ], + "slug": "igsparkline-landing" + }, + { + "name": "igSplitter", + "href": "controls/igsplitter/igsplitter.mdx", + "items": [ + { + "name": "igSplitter の概要", + "href": "controls/igsplitter/overview.mdx", + "order": 0, + "slug": "igsplitter-overview" + }, + { + "name": "igSplitter の追加", + "href": "controls/igsplitter/adding-igsplitter.mdx", + "order": 1, + "slug": "adding-igsplitter" + }, + { + "name": "igSplitter の構成", + "href": "controls/igsplitter/configuring-igsplitter.mdx", + "order": 2, + "slug": "configuring-igsplitter" + }, + { + "name": "イベントの処理", + "href": "controls/igsplitter/handling-events.mdx", + "order": 3, + "slug": "igsplitter-handling-events" + }, + { + "name": "アクセシビリティ準拠", + "href": "controls/igsplitter/accessibility-compliance.mdx", + "order": 4, + "slug": "igsplitter-accessibility-compliance" + }, + { + "name": "既知の問題と制限", + "href": "controls/igsplitter/known-issues-and-limitations.mdx", + "order": 5, + "slug": "igsplitter-known-issues-and-limitations" + }, + { + "name": "jQuery と ASP.NET MVC ヘルパー API", + "href": "controls/igsplitter/jquery-and-aspnet-mvc-helper-api-links.mdx", + "order": 6, + "slug": "igsplitter-jquery-and-asp.net-mvc-helper-api-links" + } + ], + "slug": "igsplitter" + }, + { + "name": "igSpreadsheet", + "href": "controls/igspreadsheet/igspreadsheet.mdx", + "items": [ + { + "name": "igSpreadsheet の概要", + "href": "controls/igspreadsheet/igspreadsheet-overview/overview.mdx", + "order": 0, + "items": [ + { + "name": "igSpreadsheet の機能の概要", + "href": "controls/igspreadsheet/igspreadsheet-overview/feature-overview.mdx", + "order": 0, + "slug": "igspreadsheet-feature-overview" + }, + { + "name": "編集 API", + "href": "controls/igspreadsheet/igspreadsheet-overview/editing.mdx", + "order": 2, + "slug": "igspreadsheet-editing" + }, + { + "name": "igSpreadsheet の視覚要素", + "href": "controls/igspreadsheet/igspreadsheet-overview/visual-elements.mdx", + "order": 3, + "slug": "igspreadsheet-visual-elements" + }, + { + "name": "igSpreadsheet のアクティベーションとナビゲーションのインタラクション", + "href": "controls/igspreadsheet/igspreadsheet-overview/activation-and-navigation-interactions.mdx", + "order": 4, + "slug": "igspreadsheet-activation-and-navigation-interactions" + }, + { + "name": "igSpreadsheet の選択操作", + "href": "controls/igspreadsheet/igspreadsheet-overview/selection.mdx", + "order": 5, + "slug": "igspreadsheet-selection" + }, + { + "name": "igSpreadsheet のコンテキスト メニュー", + "href": "controls/igspreadsheet/igspreadsheet-overview/context-menu.mdx", + "order": 6, + "slug": "igspreadsheet-context-menu" + }, + { + "name": "igSpreadsheet のフィルター ダイアログ", + "href": "controls/igspreadsheet/igspreadsheet-overview/filter-dialog.mdx", + "order": 7, + "slug": "images/igspreadsheet-filter-dialog" + }, + { + "name": "igSpreadsheet FormatCell ダイアログ", + "href": "controls/igspreadsheet/igspreadsheet-overview/formatcell-dialog.mdx", + "order": 8, + "slug": "igspreadsheet-FormatCell-Dialog" + }, + { + "name": "igSpreadsheet カスタム並べ替えダイアログ", + "href": "controls/igspreadsheet/igspreadsheet-overview/sort-dialog.mdx", + "order": 9, + "slug": "images/igspreadsheet-sort-dialog" + } + ], + "slug": "igspreadsheet-overview" + }, + { + "name": "igSpreadsheet の追加", + "href": "controls/igspreadsheet/adding-igspreadsheet.mdx", + "order": 1, + "slug": "adding-igspreadsheet" + }, + { + "name": "igSpreadsheet の構成", + "href": "controls/igspreadsheet/configuring-igspreadsheet.mdx", + "order": 2, + "slug": "igspreadsheet-configuring" + }, + { + "name": "igSpreadsheet アクセシビリティの遵守", + "href": "controls/igspreadsheet/accessibility-compliance.mdx", + "order": 3, + "slug": "igspreadsheet-accessibility-compliance" + }, + { + "name": "igSpreadsheet の既知の問題", + "href": "controls/igspreadsheet/known-issues.mdx", + "order": 4, + "slug": "igspreadsheet-known-issues" + }, + { + "name": "igSpreadsheet での条件付き書式", + "href": "controls/igspreadsheet/conditional-formatting.mdx", + "order": 5, + "slug": "igspreadsheet-conditional-formatting" + } + ], + "slug": "igspreadsheet-igspreadsheet" + }, + { + "name": "igTileManager", + "href": "controls/igtilemanager/landing-page.mdx", + "items": [ + { + "name": "igTileManager の概要", + "href": "controls/igtilemanager/overview.mdx", + "order": 0, + "slug": "igtilemanager-overview" + }, + { + "name": "igTileManager の追加", + "href": "controls/igtilemanager/adding.mdx", + "order": 1, + "slug": "igtilemanager-adding" + }, + { + "name": "igTileManager とデータのバインド", + "href": "controls/igtilemanager/binding.mdx", + "order": 2, + "slug": "igtilemanager-binding" + }, + { + "name": "igTileManager の構成", + "href": "controls/igtilemanager/configuring.mdx", + "order": 3, + "slug": "igtilemanager-configuring" + }, + { + "name": "イベントの処理", + "href": "controls/igtilemanager/handling-events.mdx", + "order": 4, + "slug": "igtilemanager-handling-events" + }, + { + "name": "アクセシビリティの遵守", + "href": "controls/igtilemanager/accessibility-compliance.mdx", + "order": 5, + "slug": "igtilemanager-accessibility-compliance" + }, + { + "name": "既知の問題と制限", + "href": "controls/igtilemanager/known-issues-and-limitations.mdx", + "order": 6, + "slug": "igtilemanager-known-issues-and-limitations" + }, + { + "name": "jQuery および MVC API リファレンス リンク", + "href": "controls/igtilemanager/jquery-and-aspnet-mvc-helper-api-links.mdx", + "order": 7, + "slug": "igtilemanager-jquery-and-asp.net-mvc-helper-api-links" + } + ], + "slug": "igtilemanager-landing-page" + }, + { + "name": "igTree", + "href": "controls/igtree/igtree.mdx", + "items": [ + { + "name": "igTree の概要", + "href": "controls/igtree/overview.mdx", + "order": 0, + "slug": "igtree-overview" + }, + { + "name": "igTree を使用した作業の開始", + "href": "controls/igtree/getting-started.mdx", + "order": 1, + "slug": "igtree-getting-started" + }, + { + "name": "igTree のデータ バインディング", + "href": "controls/igtree/data-binding.mdx", + "order": 2, + "slug": "igtree-data-binding" + }, + { + "name": "チェックボックスおよび igTree による選択の構成", + "href": "controls/igtree/configure-checkboxes-and-selection.mdx", + "order": 3, + "slug": "igtree-configure-checkboxes-and-selection" + }, + { + "name": "igTree におけるノード イメージの構成", + "href": "controls/igtree/configure-node-images.mdx", + "order": 4, + "slug": "igtree-configure-node-images" + }, + { + "name": "igTree におけるノードの構成", + "href": "controls/igtree/configure-nodes.mdx", + "order": 5, + "slug": "igtree-configure-nodes" + }, + { + "name": "ノードの追加と削除", + "href": "controls/igtree/adding-and-removing-nodes/adding-removing-nodes.mdx", + "order": 6, + "items": [ + { + "name": "ノード追加/削除の概要と例", + "href": "controls/igtree/adding-and-removing-nodes/adding-removing-nodes-overview-examples.mdx", + "order": 0, + "slug": "igtree-adding-removing-nodes-overview-examples" + }, + { + "name": "ノード追加/削除のトランザクション ログの読み出し", + "href": "controls/igtree/adding-and-removing-nodes/retrieving-transaction-log.mdx", + "order": 1, + "slug": "igtree-retrieving-transaction-log" + }, + { + "name": "ノードの追加/削除メソッド API のリファレンス", + "href": "controls/igtree/adding-and-removing-nodes/adding-removing-node-method-api-reference.mdx", + "order": 2, + "slug": "igtree-adding-removing-node-method-api-reference" + } + ], + "slug": "igtree-adding-removing-nodes" + }, + { + "name": "ドラッグ アンド ドロップ", + "href": "controls/igtree/drag-and-drop/drag-and-drop.mdx", + "order": 7, + "items": [ + { + "name": "ドラッグ アンド ドロップの概要", + "href": "controls/igtree/drag-and-drop/drag-and-drop-overview.mdx", + "order": 0, + "slug": "igtree-drag-and-drop-overview" + }, + { + "name": "ドラッグ アンド ドロップの有効化", + "href": "controls/igtree/drag-and-drop/drag-and-drop-enabling.mdx", + "order": 1, + "slug": "igtree-drag-and-drop-enabling" + }, + { + "name": "ドラッグ アンド ドロップの構成", + "href": "controls/igtree/drag-and-drop/configuring/drag-and-drop-configuring.mdx", + "order": 2, + "items": [ + { + "name": "ドラッグ ビジュアル トークンの外観の構成", + "href": "controls/igtree/drag-and-drop/configuring/drag-and-drop-configuring-tokens.mdx", + "order": 0, + "slug": "igtree-drag-and-drop-configuring-tokens" + } + ], + "slug": "igtree-drag-and-drop-configuring" + }, + { + "name": "ドラッグ アンド ドロップ イベントの処理", + "href": "controls/igtree/drag-and-drop/events/drag-and-drop-handling-events.mdx", + "order": 3, + "items": [ + { + "name": "jQuery における初期設定時のドラッグ アンド ドロップ イベントの処理", + "href": "controls/igtree/drag-and-drop/events/drag-and-drop-handling-events-initialization.mdx", + "order": 0, + "slug": "igtree-drag-and-drop-handling-events-initialization" + }, + { + "name": "実行時のドラッグ アンド ドロップ イベントの処理", + "href": "controls/igtree/drag-and-drop/events/drag-and-drop-handling-events-run-time.mdx", + "order": 1, + "slug": "igtree-drag-and-drop-handling-events-run-time" + } + ], + "slug": "igtree-drag-and-drop-handling-events" + }, + { + "name": "ドラッグ アンド ドロップ API リファレンス", + "href": "controls/igtree/drag-and-drop/api-reference/drag-and-drop-api-reference.mdx", + "order": 4, + "items": [ + { + "name": "ドラッグ アンド ドロップ イベント API リファレンス", + "href": "controls/igtree/drag-and-drop/api-reference/drag-and-drop-event-api-reference.mdx", + "order": 0, + "slug": "igtree-drag-and-drop-event-api-reference" + }, + { + "name": "ドラッグ アンド ドロップ プロパティ API リファレンス", + "href": "controls/igtree/drag-and-drop/api-reference/drag-and-drop-property-api-reference.mdx", + "order": 1, + "slug": "igtree-drag-and-drop-property-api-reference" + } + ], + "slug": "igtree-drag-and-drop-api-reference" + } + ], + "slug": "igtree-drag-and-drop" + }, + { + "name": "igTree のパフォーマンスを最適化します", + "href": "controls/igtree/optimize-performance.mdx", + "order": 8, + "slug": "igtree-optimize-performance" + }, + { + "name": "igTree でのテーマの使用", + "href": "controls/igtree/using-themes.mdx", + "order": 9, + "slug": "igtree-using-themes" + }, + { + "name": "詳細なガイド", + "href": "controls/igtree/walkthroughs/walkthroughs.mdx", + "order": 10, + "items": [ + { + "name": "ドラッグ アンド ドロップ モードの構成", + "href": "controls/igtree/walkthroughs/drag-and-drop-configuring-mode.mdx", + "order": 0, + "slug": "igtree-drag-and-drop-configuring-mode" + }, + { + "name": "カスタム ドロップ検証の構成", + "href": "controls/igtree/walkthroughs/drag-and-drop-configuring-custom-drop-validation.mdx", + "order": 1, + "slug": "igtree-drag-and-drop-configuring-custom-drop-validation" + } + ], + "slug": "igtree-walkthroughs" + }, + { + "name": "igTree アクセシビリティの遵守", + "href": "controls/igtree/accessibility-compliance.mdx", + "order": 11, + "slug": "igtree-accessibility-compliance" + }, + { + "name": "igTree jQuery および MVC API リファレンス リンク", + "href": "controls/igtree/jquery-and-asp-net-mvc-helper-api-links.mdx", + "order": 12, + "slug": "igtree-jquery-and-asp-net-mvc-helper-api-links" + }, + { + "name": "Knockout サポートの構成", + "href": "controls/igtree/knockoutjs-support.mdx", + "order": 13, + "slug": "igtree-knockoutjs-support" + }, + { + "name": "igTree の既知の制約事項", + "href": "controls/igtree/known-limitations.mdx", + "order": 14, + "slug": "igtree-known-limitations" + }, + { + "name": "イベント リファレンス", + "href": "controls/igtree/event-reference.mdx", + "order": 15, + "slug": "igtree-event-reference" + } + ], + "slug": "igtree-igtree" + }, + { + "name": "igTreeGrid", + "href": "controls/igtreegrid/landing-page.mdx", + "items": [ + { + "name": "概要", + "href": "controls/igtreegrid/overview.mdx", + "order": 0, + "slug": "igtreegrid-overview" + }, + { + "name": "機能の概要", + "href": "controls/igtreegrid/features/features-overview.mdx", + "order": 1, + "items": [ + { + "name": "フィルタリング", + "href": "controls/igtreegrid/features/filtering.mdx", + "order": 0, + "slug": "igtreegrid-filtering" + }, + { + "name": "更新", + "href": "controls/igtreegrid/features/updating.mdx", + "order": 1, + "slug": "igtreegrid-updating" + }, + { + "name": "ロード オン デマンド", + "href": "controls/igtreegrid/features/load-on-demand.mdx", + "order": 2, + "slug": "igtreegrid-load-on-demand" + }, + { + "name": "リモート機能", + "href": "controls/igtreegrid/features/remote-features.mdx", + "order": 3, + "slug": "igtreegrid-remote-features" + }, + { + "name": "ページング", + "href": "controls/igtreegrid/features/paging.mdx", + "order": 4, + "slug": "igtreegrid-paging" + }, + { + "name": "行セレクター", + "href": "controls/igtreegrid/features/row-selectors.mdx", + "order": 5, + "slug": "igtreegrid-row-selectors" + } + ], + "slug": "igtreegrid-features-overview" + }, + { + "name": "アクセシビリティの遵守", + "href": "controls/igtreegrid/accessibility-compliance.mdx", + "order": 2, + "slug": "igtreegrid-accessibility-compliance" + }, + { + "name": "既知の問題と制限", + "href": "controls/igtreegrid/known-issues-and-limitations.mdx", + "order": 3, + "slug": "igtreegrid-known-issues-and-limitations" + }, + { + "name": "jQuery および MVC API リファレンス リンク", + "href": "controls/igtreegrid/jquery-api.mdx", + "order": 4, + "slug": "igtreegrid-jquery-api" + } + ], + "slug": "igtreegrid-landing-page" + }, + { + "name": "igUpload", + "href": "controls/igupload/igupload.mdx", + "items": [ + { + "name": "igUpload の概要", + "href": "controls/igupload/overview.mdx", + "order": 0, + "slug": "igupload-overview" + }, + { + "name": "igUpload での作業", + "href": "controls/igupload/working-with-igupload/working-with-igupload.mdx", + "order": 1, + "items": [ + { + "name": "igUpload の構成", + "href": "controls/igupload/working-with-igupload/configuring-igupload.mdx", + "order": 0, + "slug": "igupload-configuring-igupload" + }, + { + "name": "HTTP ハンドラーおよびモジュールの使用", + "href": "controls/igupload/working-with-igupload/using-http-handler-and-modules.mdx", + "order": 1, + "slug": "igupload-using-http-handler-and-modules" + }, + { + "name": "クライアント側イベントの使用", + "href": "controls/igupload/working-with-igupload/using-client-side-events.mdx", + "order": 2, + "slug": "igupload-using-client-side-events" + }, + { + "name": "ASP.NET MVC でサーバー側イベントの使用", + "href": "controls/igupload/working-with-igupload/using-server-side-events.mdx", + "order": 3, + "slug": "igupload-using-server-side-events" + }, + { + "name": "ファイルをストリームとして保存", + "href": "controls/igupload/working-with-igupload/saving-files-as-stream.mdx", + "order": 4, + "slug": "igupload-saving-files-as-stream" + } + ], + "slug": "igupload-working-with-igupload" + }, + { + "name": "igUpload のスタイル設定", + "href": "controls/igupload/styling-and-theming.mdx", + "order": 2, + "slug": "igupload-styling-and-theming" + }, + { + "name": "アクセシビリティの遵守", + "href": "controls/igupload/accessibility-compliance.mdx", + "order": 3, + "slug": "igupload-accessibility-compliance" + }, + { + "name": "既知の問題と制限事項", + "href": "controls/igupload/known-issues.mdx", + "order": 4, + "slug": "igupload-known-issues" + }, + { + "name": "jQuery および MVC API リファレンス リンク", + "href": "controls/igupload/jquery-api-links.mdx", + "order": 5, + "slug": "igupload-jquery-api-links" + } + ], + "slug": "igupload-igupload" + }, + { + "name": "igValidator", + "href": "controls/igvalidator/igvalidator.mdx", + "items": [ + { + "name": "igValidator の概要", + "href": "controls/igvalidator/overview.mdx", + "order": 0, + "slug": "igvalidator-overview" + }, + { + "name": "入力規則", + "href": "controls/igvalidator/validation-rules.mdx", + "order": 1, + "slug": "igvalidator-validation-rules" + }, + { + "name": "新しい igValidator コントロールへの移行", + "href": "controls/igvalidator/migration-topic.mdx", + "order": 2, + "slug": "igvalidator-migration-topic" + } + ], + "slug": "igvalidator" + }, + { + "name": "igVideoPlayer", + "href": "controls/igvideoplayer/videoplayer.mdx", + "items": [ + { + "name": "igVideoPlayer の概要", + "href": "controls/igvideoplayer/overview.mdx", + "order": 0, + "slug": "igvideoplayer-overview" + }, + { + "name": "スタイル設定とテーマ設定", + "href": "controls/igvideoplayer/styling-and-theming.mdx", + "order": 1, + "slug": "igvideoplayer-styling-and-theming" + }, + { + "name": "jQuery および MVC API リファレンス リンク", + "href": "controls/igvideoplayer/jquery-api.mdx", + "order": 2, + "slug": "igvideoplayer-jquery-api" + }, + { + "name": "アクセシビリティの遵守", + "href": "controls/igvideoplayer/accessibility-compliance.mdx", + "order": 3, + "slug": "igvideoplayer-accessibility-compliance" + }, + { + "name": "既知の問題と制限事項", + "href": "controls/igvideoplayer/known-issues.mdx", + "order": 4, + "slug": "igvideoplayer-known-issues" + }, + { + "name": "HTML5 ビデオとの連携", + "href": "controls/igvideoplayer/working-with-html5-video.mdx", + "order": 5, + "slug": "igvideoplayer-working-with-html5-video" + } + ], + "slug": "videoplayer" + }, + { + "name": "igZoombar", + "href": "controls/igzoombar/landingpage.mdx", + "items": [ + { + "name": "igZoombar の概要", + "href": "controls/igzoombar/overview.mdx", + "order": 0, + "slug": "igzoombar-overview" + }, + { + "name": "igZoombar の追加", + "href": "controls/igzoombar/adding-igzoombar.mdx", + "order": 1, + "slug": "adding-igzoombar" + }, + { + "name": "igZoombar の構成", + "href": "controls/igzoombar/configuring-igzoombar.mdx", + "order": 2, + "slug": "configuring-igzoombar" + }, + { + "name": "アクセシビリティの遵守", + "href": "controls/igzoombar/accessibility-compliance.mdx", + "order": 3, + "slug": "igzoombar-accessibility-compliance" + }, + { + "name": "既知の問題と制限", + "href": "controls/igzoombar/known-issues-and-limitations.mdx", + "order": 4, + "slug": "igzoombar-known-issues-and-limitations" + }, + { + "name": "jQuery および MVC API リファレンス リンク", + "href": "controls/igzoombar/asp-net-mvc-helper-api.mdx", + "order": 5, + "slug": "igzoombar-asp-net-mvc-helper-api" + }, + { + "name": "igZoombar とカスタム コンポーネントの統合", + "href": "controls/igzoombar/integration-with-custom-components.mdx", + "order": 6, + "slug": "igzoombar-using-custom-providers" + } + ], + "slug": "igzoombar-landingpage" + } + ], + "slug": "jqueryuicomponents-landingpage" + }, + { + "name": "データ ソース コンポーネント", + "href": "data-sources/data-source-components.mdx", + "order": 4, + "items": [ + { + "name": "データ ソース コンポーネントの概要", + "href": "data-sources/data-source-components-overview.mdx", + "order": 0, + "slug": "data-source-components-overview" + }, + { + "name": "多次元 データ ソース コンポーネント", + "href": "data-sources/olap/multidimensional-data-source-components.mdx", + "items": [ + { + "name": "多言語 データ ソース コンポーネント概要", + "href": "data-sources/olap/multidimensional-data-source-components-overview.mdx", + "order": 0, + "slug": "multidimensional-data-source-components-overview" + }, + { + "name": "igOlapFlatDataSource", + "href": "data-sources/olap/flat/igolapflatdatasource.mdx", + "order": 1, + "items": [ + { + "name": "igOlapFlatDataSource の概要", + "href": "data-sources/olap/flat/igolapflatdatasource-overview.mdx", + "order": 0, + "slug": "igolapflatdatasource-overview" + }, + { + "name": "igOlapFlatDataSource の追加", + "href": "data-sources/olap/flat/adding/igolapflatdatasource-adding.mdx", + "order": 1, + "items": [ + { + "name": "igOlapFlatDataSource の HTML ページへの追加", + "href": "data-sources/olap/flat/adding/igolapflatdatasource-adding-to-an-html-page.mdx", + "order": 0, + "slug": "igolapflatdatasource-adding-to-an-html-page" + }, + { + "name": "igOlapFlatDataSource を ASP.NET MVC アプリケーションに追加", + "href": "data-sources/olap/flat/adding/igolapflatdatasource-adding-using-mvc-helper.mdx", + "order": 1, + "slug": "igolapflatdatasource-adding-using-mvc-helper" + } + ], + "slug": "igolapflatdatasource-adding" + }, + { + "name": "メタデータの定義", + "href": "data-sources/olap/flat/igolapflatdatasource-defining-metadata.mdx", + "order": 2, + "slug": "igolapflatdatasource-defining-metadata" + }, + { + "name": "ピボット グリッドの結果セットの表形式ビューの構成", + "href": "data-sources/olap/flat/configuring-the-tabular-view.mdx", + "order": 3, + "slug": "configuring-the-tabular-view" + }, + { + "name": "jQuery と MVC API リンク", + "href": "data-sources/olap/flat/igolapflatdatasource-api-links.mdx", + "order": 4, + "slug": "igolapflatdatasource-api-links" + } + ], + "slug": "igolapflatdatasource" + }, + { + "name": "igOlapXmlaDataSource", + "href": "data-sources/olap/xmla/igolapxmladatasource.mdx", + "order": 2, + "items": [ + { + "name": "igOlapXmlaDataSource の概要", + "href": "data-sources/olap/xmla/igolapxmladatasource-overview.mdx", + "order": 0, + "slug": "igolapxmladatasource-overview" + }, + { + "name": "01_Add", + "href": "data-sources/olap/xmla/add/igolapxmladatasource-adding.mdx", + "order": 1, + "slug": "igolapxmladatasource-adding" + }, + { + "name": "igOlapXmlaDataSource の構成", + "href": "data-sources/olap/xmla/config/igolapxmladatasource-configuring.mdx", + "order": 2, + "items": [ + { + "name": "データ プロバイダーの構成", + "href": "data-sources/olap/xmla/config/data-provider/igolapxmladatasource-data-provider-configuration.mdx", + "order": 0, + "items": [ + { + "name": "データ プロバイダーの構成の概要", + "href": "data-sources/olap/xmla/config/data-provider/igolapxmladatasource-data-provider-configuration-overview.mdx", + "order": 0, + "slug": "igolapxmladatasource-data-provider-configuration-overview" + }, + { + "name": "igOlapXmlaDataSource の MSMDPUMP 用の IIS の構成", + "href": "data-sources/olap/xmla/config/data-provider/iis/igolapxmladatasource-configuring-iis-for-msmdpump.mdx", + "order": 1, + "items": [ + { + "name": "クロスドメイン OLAP データの IIS の構成", + "href": "data-sources/olap/xmla/config/data-provider/iis/igolapxmladatasource-configuring-iis-for-cross-domain-olap-data.mdx", + "order": 0, + "slug": "igolapxmladatasource-configuring-iis-for-cross-domain-olap-data" + }, + { + "name": "Mozilla Firefox ブラウザーの認証済みアクセスの構成", + "href": "data-sources/olap/xmla/config/data-provider/iis/igolapxmladatasource-configuring-authenticated-access-for-firefox.mdx", + "slug": "igolapxmladatasource-configuring-authenticated-access-for-firefox" + } + ], + "slug": "igolapxmladatasource-configuring-iis-for-msmdpump" + }, + { + "name": "リモート プロバイダーからの igOlapXmlaDataSource の構成", + "href": "data-sources/olap/xmla/config/data-provider/igolapxmladatasource-configuring-through-a-remote-provider.mdx", + "slug": "igolapxmladatasource-configuring-through-a-remote-provider" + } + ], + "slug": "igolapxmladatasource-data-provider-configuration" + }, + { + "name": "ピボット グリッドの結果セットの表形式ビューの構成", + "href": "data-sources/olap/flat/configuring-the-tabular-view.mdx", + "order": 3, + "slug": "configuring-the-tabular-view" + } + ], + "slug": "igolapxmladatasource-configuring" + }, + { + "name": "既知の問題と制限", + "href": "data-sources/olap/xmla/igolapxmladatasource-known-issues-and-limitations.mdx", + "order": 3, + "slug": "igolapxmladatasource-known-issues-and-limitations" + } + ], + "slug": "igolapxmladatasource" + } + ], + "slug": "multidimensional-data-source-components" + }, + { + "name": "igDataSource", + "href": "data-sources/igdatasource/igdatasource.mdx", + "items": [ + { + "name": "igDataSource の概要", + "href": "data-sources/igdatasource/igdatasource-overview.mdx", + "order": 0, + "slug": "igdatasource-igdatasource-overview" + }, + { + "name": "igDataSource のクライアント側データへのバインド", + "href": "data-sources/igdatasource/binding-igdatasource-to-client-side-data.mdx", + "order": 1, + "slug": "igdatasource-binding-igdatasource-to-client-side-data" + }, + { + "name": "igDataSource を REST サービスへバインド", + "href": "data-sources/igdatasource/binding-to-rest-services.mdx", + "order": 2, + "slug": "igdatasource-binding-to-rest-services" + }, + { + "name": "igDataSource を XML ドキュメントへバインド", + "href": "data-sources/igdatasource/binding-to-xml.mdx", + "order": 3, + "slug": "igdatasource-binding-to-xml" + }, + { + "name": "igDataSource を WCF データ サービスへバインド", + "href": "data-sources/igdatasource/binding-to-wcf-data-services.mdx", + "order": 4, + "slug": "igdatasource-binding-to-wcf-data-services" + }, + { + "name": "DataSchema を使用したデータ変換の実行", + "href": "data-sources/igdatasource/using-dataschema.mdx", + "order": 5, + "slug": "igdatasource-using-dataschema" + }, + { + "name": "既知の問題と制限", + "href": "data-sources/igdatasource/igdatasource-known-issues.mdx", + "order": 6, + "slug": "igdatasource-igdatasource-known-issues" + }, + { + "name": "API リファレンス", + "href": "data-sources/igdatasource/igdatasource-javascript-api.mdx", + "order": 7, + "slug": "igdatasource-igdatasource-javascript-api" + }, + { + "name": "HTML テーブル データへのバインド", + "href": "data-sources/igdatasource/binding-to-html-table-data.mdx", + "order": 8, + "slug": "igdatasource-binding-to-html-table-data" + } + ], + "slug": "igdatasource-igdatasource" + } + ], + "slug": "data-source-components" + }, + { + "name": "Ignite UI for ASP.NET MVC", + "href": "asp-net-mvc/aspnet-mvc-landingpage.mdx", + "order": 5, + "items": [ + { + "name": "Infragistics Excel Engine", + "href": "asp-net-mvc/excel-engine/win-infragistics-excel-engine.mdx", + "order": 0, + "items": [ + { + "name": "Infragistics Excel Engine の理解", + "href": "asp-net-mvc/excel-engine/understanding/understanding-the-infragistics-excel-engine.mdx", + "order": 0, + "items": [ + { + "name": "Excel オブジェクト モデル", + "href": "asp-net-mvc/excel-engine/understanding/excel-object-model.mdx", + "slug": "excelengine-excel-object-model" + }, + { + "name": "サポートされるバージョンの Microsoft Excel", + "href": "asp-net-mvc/excel-engine/understanding/supported-versions-of-microsoft-excel.mdx", + "slug": "excelengine-supported-versions-of-microsoft-excel" + } + ], + "slug": "excelengine-understanding-the-infragistics-excel-engine" + }, + { + "name": "Infragistics Excel Engine の使用", + "href": "asp-net-mvc/excel-engine/using/using-the-infragistics-excel-engine.mdx", + "order": 1, + "items": [ + { + "name": "参照文字列による Cells および Regions のアクセス", + "href": "asp-net-mvc/excel-engine/using/accessing-cells-and-regions-by-their-reference-strings.mdx", + "slug": "excelengine-accessing-cells-and-regions-by-their-reference-strings" + }, + { + "name": "ドキュメント プロパティをワークブックに追加", + "href": "asp-net-mvc/excel-engine/using/add-document-properties-to-a-workbook.mdx", + "slug": "excelengine-add-document-properties-to-a-workbook" + }, + { + "name": "画像をワークシートに追加", + "href": "asp-net-mvc/excel-engine/using/add-an-image-to-a-worksheet.mdx", + "slug": "excelengine-add-an-image-to-a-worksheet" + }, + { + "name": "形状をワークシートに追加", + "href": "asp-net-mvc/excel-engine/using/adding-shapes-to-a-worksheet.mdx", + "slug": "excelengine-adding-shapes-to-a-worksheet" + }, + { + "name": "Excel ファイルのセルへのハイパーリンクの追加", + "href": "asp-net-mvc/excel-engine/using/adding-a-hyperlink-to-a-cell-in-an-excel-file.mdx", + "slug": "excelengine-adding-a-hyperlink-to-a-cell-in-an-excel-file" + }, + { + "name": "スタイルをセルに適用", + "href": "asp-net-mvc/excel-engine/using/applying-styles-to-cells.mdx", + "slug": "excelengine-applying-styles-to-cells" + }, + { + "name": "注文合計を計算", + "href": "asp-net-mvc/excel-engine/using/calculating-order-totals.mdx", + "slug": "excelengine-calculating-order-totals" + }, + { + "name": "Worksheet セル内のコメント", + "href": "asp-net-mvc/excel-engine/using/comments-in-a-worksheet-cell.mdx", + "slug": "excelengine-comments-in-a-worksheet-cell" + }, + { + "name": "ワークブックを作成", + "href": "asp-net-mvc/excel-engine/using/create-a-workbook.mdx", + "slug": "excelengine-create-a-workbook" + }, + { + "name": "Office 2007 XLSX 形式でワークブックを作成", + "href": "asp-net-mvc/excel-engine/using/creating-a-workbook-in-office-2007-xlsx-format.mdx", + "slug": "excelengine-creating-a-workbook-in-office-2007-xlsx-format" + }, + { + "name": "行と列をフリーズ", + "href": "asp-net-mvc/excel-engine/using/freeze-rows-and-columns.mdx", + "slug": "excelengine-freeze-rows-and-columns" + }, + { + "name": "Excel ファイルから数式の値を取得", + "href": "asp-net-mvc/excel-engine/using/getting-the-value-of-a-formula-from-an-excel-file.mdx", + "slug": "excelengine-getting-the-value-of-a-formula-from-an-excel-file" + }, + { + "name": "サポートされる定義済み関数のリスト", + "href": "asp-net-mvc/excel-engine/using/list-of-supported-built-in-functions.mdx" + }, + { + "name": "セルの結合", + "href": "asp-net-mvc/excel-engine/using/merge-cells.mdx", + "slug": "excelengine-merge-cells" + }, + { + "name": "Excel ワークブック内でのワークシートの移動", + "href": "asp-net-mvc/excel-engine/using/moving-a-worksheet-within-an-excel-workbook.mdx", + "slug": "excelengine-moving-a-worksheet-within-an-excel-workbook" + }, + { + "name": "Office 2007 XLSX ファイル生成の参照と依存", + "href": "asp-net-mvc/excel-engine/using/office-2007-xlsx-file-generation-references-and-dependencies.mdx", + "slug": "excelengine-office-2007-xlsx-file-generation-references-and-dependencies" + }, + { + "name": "DataSet からのデータをワークシートに格納", + "href": "asp-net-mvc/excel-engine/using/populating-a-worksheet-from-a-dataset.mdx", + "slug": "excelengine-populating-a-worksheet-from-a-dataset" + }, + { + "name": "Excel 2007 XLSX ファイルをワークブックに読み込む", + "href": "asp-net-mvc/excel-engine/using/read-an-excel-2007-xlsx-file-into-a-workbook.mdx", + "slug": "excelengine-read-an-excel-2007-xlsx-file-into-a-workbook" + }, + { + "name": "Excel ファイルをワークブックに読み取る", + "href": "asp-net-mvc/excel-engine/using/read-an-excel-file-into-a-workbook.mdx", + "slug": "excelengine-read-an-excel-file-into-a-workbook" + }, + { + "name": "行と列のサイズを変更", + "href": "asp-net-mvc/excel-engine/using/resizing-rows-and-columns.mdx", + "slug": "excelengine-resizing-rows-and-columns" + }, + { + "name": "Excel テンプレート フォーマットでファイルを保存および読み込み", + "href": "asp-net-mvc/excel-engine/using/save-and-load-files-in-excel-template-format.mdx", + "slug": "excelengine-save-and-load-files-in-excel-template-format" + }, + { + "name": "VBA コードのある Excel ワークブックのサポート", + "href": "asp-net-mvc/excel-engine/using/support-for-excel-workbooks-with-vba-code.mdx", + "slug": "excelengine-support-for-excel-workbooks-with-vba-code" + }, + { + "name": "ワークブックを Excel ファイルに書き出す", + "href": "asp-net-mvc/excel-engine/using/write-a-workbook-to-an-excel-file.mdx", + "slug": "excelengine-write-a-workbook-to-an-excel-file" + } + ], + "slug": "excelengine-using-the-infragistics-excel-engine" + }, + { + "name": "Infragistics Excel Engine の配備", + "href": "asp-net-mvc/excel-engine/deploying-the-infragistics-excel-engine.mdx", + "order": 2, + "slug": "excelengine-deploying-the-infragistics-excel-engine" + }, + { + "name": "API の概要", + "href": "asp-net-mvc/excel-engine/api-overview.mdx", + "slug": "excelengine-api-overview" + } + ], + "slug": "win-infragistics-excel-engine" + }, + { + "name": "Infragistics Document Engine", + "href": "asp-net-mvc/document-engine/win-infragistics-document-engine.mdx", + "order": 1, + "items": [ + { + "name": "Infragistics Document Engine にようこそ", + "href": "asp-net-mvc/document-engine/welcome-to-infragistics-document-engine.mdx", + "order": 0, + "slug": "documentengine-welcome-to-infragistics-document-engine" + }, + { + "name": "Infragistics Document Engine を使用した作業の開始", + "href": "asp-net-mvc/document-engine/getting-started-with-infragistics-document-engine.mdx", + "order": 1, + "slug": "documentengine-getting-started-with-infragistics-document-engine" + }, + { + "name": "レポートの記述", + "href": "asp-net-mvc/document-engine/writing/writing-reports.mdx", + "order": 2, + "items": [ + { + "name": "レポート要素", + "href": "asp-net-mvc/document-engine/writing/elements/report-elements.mdx", + "items": [ + { + "name": "DocumentEngine レポート レイアウト", + "href": "asp-net-mvc/document-engine/writing/elements/layout/report-layout.mdx", + "order": 0, + "items": [ + { + "name": "レイアウト要素比較表", + "href": "asp-net-mvc/document-engine/writing/elements/layout/layout-element-comparison-table.mdx", + "order": 0, + "slug": "documentengine-layout-element-comparison-table" + }, + { + "name": "高度なレイアウト要素", + "href": "asp-net-mvc/document-engine/writing/elements/layout/advanced/advanced-layout-elements.mdx", + "order": 1, + "items": [ + { + "name": "チェーン", + "href": "asp-net-mvc/document-engine/writing/elements/layout/advanced/chain.mdx", + "slug": "documentengine-chain" + }, + { + "name": "ギャップ", + "href": "asp-net-mvc/document-engine/writing/elements/layout/advanced/gap.mdx", + "slug": "documentengine-gap" + }, + { + "name": "回転器", + "href": "asp-net-mvc/document-engine/writing/elements/layout/advanced/rotator.mdx", + "slug": "documentengine-rotator" + }, + { + "name": "規則", + "href": "asp-net-mvc/document-engine/writing/elements/layout/advanced/rule.mdx", + "slug": "documentengine-rule" + }, + { + "name": "サイト", + "href": "asp-net-mvc/document-engine/writing/elements/layout/advanced/site.mdx", + "slug": "documentengine-site" + }, + { + "name": "ストレッチャ", + "href": "asp-net-mvc/document-engine/writing/elements/layout/advanced/stretcher.mdx", + "slug": "documentengine-stretcher" + } + ], + "slug": "documentengine-advanced-layout-elements" + }, + { + "name": "コンテナーと条件", + "href": "asp-net-mvc/document-engine/writing/elements/layout/container-and-condition.mdx", + "order": 1, + "slug": "documentengine-container-and-condition" + }, + { + "name": "バンド", + "href": "asp-net-mvc/document-engine/writing/elements/layout/band.mdx", + "order": 2, + "slug": "documentengine-band" + }, + { + "name": "フロー", + "href": "asp-net-mvc/document-engine/writing/elements/layout/flow.mdx", + "order": 3, + "slug": "documentengine-flow" + }, + { + "name": "グループ", + "href": "asp-net-mvc/document-engine/writing/elements/layout/group.mdx", + "order": 4, + "slug": "documentengine-group" + }, + { + "name": "改ページ", + "href": "asp-net-mvc/document-engine/writing/elements/layout/page-break.mdx", + "order": 5, + "slug": "documentengine-page-break" + }, + { + "name": "レポート", + "href": "asp-net-mvc/document-engine/writing/elements/layout/report/report.mdx", + "order": 6, + "items": [ + { + "name": "レポートをパブリッシュ", + "href": "asp-net-mvc/document-engine/writing/elements/layout/report/publish-a-report.mdx", + "slug": "documentengine-publish-a-report" + }, + { + "name": "Report 要素", + "href": "asp-net-mvc/document-engine/writing/elements/layout/report/report-element.mdx", + "slug": "documentengine-report-element" + }, + { + "name": "レポートを公開するときの PageOrientation の設定", + "href": "asp-net-mvc/document-engine/writing/elements/layout/report/setting-pageorientation-when-publishing-a-report.mdx", + "slug": "documentengine-setting-pageorientation-when-publishing-a-report" + } + ], + "slug": "documentengine-report" + }, + { + "name": "セクション", + "href": "asp-net-mvc/document-engine/writing/elements/layout/section/section.mdx", + "order": 7, + "items": [ + { + "name": "ページ番号の追加", + "href": "asp-net-mvc/document-engine/writing/elements/layout/section/add-page-numbering.mdx", + "slug": "documentengine-add-page-numbering" + }, + { + "name": "Section 要素", + "href": "asp-net-mvc/document-engine/writing/elements/layout/section/section-element.mdx", + "slug": "documentengine-section-element" + } + ], + "slug": "documentengine-section" + }, + { + "name": "セグメント", + "href": "asp-net-mvc/document-engine/writing/elements/layout/segment.mdx", + "order": 8, + "slug": "documentengine-segment" + } + ], + "slug": "documentengine-report-layout" + }, + { + "name": "パターン コンテンツ", + "href": "asp-net-mvc/document-engine/writing/elements/pattern/pattern-content.mdx", + "order": 1, + "items": [ + { + "name": "グリッド", + "href": "asp-net-mvc/document-engine/writing/elements/pattern/grids.mdx", + "slug": "documentengine-grids" + }, + { + "name": "リスト", + "href": "asp-net-mvc/document-engine/writing/elements/pattern/lists.mdx", + "slug": "documentengine-lists" + }, + { + "name": "表", + "href": "asp-net-mvc/document-engine/writing/elements/pattern/tables.mdx", + "slug": "documentengine-tables" + }, + { + "name": "テキスト", + "href": "asp-net-mvc/document-engine/writing/elements/pattern/text.mdx", + "slug": "documentengine-text" + }, + { + "name": "ツリー", + "href": "asp-net-mvc/document-engine/writing/elements/pattern/trees.mdx", + "slug": "documentengine-trees" + } + ], + "slug": "documentengine-pattern-content" + }, + { + "name": "クイック コンテンツ", + "href": "asp-net-mvc/document-engine/writing/elements/quick/quick-content.mdx", + "order": 2, + "items": [ + { + "name": "クイック画像", + "href": "asp-net-mvc/document-engine/writing/elements/quick/quick-image.mdx", + "order": 0, + "slug": "documentengine-quick-image" + }, + { + "name": "クイック リスト", + "href": "asp-net-mvc/document-engine/writing/elements/quick/quick-list.mdx", + "slug": "documentengine-quick-list" + }, + { + "name": "クイック表", + "href": "asp-net-mvc/document-engine/writing/elements/quick/quick-table.mdx", + "slug": "documentengine-quick-table" + }, + { + "name": "クイック テキスト", + "href": "asp-net-mvc/document-engine/writing/elements/quick/quick-text.mdx", + "slug": "documentengine-quick-text" + } + ], + "slug": "documentengine-quick-content" + }, + { + "name": "既知の問題と制限", + "href": "asp-net-mvc/document-engine/writing/elements/known-issues.mdx", + "slug": "documentengine-known-issues" + }, + { + "name": "ナビゲーション ヘルパー", + "href": "asp-net-mvc/document-engine/writing/elements/navigation/navigation-helpers.mdx", + "items": [ + { + "name": "ブックマーク", + "href": "asp-net-mvc/document-engine/writing/elements/navigation/bookmarks.mdx", + "slug": "documentengine-bookmarks" + }, + { + "name": "インデックス", + "href": "asp-net-mvc/document-engine/writing/elements/navigation/index.mdx", + "slug": "documentengine-index" + }, + { + "name": "目次", + "href": "asp-net-mvc/document-engine/writing/elements/navigation/table-of-contents.mdx", + "slug": "documentengine-table-of-contents" + } + ], + "slug": "documentengine-navigation-helpers" + } + ], + "slug": "documentengine-report-elements" + }, + { + "name": "レポート グラフィックス", + "href": "asp-net-mvc/document-engine/writing/graphics/report-graphics.mdx", + "items": [ + { + "name": "ブラシ", + "href": "asp-net-mvc/document-engine/writing/graphics/brushes.mdx", + "slug": "documentengine-brushes" + }, + { + "name": "キャンバス", + "href": "asp-net-mvc/document-engine/writing/graphics/canvas.mdx", + "slug": "documentengine-canvas" + }, + { + "name": "色", + "href": "asp-net-mvc/document-engine/writing/graphics/colors.mdx", + "slug": "documentengine-colors" + }, + { + "name": "フォント", + "href": "asp-net-mvc/document-engine/writing/graphics/fonts.mdx", + "slug": "documentengine-fonts" + }, + { + "name": "ペン", + "href": "asp-net-mvc/document-engine/writing/graphics/pens.mdx", + "slug": "documentengine-pens" + }, + { + "name": "図形", + "href": "asp-net-mvc/document-engine/writing/graphics/shapes.mdx", + "slug": "documentengine-shapes" + } + ], + "slug": "documentengine-report-graphics" + } + ], + "slug": "documentengine-writing-reports" + }, + { + "name": "Infragistics Document Engine の配備", + "href": "asp-net-mvc/document-engine/deploying-infragistics-document-engine.mdx", + "order": 3, + "slug": "documentengine-deploying-infragistics-document-engine" + }, + { + "name": "API の概要", + "href": "asp-net-mvc/document-engine/api-overview.mdx", + "order": 4, + "slug": "documentengine-api-overview" + } + ], + "slug": "win-infragistics-document-engine" + }, + { + "name": "Infragistics Word ライブラリ", + "href": "asp-net-mvc/word-library/word-infragistics-word-library.mdx", + "order": 2, + "items": [ + { + "name": "Infragistics Word ライブラリの理解", + "href": "asp-net-mvc/word-library/understanding-infragistics-word-library/word-understanding-infragistics-word-library.mdx", + "items": [ + { + "name": "Infragistics Word ライブラリについて", + "href": "asp-net-mvc/word-library/understanding-infragistics-word-library/word-about-infragistics-word-library.mdx", + "slug": "word-about-infragistics-word-library" + }, + { + "name": "Word 文書生成の参照と依存関係", + "href": "asp-net-mvc/word-library/understanding-infragistics-word-library/word-word-document-generation-references-and-dependencies.mdx", + "slug": "word-word-document-generation-references-and-dependencies" + } + ], + "slug": "word-understanding-infragistics-word-library" + }, + { + "name": "Infragistics Word ライブラリの使用", + "href": "asp-net-mvc/word-library/using-infragistics-word-library/word-using-the-infragistics-word-library.mdx", + "items": [ + { + "name": "Word API の概要", + "href": "asp-net-mvc/word-library/using-infragistics-word-library/word-api-overview.mdx", + "slug": "word-api-overview" + }, + { + "name": "画像を Word 文書に追加", + "href": "asp-net-mvc/word-library/using-infragistics-word-library/word-add-images-to-word-document.mdx", + "slug": "word-add-images-to-word-document" + }, + { + "name": "テーブルを Word 文書に追加", + "href": "asp-net-mvc/word-library/using-infragistics-word-library/word-add-table-to-word-document.mdx", + "slug": "word-add-table-to-word-document" + }, + { + "name": "書式設定を Word 文書に適用", + "href": "asp-net-mvc/word-library/using-infragistics-word-library/word-apply-formatting-to-word-document.mdx", + "slug": "word-apply-formatting-to-word-document" + }, + { + "name": "Word 文書の作成", + "href": "asp-net-mvc/word-library/using-infragistics-word-library/word-create-a-word-document.mdx", + "slug": "word-create-a-word-document" + }, + { + "name": "オブジェクト モデル アプローチで Word 文書を作成", + "href": "asp-net-mvc/word-library/using-infragistics-word-library/word-creating-word-document-using-object-model-approach.mdx", + "slug": "word-creating-word-document-using-object-model-approach" + }, + { + "name": "ヘッダー、フッター、ページ番号", + "href": "asp-net-mvc/word-library/using-infragistics-word-library/word-headers-footers-and-page-numbers.mdx", + "slug": "word-headers-footers-and-page-numbers" + } + ], + "slug": "word-using-the-infragistics-word-library" + } + ], + "slug": "word-infragistics-word-library" + }, + { + "name": "Ignite UI for ASP.NET MVC Scaffolder の Visual Studio 拡張機能", + "href": "asp-net-mvc/mvcscaffolding/mvc-scaffolding.mdx", + "order": 4, + "slug": "mvc-scaffolding" + }, + { + "name": "ラッパーの既知の問題と制限", + "href": "asp-net-mvc/igniteui-for-mvc-known-issues.mdx", + "order": 5, + "slug": "aspnet-mvc-wrappers-known-issues" + }, + { + "name": "Mobile ラッパーの既知の問題と制限", + "href": "asp-net-mvc/igniteui-for-mvc-mobile-known-issues.mdx", + "slug": "aspnet-mvc-mobile-wrappers-known-issues" + }, + { + "name": "Ignite UI for ASP.NET Core の使用", + "href": "asp-net-mvc/using-igniteui-controls-in-aspnet-core-project.mdx", + "slug": "mvc-aspnet-core3" + }, + { + "name": "Ignite UI for ASP.NET Core タグ ヘルパーの使用", + "href": "asp-net-mvc/using-ignite-ui-tag-helpers.mdx", + "slug": "tag-helpers" + } + ], + "slug": "asp.net-mvc-landingpage" + }, + { + "name": "Infragistics テンプレート エンジン", + "href": "infragistics-templating-engine/infragistics-templating-engine.mdx", + "order": 6, + "items": [ + { + "name": "テンプレート エンジンの参照の追加", + "href": "infragistics-templating-engine/adding-igtemplating-references.mdx", + "order": 0, + "slug": "adding-igtemplating-references" + }, + { + "name": "テンプレート エンジンの概要", + "href": "infragistics-templating-engine/igtemplating-overview.mdx", + "order": 1, + "slug": "igtemplating-overview" + }, + { + "name": "テンプレートの作成", + "href": "infragistics-templating-engine/creating-templates/creating-templates.mdx", + "order": 2, + "items": [ + { + "name": "代替行表示テンプレートの作成", + "href": "infragistics-templating-engine/creating-templates/creating-an-alternating-rows-template-igtemplating.mdx", + "order": 0, + "slug": "creating-an-alternating-rows-template-(igtemplating)" + }, + { + "name": "基本的な条件付きテンプレートの作成", + "href": "infragistics-templating-engine/creating-templates/creating-basic-conditional-template.mdx", + "order": 1, + "slug": "creating-basic-conditional-template" + }, + { + "name": "基本的な置換テンプレートの作成", + "href": "infragistics-templating-engine/creating-templates/creating-basic-substitution-template.mdx", + "order": 2, + "slug": "creating-basic-substitution-template" + }, + { + "name": "複合プロパティ置換テンプレートの作成", + "href": "infragistics-templating-engine/creating-templates/creating-complex-property-substitution-template.mdx", + "order": 3, + "slug": "creating-complex-property-substitution-template" + }, + { + "name": "デフォルト ステートメントを含む条件付きテンプレートの作成", + "href": "infragistics-templating-engine/creating-templates/creating-conditional-template-containing-default-statement.mdx", + "order": 4, + "slug": "creating-conditional-template-containing-default-statement" + }, + { + "name": "デフォルト ステートメントを含む複数条件付きテンプレートの作成", + "href": "infragistics-templating-engine/creating-templates/creating-multi-conditional-template-containing-default-statement.mdx", + "order": 5, + "slug": "creating-multi-conditional-template-containing-default-statement" + }, + { + "name": "ネスト ブロック テンプレートの作成", + "href": "infragistics-templating-engine/creating-templates/creating-nested-blocks-template.mdx", + "order": 6, + "slug": "creating-nested-blocks-template" + } + ], + "slug": "creating-templates" + } + ], + "slug": "infragistics-templating-engine" + }, + { + "name": "新機能", + "href": "whats-new/jquery-whats-new-landing-page.mdx", + "order": 7, + "items": [ + { + "name": "変更ログ", + "href": "whats-new/00-general-changelog.mdx", + "order": 0, + "slug": "general-changelog" + }, + { + "name": "新機能のリビジョン履歴", + "href": "whats-new/revision-history/jquery-whats-new-revision-history.mdx", + "order": 2, + "items": [ + { + "name": "2023 Volume 2 の新機能", + "href": "whats-new/revision-history/00-whats-new-in-2023-volume2.mdx", + "order": 0, + "slug": "whats-new-in-2023-volume2" + }, + { + "name": "2022 Volume 2 の新機能", + "href": "whats-new/revision-history/01-whats-new-in-2022-volume2.mdx", + "order": 1, + "slug": "whats-new-in-2022-volume2" + }, + { + "name": "2022 Volume 1 の新機能", + "href": "whats-new/revision-history/02-whats-new-in-2022-volume1.mdx", + "order": 2, + "slug": "whats-new-in-2022-volume1" + }, + { + "name": "2021 Volume 2 の新機能", + "href": "whats-new/revision-history/03-whats-new-in-2021-volume2.mdx", + "order": 3, + "slug": "whats-new-in-2021-volume2" + }, + { + "name": "2021 Volume 1 の新機能", + "href": "whats-new/revision-history/04-whats-new-in-2021-volume1.mdx", + "order": 4, + "slug": "whats-new-in-2021-volume1" + }, + { + "name": "2020 Volume 2 の新機能", + "href": "whats-new/revision-history/05-whats-new-in-2020-volume2.mdx", + "order": 5, + "slug": "whats-new-in-2020-volume2" + }, + { + "name": "2019 Volume 2 の新機能", + "href": "whats-new/revision-history/06-whats-new-in-2019-volume2.mdx", + "order": 6, + "slug": "whats-new-in-2019-volume2" + }, + { + "name": "2018 Volume 2 の新機能", + "href": "whats-new/revision-history/07-whats-new-in-2018-volume2.mdx", + "order": 7, + "slug": "whats-new-in-2018-volume2" + }, + { + "name": "2018 Volume 1 の新機能", + "href": "whats-new/revision-history/08-whats-new-in-2018-volume1.mdx", + "order": 8, + "slug": "whats-new-in-2018-volume1" + }, + { + "name": "2017 Volume 2 の新機能", + "href": "whats-new/revision-history/09-whats-new-in-2017-volume2.mdx", + "order": 9, + "slug": "whats-new-in-2017-volume2" + }, + { + "name": "2017 Volume 1 の新機能", + "href": "whats-new/revision-history/10-whats-new-in-2017-volume1.mdx", + "order": 10, + "slug": "whats-new-in-2017-volume1" + }, + { + "name": "2014 Volume 1 の新機能", + "href": "whats-new/revision-history/16-whats-new-in-2014-volume1.mdx", + "order": 16, + "slug": "whats-new-in-2014-volume1" + }, + { + "name": "2013 Volume 2 の新機能", + "href": "whats-new/revision-history/17-whats-new-in-2013-volume2.mdx", + "order": 17, + "slug": "whats-new-in-2013-volume2" + }, + { + "name": "2013 Volume 1 の新機能", + "href": "whats-new/revision-history/18-whats-new-in-2013-volume1.mdx", + "order": 18, + "slug": "whats-new-in-2013-volume1" + }, + { + "name": "2012 Volume 2 の新機能", + "href": "whats-new/revision-history/19-whats-new-in-2012-volume2.mdx", + "order": 19, + "slug": "whats-new-in-2012-volume2" + }, + { + "name": "2012 Volume 1 の新機能", + "href": "whats-new/revision-history/20-jquery-whats-new-12-1-landing-page.mdx", + "order": 20, + "slug": "jquery-whats-new-12-1-landing-page" + }, + { + "name": "2011 Volume 2 の新機能", + "href": "whats-new/revision-history/21-whats-new-in-2011-volume2.mdx", + "order": 21, + "slug": "whats-new-in-2011-volume2" + } + ], + "slug": "jquery-whats-new-revision-history" + } + ], + "slug": "jquery-whats-new-landing-page" + }, + { + "name": "既知の問題", + "href": "known-issues/known-issues.mdx", + "order": 8, + "items": [ + { + "name": "既知の問題と制限", + "href": "known-issues/and-limitations-2024-volume-1.mdx", + "order": 1, + "slug": "known-issues-and-limitations" + }, + { + "name": "既知の問題点の改訂履歴", + "href": "known-issues/known-issues-revision-history/revision-history.mdx", + "order": 3, + "items": [ + { + "name": "2023 Volume 2 の既知の問題と制限", + "href": "known-issues/known-issues-revision-history/00-known-issues-and-limitations-2023-volume-2.mdx", + "order": 0, + "slug": "known-issues-and-limitations-2023-volume-2" + }, + { + "name": "2023 Volume 1 の既知の問題と制限", + "href": "known-issues/known-issues-revision-history/01-known-issues-and-limitations-2023-volume-1.mdx", + "order": 1, + "slug": "known-issues-and-limitations-2023-volume-1" + }, + { + "name": "2022 Volume 2 の既知の問題と制限", + "href": "known-issues/known-issues-revision-history/02-known-issues-and-limitations-2022-volume-2.mdx", + "order": 2, + "slug": "known-issues-and-limitations-2022-volume-2" + }, + { + "name": "2022 Volume 1 の既知の問題と制限", + "href": "known-issues/known-issues-revision-history/03-known-issues-and-limitations-2022-volume-1.mdx", + "order": 3, + "slug": "known-issues-and-limitations-2022-volume-1" + }, + { + "name": "2021 Volume 2 の既知の問題と制限", + "href": "known-issues/known-issues-revision-history/04-known-issues-and-limitations-2021-volume-2.mdx", + "order": 4, + "slug": "known-issues-and-limitations-2021-volume-2" + }, + { + "name": "2021 Volume 1 の既知の問題と制限", + "href": "known-issues/known-issues-revision-history/05-known-issues-and-limitations-2021-volume-1.mdx", + "order": 5, + "slug": "known-issues-and-limitations-2021-volume-1" + }, + { + "name": "2020 Volume 2 の既知の問題と制限", + "href": "known-issues/known-issues-revision-history/06-known-issues-and-limitations-2020-volume-2.mdx", + "order": 6, + "slug": "known-issues-and-limitations-2020-volume-2" + }, + { + "name": "2020 Volume 1 の既知の問題と制限", + "href": "known-issues/known-issues-revision-history/07-known-issues-and-limitations-2020-volume-1.mdx", + "order": 7, + "slug": "known-issues-and-limitations-2020-volume-1" + }, + { + "name": "2019 Volume 2 の既知の問題と制限", + "href": "known-issues/known-issues-revision-history/08-known-issues-and-limitations-2019-volume-2.mdx", + "order": 8, + "slug": "known-issues-and-limitations-2019-volume-2" + }, + { + "name": "2019 Volume 1 の既知の問題と制限", + "href": "known-issues/known-issues-revision-history/09-known-issues-and-limitations-2019-volume-1.mdx", + "order": 9, + "slug": "known-issues-and-limitations-2019-volume-1" + }, + { + "name": "2018 Volume 2 の既知の問題と制限", + "href": "known-issues/known-issues-revision-history/10-known-issues-and-limitations-2018-volume-2.mdx", + "order": 10, + "slug": "known-issues-and-limitations-2018-volume-2" + }, + { + "name": "2018 Volume 1 の既知の問題と制限", + "href": "known-issues/known-issues-revision-history/11-known-issues-and-limitations-2018-volume-1.mdx", + "order": 11, + "slug": "known-issues-and-limitations-2018-volume-1" + }, + { + "name": "2017 Volume 2 の既知の問題と制限", + "href": "known-issues/known-issues-revision-history/12-known-issues-and-limitations-2017-volume-2.mdx", + "order": 12, + "slug": "known-issues-and-limitations-2017-volume-2" + }, + { + "name": "2017 Volume 1 の既知の問題と制限", + "href": "known-issues/known-issues-revision-history/13-known-issues-and-limitations-2017-volume-1.mdx", + "order": 13, + "slug": "known-issues-and-limitations-2017-volume-1" + }, + { + "name": "2016 Volume 2 の既知の問題と制限", + "href": "known-issues/known-issues-revision-history/14-known-issues-and-limitations-2016-volume-2.mdx", + "order": 14, + "slug": "known-issues-and-limitations-2016-volume-2" + }, + { + "name": "2016 Volume 1 の既知の問題と制限", + "href": "known-issues/known-issues-revision-history/15-known-issues-and-limitations-2016-volume-1.mdx", + "order": 15, + "slug": "known-issues-and-limitations-2016-volume-1" + }, + { + "name": "2015 Volume 2 の既知の問題と制限", + "href": "known-issues/known-issues-revision-history/16-known-issues-and-limitations-2015-volume-2.mdx", + "order": 16, + "slug": "known-issues-and-limitations-2015-volume-2" + }, + { + "name": "2015 Volume 1 の既知の問題と制限", + "href": "known-issues/known-issues-revision-history/17-known-issues-and-limitations-2015-volume-1.mdx", + "order": 17, + "slug": "known-issues-and-limitations-2015-volume-1" + }, + { + "name": "2014 Volume 2 の既知の問題と制限", + "href": "known-issues/known-issues-revision-history/18-known-issues-and-limitations-2014-volume-2.mdx", + "order": 18, + "slug": "known-issues-and-limitations-2014-volume-2" + }, + { + "name": "2014 Volume 1 の既知の問題と制限", + "href": "known-issues/known-issues-revision-history/19-known-issues-and-limitations-2014-volume-1.mdx", + "order": 19, + "slug": "known-issues-and-limitations-2014-volume-1" + }, + { + "name": "2013 Volume 2 の既知の問題と制限", + "href": "known-issues/known-issues-revision-history/20-known-issues-and-limitations-2013-volume-2.mdx", + "order": 20, + "slug": "known-issues-and-limitations-2013-volume-2" + }, + { + "name": "2013 Volume 1 の既知の問題と制限", + "href": "known-issues/known-issues-revision-history/21-known-issues-and-limitations-2013-volume-1.mdx", + "order": 21, + "slug": "known-issues-and-limitations-2013-volume-1" + }, + { + "name": "2012 Volume 2 の既知の問題と制限", + "href": "known-issues/known-issues-revision-history/22-known-issues-and-limitations-2012-volume-2.mdx", + "order": 22, + "slug": "known-issues-and-limitations-2012-volume-2" + }, + { + "name": "2012 Volume 1 の既知の問題と制限", + "href": "known-issues/known-issues-revision-history/23-known-issues-and-limitations-2012-volume-1.mdx", + "order": 23, + "slug": "known-issues-and-limitations-2012-volume-1" + }, + { + "name": "2011 Volume 2 の既知の問題と制限", + "href": "known-issues/known-issues-revision-history/24-known-issues-and-limitations-2011-volume-2.mdx", + "order": 24, + "slug": "known-issues-and-limitations-2011-volume-2" + }, + { + "name": "2011 Volume 1 の既知の問題と制限", + "href": "known-issues/known-issues-revision-history/25-known-issues-and-limitations-2011-volume-1.mdx", + "order": 25, + "slug": "known-issues-and-limitations-2011-volume-1" + } + ], + "slug": "known-issues-revision-history" + }, + { + "name": "重大な変更の改訂履歴", + "href": "known-issues/breaking-changes-revision-history/breaking-changes-revision-history.mdx", + "order": 4, + "items": [ + { + "name": "2023 Volume 2 の重大な変更", + "href": "known-issues/breaking-changes-revision-history/00-breaking-changes-2023-volume-2.mdx", + "order": 0, + "slug": "breaking-changes-2023-volume-2" + }, + { + "name": "2023 Volume 1 の重大な変更", + "href": "known-issues/breaking-changes-revision-history/01-breaking-changes-2023-volume-1.mdx", + "order": 1, + "slug": "breaking-changes-2023-volume-1" + }, + { + "name": "2022 Volume 2 の重大な変更", + "href": "known-issues/breaking-changes-revision-history/02-breaking-changes-2022-volume-2.mdx", + "order": 2, + "slug": "breaking-changes-2022-volume-2" + }, + { + "name": "2022 Volume 1 の重大な変更", + "href": "known-issues/breaking-changes-revision-history/03-breaking-changes-2022-volume-1.mdx", + "order": 3, + "slug": "breaking-changes-2022-volume-1" + }, + { + "name": "2021 Volume 2 の重大な変更", + "href": "known-issues/breaking-changes-revision-history/04-breaking-changes-2021-volume-2.mdx", + "order": 4, + "slug": "breaking-changes-2021-volume-1" + }, + { + "name": "2021 Volume 1 の重大な変更", + "href": "known-issues/breaking-changes-revision-history/05-breaking-changes-2021-volume-1.mdx", + "order": 5, + "slug": "breaking-changes-2021-volume-1" + }, + { + "name": "2020 Volume 2 の重大な変更", + "href": "known-issues/breaking-changes-revision-history/06-breaking-changes-2020-volume-2.mdx", + "order": 6, + "slug": "breaking-changes-2020-volume-2" + }, + { + "name": "2020 Volume 1 の重大な変更", + "href": "known-issues/breaking-changes-revision-history/07-breaking-changes-2020-volume-1.mdx", + "order": 7, + "slug": "breaking-changes-2020-volume-1" + }, + { + "name": "2019 Volume 2 の重大な変更", + "href": "known-issues/breaking-changes-revision-history/08-breaking-changes-2019-volume-2.mdx", + "order": 8, + "slug": "breaking-changes-2018-volume-2" + }, + { + "name": "2019 Volume 1 の重大な変更", + "href": "known-issues/breaking-changes-revision-history/09-breaking-changes-2019-volume-1.mdx", + "order": 9, + "slug": "breaking-changes-2019-volume-1" + }, + { + "name": "2018 Volume 2 の重大な変更", + "href": "known-issues/breaking-changes-revision-history/10-breaking-changes-2018-volume-2.mdx", + "order": 10, + "slug": "breaking-changes-2018-volume-2" + }, + { + "name": "2018 Volume 1 の重大な変更", + "href": "known-issues/breaking-changes-revision-history/11-breaking-changes-2018-volume-1.mdx", + "order": 11, + "slug": "breaking-changes-2018-volume-1" + }, + { + "name": "2017 Volume 2 の重大な変更", + "href": "known-issues/breaking-changes-revision-history/12-breaking-changes-2017-volume-2.mdx", + "order": 12, + "slug": "breaking-changes-2017-volume-2" + }, + { + "name": "2017 Volume 1 の重大な変更", + "href": "known-issues/breaking-changes-revision-history/13-breaking-changes-2017-volume-1.mdx", + "order": 13, + "slug": "breaking-changes-2017-volume-1" + }, + { + "name": "2016 Volume 2 の重大な変更", + "href": "known-issues/breaking-changes-revision-history/14-breaking-changes-2016-volume-2.mdx", + "order": 14, + "slug": "breaking-changes-2016-volume-2" + } + ], + "slug": "breaking-changes-revision-history" + } + ], + "slug": "known-issues" + }, + { + "name": "Infragistics JavaScript Excel ライブラリ", + "href": "javascript-excel-library/javascript-excel-library.mdx", + "order": 9, + "items": [ + { + "name": "Infragistics JavaScript Excel ライブラリの理解", + "href": "javascript-excel-library/understanding/the-infragistics-javascript-excel-library.mdx", + "order": 0, + "items": [ + { + "name": "JavaScript Excel ライブラリの概要", + "href": "javascript-excel-library/understanding/overview.mdx", + "slug": "javascript-excel-library-overview" + }, + { + "name": "サポートされるバージョンの Microsoft Excel", + "href": "javascript-excel-library/understanding/supported-versions-of-microsoft-excel.mdx", + "slug": "javascript-excel-library-supported-versions-of-microsoft-excel" + } + ], + "slug": "understanding-the-infragistics-javascript-excel-library" + }, + { + "name": "01_Using", + "href": "javascript-excel-library/using/the-javascript-excel-library.mdx", + "order": 1, + "items": [ + { + "name": "参照文字列による Cells および Regions のアクセス", + "href": "javascript-excel-library/using/accessing-cells-and-regions-by-their-reference-strings.mdx", + "slug": "javascript-excel-library-accessing-cells-and-regions-by-their-reference-strings" + }, + { + "name": "ドキュメント プロパティをワークブックに追加", + "href": "javascript-excel-library/using/add-document-properties-to-a-workbook.mdx", + "slug": "javascript-excel-library-add-document-properties-to-a-workbook" + }, + { + "name": "Excel ファイルのセルへのハイパーリンクの追加", + "href": "javascript-excel-library/using/adding-a-hyperlink-to-a-cell-in-an-excel-file.mdx", + "slug": "javascript-excel-library-adding-a-hyperlink-to-a-cell-in-an-excel-file" + }, + { + "name": "スパークラインを Excel ワークシートに追加", + "href": "javascript-excel-library/using/adding-a-sparkline-to-an-excel-worksheet.mdx", + "slug": "javaScript-excel-library-adding-a-sparkline-to-an-excel-worksheet" + }, + { + "name": "スタイルをセルに適用", + "href": "javascript-excel-library/using/applying-styles-to-cells.mdx", + "slug": "javascript-excel-library-applying-styles-to-cells" + }, + { + "name": "注文合計を計算", + "href": "javascript-excel-library/using/calculating-order-totals.mdx", + "slug": "javascript-excel-library-calculating-order-totals" + }, + { + "name": "Worksheet セル内のコメント", + "href": "javascript-excel-library/using/comments-in-a-worksheet-cell.mdx", + "slug": "javascript-excel-library-comments-in-a-worksheet-cell" + }, + { + "name": "条件付き書式", + "href": "javascript-excel-library/using/conditional-formatting.mdx", + "slug": "javascript-excel-library-conditional-formatting" + }, + { + "name": "ワークブックを作成", + "href": "javascript-excel-library/using/create-a-workbook.mdx", + "slug": "javascript-excel-library-create-a-workbook" + }, + { + "name": "Office 2007 XLSX 形式でワークブックを作成", + "href": "javascript-excel-library/using/creating-a-workbook-in-office-2007-xlsx-format.mdx", + "slug": "javascript-excel-library-creating-a-workbook-in-office-2007-xlsx-format" + }, + { + "name": "行と列をフリーズ", + "href": "javascript-excel-library/using/freeze-rows-and-columns.mdx", + "slug": "javascript-excel-library-freeze-rows-and-columns" + }, + { + "name": "Excel ファイルから数式の値を取得", + "href": "javascript-excel-library/using/getting-the-value-of-a-formula-from-an-excel-file.mdx", + "slug": "javascript-excel-library-getting-the-value-of-a-formula-from-an-excel-file" + }, + { + "name": "サポートされる定義済み関数のリスト", + "href": "javascript-excel-library/using/list-of-supported-built-in-functions.mdx" + }, + { + "name": "セルの結合", + "href": "javascript-excel-library/using/merge-cells.mdx", + "slug": "javascript-excel-library-merge-cells" + }, + { + "name": "Excel ワークブック内でのワークシートの移動", + "href": "javascript-excel-library/using/moving-a-worksheet-within-an-excel-workbook.mdx", + "slug": "javascript-excel-library-moving-a-worksheet-within-an-excel-workbook" + }, + { + "name": "Excel 2007 XLSX ファイルをワークブックに読み込む", + "href": "javascript-excel-library/using/read-an-excel-2007-xlsx-file-into-a-workbook.mdx", + "slug": "javascript-excel-library-read-an-excel-2007-xlsx-file-into-a-workbook" + }, + { + "name": "行と列のサイズを変更", + "href": "javascript-excel-library/using/resizing-rows-and-columns.mdx", + "slug": "javascript-excel-library-resizing-rows-and-columns" + }, + { + "name": "Excel テンプレート フォーマットでファイルを保存および読み込み", + "href": "javascript-excel-library/using/save-and-load-files-in-excel-template-format.mdx", + "slug": "javascript-excel-library-save-and-load-files-in-excel-template-format" + }, + { + "name": "ワークシートにチャートを追加", + "href": "javascript-excel-library/using/worksheet-charts.mdx", + "slug": "javascript-excel-library-worksheet-charts" + }, + { + "name": "ワークシート レベル フィルター", + "href": "javascript-excel-library/using/worksheet-level-filtering.mdx", + "slug": "igExcelEngineFiltering" + }, + { + "name": "ワークシート レベルの並べ替え", + "href": "javascript-excel-library/using/worksheet-level-sorting.mdx", + "slug": "igExcelEngineSorting" + } + ], + "slug": "using-the-javascript-excel-library" + }, + { + "name": "API の概要", + "href": "javascript-excel-library/api-overview.mdx", + "order": 3, + "slug": "api-overview" + } + ], + "slug": "javascript-excel-library" + }, + { + "name": "AngularJS ディレクティブ", + "href": "angularjs-directives/angularjs-directives.mdx", + "order": 10, + "items": [ + { + "name": "AngularJS サンプル", + "href": "angularjs-directives/angularjs-samples.mdx", + "order": 2, + "slug": "angularjs-samples" + } + ], + "slug": "angularjs-directives" + }, + { + "name": "TypeScript の定義", + "href": "typescript-definitions/typescript-definitions.mdx", + "order": 11, + "items": [ + { + "name": "TypeScript で Ignite UI for jQuery を使用", + "href": "typescript-definitions/using-ignite-ui-with-typescript.mdx", + "order": 0, + "slug": "using-ignite-ui-with-typescipt" + }, + { + "name": "TypeScript サンプル", + "href": "typescript-definitions/typescript-samples.mdx", + "order": 1, + "slug": "typescript-samples" + } + ], + "slug": "typescript-definitions" + } +] diff --git a/docs/jquery/src/env.d.ts b/docs/jquery/src/env.d.ts new file mode 100644 index 0000000000..de7511ba21 --- /dev/null +++ b/docs/jquery/src/env.d.ts @@ -0,0 +1 @@ +/// diff --git a/docs/jquery/src/pages/index.astro b/docs/jquery/src/pages/index.astro new file mode 100644 index 0000000000..5665326bd2 --- /dev/null +++ b/docs/jquery/src/pages/index.astro @@ -0,0 +1,61 @@ +--- +import { sidebar } from 'virtual:docs-template/site-meta'; +import { readFileSync, existsSync } from 'node:fs'; +import path from 'node:path'; +import { fileURLToPath } from 'node:url'; + +type SidebarEntry = { label: string; slug: string } | { label: string; items: SidebarEntry[] }; +type TocItem = { name?: string; href?: string; default?: boolean; items?: TocItem[] }; + +// root = docs/jquery/ +const root = path.join(path.dirname(fileURLToPath(import.meta.url)), '..', '..'); + +// toc.json lives at the project root (docs/jquery/toc.json) +const tocPath = path.join(root, 'toc.json'); +const toc: TocItem[] = existsSync(tocPath) + ? JSON.parse(readFileSync(tocPath, 'utf8')) + : []; + +function hrefToSlug(href: string): string { + return href.replace(/\\/g, '/').replace(/\.(md|mdx)$/i, '').toLowerCase().replace(/\/index$/, ''); +} + +function findDefaultSlug(items: TocItem[]): string | null { + for (const item of items) { + if (item.default && item.href) return hrefToSlug(item.href); + if (item.items) { + const found = findDefaultSlug(item.items); + if (found) return found; + } + } + return null; +} + +function firstSlug(items: SidebarEntry[]): string | null { + for (const item of items) { + if ('slug' in item) return item.slug; + if ('items' in item) { + const found = firstSlug(item.items); + if (found) return found; + } + } + return null; +} + +function slugExistsInSidebar(items: SidebarEntry[], target: string): boolean { + for (const item of items) { + if ('slug' in item && item.slug === target) return true; + if ('items' in item && slugExistsInSidebar(item.items, target)) return true; + } + return false; +} + +const typedSidebar = sidebar as SidebarEntry[]; +const defaultSlug = findDefaultSlug(toc); +const slug = (defaultSlug && slugExistsInSidebar(typedSidebar, defaultSlug)) + ? defaultSlug + : firstSlug(typedSidebar); +const base = import.meta.env.BASE_URL.replace(/\/$/, ''); +const redirectTo = slug ? `${base}/${slug}/` : `${base}/404/`; +return Astro.redirect(redirectTo, 301); +--- diff --git a/docs/jquery/toc.json b/docs/jquery/toc.json new file mode 100644 index 0000000000..ac06555ea2 --- /dev/null +++ b/docs/jquery/toc.json @@ -0,0 +1,6121 @@ +[ + { + "name": "Ignite UI for jQuery Overview", + "href": "igniteui-for-jquery-overview.mdx", + "order": 0, + "slug": "igniteui-for-jquery-overview" + }, + { + "name": "Getting Started with {environment:ProductName}", + "href": "general-and-getting-started/getting-started.mdx", + "order": 1, + "items": [ + { + "name": "Adding Controls to an MVC Project", + "href": "general-and-getting-started/adding-igniteui-controls-to-an-mvc-project.mdx", + "order": 0, + "slug": "adding-igniteui-controls-to-an-mvc-project" + }, + { + "name": "Adding Required Resources Manually", + "href": "general-and-getting-started/adding-the-required-resources-for-igniteui-for-jquery.mdx", + "order": 1, + "slug": "adding-the-required-resources-for-igniteui-for-jquery" + }, + { + "name": "Adding Required Resources Automatically with the Infragistics Loader", + "href": "general-and-getting-started/using-infragistics-loader.mdx", + "order": 2, + "slug": "using-infragistics-loader" + }, + { + "name": "Customizing the Localization of {environment:ProductName} Controls", + "href": "general-and-getting-started/customizing-the-localization-of-igniteui-for-jquery-controls.mdx", + "order": 3, + "slug": "customizing-the-localization-of-igniteui-for-jquery-controls" + }, + { + "name": "Defining Events with {environment:ProductNameMVC}", + "href": "general-and-getting-started/defining-events-with-aspnet-helper.mdx", + "order": 4, + "slug": "defining-events-with-aspnet-helper" + }, + { + "name": "Infragistics Content Delivery Network for {environment:ProductName}", + "href": "general-and-getting-started/deployment-guide-infragistics-content-delivery-networkcdn.mdx", + "order": 5, + "slug": "deployment-guide-infragistics-content-delivery-network(cdn)" + }, + { + "name": "JavaScript Files in {environment:ProductName}", + "href": "general-and-getting-started/deployment-guide-javascript-files.mdx", + "order": 6, + "slug": "deployment-guide-javascript-files" + }, + { + "name": "Styling and Theming", + "href": "general-and-getting-started/styling-and-theming/deployment-guide-styling-and-theming.mdx", + "order": 7, + "items": [ + { + "name": "Using Gradient Colors in Data Visualizations", + "href": "general-and-getting-started/styling-and-theming/using-gradient-colors-in-data-visualizations.mdx", + "order": 0, + "slug": "using-gradient-colors-in-data-visualizations" + }, + { + "name": "Customizing {environment:ProductName} Bootstrap Themes", + "href": "general-and-getting-started/styling-and-theming/customizing-ignite-ui-bootstrap-themes.mdx", + "order": 2, + "slug": "customizing-ignite-ui-bootstrap-themes" + } + ], + "slug": "deployment-guide-styling-and-theming" + }, + { + "name": "Touch Support for {environment:ProductName} Controls", + "href": "general-and-getting-started/touch-support-for-igniteui-for-jquery-controls.mdx", + "order": 8, + "slug": "touch-support-for-igniteui-for-jquery-controls" + }, + { + "name": "Upgrading Projects to the Latest {environment:ProductName} Version", + "href": "general-and-getting-started/manually-updating-previous-versions.mdx", + "order": 9, + "slug": "manually-updating-previous-versions" + }, + { + "name": "Using Events in {environment:ProductName}", + "href": "general-and-getting-started/using-events-in-igniteui-for-jquery.mdx", + "order": 10, + "slug": "using-events-in-igniteui-for-jquery" + }, + { + "name": "Using {environment:ProductName} in Browsers Without HTML5 or CSS3 Support", + "href": "general-and-getting-started/deployment-guide-using-igniteui-for-jquery-in-browsers-that-dont-support-html5-or-css3.mdx", + "order": 11, + "slug": "deployment-guide-using-igniteui-for-jquery-in-browsers-that-dont-support-html5-or-css3" + }, + { + "name": "Using JavaScript Resources in {environment:ProductName}", + "href": "general-and-getting-started/deployment-guide-javascript-resources.mdx", + "order": 12, + "slug": "deployment-guide-javascript-resources" + }, + { + "name": "Using {environment:ProductName} controls in different time zones", + "href": "general-and-getting-started/using-igniteui-controls-in-different-time-zones.mdx", + "order": 13, + "slug": "Using-IgniteUI-controls-in-different-time-zones" + }, + { + "name": "Formatting Dates, Numbers and Strings", + "href": "general-and-getting-started/formatting-dates-numbers-and-strings.mdx", + "order": 14, + "slug": "formatting-dates-numbers-and-strings" + }, + { + "name": "Using System.JS with {environment:ProductName} controls", + "href": "general-and-getting-started/using-systemjs-with-igniteui-controls.mdx", + "order": 15, + "slug": "Using-System.JS-with-IgniteUI-controls" + }, + { + "name": "History.js Integration with {environment:ProductName} controls", + "href": "general-and-getting-started/historyjs-integration-with-igniteui-controls.mdx", + "order": 16, + "slug": "historyjs-integration-with-igniteui-controls" + }, + { + "name": "Using {environment:ProductFamilyName} CLI", + "href": "general-and-getting-started/using-ignite-ui-cli.mdx", + "order": 17, + "slug": "Using-Ignite-UI-CLI" + }, + { + "name": "Using {environment:ProductName} NuGet packages", + "href": "general-and-getting-started/using-ignite-ui-nuget-packages.mdx", + "order": 18, + "slug": "Using-Ignite-UI-NuGet-Packages" + }, + { + "name": "Using {environment:ProductName} npm packages", + "href": "general-and-getting-started/using-ignite-ui-npm-packages.mdx", + "order": 19, + "slug": "Using-Ignite-UI-Npm-Packages" + }, + { + "name": "Accessibility Compliance", + "href": "general-and-getting-started/accessibility-compliance.mdx", + "slug": "accessibility-compliance" + }, + { + "name": "Deployment Guide", + "href": "general-and-getting-started/deployment-guide.mdx", + "slug": "deployment-guide" + } + ], + "slug": "getting-started" + }, + { + "name": "Controls", + "href": "controls/jqueryuicomponents-landingpage.mdx", + "order": 2, + "items": [ + { + "name": "igBulletGraph", + "href": "controls/igbulletgraph/igbulletgraph.mdx", + "items": [ + { + "name": "igBulletGraph Overview", + "href": "controls/igbulletgraph/overview.mdx", + "order": 0, + "slug": "igbulletgraph-overview" + }, + { + "name": "Adding igBulletGraph", + "href": "controls/igbulletgraph/adding/adding.mdx", + "order": 1, + "items": [ + { + "name": "Adding igBulletGraph to an HTML Page", + "href": "controls/igbulletgraph/adding/to-an-html-page.mdx", + "order": 0, + "slug": "igbulletgraph-adding-to-an-html-page" + }, + { + "name": "Adding igBulletGraph to an ASP.NET MVC application", + "href": "controls/igbulletgraph/adding/using-the-mvc-helper.mdx", + "order": 1, + "slug": "igbulletgraph-adding-using-the-mvc-helper" + } + ], + "slug": "igbulletgraph-adding" + }, + { + "name": "Configuring igBulletGraph", + "href": "controls/igbulletgraph/configuring/configuring.mdx", + "order": 2, + "items": [ + { + "name": "Configuring the Orientation and Direction", + "href": "controls/igbulletgraph/configuring/the-orientation-and-direction.mdx", + "order": 0, + "slug": "igbulletgraph-configuring-the-orientation-and-direction" + }, + { + "name": "Configuring the Visual Elements", + "href": "controls/igbulletgraph/configuring/elements/the-visual-elements.mdx", + "order": 1, + "items": [ + { + "name": "Configuring the Scale", + "href": "controls/igbulletgraph/configuring/elements/scale/the-scale.mdx", + "order": 0, + "slug": "igbulletgraph-configuring-the-scale" + }, + { + "name": "Configuring the Performance Bar", + "href": "controls/igbulletgraph/configuring/elements/the-performance-bar.mdx", + "order": 1, + "slug": "igbulletgraph-configuring-the-performance-bar" + }, + { + "name": "Configuring the Comparative Marker", + "href": "controls/igbulletgraph/configuring/elements/the-comparative-marker.mdx", + "order": 2, + "slug": "igbulletgraph-configuring-the-comparative-marker" + }, + { + "name": "Configuring Comparative Ranges", + "href": "controls/igbulletgraph/configuring/elements/comparative-ranges.mdx", + "order": 3, + "slug": "igbulletgraph-configuring-comparative-ranges" + }, + { + "name": "Configuring the Background", + "href": "controls/igbulletgraph/configuring/elements/the-background.mdx", + "order": 4, + "slug": "igbulletgraph-configuring-the-background" + }, + { + "name": "Configuring the Tooltips", + "href": "controls/igbulletgraph/configuring/elements/the-tooltips.mdx", + "order": 5, + "slug": "igbulletgraph-configuring-the-tooltips" + } + ], + "slug": "igbulletgraph-configuring-the-visual-elements" + } + ], + "slug": "igbulletgraph-configuring" + }, + { + "name": "Accessibility Compliance", + "href": "controls/igbulletgraph/accessibility-compliance.mdx", + "order": 4, + "slug": "igbulletgraph-accessibility-compliance" + }, + { + "name": "Known Issues and Limitations", + "href": "controls/igbulletgraph/known-issues-and-limitations.mdx", + "order": 5, + "slug": "igbulletgraph-known-issues-and-limitations" + } + ], + "slug": "igbulletgraph" + }, + { + "name": "igCategoryChart", + "href": "controls/igcategorychart/landingpage.mdx", + "items": [ + { + "name": "Overview", + "href": "controls/igcategorychart/categorychart-overview.mdx", + "order": 0, + "slug": "categorychart-overview" + }, + { + "name": "Adding igCategoryChart", + "href": "controls/igcategorychart/adding.mdx", + "order": 1, + "slug": "igcategorychart-adding" + }, + { + "name": "Binding to Data", + "href": "controls/igcategorychart/categorychart-binding-to-data.mdx", + "order": 2, + "slug": "categorychart-binding-to-data" + }, + { + "name": "Chart Types", + "href": "controls/igcategorychart/categorychart-chart-types.mdx", + "order": 3, + "slug": "categorychart-chart-types" + }, + { + "name": "Axes", + "href": "controls/igcategorychart/axes/categorychart-axes.mdx", + "order": 4, + "items": [ + { + "name": "Configuring Axis Gap and Overlap on igCategoryChart", + "href": "controls/igcategorychart/axes/categorychart-configuring-axis-gap-and-overlap.mdx", + "order": 0, + "slug": "categorychart-configuring-axis-gap-and-overlap" + }, + { + "name": "Configuring Axis Label", + "href": "controls/igcategorychart/axes/axis-labels.mdx", + "order": 1, + "slug": "igcategorychart-axis-label" + }, + { + "name": "Axis Interval", + "href": "controls/igcategorychart/axes/axis-intervals.mdx", + "order": 2, + "slug": "igcategorychart-axis-intervals" + }, + { + "name": "Axis Range", + "href": "controls/igcategorychart/axes/categorychart-configuring-axis-range.mdx", + "order": 3, + "slug": "categorychart-configuring-axis-range" + }, + { + "name": "Axis Tickmarks", + "href": "controls/igcategorychart/axes/axis-tickmarks.mdx", + "order": 4, + "slug": "igcategorychart-axis-tickmarks" + }, + { + "name": "Axis Titles", + "href": "controls/igcategorychart/axes/categorychart-configuring-axis-titles.mdx", + "order": 5, + "slug": "categorychart-configuring-axis-titles" + } + ], + "slug": "categorychart-axes" + }, + { + "name": "Configuring Chart Markers", + "href": "controls/igcategorychart/categorychart-configuring-chart-markers.mdx", + "order": 5, + "slug": "categorychart-configuring-chart-markers" + }, + { + "name": "Chart Requirements", + "href": "controls/igcategorychart/categorychart-chart-requirements.mdx", + "order": 6, + "slug": "categorychart-chart-requirements" + }, + { + "name": "Chart Title and Subtitle", + "href": "controls/igcategorychart/categorychart-chart-title-subtitle.mdx", + "order": 7, + "slug": "categorychart-chart-title-subtitle" + }, + { + "name": "Configuring Chart Types", + "href": "controls/igcategorychart/categorychart-configuring-chart-types.mdx", + "order": 8, + "slug": "categorychart-configuring-chart-types" + }, + { + "name": "igCategoryChart Annotation and Interaction Layers", + "href": "controls/igcategorychart/annotations-and-interactions/annotations-and-interactions.mdx", + "order": 9, + "items": [ + { + "name": "Category Highlight Layer", + "href": "controls/igcategorychart/annotations-and-interactions/category-highlight-layer.mdx", + "order": 0, + "slug": "igcategorychart-category-highlight-layer" + }, + { + "name": "Item Highlight Layer", + "href": "controls/igcategorychart/annotations-and-interactions/item-highlight-layer.mdx", + "order": 1, + "slug": "igcategorychart-item-highlight-layer" + }, + { + "name": "Crosshairs Layer", + "href": "controls/igcategorychart/annotations-and-interactions/crosshairs-layer.mdx", + "order": 2, + "slug": "igcategorychart-crosshairs-layer" + }, + { + "name": "Category ToolTip Layer", + "href": "controls/igcategorychart/annotations-and-interactions/category-tooltip-layer.mdx", + "order": 3, + "slug": "igcategorychart-category-tooltip-layer" + }, + { + "name": "Item ToolTip Layer", + "href": "controls/igcategorychart/annotations-and-interactions/item-tooltip-layer.mdx", + "order": 4, + "slug": "igcategorychart-item-tooltip-layer" + }, + { + "name": "Final Value Layer", + "href": "controls/igcategorychart/annotations-and-interactions/final-value-layer.mdx", + "order": 5, + "slug": "igcategorychart-final-value-layer" + }, + { + "name": "Callouts Layer", + "href": "controls/igcategorychart/annotations-and-interactions/callouts-layer.mdx", + "order": 6, + "slug": "igcategorychart-callouts-layer" + }, + { + "name": "Chart Data Tooltip", + "href": "controls/igcategorychart/annotations-and-interactions/datatooltip.mdx", + "order": 7 + } + ], + "slug": "igcategorychart-annotations-and-interactions" + }, + { + "name": "Data Legend", + "href": "controls/igcategorychart/categorychart-datalegend.mdx", + "order": 10 + }, + { + "name": "Accessibility Compliance", + "href": "controls/igcategorychart/categorychart-accessibility-compliance.mdx", + "order": 11, + "slug": "igcategorychart-accessibility-compliance" + }, + { + "name": "jQuery and MVC API Reference Links", + "href": "controls/igcategorychart/categorychart-api-overivew.mdx", + "order": 12, + "slug": "categorychart-api-overview" + }, + { + "name": "Styling igCategoryChart", + "href": "controls/igcategorychart/categorychart-styling.mdx", + "order": 13, + "slug": "categorychart-styling" + }, + { + "name": "Transition In Animations", + "href": "controls/igcategorychart/categorychart-transition-in-animations.mdx", + "order": 14, + "slug": "categorychart-transition-in-animations" + } + ], + "slug": "igcategorychart-landingpage" + }, + { + "name": "igCombo", + "href": "controls/igcombo/igcombo.mdx", + "items": [ + { + "name": "igCombo Overview", + "href": "controls/igcombo/overview.mdx", + "order": 0, + "slug": "igcombo-overview" + }, + { + "name": "Adding igCombo", + "href": "controls/igcombo/getting-started.mdx", + "order": 1, + "slug": "igcombo-getting-started" + }, + { + "name": "Migrating to the new combo", + "href": "controls/igcombo/migrating-to-the-new-combo.mdx", + "order": 2, + "slug": "igcombo-migrating-to-the-new-combo" + }, + { + "name": "Binding igCombo to Data", + "href": "controls/igcombo/binding/to-data.mdx", + "order": 3, + "items": [ + { + "name": "Binding igCombo to Data Overview", + "href": "controls/igcombo/binding/data-binding.mdx", + "order": 0, + "slug": "igcombo-data-binding" + }, + { + "name": "Creating Cascading igCombos", + "href": "controls/igcombo/binding/cascading.mdx", + "order": 1, + "slug": "igcombo-cascading" + } + ], + "slug": "igcombo-binding-to-data" + }, + { + "name": "Configuring igCombo", + "href": "controls/igcombo/configuring/configuring.mdx", + "order": 4, + "items": [ + { + "name": "Configuring Selection", + "href": "controls/igcombo/configuring/configure-selection.mdx", + "order": 0, + "slug": "igcombo-configure-selection" + }, + { + "name": "Configuring Auto-Suggest", + "href": "controls/igcombo/configuring/configure-auto-suggest.mdx", + "order": 1, + "slug": "igcombo-configure-auto-suggest" + }, + { + "name": "Configuring Remote Filtering", + "href": "controls/igcombo/configuring/configure-remote-filtering.mdx", + "order": 2, + "slug": "igcombo-configure-remote-filtering" + }, + { + "name": "Configuring Load-on-Demand", + "href": "controls/igcombo/configuring/load-on-demand.mdx", + "order": 3, + "slug": "igcombo-load-on-demand" + }, + { + "name": "Configuring Knockout Support", + "href": "controls/igcombo/configuring/knockoutjs-support.mdx", + "order": 4, + "slug": "igcombo-knockoutjs-support" + }, + { + "name": "Optimizing Performance", + "href": "controls/igcombo/configuring/optimize-performance.mdx", + "order": 5, + "slug": "igcombo-optimize-performance" + }, + { + "name": "Configuring Grouping", + "href": "controls/igcombo/configuring/grouping.mdx", + "order": 6, + "slug": "igCombo-grouping" + }, + { + "name": "Configuring ASP.NET MVC Combo", + "href": "controls/igcombo/configuring/asp-net-mvc.mdx", + "order": 7, + "slug": "configuring-asp-net-mvc" + }, + { + "name": "AngularJS Support", + "href": "controls/igcombo/configuring/angularjs-support.mdx", + "order": 8, + "slug": "igcombo-angularjs-support" + }, + { + "name": "TypeScript Support", + "href": "controls/igcombo/configuring/typescript-support.mdx", + "order": 9, + "slug": "igcombo-typescript-support" + } + ], + "slug": "igcombo-configuring" + }, + { + "name": "Styling igCombo", + "href": "controls/igcombo/using-themes.mdx", + "order": 5, + "slug": "igcombo-using-themes" + }, + { + "name": "Accessibility Compliance", + "href": "controls/igcombo/accessibility-compliance.mdx", + "order": 6, + "slug": "igcombo-accessibility-compliance" + }, + { + "name": "Known Issues and Limitations", + "href": "controls/igcombo/known-limitations.mdx", + "order": 8, + "slug": "igcombo-known-limitations" + }, + { + "name": "jQuery and MVC API Links", + "href": "controls/igcombo/jquery-and-asp-net-mvc-helper-api-links.mdx", + "order": 9, + "slug": "igcombo-jquery-and-asp-net-mvc-helper-api-links" + } + ], + "slug": "igcombo-igcombo" + }, + { + "name": "igDataChart", + "href": "controls/igdatachart/landing-page.mdx", + "items": [ + { + "name": "Overview", + "href": "controls/igdatachart/overview/overview.mdx", + "order": 0, + "items": [ + { + "name": "Series Types", + "href": "controls/igdatachart/overview/series-types.mdx", + "order": 0, + "slug": "igdatachart-series-types" + }, + { + "name": "Configurable Visual Elements", + "href": "controls/igdatachart/overview/visual-elements.mdx", + "order": 1, + "slug": "igdatachart-visual-elements" + }, + { + "name": "Hover Interactions Overview", + "href": "controls/igdatachart/overview/hoverinteractions-hover-interactions-overview.mdx", + "order": 2, + "slug": "hoverinteractions-hover-interactions-overview" + } + ], + "slug": "igdatachart-overview" + }, + { + "name": "Adding igDataChart", + "href": "controls/igdatachart/adding.mdx", + "order": 1, + "slug": "igdatachart-adding" + }, + { + "name": "Binding igDataChart to Data", + "href": "controls/igdatachart/databinding.mdx", + "order": 2, + "slug": "igdatachart-databinding" + }, + { + "name": "Series Requirements", + "href": "controls/igdatachart/series-requirements.mdx", + "order": 3, + "slug": "igdatachart-series-requirements" + }, + { + "name": "Configuring igDataChart", + "href": "controls/igdatachart/configuring/configuring.mdx", + "order": 4, + "items": [ + { + "name": "Animating Charts", + "href": "controls/igdatachart/configuring/animating/charts.mdx", + "order": 0, + "items": [ + { + "name": "Infragistics Motion Framework for Charts Overview", + "href": "controls/igdatachart/configuring/animating/motion-framework.mdx", + "order": 0, + "slug": "igdatachart-motion-framework" + }, + { + "name": "Animating Charts in HTML and JavaScript", + "href": "controls/igdatachart/configuring/animating/html.mdx", + "order": 1, + "slug": "igdatachart-animating-html" + }, + { + "name": "Animating Charts in ASP.NET MVC", + "href": "controls/igdatachart/configuring/animating/charts-in-aspnet-mvc.mdx", + "order": 2, + "slug": "animating-charts-in-asp.net-mvc" + } + ], + "slug": "igdatachart-animating-charts" + }, + { + "name": "Configuring the Chart Title and Subtitle", + "href": "controls/igdatachart/configuring/chart-titles-and-subtitles.mdx", + "order": 1, + "slug": "igdatachart-chart-titles-and-subtitles" + }, + { + "name": "Configuring the Axis Title", + "href": "controls/igdatachart/configuring/axis-title.mdx", + "order": 2, + "slug": "igdatachart-axis-title" + }, + { + "name": "Configuring the Series Highlighting", + "href": "controls/igdatachart/configuring/series-highlighting.mdx", + "order": 3, + "slug": "igdatachart-series-highlighting" + }, + { + "name": "Configuring Hover Interactions", + "href": "controls/igdatachart/configuring/hover-interactions/hover-interactions.mdx", + "order": 4, + "items": [ + { + "name": "Configuring the Category Highlight Layer", + "href": "controls/igdatachart/configuring/hover-interactions/category-highlight-layer.mdx", + "order": 0, + "slug": "hoverinteractions-category-highlight-layer" + }, + { + "name": "Configuring the Category Item Highlight Layer", + "href": "controls/igdatachart/configuring/hover-interactions/category-item-highlight-layer.mdx", + "order": 1, + "slug": "hoverinteractions-category-item-highlight-layer" + }, + { + "name": "Configuring the Category Tooltip Layer", + "href": "controls/igdatachart/configuring/hover-interactions/category-tooltip-layer.mdx", + "order": 2, + "slug": "hoverinteractions-category-tooltip-layer" + }, + { + "name": "Configuring the Crosshair Layer", + "href": "controls/igdatachart/configuring/hover-interactions/crosshair-layer.mdx", + "order": 3, + "slug": "hoverinteractions-crosshair-layer" + }, + { + "name": "Configuring the Item Tooltip Layer", + "href": "controls/igdatachart/configuring/hover-interactions/item-tooltip-layer.mdx", + "order": 4, + "slug": "hoverinteractions-item-tooltip-layer" + }, + { + "name": "Configuring the Final Value Layer", + "href": "controls/igdatachart/configuring/hover-interactions/final-value-layer.mdx", + "order": 5, + "slug": "hoverinteractions-final-value-layer" + }, + { + "name": "Configuring the Callout Layer", + "href": "controls/igdatachart/configuring/hover-interactions/callout-layer.mdx", + "order": 6, + "slug": "hoverinteractions-callout-layer" + }, + { + "name": "Hover Interactions Property Reference", + "href": "controls/igdatachart/configuring/hover-interactions/common-properties.mdx", + "order": 7, + "slug": "hoverinteractions-common-properties" + } + ], + "slug": "hoverinteractions-hover-interactions" + }, + { + "name": "Configuring Triangulation Series", + "href": "controls/igdatachart/configuring/triangulation-series/triangulation-series.mdx", + "order": 5, + "items": [ + { + "name": "Configuring the Scatter Area Series", + "href": "controls/igdatachart/configuring/triangulation-series/area-series.mdx", + "order": 0, + "slug": "triangulationseries-area-series" + }, + { + "name": "Configuring the Scatter Contour Series", + "href": "controls/igdatachart/configuring/triangulation-series/contour-series.mdx", + "order": 1, + "slug": "triangulationseries-contour-series" + } + ], + "slug": "triangulationseries-triangulation-series" + }, + { + "name": "Configuring Shape Series", + "href": "controls/igdatachart/configuring/shape-series/shape-series.mdx", + "order": 6, + "items": [ + { + "name": "Configuring the Scatter Polygon Series", + "href": "controls/igdatachart/configuring/shape-series/polygon-series.mdx", + "order": 0, + "slug": "shapeseries-polygon-series" + }, + { + "name": "Configuring the Scatter Polyline Series", + "href": "controls/igdatachart/configuring/shape-series/polyline-series.mdx", + "order": 1, + "slug": "shapeseries-polyline-series" + } + ], + "slug": "shapeseries-shape-series" + }, + { + "name": "Configuring Knockout Support", + "href": "controls/igdatachart/configuring/knockoutjs-support.mdx", + "order": 7, + "slug": "igdatachart-knockoutjs-support" + }, + { + "name": "Transitions In Animations", + "href": "controls/igdatachart/configuring/igchart-transitions-in-animations.mdx", + "order": 8, + "slug": "igchart-transitions-in-animations" + }, + { + "name": "Configuring Axis Intervals", + "href": "controls/igdatachart/configuring/axis-intervals.mdx", + "order": 9, + "slug": "igdatachart-configuring-axis-intervals" + }, + { + "name": "Configuring the TimeXAxis", + "href": "controls/igdatachart/configuring/timexaxis.mdx", + "order": 9, + "slug": "igdatachart-configuring-timexaxis" + }, + { + "name": "Configuring the Navigation Features", + "href": "controls/igdatachart/configuring/navigation-features.mdx", + "order": 10, + "slug": "igdatachart-configuring-navigation-features" + }, + { + "name": "Configuring the PercentChangeYAxis", + "href": "controls/igdatachart/configuring/percentchangeyaxis.mdx", + "order": 11, + "slug": "igdatachart-configuring-percentchangeyaxis" + }, + { + "name": "Configuring the OrdinalTimeXAxis", + "href": "controls/igdatachart/configuring/ordinaltimexaxis.mdx", + "order": 12, + "slug": "igdatachart-configuring-ordinaltimexaxis" + }, + { + "name": "Chart Data Legend", + "href": "controls/igdatachart/configuring/datalegend.mdx", + "order": 13 + }, + { + "name": "Chart Data Tooltip", + "href": "controls/igdatachart/configuring/datatooltip.mdx", + "order": 14 + } + ], + "slug": "igdatachart-configuring" + }, + { + "name": "Styling igDataChart", + "href": "controls/igdatachart/styling/themes.mdx", + "order": 5, + "items": [ + { + "name": "Styling the Chart Series", + "href": "controls/igdatachart/styling/the-chart-series.mdx", + "order": 0, + "slug": "igdatachart-styling-the-chart-series" + } + ], + "slug": "igdatachart-styling-themes" + }, + { + "name": "Accessibility Compliance", + "href": "controls/igdatachart/accessibility-compliance.mdx", + "order": 6, + "slug": "igdatachart-accessibility-compliance" + }, + { + "name": "Known Issues and Limitations", + "href": "controls/igdatachart/known-issues.mdx", + "order": 7, + "slug": "igdatachart-known-issues" + }, + { + "name": "jQuery and MVC API Reference Links", + "href": "controls/igdatachart/api-links.mdx", + "order": 8, + "slug": "igdatachart-api-links" + } + ], + "slug": "igdatachart-landing-page" + }, + { + "name": "igDialog", + "href": "controls/igdialog/igdialog.mdx", + "items": [ + { + "name": "igDialog Overview", + "href": "controls/igdialog/overview.mdx", + "order": 0, + "slug": "igdialog-overview" + }, + { + "name": "Adding igDialog", + "href": "controls/igdialog/adding-igdialog.mdx", + "order": 1, + "slug": "adding-igdialog" + }, + { + "name": "Configuring igDialog", + "href": "controls/igdialog/configuring/igdialog.mdx", + "order": 2, + "items": [ + { + "name": "igDialog Show and Hide", + "href": "controls/igdialog/configuring/show-and-hide.mdx", + "order": 0, + "slug": "igdialog-show-and-hide" + }, + { + "name": "igDialog Maximize and Minimize", + "href": "controls/igdialog/configuring/maximize-and-minimize.mdx", + "order": 1, + "slug": "igdialog-maximize-and-minimize" + }, + { + "name": "igDialog Pin", + "href": "controls/igdialog/configuring/pin.mdx", + "order": 2, + "slug": "igdialog-pin" + }, + { + "name": "igDialog Position", + "href": "controls/igdialog/configuring/position.mdx", + "order": 3, + "slug": "igdialog-position" + }, + { + "name": "igDialog Header and Footer", + "href": "controls/igdialog/configuring/header-and-footer.mdx", + "order": 4, + "slug": "igdialog-header-and-footer" + }, + { + "name": "igDialog External Page", + "href": "controls/igdialog/configuring/external-page.mdx", + "order": 5, + "slug": "igdialog-external-page" + }, + { + "name": "igDialog Modal State", + "href": "controls/igdialog/configuring/modal-state.mdx", + "order": 6, + "slug": "igdialog-modal-state" + }, + { + "name": "igDialog Multiple Dialogs", + "href": "controls/igdialog/configuring/multiple-dialogs.mdx", + "order": 7, + "slug": "igdialog-multiple-dialogs" + }, + { + "name": "igDialog Animations", + "href": "controls/igdialog/configuring/animations.mdx", + "order": 8, + "slug": "igdialog-animations" + } + ], + "slug": "configuring-igdialog" + }, + { + "name": "API Reference", + "href": "controls/igdialog/api-reference/api-reference.mdx", + "order": 3, + "items": [ + { + "name": "Property Reference", + "href": "controls/igdialog/api-reference/property-reference.mdx", + "order": 0, + "slug": "igdialog-property-reference" + }, + { + "name": "Method Reference", + "href": "controls/igdialog/api-reference/method-reference.mdx", + "order": 1, + "slug": "igdialog-method-reference" + }, + { + "name": "Event Reference", + "href": "controls/igdialog/api-reference/event-reference.mdx", + "order": 2, + "slug": "igdialog-event-reference" + }, + { + "name": "CSS Classes Reference", + "href": "controls/igdialog/api-reference/css-classes-reference.mdx", + "order": 3, + "slug": "igdialog-css-classes-reference" + } + ], + "slug": "igdialog-api-reference" + }, + { + "name": "Styling and Theming", + "href": "controls/igdialog/styling-and-theming.mdx", + "order": 4, + "slug": "igdialog-styling-and-theming" + }, + { + "name": "Known Issues and Limitations", + "href": "controls/igdialog/known-issues.mdx", + "order": 5, + "slug": "igdialog-known-issues" + }, + { + "name": "Accessibility Compliance", + "href": "controls/igdialog/accessibility-compliance.mdx", + "order": 6, + "slug": "igdialog-accessibility-compliance" + } + ], + "slug": "igdialog" + }, + { + "name": "igDoughnutChart", + "href": "controls/igdoughnutchart/igdoughnutchart.mdx", + "items": [ + { + "name": "igDoughnutChart Overview", + "href": "controls/igdoughnutchart/overview.mdx", + "order": 0, + "slug": "igdoughnutchart-overview" + }, + { + "name": "Adding igDoughnutChart", + "href": "controls/igdoughnutchart/adding/adding.mdx", + "order": 1, + "items": [ + { + "name": "Adding igDoughnutChart to an HTML Page", + "href": "controls/igdoughnutchart/adding/to-an-html-page.mdx", + "order": 0, + "slug": "igdoughnutchart-adding-to-an-html-page" + }, + { + "name": "Adding igDoughnutChart to an ASP.NET MVC Application", + "href": "controls/igdoughnutchart/adding/using-the-mvc-helper.mdx", + "order": 1, + "slug": "igdoughnutchart-adding-using-the-mvc-helper" + } + ], + "slug": "igdoughnutchart-adding" + }, + { + "name": "Configuring Selection and Explosion", + "href": "controls/igdoughnutchart/configuring-selection-and-explosion.mdx", + "order": 2, + "slug": "igdoughnutchart-configuring-selection-and-explosion" + }, + { + "name": "jQuery and MVC API Links", + "href": "controls/igdoughnutchart/api-links.mdx", + "order": 3, + "slug": "igdoughnutchart-api-links" + }, + { + "name": "Accessibility Compliance", + "href": "controls/igdoughnutchart/accessibility-compliance.mdx", + "order": 4, + "slug": "igdoughnutchart-accessibility-compliance" + }, + { + "name": "Known Issues and Limitations", + "href": "controls/igdoughnutchart/known-issues-and-limitations.mdx", + "order": 5, + "slug": "igdoughnutchart-known-issues-and-limitations" + } + ], + "slug": "igdoughnutchart" + }, + { + "name": "igEditors", + "href": "controls/igeditors/landingpage.mdx", + "items": [ + { + "name": "igCurrencyEditor", + "href": "controls/igeditors/igcurrencyeditor/igcurrencyeditor.mdx", + "order": 0, + "items": [ + { + "name": "igCurrencyEditor Overview", + "href": "controls/igeditors/igcurrencyeditor/overview.mdx", + "order": 0, + "slug": "igcurrencyeditor-igcurrencyeditor-overview" + }, + { + "name": "igCurrencyEditor Styling and Theming", + "href": "controls/igeditors/igcurrencyeditor/styling-and-theming.mdx", + "order": 1, + "slug": "igcurrencyeditor-igcurrencyeditor-styling-and-theming" + }, + { + "name": "igCurrencyEditor Accessibility Compliance", + "href": "controls/igeditors/igcurrencyeditor/accessibility-compliance.mdx", + "order": 2, + "slug": "igcurrencyeditor-igcurrencyeditor-accessibility-compliance" + }, + { + "name": "igCurrencyEditor Known Issues", + "href": "controls/igeditors/igcurrencyeditor/known-issues.mdx", + "order": 3, + "slug": "igcurrencyeditor-igcurrencyeditor-known-issues" + }, + { + "name": "igCurrencyEditor jQuery and MVC API Links", + "href": "controls/igeditors/igcurrencyeditor/jquery-api.mdx", + "order": 4, + "slug": "igcurrencyeditor-igcurrencyeditor-jquery-api" + }, + { + "name": "Migrating to the new igCurrencyEditor", + "href": "controls/igeditors/igcurrencyeditor/migrating-to-the-new-igcurrencyeditor.mdx", + "order": 5, + "slug": "migrating-to-the-new-igcurrencyeditor" + } + ], + "slug": "igcurrencyeditor-igcurrencyeditor" + }, + { + "name": "igDateEditor", + "href": "controls/igeditors/igdateeditor/igdateeditor.mdx", + "order": 1, + "items": [ + { + "name": "igDateEditor Overview", + "href": "controls/igeditors/igdateeditor/overview.mdx", + "order": 0, + "slug": "igdateeditor-overview" + }, + { + "name": "igDateEditor Styling and Theming", + "href": "controls/igeditors/igdateeditor/styling-and-theming.mdx", + "order": 1, + "slug": "igdateeditor-styling-and-theming" + }, + { + "name": "igDateEditor Accessibility Compliance", + "href": "controls/igeditors/igdateeditor/accessibility-compliance.mdx", + "order": 2, + "slug": "igdateeditor-accessibility-compliance" + }, + { + "name": "igDateEditor Known Issues", + "href": "controls/igeditors/igdateeditor/known-issues.mdx", + "order": 3, + "slug": "igdateeditor-known-issues" + }, + { + "name": "igDateEditor jQuery and MVC API Links", + "href": "controls/igeditors/igdateeditor/jquery-api.mdx", + "order": 4, + "slug": "igdateeditor-jquery-api" + }, + { + "name": "Migrating to the new igDateEditor", + "href": "controls/igeditors/igdateeditor/migrating-to-the-new-igdateeditor.mdx", + "order": 5, + "slug": "migrating-to-the-new-igdateeditor" + }, + { + "name": "Migrating date handling in 17.1", + "href": "controls/igeditors/igdateeditor/migrating-date-handling-in-17-1.mdx", + "order": 6, + "slug": "igDateEditor-migrating-date-handling-in-17-1" + } + ], + "slug": "igdateeditor-igdateeditor" + }, + { + "name": "igMaskEditor", + "href": "controls/igeditors/igmaskeditor/igmaskeditor.mdx", + "order": 2, + "items": [ + { + "name": "igMaskEditor Overview", + "href": "controls/igeditors/igmaskeditor/overview.mdx", + "order": 0, + "slug": "igmaskeditor--overview" + }, + { + "name": "igMaskEditor Styling and Theming", + "href": "controls/igeditors/igmaskeditor/styling-and-theming.mdx", + "order": 1, + "slug": "igmaskeditor-styling-and-theming" + }, + { + "name": "igMaskEditor Accessibility Compliance", + "href": "controls/igeditors/igmaskeditor/accessibility-compliance.mdx", + "order": 2, + "slug": "igmaskeditor-accessibility-compliance" + }, + { + "name": "igMaskEditor Known Issues", + "href": "controls/igeditors/igmaskeditor/known-issues.mdx", + "order": 3, + "slug": "igmaskeditor-known-issues" + }, + { + "name": "igMaskEditor jQuery and MVC API Links", + "href": "controls/igeditors/igmaskeditor/jquery-api.mdx", + "order": 4, + "slug": "igmaskeditor-jquery-api" + }, + { + "name": "Migrating to the new igMaskEditor", + "href": "controls/igeditors/igmaskeditor/migrating-to-the-new-igmaskeditor.mdx", + "order": 5, + "slug": "migrating-to-the-new-igmaskeditor" + } + ], + "slug": "igmaskeditor-igmaskeditor" + }, + { + "name": "igNumericEditor", + "href": "controls/igeditors/ignumericeditor/ignumericeditor.mdx", + "order": 3, + "items": [ + { + "name": "igNumericEditor Overview", + "href": "controls/igeditors/ignumericeditor/overview.mdx", + "order": 0, + "slug": "ignumericeditor-overview" + }, + { + "name": "igNumericEditor Styling and Theming", + "href": "controls/igeditors/ignumericeditor/styling-and-theming.mdx", + "order": 1, + "slug": "ignumericeditor-styling-and-theming" + }, + { + "name": "igNumericEditor Accessibility Compliance", + "href": "controls/igeditors/ignumericeditor/accessibility-compliance.mdx", + "order": 2, + "slug": "ignumericeditor-accessibility-compliance" + }, + { + "name": "igNumericEditor Known Issues", + "href": "controls/igeditors/ignumericeditor/known-issues.mdx", + "order": 3, + "slug": "ignumericeditor-known-issues" + }, + { + "name": "igNumericEditor jQuery and MVC API Links", + "href": "controls/igeditors/ignumericeditor/jquery-api.mdx", + "order": 4, + "slug": "ignumericeditor-jquery-api" + }, + { + "name": "Migrating to the new igNumericEditor", + "href": "controls/igeditors/ignumericeditor/migrating-to-the-new-ignumericeditor.mdx", + "order": 5, + "slug": "migrating-to-the-new-ignumericeditor" + } + ], + "slug": "ignumericeditor-ignumericeditor" + }, + { + "name": "igPercentEditor", + "href": "controls/igeditors/igpercenteditor/igpercenteditor.mdx", + "order": 4, + "items": [ + { + "name": "igPercentEditor Overview", + "href": "controls/igeditors/igpercenteditor/overview.mdx", + "order": 0, + "slug": "igpercenteditor-overview" + }, + { + "name": "igPercentEditor Styling and Theming", + "href": "controls/igeditors/igpercenteditor/styling-and-theming.mdx", + "order": 1, + "slug": "igpercenteditor-styling-and-theming" + }, + { + "name": "igPercentEditor Accessibility Compliance", + "href": "controls/igeditors/igpercenteditor/accessibility-compliance.mdx", + "order": 2, + "slug": "igpercenteditor-accessibility-compliance" + }, + { + "name": "igPercentEditor Known Issues", + "href": "controls/igeditors/igpercenteditor/known-issues.mdx", + "order": 3, + "slug": "igpercenteditor-known-issues" + }, + { + "name": "igPercentEditor jQuery and MVC API Links", + "href": "controls/igeditors/igpercenteditor/jquery-api.mdx", + "order": 4, + "slug": "igpercenteditor-jquery-api" + }, + { + "name": "Migrating to the new igPercentEditor", + "href": "controls/igeditors/igpercenteditor/migrating-to-the-new-igpercenteditor.mdx", + "order": 5, + "slug": "migrating-to-the-new-igpercenteditor" + } + ], + "slug": "igpercenteditor-igpercenteditor" + }, + { + "name": "igTextEditor", + "href": "controls/igeditors/igtexteditor/igtexteditor.mdx", + "order": 5, + "items": [ + { + "name": "igTextEditor Overview", + "href": "controls/igeditors/igtexteditor/overview.mdx", + "order": 0, + "slug": "igtexteditor-overview" + }, + { + "name": "igTextEditor Styling and Theming", + "href": "controls/igeditors/igtexteditor/styling-and-theming.mdx", + "order": 1, + "slug": "igtexteditor-styling-and-theming" + }, + { + "name": "igTextEditor Accessibility Compliance", + "href": "controls/igeditors/igtexteditor/accessibility-compliance.mdx", + "order": 2, + "slug": "igtexteditor-accessibility-compliance" + }, + { + "name": "igTextEditor Known Issues", + "href": "controls/igeditors/igtexteditor/known-issues.mdx", + "order": 3, + "slug": "igtexteditor-known-issues" + }, + { + "name": "igTextEditor jQuery and MVC API Links", + "href": "controls/igeditors/igtexteditor/jquery-api.mdx", + "order": 4, + "slug": "igtexteditor-jquery-api" + }, + { + "name": "Migrating to the new igTextEditor", + "href": "controls/igeditors/igtexteditor/migrating-to-the-new-igtexteditor.mdx", + "order": 5, + "slug": "migrating-to-the-new-igtexteditor" + } + ], + "slug": "igtexteditor-igtexteditor" + }, + { + "name": "igCheckboxEditor", + "href": "controls/igeditors/igcheckboxeditor/igcheckboxeditor.mdx", + "order": 6, + "items": [ + { + "name": "igCheckboxEditor Overview", + "href": "controls/igeditors/igcheckboxeditor/overview.mdx", + "order": 0, + "slug": "igcheckboxeditor-overview" + }, + { + "name": "igCheckboxEditor Styling and Theming", + "href": "controls/igeditors/igcheckboxeditor/styling-and-theming.mdx", + "order": 1, + "slug": "igcheckboxeditor-styling-and-theming" + }, + { + "name": "igCheckboxEditor Accessibility Compliance", + "href": "controls/igeditors/igcheckboxeditor/accessibility-compliance.mdx", + "order": 2, + "slug": "igcheckboxeditor-accessibility-compliance" + }, + { + "name": "igCheckboxEditor Known Issues", + "href": "controls/igeditors/igcheckboxeditor/known-issues.mdx", + "order": 3, + "slug": "igcheckboxeditor-known-issues" + }, + { + "name": "igCheckboxEditor jQuery and MVC API Links", + "href": "controls/igeditors/igcheckboxeditor/jquery-api.mdx", + "order": 4, + "slug": "igcheckboxeditor-jquery-api" + } + ], + "slug": "igcheckboxeditor-igcheckboxeditor" + }, + { + "name": "igDatePicker", + "href": "controls/igeditors/igdatepicker/igdatepicker.mdx", + "order": 7, + "items": [ + { + "name": "igDatePicker Overview", + "href": "controls/igeditors/igdatepicker/overview.mdx", + "order": 0, + "slug": "igdatepicker-overview" + }, + { + "name": "igDatePicker Styling and Theming", + "href": "controls/igeditors/igdatepicker/styling-and-theming.mdx", + "order": 1, + "slug": "igdatepicker-styling-and-theming" + }, + { + "name": "igDatePicker jQuery and MVC API Links", + "href": "controls/igeditors/igdatepicker/jquery-api.mdx", + "order": 2, + "slug": "igdatepicker-jquery-api" + }, + { + "name": "igDatePicker Accessibility Compliance", + "href": "controls/igeditors/igdatepicker/accessibility-compliance.mdx", + "order": 3, + "slug": "igdatepicker-accessibility-compliance" + }, + { + "name": "igDatePicker Known Issues", + "href": "controls/igeditors/igdatepicker/known-issues.mdx", + "order": 4, + "slug": "igdatepicker-known-issues" + }, + { + "name": "Migrating to the new igDatePicker", + "href": "controls/igeditors/igdatepicker/migrating-to-the-new-igdatepicker.mdx", + "order": 5, + "slug": "migrating-to-the-new-igdatepicker" + } + ], + "slug": "igdatepicker-igdatepicker" + }, + { + "name": "igTimePicker", + "href": "controls/igeditors/igtimepicker/igtimepicker.mdx", + "order": 8, + "items": [ + { + "name": "igTimePicker Overview", + "href": "controls/igeditors/igtimepicker/overview.mdx", + "order": 0, + "slug": "igtimepicker-overview" + }, + { + "name": "igTimePicker Styling and Theming", + "href": "controls/igeditors/igtimepicker/styling-and-theming.mdx", + "order": 1, + "slug": "igtimepicker-styling-and-theming" + }, + { + "name": "igTimePicker Accessibility Compliance", + "href": "controls/igeditors/igtimepicker/accessibility-compliance.mdx", + "order": 2, + "slug": "igtimepicker-accessibility-compliance" + }, + { + "name": "igTimePicker Known Issues", + "href": "controls/igeditors/igtimepicker/known-issues.mdx", + "order": 3, + "slug": "igtimepicker-known-issues" + }, + { + "name": "igTimePicker jQuery and MVC API Links", + "href": "controls/igeditors/igtimepicker/jquery-api.mdx", + "order": 4, + "slug": "igtimepicker-jquery-api" + } + ], + "slug": "igtimepicker-igtimepicker" + }, + { + "name": "Configuring Editors", + "href": "controls/igeditors/config/editors-configure-editors.mdx", + "items": [ + { + "name": "Configuring ASP.NET MVC Validation", + "href": "controls/igeditors/config/configuring-aspnet-mvc-validation.mdx", + "order": 0, + "slug": "configuring-asp.net-mvc-validation" + }, + { + "name": "Configuring igEditors at Runtime", + "href": "controls/igeditors/config/configuring-igeditors-at-runtime.mdx", + "order": 1, + "slug": "configuring-igeditors-at-runtime" + }, + { + "name": "Configuring Knockout Support", + "href": "controls/igeditors/config/configuring-knockout-support-editors.mdx", + "order": 2, + "slug": "configuring-knockout-support-(editors)" + }, + { + "name": "How to localize the Editors", + "href": "controls/igeditors/config/localizing-igeditors.mdx", + "order": 3, + "slug": "localizing-igeditors" + } + ], + "slug": "editors-configure-editors" + } + ], + "slug": "editors-landingpage" + }, + { + "name": "igFinancialChart", + "href": "controls/igfinancialchart/financial-chart-overview.mdx", + "items": [ + { + "name": "Getting Started", + "href": "controls/igfinancialchart/financial-chart-gettingstarted.mdx", + "order": 0 + }, + { + "name": "Binding to Data", + "href": "controls/igfinancialchart/bindingtodata/financial-chart-binding-to-data.mdx", + "order": 1, + "items": [ + { + "name": "Binding to Single Data Source", + "href": "controls/igfinancialchart/bindingtodata/financial-chart-binding-to-single-data.mdx", + "order": 0 + }, + { + "name": "Binding to Multiple Data Sources", + "href": "controls/igfinancialchart/bindingtodata/financial-chart-binding-to-multiple-data.mdx", + "order": 1 + }, + { + "name": "Binding to Live Data", + "href": "controls/igfinancialchart/bindingtodata/financial-chart-binding-to-live-data.mdx", + "order": 2 + } + ] + }, + { + "name": "Chart Navigation", + "href": "controls/igfinancialchart/financial-chart-chart-navigation.mdx", + "order": 2 + }, + { + "name": "Toolbar", + "href": "controls/igfinancialchart/financial-chart-toolbar.mdx", + "order": 3 + }, + { + "name": "Tooltips", + "href": "controls/igfinancialchart/financial-chart-tooltips.mdx", + "order": 4 + }, + { + "name": "Chart Panes", + "href": "controls/igfinancialchart/chartpanes/financial-chart-chartpanes.mdx", + "order": 5, + "items": [ + { + "name": "Indicator Pane", + "href": "controls/igfinancialchart/chartpanes/financial-chart-pane-indicator.mdx", + "order": 0 + }, + { + "name": "Custom Indicators", + "href": "controls/igfinancialchart/chartpanes/financial-chart-custom-indicators.mdx", + "order": 1 + }, + { + "name": "Price Pane", + "href": "controls/igfinancialchart/chartpanes/financial-chart-pane-price.mdx", + "order": 2 + }, + { + "name": "Volume Pane", + "href": "controls/igfinancialchart/chartpanes/financial-chart-pane-volume.mdx", + "order": 3 + }, + { + "name": "Zoom Pane", + "href": "controls/igfinancialchart/chartpanes/financial-chart-pane-zoom.mdx", + "order": 4 + } + ] + }, + { + "name": "Annotations and Interaction Layers", + "href": "controls/igfinancialchart/financial-chart-annotation-and-interaction-layers.mdx", + "order": 6 + }, + { + "name": "Trendline Layer", + "href": "controls/igfinancialchart/financial-chart-layer-trendline.mdx", + "order": 7 + }, + { + "name": "Financial Overlays", + "href": "controls/igfinancialchart/financial-chart-layer-overlays.mdx", + "order": 8 + }, + { + "name": "Chart Data Tooltip", + "href": "controls/igfinancialchart/financial-chart-datatooltip.mdx", + "order": 9 + }, + { + "name": "Configuring Axis", + "href": "controls/igfinancialchart/configuringaxis/financial-chart-configuring-axis.mdx", + "order": 10, + "items": [ + { + "name": "Configuring Axis Intervals", + "href": "controls/igfinancialchart/configuringaxis/financial-chart-configuring-axis-intervals.mdx", + "order": 0 + }, + { + "name": "Configuring Axis Labels", + "href": "controls/igfinancialchart/configuringaxis/financial-chart-configuring-axis-labels.mdx", + "order": 1 + }, + { + "name": "Configuring Axis Modes", + "href": "controls/igfinancialchart/configuringaxis/financial-chart-configuring-axis-modes.mdx", + "order": 2 + }, + { + "name": "Configuring Axis Range", + "href": "controls/igfinancialchart/configuringaxis/financial-chart-configuring-axis-range.mdx", + "order": 3 + }, + { + "name": "Configuring Axis Modes", + "href": "controls/igfinancialchart/configuringaxis/financial-chart-configuring-axis-scale.mdx", + "order": 4 + }, + { + "name": "Configuring Axis Tickmarks", + "href": "controls/igfinancialchart/configuringaxis/financial-chart-configuring-axis-tickmarks.mdx", + "order": 5 + }, + { + "name": "Configuring Axis Titles", + "href": "controls/igfinancialchart/configuringaxis/financial-chart-configuring-axis-titles.mdx", + "order": 6 + }, + { + "name": "Configuring Axis Scale Breaks", + "href": "controls/igfinancialchart/configuringaxis/financial-chart-configuring-axis-scale-breaks.mdx", + "order": 7 + } + ] + }, + { + "name": "Legend", + "href": "controls/igfinancialchart/financial-chart-legend.mdx", + "order": 11 + }, + { + "name": "Data Legend", + "href": "controls/igfinancialchart/financial-chart-datalegend.mdx", + "order": 12 + }, + { + "name": "Known Issues and Limitations", + "href": "controls/igfinancialchart/financial-chart-known-limitations.mdx", + "order": 13, + "slug": "igfinancial-chart-known-limitations" + }, + { + "name": "API Overview", + "href": "controls/igfinancialchart/financial-chart-api-overview.mdx", + "order": 14 + } + ] + }, + { + "name": "igFunnelChart", + "href": "controls/igfunnelchart/igfunnelchart.mdx", + "items": [ + { + "name": "igFunnelChart Overview", + "href": "controls/igfunnelchart/overview.mdx", + "order": 0, + "slug": "igfunnelchart-overview" + }, + { + "name": "Adding igFunnelChart", + "href": "controls/igfunnelchart/adding.mdx", + "order": 1, + "slug": "igfunnelchart-adding" + }, + { + "name": "Binding igFunnelChart to Data", + "href": "controls/igfunnelchart/binding-to-data.mdx", + "order": 2, + "slug": "igfunnelchart-binding-to-data" + }, + { + "name": "Configuring igFunnelChart", + "href": "controls/igfunnelchart/configuring.mdx", + "order": 3, + "slug": "igfunnelchart-configuring" + }, + { + "name": "Styling igFunnelChart", + "href": "controls/igfunnelchart/styling.mdx", + "order": 4, + "slug": "igfunnelchart-styling" + }, + { + "name": "Accessibility Compliance", + "href": "controls/igfunnelchart/accessibility-compliance.mdx", + "order": 5, + "slug": "igfunnelchart-accessibility-compliance" + }, + { + "name": "Known Issues and Limitations", + "href": "controls/igfunnelchart/known-issues-and-limitations.mdx", + "order": 6, + "slug": "igfunnelchart-known-issues-and-limitations" + }, + { + "name": "jQuery and MVC API Links", + "href": "controls/igfunnelchart/jquery-and-aspnet-mvc-helper-api-links.mdx", + "order": 7, + "slug": "igfunnelchart-jquery-and-asp.net-mvc-helper-api--links" + } + ], + "slug": "igfunnelchart-igfunnelchart" + }, + { + "name": "igGrid", + "href": "controls/iggrid/iggrid.mdx", + "items": [ + { + "name": "igGrid Overview", + "href": "controls/iggrid/overview.mdx", + "order": 0, + "slug": "iggrid-overview" + }, + { + "name": "igGrid/igDataSource Architecture Overview", + "href": "controls/iggrid/igdatasource-architecture-overview.mdx", + "order": 1, + "slug": "iggrid-igdatasource-architecture-overview" + }, + { + "name": "Binding igGrid to Data", + "href": "controls/iggrid/binding/to-data.mdx", + "order": 2, + "items": [ + { + "name": "Getting Started with igGrid, oData and WCF Data Services", + "href": "controls/iggrid/binding/getting-started-with-iggrid-odata-and-wcf-data-services.mdx", + "order": 0, + "slug": "iggrid-getting-started-with-iggrid-odata-and-wcf-data-services" + }, + { + "name": "Binding igGrid to DataTable", + "href": "controls/iggrid/binding/to-datatable.mdx", + "order": 1, + "slug": "iggrid-binding-to-datatable" + }, + { + "name": "Binding igGrid to OData service", + "href": "controls/iggrid/binding/to-web-services.mdx", + "order": 2, + "slug": "iggrid-binding-to-web-services" + }, + { + "name": "Binding igGrid to XML", + "href": "controls/iggrid/binding/iggrid-to-xml.mdx", + "order": 3, + "slug": "iggrid-binding-iggrid-to-xml" + }, + { + "name": "Binding to ASP.NET MVC WebAPI", + "href": "controls/iggrid/binding/to-webapi.mdx", + "order": 4, + "slug": "iggrid-binding-to-webapi" + }, + { + "name": "Client-Side Data Binding", + "href": "controls/iggrid/binding/client-side/binding.mdx", + "items": [ + { + "name": "Binding igGrid to HTML Table Data", + "href": "controls/iggrid/binding/client-side/to-html-table-data.mdx", + "order": 0, + "slug": "iggrid-binding-to-html-table-data" + }, + { + "name": "Binding igGrid to a JavaScript array and JSON array", + "href": "controls/iggrid/binding/client-side/to-javascript-array-and-json-array.mdx", + "order": 1, + "slug": "iggrid-binding-to-javascript-array-and-json-array" + } + ], + "slug": "iggrid-client-side-binding" + } + ], + "slug": "iggrid-binding-to-data" + }, + { + "name": "igGrid Features", + "href": "controls/iggrid/features/landing-page.mdx", + "order": 3, + "items": [ + { + "name": "Column Management Features", + "href": "controls/iggrid/features/columns/columnmanagementfeatures-landingpage.mdx", + "order": 0, + "items": [ + { + "name": "Column Fixing", + "href": "controls/iggrid/features/columns/fixing/columnfixing-landingpage.mdx", + "order": 0, + "items": [ + { + "name": "Column Fixing Overview", + "href": "controls/iggrid/features/columns/fixing/columnfixing-overview.mdx", + "order": 0, + "slug": "iggrid-columnfixing-overview" + }, + { + "name": "Enabling Column Fixing", + "href": "controls/iggrid/features/columns/fixing/columnfixing-enabling.mdx", + "order": 1, + "slug": "iggrid-columnfixing-enabling" + }, + { + "name": "Configuring Column Fixing", + "href": "controls/iggrid/features/columns/fixing/columnfixing-configuring.mdx", + "order": 2, + "slug": "iggrid-columnfixing-configuring" + }, + { + "name": "Method Reference", + "href": "controls/iggrid/features/columns/fixing/columnfixing-method-reference.mdx", + "order": 3, + "slug": "iggrid-columnfixing-method-reference" + } + ], + "slug": "iggrid-columnfixing-landingpage" + }, + { + "name": "Column Grouping", + "href": "controls/iggrid/features/columns/grouping/groupby.mdx", + "order": 1, + "items": [ + { + "name": "Column Grouping Overview", + "href": "controls/iggrid/features/columns/grouping/groupby-overview.mdx", + "order": 0, + "slug": "iggrid-groupby-overview" + }, + { + "name": "Enabling Column Grouping", + "href": "controls/iggrid/features/columns/grouping/enabling-groupby.mdx", + "order": 1, + "slug": "iggrid-enabling-groupby" + }, + { + "name": "Group By Dialog Overview", + "href": "controls/iggrid/features/columns/grouping/group-by-dialog-overview.mdx", + "order": 2, + "slug": "iggrid-group-by-dialog-overview" + }, + { + "name": "GroupBy Summaries Feature Overview", + "href": "controls/iggrid/features/columns/grouping/groupby-summaries.mdx", + "order": 3, + "slug": "iggrid-groupby-summaries" + } + ], + "slug": "iggrid-groupby" + }, + { + "name": "Column Hiding", + "href": "controls/iggrid/features/columns/hiding/column-hiding.mdx", + "order": 2, + "items": [ + { + "name": "Enabling Column Hiding", + "href": "controls/iggrid/features/columns/hiding/column-hiding-enabling-column-hiding.mdx", + "order": 0, + "slug": "iggrid-column-hiding-enabling-column-hiding" + }, + { + "name": "Column Hiding Grid Events", + "href": "controls/iggrid/features/columns/hiding/column-hiding-grid-events.mdx", + "order": 1, + "slug": "iggrid-column-hiding-grid-events" + }, + { + "name": "Configuring Column Hiding", + "href": "controls/iggrid/features/columns/hiding/configure-column-hiding.mdx", + "order": 2, + "slug": "iggrid-configure-column-hiding" + }, + { + "name": "Configuring the Column Chooser", + "href": "controls/iggrid/features/columns/hiding/column-chooser.mdx", + "order": 3, + "slug": "iggrid-hiding-column-chooser" + } + ], + "slug": "iggrid-column-hiding" + }, + { + "name": "Column Moving", + "href": "controls/iggrid/features/columns/moving/columnmoving-landingpage.mdx", + "order": 3, + "items": [ + { + "name": "Column Moving Overview", + "href": "controls/iggrid/features/columns/moving/columnmoving-overview.mdx", + "order": 0, + "slug": "iggrid-columnmoving-overview" + }, + { + "name": "Enabling Column Moving", + "href": "controls/iggrid/features/columns/moving/columnmoving-enabling.mdx", + "order": 1, + "slug": "iggrid-columnmoving-enabling" + }, + { + "name": "Configuring Column Moving", + "href": "controls/iggrid/features/columns/moving/columnmoving-configuring.mdx", + "order": 2, + "slug": "iggrid-columnmoving-configuring" + }, + { + "name": "Moving Columns Programmatically", + "href": "controls/iggrid/features/columns/moving/columnmoving-movingcolumnsprogrammatically.mdx", + "order": 3, + "slug": "iggrid-columnmoving-movingcolumnsprogrammatically" + }, + { + "name": "Property Reference", + "href": "controls/iggrid/features/columns/moving/columnmoving-propertyreference.mdx", + "order": 4, + "slug": "iggrid-columnmoving-propertyreference" + } + ], + "slug": "iggrid-columnmoving-landingpage" + }, + { + "name": "Column Resizing", + "href": "controls/iggrid/features/columns/column-resizing.mdx", + "order": 4, + "slug": "iggrid-column-resizing" + }, + { + "name": "Column Summaries", + "href": "controls/iggrid/features/columns/summaries/column-summaries.mdx", + "order": 5, + "items": [ + { + "name": "Enabling Column Summaries", + "href": "controls/iggrid/features/columns/summaries/enabling-column-summaries.mdx", + "order": 0, + "slug": "iggrid-enabling--column-summaries" + }, + { + "name": "Configuring Column Summaries", + "href": "controls/iggrid/features/columns/summaries/configuring-column-summaries.mdx", + "order": 1, + "slug": "iggrid-configuring-column-summaries" + }, + { + "name": "Column Summaries Events", + "href": "controls/iggrid/features/columns/summaries/column-summaries-events.mdx", + "order": 2, + "slug": "iggrid-column-summaries-events" + } + ], + "slug": "iggrid-column-summaries" + }, + { + "name": "Column Template", + "href": "controls/iggrid/features/columns/template/column-template.mdx", + "order": 6, + "items": [ + { + "name": "Creating a Basic Column Template", + "href": "controls/iggrid/features/columns/template/creating-a-basic-column-template-in-the-iggrid.mdx", + "order": 0, + "slug": "creating-a-basic-column-template-in-the-iggrid" + } + ], + "slug": "iggrid-column-template" + }, + { + "name": "Filtering", + "href": "controls/iggrid/features/columns/filtering.mdx", + "order": 7, + "slug": "iggrid-filtering" + }, + { + "name": "Multi-Column Headers", + "href": "controls/iggrid/features/columns/multi-headers/multicolumnheaders-landingpage.mdx", + "order": 8, + "items": [ + { + "name": "Multi-Column Headers Overview", + "href": "controls/iggrid/features/columns/multi-headers/multicolumnheaders-multicolumnheaders.mdx", + "order": 0, + "slug": "iggrid-multicolumnheaders-multicolumnheaders" + }, + { + "name": "Configuring Multi-Column Headers", + "href": "controls/iggrid/features/columns/multi-headers/multicolumnheaders-configuring.mdx", + "order": 1, + "slug": "iggrid-multicolumnheaders-configuring" + } + ], + "slug": "iggrid-multicolumnheaders-landingpage" + }, + { + "name": "Sorting", + "href": "controls/iggrid/features/columns/sorting/sorting.mdx", + "order": 9, + "items": [ + { + "name": "Sorting Overview", + "href": "controls/iggrid/features/columns/sorting/overview.mdx", + "order": 0, + "slug": "iggrid-sorting-overview" + }, + { + "name": "Multiple Sorting Dialog", + "href": "controls/iggrid/features/columns/sorting/multiple-sorting-dialog.mdx", + "order": 1, + "slug": "iggrid-multiple-sorting-dialog" + } + ], + "slug": "iggrid-sorting" + }, + { + "name": "Unbound Columns", + "href": "controls/iggrid/features/columns/unbound/unboundcolumns-landing-page.mdx", + "order": 10, + "items": [ + { + "name": "Unbound Columns Overview", + "href": "controls/iggrid/features/columns/unbound/unboundcolumns-overview.mdx", + "order": 1, + "slug": "iggrid-unboundcolumns-overview" + }, + { + "name": "Setting a Column as Unbound", + "href": "controls/iggrid/features/columns/unbound/unboundcolumns-setting-column-as-unbound.mdx", + "order": 2, + "slug": "iggrid-unboundcolumns-setting-column-as-unbound" + }, + { + "name": "Working with Unbound Columns", + "href": "controls/iggrid/features/columns/unbound/working/unboundcolumns-working-with-landingpage.mdx", + "order": 3, + "items": [ + { + "name": "Populating Unbound Columns with Data", + "href": "controls/iggrid/features/columns/unbound/working/populate/unboundcolumns-populating-with-data-landingpage.mdx", + "order": 0, + "items": [ + { + "name": "Populating Unbound Columns Overview", + "href": "controls/iggrid/features/columns/unbound/working/populate/unboundcolumns-populating-with-data-overview.mdx", + "order": 0, + "slug": "iggrid-unboundcolumns-populating-with-data-overview" + }, + { + "name": "Populating Unbound Columns Locally", + "href": "controls/iggrid/features/columns/unbound/working/populate/unboundcolumns-populating-with-data-locally.mdx", + "order": 1, + "slug": "iggrid-unboundcolumns-populating-with-data-locally" + }, + { + "name": "Populating Unbound Columns Remotely", + "href": "controls/iggrid/features/columns/unbound/working/populate/unboundcolumns-populating-with-data-remotely.mdx", + "slug": "iggrid-unboundcolumns-populating-with-data-remotely" + } + ], + "slug": "iggrid-unboundcolumns-populating-with-data-landingpage" + }, + { + "name": "Rendering Calculated Values", + "href": "controls/iggrid/features/columns/unbound/working/unboundcolumns-rendering-calculated-values.mdx", + "order": 1, + "slug": "iggrid-unboundcolumns-rendering-calculated-values" + }, + { + "name": "Optimizing Performance", + "href": "controls/iggrid/features/columns/unbound/working/unboundcolumns-optimize-performance.mdx", + "order": 2, + "slug": "iggrid-unboundcolumns-optimize-performance" + } + ], + "slug": "iggrid-unboundcolumns-working-with-landingpage" + }, + { + "name": "Known Issues and Limitations", + "href": "controls/iggrid/features/columns/unbound/unboundcolumns-known-issues.mdx", + "order": 4, + "slug": "iggrid-unboundcolumns-known-issues" + }, + { + "name": "API Reference", + "href": "controls/iggrid/features/columns/unbound/api/unboundcolumns-api-reference-landingpage.mdx", + "order": 5, + "items": [ + { + "name": "Method Reference", + "href": "controls/iggrid/features/columns/unbound/api/unboundcolumns-method-reference.mdx", + "slug": "iggrid-unboundcolumns-method-reference" + }, + { + "name": "Property Reference", + "href": "controls/iggrid/features/columns/unbound/api/unboundcolumns-property-reference.mdx", + "slug": "iggrid-unboundcolumns-property-reference" + } + ], + "slug": "iggrid-unboundcolumns-api-reference-landingpage" + } + ], + "slug": "iggrid-unboundcolumns-landing-page" + } + ], + "slug": "iggrid-columnmanagementfeatures-landingpage" + }, + { + "name": "Feature Chooser", + "href": "controls/iggrid/features/feature-chooser.mdx", + "order": 1, + "slug": "iggrid-feature-chooser" + }, + { + "name": "Row Selectors", + "href": "controls/iggrid/features/row-selectors/row-selectors.mdx", + "order": 2, + "items": [ + { + "name": "Enabling Row Selectors", + "href": "controls/iggrid/features/row-selectors/enabling-row-selectors.mdx", + "order": 0, + "slug": "iggrid-enabling-row-selectors" + }, + { + "name": "Configuring Row Selectors", + "href": "controls/iggrid/features/row-selectors/configuring-row-selectors.mdx", + "order": 1, + "slug": "iggrid-configuring-row-selectors" + }, + { + "name": "Row Selectors Events", + "href": "controls/iggrid/features/row-selectors/events.mdx", + "order": 2, + "slug": "iggrid-rowselectors-events" + } + ], + "slug": "iggrid-row-selectors" + }, + { + "name": "Selection", + "href": "controls/iggrid/features/selection/selection.mdx", + "order": 3, + "items": [ + { + "name": "Selection Overview", + "href": "controls/iggrid/features/selection/overview.mdx", + "order": 0, + "slug": "iggrid-selection-overview" + }, + { + "name": "Multiple Cell Selection", + "href": "controls/iggrid/features/selection/multiple-cell-selection.mdx", + "order": 1, + "slug": "iggrid-multiple-cell-selection" + } + ], + "slug": "iggrid-selection" + }, + { + "name": "Tooltips", + "href": "controls/iggrid/features/tooltips/tooltips.mdx", + "order": 4, + "items": [ + { + "name": "Tooltips Overview", + "href": "controls/iggrid/features/tooltips/overview.mdx", + "order": 0, + "slug": "iggrid-tooltips-overview" + }, + { + "name": "Enabling Tooltips", + "href": "controls/iggrid/features/tooltips/enabling-tooltips.mdx", + "order": 1, + "slug": "iggrid-enabling-tooltips" + }, + { + "name": "Configuring Tooltips", + "href": "controls/iggrid/features/tooltips/using-tooltips.mdx", + "order": 2, + "slug": "iggrid-using-tooltips" + }, + { + "name": "Styling the Grid Tooltips", + "href": "controls/iggrid/features/tooltips/popover-style-for-tooltips.mdx", + "order": 4, + "slug": "iggrid-popover-style-for-tooltips" + } + ], + "slug": "igGrid_Tooltips" + }, + { + "name": "Updating", + "href": "controls/iggrid/features/updating/landingpage.mdx", + "order": 5, + "items": [ + { + "name": "Updating Overview", + "href": "controls/iggrid/features/updating/updating.mdx", + "order": 0, + "slug": "iggrid-updating" + }, + { + "name": "Migrating to the new Updating", + "href": "controls/iggrid/features/updating/migrating-to-the-new-updating.mdx", + "order": 1, + "slug": "iggrid-updating-migrating-to-the-new-updating" + }, + { + "name": "Working with igCombo editor provider", + "href": "controls/iggrid/features/updating/working-with-combo-editor-provider.mdx", + "order": 2, + "slug": "working-with-combo-editor-provider" + }, + { + "name": "Implementing Custom Editor Provider", + "href": "controls/iggrid/features/updating/implementing-custom-editor-provider.mdx", + "order": 3, + "slug": "implementing-custom-editor-provider" + }, + { + "name": "Implementing Paste from Excel in igGrid", + "href": "controls/iggrid/features/updating/implementing-paste-from-excel.mdx", + "order": 4, + "slug": "implementing-paste-from-excel" + }, + { + "name": "Row Edit Dialog", + "href": "controls/iggrid/features/updating/row-template/roweditdialog-landingpage.mdx", + "items": [ + { + "name": "Row Edit Dialog Overview", + "href": "controls/iggrid/features/updating/row-template/roweditdialog.mdx", + "order": 0, + "slug": "iggrid-updating-roweditdialog" + }, + { + "name": "Configuring the Row Edit Dialog", + "href": "controls/iggrid/features/updating/row-template/roweditdialog-configuring.mdx", + "order": 1, + "slug": "iggrid-updating-dialog-configuring" + } + ], + "slug": "iggrid-updating-roweditdialog-landingpage" + } + ], + "slug": "iggrid-updating-landingpage" + }, + { + "name": "Paging", + "href": "controls/iggrid/features/paging.mdx", + "order": 6, + "slug": "iggrid-paging" + }, + { + "name": "Cell Merging", + "href": "controls/iggrid/features/cell-merging/landingpage.mdx", + "order": 7, + "items": [ + { + "name": "Cell Merging Overview", + "href": "controls/iggrid/features/cell-merging/overview.mdx", + "order": 0, + "slug": "iggrid-cellmerging-overview" + }, + { + "name": "Cell Merging Advanced Customization", + "href": "controls/iggrid/features/cell-merging/advanced.mdx", + "order": 1, + "slug": "iggrid-cellmerging-advanced" + } + ], + "slug": "iggrid-cellmerging-landingpage" + }, + { + "name": "Responsive Web Design Mode", + "href": "controls/iggrid/features/responsive/web-design-mode-landingpage.mdx", + "order": 8, + "items": [ + { + "name": "Responsive Web Design Mode Overview", + "href": "controls/iggrid/features/responsive/web-design-mode-overview.mdx", + "order": 0, + "slug": "iggrid-responsive-web-design-mode-overview" + }, + { + "name": "Enabling Responsive Web Design Mode", + "href": "controls/iggrid/features/responsive/enabling-responsive-web-design-mode.mdx", + "order": 1, + "slug": "iggrid-enabling-responsive-web-design-mode" + }, + { + "name": "Configuring Responsive Web Design Mode", + "href": "controls/iggrid/features/responsive/configure/configuring-responsive-web-design-mode-landingpage.mdx", + "order": 2, + "items": [ + { + "name": "Configuring Responsive Web Design Mode Overview", + "href": "controls/iggrid/features/responsive/configure/configuring-responsive-web-design-mode-overview.mdx", + "order": 0, + "slug": "iggrid-configuring-responsive-web-design-mode-overview" + }, + { + "name": "Configuring Column Hiding", + "href": "controls/iggrid/features/responsive/configure/web-design-mode-configuring-column-hiding.mdx", + "order": 1, + "slug": "iggrid-responsive-web-design-mode-configuring-column-hiding" + }, + { + "name": "Configuring Column Templates", + "href": "controls/iggrid/features/responsive/configure/web-design-mode-configuring-row-and-column-templates.mdx", + "order": 2, + "slug": "iggrid-responsive-web-design-mode-configuring-row-and-column-templates" + }, + { + "name": "Creating Custom Responsive Web Design Profiles", + "href": "controls/iggrid/features/responsive/configure/web-design-mode-creating-custom-profile.mdx", + "order": 3, + "slug": "iggrid-responsive-web-design-mode-creating-custom-profile" + }, + { + "name": "Configuring Bootstrap Support", + "href": "controls/iggrid/features/responsive/configure/web-design-mode-configuring-bootstrap-support.mdx", + "order": 4, + "slug": "iggrid-responsive-web-design-mode-configuring-bootstrap-support" + }, + { + "name": "Configuring Single Column Template", + "href": "controls/iggrid/features/responsive/configure/web-design-mode-configuring-single-column-template.mdx", + "order": 5, + "slug": "iggrid-responsive-web-design-mode-configuring-single-column-template" + }, + { + "name": "Configuring Vertical Column Rendering", + "href": "controls/iggrid/features/responsive/configure/web-design-mode-configuring-vertical-column-rendering.mdx", + "order": 5, + "slug": "iggrid-responsive-web-design-mode-configuring-vertical-column-rendering" + } + ], + "slug": "iggrid-configuring-responsive-web-design-mode-landingpage" + } + ], + "slug": "iggrid-responsive-web-design-mode-landingpage" + }, + { + "name": "jsRender Integration", + "href": "controls/iggrid/features/jsrender-integration.mdx", + "order": 9, + "slug": "iggrid-jsrender-integration" + }, + { + "name": "REST Updating", + "href": "controls/iggrid/features/rest-updating.mdx", + "order": 10, + "slug": "iggrid-rest-updating" + }, + { + "name": "Configuring Knockout Support", + "href": "controls/iggrid/features/configuring-knockout-support.mdx", + "order": 11, + "slug": "iggrid-configuring-knockout-support" + }, + { + "name": "Columns and Layout", + "href": "controls/iggrid/features/columns-and-layout.mdx", + "order": 12, + "slug": "iggrid-columns-and-layout" + }, + { + "name": "Virtualization", + "href": "controls/iggrid/features/virtualization/virtualization.mdx", + "order": 13, + "items": [ + { + "name": "Virtualization Overview", + "href": "controls/iggrid/features/virtualization/overview.mdx", + "order": 0, + "slug": "iggrid-virtualization-overview" + }, + { + "name": "Enabling and Configuring Virtualization", + "href": "controls/iggrid/features/virtualization/enabling-and-configuring-virtualization.mdx", + "order": 1, + "slug": "iggrid-enabling-and-configuring-virtualization" + } + ], + "slug": "iggrid-virtualization" + }, + { + "name": "Feature Compatibility Matrix", + "href": "controls/iggrid/features/feature-compatibility-matrixiggrid.mdx", + "order": 14, + "slug": "feature-compatibility-matrix(iggrid)" + }, + { + "name": "Grid Multi-Row Layout", + "href": "controls/iggrid/features/multirowlayout.mdx", + "order": 16, + "slug": "iggrid-multirowlayout" + }, + { + "name": "Extending igGrid Modal Dialog", + "href": "controls/iggrid/features/extending-iggrid-modal-dialog.mdx", + "order": 17, + "slug": "extending-iggrid-modal-dialog" + }, + { + "name": "Handling Remote Features Manually", + "href": "controls/iggrid/features/handling-remote-features-manually.mdx", + "order": 18, + "slug": "handling-remote-features-manually" + } + ], + "slug": "iggrid-features-landing-page" + }, + { + "name": "Developing ASP.NET MVC Applications with igGrid", + "href": "controls/iggrid/developing-asp-net-mvc-applications-with-iggrid.mdx", + "order": 4, + "slug": "iggrid-developing-asp-net-mvc-applications-with-iggrid" + }, + { + "name": "Grid Excel Exporter Overview", + "href": "controls/iggrid/iggridexcelexporter-overview.mdx", + "order": 5, + "slug": "iggridexcelexporter-overview" + }, + { + "name": "Performance Guide", + "href": "controls/iggrid/performance-guide.mdx", + "order": 6, + "slug": "iggrid-performance-guide" + }, + { + "name": "Styling igGrid", + "href": "controls/iggrid/styling-and-theming.mdx", + "order": 7, + "slug": "iggrid-styling-and-theming" + }, + { + "name": "Accessibility Compliance", + "href": "controls/iggrid/accessibility-compliance.mdx", + "order": 8, + "slug": "iggrid-accessibility-compliance" + }, + { + "name": "Known Issues and Limitations", + "href": "controls/iggrid/known-issues.mdx", + "order": 9, + "slug": "iggrid-known-issues" + }, + { + "name": "jQuery and MVC API Links", + "href": "controls/iggrid/jquery-api.mdx", + "order": 10, + "slug": "iggrid-jquery-api" + }, + { + "name": "Configuring igGridExcelExporter", + "href": "controls/iggrid/iggridexcelexporter-configuring.mdx", + "order": 11, + "slug": "iggridexcelexporter-configuring" + }, + { + "name": "Migrating enableUTCDates option after 17.1", + "href": "controls/iggrid/migrating-enableutcdates-option-in-17-1.mdx", + "order": 12, + "slug": "migrating-enableUTCDates-option-in-17-1" + } + ], + "slug": "iggrid" + }, + { + "name": "igHierarchicalGrid", + "href": "controls/ighierarchicalgrid/ighierarchicalgrid.mdx", + "items": [ + { + "name": "igHierarchicalGrid Overview", + "href": "controls/ighierarchicalgrid/overview.mdx", + "order": 0, + "slug": "ighierarchicalgrid-overview" + }, + { + "name": "Initializing igHierarchicalGrid", + "href": "controls/ighierarchicalgrid/initializing.mdx", + "order": 1, + "slug": "ighierarchicalgrid-initializing" + }, + { + "name": "Binding igHierarchicalGrid to Data", + "href": "controls/ighierarchicalgrid/bind/binding-to-rest-services-landingpage.mdx", + "order": 2, + "items": [ + { + "name": "Binding igHierarchicalGrid to a DataSet", + "href": "controls/ighierarchicalgrid/bind/binding-to-dataset.mdx", + "slug": "ighierarchicalgrid-binding-to-dataset" + }, + { + "name": "igHierarchicalGrid Binding to Local Data", + "href": "controls/ighierarchicalgrid/bind/binding-to-local-data.mdx", + "slug": "ighierarchicalgrid-binding-to-local-data" + }, + { + "name": "Binding igHierarchicalGrid to REST Services", + "href": "controls/ighierarchicalgrid/bind/binding-to-rest-services.mdx", + "slug": "ighierarchicalgrid-binding-to-rest-services" + }, + { + "name": "Binding to ASP.NET MVC WebAPI", + "href": "controls/ighierarchicalgrid/bind/binding-to-webapi.mdx", + "slug": "ighierarchicalgrid-binding-to-webapi" + } + ], + "slug": "ighierarchicalgrid-binding-to-rest-services-landingpage" + }, + { + "name": "igHierarchicalGrid Features", + "href": "controls/ighierarchicalgrid/features/landingpage.mdx", + "order": 3, + "items": [ + { + "name": "Columns and Layouts", + "href": "controls/ighierarchicalgrid/features/columns-and-layouts.mdx", + "order": 0, + "slug": "ighierarchicalgrid-columns-and-layouts" + }, + { + "name": "Column Template", + "href": "controls/ighierarchicalgrid/features/column-template/column-template.mdx", + "order": 1, + "items": [ + { + "name": "Creating a Basic Column Template in igHierarchicalGrid", + "href": "controls/ighierarchicalgrid/features/column-template/creating-a-basic-column-template-in-ighierarchicalgrid.mdx", + "slug": "creating-a-basic-column-template-in-ighierarchicalgrid" + } + ], + "slug": "ighierarchicalgrid-column-template" + }, + { + "name": "Feature Inheritance", + "href": "controls/ighierarchicalgrid/features/feature-inheritance.mdx", + "order": 2, + "slug": "ighierarchicalgrid-feature-inheritance" + }, + { + "name": "Grouping", + "href": "controls/ighierarchicalgrid/features/grouping/landingpage.mdx", + "order": 3, + "items": [ + { + "name": "Grouping Overview", + "href": "controls/ighierarchicalgrid/features/grouping/overview.mdx", + "order": 0, + "slug": "ighierarchicalgrid-grouping-overview" + }, + { + "name": "Enabling and Configuring Grouping", + "href": "controls/ighierarchicalgrid/features/grouping/enabling-and-configuring.mdx", + "order": 1, + "slug": "ighierarchicalgrid-grouping-enabling-and-configuring" + }, + { + "name": "Configuring Custom Grouping", + "href": "controls/ighierarchicalgrid/features/grouping/custom.mdx", + "order": 2, + "slug": "ighierarchicalgrid-grouping-custom" + }, + { + "name": "Grouping with Summaries", + "href": "controls/ighierarchicalgrid/features/grouping/with-summaries.mdx", + "order": 3, + "slug": "ighierarchicalgrid-grouping-with-summaries" + } + ], + "slug": "ighierarchicalgrid-grouping-landingpage" + }, + { + "name": "Configuring Multi-Column Headers", + "href": "controls/ighierarchicalgrid/features/multicolumnheaders-configuring.mdx", + "order": 4, + "slug": "ighierarchicalgrid-multicolumnheaders-configuring" + }, + { + "name": "Load-on-Demand", + "href": "controls/ighierarchicalgrid/features/load-on-demand.mdx", + "order": 5, + "slug": "ighierarchicalgrid-load-on-demand" + }, + { + "name": "Row Selectors", + "href": "controls/ighierarchicalgrid/features/row-selectors/landingpage.mdx", + "order": 6, + "items": [ + { + "name": "Enabling Row Selectors", + "href": "controls/ighierarchicalgrid/features/row-selectors/enabling-rowselectors.mdx", + "order": 0, + "slug": "ighierarchicalgrid-enabling-rowselectors" + }, + { + "name": "Configuring Row Selectors", + "href": "controls/ighierarchicalgrid/features/row-selectors/configuring-rowselectors.mdx", + "order": 1, + "slug": "ighierarchicalgrid-configuring-rowselectors" + }, + { + "name": "Event Reference", + "href": "controls/ighierarchicalgrid/features/row-selectors/events.mdx", + "order": 2, + "slug": "ighierarchicalgrid-rowselectors-events" + } + ], + "slug": "ighierarchicalgrid-row-selectors-landingpage" + }, + { + "name": "Selection", + "href": "controls/ighierarchicalgrid/features/selection/jquery-ighierarchical-grid-selection-landing-page.mdx", + "order": 7, + "items": [ + { + "name": "Selection Overview", + "href": "controls/ighierarchicalgrid/features/selection/jquery-ighierarchical-grid-selection-overview.mdx", + "order": 0, + "slug": "jquery-ighierarchical-grid-selection-overview" + }, + { + "name": "Enabling Selection", + "href": "controls/ighierarchicalgrid/features/selection/jquery-ighierarchical-grid-features-selection-enabling-ighierarchical-grid-selection.mdx", + "order": 1, + "slug": "jquery-ighierarchical-grid-features-selection-enabling-ighierarchical-grid-selection" + }, + { + "name": "Selecting and Deselecting Rows and Cells Programmatically", + "href": "controls/ighierarchicalgrid/features/selection/jquery-ighierarchical-grid-selecting-and-deselecting-rows-and-cell-programmatically-in-ighierarchicalgrid.mdx", + "slug": "jquery-ighierarchical-grid-selecting-and-deselecting-rows-and-cell-programmatically-in-ighierarchicalgrid" + } + ], + "slug": "jquery-ighierarchical-grid-selection-landing-page" + }, + { + "name": "Virtualization", + "href": "controls/ighierarchicalgrid/features/virtualization/virtualization.mdx", + "order": 8, + "items": [ + { + "name": "Virtualization Overview", + "href": "controls/ighierarchicalgrid/features/virtualization/overview.mdx", + "order": 0, + "slug": "ighierarchicalgrid-virtualization-overview" + }, + { + "name": "Enabling and Configuring Virtualization", + "href": "controls/ighierarchicalgrid/features/virtualization/enabling-and-configuring-virtualization.mdx", + "order": 1, + "slug": "ighierarchicalgrid-enabling-and-configuring-virtualization" + } + ], + "slug": "ighierarchicalgrid-virtualization" + } + ], + "slug": "ighierarchicalgrid-features-landingpage" + }, + { + "name": "Expanding and Collapsing Rows Programmatically", + "href": "controls/ighierarchicalgrid/jquery-ighierarchical-grid-expanding-and-collapsing-rows-programmatically-in-ighierarchicalgrid.mdx", + "order": 4, + "slug": "jquery-ighierarchical-grid-expanding-and-collapsing-rows-programmatically-in-ighierarchicalgrid" + }, + { + "name": "Styling igHierarchicalGrid", + "href": "controls/ighierarchicalgrid/styling-and-theming.mdx", + "order": 5, + "slug": "ighierarchicalgrid-styling-and-theming" + }, + { + "name": "Accessibility Compliance", + "href": "controls/ighierarchicalgrid/accessibility-compliance.mdx", + "order": 6, + "slug": "ighierarchicalgrid-accessibility-compliance" + }, + { + "name": "Known Issues and Limitations", + "href": "controls/ighierarchicalgrid/known-issues.mdx", + "order": 7, + "slug": "ighierarchicalgrid-known-issues" + }, + { + "name": "Event Reference", + "href": "controls/ighierarchicalgrid/events-api.mdx", + "order": 8, + "slug": "ighierarchicalgrid-events-api" + }, + { + "name": "Configuring Knockout Support", + "href": "controls/ighierarchicalgrid/configuring-knockout-support.mdx", + "order": 9, + "slug": "ighierarchicalgrid-configuring-knockout-support" + } + ], + "slug": "ighierarchicalgrid-ighierarchicalgrid" + }, + { + "name": "igHtmlEditor", + "href": "controls/ightmleditor/ightmleditor.mdx", + "items": [ + { + "name": "igHtmlEditor Overview", + "href": "controls/ightmleditor/overview.mdx", + "order": 0, + "slug": "ightmleditor-overview" + }, + { + "name": "Adding igHtmlEditor", + "href": "controls/ightmleditor/adding-ightmleditor.mdx", + "order": 1, + "slug": "ightmleditor-adding-ightmleditor" + }, + { + "name": "Working with the igHtmlEditor", + "href": "controls/ightmleditor/working/with-ightmleditor.mdx", + "order": 2, + "items": [ + { + "name": "Configuring Toolbars and Buttons", + "href": "controls/ightmleditor/working/configuring-toolbars-and-buttons.mdx", + "order": 0, + "slug": "ightmleditor-configuring-toolbars-and-buttons" + }, + { + "name": "Saving the HTML Content Programmatically", + "href": "controls/ightmleditor/working/saving-html-content.mdx", + "order": 1, + "slug": "ightmleditor-saving-html-content" + }, + { + "name": "Modifying Contents Programmatically", + "href": "controls/ightmleditor/working/modifying-contents-programmatically.mdx", + "order": 2, + "slug": "ightmleditor-modifying-contents-programmatically" + }, + { + "name": "AngularJS Support", + "href": "controls/ightmleditor/working/angularjs-support.mdx", + "order": 3, + "slug": "ightmleditor-angularjs-support" + }, + { + "name": "TypeScript Support", + "href": "controls/ightmleditor/working/typescript-support.mdx", + "order": 4, + "slug": "ightmleditor-typescript-support" + } + ], + "slug": "ightmleditor-working-with-ightmleditor" + }, + { + "name": "Custom Toolbars", + "href": "controls/ightmleditor/custom-toolbars/custom-toolbars.mdx", + "order": 3, + "items": [ + { + "name": "Configuring Custom Toolbars", + "href": "controls/ightmleditor/custom-toolbars/configuring-custom-toolbars.mdx", + "order": 0, + "slug": "ightmleditor-configuring-custom-toolbars" + }, + { + "name": "Adding a Button to a Custom Toolbar", + "href": "controls/ightmleditor/custom-toolbars/adding-button-to-custom-toolbar.mdx", + "order": 1, + "slug": "ightmleditor-adding-button-to-custom-toolbar" + }, + { + "name": "Adding a Combo Box to a Custom Toolbar", + "href": "controls/ightmleditor/custom-toolbars/adding-combo-to-custom-toolbar.mdx", + "order": 2, + "slug": "ightmleditor-adding-combo-to-custom-toolbar" + } + ], + "slug": "ightmleditor-custom-toolbars" + }, + { + "name": "Styling and Theming", + "href": "controls/ightmleditor/styling-and-theming.mdx", + "order": 4, + "slug": "ightmleditor-styling-and-theming" + }, + { + "name": "API Reference Links", + "href": "controls/ightmleditor/asp-net-mvc-helper-api.mdx", + "order": 5, + "slug": "ightmleditor-asp-net-mvc-helper-api" + }, + { + "name": "igHtmlEditor API Reference", + "href": "controls/ightmleditor/api-reference.mdx", + "order": 6, + "slug": "ightmleditor-api-reference" + }, + { + "name": "Accessibility Compliance", + "href": "controls/ightmleditor/accessibility-compliance.mdx", + "order": 7, + "slug": "ightmleditor-accessibility-compliance" + }, + { + "name": "Known Issues and Limitations", + "href": "controls/ightmleditor/known-issues.mdx", + "order": 8, + "slug": "ightmleditor-known-issues" + } + ], + "slug": "ightmleditor-ightmleditor" + }, + { + "name": "igLayoutManager", + "href": "controls/iglayoutmanager/landing-page.mdx", + "items": [ + { + "name": "igLayoutManager Overview", + "href": "controls/iglayoutmanager/overview.mdx", + "order": 0, + "slug": "iglayoutmanager-overview" + }, + { + "name": "Adding igLayoutManager", + "href": "controls/iglayoutmanager/adding.mdx", + "order": 1, + "slug": "iglayoutmanager-adding" + }, + { + "name": "Configuring igLayoutManager", + "href": "controls/iglayoutmanager/configuring-layouts.mdx", + "order": 2, + "slug": "iglayoutmanager-configuring-layouts" + }, + { + "name": "Handling Events", + "href": "controls/iglayoutmanager/handling-events.mdx", + "order": 3, + "slug": "iglayoutmanager-handling-events" + }, + { + "name": "Accessibility Compliance", + "href": "controls/iglayoutmanager/accessibility-compliance.mdx", + "order": 4, + "slug": "iglayoutmanager-accessibility-compliance" + }, + { + "name": "Known Issues and Limitations", + "href": "controls/iglayoutmanager/known-issues-and-limitations.mdx", + "order": 5, + "slug": "iglayoutmanager-known-issues-and-limitations" + }, + { + "name": "jQuery and MVC API Links", + "href": "controls/iglayoutmanager/jquery-and-aspnet-mvc-helper-api-links.mdx", + "order": 6, + "slug": "iglayoutmanager-jquery-and-asp.net-mvc-helper-api-links" + } + ], + "slug": "iglayoutmanager-landing-page" + }, + { + "name": "igLinearGauge", + "href": "controls/iglineargauge/iglineargauge.mdx", + "items": [ + { + "name": "igLinearGauge Overview", + "href": "controls/iglineargauge/overview.mdx", + "order": 0, + "slug": "iglineargauge-overview" + }, + { + "name": "jQuery and MVC API Links", + "href": "controls/iglineargauge/api-links.mdx", + "order": 1, + "slug": "iglineargauge-api-links" + }, + { + "name": "Adding igLinearGauge", + "href": "controls/iglineargauge/adding/adding.mdx", + "order": 2, + "items": [ + { + "name": "Adding igLinearGauge to an HTML Page", + "href": "controls/iglineargauge/adding/to-an-html-page.mdx", + "order": 0, + "slug": "iglineargauge-adding-to-an-html-page" + }, + { + "name": "Adding igLinearGauge to an ASP.NET MVC application", + "href": "controls/iglineargauge/adding/using-the-mvc-helper.mdx", + "order": 1, + "slug": "iglineargauge-adding-using-the-mvc-helper" + } + ], + "slug": "iglineargauge-adding" + }, + { + "name": "Configuring igLinearGauge", + "href": "controls/iglineargauge/configuring/configuring.mdx", + "order": 3, + "items": [ + { + "name": "Configuring the Orientation and Direction", + "href": "controls/iglineargauge/configuring/the-orientation-and-direction.mdx", + "order": 0, + "slug": "iglineargauge-configuring-the-orientation-and-direction" + }, + { + "name": "Configuring the Visual Elements", + "href": "controls/iglineargauge/configuring/elements/the-visual-elements.mdx", + "order": 1, + "items": [ + { + "name": "Configuring the Scale", + "href": "controls/iglineargauge/configuring/elements/the-scale.mdx", + "order": 0, + "slug": "iglineargauge-configuring-the-scale" + }, + { + "name": "Configuring the Needle", + "href": "controls/iglineargauge/configuring/elements/the-needle.mdx", + "order": 1, + "slug": "iglineargauge-configuring-the-needle" + }, + { + "name": "Configuring Comparative Ranges", + "href": "controls/iglineargauge/configuring/elements/comparative-ranges.mdx", + "order": 2, + "slug": "iglineargauge-configuring-comparative-ranges" + }, + { + "name": "Configuring the Background", + "href": "controls/iglineargauge/configuring/elements/the-background.mdx", + "order": 3, + "slug": "iglineargauge-configuring-the-background" + }, + { + "name": "Configuring the Tooltips", + "href": "controls/iglineargauge/configuring/elements/the-tooltips.mdx", + "order": 4, + "slug": "iglineargauge-configuring-the-tooltips" + } + ], + "slug": "iglineargauge-configuring-the-visual-elements" + } + ], + "slug": "iglineargauge-configuring" + }, + { + "name": "Accessibility Compliance", + "href": "controls/iglineargauge/accessibility-compliance.mdx", + "order": 4, + "slug": "iglineargauge-accessibility-compliance" + }, + { + "name": "Known Issues and Limitations", + "href": "controls/iglineargauge/known-issues-and-limitations.mdx", + "order": 5, + "slug": "iglineargauge-known-issues-and-limitations" + } + ], + "slug": "iglineargauge" + }, + { + "name": "igMap", + "href": "controls/igmap/landing-page.mdx", + "items": [ + { + "name": "igMap Overview", + "href": "controls/igmap/overview-igmap.mdx", + "order": 0, + "slug": "overview-igmap" + }, + { + "name": "Adding igMap", + "href": "controls/igmap/adding-igmap.mdx", + "order": 1, + "slug": "adding-igmap" + }, + { + "name": "Binding igMap to Data", + "href": "controls/igmap/data-binding-igmap.mdx", + "order": 2, + "slug": "data-binding-igmap" + }, + { + "name": "Configuring igMap", + "href": "controls/igmap/configuring/igmap.mdx", + "order": 3, + "items": [ + { + "name": "Configuring the Map Provider", + "href": "controls/igmap/configuring/map-provider.mdx", + "order": 0, + "slug": "igmap-configuring-map-provider" + }, + { + "name": "Configuring Features", + "href": "controls/igmap/configuring/features/features.mdx", + "order": 1, + "items": [ + { + "name": "Configuring the Navigation Features", + "href": "controls/igmap/configuring/features/navigation-features.mdx", + "order": 0, + "slug": "igmap-configuring-navigation-features" + }, + { + "name": "Configuring the Visual Features", + "href": "controls/igmap/configuring/features/visual-features.mdx", + "order": 1, + "slug": "igmap-configuring-visual-features" + } + ], + "slug": "igmap-configuring-features" + }, + { + "name": "Configuring the Map Series", + "href": "controls/igmap/configuring/series/creating-different-kinds-maps.mdx", + "order": 2, + "items": [ + { + "name": "Configuring Geographic Contour Line Series", + "href": "controls/igmap/configuring/series/geographic-contour-line-series.mdx", + "order": 0, + "slug": "igmap-configuring-geographic-contour-line-series" + }, + { + "name": "Configuring Geographic High-Density Scatter Series", + "href": "controls/igmap/configuring/series/using-geographic-high-density-scatter-series.mdx", + "order": 1, + "slug": "igmap-using-geographic-high-density-scatter-series" + }, + { + "name": "Configuring Geographic Polyline Series", + "href": "controls/igmap/configuring/series/geographic-polyline-series.mdx", + "order": 2, + "slug": "igmap-configuring-geographic-polyline-series" + }, + { + "name": "Configuring Geographic Scatter Area Series", + "href": "controls/igmap/configuring/series/geographic-scatter-area-series.mdx", + "order": 3, + "slug": "igmap-configuring-geographic-scatter-area-series" + }, + { + "name": "Configuring Geographic Shapes Series", + "href": "controls/igmap/configuring/series/geographic-shapes.mdx", + "order": 4, + "slug": "igmap-configuring-geographic-shapes" + }, + { + "name": "Configuring Geographic Symbol Series", + "href": "controls/igmap/configuring/series/geographic-symbol-series.mdx", + "order": 5, + "slug": "igmap-configuring-geographic-symbol-series" + }, + { + "name": "Configuring Geographic Proportional Symbol Series", + "href": "controls/igmap/configuring/series/geographic-proportional-symbol-series.mdx", + "order": 6, + "slug": "igmap-configuring-geographic-proportional-symbol-series" + } + ], + "slug": "igmap-creating-different-kinds-maps" + } + ], + "slug": "configuring-igmap" + }, + { + "name": "Styling igMap", + "href": "controls/igmap/styling-igmap.mdx", + "order": 4, + "slug": "styling-igmap" + }, + { + "name": "Accessibility Compliance", + "href": "controls/igmap/accessibility-compliance.mdx", + "order": 5, + "slug": "igmap-accessibility-compliance" + }, + { + "name": "Known Issues and Limitations", + "href": "controls/igmap/known-issues-limitations.mdx", + "order": 6, + "slug": "igmap-known-issues-limitations" + }, + { + "name": "jQuery and MVC API Reference", + "href": "controls/igmap/api-links.mdx", + "order": 7, + "slug": "igmap-api-links" + } + ], + "slug": "igmap-landing-page" + }, + { + "name": "igNotifier", + "href": "controls/ignotifier/ignotifier.mdx", + "items": [ + { + "name": "igNotifier Overview", + "href": "controls/ignotifier/overview.mdx", + "order": 0, + "slug": "ignotifier-overview" + } + ], + "slug": "ignotifier" + }, + { + "name": "igPieChart", + "href": "controls/igpiechart/igpiechart.mdx", + "items": [ + { + "name": "igPieChart Overview", + "href": "controls/igpiechart/overview.mdx", + "order": 0, + "slug": "igpiechart-overview" + }, + { + "name": "Adding an igPieChart", + "href": "controls/igpiechart/adding.mdx", + "order": 1, + "slug": "igpiechart-adding" + }, + { + "name": "Data Binding", + "href": "controls/igpiechart/databinding.mdx", + "order": 2, + "slug": "igpiechart-databinding" + }, + { + "name": "Accessibility Compliance", + "href": "controls/igpiechart/accessibility.mdx", + "order": 3, + "slug": "igpiechart-accessibility" + }, + { + "name": "Selection", + "href": "controls/igpiechart/selection.mdx", + "order": 4, + "slug": "igpiechart-selection" + }, + { + "name": "Styling igPieChart with Themes", + "href": "controls/igpiechart/styling-themes.mdx", + "order": 5, + "slug": "igpiechart-styling-themes" + }, + { + "name": "jQuery and MVC API Reference Links", + "href": "controls/igpiechart/api-links.mdx", + "order": 6, + "slug": "igpiechart-api-links" + } + ], + "slug": "igpiechart" + }, + { + "name": "igPivotDataSelector", + "href": "controls/igpivotdataselector/igpivotdataselector.mdx", + "items": [ + { + "name": "igPivotDataSelector Overview", + "href": "controls/igpivotdataselector/overview.mdx", + "order": 0, + "slug": "igpivotdataselector-overview" + }, + { + "name": "Adding igPivotDataSelector", + "href": "controls/igpivotdataselector/adding/adding.mdx", + "order": 2, + "items": [ + { + "name": "Adding igPivotDataSelector to an HTML Page", + "href": "controls/igpivotdataselector/adding/to-html-page.mdx", + "order": 0, + "slug": "igpivotdataselector-adding-to-html-page" + }, + { + "name": "Adding igPivotDataSelector to an ASP.NET MVC Application", + "href": "controls/igpivotdataselector/adding/using-the-mvc-helper.mdx", + "order": 1, + "slug": "igpivotdataselector-adding-using-the-mvc-helper" + } + ], + "slug": "igpivotdataselector-adding" + }, + { + "name": "Accessibility Compliance", + "href": "controls/igpivotdataselector/accessibility-compliance.mdx", + "order": 3, + "slug": "igpivotdataselector-accessibility-compliance" + }, + { + "name": "Known Issues and Limitations", + "href": "controls/igpivotdataselector/known-issues-and-limitations.mdx", + "order": 4, + "slug": "igpivotdataselector-known-issues-and-limitations" + }, + { + "name": "jQuery and MVC API Links", + "href": "controls/igpivotdataselector/api-links.mdx", + "order": 5, + "slug": "igpivotdataselector-api-links" + } + ], + "slug": "igpivotdataselector" + }, + { + "name": "igPivotGrid", + "href": "controls/igpivotgrid/igpivotgrid.mdx", + "items": [ + { + "name": "igPivotGrid Overview", + "href": "controls/igpivotgrid/overview.mdx", + "order": 0, + "slug": "igpivotgrid-overview" + }, + { + "name": "Key Performance Indicators Support (igPivotGrid, igPivotDataSelector,", + "href": "controls/igpivotgrid/kpi-support.mdx", + "order": 1, + "slug": "igpivotgrid-kpi-support" + }, + { + "name": "Adding igPivotGrid", + "href": "controls/igpivotgrid/adding/adding.mdx", + "order": 2, + "items": [ + { + "name": "Adding igPivotGrid to an HTML Page", + "href": "controls/igpivotgrid/adding/to-an-html-page.mdx", + "order": 0, + "slug": "igpivotgrid-adding-to-an-html-page" + }, + { + "name": "Adding igPivotGrid to an ASP.NET MVC Application", + "href": "controls/igpivotgrid/adding/using-the-mvc-helper.mdx", + "order": 1, + "slug": "igpivotgrid-adding-using-the-mvc-helper" + } + ], + "slug": "igpivotgrid-adding" + }, + { + "name": "Accessibility Compliance", + "href": "controls/igpivotgrid/accessibility-compliance.mdx", + "order": 3, + "slug": "igpivotgrid-accessibility-compliance" + }, + { + "name": "Known Issues and Limitations", + "href": "controls/igpivotgrid/known-issues-and-limitations.mdx", + "order": 4, + "slug": "igpivotgrid-known-issues-and-limitations" + }, + { + "name": "jQuery and MVC API Links", + "href": "controls/igpivotgrid/api-links.mdx", + "order": 5, + "slug": "igpivotgrid-api-links" + }, + { + "name": "Configuring igPivotGrid", + "href": "controls/igpivotgrid/configuration.mdx", + "order": 6, + "slug": "igpivotgrid-configuration" + } + ], + "slug": "igpivotgrid" + }, + { + "name": "igPivotView", + "href": "controls/igpivotview/igpivotview.mdx", + "items": [ + { + "name": "igPivotView Overview", + "href": "controls/igpivotview/overview.mdx", + "order": 0, + "slug": "igpivotview-overview" + }, + { + "name": "Adding igPivotView", + "href": "controls/igpivotview/adding/adding.mdx", + "order": 1, + "items": [ + { + "name": "Adding igPivotView to an HTML Page", + "href": "controls/igpivotview/adding/to-html-page.mdx", + "order": 0, + "slug": "igpivotview-adding-to-html-page" + }, + { + "name": "Adding igPivotView to an ASP.NET MVC Application", + "href": "controls/igpivotview/adding/using-the-mvc-helper.mdx", + "order": 1, + "slug": "igpivotview-adding-using-the-mvc-helper" + } + ], + "slug": "igpivotview-adding" + }, + { + "name": "Accessibility Compliance", + "href": "controls/igpivotview/accessibility-compliance.mdx", + "order": 2, + "slug": "igpivotview-accessibility-compliance" + }, + { + "name": "Known Issues and Limitations", + "href": "controls/igpivotview/known-issues-and-limitations.mdx", + "order": 3, + "slug": "igpivotview-known-issues-and-limitations" + }, + { + "name": "jQuery and MVC API Links", + "href": "controls/igpivotview/api-links.mdx", + "order": 4, + "slug": "igpivotview-api-links" + } + ], + "slug": "igpivotview" + }, + { + "name": "igPopover", + "href": "controls/igpopover/landingpage.mdx", + "items": [ + { + "name": "igPopover Overview", + "href": "controls/igpopover/overview.mdx", + "order": 0, + "slug": "igpopover-overview" + }, + { + "name": "Adding igPopover", + "href": "controls/igpopover/adding-igpopover.mdx", + "order": 1, + "slug": "adding-igpopover" + }, + { + "name": "Configuring igPopover", + "href": "controls/igpopover/configuring-igpopover.mdx", + "order": 2, + "slug": "configuring-igpopover" + }, + { + "name": "Handling Events", + "href": "controls/igpopover/handling-events.mdx", + "order": 3, + "slug": "igpopover-handling-events" + }, + { + "name": "Styling igPopover", + "href": "controls/igpopover/styling-igpopover.mdx", + "order": 4, + "slug": "styling-igpopover" + }, + { + "name": "Accessibility Compliance", + "href": "controls/igpopover/accessibility-compliance.mdx", + "order": 5, + "slug": "igpopover-accessibility-compliance" + }, + { + "name": "Known Issues And Limitations", + "href": "controls/igpopover/known-issues-and-limitations.mdx", + "order": 6, + "slug": "igpopover-known-issues-and-limitations" + }, + { + "name": "jQuery and MVC API Links", + "href": "controls/igpopover/api-links/asp-net-mvc-helper-api.mdx", + "order": 7, + "items": [ + { + "name": "Property Reference", + "href": "controls/igpopover/api-links/property-reference.mdx", + "order": 0, + "slug": "igpopover-property-reference" + } + ], + "slug": "igpopover-asp-net-mvc-helper-api" + } + ], + "slug": "igpopover-landingpage" + }, + { + "name": "igQRCodeBarcode", + "href": "controls/igqrcodebarcode/igqrcodebarcode.mdx", + "items": [ + { + "name": "igQRCodeBarcode Overview", + "href": "controls/igqrcodebarcode/overview.mdx", + "order": 0, + "slug": "igqrcodebarcode-overview" + }, + { + "name": "Adding igQRCodeBarcode", + "href": "controls/igqrcodebarcode/adding/adding.mdx", + "order": 1, + "items": [ + { + "name": "Adding igQRCodeBarcode to an HTML Page", + "href": "controls/igqrcodebarcode/adding/to-an-html-page.mdx", + "order": 0, + "slug": "igqrcodebarcode-adding-to-an-html-page" + }, + { + "name": "Adding igQRCodeBarcode to an ASP.NET MVC Application", + "href": "controls/igqrcodebarcode/adding/using-the-mvc-helper.mdx", + "order": 1, + "slug": "igqrcodebarcode-adding-using-the-mvc-helper" + } + ], + "slug": "igqrcodebarcode-adding" + }, + { + "name": "Configuring igQRCodeBarcode", + "href": "controls/igqrcodebarcode/configuring/configuring.mdx", + "order": 2, + "items": [ + { + "name": "Configuring the Character Encoding", + "href": "controls/igqrcodebarcode/configuring/the-character-encoding.mdx", + "slug": "igqrcodebarcode-configuring-the-character-encoding" + }, + { + "name": "Configuring the Dimensions of the QR Barcode", + "href": "controls/igqrcodebarcode/configuring/the-dimensions.mdx", + "slug": "igqrcodebarcode-configuring-the-dimensions" + }, + { + "name": "Configuring the QR-Code-Specific Settings", + "href": "controls/igqrcodebarcode/configuring/the-qr-code-specific-settings.mdx", + "slug": "igqrcodebarcode-configuring-the-qr-code-specific-settings" + } + ], + "slug": "igqrcodebarcode-configuring" + }, + { + "name": "Styling igQRCodeBarcode", + "href": "controls/igqrcodebarcode/styling.mdx", + "order": 3, + "slug": "igqrcodebarcode-styling" + }, + { + "name": "Accessibility Compliance", + "href": "controls/igqrcodebarcode/accessibility-compliance.mdx", + "order": 4, + "slug": "igqrcodebarcode-accessibility-compliance" + }, + { + "name": "Known Issues and Limitations", + "href": "controls/igqrcodebarcode/known-issues-and-limitations.mdx", + "order": 5, + "slug": "igqrcodebarcode-known-issues-and-limitations" + }, + { + "name": "jQuery and MVC API Links", + "href": "controls/igqrcodebarcode/api-links.mdx", + "order": 6, + "slug": "igqrcodebarcode-api-links" + } + ], + "slug": "igqrcodebarcode" + }, + { + "name": "igRadialGauge", + "href": "controls/igradialgauge/igradialgauge.mdx", + "items": [ + { + "name": "igRadialGauge Overview", + "href": "controls/igradialgauge/overview.mdx", + "order": 0, + "slug": "igradialgauge-igradialgauge-overview" + }, + { + "name": "Adding igRadialGauge", + "href": "controls/igradialgauge/getting-started-with-igradialgauge.mdx", + "order": 1, + "slug": "igradialgauge-getting-started-with-igradialgauge" + }, + { + "name": "Configuring igRadialGauge", + "href": "controls/igradialgauge/configuring/using-igradialgauge.mdx", + "order": 2, + "items": [ + { + "name": "Configuring the Scales", + "href": "controls/igradialgauge/configuring/the-scales.mdx", + "order": 0, + "slug": "igradialgauge-configuring-the-scales" + }, + { + "name": "Configuring the Tick Marks", + "href": "controls/igradialgauge/configuring/tick-marks.mdx", + "order": 1, + "slug": "igradialgauge-configuring-tick-marks" + }, + { + "name": "Configuring Needles", + "href": "controls/igradialgauge/configuring/needles.mdx", + "order": 2, + "slug": "igradialgauge-configuring-needles" + }, + { + "name": "Configuring Ranges", + "href": "controls/igradialgauge/configuring/ranges.mdx", + "order": 3, + "slug": "igradialgauge-configuring-ranges" + }, + { + "name": "Configuring Labels", + "href": "controls/igradialgauge/configuring/labels.mdx", + "order": 4, + "slug": "igradialgauge-configuring-labels" + }, + { + "name": "Configuring the Background", + "href": "controls/igradialgauge/configuring/the-backing.mdx", + "order": 5, + "slug": "igradialgauge-configuring-the-backing" + } + ], + "slug": "igradialgauge-using-igradialgauge" + }, + { + "name": "jQuery and MVC API Reference", + "href": "controls/igradialgauge/api-reference.mdx", + "order": 3, + "slug": "igradialgauge-igradialgauge-api-reference" + }, + { + "name": "Accessibility Compliance", + "href": "controls/igradialgauge/accessibility-compliance.mdx", + "order": 4, + "slug": "igradialgauge-accessibility-compliance" + }, + { + "name": "Known Issues and Limitations", + "href": "controls/igradialgauge/known-issues-and-limitations.mdx", + "order": 5, + "slug": "igradialgauge-known-issues-and-limitations" + } + ], + "slug": "igradialgauge" + }, + { + "name": "igRadialMenu", + "href": "controls/igradialmenu/igradialmenu.mdx", + "items": [ + { + "name": "igRadialMenu Overview", + "href": "controls/igradialmenu/overview/overview.mdx", + "order": 0, + "items": [ + { + "name": "igRadialMenu Features", + "href": "controls/igradialmenu/overview/features.mdx", + "order": 0, + "slug": "igradialmenu-features" + }, + { + "name": "igRadialMenu Visual Elements", + "href": "controls/igradialmenu/overview/visual-elements.mdx", + "order": 1, + "slug": "igradialmenu-visual-elements" + }, + { + "name": "User Interaction and Usability", + "href": "controls/igradialmenu/overview/user-interaction.mdx", + "order": 2, + "slug": "igradialmenu-user-interaction" + } + ], + "slug": "igradialmenu-overview" + }, + { + "name": "Adding igRadialMenu", + "href": "controls/igradialmenu/adding/adding.mdx", + "order": 1, + "items": [ + { + "name": "Adding igRadialMenu to an HTML Page", + "href": "controls/igradialmenu/adding/html-page.mdx", + "order": 0, + "slug": "igradialmenu-adding-html-page" + }, + { + "name": "Adding igRadialMenu to an ASP.NET MVC Application", + "href": "controls/igradialmenu/adding/mvc-app.mdx", + "order": 1, + "slug": "igradialmenu-adding-mvc-app" + } + ], + "slug": "igradialmenu-adding" + }, + { + "name": "Configuring igRadialMenu", + "href": "controls/igradialmenu/configuring/configuring.mdx", + "order": 2, + "items": [ + { + "name": "igRadialMenu Configuration Overview", + "href": "controls/igradialmenu/configuring/configuration-overview.mdx", + "order": 0, + "slug": "igradialmenu-configuration-overview" + }, + { + "name": "Configuring the Center Button", + "href": "controls/igradialmenu/configuring/center-button.mdx", + "order": 1, + "slug": "igradialmenu-configuring-center-button" + }, + { + "name": "Configuring Items", + "href": "controls/igradialmenu/configuring/items/items.mdx", + "order": 2, + "items": [ + { + "name": "Items/Sub-Items Configuration Overview", + "href": "controls/igradialmenu/configuring/items/sub-items-configuration-overview.mdx", + "order": 0, + "slug": "igradialmenu-items-sub-items-configuration-overview" + }, + { + "name": "Configuring Button Items", + "href": "controls/igradialmenu/configuring/items/button-items.mdx", + "order": 1, + "slug": "igradialmenu-configuring-button-items" + }, + { + "name": "Configuring Numeric Items", + "href": "controls/igradialmenu/configuring/items/numeric-items.mdx", + "order": 2, + "slug": "igradialmenu-configuring-numeric-items" + }, + { + "name": "Configuring Color Items", + "href": "controls/igradialmenu/configuring/items/color-items.mdx", + "order": 3, + "slug": "igradialmenu-configuring-color-items" + } + ], + "slug": "igradialmenu-configuring-items" + }, + { + "name": "Configuring Tooltips", + "href": "controls/igradialmenu/configuring/tooltips.mdx", + "order": 3, + "slug": "igradialmenu-configuring-tooltips" + } + ], + "slug": "igradialmenu-configuring" + }, + { + "name": "jQuery and MVC API Reference", + "href": "controls/igradialmenu/api-reference.mdx", + "order": 3, + "slug": "igradialmenu-api-reference" + } + ], + "slug": "igradialmenu" + }, + { + "name": "igRating", + "href": "controls/igrating/igrating.mdx", + "items": [ + { + "name": "igRating Overview", + "href": "controls/igrating/overview.mdx", + "order": 0, + "slug": "igrating-overview" + }, + { + "name": "Styling and Theming", + "href": "controls/igrating/styling-and-theming.mdx", + "order": 1, + "slug": "igrating-styling-and-theming" + }, + { + "name": "jQuery and MVC API Links", + "href": "controls/igrating/jquery-api.mdx", + "order": 2, + "slug": "igrating-jquery-api" + }, + { + "name": "Accessibility Compliance", + "href": "controls/igrating/accessibility-compliance.mdx", + "order": 3, + "slug": "igrating-accessibility-compliance" + }, + { + "name": "Known Issues and Limitations", + "href": "controls/igrating/known-issues.mdx", + "order": 4, + "slug": "igrating-known-issues" + } + ], + "slug": "igrating-igrating" + }, + { + "name": "igScheduler", + "href": "controls/igscheduler/landing.mdx", + "items": [ + { + "name": "igScheduler Overview", + "href": "controls/igscheduler/overview.mdx", + "order": 0, + "slug": "igScheduler-overview" + }, + { + "name": "Adding igScheduler", + "href": "controls/igscheduler/adding-igscheduler.mdx", + "order": 1, + "slug": "igscheduler-adding-igscheduler" + }, + { + "name": "Configuring igScheduler", + "href": "controls/igscheduler/configuring/configuring.mdx", + "order": 3, + "items": [ + { + "name": "Configuring Resources", + "href": "controls/igscheduler/configuring/configure-resources.mdx", + "order": 0, + "slug": "igscheduler-configure-resources" + }, + { + "name": "Configuring Appointments", + "href": "controls/igscheduler/configuring/configure-appointments.mdx", + "order": 1, + "slug": "igscheduler-configure-appointments" + }, + { + "name": "Configuring Views", + "href": "controls/igscheduler/configuring/configure-views.mdx", + "order": 2, + "slug": "igscheduler-configure-views" + }, + { + "name": "Configuring Recurrence", + "href": "controls/igscheduler/configuring/configure-recurrence.mdx", + "order": 3, + "slug": "igscheduler-configure-recurrence" + }, + { + "name": "Configuring ASP.NET MVC Scheduler", + "href": "controls/igscheduler/configuring/04igscheduler-configure-asp-net-mvc.mdx", + "slug": "igscheduler-asp-net-mvc-wrapper" + } + ], + "slug": "igscheduler-configuring" + }, + { + "name": "Accessibility Compliance", + "href": "controls/igscheduler/accessibility-compliance.mdx", + "order": 4, + "slug": "igscheduler-accessibility-compliance" + }, + { + "name": "Known Issues and Limitations", + "href": "controls/igscheduler/known-limitations.mdx", + "order": 5, + "slug": "igscheduler-known-limitations" + }, + { + "name": "Styling igScheduler", + "href": "controls/igscheduler/using-themes.mdx", + "order": 6, + "slug": "igscheduler-using-themes" + } + ], + "slug": "igscheduler-landing" + }, + { + "name": "igScroll", + "href": "controls/igscroll/igscroll.mdx", + "items": [ + { + "name": "igScroll Overview", + "href": "controls/igscroll/overview.mdx", + "order": 0, + "slug": "igscroll-overview" + }, + { + "name": "Configuring igScroll", + "href": "controls/igscroll/configuring-igscroll.mdx", + "order": 1, + "slug": "igscroll-configuring" + }, + { + "name": "Styling igScroll", + "href": "controls/igscroll/styling.mdx", + "order": 2, + "slug": "igscroll-styling" + }, + { + "name": "Accessibility Compliance", + "href": "controls/igscroll/accessibility-compliance.mdx", + "order": 3, + "slug": "igscroll-accessibility-compliance" + }, + { + "name": "jQuery API Links", + "href": "controls/igscroll/jquery-api.mdx", + "order": 4, + "slug": "igscroll-jquery-api" + }, + { + "name": "Known Issues and Limitations", + "href": "controls/igscroll/known-issues.mdx", + "order": 5, + "slug": "igscroll-known-issues" + } + ], + "slug": "igscroll" + }, + { + "name": "igShapeChart", + "href": "controls/igshapechart/landingpage.mdx", + "items": [ + { + "name": "Overview", + "href": "controls/igshapechart/shapechart-overview.mdx", + "order": 0, + "slug": "shapechart-overview" + }, + { + "name": "Getting Started", + "href": "controls/igshapechart/shapechart-getting-started-with-shapechart.mdx", + "order": 1, + "slug": "shapechart-getting-started-with-shapechart" + }, + { + "name": "Chart Types", + "href": "controls/igshapechart/shapechart-chart-types.mdx", + "order": 2, + "slug": "shapechart-chart-types" + }, + { + "name": "Series Requirements", + "href": "controls/igshapechart/shapechart-series-requirements.mdx", + "order": 3, + "slug": "shapechart-series-requirements" + }, + { + "name": "Binding ShapeFile Data", + "href": "controls/igshapechart/shapechart-binding-shapefile-data.mdx", + "order": 4, + "slug": "shapechart-binding-shapefile-data" + }, + { + "name": "Binding Break-Even Data", + "href": "controls/igshapechart/shapechart-binding-break-even-data.mdx", + "order": 5, + "slug": "shapechart-binding-to-break-even-data" + }, + { + "name": "Configuring Axis Labels", + "href": "controls/igshapechart/shapechart-configuring-axis-labels.mdx", + "order": 6, + "slug": "shapechart-configuring-axis-labels" + }, + { + "name": "Configuring Axis Intervals", + "href": "controls/igshapechart/shapechart-configuring-axis-intervals.mdx", + "order": 7, + "slug": "shapechart-configuring-axis-intervals" + }, + { + "name": "Configuring Axis Ranges", + "href": "controls/igshapechart/shapechart-configuring-axis-ranges.mdx", + "order": 8, + "slug": "shapechart-configuring-axis-ranges" + }, + { + "name": "Configuring Series Brushes", + "href": "controls/igshapechart/shapechart-configuring-series-brushes.mdx", + "order": 9, + "slug": "shapechart-configuring-series-brushes" + }, + { + "name": "Using Legend", + "href": "controls/igshapechart/shapechart-using-legend-with-shapechart.mdx", + "order": 10, + "slug": "shapechart-using-legend-with-shapechart" + }, + { + "name": "jQuery API Reference Links", + "href": "controls/igshapechart/shapechart-api-reference.mdx", + "order": 11 + }, + { + "name": "Configuring Chart Markers", + "href": "controls/igshapechart/shapechart-configuring-chart-markers.mdx", + "order": 12, + "slug": "shapechart-configuring-chart-markers" + }, + { + "name": "Configuring Axis Titles", + "href": "controls/igshapechart/shapechart-configuring-axis-titles.mdx", + "order": 13, + "slug": "shapechart-configuring-axis-titles" + }, + { + "name": "Chart Title and Subtitle", + "href": "controls/igshapechart/shapechart-configuring-chart-titles.mdx", + "order": 14, + "slug": "shapechart-configuring-chart-titles" + }, + { + "name": "Configuring Axis Scales", + "href": "controls/igshapechart/shapechart-configuring-axis-scales.mdx", + "order": 15, + "slug": "shapechart-configuring-axis-scales" + } + ], + "slug": "igshapechart-landingpage" + }, + { + "name": "igSparkline", + "href": "controls/igsparkline/landing.mdx", + "items": [ + { + "name": "igSparkline Overview", + "href": "controls/igsparkline/overview.mdx", + "order": 0, + "slug": "igsparkline-overview" + }, + { + "name": "Adding igSparkline", + "href": "controls/igsparkline/adding/igsparkline.mdx", + "order": 1, + "items": [ + { + "name": "Adding igSparkline Overview", + "href": "controls/igsparkline/adding/igsparkline-overview.mdx", + "order": 0, + "slug": "igsparkline-adding-igsparkline-overview" + }, + { + "name": "Adding igSparkline to an HTML Document", + "href": "controls/igsparkline/adding/igsparkline-to-an-html-document.mdx", + "order": 1, + "slug": "igsparkline-adding-igsparkline-to-an-html-document" + }, + { + "name": "Adding igSparkline to an ASP.NET MVC View", + "href": "controls/igsparkline/adding/igsparkline-to-an-aspnet-mvc-view.mdx", + "order": 2, + "slug": "igsparkline-adding-igsparkline-to-an-aspnet-mvc-view" + } + ], + "slug": "igsparkline-adding-igsparkline" + }, + { + "name": "Binding igSparkline to Data", + "href": "controls/igsparkline/binding-to-data.mdx", + "order": 2, + "slug": "igsparkline-binding-to-data" + }, + { + "name": "Configuring igSparkline", + "href": "controls/igsparkline/configuring.mdx", + "order": 3, + "slug": "igsparkline-configuring" + }, + { + "name": "igSparkline Visual Elements", + "href": "controls/igsparkline/visual-elements.mdx", + "order": 4, + "slug": "igsparkline-visual-elements" + }, + { + "name": "Accessibility Compliance", + "href": "controls/igsparkline/accessibility-compliance.mdx", + "order": 5, + "slug": "igsparkline-accessibility-compliance" + }, + { + "name": "jQuery and MVC API Links", + "href": "controls/igsparkline/jquery-and-aspnet-mvc-api.mdx", + "order": 6, + "slug": "igsparkline-jquery-and-aspnet-mvc-api" + } + ], + "slug": "igsparkline-landing" + }, + { + "name": "igSplitter", + "href": "controls/igsplitter/igsplitter.mdx", + "items": [ + { + "name": "igSplitter Overview", + "href": "controls/igsplitter/overview.mdx", + "order": 0, + "slug": "igsplitter-overview" + }, + { + "name": "Adding igSplitter", + "href": "controls/igsplitter/adding-igsplitter.mdx", + "order": 1, + "slug": "adding-igsplitter" + }, + { + "name": "Configuring igSplitter", + "href": "controls/igsplitter/configuring-igsplitter.mdx", + "order": 2, + "slug": "configuring-igsplitter" + }, + { + "name": "Handling Events", + "href": "controls/igsplitter/handling-events.mdx", + "order": 3, + "slug": "igsplitter-handling-events" + }, + { + "name": "Accessibility Compliance", + "href": "controls/igsplitter/accessibility-compliance.mdx", + "order": 4, + "slug": "igsplitter-accessibility-compliance" + }, + { + "name": "Known Issues and Limitations", + "href": "controls/igsplitter/known-issues-and-limitations.mdx", + "order": 5, + "slug": "igsplitter-known-issues-and-limitations" + }, + { + "name": "jQuery and MVC API", + "href": "controls/igsplitter/jquery-and-aspnet-mvc-helper-api-links.mdx", + "order": 6, + "slug": "igsplitter-jquery-and-asp.net-mvc-helper-api-links" + } + ], + "slug": "igsplitter" + }, + { + "name": "igSpreadsheet", + "href": "controls/igspreadsheet/igspreadsheet.mdx", + "items": [ + { + "name": "igSpreadsheet Overview", + "href": "controls/igspreadsheet/igspreadsheet-overview/overview.mdx", + "order": 0, + "items": [ + { + "name": "igSpreadsheet Features Overview", + "href": "controls/igspreadsheet/igspreadsheet-overview/feature-overview.mdx", + "order": 0, + "slug": "igspreadsheet-feature-overview" + }, + { + "name": "Editing API", + "href": "controls/igspreadsheet/igspreadsheet-overview/editing.mdx", + "order": 2, + "slug": "igspreadsheet-editing" + }, + { + "name": "igSpreadsheet Visual Elements", + "href": "controls/igspreadsheet/igspreadsheet-overview/visual-elements.mdx", + "order": 3, + "slug": "igspreadsheet-visual-elements" + }, + { + "name": "igSpreadsheet Activation and Navigation Interactions", + "href": "controls/igspreadsheet/igspreadsheet-overview/activation-and-navigation-interactions.mdx", + "order": 4, + "slug": "igspreadsheet-activation-and-navigation-interactions" + }, + { + "name": "igSpreadsheet Selection Interactions", + "href": "controls/igspreadsheet/igspreadsheet-overview/selection.mdx", + "order": 5, + "slug": "igspreadsheet-selection" + }, + { + "name": "igSpreadsheet Context Menu", + "href": "controls/igspreadsheet/igspreadsheet-overview/context-menu.mdx", + "order": 6, + "slug": "igspreadsheet-context-menu" + }, + { + "name": "igSpreadsheet Filter Dialog", + "href": "controls/igspreadsheet/igspreadsheet-overview/filter-dialog.mdx", + "order": 7, + "slug": "images/igspreadsheet-filter-dialog" + }, + { + "name": "igSpreadsheet FormatCell Dialog", + "href": "controls/igspreadsheet/igspreadsheet-overview/formatcell-dialog.mdx", + "order": 8, + "slug": "igspreadsheet-FormatCell-Dialog" + }, + { + "name": "igSpreadsheet Custom Sort Dialog", + "href": "controls/igspreadsheet/igspreadsheet-overview/sort-dialog.mdx", + "order": 9, + "slug": "images/igspreadsheet-sort-dialog" + } + ], + "slug": "igspreadsheet-overview" + }, + { + "name": "Adding igSpreadsheet", + "href": "controls/igspreadsheet/adding-igspreadsheet.mdx", + "order": 1, + "slug": "adding-igspreadsheet" + }, + { + "name": "Configuring igSpreadsheet", + "href": "controls/igspreadsheet/configuring-igspreadsheet.mdx", + "order": 2, + "slug": "igspreadsheet-configuring" + }, + { + "name": "igSpreadsheet Accessibility Compliance", + "href": "controls/igspreadsheet/accessibility-compliance.mdx", + "order": 3, + "slug": "igspreadsheet-accessibility-compliance" + }, + { + "name": "igSpreadsheet Known Issues", + "href": "controls/igspreadsheet/known-issues.mdx", + "order": 4, + "slug": "igspreadsheet-known-issues" + }, + { + "name": "Conditional Formatting in igSpreadsheet", + "href": "controls/igspreadsheet/conditional-formatting.mdx", + "order": 5, + "slug": "igspreadsheet-conditional-formatting" + } + ], + "slug": "igspreadsheet-igspreadsheet" + }, + { + "name": "igTileManager", + "href": "controls/igtilemanager/landing-page.mdx", + "items": [ + { + "name": "igTileManager Overview", + "href": "controls/igtilemanager/overview.mdx", + "order": 0, + "slug": "igtilemanager-overview" + }, + { + "name": "Adding igTileManager", + "href": "controls/igtilemanager/adding.mdx", + "order": 1, + "slug": "igtilemanager-adding" + }, + { + "name": "Binding igTileManager to Data", + "href": "controls/igtilemanager/binding.mdx", + "order": 2, + "slug": "igtilemanager-binding" + }, + { + "name": "Configuring igTileManager", + "href": "controls/igtilemanager/configuring.mdx", + "order": 3, + "slug": "igtilemanager-configuring" + }, + { + "name": "Handling Events", + "href": "controls/igtilemanager/handling-events.mdx", + "order": 4, + "slug": "igtilemanager-handling-events" + }, + { + "name": "Accessibility Compliance", + "href": "controls/igtilemanager/accessibility-compliance.mdx", + "order": 5, + "slug": "igtilemanager-accessibility-compliance" + }, + { + "name": "Known Issues and Limitations", + "href": "controls/igtilemanager/known-issues-and-limitations.mdx", + "order": 6, + "slug": "igtilemanager-known-issues-and-limitations" + }, + { + "name": "jQuery and MVC API Links", + "href": "controls/igtilemanager/jquery-and-aspnet-mvc-helper-api-links.mdx", + "order": 7, + "slug": "igtilemanager-jquery-and-asp.net-mvc-helper-api-links" + } + ], + "slug": "igtilemanager-landing-page" + }, + { + "name": "igTree", + "href": "controls/igtree/igtree.mdx", + "items": [ + { + "name": "igTree Overview", + "href": "controls/igtree/overview.mdx", + "order": 0, + "slug": "igtree-overview" + }, + { + "name": "Getting Started with igTree", + "href": "controls/igtree/getting-started.mdx", + "order": 1, + "slug": "igtree-getting-started" + }, + { + "name": "Data Binding igTree", + "href": "controls/igtree/data-binding.mdx", + "order": 2, + "slug": "igtree-data-binding" + }, + { + "name": "Configure Checkboxes and Selection with igTree", + "href": "controls/igtree/configure-checkboxes-and-selection.mdx", + "order": 3, + "slug": "igtree-configure-checkboxes-and-selection" + }, + { + "name": "Configure Node Images in igTree", + "href": "controls/igtree/configure-node-images.mdx", + "order": 4, + "slug": "igtree-configure-node-images" + }, + { + "name": "Configure Nodes in igTree", + "href": "controls/igtree/configure-nodes.mdx", + "order": 5, + "slug": "igtree-configure-nodes" + }, + { + "name": "Adding and Removing Nodes", + "href": "controls/igtree/adding-and-removing-nodes/adding-removing-nodes.mdx", + "order": 6, + "items": [ + { + "name": "Adding and Removing Nodes Overview and Examples", + "href": "controls/igtree/adding-and-removing-nodes/adding-removing-nodes-overview-examples.mdx", + "order": 0, + "slug": "igtree-adding-removing-nodes-overview-examples" + }, + { + "name": "Retrieving the Transaction Log of Added and Removed Nodes", + "href": "controls/igtree/adding-and-removing-nodes/retrieving-transaction-log.mdx", + "order": 1, + "slug": "igtree-retrieving-transaction-log" + }, + { + "name": "Add and Remove Node Method API Reference", + "href": "controls/igtree/adding-and-removing-nodes/adding-removing-node-method-api-reference.mdx", + "order": 2, + "slug": "igtree-adding-removing-node-method-api-reference" + } + ], + "slug": "igtree-adding-removing-nodes" + }, + { + "name": "Drag-and-Drop", + "href": "controls/igtree/drag-and-drop/drag-and-drop.mdx", + "order": 7, + "items": [ + { + "name": "Drag-and-Drop Overview", + "href": "controls/igtree/drag-and-drop/overview.mdx", + "order": 0, + "slug": "igtree-drag-and-drop-overview" + }, + { + "name": "Enabling Drag-and-Drop", + "href": "controls/igtree/drag-and-drop/enabling.mdx", + "order": 1, + "slug": "igtree-drag-and-drop-enabling" + }, + { + "name": "Configuring Drag-and-Drop", + "href": "controls/igtree/drag-and-drop/configuring/configuring.mdx", + "order": 2, + "items": [ + { + "name": "Configuring the Look of the Drag Visual Tokens", + "href": "controls/igtree/drag-and-drop/configuring/configuring-tokens.mdx", + "order": 0, + "slug": "igtree-drag-and-drop-configuring-tokens" + } + ], + "slug": "igtree-drag-and-drop-configuring" + }, + { + "name": "Handling Drag-and-Drop Events", + "href": "controls/igtree/drag-and-drop/events/handling-events.mdx", + "order": 3, + "items": [ + { + "name": "Handling Drag-and-Drop Events Upon Initialization in jQuery", + "href": "controls/igtree/drag-and-drop/events/handling-events-initialization.mdx", + "order": 0, + "slug": "igtree-drag-and-drop-handling-events-initialization" + }, + { + "name": "Handling Drag-and-Drop Events Run-Time", + "href": "controls/igtree/drag-and-drop/events/handling-events-run-time.mdx", + "order": 1, + "slug": "igtree-drag-and-drop-handling-events-run-time" + } + ], + "slug": "igtree-drag-and-drop-handling-events" + }, + { + "name": "Drag-and-Drop API Reference", + "href": "controls/igtree/drag-and-drop/api-reference/api-reference.mdx", + "order": 4, + "items": [ + { + "name": "Drag-and-Drop Event API Reference", + "href": "controls/igtree/drag-and-drop/api-reference/event-api-reference.mdx", + "order": 0, + "slug": "igtree-drag-and-drop-event-api-reference" + }, + { + "name": "Drag-and-Drop Property API Reference", + "href": "controls/igtree/drag-and-drop/api-reference/property-api-reference.mdx", + "order": 1, + "slug": "igtree-drag-and-drop-property-api-reference" + } + ], + "slug": "igtree-drag-and-drop-api-reference" + } + ], + "slug": "igtree-drag-and-drop" + }, + { + "name": "Optimize the igTree’s Performance", + "href": "controls/igtree/optimize-performance.mdx", + "order": 8, + "slug": "igtree-optimize-performance" + }, + { + "name": "Using Themes with igTree", + "href": "controls/igtree/using-themes.mdx", + "order": 9, + "slug": "igtree-using-themes" + }, + { + "name": "Walkthroughs", + "href": "controls/igtree/walkthroughs/walkthroughs.mdx", + "order": 10, + "items": [ + { + "name": "Configuring the Drag-and-Drop Mode", + "href": "controls/igtree/walkthroughs/drag-and-drop-configuring-mode.mdx", + "order": 0, + "slug": "igtree-drag-and-drop-configuring-mode" + }, + { + "name": "Configuring Custom Drop Validation", + "href": "controls/igtree/walkthroughs/drag-and-drop-configuring-custom-drop-validation.mdx", + "order": 1, + "slug": "igtree-drag-and-drop-configuring-custom-drop-validation" + } + ], + "slug": "igtree-walkthroughs" + }, + { + "name": "igTree Accessibility Compliance", + "href": "controls/igtree/accessibility-compliance.mdx", + "order": 11, + "slug": "igtree-accessibility-compliance" + }, + { + "name": "igTree jQuery and MVC API Links", + "href": "controls/igtree/jquery-and-asp-net-mvc-helper-api-links.mdx", + "order": 12, + "slug": "igtree-jquery-and-asp-net-mvc-helper-api-links" + }, + { + "name": "Configuring Knockout Support", + "href": "controls/igtree/knockoutjs-support.mdx", + "order": 13, + "slug": "igtree-knockoutjs-support" + }, + { + "name": "igTree Known Limitations", + "href": "controls/igtree/known-limitations.mdx", + "order": 14, + "slug": "igtree-known-limitations" + }, + { + "name": "Event Reference", + "href": "controls/igtree/event-reference.mdx", + "order": 15, + "slug": "igtree-event-reference" + } + ], + "slug": "igtree-igtree" + }, + { + "name": "igTreeGrid", + "href": "controls/igtreegrid/landing-page.mdx", + "items": [ + { + "name": "Overview", + "href": "controls/igtreegrid/overview.mdx", + "order": 0, + "slug": "igtreegrid-overview" + }, + { + "name": "Features Overview", + "href": "controls/igtreegrid/features/overview.mdx", + "order": 1, + "items": [ + { + "name": "Filtering", + "href": "controls/igtreegrid/features/filtering.mdx", + "order": 0, + "slug": "igtreegrid-filtering" + }, + { + "name": "Updating", + "href": "controls/igtreegrid/features/updating.mdx", + "order": 1, + "slug": "igtreegrid-updating" + }, + { + "name": "Load on Demand", + "href": "controls/igtreegrid/features/load-on-demand.mdx", + "order": 2, + "slug": "igtreegrid-load-on-demand" + }, + { + "name": "Remote Features", + "href": "controls/igtreegrid/features/remote-features.mdx", + "order": 3, + "slug": "igtreegrid-remote-features" + }, + { + "name": "Paging", + "href": "controls/igtreegrid/features/paging.mdx", + "order": 4, + "slug": "igtreegrid-paging" + }, + { + "name": "Row Selectors", + "href": "controls/igtreegrid/features/row-selectors.mdx", + "order": 5, + "slug": "igtreegrid-row-selectors" + } + ], + "slug": "igtreegrid-features-overview" + }, + { + "name": "Accessibility Compliance", + "href": "controls/igtreegrid/accessibility-compliance.mdx", + "order": 2, + "slug": "igtreegrid-accessibility-compliance" + }, + { + "name": "Known Issues and Limitations", + "href": "controls/igtreegrid/known-issues-and-limitations.mdx", + "order": 3, + "slug": "igtreegrid-known-issues-and-limitations" + }, + { + "name": "jQuery and MVC API Links", + "href": "controls/igtreegrid/jquery-api.mdx", + "order": 4, + "slug": "igtreegrid-jquery-api" + } + ], + "slug": "igtreegrid-landing-page" + }, + { + "name": "igUpload", + "href": "controls/igupload/igupload.mdx", + "items": [ + { + "name": "igUpload Overview", + "href": "controls/igupload/overview.mdx", + "order": 0, + "slug": "igupload-overview" + }, + { + "name": "Working with igUpload", + "href": "controls/igupload/working-with-igupload/working-with-igupload.mdx", + "order": 1, + "items": [ + { + "name": "Configuring igUpload", + "href": "controls/igupload/working-with-igupload/configuring-igupload.mdx", + "order": 0, + "slug": "igupload-configuring-igupload" + }, + { + "name": "Using the HTTP Handler and Module", + "href": "controls/igupload/working-with-igupload/using-http-handler-and-modules.mdx", + "order": 1, + "slug": "igupload-using-http-handler-and-modules" + }, + { + "name": "Using Client-Side Events", + "href": "controls/igupload/working-with-igupload/using-client-side-events.mdx", + "order": 2, + "slug": "igupload-using-client-side-events" + }, + { + "name": "Using Server-Side Events in ASP.NET MVC", + "href": "controls/igupload/working-with-igupload/using-server-side-events.mdx", + "order": 3, + "slug": "igupload-using-server-side-events" + }, + { + "name": "Saving Files as Stream", + "href": "controls/igupload/working-with-igupload/saving-files-as-stream.mdx", + "order": 4, + "slug": "igupload-saving-files-as-stream" + } + ], + "slug": "igupload-working-with-igupload" + }, + { + "name": "Styling igUpload", + "href": "controls/igupload/styling-and-theming.mdx", + "order": 2, + "slug": "igupload-styling-and-theming" + }, + { + "name": "Accessibility Compliance", + "href": "controls/igupload/accessibility-compliance.mdx", + "order": 3, + "slug": "igupload-accessibility-compliance" + }, + { + "name": "Known Issues and Limitations", + "href": "controls/igupload/known-issues.mdx", + "order": 4, + "slug": "igupload-known-issues" + }, + { + "name": "jQuery and MVC API Links", + "href": "controls/igupload/jquery-api-links.mdx", + "order": 5, + "slug": "igupload-jquery-api-links" + } + ], + "slug": "igupload-igupload" + }, + { + "name": "igValidator", + "href": "controls/igvalidator/igvalidator.mdx", + "items": [ + { + "name": "igValidator Overview", + "href": "controls/igvalidator/overview.mdx", + "order": 0, + "slug": "igvalidator-overview" + }, + { + "name": "Validation Rules", + "href": "controls/igvalidator/validation-rules.mdx", + "order": 1, + "slug": "igvalidator-validation-rules" + }, + { + "name": "Migrating to the new igValidator control", + "href": "controls/igvalidator/migration-topic.mdx", + "order": 2, + "slug": "igvalidator-migration-topic" + } + ], + "slug": "igvalidator" + }, + { + "name": "igVideoPlayer", + "href": "controls/igvideoplayer/videoplayer.mdx", + "items": [ + { + "name": "igVideoPlayer Overview", + "href": "controls/igvideoplayer/overview.mdx", + "order": 0, + "slug": "igvideoplayer-overview" + }, + { + "name": "Styling and Theming", + "href": "controls/igvideoplayer/styling-and-theming.mdx", + "order": 1, + "slug": "igvideoplayer-styling-and-theming" + }, + { + "name": "jQuery and MVC API Links", + "href": "controls/igvideoplayer/jquery-api.mdx", + "order": 2, + "slug": "igvideoplayer-jquery-api" + }, + { + "name": "Accessibility Compliance", + "href": "controls/igvideoplayer/accessibility-compliance.mdx", + "order": 3, + "slug": "igvideoplayer-accessibility-compliance" + }, + { + "name": "Known Issues and Limitations", + "href": "controls/igvideoplayer/known-issues.mdx", + "order": 4, + "slug": "igvideoplayer-known-issues" + }, + { + "name": "Working with HTML5 Video", + "href": "controls/igvideoplayer/working-with-html5-video.mdx", + "order": 5, + "slug": "igvideoplayer-working-with-html5-video" + } + ], + "slug": "videoplayer" + }, + { + "name": "igZoombar", + "href": "controls/igzoombar/landingpage.mdx", + "items": [ + { + "name": "igZoombar Overview", + "href": "controls/igzoombar/overview.mdx", + "order": 0, + "slug": "igzoombar-overview" + }, + { + "name": "Adding igZoombar", + "href": "controls/igzoombar/adding-igzoombar.mdx", + "order": 1, + "slug": "adding-igzoombar" + }, + { + "name": "Configuring igZoombar", + "href": "controls/igzoombar/configuring-igzoombar.mdx", + "order": 2, + "slug": "configuring-igzoombar" + }, + { + "name": "Accessibility Compliance", + "href": "controls/igzoombar/accessibility-compliance.mdx", + "order": 3, + "slug": "igzoombar-accessibility-compliance" + }, + { + "name": "Known Issues And Limitations", + "href": "controls/igzoombar/known-issues-and-limitations.mdx", + "order": 4, + "slug": "igzoombar-known-issues-and-limitations" + }, + { + "name": "jQuery and MVC API Links", + "href": "controls/igzoombar/asp-net-mvc-helper-api.mdx", + "order": 5, + "slug": "igzoombar-asp-net-mvc-helper-api" + }, + { + "name": "igZoombar Integration with Custom Components", + "href": "controls/igzoombar/integration-with-custom-components.mdx", + "order": 6, + "slug": "igzoombar-using-custom-providers" + } + ], + "slug": "igzoombar-landingpage" + } + ], + "slug": "jqueryuicomponents-landingpage" + }, + { + "name": "Data Source Components", + "href": "data-sources/data-source-components.mdx", + "order": 4, + "items": [ + { + "name": "Data Source Components Overview", + "href": "data-sources/data-source-components-overview.mdx", + "order": 0, + "slug": "data-source-components-overview" + }, + { + "name": "Multidimensional Data Source Components", + "href": "data-sources/olap/multidimensional-data-source-components.mdx", + "items": [ + { + "name": "Multidimensional Data Source Components Overview", + "href": "data-sources/olap/multidimensional-data-source-components-overview.mdx", + "order": 0, + "slug": "multidimensional-data-source-components-overview" + }, + { + "name": "igOlapFlatDataSource", + "href": "data-sources/olap/flat/igolapflatdatasource.mdx", + "order": 1, + "items": [ + { + "name": "igOlapFlatDataSource Overview", + "href": "data-sources/olap/flat/igolapflatdatasource-overview.mdx", + "order": 0, + "slug": "igolapflatdatasource-overview" + }, + { + "name": "Adding igOlapFlatDataSource", + "href": "data-sources/olap/flat/adding/igolapflatdatasource-adding.mdx", + "order": 1, + "items": [ + { + "name": "Adding igOlapFlatDataSource to an HTML Page", + "href": "data-sources/olap/flat/adding/igolapflatdatasource-adding-to-an-html-page.mdx", + "order": 0, + "slug": "igolapflatdatasource-adding-to-an-html-page" + }, + { + "name": "Adding igOlapFlatDataSource to an ASP.NET MVC Application", + "href": "data-sources/olap/flat/adding/igolapflatdatasource-adding-using-mvc-helper.mdx", + "order": 1, + "slug": "igolapflatdatasource-adding-using-mvc-helper" + } + ], + "slug": "igolapflatdatasource-adding" + }, + { + "name": "Defining Metadata", + "href": "data-sources/olap/flat/igolapflatdatasource-defining-metadata.mdx", + "order": 2, + "slug": "igolapflatdatasource-defining-metadata" + }, + { + "name": "Configuring the Tabular View of the Pivot Grid Result Set", + "href": "data-sources/olap/flat/configuring-the-tabular-view.mdx", + "order": 3, + "slug": "configuring-the-tabular-view" + }, + { + "name": "jQuery and MVC API Links", + "href": "data-sources/olap/flat/igolapflatdatasource-api-links.mdx", + "order": 4, + "slug": "igolapflatdatasource-api-links" + } + ], + "slug": "igolapflatdatasource" + }, + { + "name": "igOlapXmlaDataSource", + "href": "data-sources/olap/xmla/igolapxmladatasource.mdx", + "order": 2, + "items": [ + { + "name": "igOlapXmlaDataSource Overview", + "href": "data-sources/olap/xmla/igolapxmladatasource-overview.mdx", + "order": 0, + "slug": "igolapxmladatasource-overview" + }, + { + "name": "Adding igOlapXmlaDataSource", + "href": "data-sources/olap/xmla/add/igolapxmladatasource-adding.mdx", + "order": 1, + "items": [ + { + "name": "Adding igOlapXmlaDataSource to an HTML Page", + "href": "data-sources/olap/xmla/add/igolapxmladatasource-adding-to-an-html-page.mdx", + "order": 0, + "slug": "igolapxmladatasource-adding-to-an-html-page" + }, + { + "name": "Adding igOlapXmlaDataSource to an ASP.NET MVC Application", + "href": "data-sources/olap/xmla/add/igolapxmladatasource-adding-to-an-aspnetmvc-application.mdx", + "order": 1, + "slug": "igolapxmladatasource-adding-to-an-aspnetmvc-application" + } + ], + "slug": "igolapxmladatasource-adding" + }, + { + "name": "Configuration", + "href": "data-sources/olap/xmla/config/igolapxmladatasource-configuring.mdx", + "order": 2, + "items": [ + { + "name": "Data Provider Configuration", + "href": "data-sources/olap/xmla/config/data-provider/igolapxmladatasource-data-provider-configuration.mdx", + "order": 0, + "items": [ + { + "name": "Data Provider Configuration Overview", + "href": "data-sources/olap/xmla/config/data-provider/igolapxmladatasource-data-provider-configuration-overview.mdx", + "order": 0, + "slug": "igolapxmladatasource-data-provider-configuration-overview" + }, + { + "name": "Configuring IIS for MSMDPUMP for igOlapXmlaDataSource", + "href": "data-sources/olap/xmla/config/data-provider/iis/igolapxmladatasource-configuring-iis-for-msmdpump.mdx", + "order": 1, + "items": [ + { + "name": "Configuring IIS for Cross-Domain OLAP Data", + "href": "data-sources/olap/xmla/config/data-provider/iis/igolapxmladatasource-configuring-iis-for-cross-domain-olap-data.mdx", + "order": 0, + "slug": "igolapxmladatasource-configuring-iis-for-cross-domain-olap-data" + }, + { + "name": "Configuring Authenticated Access for the Mozilla Firefox Browser", + "href": "data-sources/olap/xmla/config/data-provider/iis/igolapxmladatasource-configuring-authenticated-access-for-firefox.mdx", + "slug": "igolapxmladatasource-configuring-authenticated-access-for-firefox" + } + ], + "slug": "igolapxmladatasource-configuring-iis-for-msmdpump" + }, + { + "name": "Configuring igOlapXmlaDataSource Through a Remote Provider", + "href": "data-sources/olap/xmla/config/data-provider/igolapxmladatasource-configuring-through-a-remote-provider.mdx", + "slug": "igolapxmladatasource-configuring-through-a-remote-provider" + } + ], + "slug": "igolapxmladatasource-data-provider-configuration" + }, + { + "name": "Configuring the Tabular View of the Pivot Grid Result Set", + "href": "data-sources/olap/flat/configuring-the-tabular-view.mdx", + "order": 3, + "slug": "configuring-the-tabular-view" + } + ], + "slug": "igolapxmladatasource-configuring" + }, + { + "name": "Known Issues and Limitations", + "href": "data-sources/olap/xmla/igolapxmladatasource-known-issues-and-limitations.mdx", + "order": 3, + "slug": "igolapxmladatasource-known-issues-and-limitations" + } + ], + "slug": "igolapxmladatasource" + } + ], + "slug": "multidimensional-data-source-components" + }, + { + "name": "igDataSource", + "href": "data-sources/igdatasource/igdatasource.mdx", + "items": [ + { + "name": "igDataSource Overview", + "href": "data-sources/igdatasource/overview.mdx", + "order": 0, + "slug": "igdatasource-igdatasource-overview" + }, + { + "name": "Binding igDataSource to Client-Side Data", + "href": "data-sources/igdatasource/binding-igdatasource-to-client-side-data.mdx", + "order": 1, + "slug": "igdatasource-binding-igdatasource-to-client-side-data" + }, + { + "name": "Binding igDataSource to REST Services", + "href": "data-sources/igdatasource/binding-to-rest-services.mdx", + "order": 2, + "slug": "igdatasource-binding-to-rest-services" + }, + { + "name": "Binding igDataSource to XML Documents", + "href": "data-sources/igdatasource/binding-to-xml.mdx", + "order": 3, + "slug": "igdatasource-binding-to-xml" + }, + { + "name": "Binding igDataSource to WCF Data Services", + "href": "data-sources/igdatasource/binding-to-wcf-data-services.mdx", + "order": 4, + "slug": "igdatasource-binding-to-wcf-data-services" + }, + { + "name": "Performing Data Transformations Using DataSchema", + "href": "data-sources/igdatasource/using-dataschema.mdx", + "order": 5, + "slug": "igdatasource-using-dataschema" + }, + { + "name": "Known Issues and Limitations", + "href": "data-sources/igdatasource/known-issues.mdx", + "order": 6, + "slug": "igdatasource-igdatasource-known-issues" + }, + { + "name": "API Reference", + "href": "data-sources/igdatasource/javascript-api.mdx", + "order": 7, + "slug": "igdatasource-igdatasource-javascript-api" + }, + { + "name": "Binding to HTML Table Data", + "href": "data-sources/igdatasource/binding-to-html-table-data.mdx", + "order": 8, + "slug": "igdatasource-binding-to-html-table-data" + } + ], + "slug": "igdatasource-igdatasource" + } + ], + "slug": "data-source-components" + }, + { + "name": "{environment:ProductNameMVC}", + "href": "asp-net-mvc/aspnet-mvc-landingpage.mdx", + "order": 5, + "items": [ + { + "name": "Infragistics Excel Engine", + "href": "asp-net-mvc/excel-engine/win-infragistics-excel-engine.mdx", + "order": 0, + "items": [ + { + "name": "Understanding the Infragistics Excel Engine", + "href": "asp-net-mvc/excel-engine/understanding/the-infragistics-excel-engine.mdx", + "order": 0, + "items": [ + { + "name": "Excel Object Model", + "href": "asp-net-mvc/excel-engine/understanding/excel-object-model.mdx", + "slug": "excelengine-excel-object-model" + }, + { + "name": "Supported Versions of Microsoft Excel", + "href": "asp-net-mvc/excel-engine/understanding/supported-versions-of-microsoft-excel.mdx", + "slug": "excelengine-supported-versions-of-microsoft-excel" + } + ], + "slug": "excelengine-understanding-the-infragistics-excel-engine" + }, + { + "name": "Using the Infragistics Excel Engine", + "href": "asp-net-mvc/excel-engine/using/the-infragistics-excel-engine.mdx", + "order": 1, + "items": [ + { + "name": "Accessing Cells and Regions by their Reference Strings", + "href": "asp-net-mvc/excel-engine/using/accessing-cells-and-regions-by-their-reference-strings.mdx", + "slug": "excelengine-accessing-cells-and-regions-by-their-reference-strings" + }, + { + "name": "Add Document Properties to a Workbook", + "href": "asp-net-mvc/excel-engine/using/add-document-properties-to-a-workbook.mdx", + "slug": "excelengine-add-document-properties-to-a-workbook" + }, + { + "name": "Add an Image to a Worksheet", + "href": "asp-net-mvc/excel-engine/using/add-an-image-to-a-worksheet.mdx", + "slug": "excelengine-add-an-image-to-a-worksheet" + }, + { + "name": "Adding Shapes to a Worksheet", + "href": "asp-net-mvc/excel-engine/using/adding-shapes-to-a-worksheet.mdx", + "slug": "excelengine-adding-shapes-to-a-worksheet" + }, + { + "name": "Adding a Hyperlink to a cell in an Excel file", + "href": "asp-net-mvc/excel-engine/using/adding-a-hyperlink-to-a-cell-in-an-excel-file.mdx", + "slug": "excelengine-adding-a-hyperlink-to-a-cell-in-an-excel-file" + }, + { + "name": "Applying Styles to Cells", + "href": "asp-net-mvc/excel-engine/using/applying-styles-to-cells.mdx", + "slug": "excelengine-applying-styles-to-cells" + }, + { + "name": "Calculating Order Totals", + "href": "asp-net-mvc/excel-engine/using/calculating-order-totals.mdx", + "slug": "excelengine-calculating-order-totals" + }, + { + "name": "Comments in a Worksheet Cell", + "href": "asp-net-mvc/excel-engine/using/comments-in-a-worksheet-cell.mdx", + "slug": "excelengine-comments-in-a-worksheet-cell" + }, + { + "name": "Create a Workbook", + "href": "asp-net-mvc/excel-engine/using/create-a-workbook.mdx", + "slug": "excelengine-create-a-workbook" + }, + { + "name": "Creating a Workbook in office 2007 XLSX format", + "href": "asp-net-mvc/excel-engine/using/creating-a-workbook-in-office-2007-xlsx-format.mdx", + "slug": "excelengine-creating-a-workbook-in-office-2007-xlsx-format" + }, + { + "name": "Freeze Rows and Columns", + "href": "asp-net-mvc/excel-engine/using/freeze-rows-and-columns.mdx", + "slug": "excelengine-freeze-rows-and-columns" + }, + { + "name": "Getting the Value of a Formula from an Excel File", + "href": "asp-net-mvc/excel-engine/using/getting-the-value-of-a-formula-from-an-excel-file.mdx", + "slug": "excelengine-getting-the-value-of-a-formula-from-an-excel-file" + }, + { + "name": "List of Supported Built-in Functions", + "href": "asp-net-mvc/excel-engine/using/list-of-supported-built-in-functions.mdx", + "slug": "excelengine-list-of-supported-built-in-functions" + }, + { + "name": "Merge Cells", + "href": "asp-net-mvc/excel-engine/using/merge-cells.mdx", + "slug": "excelengine-merge-cells" + }, + { + "name": "Moving a Worksheet within an Excel Workbook", + "href": "asp-net-mvc/excel-engine/using/moving-a-worksheet-within-an-excel-workbook.mdx", + "slug": "excelengine-moving-a-worksheet-within-an-excel-workbook" + }, + { + "name": "Office 2007 XLSX file generation references and dependencies", + "href": "asp-net-mvc/excel-engine/using/office-2007-xlsx-file-generation-references-and-dependencies.mdx", + "slug": "excelengine-office-2007-xlsx-file-generation-references-and-dependencies" + }, + { + "name": "Populating a Worksheet from a DataSet", + "href": "asp-net-mvc/excel-engine/using/populating-a-worksheet-from-a-dataset.mdx", + "slug": "excelengine-populating-a-worksheet-from-a-dataset" + }, + { + "name": "Read an Excel 2007 XLSX File Into a Workbook", + "href": "asp-net-mvc/excel-engine/using/read-an-excel-2007-xlsx-file-into-a-workbook.mdx", + "slug": "excelengine-read-an-excel-2007-xlsx-file-into-a-workbook" + }, + { + "name": "Read an Excel File into a Workbook", + "href": "asp-net-mvc/excel-engine/using/read-an-excel-file-into-a-workbook.mdx", + "slug": "excelengine-read-an-excel-file-into-a-workbook" + }, + { + "name": "Resizing Rows and Columns", + "href": "asp-net-mvc/excel-engine/using/resizing-rows-and-columns.mdx", + "slug": "excelengine-resizing-rows-and-columns" + }, + { + "name": "Save and Load Files in Excel Template Format", + "href": "asp-net-mvc/excel-engine/using/save-and-load-files-in-excel-template-format.mdx", + "slug": "excelengine-save-and-load-files-in-excel-template-format" + }, + { + "name": "Support for Excel Workbooks with VBA code", + "href": "asp-net-mvc/excel-engine/using/support-for-excel-workbooks-with-vba-code.mdx", + "slug": "excelengine-support-for-excel-workbooks-with-vba-code" + }, + { + "name": "Write a Workbook to an Excel File", + "href": "asp-net-mvc/excel-engine/using/write-a-workbook-to-an-excel-file.mdx", + "slug": "excelengine-write-a-workbook-to-an-excel-file" + } + ], + "slug": "excelengine-using-the-infragistics-excel-engine" + }, + { + "name": "Deploying the Infragistics Excel Engine", + "href": "asp-net-mvc/excel-engine/deploying-the-infragistics-excel-engine.mdx", + "order": 2, + "slug": "excelengine-deploying-the-infragistics-excel-engine" + }, + { + "name": "API Overview", + "href": "asp-net-mvc/excel-engine/api-overview.mdx", + "slug": "excelengine-api-overview" + } + ], + "slug": "win-infragistics-excel-engine" + }, + { + "name": "Infragistics Document Engine", + "href": "asp-net-mvc/document-engine/win-infragistics-document-engine.mdx", + "order": 1, + "items": [ + { + "name": "Welcome to Infragistics Document Engine", + "href": "asp-net-mvc/document-engine/welcome-to-infragistics-document-engine.mdx", + "order": 0, + "slug": "documentengine-welcome-to-infragistics-document-engine" + }, + { + "name": "Getting Started with Infragistics Document Engine", + "href": "asp-net-mvc/document-engine/getting-started-with-infragistics-document-engine.mdx", + "order": 1, + "slug": "documentengine-getting-started-with-infragistics-document-engine" + }, + { + "name": "Writing Reports", + "href": "asp-net-mvc/document-engine/writing/reports.mdx", + "order": 2, + "items": [ + { + "name": "Report Elements", + "href": "asp-net-mvc/document-engine/writing/elements/report-elements.mdx", + "items": [ + { + "name": "DocumentEngine Report Layout", + "href": "asp-net-mvc/document-engine/writing/elements/layout/report-layout.mdx", + "order": 0, + "items": [ + { + "name": "Layout Element Comparison Table", + "href": "asp-net-mvc/document-engine/writing/elements/layout/element-comparison-table.mdx", + "order": 0, + "slug": "documentengine-layout-element-comparison-table" + }, + { + "name": "Advanced Layout Elements", + "href": "asp-net-mvc/document-engine/writing/elements/layout/advanced/layout-elements.mdx", + "order": 1, + "items": [ + { + "name": "Chain", + "href": "asp-net-mvc/document-engine/writing/elements/layout/advanced/chain.mdx", + "slug": "documentengine-chain" + }, + { + "name": "Gap", + "href": "asp-net-mvc/document-engine/writing/elements/layout/advanced/gap.mdx", + "slug": "documentengine-gap" + }, + { + "name": "Rotator", + "href": "asp-net-mvc/document-engine/writing/elements/layout/advanced/rotator.mdx", + "slug": "documentengine-rotator" + }, + { + "name": "Rule", + "href": "asp-net-mvc/document-engine/writing/elements/layout/advanced/rule.mdx", + "slug": "documentengine-rule" + }, + { + "name": "Site", + "href": "asp-net-mvc/document-engine/writing/elements/layout/advanced/site.mdx", + "slug": "documentengine-site" + }, + { + "name": "Stretcher", + "href": "asp-net-mvc/document-engine/writing/elements/layout/advanced/stretcher.mdx", + "slug": "documentengine-stretcher" + } + ], + "slug": "documentengine-advanced-layout-elements" + }, + { + "name": "Container and Condition", + "href": "asp-net-mvc/document-engine/writing/elements/layout/container-and-condition.mdx", + "order": 1, + "slug": "documentengine-container-and-condition" + }, + { + "name": "Band", + "href": "asp-net-mvc/document-engine/writing/elements/layout/band.mdx", + "order": 2, + "slug": "documentengine-band" + }, + { + "name": "Flow", + "href": "asp-net-mvc/document-engine/writing/elements/layout/flow.mdx", + "order": 3, + "slug": "documentengine-flow" + }, + { + "name": "Group", + "href": "asp-net-mvc/document-engine/writing/elements/layout/group.mdx", + "order": 4, + "slug": "documentengine-group" + }, + { + "name": "Page Break", + "href": "asp-net-mvc/document-engine/writing/elements/layout/page-break.mdx", + "order": 5, + "slug": "documentengine-page-break" + }, + { + "name": "Report", + "href": "asp-net-mvc/document-engine/writing/elements/layout/report/report.mdx", + "order": 6, + "items": [ + { + "name": "Publish a Report", + "href": "asp-net-mvc/document-engine/writing/elements/layout/report/publish-a-report.mdx", + "slug": "documentengine-publish-a-report" + }, + { + "name": "Report Element", + "href": "asp-net-mvc/document-engine/writing/elements/layout/report/element.mdx", + "slug": "documentengine-report-element" + }, + { + "name": "Setting PageOrientation when publishing a Report", + "href": "asp-net-mvc/document-engine/writing/elements/layout/report/setting-pageorientation-when-publishing-a-report.mdx", + "slug": "documentengine-setting-pageorientation-when-publishing-a-report" + } + ], + "slug": "documentengine-report" + }, + { + "name": "Section", + "href": "asp-net-mvc/document-engine/writing/elements/layout/section/section.mdx", + "order": 7, + "items": [ + { + "name": "Add Page Numbering", + "href": "asp-net-mvc/document-engine/writing/elements/layout/section/add-page-numbering.mdx", + "slug": "documentengine-add-page-numbering" + }, + { + "name": "Section Element", + "href": "asp-net-mvc/document-engine/writing/elements/layout/section/element.mdx", + "slug": "documentengine-section-element" + } + ], + "slug": "documentengine-section" + }, + { + "name": "Segment", + "href": "asp-net-mvc/document-engine/writing/elements/layout/segment.mdx", + "order": 8, + "slug": "documentengine-segment" + } + ], + "slug": "documentengine-report-layout" + }, + { + "name": "Pattern Content", + "href": "asp-net-mvc/document-engine/writing/elements/pattern/content.mdx", + "order": 1, + "items": [ + { + "name": "Grids", + "href": "asp-net-mvc/document-engine/writing/elements/pattern/grids.mdx", + "slug": "documentengine-grids" + }, + { + "name": "Lists", + "href": "asp-net-mvc/document-engine/writing/elements/pattern/lists.mdx", + "slug": "documentengine-lists" + }, + { + "name": "Tables", + "href": "asp-net-mvc/document-engine/writing/elements/pattern/tables.mdx", + "slug": "documentengine-tables" + }, + { + "name": "Text", + "href": "asp-net-mvc/document-engine/writing/elements/pattern/text.mdx", + "slug": "documentengine-text" + }, + { + "name": "Trees", + "href": "asp-net-mvc/document-engine/writing/elements/pattern/trees.mdx", + "slug": "documentengine-trees" + } + ], + "slug": "documentengine-pattern-content" + }, + { + "name": "Quick Content", + "href": "asp-net-mvc/document-engine/writing/elements/quick/content.mdx", + "order": 2, + "items": [ + { + "name": "Quick Image", + "href": "asp-net-mvc/document-engine/writing/elements/quick/image.mdx", + "order": 0, + "slug": "documentengine-quick-image" + }, + { + "name": "Quick List", + "href": "asp-net-mvc/document-engine/writing/elements/quick/list.mdx", + "slug": "documentengine-quick-list" + }, + { + "name": "Quick Table", + "href": "asp-net-mvc/document-engine/writing/elements/quick/table.mdx", + "slug": "documentengine-quick-table" + }, + { + "name": "Quick Text", + "href": "asp-net-mvc/document-engine/writing/elements/quick/text.mdx", + "slug": "documentengine-quick-text" + } + ], + "slug": "documentengine-quick-content" + }, + { + "name": "Known Issues and Limitations", + "href": "asp-net-mvc/document-engine/writing/elements/known-issues.mdx", + "slug": "documentengine-known-issues" + }, + { + "name": "Navigation Helpers", + "href": "asp-net-mvc/document-engine/writing/elements/navigation/helpers.mdx", + "items": [ + { + "name": "Bookmarks", + "href": "asp-net-mvc/document-engine/writing/elements/navigation/bookmarks.mdx", + "slug": "documentengine-bookmarks" + }, + { + "name": "Index", + "href": "asp-net-mvc/document-engine/writing/elements/navigation/index.mdx", + "slug": "documentengine-index" + }, + { + "name": "Table of Contents", + "href": "asp-net-mvc/document-engine/writing/elements/navigation/table-of-contents.mdx", + "slug": "documentengine-table-of-contents" + } + ], + "slug": "documentengine-navigation-helpers" + } + ], + "slug": "documentengine-report-elements" + }, + { + "name": "Report Graphics", + "href": "asp-net-mvc/document-engine/writing/graphics/report-graphics.mdx", + "items": [ + { + "name": "Brushes", + "href": "asp-net-mvc/document-engine/writing/graphics/brushes.mdx", + "slug": "documentengine-brushes" + }, + { + "name": "Canvas", + "href": "asp-net-mvc/document-engine/writing/graphics/canvas.mdx", + "slug": "documentengine-canvas" + }, + { + "name": "Colors", + "href": "asp-net-mvc/document-engine/writing/graphics/colors.mdx", + "slug": "documentengine-colors" + }, + { + "name": "Fonts", + "href": "asp-net-mvc/document-engine/writing/graphics/fonts.mdx", + "slug": "documentengine-fonts" + }, + { + "name": "Pens", + "href": "asp-net-mvc/document-engine/writing/graphics/pens.mdx", + "slug": "documentengine-pens" + }, + { + "name": "Shapes", + "href": "asp-net-mvc/document-engine/writing/graphics/shapes.mdx", + "slug": "documentengine-shapes" + } + ], + "slug": "documentengine-report-graphics" + } + ], + "slug": "documentengine-writing-reports" + }, + { + "name": "Deploying Infragistics Document Engine", + "href": "asp-net-mvc/document-engine/deploying-infragistics-document-engine.mdx", + "order": 3, + "slug": "documentengine-deploying-infragistics-document-engine" + }, + { + "name": "API Overview", + "href": "asp-net-mvc/document-engine/api-overview.mdx", + "order": 4, + "slug": "documentengine-api-overview" + } + ], + "slug": "win-infragistics-document-engine" + }, + { + "name": "Infragistics Word Library", + "href": "asp-net-mvc/word-library/word-infragistics-word-library.mdx", + "order": 2, + "items": [ + { + "name": "Understanding Infragistics Word Library", + "href": "asp-net-mvc/word-library/understanding-infragistics-word-library/word-understanding-infragistics-word-library.mdx", + "items": [ + { + "name": "About Infragistics Word Library", + "href": "asp-net-mvc/word-library/understanding-infragistics-word-library/word-about-infragistics-word-library.mdx", + "slug": "word-about-infragistics-word-library" + }, + { + "name": "Word Document Generation References and Dependencies", + "href": "asp-net-mvc/word-library/understanding-infragistics-word-library/word-word-document-generation-references-and-dependencies.mdx", + "slug": "word-word-document-generation-references-and-dependencies" + } + ], + "slug": "word-understanding-infragistics-word-library" + }, + { + "name": "Using the Infragistics Word Library", + "href": "asp-net-mvc/word-library/using-infragistics-word-library/word-using-the-infragistics-word-library.mdx", + "items": [ + { + "name": "Word API Overview", + "href": "asp-net-mvc/word-library/using-infragistics-word-library/word-api-overview.mdx", + "slug": "word-api-overview" + }, + { + "name": "Word Add Images to Word Document", + "href": "asp-net-mvc/word-library/using-infragistics-word-library/word-add-images-to-word-document.mdx", + "slug": "word-add-images-to-word-document" + }, + { + "name": "Adding Table to Word Document", + "href": "asp-net-mvc/word-library/using-infragistics-word-library/word-add-table-to-word-document.mdx", + "slug": "word-add-table-to-word-document" + }, + { + "name": "Applying Formatting to Word Document", + "href": "asp-net-mvc/word-library/using-infragistics-word-library/word-apply-formatting-to-word-document.mdx", + "slug": "word-apply-formatting-to-word-document" + }, + { + "name": "Creating a Word Document", + "href": "asp-net-mvc/word-library/using-infragistics-word-library/word-create-a-word-document.mdx", + "slug": "word-create-a-word-document" + }, + { + "name": "Creating Word Document Using Object Model Approach", + "href": "asp-net-mvc/word-library/using-infragistics-word-library/word-creating-word-document-using-object-model-approach.mdx", + "slug": "word-creating-word-document-using-object-model-approach" + }, + { + "name": "Headers Footers and Page Numbers", + "href": "asp-net-mvc/word-library/using-infragistics-word-library/word-headers-footers-and-page-numbers.mdx", + "slug": "word-headers-footers-and-page-numbers" + } + ], + "slug": "word-using-the-infragistics-word-library" + } + ], + "slug": "word-infragistics-word-library" + }, + { + "name": "{environment:ProductNameMVC} Scaffolder Visual Studio extension", + "href": "asp-net-mvc/mvcscaffolding/mvc-scaffolding.mdx", + "order": 4, + "slug": "mvc-scaffolding" + }, + { + "name": "Wrappers Known Issues and Limitations", + "href": "asp-net-mvc/igniteui-for-mvc-known-issues.mdx", + "order": 5, + "slug": "aspnet-mvc-wrappers-known-issues" + }, + { + "name": "Mobile Wrappers Known Issues and Limitations", + "href": "asp-net-mvc/igniteui-for-mvc-mobile-known-issues.mdx", + "slug": "aspnet-mvc-mobile-wrappers-known-issues" + }, + { + "name": "Using {environment:ProductNameASPNETCore}", + "href": "asp-net-mvc/using-igniteui-controls-in-aspnet-core-project.mdx", + "slug": "mvc-aspnet-core3" + }, + { + "name": "Using {environment:ProductNameASPNETCore} Tag Helpers", + "href": "asp-net-mvc/using-ignite-ui-tag-helpers.mdx", + "slug": "tag-helpers" + } + ], + "slug": "asp.net-mvc-landingpage" + }, + { + "name": "Infragistics Templating Engine", + "href": "infragistics-templating-engine/infragistics-templating-engine.mdx", + "order": 6, + "items": [ + { + "name": "Adding Templating Engine References", + "href": "infragistics-templating-engine/adding-igtemplating-references.mdx", + "order": 0, + "slug": "adding-igtemplating-references" + }, + { + "name": "Templating Engine Overview", + "href": "infragistics-templating-engine/igtemplating-overview.mdx", + "order": 1, + "slug": "igtemplating-overview" + }, + { + "name": "Creating Templates", + "href": "infragistics-templating-engine/creating-templates/creating-templates.mdx", + "order": 2, + "items": [ + { + "name": "Creating an Alternating Rows Template", + "href": "infragistics-templating-engine/creating-templates/creating-an-alternating-rows-template-igtemplating.mdx", + "order": 0, + "slug": "creating-an-alternating-rows-template-(igtemplating)" + }, + { + "name": "Creating a Basic Conditional Template", + "href": "infragistics-templating-engine/creating-templates/creating-basic-conditional-template.mdx", + "order": 1, + "slug": "creating-basic-conditional-template" + }, + { + "name": "Creating a Basic Substitution Template", + "href": "infragistics-templating-engine/creating-templates/creating-basic-substitution-template.mdx", + "order": 2, + "slug": "creating-basic-substitution-template" + }, + { + "name": "Creating a Complex Property Substitution Template", + "href": "infragistics-templating-engine/creating-templates/creating-complex-property-substitution-template.mdx", + "order": 3, + "slug": "creating-complex-property-substitution-template" + }, + { + "name": "Creating a Conditional Template Containing a Default Statement", + "href": "infragistics-templating-engine/creating-templates/creating-conditional-template-containing-default-statement.mdx", + "order": 4, + "slug": "creating-conditional-template-containing-default-statement" + }, + { + "name": "Creating a Multi-Conditional Template Containing a Default Statement", + "href": "infragistics-templating-engine/creating-templates/creating-multi-conditional-template-containing-default-statement.mdx", + "order": 5, + "slug": "creating-multi-conditional-template-containing-default-statement" + }, + { + "name": "Creating a Nested Blocks Template", + "href": "infragistics-templating-engine/creating-templates/creating-nested-blocks-template.mdx", + "order": 6, + "slug": "creating-nested-blocks-template" + } + ], + "slug": "creating-templates" + } + ], + "slug": "infragistics-templating-engine" + }, + { + "name": "What's New", + "href": "whats-new/jquery-whats-new-landing-page.mdx", + "order": 7, + "items": [ + { + "name": "Changelog", + "href": "whats-new/00-general-changelog.mdx", + "order": 0, + "slug": "general-changelog" + }, + { + "name": "Revision History", + "href": "whats-new/revision-history/jquery-whats-new-revision-history.mdx", + "order": 2, + "items": [ + { + "name": "What's New in 2023 Volume 2", + "href": "whats-new/revision-history/00-whats-new-in-2023-volume2.mdx", + "order": 0, + "slug": "whats-new-in-2023-volume2" + }, + { + "name": "What's New in 2022 Volume 2", + "href": "whats-new/revision-history/01-whats-new-in-2022-volume2.mdx", + "order": 1, + "slug": "whats-new-in-2022-volume2" + }, + { + "name": "What's New in 2022 Volume 1", + "href": "whats-new/revision-history/02-whats-new-in-2022-volume1.mdx", + "order": 2, + "slug": "whats-new-in-2022-volume1" + }, + { + "name": "What's New in 2021 Volume 2", + "href": "whats-new/revision-history/03-whats-new-in-2021-volume2.mdx", + "order": 3, + "slug": "whats-new-in-2021-volume2" + }, + { + "name": "What's New in 2021 Volume 1", + "href": "whats-new/revision-history/04-whats-new-in-2021-volume1.mdx", + "order": 4, + "slug": "whats-new-in-2021-volume1" + }, + { + "name": "What's New in 2020 Volume 2", + "href": "whats-new/revision-history/05-whats-new-in-2020-volume2.mdx", + "order": 5, + "slug": "whats-new-in-2020-volume2" + }, + { + "name": "What's New in 2019 Volume 2", + "href": "whats-new/revision-history/06-whats-new-in-2019-volume2.mdx", + "order": 6, + "slug": "whats-new-in-2019-volume2" + }, + { + "name": "What's New in 2018 Volume 2", + "href": "whats-new/revision-history/07-whats-new-in-2018-volume2.mdx", + "order": 7, + "slug": "whats-new-in-2018-volume2" + }, + { + "name": "What's New in 2018 Volume 1", + "href": "whats-new/revision-history/08-whats-new-in-2018-volume1.mdx", + "order": 8, + "slug": "whats-new-in-2018-volume1" + }, + { + "name": "What's New in 2017 Volume 2", + "href": "whats-new/revision-history/09-whats-new-in-2017-volume2.mdx", + "order": 9, + "slug": "whats-new-in-2017-volume2" + }, + { + "name": "What's New in 2017 Volume 1", + "href": "whats-new/revision-history/10-whats-new-in-2017-volume1.mdx", + "order": 10, + "slug": "whats-new-in-2017-volume1" + }, + { + "name": "What's New in 2014 Volume 1", + "href": "whats-new/revision-history/16-whats-new-in-2014-volume1.mdx", + "order": 16, + "slug": "whats-new-in-2014-volume1" + }, + { + "name": "What's New in 2013 Volume 2", + "href": "whats-new/revision-history/17-whats-new-in-2013-volume2.mdx", + "order": 17, + "slug": "whats-new-in-2013-volume2" + }, + { + "name": "What's New in 2013 Volume 1", + "href": "whats-new/revision-history/18-whats-new-in-2013-volume1.mdx", + "order": 18, + "slug": "whats-new-in-2013-volume1" + }, + { + "name": "What's New in 2012 Volume 2", + "href": "whats-new/revision-history/19-whats-new-in-2012-volume2.mdx", + "order": 19, + "slug": "whats-new-in-2012-volume2" + }, + { + "name": "What's New in 2012 Volume 1", + "href": "whats-new/revision-history/20-jquery-whats-new-12-1-landing-page.mdx", + "order": 20, + "slug": "jquery-whats-new-12-1-landing-page" + }, + { + "name": "What's New in 2011 Volume 2", + "href": "whats-new/revision-history/21-whats-new-in-2011-volume2.mdx", + "order": 21, + "slug": "whats-new-in-2011-volume2" + } + ], + "slug": "jquery-whats-new-revision-history" + } + ], + "slug": "jquery-whats-new-landing-page" + }, + { + "name": "Known Issues", + "href": "known-issues/known-issues.mdx", + "order": 8, + "items": [ + { + "name": "Known Issues and Limitations", + "href": "known-issues/and-limitations.mdx", + "order": 1, + "slug": "known-issues-and-limitations" + }, + { + "name": "Known Issues Revision History", + "href": "known-issues/known-issues-revision-history/revision-history.mdx", + "order": 3, + "items": [ + { + "name": "Known Issues and Limitations in 2023 Volume 2", + "href": "known-issues/known-issues-revision-history/00-known-issues-and-limitations-2023-volume-2.mdx", + "order": 0, + "slug": "known-issues-and-limitations-2023-volume-2" + }, + { + "name": "Known Issues and Limitations in 2023 Volume 1", + "href": "known-issues/known-issues-revision-history/01-known-issues-and-limitations-2023-volume-1.mdx", + "order": 1, + "slug": "known-issues-and-limitations-2023-volume-1" + }, + { + "name": "Known Issues and Limitations in 2022 Volume 2", + "href": "known-issues/known-issues-revision-history/02-known-issues-and-limitations-2022-volume-2.mdx", + "order": 2, + "slug": "known-issues-and-limitations-2022-volume-2" + }, + { + "name": "Known Issues and Limitations in 2022 Volume 1", + "href": "known-issues/known-issues-revision-history/03-known-issues-and-limitations-2022-volume-1.mdx", + "order": 3, + "slug": "known-issues-and-limitations-2022-volume-1" + }, + { + "name": "Known Issues and Limitations in 2021 Volume 2", + "href": "known-issues/known-issues-revision-history/04-known-issues-and-limitations-2021-volume-2.mdx", + "order": 4, + "slug": "known-issues-and-limitations-2021-volume-2" + }, + { + "name": "Known Issues and Limitations in 2021 Volume 1", + "href": "known-issues/known-issues-revision-history/05-known-issues-and-limitations-2021-volume-1.mdx", + "order": 5, + "slug": "known-issues-and-limitations-2021-volume-1" + }, + { + "name": "Known Issues and Limitations in 2020 Volume 2", + "href": "known-issues/known-issues-revision-history/06-known-issues-and-limitations-2020-volume-2.mdx", + "order": 6, + "slug": "known-issues-and-limitations-2020-volume-2" + }, + { + "name": "Known Issues and Limitations in 2020 Volume 1", + "href": "known-issues/known-issues-revision-history/07-known-issues-and-limitations-2020-volume-1.mdx", + "order": 7, + "slug": "known-issues-and-limitations-2020-volume-1" + }, + { + "name": "Known Issues and Limitations in 2019 Volume 2", + "href": "known-issues/known-issues-revision-history/08-known-issues-and-limitations-2019-volume-2.mdx", + "order": 8, + "slug": "known-issues-and-limitations-2019-volume-2" + }, + { + "name": "Known Issues and Limitations in 2019 Volume 1", + "href": "known-issues/known-issues-revision-history/09-known-issues-and-limitations-2019-volume-1.mdx", + "order": 9, + "slug": "known-issues-and-limitations-2019-volume-1" + }, + { + "name": "Known Issues and Limitations in 2018 Volume 2", + "href": "known-issues/known-issues-revision-history/10-known-issues-and-limitations-2018-volume-2.mdx", + "order": 10, + "slug": "known-issues-and-limitations-2018-volume-2" + }, + { + "name": "Known Issues and Limitations in 2018 Volume 1", + "href": "known-issues/known-issues-revision-history/11-known-issues-and-limitations-2018-volume-1.mdx", + "order": 11, + "slug": "known-issues-and-limitations-2018-volume-1" + }, + { + "name": "Known Issues and Limitations in 2017 Volume 2", + "href": "known-issues/known-issues-revision-history/12-known-issues-and-limitations-2017-volume-2.mdx", + "order": 12, + "slug": "known-issues-and-limitations-2017-volume-2" + }, + { + "name": "Known Issues and Limitations in 2017 Volume 1", + "href": "known-issues/known-issues-revision-history/13-known-issues-and-limitations-2017-volume-1.mdx", + "order": 13, + "slug": "known-issues-and-limitations-2017-volume-1" + }, + { + "name": "Known Issues and Limitations in 2016 Volume 2", + "href": "known-issues/known-issues-revision-history/14-known-issues-and-limitations-2016-volume-2.mdx", + "order": 14, + "slug": "known-issues-and-limitations-2016-volume-2" + }, + { + "name": "Known Issues and Limitations in 2016 Volume 1", + "href": "known-issues/known-issues-revision-history/15-known-issues-and-limitations-2016-volume-1.mdx", + "order": 15, + "slug": "known-issues-and-limitations-2016-volume-1" + }, + { + "name": "Known Issues and Limitations in 2015 Volume 2", + "href": "known-issues/known-issues-revision-history/16-known-issues-and-limitations-2015-volume-2.mdx", + "order": 16, + "slug": "known-issues-and-limitations-2015-volume-2" + }, + { + "name": "Known Issues and Limitations in 2015 Volume 1", + "href": "known-issues/known-issues-revision-history/17-known-issues-and-limitations-2015-volume-1.mdx", + "order": 17, + "slug": "known-issues-and-limitations-2015-volume-1" + }, + { + "name": "Known Issues and Limitations in 2014 Volume 2", + "href": "known-issues/known-issues-revision-history/18-known-issues-and-limitations-2014-volume-2.mdx", + "order": 18, + "slug": "known-issues-and-limitations-2014-volume-2" + }, + { + "name": "Known Issues and Limitations in 2014 Volume 1", + "href": "known-issues/known-issues-revision-history/19-known-issues-and-limitations-2014-volume-1.mdx", + "order": 19, + "slug": "known-issues-and-limitations-2014-volume-1" + }, + { + "name": "Known Issues and Limitations in 2013 Volume 2", + "href": "known-issues/known-issues-revision-history/20-known-issues-and-limitations-2013-volume-2.mdx", + "order": 20, + "slug": "known-issues-and-limitations-2013-volume-2" + }, + { + "name": "Known Issues and Limitations in 2013 Volume 1", + "href": "known-issues/known-issues-revision-history/21-known-issues-and-limitations-2013-volume-1.mdx", + "order": 21, + "slug": "known-issues-and-limitations-2013-volume-1" + }, + { + "name": "Known Issues and Limitations in 2012 Volume 2", + "href": "known-issues/known-issues-revision-history/22-known-issues-and-limitations-2012-volume-2.mdx", + "order": 22, + "slug": "known-issues-and-limitations-2012-volume-2" + }, + { + "name": "Known Issues and Limitations in 2012 Volume 1", + "href": "known-issues/known-issues-revision-history/23-known-issues-and-limitations-2012-volume-1.mdx", + "order": 23, + "slug": "known-issues-and-limitations-2012-volume-1" + }, + { + "name": "Known Issues and Limitations in 2011 Volume 2", + "href": "known-issues/known-issues-revision-history/24-known-issues-and-limitations-2011-volume-2.mdx", + "order": 24, + "slug": "known-issues-and-limitations-2011-volume-2" + }, + { + "name": "Known Issues and Limitations in 2011 Volume 1", + "href": "known-issues/known-issues-revision-history/25-known-issues-and-limitations-2011-volume-1.mdx", + "order": 25, + "slug": "known-issues-and-limitations-2011-volume-1" + } + ], + "slug": "known-issues-revision-history" + }, + { + "name": "Breaking Changes Revision History", + "href": "known-issues/breaking-changes-revision-history/breaking-changes-revision-history.mdx", + "order": 4, + "items": [ + { + "name": "Breaking Changes 2023 Volume 2", + "href": "known-issues/breaking-changes-revision-history/00-breaking-changes-2023-volume-2.mdx", + "order": 0, + "slug": "breaking-changes-2023-volume-2" + }, + { + "name": "Breaking Changes 2023 Volume 1", + "href": "known-issues/breaking-changes-revision-history/01-breaking-changes-2023-volume-1.mdx", + "order": 1, + "slug": "breaking-changes-2023-volume-1" + }, + { + "name": "Breaking Changes 2022 Volume 2", + "href": "known-issues/breaking-changes-revision-history/02-breaking-changes-2022-volume-2.mdx", + "order": 2, + "slug": "breaking-changes-2022-volume-2" + }, + { + "name": "Breaking Changes 2022 Volume 1", + "href": "known-issues/breaking-changes-revision-history/03-breaking-changes-2022-volume-1.mdx", + "order": 3, + "slug": "breaking-changes-2022-volume-1" + }, + { + "name": "Breaking Changes 2021 Volume 2", + "href": "known-issues/breaking-changes-revision-history/04-breaking-changes-2021-volume-2.mdx", + "order": 4, + "slug": "breaking-changes-2021-volume-2" + }, + { + "name": "Breaking Changes 2021 Volume 1", + "href": "known-issues/breaking-changes-revision-history/05-breaking-changes-2021-volume-1.mdx", + "order": 5, + "slug": "breaking-changes-2021-volume-1" + }, + { + "name": "Breaking Changes 2020 Volume 2", + "href": "known-issues/breaking-changes-revision-history/06-breaking-changes-2020-volume-2.mdx", + "order": 6, + "slug": "breaking-changes-2020-volume-2" + }, + { + "name": "Breaking Changes 2020 Volume 1", + "href": "known-issues/breaking-changes-revision-history/07-breaking-changes-2020-volume-1.mdx", + "order": 7, + "slug": "breaking-changes-2020-volume-1" + }, + { + "name": "Breaking Changes 2019 Volume 2", + "href": "known-issues/breaking-changes-revision-history/08-breaking-changes-2019-volume-2.mdx", + "order": 8, + "slug": "breaking-changes-2019-volume-2" + }, + { + "name": "Breaking Changes 2019 Volume 1", + "href": "known-issues/breaking-changes-revision-history/09-breaking-changes-2019-volume-1.mdx", + "order": 9, + "slug": "breaking-changes-2019-volume-1" + }, + { + "name": "Breaking Changes 2018 Volume 2", + "href": "known-issues/breaking-changes-revision-history/10-breaking-changes-2018-volume-2.mdx", + "order": 10, + "slug": "breaking-changes-2018-volume-2" + }, + { + "name": "Breaking Changes 2018 Volume 1", + "href": "known-issues/breaking-changes-revision-history/11-breaking-changes-2018-volume-1.mdx", + "order": 11, + "slug": "breaking-changes-2018-volume-1" + }, + { + "name": "Breaking Changes 2017 Volume 2", + "href": "known-issues/breaking-changes-revision-history/12-breaking-changes-2017-volume-2.mdx", + "order": 12, + "slug": "breaking-changes-2017-volume-2" + }, + { + "name": "Breaking Changes 2017 Volume 1", + "href": "known-issues/breaking-changes-revision-history/13-breaking-changes-2017-volume-1.mdx", + "order": 13, + "slug": "breaking-changes-2017-volume-1" + }, + { + "name": "Breaking Changes 2016 Volume 2", + "href": "known-issues/breaking-changes-revision-history/14-breaking-changes-2016-volume-2.mdx", + "order": 14, + "slug": "breaking-changes-2016-volume-2" + } + ], + "slug": "breaking-changes-revision-history" + } + ], + "slug": "known-issues" + }, + { + "name": "Infragistics JavaScript Excel Library", + "href": "javascript-excel-library/javascript-excel-library.mdx", + "order": 9, + "items": [ + { + "name": "Understanding the Infragistics JavaScript Excel Library", + "href": "javascript-excel-library/understanding/the-infragistics-javascript-excel-library.mdx", + "order": 0, + "items": [ + { + "name": "JavaScript Excel Library Overview", + "href": "javascript-excel-library/understanding/overview.mdx", + "slug": "javascript-excel-library-overview" + }, + { + "name": "Supported Versions of Microsoft Excel", + "href": "javascript-excel-library/understanding/supported-versions-of-microsoft-excel.mdx", + "slug": "javascript-excel-library-supported-versions-of-microsoft-excel" + } + ], + "slug": "understanding-the-infragistics-javascript-excel-library" + }, + { + "name": "01_Using", + "href": "javascript-excel-library/using/the-javascript-excel-library.mdx", + "order": 1, + "items": [ + { + "name": "Accessing Cells and Regions by their Reference Strings", + "href": "javascript-excel-library/using/accessing-cells-and-regions-by-their-reference-strings.mdx", + "slug": "javascript-excel-library-accessing-cells-and-regions-by-their-reference-strings" + }, + { + "name": "Add Document Properties to a Workbook", + "href": "javascript-excel-library/using/add-document-properties-to-a-workbook.mdx", + "slug": "javascript-excel-library-add-document-properties-to-a-workbook" + }, + { + "name": "Adding a Hyperlink to a cell in an Excel file", + "href": "javascript-excel-library/using/adding-a-hyperlink-to-a-cell-in-an-excel-file.mdx", + "slug": "javascript-excel-library-adding-a-hyperlink-to-a-cell-in-an-excel-file" + }, + { + "name": "Adding a Sparkline to an Excel Worksheet", + "href": "javascript-excel-library/using/adding-a-sparkline-to-an-excel-worksheet.mdx", + "slug": "javaScript-excel-library-adding-a-sparkline-to-an-excel-worksheet" + }, + { + "name": "Applying Styles to Cells", + "href": "javascript-excel-library/using/applying-styles-to-cells.mdx", + "slug": "javascript-excel-library-applying-styles-to-cells" + }, + { + "name": "Calculating Order Totals", + "href": "javascript-excel-library/using/calculating-order-totals.mdx", + "slug": "javascript-excel-library-calculating-order-totals" + }, + { + "name": "Comments in a Worksheet Cell", + "href": "javascript-excel-library/using/comments-in-a-worksheet-cell.mdx", + "slug": "javascript-excel-library-comments-in-a-worksheet-cell" + }, + { + "name": "Conditional Formatting", + "href": "javascript-excel-library/using/conditional-formatting.mdx", + "slug": "javascript-excel-library-conditional-formatting" + }, + { + "name": "Create a Workbook", + "href": "javascript-excel-library/using/create-a-workbook.mdx", + "slug": "javascript-excel-library-create-a-workbook" + }, + { + "name": "Creating a Workbook in office 2007 XLSX format", + "href": "javascript-excel-library/using/creating-a-workbook-in-office-2007-xlsx-format.mdx", + "slug": "javascript-excel-library-creating-a-workbook-in-office-2007-xlsx-format" + }, + { + "name": "Freeze Rows and Columns", + "href": "javascript-excel-library/using/freeze-rows-and-columns.mdx", + "slug": "javascript-excel-library-freeze-rows-and-columns" + }, + { + "name": "Getting the Value of a Formula from an Excel File", + "href": "javascript-excel-library/using/getting-the-value-of-a-formula-from-an-excel-file.mdx", + "slug": "javascript-excel-library-getting-the-value-of-a-formula-from-an-excel-file" + }, + { + "name": "List of Supported Built-in Functions", + "href": "javascript-excel-library/using/list-of-supported-built-in-functions.mdx", + "slug": "javascript-excel-library-list-of-supported-built-in-functions" + }, + { + "name": "Merge Cells", + "href": "javascript-excel-library/using/merge-cells.mdx", + "slug": "javascript-excel-library-merge-cells" + }, + { + "name": "Moving a Worksheet within an Excel Workbook", + "href": "javascript-excel-library/using/moving-a-worksheet-within-an-excel-workbook.mdx", + "slug": "javascript-excel-library-moving-a-worksheet-within-an-excel-workbook" + }, + { + "name": "Read an Excel 2007 XLSX File Into a Workbook", + "href": "javascript-excel-library/using/read-an-excel-2007-xlsx-file-into-a-workbook.mdx", + "slug": "javascript-excel-library-read-an-excel-2007-xlsx-file-into-a-workbook" + }, + { + "name": "Resizing Rows and Columns", + "href": "javascript-excel-library/using/resizing-rows-and-columns.mdx", + "slug": "javascript-excel-library-resizing-rows-and-columns" + }, + { + "name": "Save and Load Files in Excel Template Format", + "href": "javascript-excel-library/using/save-and-load-files-in-excel-template-format.mdx", + "slug": "javascript-excel-library-save-and-load-files-in-excel-template-format" + }, + { + "name": "Adding a Chart to a Worksheet", + "href": "javascript-excel-library/using/worksheet-charts.mdx", + "slug": "javascript-excel-library-worksheet-charts" + }, + { + "name": "Worksheet level Filtering", + "href": "javascript-excel-library/using/worksheet-level-filtering.mdx", + "slug": "igExcelEngineFiltering" + }, + { + "name": "Worksheet level Sorting", + "href": "javascript-excel-library/using/worksheet-level-sorting.mdx", + "slug": "igExcelEngineSorting" + } + ], + "slug": "using-the-javascript-excel-library" + }, + { + "name": "API Overview", + "href": "javascript-excel-library/api-overview.mdx", + "order": 3, + "slug": "api-overview" + } + ], + "slug": "javascript-excel-library" + }, + { + "name": "AngularJS Directives", + "href": "angularjs-directives/angularjs-directives.mdx", + "order": 10, + "items": [ + { + "name": "AngularJS Samples", + "href": "angularjs-directives/angularjs-samples.mdx", + "order": 2, + "slug": "angularjs-samples" + } + ], + "slug": "angularjs-directives" + }, + { + "name": "TypeScript Definitions", + "href": "typescript-definitions/typescript-definitions.mdx", + "order": 11, + "items": [ + { + "name": "Using {environment:ProductName} with TypeScript", + "href": "typescript-definitions/using-ignite-ui-with-typescript.mdx", + "order": 0, + "slug": "using-ignite-ui-with-typescipt" + }, + { + "name": "TypeScript Samples", + "href": "typescript-definitions/typescript-samples.mdx", + "order": 1, + "slug": "typescript-samples" + } + ], + "slug": "typescript-definitions" + } +] diff --git a/docs/jquery/tsconfig.json b/docs/jquery/tsconfig.json new file mode 100644 index 0000000000..cea96c7f38 --- /dev/null +++ b/docs/jquery/tsconfig.json @@ -0,0 +1,11 @@ +{ + "extends": "astro/tsconfigs/strict", + "compilerOptions": { + "baseUrl": ".", + "paths": { + "@/*": ["src/*"] + } + }, + "include": [".astro/types.d.ts", "**/*"], + "exclude": ["dist"] +} diff --git a/normalized-debug.mdx b/normalized-debug.mdx new file mode 100644 index 0000000000..335e675ace --- /dev/null +++ b/normalized-debug.mdx @@ -0,0 +1,378 @@ +--- +title: "igLinearGauge Overview" +--- + +# igLinearGauge Overview + + + +##Topic Overview + + +### Purpose + +This topic provides conceptual information about the `igLinearGauge`™ control including its main features, minimum requirements, and user functionality. + +### In this topic + +This topic contains the following sections: + +- [Introduction](#introduction) + +- [Main Features](#main-features) + - [Main features summary](#main-features-summary) + - [Main features summary chart](#main-features-chart) +- [Logical areas and Configurable Visual Elements Summary](#config-visual-elements-summary) + - [Logical areas](#logical-areas) + - [Configurable visual elements](#config-visual-elements) +- [Configurable Visual Elements and Related Properties](#config-visual-elements-related-prop) + - [Configurable visual elements and related properties summary](#config-visual-elements-related-prop-summary) + - [Scale](#scale) + - [Needle](#needle) + - [Comparative ranges](#comparative-ranges) + - [Background](#background-overview) + - [Tooltips](#tooltip-overview) +- [Default Configuration](#default-config) + +- [Requirements](#requirements) + +- [Related Content](#related-content) + - [Topics](#topics) + - [Samples](#samples) + + + +##Introduction + + +### igLinearGauge summary + +The `igLinearGauge` control is an Ignite UI for jQuery control which allows for visualizing data in the form of a linear gauge. It provides a simple and concise view of a primary value compared against a scale and one or more comparative ranges. + +![](images/igLinearGauge.png) + +The `igLinearGauge` control provides you with the ability to create attractive data presentations and has multiple application usage scenarios. + + + +##Main Features + + +### Main features summary + +The features of `igLinearGauge` include configurable orientation and direction, configurable visual elements and tooltips, and more. The control has also a built-in support for animated transitions. + +### Main features summary chart + +The following table summarizes the main features of the `igLinearGauge` control. + +Feature|Description +---|--- +Configurable orientation and direction|The `igLinearGauge` control exposes an API for setting the state of its scale’s orientation and direction, so that the look of the gauge can be largely customized. (For details, see the [Configuring the Orientation and Direction (igLinearGauge)](/configuring/iglineargauge-configuring-the-orientation-and-direction.mdx) topic.) +Configurable visual elements|Each of the [visual elements](#config-visual-elements-related-prop) of the linear gauge can be configured in several aspects. (For details, see [Configurable Visual Elements of igLinearGauge and Related Properties](#config-visual-elements-related-prop).) +Animated transitions|The `igLinearGauge` control provides built-in support for animation by its [transitionDuration]({environment:jQueryApiUrl}/ui.igLinearGauge#options:transitionDuration) property. The animation effect occurs on loading the control as well as when the value of any of its properties is changed. By default, animated transitions are disabled. Providing a value in milliseconds for the `transitionDuration` property of the control determines the timeframe for swiping the control into view by smoothly visualizing all of its visual elements through a slide effect (from bottom-left to top-right). Setting the value to 0 disables the animated transition. For a sample, demonstrating the animation transition effect, see the [Animated Transitions]({environment:SamplesUrl}/linear-gauge/animated-transitions) sample. +Support for tooltips|The built-in tooltips of the `igLinearGauge` control show the values used to create the needle, or the values, corresponding to the different ranges respectively. They are initially styled in accordance with the default look of the control, but their look can be customized by templates. By default, tooltips are disabled. (For details, see [Configuring the Tooltips (igLinearGauge)](/configuring/elements/iglineargauge-configuring-the-tooltips.mdx)) + + +##Logical areas and Configurable Visual Elements Summary + + +### Logical areas + +The user-visible area of the `igLinearGauge` control is logically divided into the following areas: Title area, Reserved area, and Graph area. + +Horizontal orientation|Vertical orientation +---|--- +![](images/igLinearGauge_Overview_1.png)|![](images/igLinearGauge_Overview_2.png) + +Each of them serves different purpose related to some of the [visual elements](#config-visual-elements) of the `igLinearGauge` control. + +- Reserved area (1) – This area spreads: + - Along the scale – the Reserved area begins at either edge of the control and ends at the opposing edge of the control. + - Across the scale – + - Horizontal Orientation: the Reserved area begins at the bottom edge of the control and extends upwards to the bottom margin of the gauge's scale. + - Vertical Orientation: the Reserved area begins at the left edge of the control and extends to the right, up to the left margin of the gauge's scale. + +The main purpose of the Reserved area is to provide enough space for the numbering labels of the scale at any orientation – horizontal or vertical (The Reserved area automatically re-sizes when the orientation changes in order to accommodate the specific space requirements for displaying the numbering labels in each of the orientations: in horizontal orientation, the area has to fit the labels’ height and in vertical orientation – their maximum width.) This doesn’t mean that you must necessarily place the numbering labels in the Reserved area: actually, you can position the label row across-the-scale anywhere within the [Graph area](#graph-area). However, even if you place the label row outside Reserved area, this will have no bearing on the spread and location of the Reserved area itself – it remains where it is, automatically defined through the height/width (depending on the orientation) of the numbering labels. + +Another aspect in which the Reserved area is significant is the fact that its inner edge specifies the beginning edge of the [Graph area](#graph-area) in the across-the-scale dimension. This is important, because this edge serves as a reference mark for the extent-related properties that position some [visual elements](#config-visual-elements) across the scale. (Positive values for these properties – the most common case – position the visual elements inside the [Graph area](#graph-area) and negative values – inside the Reserved area.) + +- Graph area (2) – The area for displaying the needle, the tick marks, the ranges, and, optionally, the numbering labels of the linear gauge. All extent-related properties for these visual elements (except for labels) are measured against its edges. The Graph area serves not as a placeholder but as a frame of reference for positioning the scale inside the control (More precisely, for positioning the [visual elements](#config-visual-elements-related-prop) of the scale). + +Spread of the Graph area: + +- Along the scale – the Graph area begins at either edge of the control and ends at the opposing edge of the control. Both the starting and ending positions of the scale are measured against the starting edge of the Graph area (the left edge at horizontal orientation or bottom edge at vertical orientation). +- Across the scale – the Graph area begins at the edge of the Reserved area (this is the bottom edge of the Graph area in the horizontal orientation or its left edge in the vertical orientation). The edge of the Graph area that borders with the Reserved area serves as a reference point for the extent-related properties of some of the visual elements of the scale (for positioning these elements across the scale). + + + +### Configurable visual elements + +The `igLinearGauge` control features the following visual elements (See the picture below): + +- Needle (3) – This is the primary indicator displayed by the control and is visualized as a hovering bar element, which moves along the gauge's scale; its current position along the scale indicates the gauge's value. + +- Comparative range(s) (4) – The ranges are visual elements that highlight a specified range of values on a scale. Their purpose is to visually communicate the qualitative state of the performance bar measure, illustrating at the same times the degree to which it resides within that state. +- Tick marks (5) –The tick marks serve as a visual division of the scale into intervals in order to increase the readability of the linear gauge. + - Major tick marks – The major tick marks are used as primary delimiters on the scale. The frequency they appear at, their extents and style can be controlled by setting the corresponding properties. + - Minor tick marks – The minor tick marks represent helper tick marks, which might be used to additionally improve the readability of the scale and can be customized in a way similar to the major ones. +- Scale labels (6) – The labels indicate the measures on the scale. +- Border (7) – The line visually delimiting the dimensions of the control. +- Background (8) – The background on which visual elements is placed is configurable in terms of pattern and color. + +![](images/igLinearGauge_Overview_3.png) + +- Tooltips – show the values used to create the needle, or the values, corresponding to the different ranges respectively. + + + +##Configurable Visual Elements and Related Properties + + +### Configurable visual elements and related properties summary + +There are several specific aspects in which each element can be configured. + +The following table provides an overview of the configurable aspects of the visual elements of the `igLinearGauge` control. Further details about the configurable aspects with illustrations and the properties that configure them are available, for each visual element, in the blocks that follow the table: + + +| | | +| --- | --- | +| Visual element | Main configurable aspects | +| [Scale](#scale) | Position Tick marks Labels | +| [Needle](#needle) | Value indicated Width and position Look-and-feel (shape) | +| [Comparative ranges](#comparative-ranges) | Number (of ranges in the gauge) Length, width, and position Look-and-feel | +| [Background](#background-overview) | Size and position Look-and-feel | +| [Tooltips](#tooltip-overview) | Display delay | + + + + +### Scale + +The following pictures illustrate the scale-related extents, listed in the table below. + +Extent positioning the scale within the Graph area|Extents configuring the position of the labels +---|--- +![](images/igLinearGauge_Overview_5.png)|![](images/igLinearGauge_Overview_6.png) + + + +Extents configuring the major tick marks along the scale|Extents configuring the major tick marks across the scale +---|--- +![](images/igLinearGauge_Overview_7.png)|![](images/igLinearGauge_Overview_8.png) + + + +Extents configuring the minor tick marks across the scale + +![](images/igLinearGauge_Overview_9.png) + + + +The following table maps the configurable aspects related to the scale of the linear gauge to the `igLinearGauge` properties that manage them. + + +Configurable aspects +Property +Default value +Position +scaleStartExtent +0.05 +scaleEndExtent +0.95 +Range and Values +Max value +minimumValue +0 +Min value +maximumValue +100 +Tick marks +Major tick marks +Position (within the scale), spacing, and length +interval +Not set +ticksPostInitial +0 +ticksPreTerminal +0 +tickStartExtent +0.02 +tickEndExtent +0.2 +Look-and-feel +Color +tickBrush +Defined in the default theme +Width +tickStrokeThickness +2.0 +Minor tick marks +Number (between two adjacent major tick marks) +minorTickCount +3.0 +Position +minorTickStartExtent +0.06 +minorTickEndExtent +0.2 +Look-and-feel +Color +minorTickBrush +Defined in the default theme +Width +minorTickStrokeThickness +1.0 +Labels +Position and spacing +labelExtent +0 +labelInterval +Not set +labelsPostInitial +0 +labelsPreTerminal +0 +Number format +labelFormat +Not set +Look-and-feel +Color +fontBrush +Defined in the default theme +### Related Topics +- [Configuring the Scale (igLinearGauge)](/configuring/elements/iglineargauge-configuring-the-scale.mdx) +### Needle +The following picture illustrates the needle-related extents, listed in the table below. +![](images/igLinearGauge_Overview_10.png) +The following table maps the basic configurable aspects related to the needle of the linear gauge to the `igLinearGauge` properties that manage them. +Configurable aspects +Property +Default value +Value indicated +value +Not set +Breadth +needleBreadth +10.0 +Look-and-feel +Fill color +needleBrush +Defined in the default theme +Border color +needleOutline +Defined in the default theme +Border thickness +needleStrokeThickness +1.0 +Shape +needleShape +Needle +### Related Topics +- [Configuring the Needle (*igLinearGauge*)](/configuring/elements/iglineargauge-configuring-the-needle.mdx) +### Comparative ranges +The following picture illustrates the comparative-ranges-related extents, listed in the table below. +![](images/igLinearGauge_Overview_11.png) +The following table maps the configurable aspects related to the comparative ranges of the linear gauge to the `igLinearGauge` properties that manage them. +Configurable aspects +Property +Default value +Number (of ranges in the gauge) +ranges +Not set +Length, width, and position +startValue +Not set +endValue +Not set +innerStartExtent +Not set +innerEndExtent +Not set +outerStartExtent +Not set +outerEndExtent +Not set +Look-and-feel +Fill color +brush +Defined in the default theme +Border color +outline +Defined in the default theme +Border thickness +strokeThickness +1.0 +Tooltip +rangeToolTip +The start and end values of the range separated by a hyphen (-). +### Related Topics +- [Configuring Comparative Ranges (*igLinearGauge*)](/configuring/elements/iglineargauge-configuring-comparative-ranges.mdx) +### Background +The following picture illustrates the background-related extents, listed in the table below. +![](images/igLinearGauge_Overview_12.png) +The following table maps the configurable aspects related to the background of the linear gauge to the `igLinearGauge` properties that manage them. +Configurable aspects +Property +Default value +Spread and position (across the scale) +[backingInnerExtent]({environment:jQueryApiUrl}/ui.igLinearGauge#options:backingInnerExtent) +0 +[backingOuterExtent]({environment:jQueryApiUrl}/ui.igLinearGauge#options:backingOuterExtent) +1.0 +Look-and-feel +Color +[backingBrush]({environment:jQueryApiUrl}/ui.igLinearGauge#options:backingBrush) +Defined in the default theme +Border color +[backingOutline]({environment:jQueryApiUrl}/ui.igLinearGauge#options:backingOutline) +Defined in the default theme +Border thickness +[backingStrokeThickness]({environment:jQueryApiUrl}/ui.igLinearGauge#options:backingStrokeThickness) +2.0 +### Related Topics +- [Configuring the Background (igLinearGauge)](/configuring/elements/iglineargauge-configuring-the-background.mdx) +### Tooltips +The following table maps the configurable aspects of the `igLinearGauge` control related to tooltips to the properties that manage them. +Configurable aspect +Details +Properties / Events +Default value +Visibility +You can enable/disable tooltips for the igLinearGauge control. +[showToolTip]({environment:jQueryApiUrl}/ui.igLinearGauge#options:showToolTip) +\*False\* +Delay +The timeout before the tooltip appears upon the visual element at mouse hovering is configurable in milliseconds. +[showToolTipTimeout]({environment:jQueryApiUrl}/ui.igLinearGauge#options:showToolTipTimeout) +\*500\* +Value +You can provide a custom value for the respective tooltip property. +[Needle](/configuring/elements/iglineargauge-configuring-the-needle.mdx) +[needleToolTip]({environment:jQueryApiUrl}/ui.igLinearGauge#options:needleToolTip) +Depends on whether [needleName]({environment:jQueryApiUrl}/ui.igLinearGauge#options:needleName) has been initialized (see [Configuring a Custom Tooltip for the Needle](./03_Configuring/01_Elements/04_igLinearGauge_Configuring_the_Tooltips.mdx#config-custom-tooltip)) +[Comparative Range(s)](/configuring/elements/iglineargauge-configuring-comparative-ranges.mdx) +[rangeToolTip]({environment:jQueryApiUrl}/ui.igLinearGauge#options:rangeToolTip) +The start and end values of the range separated by a hyphen. +### Related Topics +- [Configuring the Tooltips (igLinearGauge)](/configuring/elements/iglineargauge-configuring-the-tooltips.mdx) +##Default Configuration +By default, the `igLinearGauge` control is oriented horizontally. It displays with a scale starting at 0 and ending at 100. The major tick marks of the control are located at an interval of 10 and the count of minor tick marks between each pair of major tick marks is 3. There is no title/subtitle displayed, the background color is a variety of light grey. The border is 2 pixels thick colored in dark grey. No needle or ranges are displayed. Animated transitions are disabled. +The following picture demonstrates an `igLinearGauge` displayed with default settings. +![](images/igLinearGauge_Overview_13.png) +##Requirements +The `igLinearGauge` control is a jQuery UI widget and, therefore, depends on the jQuery and jQuery UI libraries. References to these resources are needed nevertheless, in spite of the use of pure jQuery or Ignite UI for ASP.NET MVC. The `Infragistics.Web.Mvc` assembly is required when the control is used in the context of ASP.NET MVC. +In order for the linear gauge to display the needle, the [value]({environment:jQueryApiUrl}/ui.igLinearGauge#options:value) property has to be set. +For the full requirements listing, refer to the [Adding igLinearGauge](/adding/iglineargauge-adding.mdx) topic. +##Related Content +### Topics +The following topics provide additional information related to this topic. +- [Adding igLinearGauge](/adding/iglineargauge-adding.mdx): This topic explains how to add the `igLinearGauge` control to an Ignite UI for jQuery application. +- [Configuring igLinearGauge](/configuring/iglineargauge-configuring.mdx): This is a group of topics explaining how to configure the various aspects of the `igLinearGauge` control including its orientation and direction and visual elements. +- [jQuery and MVC API Links (igLinearGauge)](/iglineargauge-api-links.mdx): This topic provides reference information about the key classes and properties related to the `igLinearGauge` control. +- [Known Issues and Limitations (igLinearGauge)](/iglineargauge-known-issues-and-limitations.mdx): This topic provides information about the known issues and limitations of the `igLinearGauge` control. +### Samples +The following samples provide additional information related to this topic. +- [Basic Configuration]({environment:SamplesUrl}/linear-gauge/basic-configuration): This sample demonstrates a simple configuration of the `igLinearGauge` control. +- [Animated Transitions]({environment:SamplesUrl}/linear-gauge/animated-transitions): This sample demonstrates animated transitions between different sets of settings in the `igLinearGauge` control. diff --git a/package-lock.json b/package-lock.json index 4412725719..7096b355c8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,8 @@ "version": "0.1.0", "workspaces": [ "docs/angular", - "docs/xplat" + "docs/xplat", + "docs/jquery" ], "dependencies": { "@astrojs/check": "^0.9.8", @@ -74,6 +75,44 @@ "yarn": ">=1" } }, + "docs/jquery": { + "name": "jquery-docs", + "version": "1.0.0", + "dependencies": { + "@astrojs/mdx": "^5.0.0", + "@astrojs/starlight": "^0.38.3", + "astro": "^6.1.6", + "docs-template": "file:../../", + "sharp": "^0.34.2" + }, + "devDependencies": { + "cross-env": "^7.0.3", + "js-yaml": "^4.1.1", + "sass-embedded": "^1.98.0" + }, + "engines": { + "node": ">=22.12.0" + } + }, + "docs/jquery/node_modules/cross-env": { + "version": "7.0.3", + "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz", + "integrity": "sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==", + "dev": true, + "license": "MIT", + "dependencies": { + "cross-spawn": "^7.0.1" + }, + "bin": { + "cross-env": "src/bin/cross-env.js", + "cross-env-shell": "src/bin/cross-env-shell.js" + }, + "engines": { + "node": ">=10.14", + "npm": ">=6", + "yarn": ">=1" + } + }, "docs/xplat": { "name": "xplat-docs", "version": "0.0.1", @@ -5819,6 +5858,10 @@ "url": "https://github.com/sponsors/panva" } }, + "node_modules/jquery-docs": { + "resolved": "docs/jquery", + "link": true + }, "node_modules/js-yaml": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz", diff --git a/package.json b/package.json index 4d35ae5606..fc43aa2f2d 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,8 @@ "version": "0.1.0", "workspaces": [ "docs/angular", - "docs/xplat" + "docs/xplat", + "docs/jquery" ], "description": "Shared Astro + Starlight documentation framework for IgniteUI library docs", "exports": { @@ -12,6 +13,7 @@ "./sidebar": "./src/sidebar.ts", "./platform": "./src/platform.ts", "./content": "./src/content-helper.ts", + "./normalize-mdx": "./src/normalize-mdx.ts", "./lib/platform-context": "./src/lib/platform-context.ts", "./components/mdx/ApiRef.astro": "./src/components/mdx/ApiRef.astro", "./components/mdx/ApiLink.astro": "./src/components/mdx/ApiLink.astro", @@ -106,10 +108,27 @@ "xplat:build-production:angular:jp": "npm run build-production:angular:jp --prefix docs/xplat", "xplat:build-production:react:jp": "npm run build-production:react:jp --prefix docs/xplat", "xplat:build-production:webcomponents:jp": "npm run build-production:webcomponents:jp --prefix docs/xplat", - "xplat:build-production:blazor:jp": "npm run build-production:blazor:jp --prefix docs/xplat" + "xplat:build-production:blazor:jp": "npm run build-production:blazor:jp --prefix docs/xplat", + + "jquery:dev": "npm run dev --prefix docs/jquery", + "jquery:dev:en": "npm run dev:en --prefix docs/jquery", + "jquery:dev:jp": "npm run dev:jp --prefix docs/jquery", + "jquery:build": "npm run build --prefix docs/jquery", + "jquery:build:en": "npm run build:en --prefix docs/jquery", + "jquery:build:jp": "npm run build:jp --prefix docs/jquery", + "jquery:build-staging": "npm run build-staging --prefix docs/jquery", + "jquery:build-staging:en": "npm run build-staging:en --prefix docs/jquery", + "jquery:build-staging:jp": "npm run build-staging:jp --prefix docs/jquery", + "jquery:build-production": "npm run build-production --prefix docs/jquery", + "jquery:build-production:en": "npm run build-production:en --prefix docs/jquery", + "jquery:build-production:jp": "npm run build-production:jp --prefix docs/jquery", + "jquery:preview": "npm run preview --prefix docs/jquery", + "jquery:preview:en": "npm run preview:en --prefix docs/jquery", + "jquery:preview:jp": "npm run preview:jp --prefix docs/jquery" }, "dependencies": { "@astrojs/check": "^0.9.8", + "github-slugger": "^2.0.0", "gray-matter": "^4.0.3", "js-yaml": "^4.1.1", "jsdom": "^29.0.1", diff --git a/scripts/MIGRATION.md b/scripts/MIGRATION.md new file mode 100644 index 0000000000..cd5a10200b --- /dev/null +++ b/scripts/MIGRATION.md @@ -0,0 +1,174 @@ +# DocFX → Astro/Starlight Migration Scripts + +Migration pipeline for converting DocFX-style documentation (`.md` with `NN_` prefixed folders, `%%Token%%` markers, `.html` cross-references) into Astro/Starlight-compatible MDX. + +## Quick Start + +```bash +# Dry-run (preview changes, nothing written) +node scripts/migrate-jquery-pipeline.mjs + +# Apply all steps +node scripts/migrate-jquery-pipeline.mjs --apply + +# Use with a different library +node scripts/migrate-jquery-pipeline.mjs --apply --topics=docs/other/src/content/en/topics --toc=docs/other/toc.json +``` + +## Prerequisites + +- Node.js v18+ +- Install dependencies: `npm install` (needs `github-slugger`, `@mdx-js/mdx`) +- Source files placed in `docs/{lib}/src/content/en/topics/` with original DocFX folder structure +- `docs/{lib}/src/content/en/environment.json` with token values (see [Environment Tokens](#environment-tokens)) + +## Pipeline Steps + +Run in this order. The pipeline script (`migrate-jquery-pipeline.mjs`) orchestrates all 11 steps automatically. + +### Step 1: Generate TOC +```bash +node scripts/gen-jquery-toc.mjs [--topics=] [--toc=] +``` +Generates `toc.json` from the file tree. **Must run before rename** — uses `NN_` numeric prefixes for ordering and reads H1 headings for titles. + +### Step 2: Convert DocFX Tokens +```bash +node scripts/convert-docfx-tokens.mjs [--apply] [--topics=] +``` +Converts `%%Token%%` → `{environment:Token}` in MDX content (entity-encoded so MDX doesn't parse `{` as JSX). Resolves tokens to literal values in `toc.json` names using `environment.json`. + +### Step 3: Convert HTML Tables +```bash +node scripts/convert-html-tables.mjs [--apply] +``` +Converts simple HTML `` blocks to Markdown pipe tables. Skips tables with `colspan`/`rowspan` (those are handled at build time by `normalize-mdx.ts`). + +### Step 4: Fix .html Links +```bash +node scripts/fix-html-links.mjs [--apply] [--topics=] +``` +Converts `.html` cross-references to `.mdx` relative paths. Uses `"fileName"` from DocFX metadata blocks to build a lookup map. **Must run before Step 5 (rename)**. + +### Step 5: Rename Topics +```bash +node scripts/rename-jquery-topics.mjs [--apply] [--topics=] [--toc=] +``` +Strips `NN_` numeric prefixes from files/folders, slugifies names, updates `toc.json` and inline links. Core renaming step. + +### Step 6: Fix Pseudo-HTML +```bash +node scripts/fix-pseudo-html.mjs +``` +Escapes pseudo-HTML tokens (``, ``) and curly braces for MDX compatibility. Always writes (no `--apply` flag needed). + +### Step 7: Fix All MDX Issues +```bash +node scripts/fix-all-mdx.mjs [--apply] [--topics=] +``` +Comprehensive MDX fixer (11 fix functions): removes orphaned HTML table fragments, strips inline `` anchors, escapes pseudo-HTML in prose, fixes `
  • ` in table cells, closes unclosed tables, escapes braces outside code fences, and more. Validates each file with `@mdx-js/mdx` after fixing. + +### Step 8: Fix Broken Images +```bash +node scripts/fix-broken-images-all.mjs [topics-dir] +``` +Scans all MDX files for broken image references (`![](images/...)` pointing to non-existent files). Builds an index of all images in the topics tree, then: +- Rewrites broken paths to the closest matching image +- Handles case-insensitive filename matching (`.PNG` vs `.png`) +- Comments out truly missing images so the build doesn't fail + +To detect broken images without fixing: +```bash +node scripts/find-broken-images.mjs [--topics=] +``` + +### Step 9: Fix Internal Links +```bash +node scripts/fix-internal-links.mjs [--apply] [--topics=] +``` +Resolves old-style flat link names (e.g., `/igdatachart-adding.mdx`) to their correct slugified paths (e.g., `/controls/igdatachart/adding`). Handles: +- Old numbered-prefix paths (`02_Controls/igGrid/...`) +- `.mdx`/`.md` extension stripping (Starlight uses slug routing) +- Bare names and `./` relative links +- `//` and `///` broken absolute prefixes +- Deep multi-segment name decomposition (maps folder+stem combinations) + +### Step 10: Add Slugs to toc.json +```bash +node scripts/add-slugs-to-toc.mjs [--topics=] [--toc=] +``` +Reads each MDX file referenced in `toc.json` and extracts its slug (from frontmatter `slug:` or DocFX `"fileName"` metadata). Adds a `"slug"` field to each toc.json entry. This lets `sidebar.ts` and `integration.ts` resolve slugs without reading every source file at build time. + +### Step 11: Validate MDX +```bash +node scripts/validate-mdx.mjs [topics-dir] +``` +Validates all MDX files compile without errors using `@mdx-js/mdx`. Reports errors grouped by type. + +## Standalone Utility Scripts + +These scripts are **not part of the pipeline** but are useful for specific tasks: + +| Script | Purpose | +|--------|---------| +| `normalize-mdx.mjs` | CLI wrapper for `src/normalize-mdx.ts`. Normalizes legacy DocFX MDX (strips metadata, generates frontmatter with slug, escapes braces, fixes HTML tables). Runs automatically at build time via `normalizeMdxDir()` in `astro.config.ts`. | +| `sort-jquery-toc.mjs` | Reorders `toc.json` to match canonical order from original `NN_`-prefixed structure. | +| `fix-nested-lists.mjs` | Fixes nested list indentation (DocFX 2-space → MDX 4-space). | + +## Using with Another Library + +All scripts accept `--topics=` to override the default jQuery topics path: + +```bash +# Example: migrating a "blazor" library +TOPICS=docs/blazor/src/content/en/topics +TOC=docs/blazor/toc.json + +node scripts/migrate-jquery-pipeline.mjs --apply --topics=$TOPICS --toc=$TOC + +# Or run individual steps: +node scripts/gen-jquery-toc.mjs --topics=$TOPICS --toc=$TOC +node scripts/convert-docfx-tokens.mjs --apply --topics=$TOPICS +node scripts/convert-html-tables.mjs $TOPICS --apply +node scripts/fix-html-links.mjs --apply --topics=$TOPICS +node scripts/rename-jquery-topics.mjs --apply --topics=$TOPICS --toc=$TOC +node scripts/fix-pseudo-html.mjs $TOPICS +node scripts/fix-all-mdx.mjs --apply --topics=$TOPICS +node scripts/fix-broken-images-all.mjs $TOPICS +node scripts/fix-internal-links.mjs --apply --topics=$TOPICS +node scripts/add-slugs-to-toc.mjs --topics=$TOPICS --toc=$TOC +node scripts/validate-mdx.mjs $TOPICS +``` + +## Environment Tokens + +Create `docs/{lib}/src/content/en/environment.json` with token values for each environment: + +```json +{ + "development": { + "ProductName": "My Product", + "SamplesUrl": "https://dev.samples.example.com" + }, + "staging": { ... }, + "production": { ... } +} +``` + +Tokens are used as `{environment:TokenName}` in MDX content (entity-encoded) and resolved at build time by the `remark-docfx` plugin. + +## Build-Time Processing + +These transformations happen automatically during `npm run build` (no scripts needed): + +1. **`normalizeMdxDir()`** (in `astro.config.ts`) — strips DocFX metadata blocks, generates frontmatter with `slug:` from `"fileName"`, escapes `{` to `{`, fixes orphaned HTML table tags, rewrites old numbered-folder image paths. +2. **`remark-docfx`** plugin — resolves `{environment:Token}` to values from `environment.json`, rewrites internal `.mdx` links using a slug map, adds sample widgets. +3. **`sidebar.ts`** — builds Starlight sidebar from `toc.json`, reads `slug` field directly (added by Step 10). +4. **`integration.ts`** — generates `llms.txt` and per-page `.md` files for LLM crawlers, using a slug→file map that handles custom slugs. + +## Key Constraints + +- **MDX braces**: `{` in prose/table cells causes parse errors. All `{` outside code fences must be escaped to `{` / `}`. The `remark-docfx` plugin handles entity-encoded `{environment:...}` tokens. +- **No `.mdx` in links**: Starlight uses slug-based routing. Links should be `/path/to/page`, not `/path/to/page.mdx`. +- **Absolute links**: Use `/controls/igdatachart/adding` format (from content root). +- **Slugs**: Pages can have flat slugs (from DocFX `"fileName"`) that differ from their filesystem path. The slug is stored in toc.json and used by the sidebar and link resolver. diff --git a/scripts/add-slugs-to-toc.mjs b/scripts/add-slugs-to-toc.mjs new file mode 100644 index 0000000000..475f8160c9 --- /dev/null +++ b/scripts/add-slugs-to-toc.mjs @@ -0,0 +1,90 @@ +#!/usr/bin/env node +/** + * add-slugs-to-toc.mjs + * + * Reads toc.json and for each entry with an `href`, reads the source file + * to extract the slug (from frontmatter `slug:` or DocFX metadata `"fileName"`). + * Adds a `"slug"` field to each toc.json entry so that sidebar.ts and + * integration.ts can resolve slugs without reading every source file. + * + * This script should run AFTER the migration pipeline (after rename, after + * normalize-mdx has added frontmatter with slugs). + * + * Usage: + * node scripts/add-slugs-to-toc.mjs # jQuery default + * node scripts/add-slugs-to-toc.mjs --topics= --toc= + */ +import fs from 'node:fs'; +import path from 'node:path'; +import { fileURLToPath } from 'node:url'; + +const __dirname = path.dirname(fileURLToPath(import.meta.url)); +const ROOT = path.resolve(__dirname, '..'); + +const topicsArg = process.argv.find(a => a.startsWith('--topics=')); +const tocArg = process.argv.find(a => a.startsWith('--toc=')); + +const TOPICS = topicsArg + ? path.resolve(topicsArg.slice('--topics='.length)) + : path.join(ROOT, 'docs/jquery/src/content/en/topics'); + +const TOC_PATH = tocArg + ? path.resolve(tocArg.slice('--toc='.length)) + : path.join(ROOT, 'docs/jquery/toc.json'); + +function getSlugFromFile(filePath) { + try { + let content = fs.readFileSync(filePath, 'utf-8'); + // Strip BOM if present + if (content.charCodeAt(0) === 0xFEFF) content = content.slice(1); + // Check frontmatter slug + const fmMatch = content.match(/^---\r?\n([\s\S]*?)\r?\n---/); + if (fmMatch) { + const slugMatch = fmMatch[1].match(/^slug:\s*(.+)$/m); + if (slugMatch) return slugMatch[1].trim(); + } + // Check DocFX metadata fileName + const fnMatch = content.match(/"fileName"\s*:\s*"([^"]+)"/); + if (fnMatch) return fnMatch[1]; + } catch { /* file not readable */ } + return null; +} + +function resolveFile(href) { + const full = path.join(TOPICS, href); + if (fs.existsSync(full)) return full; + // Try swapping .mdx/.md + if (href.endsWith('.mdx')) { + const alt = path.join(TOPICS, href.slice(0, -4) + '.md'); + if (fs.existsSync(alt)) return alt; + } else if (href.endsWith('.md')) { + const alt = path.join(TOPICS, href.slice(0, -3) + '.mdx'); + if (fs.existsSync(alt)) return alt; + } + return null; +} + +function processItems(items) { + let added = 0; + for (const item of items) { + if (item.href) { + const file = resolveFile(item.href); + if (file) { + const slug = getSlugFromFile(file); + if (slug) { + item.slug = slug; + added++; + } + } + } + if (item.items) { + added += processItems(item.items); + } + } + return added; +} + +const toc = JSON.parse(fs.readFileSync(TOC_PATH, 'utf-8')); +const added = processItems(toc); +fs.writeFileSync(TOC_PATH, JSON.stringify(toc, null, 2) + '\n', 'utf-8'); +console.log(`Added ${added} slugs to ${TOC_PATH}`); diff --git a/scripts/convert-docfx-tokens.mjs b/scripts/convert-docfx-tokens.mjs new file mode 100644 index 0000000000..7cc2b7cad1 --- /dev/null +++ b/scripts/convert-docfx-tokens.mjs @@ -0,0 +1,130 @@ +#!/usr/bin/env node +/** + * convert-docfx-tokens.mjs + * + * Converts legacy DocFX %%Token%% placeholders to {environment:Token} format + * understood by the remark-docfx plugin at build time. + * + * Also replaces %%Token%% in toc.json *names* with their literal resolved values + * (sidebar display text should not contain build-time tokens). + * + * Usage: + * node scripts/convert-docfx-tokens.mjs # dry-run + * node scripts/convert-docfx-tokens.mjs --apply # apply changes + */ + +import fs from 'node:fs'; +import path from 'node:path'; +import { fileURLToPath } from 'node:url'; + +const __dirname = path.dirname(fileURLToPath(import.meta.url)); +const ROOT = path.resolve(__dirname, '..'); + +const topicsArg = process.argv.find(a => a.startsWith('--topics=')); +const tocArg = process.argv.find(a => a.startsWith('--toc=')); +const TOPICS_DIR = topicsArg + ? path.resolve(ROOT, topicsArg.slice('--topics='.length)) + : path.join(ROOT, 'docs/jquery/src/content/en/topics'); +const TOC_JSON = tocArg + ? path.resolve(ROOT, tocArg.slice('--toc='.length)) + : path.join(ROOT, 'docs/jquery/toc.json'); + +// Resolve environment.json from the topics directory (supports ja, en, etc.) +const ENV_JSON = fs.existsSync(path.join(TOPICS_DIR, 'environment.json')) + ? path.join(TOPICS_DIR, 'environment.json') + : path.join(ROOT, 'docs/jquery/src/content/en/environment.json'); + +const APPLY = process.argv.includes('--apply'); + +// ─── Token definitions (resolved values for toc.json names) ────────────────── +// These are loaded from environment.json production section. +function loadTokenValues() { + try { + const data = JSON.parse(fs.readFileSync(ENV_JSON, 'utf-8')); + return data.production || data.development || {}; + } catch { + return {}; + } +} + +// ─── The %%Token%% pattern ─────────────────────────────────────────────────── +const TOKEN_RE = /%%(\w+)%%/g; + +// ─── Walk MDX files ────────────────────────────────────────────────────────── +function walkMdx(dir) { + const results = []; + for (const entry of fs.readdirSync(dir, { withFileTypes: true })) { + const full = path.join(dir, entry.name); + if (entry.isDirectory()) { + results.push(...walkMdx(full)); + } else if (entry.name.endsWith('.mdx') || entry.name.endsWith('.md')) { + results.push(full); + } + } + return results; +} + +// ─── Convert content files: %%Token%% → {environment:Token} ───────────────── +function convertContentTokens() { + const files = walkMdx(TOPICS_DIR); + let totalReplacements = 0; + let filesChanged = 0; + + for (const file of files) { + const original = fs.readFileSync(file, 'utf-8'); + const converted = original.replace(TOKEN_RE, (_match, key) => `{environment:${key}}`); + + if (converted !== original) { + const count = (original.match(TOKEN_RE) || []).length; + totalReplacements += count; + filesChanged++; + const rel = path.relative(TOPICS_DIR, file); + if (!APPLY) { + console.log(` [dry-run] ${rel}: ${count} token(s)`); + } else { + fs.writeFileSync(file, converted, 'utf-8'); + console.log(` ✓ ${rel}: ${count} token(s) converted`); + } + } + } + + console.log(`\nContent tokens: ${totalReplacements} replacements across ${filesChanged} files`); +} + +// ─── Convert toc.json: resolve %%Token%% in "name" fields to literal values ─ +function convertTocTokens() { + if (!fs.existsSync(TOC_JSON)) { + console.log(' [skip] toc.json not found'); + return; + } + + const values = loadTokenValues(); + const original = fs.readFileSync(TOC_JSON, 'utf-8'); + + // Replace %%Token%% with resolved value (or leave as-is if unknown). + const converted = original.replace(TOKEN_RE, (_match, key) => { + if (values[key]) return values[key]; + console.warn(` [warn] Unknown token in toc.json: %%${key}%%`); + return _match; + }); + + if (converted !== original) { + const count = (original.match(TOKEN_RE) || []).length; + if (!APPLY) { + console.log(` [dry-run] toc.json: ${count} token(s)`); + } else { + fs.writeFileSync(TOC_JSON, converted, 'utf-8'); + console.log(` ✓ toc.json: ${count} token(s) resolved`); + } + } else { + console.log(' toc.json: no tokens found'); + } +} + +// ─── Main ──────────────────────────────────────────────────────────────────── +console.log(`\n=== convert-docfx-tokens [${APPLY ? 'APPLY' : 'DRY-RUN'}] ===\n`); +console.log('Phase 1: Content files (%%Token%% → {environment:Token})'); +convertContentTokens(); +console.log('\nPhase 2: toc.json (%%Token%% → literal values)'); +convertTocTokens(); +console.log('\nDone.\n'); diff --git a/scripts/convert-html-tables.mjs b/scripts/convert-html-tables.mjs new file mode 100644 index 0000000000..6d026b452b --- /dev/null +++ b/scripts/convert-html-tables.mjs @@ -0,0 +1,170 @@ +#!/usr/bin/env node +/** + * convert-html-tables.mjs + * + * Converts HTML
    • blocks in MDX files to Markdown pipe tables. + * Tables with colspan/rowspan are left as HTML (fix-pseudo-html handles JSX compat). + * Cell content:
    → ", ", HTML tags stripped, whitespace normalized. + * + * Usage: + * node scripts/convert-html-tables.mjs [dir] # dry-run + * node scripts/convert-html-tables.mjs [dir] --apply # apply changes + */ + +import fs from 'node:fs'; +import path from 'node:path'; +import { fileURLToPath } from 'node:url'; + +const __dirname = path.dirname(fileURLToPath(import.meta.url)); +const ROOT = path.resolve(__dirname, '..'); + +const dirArg = process.argv.find(a => !a.startsWith('-') && a !== process.argv[0] && a !== process.argv[1]); +const TOPICS_DIR = dirArg + ? path.resolve(dirArg) + : path.join(ROOT, 'docs/jquery/src/content/en/topics'); + +const APPLY = process.argv.includes('--apply'); + +// ─── HTML table regex ──────────────────────────────────────────────────────── +// Matches
    ...
    blocks (greedy-minimal inner match). +const TABLE_RE = /]*>([\s\S]*?)<\/table>/gi; + +// Check for colspan or rowspan — these can't be converted to MD pipe tables. +const COMPLEX_RE = /\b(colspan|rowspan)\s*=/i; + +// ─── Strip HTML tags from cell content ─────────────────────────────────────── +function stripTags(html) { + return html + .replace(//gi, ' \u2502 ') //
    → separator + .replace(/]*alt="([^"]*)"[^>]*>/gi, '$1') // x → x + .replace(/]*>/gi, '') // without alt + .replace(/]*href="([^"]*)"[^>]*>([\s\S]*?)<\/a>/gi, '[$2]($1)') //     → [text](href) + .replace(/([\s\S]*?)<\/code>/gi, '`$1`') // → backtick + .replace(/<\/?[a-z][^>]*>/gi, '') // strip remaining tags + .replace(/ /gi, ' ') + .replace(/</g, '<') + .replace(/>/g, '>') + .replace(/&/g, '&') + .replace(/"/g, '"') + .replace(/&#\d+;/g, '') // numeric entities + .replace(/\s+/g, ' ') // collapse whitespace + .replace(/\s*\u2502\s*/g, ', ') // clean up br separators + .replace(/,\s*$/, '') // trailing comma + .replace(/^\s*,\s*/, '') // leading comma + .trim(); +} + +// ─── Extract rows from a or block ──────────────────────────── +function extractRows(sectionHtml) { + const rows = []; + const rowRe = /]*>([\s\S]*?)<\/tr>/gi; + let rowMatch; + while ((rowMatch = rowRe.exec(sectionHtml)) !== null) { + const cells = []; + const cellRe = /<(?:td|th)[^>]*>([\s\S]*?)<\/(?:td|th)>/gi; + let cellMatch; + while ((cellMatch = cellRe.exec(rowMatch[1])) !== null) { + cells.push(stripTags(cellMatch[1])); + } + if (cells.length > 0) rows.push(cells); + } + return rows; +} + +// ─── Convert a single HTML table to Markdown ───────────────────────────────── +function tableToMarkdown(tableHtml) { + // Skip complex tables. + if (COMPLEX_RE.test(tableHtml)) return null; + + const theadMatch = tableHtml.match(/]*>([\s\S]*?)<\/thead>/i); + const tbodyMatch = tableHtml.match(/]*>([\s\S]*?)<\/tbody>/i); + + let headerRows = theadMatch ? extractRows(theadMatch[1]) : []; + let bodyRows = tbodyMatch ? extractRows(tbodyMatch[1]) : []; + + // If no thead, try extracting all rows and use first as header. + if (headerRows.length === 0 && bodyRows.length === 0) { + const allRows = extractRows(tableHtml); + if (allRows.length < 2) return null; + headerRows = [allRows[0]]; + bodyRows = allRows.slice(1); + } + + if (headerRows.length === 0 && bodyRows.length === 0) return null; + + // Use first header row; if no header, synthesize empty headers. + const headers = headerRows[0] || bodyRows[0].map(() => ''); + const colCount = headers.length; + + // Ensure all rows have the same number of columns. + const normalize = (row) => { + while (row.length < colCount) row.push(''); + return row.slice(0, colCount); + }; + + // Escape pipe characters in cell content. + const esc = (s) => s.replace(/\|/g, '\\|'); + + // Build markdown. + const lines = []; + lines.push('| ' + normalize(headers).map(esc).join(' | ') + ' |'); + lines.push('| ' + headers.map(() => '---').join(' | ') + ' |'); + for (const row of bodyRows) { + lines.push('| ' + normalize(row).map(esc).join(' | ') + ' |'); + } + + return lines.join('\n'); +} + +// ─── Walk files ────────────────────────────────────────────────────────────── +function walkMdx(dir) { + const results = []; + for (const entry of fs.readdirSync(dir, { withFileTypes: true })) { + const full = path.join(dir, entry.name); + if (entry.isDirectory()) { + results.push(...walkMdx(full)); + } else if (entry.name.endsWith('.mdx') || entry.name.endsWith('.md')) { + results.push(full); + } + } + return results; +} + +// ─── Main ──────────────────────────────────────────────────────────────────── +console.log(`\n=== convert-html-tables [${APPLY ? 'APPLY' : 'DRY-RUN'}] ===\n`); + +const files = walkMdx(TOPICS_DIR); +let totalConverted = 0; +let totalSkipped = 0; +let filesChanged = 0; + +for (const file of files) { + const original = fs.readFileSync(file, 'utf-8'); + let changed = false; + + const converted = original.replace(TABLE_RE, (match) => { + const md = tableToMarkdown(match); + if (md) { + totalConverted++; + changed = true; + return '\n' + md + '\n'; + } + totalSkipped++; + return match; // leave complex tables as-is + }); + + if (changed) { + filesChanged++; + const rel = path.relative(TOPICS_DIR, file); + if (APPLY) { + fs.writeFileSync(file, converted, 'utf-8'); + console.log(` ✓ ${rel}`); + } else { + console.log(` [dry-run] ${rel}`); + } + } +} + +console.log(`\nConverted: ${totalConverted} tables in ${filesChanged} files`); +console.log(`Skipped (complex): ${totalSkipped} tables`); +console.log('Done.\n'); diff --git a/scripts/find-broken-images.mjs b/scripts/find-broken-images.mjs new file mode 100644 index 0000000000..21ef83c7c9 --- /dev/null +++ b/scripts/find-broken-images.mjs @@ -0,0 +1,41 @@ +import fs from 'fs'; +import path from 'path'; + +const topicsArg = process.argv.find(a => a.startsWith('--topics=')); +const TOPICS_DIR = topicsArg + ? topicsArg.slice('--topics='.length) + : 'docs/jquery/src/content/en/topics'; + +function walkMdx(dir) { + const results = []; + for (const entry of fs.readdirSync(dir, { withFileTypes: true })) { + const full = path.join(dir, entry.name); + if (entry.isDirectory()) results.push(...walkMdx(full)); + else if (entry.name.endsWith('.mdx') || entry.name.endsWith('.md')) results.push(full); + } + return results; +} + +const files = walkMdx(TOPICS_DIR); +const broken = []; + +for (const file of files) { + const content = fs.readFileSync(file, 'utf-8'); + const imgRegex = /!\[[^\]]*\]\(([^)]+\.(?:png|jpg|gif|svg|jpeg|webp))\)/gi; + let match; + while ((match = imgRegex.exec(content)) !== null) { + let imgPath = match[1].split('#')[0].split('?')[0]; + try { imgPath = decodeURIComponent(imgPath); } catch {} + if (imgPath.startsWith('http')) continue; + const resolved = path.resolve(path.dirname(file), imgPath); + if (!fs.existsSync(resolved)) { + broken.push({ file, img: imgPath, resolved }); + } + } +} + +console.log(`Broken image references: ${broken.length}`); +for (const b of broken) { + console.log(` ${path.relative(TOPICS_DIR, b.file)}`); + console.log(` -> ${b.img}`); +} diff --git a/scripts/fix-all-mdx.mjs b/scripts/fix-all-mdx.mjs new file mode 100644 index 0000000000..d0a26e60e1 --- /dev/null +++ b/scripts/fix-all-mdx.mjs @@ -0,0 +1,790 @@ +#!/usr/bin/env node +/** + * fix-all-mdx.mjs + * + * Comprehensive MDX fixer that processes all failing files. + * Applies normalization + targeted fixes, then writes the result. + * + * Strategy: For each file, apply normalizeMdxContent, then additional fixes: + * 1. Remove orphaned HTML table fragments (broken // blocks) + * 2. Strip inline anchors from markdown table cells + * 3. Replace
  • used as bullet markers in markdown table cells + * 4. Escape
    , , ,
    tags + */ +import fs from 'node:fs'; +import path from 'node:path'; +import { normalizeMdxContent } from '../src/normalize-mdx.ts'; +import { compile } from '@mdx-js/mdx'; + +const topicsArg = process.argv.find(a => a.startsWith('--topics=')); +const topicsDir = topicsArg + ? path.resolve(topicsArg.slice('--topics='.length)) + : path.resolve('docs/jquery/src/content/en/topics'); +const apply = process.argv.includes('--apply'); + +function walkMdx(d) { + const results = []; + for (const entry of fs.readdirSync(d, { withFileTypes: true })) { + const full = path.join(d, entry.name); + if (entry.isDirectory()) results.push(...walkMdx(full)); + else if (entry.name.endsWith('.mdx')) results.push(full); + } + return results; +} + +/** + * Remove broken HTML table blocks. + * A "broken" table block is one where
    • has mismatched internal structure. + * Strategy: Remove entire
    ...
    blocks that are broken, + * keeping only the text content. + */ +function removeBrokenTableBlocks(content) { + const lines = content.split('\n'); + const result = []; + let i = 0; + let inCode = false; + + while (i < lines.length) { + const trimmed = lines[i].trimStart(); + + if (trimmed.startsWith('```')) { + inCode = !inCode; + result.push(lines[i]); + i++; + continue; + } + + if (inCode) { + result.push(lines[i]); + i++; + continue; + } + + // Detect HTML table start + if (/^/gi) || []).length; + depth += opens - closes; + j++; + if (depth <= 0) break; + } + + // Check if this table is structurally sound + const block = tableLines.join('\n'); + const isValid = isTableValid(block); + + if (isValid) { + // Keep valid tables as-is + for (const l of tableLines) result.push(l); + } else { + // Extract meaningful content from broken table + const extracted = extractTableContent(tableLines); + if (extracted.length > 0) { + result.push(''); // blank line before + for (const l of extracted) result.push(l); + result.push(''); // blank line after + } + } + i = j; + continue; + } + + result.push(lines[i]); + i++; + } + + return result.join('\n'); +} + +function isTableValid(block) { + // Quick check: count opening/closing tags + const trOpen = (block.match(//gi) || []).length; + const tdOpen = (block.match(//gi) || []).length; + const thOpen = (block.match(//gi) || []).length; + const tbodyOpen = (block.match(//gi) || []).length; + const theadOpen = (block.match(//gi) || []).length; + + // Check basic matching + if (trOpen !== trClose) return false; + if (tdOpen !== tdClose) return false; + if (thOpen !== thClose) return false; + if (tbodyOpen !== tbodyClose) return false; + if (theadOpen !== theadClose) return false; + + // Check no tr directly after tbody/thead/tfoot without content + if (/<(?:tbody|thead|tfoot)\b[^>]*>\s*<\/tr>/i.test(block)) return false; + + return true; +} + +function extractTableContent(tableLines) { + // Extract text content from broken HTML table, converting to simple list format + const result = []; + let inCode = false; + + for (const line of tableLines) { + const trimmed = line.trim(); + + // Skip pure structural tags + if (/^<\/?(?:table|thead|tbody|tfoot|tr)\b[^>]*>\s*$/i.test(trimmed)) continue; + if (/^<\/?(?:table|thead|tbody|tfoot|tr)\b/i.test(trimmed) && + !/<(?:td|th)\b/i.test(trimmed)) continue; + + // Extract content from td/th cells + let text = trimmed; + text = text.replace(/<\/?(?:table|thead|tbody|tfoot|tr|td|th)\b[^>]*>/gi, ''); + text = text.trim(); + + if (text) { + result.push(text); + } + } + + return result; +} + +/** + * Fix
  • used as bullet-point markers in markdown table cells. + * Also strip orphaned and . + body = body.replace(/]*)>((?:[^<]|<(?!\/li>|\/ul>|\/ol>|ul\b|ol\b|li\b))*?)<\/(ul|ol)>/g, + (_: string, attrs: string, content: string, listTag: string) => + `${content}
    • `); + + // Close the last unclosed
  • in a sequence that doesn't end with
    • , + // , or . This handles
  • inside table cells where the closing + // tag is implied by the end of the cell/row. + // Look for
  • ... (end-of-line or | or or ) without a closing
    • . + body = body.replace(/]*)>((?:(?!<\/li>| { + // Don't double-close if already closed + if (match.trimEnd().endsWith('')) return match; + return `${content}`; + }); + + // Insert missing before the next where HTML5 allows implicit closing + // but MDX/JSX requires explicit tags. + let prevTr: string; + do { + prevTr = body; + body = body.replace( + /]*)>((?:(?!<\/tr>)[\s\S])*?)\n([ \t]*) + `${content}\n${indent}\n${indent} before , , , or + body = body.replace( + /]*)>((?:(?!<\/tr>)[\s\S])*?)\n([ \t]*)<\/(tbody|thead|tfoot|table)>/g, + (_: string, attrs: string, content: string, indent: string, closeTag: string) => + `${content}\n${indent}\n${indent}` + ); + + // Repair cells broken by prior runs (nested tables cut at first inner ). + body = repairBrokenOuterCells(body); + + // Fix multiline / and unmatched * in all table cells. + // Must run before prose splitting so the full open+close tag pair is visible. + body = fixTableCells(body); + + // Remove blank lines that break MDX's inline HTML block parsing. + // MDX ends an inline HTML block at a blank line, causing errors. + // 3a: blank line immediately after table/row opening tag + body = body.replace(/(<(?:table|thead|tbody|tfoot|tr)\b[^>]*>)\r?\n[ \t]*\r?\n/g, '$1\n'); + // 3b: blank lines between or and the next /// + body = body.replace(/(<\/(?:td|th)>[ \t]*)\r?\n(?:[ \t]*\r?\n)+([ \t]*<(?:\/tr|td|th|tr)\b)/g, '$1\n$2'); + + // MDX/JSX chokes when follows or on the same line because + // it conflicts with the paragraph flow context inside the cell. Put + // on its own line to prevent "Expected the closing tag …" errors. + body = body.replace(/<\/(td|th)>(\s*)<\/tr>/g, '\n'); + + // Escape HTML tags inside markdown table cells that cause MDX/JSX parse errors. + // Safe inline tags (br, code, em, strong, b, i, a, span, sub, sup) are kept. + // Block/complex tags (div, ul, ol, li, p, table, etc.) are escaped to <...>. + body = escapeHtmlInMarkdownTableCells(body); + + // Fix prose sections: pseudo-HTML escaping, void element self-closing, + // curly brace escaping. Skip code spans/fences. + const parts = body.split(/(```[\s\S]*?```|`[^`\n]+`)/g); + body = parts.map((part, i) => (i % 2 === 1 ? part : fixProseChunk(part))).join(''); + + // Escape orphaned table-element tags that appear outside blocks. + // After fixTableCells and table-to-markdown conversion, some closing tags + // (e.g. , , ,
    ) may be left without matching + // opening tags, causing MDX JSX parse errors. + body = escapeOrphanedTableTags(body); + + // Return null only if absolutely nothing changed. + if (body === source) return null; + return body; +} + +// --------------------------------------------------------------------------- +// Directory walker +// --------------------------------------------------------------------------- + +export interface NormalizeMdxDirResult { + processed: number; + skipped: number; + errors: number; +} + +/** + * Normalize all `.mdx` and `.md` files under `dir`, in place. + * + * @param dir Absolute path to the topics directory to process. + * @param verbose When true, logs each file action to stdout. + */ +export function normalizeMdxDir( + dir: string, + { verbose = false }: { verbose?: boolean } = {}, +): NormalizeMdxDirResult { + if (!fs.existsSync(dir)) { + console.warn(`[normalize-mdx] Directory not found, skipping: ${dir}`); + return { processed: 0, skipped: 0, errors: 0 }; + } + + let processed = 0; + let skipped = 0; + let errors = 0; + + function walk(current: string): void { + for (const entry of fs.readdirSync(current, { withFileTypes: true })) { + const full = path.join(current, entry.name); + if (entry.isDirectory()) { walk(full); continue; } + if (!entry.name.endsWith('.mdx') && !entry.name.endsWith('.md')) continue; + + try { + const raw = fs.readFileSync(full, 'utf8'); + // Strip UTF-8 BOM (\uFEFF) if present. + const source = raw.charCodeAt(0) === 0xFEFF ? raw.slice(1) : raw; + + const updated = normalizeMdxContent(source); + if (updated === null) { + skipped++; + if (verbose) console.log(` [SKIP] ${path.relative(dir, full)}`); + } else { + fs.writeFileSync(full, updated, 'utf8'); + processed++; + if (verbose) console.log(` [OK] ${path.relative(dir, full)}`); + } + } catch (err) { + errors++; + console.error( + ` [ERR] ${path.relative(dir, full)}: ${(err as Error).message}`, + ); + } + } + } + + walk(dir); + + return { processed, skipped, errors }; +} diff --git a/src/platform.ts b/src/platform.ts index f65bdd1c0a..29e23290e0 100644 --- a/src/platform.ts +++ b/src/platform.ts @@ -38,7 +38,8 @@ export type PlatformKey = | 'blazor' | 'web-components' | 'slingshot' - | 'appbuilder'; + | 'appbuilder' + | 'jquery'; /** Locale code for nav/API requests and UI string lookups. */ export type NavLang = 'en' | 'jp' | 'kr'; @@ -173,6 +174,7 @@ export const PLATFORM_DEFS: Record = { blazor: { navType: 'infragistics', styles: IG_STYLES, scripts: IG_SCRIPTS }, 'web-components': { navType: 'infragistics', styles: IG_STYLES, scripts: IG_SCRIPTS }, slingshot: { navType: 'infragistics', styles: IG_STYLES, scripts: IG_SCRIPTS }, + jquery: { navType: 'infragistics', styles: IG_STYLES, scripts: IG_SCRIPTS }, appbuilder: { navType: 'appbuilder', styles: APPBUILDER_STYLES, scripts: APPBUILDER_SCRIPTS }, }; @@ -210,6 +212,18 @@ export const IGDOCS_PLATFORMS: Record = { title: 'Ignite UI for Blazor', description: 'Component documentation for Ignite UI for Blazor.', }, + jQuery: { + lang: 'en', label: 'jQuery', key: 'jquery', devPort: 4335, + base: '/docs-jquery', + title: 'Ignite UI for jQuery', + description: 'Component documentation for Ignite UI for jQuery.', + }, + jQueryJP: { + lang: 'jp', label: 'jQuery', key: 'jquery', devPort: 4345, + base: '/docs-jquery', + title: 'Ignite UI for jQuery', + description: 'Component documentation for Ignite UI for jQuery.', + }, // Japanese AngularJP: { lang: 'jp', label: 'Angular', key: 'angular', devPort: 4341, @@ -274,6 +288,7 @@ export function getNavConfig(platform: string | null, lang = 'en'): NavConfig { case 'blazor': case 'web-components': case 'slingshot': + case 'jquery': return { navType: 'infragistics', navUrl: `${igBase}/navigation` }; default: return { navType: 'none', navUrl: null }; diff --git a/src/plugins/remark-docfx.ts b/src/plugins/remark-docfx.ts index 284b2d32d3..c391de14a8 100644 --- a/src/plugins/remark-docfx.ts +++ b/src/plugins/remark-docfx.ts @@ -12,6 +12,7 @@ import { visit } from 'unist-util-visit'; import fs from 'node:fs'; import path from 'node:path'; +import { walkDocsFiles } from '../llms.ts'; // ENV is loaded lazily the first time replaceEnvVars() is called — NOT at // module load time. Module-level code runs while the Astro config is being @@ -62,11 +63,63 @@ function loadEnv(): Record { return _ENV as Record; } -const ENV_PATTERN = /\{environment:(\w+)\}/g; +const ENV_PATTERN = /(?:\{|{)environment:(\w+)(?:\}|})/g; + +// --------------------------------------------------------------------------- +// Slug resolution map — lazily built once per DOCS_SOURCE_PATH. +// Maps various link forms to the canonical slug for each page. +// --------------------------------------------------------------------------- +let _slugMap: Map | null = null; +let _slugMapSourcePath: string | null = null; + +function getSlugMap(docsDir: string): Map { + if (_slugMap !== null && docsDir === _slugMapSourcePath) return _slugMap; + _slugMapSourcePath = docsDir; + _slugMap = new Map(); + + for (const entry of walkDocsFiles(docsDir)) { + const relLower = entry.relPath.toLowerCase(); + const basename = path.basename(relLower); + + if (entry.slug !== entry.relPath) { + // Custom slug (from frontmatter or DocFX metadata) + _slugMap.set(relLower, entry.slug); + if (!_slugMap.has(basename)) _slugMap.set(basename, entry.slug); + _slugMap.set(entry.slug, entry.slug); // identity mapping + } else { + // No slug override — Astro uses the file path as the route + if (!_slugMap.has(basename)) _slugMap.set(basename, relLower); + _slugMap.set(relLower, relLower); + } + } + + return _slugMap; +} /** - * Rewrite a relative .md link to a root-relative Astro URL. - * Absolute, root-relative, fragment-only, and protocol links are left untouched. + * Resolve a link path to the correct slug using the slug map. + * Tries exact path match, then basename-only match. + */ +function resolveSlug(linkPath: string, docsDir: string): string { + const map = getSlugMap(docsDir); + const normalized = linkPath.toLowerCase(); + + // Try exact match (full path) + if (map.has(normalized)) return map.get(normalized)!; + + // Try basename only (for flat fileName-based links) + const basename = normalized.split('/').pop() ?? normalized; + if (map.has(basename)) return map.get(basename)!; + + // Try each suffix — the link might include partial directory paths + // e.g. "/adding/igbulletgraph-adding" when file is at "controls/igbulletgraph/adding/adding" + // In this case we can't match, just return the original + return normalized; +} + +/** + * Rewrite a .md/.mdx link to a root-relative Astro URL. + * Handles both relative links and root-relative links. * @param url - Raw link URL from the markdown AST. * @param filePath - Absolute path of the current .md file. * @param docsDir - Absolute path to the docs root (DOCS_SOURCE_PATH). @@ -75,31 +128,45 @@ function rewriteMdLink(url: string, filePath: string, docsDir: string): string { if (!url) return url; if ( url.startsWith('http://') || url.startsWith('https://') || - url.startsWith('/') || url.startsWith('#') || url.startsWith('mailto:') + url.startsWith('#') || url.startsWith('mailto:') ) return url; + // Normalize multiple slashes (e.g. //// → /) + const cleaned = url.replace(/\/{2,}/g, '/'); + // Separate path from fragment / query-string suffix. - const hashIdx = url.indexOf('#'); - const qIdx = url.indexOf('?'); + const hashIdx = cleaned.indexOf('#'); + const qIdx = cleaned.indexOf('?'); const splitAt = hashIdx !== -1 ? hashIdx : qIdx !== -1 ? qIdx : -1; - let mdPath = splitAt !== -1 ? url.slice(0, splitAt) : url; - const suffix = splitAt !== -1 ? url.slice(splitAt) : ''; + let mdPath = splitAt !== -1 ? cleaned.slice(0, splitAt) : cleaned; + const suffix = splitAt !== -1 ? cleaned.slice(splitAt) : ''; + + // Only handle .md and .mdx links + if (!mdPath.endsWith('.md') && !mdPath.endsWith('.mdx')) return cleaned; - if (!mdPath.endsWith('.md')) return url; + const docsBase = (process.env.DOCS_BASE ?? '').replace(/\/$/, ''); + + // Root-relative links (start with /) + if (mdPath.startsWith('/')) { + // Strip leading / and extension + const linkPath = mdPath.slice(1).replace(/\.(mdx|md)$/i, ''); + const slug = resolveSlug(linkPath, docsDir); + return docsBase + '/' + slug + '/' + suffix; + } - // Resolve the link relative to the current file's directory. + // Relative links const fileDir = path.dirname(filePath); const resolved = path.resolve(fileDir, mdPath); - // Compute the slug: path relative to docsDir, forward slashes, no .md extension. - const rel = path.relative(docsDir, resolved).replace(/\\/g, '/'); - const slug = rel.endsWith('.md') ? rel.slice(0, -3) : rel; + // Compute the slug: path relative to docsDir, forward slashes, no extension. + const rel = path.relative(docsDir, resolved).replace(/\\/g, '/'); + const relNoExt = rel.replace(/\.(mdx|md)$/i, ''); + const slug = resolveSlug(relNoExt, docsDir); // Return a URL with the site base prepended so links remain correct when // the site is mounted at a sub-path (e.g. /docs-react-new/). // DOCS_BASE is set by createDocsSite() in integration.ts; it is empty in dev mode. - const docsBase = (process.env.DOCS_BASE ?? '').replace(/\/$/, ''); - return docsBase + '/' + slug.toLowerCase() + '/' + suffix; + return docsBase + '/' + slug + '/' + suffix; } export function replaceEnvVars(str: string): string { diff --git a/src/sidebar.ts b/src/sidebar.ts index 43d2cf20b5..f73f77d95d 100644 --- a/src/sidebar.ts +++ b/src/sidebar.ts @@ -18,6 +18,7 @@ import fs from 'node:fs'; import path from 'node:path'; import * as yaml from 'js-yaml'; +import { slug as githubSlug } from 'github-slugger'; // --------------------------------------------------------------------------- // Starlight sidebar types @@ -52,6 +53,7 @@ type SidebarEntry = SidebarLink | SidebarGroup; interface TocItem { name?: string; href?: string; + slug?: string; header?: boolean; items?: TocItem[]; new?: boolean; @@ -77,14 +79,55 @@ function docExists(docsDir: string, href: string, exclude: RegExp[]): boolean { return alt !== null && fs.existsSync(path.join(docsDir, alt)); } -function hrefToSlug(href: string): string { +function hrefToSlug(href: string, docsDir?: string): string { if (!href) return ''; - let slug = href + + // If docsDir is given, try to read a slug/fileName override from the file. + if (docsDir) { + const filePath = fs.existsSync(path.join(docsDir, href)) + ? path.join(docsDir, href) + : href.endsWith('.mdx') + ? (fs.existsSync(path.join(docsDir, href.slice(0, -4) + '.md')) + ? path.join(docsDir, href.slice(0, -4) + '.md') : null) + : href.endsWith('.md') + ? (fs.existsSync(path.join(docsDir, href.slice(0, -3) + '.mdx')) + ? path.join(docsDir, href.slice(0, -3) + '.mdx') : null) + : null; + if (filePath) { + try { + let content = fs.readFileSync(filePath, 'utf-8'); + // Strip UTF-8 BOM if present + if (content.charCodeAt(0) === 0xFEFF) content = content.slice(1); + // Check for frontmatter slug first + const fmMatch = content.match(/^---\r?\n([\s\S]*?)\r?\n---/); + if (fmMatch) { + const slugMatch = fmMatch[1].match(/^slug:\s*(.+)$/m); + if (slugMatch) return slugMatch[1].trim(); + } + // Check for DocFX metadata fileName (normalizeMdxContent will use it as slug) + const fnMatch = content.match(/"fileName"\s*:\s*"([^"]+)"/); + if (fnMatch) return fnMatch[1]; + } catch { /* fall through to path-based slug */ } + } + } + + // Strip extension, normalise separators to /, lowercase. + const withoutExt = href .replace(/\\/g, '/') .replace(/\.(md|mdx)$/i, '') .toLowerCase(); - slug = slug.replace(/\/index$/, ''); - return slug === 'index' ? '' : slug; + const withoutIndex = withoutExt.replace(/\/index$/, ''); + if (withoutIndex === 'index') return ''; + + // Apply the same per-segment github-slugger normalization that Astro uses + // when generating content collection entry IDs (see Astro content/utils.js). + // Use the stateless slug() function (not the GithubSlugger class) to avoid + // duplicate-counting across segments — e.g. 'controls/igbulletgraph/igbulletgraph' + // must stay as-is, not become 'controls/igbulletgraph/igbulletgraph-1'. + return withoutIndex + .split('/') + .map(segment => githubSlug(segment)) + .join('/'); } function convertTocItem(docsDir: string, item: TocItem, exclude: RegExp[]): SidebarEntry | null { @@ -93,7 +136,7 @@ function convertTocItem(docsDir: string, item: TocItem, exclude: RegExp[]): Side if (item.items && item.items.length > 0) { const group: SidebarGroup = { label: item.name, items: [], collapsed: true }; if (item.href && docExists(docsDir, item.href, exclude)) { - group.items.push({ label: 'Overview', slug: hrefToSlug(item.href) }); + group.items.push({ label: 'Overview', slug: item.slug || hrefToSlug(item.href, docsDir) }); } for (const child of item.items) { const entry = convertTocItem(docsDir, child, exclude); @@ -104,7 +147,7 @@ function convertTocItem(docsDir: string, item: TocItem, exclude: RegExp[]): Side if (item.href) { if (!docExists(docsDir, item.href, exclude)) return null; - const entry: SidebarLink = { label: item.name, slug: hrefToSlug(item.href) }; + const entry: SidebarLink = { label: item.name, slug: item.slug || hrefToSlug(item.href, docsDir) }; // Status badge — only one slot available in Starlight, priority order: if (item.new) entry.badge = { text: 'New', variant: 'success' }; else if (item.preview) entry.badge = { text: 'Preview', variant: 'caution' }; @@ -151,7 +194,7 @@ export function buildSidebarFromToc({ tocPath, docsDir, exclude = [] }: BuildSid if (currentGroup) sidebar.push(currentGroup); currentGroup = { label: item.name!, items: [] }; if (item.href && docExists(docsDir, item.href, exclude)) { - currentGroup.items.push({ label: 'Overview', slug: hrefToSlug(item.href) }); + currentGroup.items.push({ label: 'Overview', slug: hrefToSlug(item.href, docsDir) }); } continue; }