From daf197f1f228fb6fd16ee0a5e02dec902a771f83 Mon Sep 17 00:00:00 2001 From: dobromirts Date: Tue, 28 Apr 2026 16:16:22 +0300 Subject: [PATCH] Fix jquery headings --- .../angularjs-samples.mdx | 52 +++---- ...and-advanced-templating-with-angularjs.mdx | 30 ++-- .../using-ignite-ui-with-angularjs.mdx | 42 +++--- .../igniteui-for-mvc-known-issues.mdx | 6 +- .../mvcscaffolding/mvc-scaffolding.mdx | 2 +- .../using-ignite-ui-tag-helpers.mdx | 6 +- ...niteui-controls-in-aspnet-core-project.mdx | 10 +- .../word-about-infragistics-word-library.mdx | 8 +- .../word-add-table-to-word-document.mdx | 10 +- ...d-document-using-object-model-approach.mdx | 20 +-- .../igbulletgraph/adding/to-an-html-page.mdx | 24 +-- .../adding/using-the-mvc-helper.mdx | 24 +-- .../controls/igbulletgraph/api-links.mdx | 2 +- .../elements/comparative-ranges.mdx | 16 +- .../configuring/elements/scale/the-scale.mdx | 64 ++++---- .../configuring/elements/the-background.mdx | 14 +- .../elements/the-comparative-marker.mdx | 16 +- .../elements/the-performance-bar.mdx | 16 +- .../configuring/elements/the-tooltips.mdx | 44 +++--- .../the-orientation-and-direction.mdx | 28 ++-- .../known-issues-and-limitations.mdx | 6 +- .../controls/igbulletgraph/overview.mdx | 40 ++--- .../callouts-layer.mdx | 2 +- .../category-highlight-layer.mdx | 2 +- .../category-tooltip-layer.mdx | 2 +- .../crosshairs-layer.mdx | 2 +- .../final-value-layer.mdx | 2 +- .../item-highlight-layer.mdx | 2 +- .../item-tooltip-layer.mdx | 2 +- .../igcategorychart/axes/axis-intervals.mdx | 6 +- .../igcategorychart/axes/axis-labels.mdx | 8 +- .../igcategorychart/axes/axis-tickmarks.mdx | 6 +- .../categorychart-configuring-axis-range.mdx | 6 +- .../categorychart-configuring-axis-titles.mdx | 6 +- ...categorychart-accessibility-compliance.mdx | 4 +- .../categorychart-api-overivew.mdx | 2 +- .../categorychart-binding-to-data.mdx | 22 +-- .../categorychart-chart-title-subtitle.mdx | 6 +- ...ategorychart-configuring-chart-markers.mdx | 8 +- .../igcategorychart/categorychart-styling.mdx | 28 ++-- ...categorychart-transition-in-animations.mdx | 12 +- .../igcombo/accessibility-compliance.mdx | 8 +- .../controls/igcombo/binding/cascading.mdx | 18 +-- .../controls/igcombo/binding/data-binding.mdx | 16 +- .../controls/igcombo/binding/to-data.mdx | 2 +- .../igcombo/configuring/angularjs-support.mdx | 8 +- .../igcombo/configuring/asp-net-mvc.mdx | 10 +- .../configuring/configure-auto-suggest.mdx | 30 ++-- .../configure-remote-filtering.mdx | 28 ++-- .../configuring/configure-selection.mdx | 44 +++--- .../igcombo/configuring/configuring.mdx | 2 +- .../controls/igcombo/configuring/grouping.mdx | 10 +- .../configuring/knockoutjs-support.mdx | 16 +- .../igcombo/configuring/load-on-demand.mdx | 22 +-- .../configuring/optimize-performance.mdx | 20 +-- .../configuring/typescript-support.mdx | 10 +- .../controls/igcombo/getting-started.mdx | 28 ++-- .../en/topics/controls/igcombo/igcombo.mdx | 4 +- .../controls/igcombo/keyboard-navigation.mdx | 14 +- .../controls/igcombo/known-limitations.mdx | 14 +- .../igcombo/migrating-to-the-new-combo.mdx | 8 +- .../en/topics/controls/igcombo/overview.mdx | 30 ++-- .../topics/controls/igcombo/using-themes.mdx | 8 +- .../igdatachart/accessibility-compliance.mdx | 6 +- .../en/topics/controls/igdatachart/adding.mdx | 22 +-- .../topics/controls/igdatachart/api-links.mdx | 6 +- .../animating/charts-in-aspnet-mvc.mdx | 20 +-- .../configuring/animating/charts.mdx | 4 +- .../configuring/animating/html.mdx | 20 +-- .../animating/motion-framework.mdx | 10 +- .../configuring/axis-intervals.mdx | 18 +-- .../igdatachart/configuring/axis-title.mdx | 14 +- .../chart-titles-and-subtitles.mdx | 16 +- .../igdatachart/configuring/configuring.mdx | 2 +- .../hover-interactions/callout-layer.mdx | 14 +- .../category-highlight-layer.mdx | 14 +- .../category-item-highlight-layer.mdx | 14 +- .../category-tooltip-layer.mdx | 14 +- .../hover-interactions/common-properties.mdx | 12 +- .../hover-interactions/crosshair-layer.mdx | 16 +- .../hover-interactions/final-value-layer.mdx | 14 +- .../hover-interactions/item-tooltip-layer.mdx | 14 +- .../igchart-transitions-in-animations.mdx | 26 ++-- .../configuring/knockoutjs-support.mdx | 12 +- .../configuring/navigation-features.mdx | 14 +- .../configuring/series-highlighting.mdx | 22 +-- .../shape-series/polygon-series.mdx | 14 +- .../shape-series/polyline-series.mdx | 14 +- .../igdatachart/configuring/timexaxis.mdx | 10 +- .../triangulation-series/area-series.mdx | 16 +- .../triangulation-series/contour-series.mdx | 18 +-- .../controls/igdatachart/databinding.mdx | 54 +++---- .../controls/igdatachart/known-issues.mdx | 8 +- .../controls/igdatachart/landing-page.mdx | 4 +- ...teractions-hover-interactions-overview.mdx | 26 ++-- .../igdatachart/overview/overview.mdx | 36 ++--- .../igdatachart/overview/series-types.mdx | 32 ++-- .../igdatachart/overview/visual-elements.mdx | 8 +- .../igdatachart/series-requirements.mdx | 12 +- .../igdatachart/styling/the-chart-series.mdx | 24 +-- .../controls/igdatachart/styling/themes.mdx | 42 +++--- .../igdialog/accessibility-compliance.mdx | 10 +- .../api-reference/css-classes-reference.mdx | 8 +- .../api-reference/event-reference.mdx | 12 +- .../api-reference/method-reference.mdx | 8 +- .../api-reference/property-reference.mdx | 10 +- .../igdialog/configuring/animations.mdx | 14 +- .../igdialog/configuring/external-page.mdx | 14 +- .../configuring/header-and-footer.mdx | 20 +-- .../configuring/maximize-and-minimize.mdx | 40 ++--- .../igdialog/configuring/modal-state.mdx | 16 +- .../igdialog/configuring/multiple-dialogs.mdx | 20 +-- .../controls/igdialog/configuring/pin.mdx | 34 ++--- .../igdialog/configuring/position.mdx | 18 +-- .../igdialog/configuring/show-and-hide.mdx | 24 +-- .../topics/controls/igdialog/known-issues.mdx | 6 +- .../en/topics/controls/igdialog/overview.mdx | 44 +++--- .../controls/igdialog/styling-and-theming.mdx | 14 +- .../accessibility-compliance.mdx | 4 +- .../adding/to-an-html-page.mdx | 22 +-- .../adding/using-the-mvc-helper.mdx | 22 +-- .../configuring-selection-and-explosion.mdx | 38 ++--- .../controls/igdoughnutchart/overview.mdx | 12 +- .../configuring-aspnet-mvc-validation.mdx | 26 ++-- .../configuring-igeditors-at-runtime.mdx | 22 +-- .../configuring-knockout-support-editors.mdx | 24 +-- .../config/editors-configure-editors.mdx | 2 +- .../igeditors/config/localizing-igeditors.mdx | 2 +- .../accessibility-compliance.mdx | 2 +- .../accessibility-compliance.mdx | 2 +- .../igcurrencyeditor/keyboard-navigation.mdx | 10 +- .../igdateeditor/accessibility-compliance.mdx | 2 +- .../igdateeditor/keyboard-navigation.mdx | 10 +- .../igeditors/igdateeditor/known-issues.mdx | 2 +- .../igeditors/igdateeditor/overview.mdx | 2 +- .../igdatepicker/accessibility-compliance.mdx | 2 +- .../igdatepicker/keyboard-navigation.mdx | 10 +- .../igeditors/igdatepicker/known-issues.mdx | 2 +- .../igmaskeditor/accessibility-compliance.mdx | 4 +- .../igmaskeditor/keyboard-navigation.mdx | 8 +- .../igeditors/igmaskeditor/known-issues.mdx | 2 +- .../igeditors/igmaskeditor/overview.mdx | 8 +- .../accessibility-compliance.mdx | 4 +- .../ignumericeditor/keyboard-navigation.mdx | 10 +- .../igeditors/ignumericeditor/overview.mdx | 8 +- .../accessibility-compliance.mdx | 4 +- .../igpercenteditor/keyboard-navigation.mdx | 10 +- .../igpercenteditor/known-issues.mdx | 2 +- .../igeditors/igpercenteditor/overview.mdx | 8 +- .../igtexteditor/accessibility-compliance.mdx | 2 +- .../igtexteditor/keyboard-navigation.mdx | 10 +- .../igeditors/igtexteditor/known-issues.mdx | 2 +- .../igtexteditor/styling-and-theming.mdx | 2 +- .../igtimepicker/accessibility-compliance.mdx | 2 +- .../igtimepicker/keyboard-navigation.mdx | 10 +- .../igeditors/igtimepicker/overview.mdx | 6 +- .../financial-chart-known-limitations.mdx | 6 +- .../accessibility-compliance.mdx | 2 +- .../topics/controls/igfunnelchart/adding.mdx | 32 ++-- .../igfunnelchart/binding-to-data.mdx | 20 +-- .../controls/igfunnelchart/configuring.mdx | 26 ++-- .../controls/igfunnelchart/overview.mdx | 24 +-- .../topics/controls/igfunnelchart/styling.mdx | 36 ++--- .../iggrid/accessibility-compliance.mdx | 4 +- .../controls/iggrid/binding/to-datatable.mdx | 22 +-- .../iggrid/binding/to-web-services.mdx | 8 +- .../controls/iggrid/binding/to-webapi.mdx | 6 +- ...g-asp-net-mvc-applications-with-iggrid.mdx | 22 +-- .../append-rows-on-demand-overview.mdx | 20 +-- .../iggrid/features/cell-merging/advanced.mdx | 18 +-- .../iggrid/features/cell-merging/overview.mdx | 22 +-- .../iggrid/features/columns-and-layout.mdx | 18 +-- .../features/columns/column-resizing.mdx | 16 +- .../iggrid/features/columns/filtering.mdx | 34 ++--- .../fixing/columnfixing-configuring.mdx | 36 ++--- .../columns/fixing/columnfixing-enabling.mdx | 16 +- .../columns/fixing/columnfixing-overview.mdx | 40 ++--- .../columns/grouping/enabling-groupby.mdx | 24 +-- .../grouping/group-by-dialog-overview.mdx | 24 +-- .../columns/grouping/groupby-overview.mdx | 16 +- .../columns/grouping/groupby-summaries.mdx | 16 +- .../columns/hiding/column-chooser.mdx | 20 +-- .../column-hiding-enabling-column-hiding.mdx | 24 +-- .../hiding/column-hiding-grid-events.mdx | 10 +- .../hiding/configure-column-hiding.mdx | 34 ++--- .../moving/columnmoving-configuring.mdx | 40 ++--- .../columns/moving/columnmoving-enabling.mdx | 14 +- ...mnmoving-movingcolumnsprogrammatically.mdx | 50 +++---- .../columns/moving/columnmoving-overview.mdx | 34 ++--- .../multicolumnheaders-configuring.mdx | 44 +++--- .../multicolumnheaders-multicolumnheaders.mdx | 12 +- .../sorting/multiple-sorting-dialog.mdx | 22 +-- .../features/columns/sorting/overview.mdx | 24 +-- .../summaries/column-summaries-events.mdx | 8 +- .../configuring-column-summaries.mdx | 52 +++---- .../summaries/enabling-column-summaries.mdx | 24 +-- ...-a-basic-column-template-in-the-iggrid.mdx | 12 +- .../api/unboundcolumns-property-reference.mdx | 4 +- .../unbound/unboundcolumns-known-issues.mdx | 18 +-- .../unbound/unboundcolumns-overview.mdx | 10 +- ...boundcolumns-setting-column-as-unbound.mdx | 12 +- ...ndcolumns-populating-with-data-locally.mdx | 16 +- ...dcolumns-populating-with-data-overview.mdx | 14 +- ...dcolumns-populating-with-data-remotely.mdx | 30 ++-- .../unboundcolumns-optimize-performance.mdx | 20 +-- ...undcolumns-rendering-calculated-values.mdx | 20 +-- .../features/configuring-knockout-support.mdx | 14 +- .../extending-iggrid-modal-dialog.mdx | 12 +- .../handling-remote-features-manually.mdx | 12 +- .../iggrid/features/jsrender-integration.mdx | 18 +-- .../iggrid/features/multirowlayout.mdx | 14 +- .../controls/iggrid/features/paging.mdx | 30 ++-- ...ng-responsive-web-design-mode-overview.mdx | 14 +- ...-design-mode-configuring-column-hiding.mdx | 20 +-- ...e-configuring-row-and-column-templates.mdx | 14 +- ...ode-configuring-single-column-template.mdx | 8 +- ...-configuring-vertical-column-rendering.mdx | 28 ++-- ...eb-design-mode-creating-custom-profile.mdx | 24 +-- .../enabling-responsive-web-design-mode.mdx | 16 +- .../responsive/web-design-mode-overview.mdx | 24 +-- .../iggrid/features/rest-updating.mdx | 16 +- .../configuring-row-selectors.mdx | 40 ++--- .../row-selectors/enabling-row-selectors.mdx | 22 +-- .../iggrid/features/row-selectors/events.mdx | 8 +- .../selection/multiple-cell-selection.mdx | 16 +- .../iggrid/features/selection/overview.mdx | 46 +++--- .../features/tooltips/enabling-tooltips.mdx | 16 +- .../iggrid/features/tooltips/overview.mdx | 6 +- .../tooltips/popover-style-for-tooltips.mdx | 16 +- .../features/tooltips/using-tooltips.mdx | 26 ++-- .../implementing-custom-editor-provider.mdx | 12 +- .../implementing-paste-from-excel.mdx | 10 +- .../migrating-to-the-new-updating.mdx | 20 +-- .../roweditdialog-configuring.mdx | 18 +-- .../updating/row-template/roweditdialog.mdx | 10 +- .../iggrid/features/updating/updating.mdx | 58 ++++---- .../working-with-combo-editor-provider.mdx | 10 +- ...nabling-and-configuring-virtualization.mdx | 22 +-- .../features/virtualization/overview.mdx | 16 +- .../igdatasource-architecture-overview.mdx | 18 +-- .../iggridexcelexporter-configuring.mdx | 16 +- .../iggrid/iggridexcelexporter-overview.mdx | 4 +- .../topics/controls/iggrid/known-issues.mdx | 140 +++++++++--------- .../controls/iggrid/performance-guide.mdx | 38 ++--- .../controls/iggrid/styling-and-theming.mdx | 8 +- .../accessibility-compliance.mdx | 4 +- .../bind/binding-to-dataset.mdx | 10 +- .../bind/binding-to-local-data.mdx | 6 +- .../bind/binding-to-rest-services.mdx | 6 +- .../bind/binding-to-webapi.mdx | 6 +- .../configuring-knockout-support.mdx | 8 +- .../ighierarchicalgrid/events-api.mdx | 8 +- ...-column-template-in-ighierarchicalgrid.mdx | 2 +- .../features/columns-and-layouts.mdx | 12 +- .../features/feature-inheritance.mdx | 12 +- .../features/grouping/custom.mdx | 4 +- .../grouping/enabling-and-configuring.mdx | 8 +- .../features/grouping/overview.mdx | 6 +- .../features/grouping/with-summaries.mdx | 6 +- .../features/load-on-demand.mdx | 20 +-- .../multicolumnheaders-configuring.mdx | 8 +- .../configuring-rowselectors.mdx | 14 +- .../row-selectors/enabling-rowselectors.mdx | 8 +- .../features/row-selectors/events.mdx | 10 +- ...enabling-ighierarchical-grid-selection.mdx | 8 +- ...programmatically-in-ighierarchicalgrid.mdx | 12 +- ...ighierarchical-grid-selection-overview.mdx | 10 +- .../features/virtualization/overview.mdx | 2 +- .../ighierarchicalgrid/initializing.mdx | 12 +- ...programmatically-in-ighierarchicalgrid.mdx | 12 +- .../ighierarchicalgrid/known-issues.mdx | 6 +- .../controls/ighierarchicalgrid/overview.mdx | 20 +-- .../styling-and-theming.mdx | 22 +-- .../ightmleditor/accessibility-compliance.mdx | 6 +- .../ightmleditor/adding-ightmleditor.mdx | 6 +- .../controls/ightmleditor/api-reference.mdx | 10 +- .../ightmleditor/asp-net-mvc-helper-api.mdx | 6 +- .../adding-button-to-custom-toolbar.mdx | 22 +-- .../adding-combo-to-custom-toolbar.mdx | 22 +-- .../configuring-custom-toolbars.mdx | 14 +- .../custom-toolbars/custom-toolbars.mdx | 2 +- .../controls/ightmleditor/ightmleditor.mdx | 2 +- .../controls/ightmleditor/known-issues.mdx | 14 +- .../topics/controls/ightmleditor/overview.mdx | 24 +-- .../ightmleditor/styling-and-theming.mdx | 10 +- .../working/angularjs-support.mdx | 8 +- .../configuring-toolbars-and-buttons.mdx | 16 +- .../modifying-contents-programmatically.mdx | 16 +- .../working/saving-html-content.mdx | 32 ++-- .../working/typescript-support.mdx | 10 +- .../accessibility-compliance.mdx | 6 +- .../controls/iglayoutmanager/adding.mdx | 46 +++--- .../iglayoutmanager/configuring-layouts.mdx | 60 ++++---- .../iglayoutmanager/handling-events.mdx | 40 ++--- ...jquery-and-aspnet-mvc-helper-api-links.mdx | 2 +- .../known-issues-and-limitations.mdx | 4 +- .../controls/iglayoutmanager/landing-page.mdx | 2 +- .../controls/iglayoutmanager/overview.mdx | 32 ++-- .../accessibility-compliance.mdx | 6 +- .../controls/iglineargauge/adding/adding.mdx | 2 +- .../iglineargauge/adding/to-an-html-page.mdx | 28 ++-- .../adding/using-the-mvc-helper.mdx | 28 ++-- .../controls/iglineargauge/api-links.mdx | 4 +- .../iglineargauge/configuring/configuring.mdx | 2 +- .../elements/comparative-ranges.mdx | 18 +-- .../configuring/elements/the-background.mdx | 16 +- .../configuring/elements/the-needle.mdx | 42 +++--- .../configuring/elements/the-scale.mdx | 66 ++++----- .../configuring/elements/the-tooltips.mdx | 44 +++--- .../elements/the-visual-elements.mdx | 2 +- .../the-orientation-and-direction.mdx | 32 ++-- .../controls/iglineargauge/iglineargauge.mdx | 2 +- .../known-issues-and-limitations.mdx | 8 +- .../controls/iglineargauge/overview.mdx | 40 ++--- .../igmap/accessibility-compliance.mdx | 6 +- .../en/topics/controls/igmap/adding-igmap.mdx | 36 ++--- .../en/topics/controls/igmap/api-links.mdx | 4 +- .../igmap/configuring/features/features.mdx | 4 +- .../features/navigation-features.mdx | 26 ++-- .../configuring/features/visual-features.mdx | 40 ++--- .../controls/igmap/configuring/igmap.mdx | 4 +- .../igmap/configuring/map-provider.mdx | 26 ++-- .../series/creating-different-kinds-maps.mdx | 4 +- .../series/geographic-contour-line-series.mdx | 22 +-- .../series/geographic-polyline-series.mdx | 20 +-- .../geographic-proportional-symbol-series.mdx | 16 +- .../series/geographic-scatter-area-series.mdx | 22 +-- .../configuring/series/geographic-shapes.mdx | 20 +-- .../series/geographic-symbol-series.mdx | 18 +-- ...geographic-high-density-scatter-series.mdx | 36 ++--- .../controls/igmap/data-binding-igmap.mdx | 40 ++--- .../igmap/known-issues-limitations.mdx | 2 +- .../en/topics/controls/igmap/landing-page.mdx | 4 +- .../topics/controls/igmap/overview-igmap.mdx | 44 +++--- .../topics/controls/igmap/styling-igmap.mdx | 42 +++--- .../topics/controls/ignotifier/overview.mdx | 16 +- .../controls/igpiechart/accessibility.mdx | 8 +- .../en/topics/controls/igpiechart/adding.mdx | 20 +-- .../topics/controls/igpiechart/api-links.mdx | 6 +- .../controls/igpiechart/databinding.mdx | 48 +++--- .../topics/controls/igpiechart/igpiechart.mdx | 4 +- .../topics/controls/igpiechart/overview.mdx | 30 ++-- .../topics/controls/igpiechart/selection.mdx | 14 +- .../controls/igpiechart/styling-themes.mdx | 40 ++--- .../accessibility-compliance.mdx | 8 +- .../igpivotdataselector/adding/adding.mdx | 2 +- .../adding/to-html-page.mdx | 28 ++-- .../adding/using-the-mvc-helper.mdx | 26 ++-- .../igpivotdataselector/api-links.mdx | 4 +- .../igpivotdataselector.mdx | 2 +- .../known-issues-and-limitations.mdx | 6 +- .../controls/igpivotdataselector/overview.mdx | 16 +- .../igpivotgrid/accessibility-compliance.mdx | 8 +- .../controls/igpivotgrid/adding/adding.mdx | 2 +- .../igpivotgrid/adding/to-an-html-page.mdx | 28 ++-- .../adding/using-the-mvc-helper.mdx | 26 ++-- .../topics/controls/igpivotgrid/api-links.mdx | 4 +- .../controls/igpivotgrid/configuration.mdx | 16 +- .../controls/igpivotgrid/igpivotgrid.mdx | 2 +- .../known-issues-and-limitations.mdx | 10 +- .../controls/igpivotgrid/kpi-support.mdx | 14 +- .../topics/controls/igpivotgrid/overview.mdx | 16 +- .../igpivotview/accessibility-compliance.mdx | 8 +- .../controls/igpivotview/adding/adding.mdx | 2 +- .../igpivotview/adding/to-html-page.mdx | 28 ++-- .../adding/using-the-mvc-helper.mdx | 26 ++-- .../topics/controls/igpivotview/api-links.mdx | 4 +- .../controls/igpivotview/igpivotview.mdx | 2 +- .../known-issues-and-limitations.mdx | 2 +- .../topics/controls/igpivotview/overview.mdx | 28 ++-- .../controls/igpopover/adding-igpopover.mdx | 38 ++--- .../igpopover/configuring-igpopover.mdx | 52 +++---- .../controls/igpopover/handling-events.mdx | 34 ++--- .../known-issues-and-limitations.mdx | 2 +- .../en/topics/controls/igpopover/overview.mdx | 36 ++--- .../controls/igpopover/styling-igpopover.mdx | 18 +-- .../adding/to-an-html-page.mdx | 26 ++-- .../adding/using-the-mvc-helper.mdx | 26 ++-- .../configuring/the-character-encoding.mdx | 30 ++-- .../configuring/the-dimensions.mdx | 36 ++--- .../the-qr-code-specific-settings.mdx | 38 ++--- .../controls/igqrcodebarcode/overview.mdx | 18 +-- .../controls/igqrcodebarcode/styling.mdx | 18 +-- .../igradialgauge/configuring/labels.mdx | 12 +- .../igradialgauge/configuring/needles.mdx | 10 +- .../igradialgauge/configuring/ranges.mdx | 10 +- .../igradialgauge/configuring/the-backing.mdx | 10 +- .../igradialgauge/configuring/the-scales.mdx | 10 +- .../igradialgauge/configuring/tick-marks.mdx | 10 +- .../getting-started-with-igradialgauge.mdx | 12 +- .../igradialmenu/adding/html-page.mdx | 6 +- .../controls/igradialmenu/adding/mvc-app.mdx | 6 +- .../configuring/center-button.mdx | 6 +- .../configuring/configuration-overview.mdx | 6 +- .../configuring/items/button-items.mdx | 6 +- .../configuring/items/color-items.mdx | 8 +- .../configuring/items/numeric-items.mdx | 8 +- .../sub-items-configuration-overview.mdx | 4 +- .../igradialmenu/configuring/tooltips.mdx | 6 +- .../igradialmenu/overview/features.mdx | 18 +-- .../overview/user-interaction.mdx | 6 +- .../igradialmenu/overview/visual-elements.mdx | 4 +- .../igscheduler/adding-igscheduler.mdx | 12 +- .../04igscheduler-configure-asp-net-mvc.mdx | 16 +- .../configuring/configure-appointments.mdx | 4 +- .../igscheduler/configuring/configuring.mdx | 2 +- .../igscheduler/known-limitations.mdx | 20 +-- .../topics/controls/igscheduler/overview.mdx | 22 +-- .../igscroll/configuring-igscroll.mdx | 14 +- .../topics/controls/igscroll/known-issues.mdx | 4 +- .../en/topics/controls/igscroll/overview.mdx | 14 +- .../en/topics/controls/igscroll/styling.mdx | 14 +- .../shapechart-configuring-axis-intervals.mdx | 6 +- .../shapechart-configuring-axis-labels.mdx | 4 +- .../shapechart-configuring-chart-markers.mdx | 12 +- .../igsparkline-to-an-aspnet-mvc-view.mdx | 12 +- .../igsparkline-to-an-html-document.mdx | 26 ++-- .../topics/controls/igsparkline/overview.mdx | 18 +-- .../igsplitter/accessibility-compliance.mdx | 2 +- .../controls/igsplitter/adding-igsplitter.mdx | 38 ++--- .../igsplitter/configuring-igsplitter.mdx | 52 +++---- .../controls/igsplitter/handling-events.mdx | 24 +-- .../topics/controls/igsplitter/overview.mdx | 28 ++-- .../igspreadsheet/adding-igspreadsheet.mdx | 8 +- .../configuring-igspreadsheet.mdx | 10 +- ...activation-and-navigation-interactions.mdx | 10 +- .../igspreadsheet-overview/context-menu.mdx | 2 +- .../igspreadsheet-overview/editing.mdx | 10 +- .../feature-overview.mdx | 6 +- .../igspreadsheet-overview/filter-dialog.mdx | 8 +- .../formatcell-dialog.mdx | 14 +- .../igspreadsheet-overview/sort-dialog.mdx | 4 +- .../topics/controls/igtilemanager/adding.mdx | 34 ++--- .../topics/controls/igtilemanager/binding.mdx | 40 ++--- .../controls/igtilemanager/configuring.mdx | 66 ++++----- .../igtilemanager/handling-events.mdx | 30 ++-- .../controls/igtilemanager/overview.mdx | 58 ++++---- ...dding-removing-nodes-overview-examples.mdx | 30 ++-- .../retrieving-transaction-log.mdx | 14 +- .../configure-checkboxes-and-selection.mdx | 38 ++--- .../controls/igtree/configure-node-images.mdx | 18 +-- .../controls/igtree/configure-nodes.mdx | 30 ++-- .../topics/controls/igtree/data-binding.mdx | 22 +-- .../configuring/configuring-tokens.mdx | 38 ++--- .../igtree/drag-and-drop/enabling.mdx | 22 +-- .../events/handling-events-initialization.mdx | 2 +- .../igtree/drag-and-drop/overview.mdx | 12 +- .../controls/igtree/event-reference.mdx | 12 +- .../controls/igtree/knockoutjs-support.mdx | 2 +- .../controls/igtree/optimize-performance.mdx | 32 ++-- .../en/topics/controls/igtree/overview.mdx | 44 +++--- ...rop-configuring-custom-drop-validation.mdx | 34 ++--- .../drag-and-drop-configuring-mode.mdx | 32 ++-- .../igtreegrid/accessibility-compliance.mdx | 2 +- .../igtreegrid/features/filtering.mdx | 14 +- .../igtreegrid/features/load-on-demand.mdx | 10 +- .../controls/igtreegrid/features/overview.mdx | 28 ++-- .../controls/igtreegrid/features/paging.mdx | 24 +-- .../igtreegrid/features/remote-features.mdx | 22 +-- .../igtreegrid/features/row-selectors.mdx | 20 +-- .../controls/igtreegrid/features/updating.mdx | 32 ++-- .../known-issues-and-limitations.mdx | 10 +- .../topics/controls/igtreegrid/overview.mdx | 36 ++--- .../configuring-igupload.mdx | 70 ++++----- .../saving-files-as-stream.mdx | 24 +-- .../topics/controls/igvalidator/overview.mdx | 14 +- .../controls/igvalidator/validation-rules.mdx | 34 ++--- .../controls/igzoombar/adding-igzoombar.mdx | 26 ++-- .../igzoombar/configuring-igzoombar.mdx | 36 ++--- .../integration-with-custom-components.mdx | 14 +- .../known-issues-and-limitations.mdx | 6 +- .../en/topics/controls/igzoombar/overview.mdx | 30 ++-- ...nding-igdatasource-to-client-side-data.mdx | 18 +-- .../binding-to-html-table-data.mdx | 8 +- .../igdatasource/binding-to-rest-services.mdx | 8 +- .../igdatasource/binding-to-xml.mdx | 6 +- .../data-sources/igdatasource/overview.mdx | 4 +- .../igdatasource/using-dataschema.mdx | 6 +- ...pflatdatasource-adding-to-an-html-page.mdx | 22 +-- ...flatdatasource-adding-using-mvc-helper.mdx | 24 +-- .../flat/configuring-the-tabular-view.mdx | 32 ++-- ...igolapflatdatasource-defining-metadata.mdx | 60 ++++---- .../flat/igolapflatdatasource-overview.mdx | 20 +-- ...sional-data-source-components-overview.mdx | 2 +- ...rce-adding-to-an-aspnetmvc-application.mdx | 24 +-- ...pxmladatasource-adding-to-an-html-page.mdx | 24 +-- ...-configuring-through-a-remote-provider.mdx | 34 ++--- ...e-data-provider-configuration-overview.mdx | 16 +- ...uring-authenticated-access-for-firefox.mdx | 18 +-- ...iguring-iis-for-cross-domain-olap-data.mdx | 26 ++-- .../xmla/igolapxmladatasource-api-links.mdx | 2 +- ...atasource-known-issues-and-limitations.mdx | 6 +- .../xmla/igolapxmladatasource-overview.mdx | 22 +-- .../accessibility-compliance.mdx | 6 +- ...ng-igniteui-controls-to-an-mvc-project.mdx | 8 +- ...ired-resources-for-igniteui-for-jquery.mdx | 8 +- ...zation-of-igniteui-for-jquery-controls.mdx | 34 ++--- .../defining-events-with-aspnet-helper.mdx | 8 +- ...fragistics-content-delivery-networkcdn.mdx | 24 +-- .../deployment-guide-javascript-files.mdx | 92 ++++++------ .../deployment-guide-javascript-resources.mdx | 12 +- ...owsers-that-dont-support-html5-or-css3.mdx | 8 +- .../formatting-dates-numbers-and-strings.mdx | 8 +- .../getting-started.mdx | 34 ++--- ...yjs-integration-with-igniteui-controls.mdx | 10 +- .../manually-updating-previous-versions.mdx | 6 +- ...customizing-ignite-ui-bootstrap-themes.mdx | 2 +- .../deployment-guide-styling-and-theming.mdx | 18 +-- ...gradient-colors-in-data-visualizations.mdx | 52 +++---- .../using-ignite-ui-with-bootstrap.mdx | 10 +- ...pport-for-igniteui-for-jquery-controls.mdx | 22 +-- .../using-events-in-igniteui-for-jquery.mdx | 14 +- .../using-ignite-ui-nuget-packages.mdx | 12 +- .../using-infragistics-loader.mdx | 14 +- .../adding-igtemplating-references.mdx | 12 +- ...alternating-rows-template-igtemplating.mdx | 18 +-- .../creating-basic-conditional-template.mdx | 20 +-- .../creating-basic-substitution-template.mdx | 18 +-- ...complex-property-substitution-template.mdx | 12 +- ...-template-containing-default-statement.mdx | 12 +- ...-template-containing-default-statement.mdx | 12 +- .../creating-nested-blocks-template.mdx | 12 +- .../igtemplating-overview.mdx | 22 +-- .../using/the-javascript-excel-library.mdx | 2 +- .../topics/known-issues/and-limitations.mdx | 110 +++++++------- .../14-breaking-changes-2016-volume-2.mdx | 10 +- ...n-issues-and-limitations-2023-volume-2.mdx | 110 +++++++------- ...n-issues-and-limitations-2023-volume-1.mdx | 110 +++++++------- ...n-issues-and-limitations-2022-volume-2.mdx | 110 +++++++------- ...n-issues-and-limitations-2022-volume-1.mdx | 110 +++++++------- ...n-issues-and-limitations-2021-volume-2.mdx | 110 +++++++------- ...n-issues-and-limitations-2021-volume-1.mdx | 110 +++++++------- ...n-issues-and-limitations-2020-volume-2.mdx | 110 +++++++------- ...n-issues-and-limitations-2020-volume-1.mdx | 110 +++++++------- ...n-issues-and-limitations-2019-volume-2.mdx | 110 +++++++------- ...n-issues-and-limitations-2019-volume-1.mdx | 110 +++++++------- ...n-issues-and-limitations-2018-volume-2.mdx | 110 +++++++------- ...n-issues-and-limitations-2018-volume-1.mdx | 108 +++++++------- ...n-issues-and-limitations-2017-volume-2.mdx | 106 ++++++------- ...n-issues-and-limitations-2017-volume-1.mdx | 104 ++++++------- ...n-issues-and-limitations-2016-volume-2.mdx | 102 ++++++------- ...n-issues-and-limitations-2016-volume-1.mdx | 98 ++++++------ ...n-issues-and-limitations-2015-volume-2.mdx | 96 ++++++------ ...n-issues-and-limitations-2015-volume-1.mdx | 94 ++++++------ ...n-issues-and-limitations-2014-volume-2.mdx | 88 +++++------ ...n-issues-and-limitations-2014-volume-1.mdx | 80 +++++----- ...n-issues-and-limitations-2013-volume-2.mdx | 80 +++++----- ...n-issues-and-limitations-2013-volume-1.mdx | 136 ++++++++--------- ...n-issues-and-limitations-2012-volume-2.mdx | 90 +++++------ ...n-issues-and-limitations-2012-volume-1.mdx | 54 +++---- ...n-issues-and-limitations-2011-volume-2.mdx | 22 +-- ...n-issues-and-limitations-2011-volume-1.mdx | 6 +- .../typescript-samples.mdx | 82 +++++----- .../using-ignite-ui-with-typescript.mdx | 14 +- .../topics/whats-new/00-general-changelog.mdx | 28 ++-- .../07-whats-new-in-2018-volume2.mdx | 50 +++---- .../08-whats-new-in-2018-volume1.mdx | 22 +-- .../09-whats-new-in-2017-volume2.mdx | 26 ++-- .../10-whats-new-in-2017-volume1.mdx | 28 ++-- .../11-whats-new-in-2016-volume2.mdx | 38 ++--- .../12-whats-new-in-2016-volume1.mdx | 16 +- .../13-whats-new-in-2015-volume2.mdx | 36 ++--- .../14-whats-new-in-2015-volume1.mdx | 48 +++--- .../15-whats-new-in-2014-volume2.mdx | 38 ++--- .../16-whats-new-in-2014-volume1.mdx | 34 ++--- .../17-whats-new-in-2013-volume2.mdx | 80 +++++----- .../18-whats-new-in-2013-volume1.mdx | 62 ++++---- .../19-whats-new-in-2012-volume2.mdx | 66 ++++----- .../20-jquery-whats-new-12-1-landing-page.mdx | 40 ++--- .../21-whats-new-in-2011-volume2.mdx | 24 +-- .../angularjs-samples.mdx | 52 +++---- ...and-advanced-templating-with-angularjs.mdx | 30 ++-- .../using-ignite-ui-with-angularjs.mdx | 42 +++--- .../igniteui-for-mvc-known-issues.mdx | 6 +- .../using-ignite-ui-tag-helpers.mdx | 6 +- ...niteui-controls-in-aspnet-core-project.mdx | 8 +- .../word-about-infragistics-word-library.mdx | 8 +- .../word-add-table-to-word-document.mdx | 10 +- ...d-document-using-object-model-approach.mdx | 20 +-- .../adding/adding-to-an-html-page.mdx | 24 +-- .../adding/adding-using-the-mvc-helper.mdx | 24 +-- ...figuring-the-orientation-and-direction.mdx | 28 ++-- .../configuring-comparative-ranges.mdx | 16 +- .../elements/configuring-the-background.mdx | 14 +- .../configuring-the-comparative-marker.mdx | 16 +- .../configuring-the-performance-bar.mdx | 16 +- .../elements/configuring-the-tooltips.mdx | 44 +++--- .../elements/scale/configuring-the-scale.mdx | 64 ++++---- .../known-issues-and-limitations.mdx | 6 +- .../controls/igbulletgraph/overview.mdx | 40 ++--- .../callouts-layer.mdx | 2 +- .../category-highlight-layer.mdx | 2 +- .../category-tooltip-layer.mdx | 2 +- .../crosshairs-layer.mdx | 2 +- .../final-value-layer.mdx | 2 +- .../item-highlight-layer.mdx | 2 +- .../item-tooltip-layer.mdx | 2 +- .../igcategorychart/axes/axis-intervals.mdx | 6 +- .../igcategorychart/axes/axis-labels.mdx | 8 +- .../igcategorychart/axes/axis-tickmarks.mdx | 6 +- .../categorychart-configuring-axis-range.mdx | 6 +- .../categorychart-configuring-axis-titles.mdx | 6 +- ...categorychart-accessibility-compliance.mdx | 4 +- .../categorychart-api-overivew.mdx | 2 +- .../categorychart-binding-to-data.mdx | 22 +-- .../categorychart-chart-title-subtitle.mdx | 6 +- ...ategorychart-configuring-chart-markers.mdx | 8 +- .../igcategorychart/categorychart-styling.mdx | 28 ++-- ...categorychart-transition-in-animations.mdx | 12 +- .../igcombo/accessibility-compliance.mdx | 8 +- .../igcombo/binding/binding-to-data.mdx | 2 +- .../controls/igcombo/binding/cascading.mdx | 18 +-- .../controls/igcombo/binding/data-binding.mdx | 34 ++--- .../igcombo/configuring/angularjs-support.mdx | 8 +- .../igcombo/configuring/asp-net-mvc.mdx | 10 +- .../configuring/configure-auto-suggest.mdx | 28 ++-- .../configure-remote-filtering.mdx | 28 ++-- .../configuring/configure-selection.mdx | 44 +++--- .../igcombo/configuring/configuring.mdx | 2 +- .../controls/igcombo/configuring/grouping.mdx | 10 +- .../configuring/knockoutjs-support.mdx | 16 +- .../igcombo/configuring/load-on-demand.mdx | 22 +-- .../configuring/optimize-performance.mdx | 20 +-- .../configuring/typescript-support.mdx | 10 +- .../controls/igcombo/getting-started.mdx | 28 ++-- .../ja/topics/controls/igcombo/igcombo.mdx | 4 +- .../controls/igcombo/keyboard-navigation.mdx | 14 +- .../controls/igcombo/known-limitations.mdx | 14 +- .../igcombo/migrating-to-the-new-combo.mdx | 8 +- .../ja/topics/controls/igcombo/overview.mdx | 24 +-- .../topics/controls/igcombo/using-themes.mdx | 8 +- .../igdatachart/accessibility-compliance.mdx | 6 +- .../ja/topics/controls/igdatachart/adding.mdx | 22 +-- .../topics/controls/igdatachart/api-links.mdx | 6 +- .../animating/animating-charts.mdx | 4 +- .../configuring/animating/animating-html.mdx | 20 +-- .../animating/charts-in-aspnet-mvc.mdx | 20 +-- .../animating/motion-framework.mdx | 10 +- .../configuring/axis-intervals.mdx | 18 +-- .../igdatachart/configuring/axis-title.mdx | 14 +- .../chart-titles-and-subtitles.mdx | 16 +- .../configuring-navigation-features.mdx | 14 +- .../configuring/configuring-timexaxis.mdx | 10 +- .../igdatachart/configuring/configuring.mdx | 2 +- .../hover-interactions/callout-layer.mdx | 14 +- .../category-highlight-layer.mdx | 14 +- .../category-item-highlight-layer.mdx | 14 +- .../category-tooltip-layer.mdx | 14 +- .../hover-interactions/common-properties.mdx | 12 +- .../hover-interactions/crosshair-layer.mdx | 16 +- .../hover-interactions/final-value-layer.mdx | 14 +- .../hover-interactions/item-tooltip-layer.mdx | 14 +- .../igchart-transitions-in-animations.mdx | 26 ++-- .../configuring/knockoutjs-support.mdx | 12 +- .../configuring/series-highlighting.mdx | 22 +-- .../shape-series/polygon-series.mdx | 14 +- .../shape-series/polyline-series.mdx | 14 +- .../triangulation-series/area-series.mdx | 16 +- .../triangulation-series/contour-series.mdx | 18 +-- .../controls/igdatachart/databinding.mdx | 54 +++---- .../controls/igdatachart/known-issues.mdx | 8 +- .../controls/igdatachart/landing-page.mdx | 4 +- ...teractions-hover-interactions-overview.mdx | 26 ++-- .../igdatachart/overview/overview.mdx | 36 ++--- .../igdatachart/overview/series-types.mdx | 32 ++-- .../igdatachart/overview/visual-elements.mdx | 6 +- .../igdatachart/series-requirements.mdx | 12 +- .../styling/styling-the-chart-series.mdx | 24 +-- .../igdatachart/styling/styling-themes.mdx | 42 +++--- .../igdialog/accessibility-compliance.mdx | 10 +- .../api-reference/css-classes-reference.mdx | 8 +- .../api-reference/event-reference.mdx | 12 +- .../api-reference/method-reference.mdx | 8 +- .../api-reference/property-reference.mdx | 10 +- .../igdialog/configuring/animations.mdx | 14 +- .../igdialog/configuring/external-page.mdx | 14 +- .../configuring/header-and-footer.mdx | 20 +-- .../configuring/maximize-and-minimize.mdx | 40 ++--- .../igdialog/configuring/modal-state.mdx | 16 +- .../igdialog/configuring/multiple-dialogs.mdx | 20 +-- .../controls/igdialog/configuring/pin.mdx | 34 ++--- .../igdialog/configuring/position.mdx | 18 +-- .../igdialog/configuring/show-and-hide.mdx | 24 +-- .../topics/controls/igdialog/known-issues.mdx | 6 +- .../ja/topics/controls/igdialog/overview.mdx | 44 +++--- .../controls/igdialog/styling-and-theming.mdx | 14 +- .../accessibility-compliance.mdx | 4 +- .../adding/adding-to-an-html-page.mdx | 22 +-- .../adding/adding-using-the-mvc-helper.mdx | 22 +-- .../configuring-selection-and-explosion.mdx | 38 ++--- .../controls/igdoughnutchart/overview.mdx | 12 +- .../configuring-aspnet-mvc-validation.mdx | 26 ++-- .../configuring-igeditors-at-runtime.mdx | 22 +-- .../configuring-knockout-support-editors.mdx | 24 +-- .../config/editors-configure-editors.mdx | 2 +- .../igeditors/config/localizing-igeditors.mdx | 2 +- .../accessibility-compliance.mdx | 2 +- ...urrencyeditor-accessibility-compliance.mdx | 2 +- .../igcurrencyeditor/keyboard-navigation.mdx | 10 +- .../igdateeditor/accessibility-compliance.mdx | 2 +- .../igdateeditor/keyboard-navigation.mdx | 10 +- .../igeditors/igdateeditor/known-issues.mdx | 2 +- .../igeditors/igdateeditor/overview.mdx | 2 +- .../igdatepicker/accessibility-compliance.mdx | 2 +- .../igdatepicker/keyboard-navigation.mdx | 10 +- .../igeditors/igdatepicker/known-issues.mdx | 2 +- .../igmaskeditor/accessibility-compliance.mdx | 4 +- .../igmaskeditor/keyboard-navigation.mdx | 8 +- .../igeditors/igmaskeditor/known-issues.mdx | 4 +- .../igeditors/igmaskeditor/overview.mdx | 8 +- .../accessibility-compliance.mdx | 4 +- .../ignumericeditor/keyboard-navigation.mdx | 10 +- .../igeditors/ignumericeditor/overview.mdx | 8 +- .../accessibility-compliance.mdx | 4 +- .../igpercenteditor/keyboard-navigation.mdx | 10 +- .../igpercenteditor/known-issues.mdx | 2 +- .../igeditors/igpercenteditor/overview.mdx | 8 +- .../igtexteditor/accessibility-compliance.mdx | 2 +- .../igtexteditor/keyboard-navigation.mdx | 10 +- .../igeditors/igtexteditor/known-issues.mdx | 2 +- .../igtexteditor/styling-and-theming.mdx | 2 +- .../igtimepicker/accessibility-compliance.mdx | 2 +- .../igtimepicker/keyboard-navigation.mdx | 10 +- .../igeditors/igtimepicker/overview.mdx | 6 +- .../accessibility-compliance.mdx | 2 +- .../topics/controls/igfunnelchart/adding.mdx | 32 ++-- .../igfunnelchart/binding-to-data.mdx | 20 +-- .../controls/igfunnelchart/configuring.mdx | 26 ++-- .../controls/igfunnelchart/overview.mdx | 24 +-- .../topics/controls/igfunnelchart/styling.mdx | 36 ++--- .../iggrid/accessibility-compliance.mdx | 4 +- .../iggrid/binding/binding-to-datatable.mdx | 22 +-- .../binding/binding-to-web-services.mdx | 8 +- .../iggrid/binding/binding-to-webapi.mdx | 6 +- ...g-asp-net-mvc-applications-with-iggrid.mdx | 22 +-- .../append-rows-on-demand-overview.mdx | 20 +-- .../cell-merging/cellmerging-advanced.mdx | 18 +-- .../cell-merging/cellmerging-overview.mdx | 22 +-- .../iggrid/features/columns-and-layout.mdx | 18 +-- .../features/columns/column-resizing.mdx | 16 +- .../iggrid/features/columns/filtering.mdx | 34 ++--- .../fixing/columnfixing-configuring.mdx | 36 ++--- .../columns/fixing/columnfixing-enabling.mdx | 16 +- .../columns/fixing/columnfixing-overview.mdx | 40 ++--- .../columns/grouping/enabling-groupby.mdx | 24 +-- .../grouping/group-by-dialog-overview.mdx | 24 +-- .../columns/grouping/groupby-overview.mdx | 16 +- .../columns/grouping/groupby-summaries.mdx | 16 +- .../column-hiding-enabling-column-hiding.mdx | 24 +-- .../hiding/column-hiding-grid-events.mdx | 10 +- .../hiding/configure-column-hiding.mdx | 34 ++--- .../columns/hiding/hiding-column-chooser.mdx | 20 +-- .../moving/columnmoving-configuring.mdx | 40 ++--- .../columns/moving/columnmoving-enabling.mdx | 14 +- ...mnmoving-movingcolumnsprogrammatically.mdx | 50 +++---- .../columns/moving/columnmoving-overview.mdx | 34 ++--- .../multicolumnheaders-configuring.mdx | 44 +++--- .../multicolumnheaders-multicolumnheaders.mdx | 12 +- .../sorting/multiple-sorting-dialog.mdx | 22 +-- .../columns/sorting/sorting-overview.mdx | 24 +-- .../summaries/column-summaries-events.mdx | 8 +- .../configuring-column-summaries.mdx | 52 +++---- .../summaries/enabling-column-summaries.mdx | 24 +-- ...-a-basic-column-template-in-the-iggrid.mdx | 12 +- .../api/unboundcolumns-property-reference.mdx | 4 +- .../unbound/unboundcolumns-known-issues.mdx | 18 +-- .../unbound/unboundcolumns-overview.mdx | 10 +- ...boundcolumns-setting-column-as-unbound.mdx | 12 +- ...ndcolumns-populating-with-data-locally.mdx | 16 +- ...dcolumns-populating-with-data-overview.mdx | 14 +- ...dcolumns-populating-with-data-remotely.mdx | 30 ++-- .../unboundcolumns-optimize-performance.mdx | 20 +-- ...undcolumns-rendering-calculated-values.mdx | 20 +-- .../features/configuring-knockout-support.mdx | 14 +- .../extending-iggrid-modal-dialog.mdx | 12 +- .../handling-remote-features-manually.mdx | 12 +- .../iggrid/features/jsrender-integration.mdx | 18 +-- .../iggrid/features/multirowlayout.mdx | 14 +- .../controls/iggrid/features/paging.mdx | 30 ++-- ...ng-responsive-web-design-mode-overview.mdx | 14 +- ...-design-mode-configuring-column-hiding.mdx | 20 +-- ...e-configuring-row-and-column-templates.mdx | 14 +- ...ode-configuring-single-column-template.mdx | 8 +- ...-configuring-vertical-column-rendering.mdx | 28 ++-- ...eb-design-mode-creating-custom-profile.mdx | 24 +-- .../enabling-responsive-web-design-mode.mdx | 16 +- .../responsive-web-design-mode-overview.mdx | 24 +-- .../iggrid/features/rest-updating.mdx | 16 +- .../configuring-row-selectors.mdx | 40 ++--- .../row-selectors/enabling-row-selectors.mdx | 22 +-- .../row-selectors/rowselectors-events.mdx | 8 +- .../selection/multiple-cell-selection.mdx | 16 +- .../features/selection/selection-overview.mdx | 46 +++--- .../features/tooltips/enabling-tooltips.mdx | 16 +- .../tooltips/popover-style-for-tooltips.mdx | 16 +- .../features/tooltips/tooltips-overview.mdx | 6 +- .../features/tooltips/using-tooltips.mdx | 26 ++-- .../implementing-custom-editor-provider.mdx | 12 +- .../implementing-paste-from-excel.mdx | 10 +- .../updating-roweditdialog-configuring.mdx | 18 +-- .../row-template/updating-roweditdialog.mdx | 10 +- ...updating-migrating-to-the-new-updating.mdx | 20 +-- .../iggrid/features/updating/updating.mdx | 58 ++++---- .../working-with-combo-editor-provider.mdx | 10 +- ...nabling-and-configuring-virtualization.mdx | 22 +-- .../virtualization-overview.mdx | 16 +- .../igdatasource-architecture-overview.mdx | 16 +- .../iggridexcelexporter-configuring.mdx | 16 +- .../iggrid/iggridexcelexporter-overview.mdx | 4 +- .../topics/controls/iggrid/known-issues.mdx | 138 ++++++++--------- .../controls/iggrid/performance-guide.mdx | 36 ++--- .../controls/iggrid/styling-and-theming.mdx | 8 +- .../accessibility-compliance.mdx | 4 +- .../bind/binding-to-dataset.mdx | 10 +- .../bind/binding-to-local-data.mdx | 6 +- .../bind/binding-to-rest-services.mdx | 6 +- .../bind/binding-to-webapi.mdx | 6 +- .../configuring-knockout-support.mdx | 8 +- .../ighierarchicalgrid/events-api.mdx | 8 +- ...-column-template-in-ighierarchicalgrid.mdx | 2 +- .../features/columns-and-layouts.mdx | 12 +- .../features/feature-inheritance.mdx | 10 +- .../features/grouping/grouping-custom.mdx | 4 +- .../grouping-enabling-and-configuring.mdx | 8 +- .../features/grouping/grouping-overview.mdx | 6 +- .../grouping/grouping-with-summaries.mdx | 6 +- .../features/load-on-demand.mdx | 20 +-- .../multicolumnheaders-configuring.mdx | 8 +- .../configuring-rowselectors.mdx | 14 +- .../row-selectors/enabling-rowselectors.mdx | 8 +- .../row-selectors/rowselectors-events.mdx | 10 +- ...enabling-ighierarchical-grid-selection.mdx | 8 +- ...programmatically-in-ighierarchicalgrid.mdx | 14 +- ...ighierarchical-grid-selection-overview.mdx | 10 +- .../virtualization-overview.mdx | 2 +- .../ighierarchicalgrid/initializing.mdx | 12 +- ...programmatically-in-ighierarchicalgrid.mdx | 12 +- .../ighierarchicalgrid/known-issues.mdx | 6 +- .../controls/ighierarchicalgrid/overview.mdx | 20 +-- .../styling-and-theming.mdx | 22 +-- .../ightmleditor/accessibility-compliance.mdx | 6 +- .../ightmleditor/adding-ightmleditor.mdx | 6 +- .../controls/ightmleditor/api-reference.mdx | 10 +- .../ightmleditor/asp-net-mvc-helper-api.mdx | 6 +- .../adding-button-to-custom-toolbar.mdx | 22 +-- .../adding-combo-to-custom-toolbar.mdx | 22 +-- .../configuring-custom-toolbars.mdx | 14 +- .../custom-toolbars/custom-toolbars.mdx | 2 +- .../controls/ightmleditor/ightmleditor.mdx | 2 +- .../controls/ightmleditor/known-issues.mdx | 14 +- .../topics/controls/ightmleditor/overview.mdx | 24 +-- .../ightmleditor/styling-and-theming.mdx | 10 +- .../working/angularjs-support.mdx | 8 +- .../configuring-toolbars-and-buttons.mdx | 16 +- .../modifying-contents-programmatically.mdx | 16 +- .../working/saving-html-content.mdx | 32 ++-- .../working/typescript-support.mdx | 10 +- .../accessibility-compliance.mdx | 6 +- .../controls/iglayoutmanager/adding.mdx | 46 +++--- .../iglayoutmanager/configuring-layouts.mdx | 60 ++++---- .../iglayoutmanager/handling-events.mdx | 40 ++--- ...jquery-and-aspnet-mvc-helper-api-links.mdx | 2 +- .../known-issues-and-limitations.mdx | 4 +- .../controls/iglayoutmanager/landing-page.mdx | 2 +- .../controls/iglayoutmanager/overview.mdx | 32 ++-- .../accessibility-compliance.mdx | 6 +- .../adding/adding-to-an-html-page.mdx | 28 ++-- .../adding/adding-using-the-mvc-helper.mdx | 28 ++-- .../controls/iglineargauge/adding/adding.mdx | 2 +- .../controls/iglineargauge/api-links.mdx | 4 +- ...figuring-the-orientation-and-direction.mdx | 32 ++-- .../iglineargauge/configuring/configuring.mdx | 2 +- .../configuring-comparative-ranges.mdx | 18 +-- .../elements/configuring-the-background.mdx | 16 +- .../elements/configuring-the-needle.mdx | 42 +++--- .../elements/configuring-the-scale.mdx | 66 ++++----- .../elements/configuring-the-tooltips.mdx | 44 +++--- .../configuring-the-visual-elements.mdx | 2 +- .../controls/iglineargauge/iglineargauge.mdx | 2 +- .../known-issues-and-limitations.mdx | 8 +- .../controls/iglineargauge/overview.mdx | 40 ++--- .../igmap/accessibility-compliance.mdx | 6 +- .../ja/topics/controls/igmap/adding-igmap.mdx | 36 ++--- .../ja/topics/controls/igmap/api-links.mdx | 4 +- .../configuring/configuring-map-provider.mdx | 26 ++-- .../features/configuring-features.mdx | 4 +- .../configuring-navigation-features.mdx | 26 ++-- .../features/configuring-visual-features.mdx | 40 ++--- .../controls/igmap/configuring/igmap.mdx | 4 +- ...iguring-geographic-contour-line-series.mdx | 22 +-- ...configuring-geographic-polyline-series.mdx | 20 +-- ...-geographic-proportional-symbol-series.mdx | 14 +- ...iguring-geographic-scatter-area-series.mdx | 22 +-- .../series/configuring-geographic-shapes.mdx | 20 +-- .../configuring-geographic-symbol-series.mdx | 18 +-- .../series/creating-different-kinds-maps.mdx | 4 +- ...geographic-high-density-scatter-series.mdx | 36 ++--- .../controls/igmap/data-binding-igmap.mdx | 40 ++--- .../igmap/known-issues-limitations.mdx | 2 +- .../ja/topics/controls/igmap/landing-page.mdx | 4 +- .../topics/controls/igmap/overview-igmap.mdx | 44 +++--- .../topics/controls/igmap/styling-igmap.mdx | 42 +++--- .../topics/controls/ignotifier/overview.mdx | 16 +- .../controls/igpiechart/accessibility.mdx | 8 +- .../ja/topics/controls/igpiechart/adding.mdx | 20 +-- .../topics/controls/igpiechart/api-links.mdx | 6 +- .../controls/igpiechart/databinding.mdx | 48 +++--- .../topics/controls/igpiechart/igpiechart.mdx | 4 +- .../topics/controls/igpiechart/overview.mdx | 30 ++-- .../topics/controls/igpiechart/selection.mdx | 14 +- .../controls/igpiechart/styling-themes.mdx | 40 ++--- .../accessibility-compliance.mdx | 8 +- .../adding/adding-to-html-page.mdx | 28 ++-- .../adding/adding-using-the-mvc-helper.mdx | 26 ++-- .../igpivotdataselector/adding/adding.mdx | 2 +- .../igpivotdataselector/api-links.mdx | 4 +- .../igpivotdataselector.mdx | 2 +- .../known-issues-and-limitations.mdx | 4 +- .../controls/igpivotdataselector/overview.mdx | 16 +- .../igpivotgrid/accessibility-compliance.mdx | 8 +- .../adding/adding-to-an-html-page.mdx | 28 ++-- .../adding/adding-using-the-mvc-helper.mdx | 26 ++-- .../controls/igpivotgrid/adding/adding.mdx | 2 +- .../topics/controls/igpivotgrid/api-links.mdx | 4 +- .../controls/igpivotgrid/configuration.mdx | 16 +- .../controls/igpivotgrid/igpivotgrid.mdx | 2 +- .../known-issues-and-limitations.mdx | 8 +- .../controls/igpivotgrid/kpi-support.mdx | 14 +- .../topics/controls/igpivotgrid/overview.mdx | 16 +- .../igpivotview/accessibility-compliance.mdx | 8 +- .../adding/adding-to-html-page.mdx | 28 ++-- .../adding/adding-using-the-mvc-helper.mdx | 26 ++-- .../controls/igpivotview/adding/adding.mdx | 2 +- .../topics/controls/igpivotview/api-links.mdx | 4 +- .../controls/igpivotview/igpivotview.mdx | 2 +- .../topics/controls/igpivotview/overview.mdx | 26 ++-- .../controls/igpopover/adding-igpopover.mdx | 38 ++--- .../igpopover/configuring-igpopover.mdx | 52 +++---- .../controls/igpopover/handling-events.mdx | 34 ++--- .../known-issues-and-limitations.mdx | 2 +- .../ja/topics/controls/igpopover/overview.mdx | 36 ++--- .../controls/igpopover/styling-igpopover.mdx | 18 +-- .../adding/adding-to-an-html-page.mdx | 26 ++-- .../adding/adding-using-the-mvc-helper.mdx | 26 ++-- .../configuring-the-character-encoding.mdx | 30 ++-- .../configuring-the-dimensions.mdx | 36 ++--- ...figuring-the-qr-code-specific-settings.mdx | 38 ++--- .../controls/igqrcodebarcode/overview.mdx | 18 +-- .../controls/igqrcodebarcode/styling.mdx | 18 +-- .../configuring/configuring-labels.mdx | 12 +- .../configuring/configuring-needles.mdx | 10 +- .../configuring/configuring-ranges.mdx | 10 +- .../configuring/configuring-the-backing.mdx | 10 +- .../configuring/configuring-the-scales.mdx | 10 +- .../configuring/configuring-tick-marks.mdx | 10 +- .../getting-started-with-igradialgauge.mdx | 12 +- .../igradialmenu/adding/adding-html-page.mdx | 6 +- .../igradialmenu/adding/adding-mvc-app.mdx | 6 +- .../configuring/configuration-overview.mdx | 6 +- .../configuring/configuring-center-button.mdx | 6 +- .../configuring/configuring-tooltips.mdx | 6 +- .../items/configuring-button-items.mdx | 6 +- .../items/configuring-color-items.mdx | 8 +- .../items/configuring-numeric-items.mdx | 8 +- ...items-sub-items-configuration-overview.mdx | 4 +- .../igradialmenu/overview/features.mdx | 18 +-- .../overview/user-interaction.mdx | 6 +- .../igradialmenu/overview/visual-elements.mdx | 4 +- .../igscheduler/adding-igscheduler.mdx | 12 +- .../configuring/configure-appointments.mdx | 4 +- .../configuring/configure-asp-net-mvc.mdx | 16 +- .../igscheduler/configuring/configuring.mdx | 2 +- .../igscheduler/known-limitations.mdx | 20 +-- .../topics/controls/igscheduler/overview.mdx | 22 +-- .../igscroll/configuring-igscroll.mdx | 14 +- .../topics/controls/igscroll/known-issues.mdx | 4 +- .../ja/topics/controls/igscroll/overview.mdx | 14 +- .../ja/topics/controls/igscroll/styling.mdx | 14 +- .../shapechart-configuring-axis-intervals.mdx | 6 +- .../shapechart-configuring-axis-labels.mdx | 4 +- .../shapechart-configuring-chart-markers.mdx | 12 +- ...ding-igsparkline-to-an-aspnet-mvc-view.mdx | 12 +- ...adding-igsparkline-to-an-html-document.mdx | 26 ++-- .../topics/controls/igsparkline/overview.mdx | 18 +-- .../igsplitter/accessibility-compliance.mdx | 2 +- .../controls/igsplitter/adding-igsplitter.mdx | 38 ++--- .../igsplitter/configuring-igsplitter.mdx | 52 +++---- .../controls/igsplitter/handling-events.mdx | 24 +-- .../topics/controls/igsplitter/overview.mdx | 28 ++-- .../igspreadsheet/adding-igspreadsheet.mdx | 4 +- .../configuring-igspreadsheet.mdx | 6 +- ...activation-and-navigation-interactions.mdx | 10 +- .../igspreadsheet-overview/editing.mdx | 10 +- .../feature-overview.mdx | 6 +- .../igspreadsheet-overview/filter-dialog.mdx | 8 +- .../formatcell-dialog.mdx | 14 +- .../igspreadsheet-overview/sort-dialog.mdx | 4 +- .../topics/controls/igtilemanager/adding.mdx | 34 ++--- .../topics/controls/igtilemanager/binding.mdx | 40 ++--- .../controls/igtilemanager/configuring.mdx | 66 ++++----- .../igtilemanager/handling-events.mdx | 30 ++-- .../controls/igtilemanager/overview.mdx | 58 ++++---- ...dding-removing-nodes-overview-examples.mdx | 30 ++-- .../retrieving-transaction-log.mdx | 14 +- .../configure-checkboxes-and-selection.mdx | 38 ++--- .../controls/igtree/configure-node-images.mdx | 18 +-- .../controls/igtree/configure-nodes.mdx | 30 ++-- .../topics/controls/igtree/data-binding.mdx | 22 +-- .../drag-and-drop-configuring-tokens.mdx | 38 ++--- .../drag-and-drop/drag-and-drop-enabling.mdx | 22 +-- .../drag-and-drop/drag-and-drop-overview.mdx | 12 +- ...nd-drop-handling-events-initialization.mdx | 2 +- .../controls/igtree/event-reference.mdx | 12 +- .../controls/igtree/knockoutjs-support.mdx | 2 +- .../controls/igtree/optimize-performance.mdx | 32 ++-- .../ja/topics/controls/igtree/overview.mdx | 44 +++--- ...rop-configuring-custom-drop-validation.mdx | 34 ++--- .../drag-and-drop-configuring-mode.mdx | 32 ++-- .../igtreegrid/accessibility-compliance.mdx | 2 +- .../igtreegrid/features/features-overview.mdx | 28 ++-- .../igtreegrid/features/filtering.mdx | 14 +- .../igtreegrid/features/load-on-demand.mdx | 10 +- .../controls/igtreegrid/features/paging.mdx | 24 +-- .../igtreegrid/features/remote-features.mdx | 22 +-- .../igtreegrid/features/row-selectors.mdx | 18 +-- .../controls/igtreegrid/features/updating.mdx | 32 ++-- .../known-issues-and-limitations.mdx | 10 +- .../topics/controls/igtreegrid/overview.mdx | 36 ++--- .../configuring-igupload.mdx | 70 ++++----- .../saving-files-as-stream.mdx | 24 +-- .../using-server-side-events.mdx | 8 +- .../topics/controls/igvalidator/overview.mdx | 14 +- .../controls/igvalidator/validation-rules.mdx | 34 ++--- .../controls/igzoombar/adding-igzoombar.mdx | 26 ++-- .../igzoombar/configuring-igzoombar.mdx | 36 ++--- .../integration-with-custom-components.mdx | 14 +- .../known-issues-and-limitations.mdx | 6 +- .../ja/topics/controls/igzoombar/overview.mdx | 30 ++-- ...nding-igdatasource-to-client-side-data.mdx | 18 +-- .../binding-to-html-table-data.mdx | 8 +- .../igdatasource/binding-to-rest-services.mdx | 8 +- .../igdatasource/binding-to-xml.mdx | 6 +- .../igdatasource/igdatasource-overview.mdx | 2 +- .../igdatasource/using-dataschema.mdx | 6 +- ...pflatdatasource-adding-to-an-html-page.mdx | 22 +-- ...flatdatasource-adding-using-mvc-helper.mdx | 24 +-- .../flat/configuring-the-tabular-view.mdx | 32 ++-- ...igolapflatdatasource-defining-metadata.mdx | 60 ++++---- .../flat/igolapflatdatasource-overview.mdx | 20 +-- ...sional-data-source-components-overview.mdx | 2 +- ...rce-adding-to-an-aspnetmvc-application.mdx | 26 ++-- ...pxmladatasource-adding-to-an-html-page.mdx | 26 ++-- .../xmla/add/igolapxmladatasource-adding.mdx | 2 +- ...-configuring-through-a-remote-provider.mdx | 34 ++--- ...e-data-provider-configuration-overview.mdx | 16 +- ...uring-authenticated-access-for-firefox.mdx | 18 +-- ...iguring-iis-for-cross-domain-olap-data.mdx | 26 ++-- .../xmla/igolapxmladatasource-api-links.mdx | 2 +- ...atasource-known-issues-and-limitations.mdx | 6 +- .../xmla/igolapxmladatasource-overview.mdx | 22 +-- .../accessibility-compliance.mdx | 6 +- ...ng-igniteui-controls-to-an-mvc-project.mdx | 8 +- ...ired-resources-for-igniteui-for-jquery.mdx | 8 +- ...zation-of-igniteui-for-jquery-controls.mdx | 36 ++--- .../defining-events-with-aspnet-helper.mdx | 8 +- ...fragistics-content-delivery-networkcdn.mdx | 24 +-- .../deployment-guide-javascript-files.mdx | 92 ++++++------ .../deployment-guide-javascript-resources.mdx | 12 +- ...owsers-that-dont-support-html5-or-css3.mdx | 8 +- .../formatting-dates-numbers-and-strings.mdx | 8 +- .../getting-started.mdx | 34 ++--- ...yjs-integration-with-igniteui-controls.mdx | 10 +- .../manually-updating-previous-versions.mdx | 6 +- ...customizing-ignite-ui-bootstrap-themes.mdx | 2 +- .../deployment-guide-styling-and-theming.mdx | 18 +-- ...gradient-colors-in-data-visualizations.mdx | 52 +++---- .../using-ignite-ui-with-bootstrap.mdx | 10 +- ...pport-for-igniteui-for-jquery-controls.mdx | 24 +-- .../using-events-in-igniteui-for-jquery.mdx | 14 +- .../using-ignite-ui-nuget-packages.mdx | 12 +- .../using-infragistics-loader.mdx | 14 +- .../adding-igtemplating-references.mdx | 12 +- ...alternating-rows-template-igtemplating.mdx | 18 +-- .../creating-basic-conditional-template.mdx | 20 +-- .../creating-basic-substitution-template.mdx | 18 +-- ...complex-property-substitution-template.mdx | 12 +- ...-template-containing-default-statement.mdx | 12 +- ...-template-containing-default-statement.mdx | 12 +- .../creating-nested-blocks-template.mdx | 12 +- .../igtemplating-overview.mdx | 22 +-- .../using/the-javascript-excel-library.mdx | 2 +- .../and-limitations-2024-volume-1.mdx | 110 +++++++------- .../14-breaking-changes-2016-volume-2.mdx | 10 +- ...n-issues-and-limitations-2023-volume-2.mdx | 110 +++++++------- ...n-issues-and-limitations-2023-volume-1.mdx | 110 +++++++------- ...n-issues-and-limitations-2022-volume-2.mdx | 110 +++++++------- ...n-issues-and-limitations-2022-volume-1.mdx | 110 +++++++------- ...n-issues-and-limitations-2021-volume-2.mdx | 110 +++++++------- ...n-issues-and-limitations-2021-volume-1.mdx | 108 +++++++------- ...n-issues-and-limitations-2020-volume-2.mdx | 108 +++++++------- ...n-issues-and-limitations-2020-volume-1.mdx | 108 +++++++------- ...n-issues-and-limitations-2019-volume-2.mdx | 108 +++++++------- ...n-issues-and-limitations-2019-volume-1.mdx | 110 +++++++------- ...n-issues-and-limitations-2018-volume-2.mdx | 110 +++++++------- ...n-issues-and-limitations-2018-volume-1.mdx | 108 +++++++------- ...n-issues-and-limitations-2017-volume-2.mdx | 106 ++++++------- ...n-issues-and-limitations-2017-volume-1.mdx | 104 ++++++------- ...n-issues-and-limitations-2016-volume-2.mdx | 102 ++++++------- ...n-issues-and-limitations-2016-volume-1.mdx | 98 ++++++------ ...n-issues-and-limitations-2015-volume-2.mdx | 96 ++++++------ ...n-issues-and-limitations-2015-volume-1.mdx | 94 ++++++------ ...n-issues-and-limitations-2014-volume-2.mdx | 88 +++++------ ...n-issues-and-limitations-2014-volume-1.mdx | 80 +++++----- ...n-issues-and-limitations-2013-volume-2.mdx | 80 +++++----- ...n-issues-and-limitations-2013-volume-1.mdx | 138 ++++++++--------- ...n-issues-and-limitations-2012-volume-2.mdx | 90 +++++------ ...n-issues-and-limitations-2012-volume-1.mdx | 54 +++---- ...n-issues-and-limitations-2011-volume-2.mdx | 22 +-- ...n-issues-and-limitations-2011-volume-1.mdx | 6 +- .../typescript-samples.mdx | 118 +++++++-------- .../using-ignite-ui-with-typescript.mdx | 14 +- .../topics/whats-new/00-general-changelog.mdx | 26 ++-- .../07-whats-new-in-2018-volume2.mdx | 50 +++---- .../08-whats-new-in-2018-volume1.mdx | 22 +-- .../09-whats-new-in-2017-volume2.mdx | 26 ++-- .../10-whats-new-in-2017-volume1.mdx | 28 ++-- .../11-whats-new-in-2016-volume2.mdx | 38 ++--- .../12-whats-new-in-2016-volume1.mdx | 16 +- .../13-whats-new-in-2015-volume2.mdx | 36 ++--- .../14-whats-new-in-2015-volume1.mdx | 48 +++--- .../15-whats-new-in-2014-volume2.mdx | 38 ++--- .../16-whats-new-in-2014-volume1.mdx | 34 ++--- .../17-whats-new-in-2013-volume2.mdx | 80 +++++----- .../18-whats-new-in-2013-volume1.mdx | 62 ++++---- .../19-whats-new-in-2012-volume2.mdx | 66 ++++----- .../20-jquery-whats-new-12-1-landing-page.mdx | 40 ++--- .../21-whats-new-in-2011-volume2.mdx | 24 +-- 1137 files changed, 12388 insertions(+), 12386 deletions(-) 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 index e15e668e21..6a17e4aa04 100644 --- a/docs/jquery/src/content/en/topics/angularjs-directives/angularjs-samples.mdx +++ b/docs/jquery/src/content/en/topics/angularjs-directives/angularjs-samples.mdx @@ -38,117 +38,117 @@ This topic contains the following sections: - [Details](#dchart_details) - [Related Content](#related_content) -### Requirements +### 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​ +### Grid Sample​ This sample will demonstrate how we can use `igGrid` with AngularJS. -#### Preview +#### Preview The following is a preview of the final result.
[{environment:SamplesEmbedUrl}/grid/angular]({environment:SamplesEmbedUrl}/grid/angular)
-#### Details +#### Details This sample demonstrates how AngularJS directives are used with the igGrid when `Updating`, `Paging` and `Sorting` features are activated. -### Editors Sample​ +### Editors Sample​ This sample will demonstrate how we can use `igEditors` with AngularJS. -#### Preview +#### Preview The following is a preview of the final result.
[{environment:SamplesEmbedUrl}/editors/angular]({environment:SamplesEmbedUrl}/editors/angular)
-#### Details +#### Details This sample demonstrates how to create a number of different editors using AngularJS directives. -### Tile Manager Sample​ +### Tile Manager Sample​ This sample will demonstrate how we can use `igTileManager` with AngularJS. -#### Preview +#### Preview The following is a preview of the final result.
[{environment:SamplesEmbedUrl}/tile-manager/angular]({environment:SamplesEmbedUrl}/tile-manager/angular)
-#### Details +#### 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 +### Dialog Window Sample This sample will demonstrate how we can use `igDialog` with AngularJS. -#### Preview +#### Preview The following is a preview of the final result.
[{environment:SamplesEmbedUrl}/dialog-window/angular]({environment:SamplesEmbedUrl}/dialog-window/angular)
-#### Details +#### Details In this sample we use the `igDialog` AngularJS directive. The Dialog Window is initialized with `headerText` and `height` options set. -### Tree Sample +### Tree Sample This sample will demonstrate how we can use `igTree` with AngularJS. -#### Preview +#### Preview The following is a preview of the final result.
[{environment:SamplesEmbedUrl}/tree-control/angular]({environment:SamplesEmbedUrl}/tree-control/angular)
-#### Details +#### 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 +### Map Sample This sample will demonstrate how we can use `igMap` with AngularJS. -#### Preview +#### Preview The following is a preview of the final result.
[{environment:SamplesEmbedUrl}/map/angular]({environment:SamplesEmbedUrl}/map/angular)
-#### Details +#### Details In the sample above we show how a zoomable map can be initialized using an AngularJS directive. -### Layout Manager Sample +### Layout Manager Sample This sample demonstrates how `AngularJS` directives are used to instantiate `igLayoutManager`. -#### Preview +#### Preview The following is a preview of the final result.
[{environment:SamplesEmbedUrl}/layout-manager/angular]({environment:SamplesEmbedUrl}/layout-manager/angular)
-#### Details +#### Details In this sample we use the `igLayoutManager` AngularJS directive. -### Data Chart Sample​ +### Data Chart Sample​ This sample demonstrates how `AngularJS` directives are used to instantiate `igDataChart`. -#### Preview +#### Preview The following is a preview of the final result.
[{environment:SamplesEmbedUrl}/data-chart/angular]({environment:SamplesEmbedUrl}/data-chart/angular)
-#### Details +#### Details This sample demonstrates how to link together the Data Chart and Zoombar Controls using AngularJS directives. -### Related Content +### 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. 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 index 9ccc986f54..333721d37e 100644 --- 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 @@ -4,9 +4,9 @@ slug: conditional-and-advanced-templating-with-angularjs --- import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; -#Conditional and Advanced Templating with AngularJS +# Conditional and Advanced Templating with AngularJS -##Topic Overview +## 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. @@ -39,21 +39,21 @@ This topic contains the following sections: - [Topics](#topics) - [Samples](#samples) -## Introduction +## 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 +### 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 +## 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 +### 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`: @@ -103,11 +103,11 @@ This configuration will cause Angular to try to parse the template and **throw a The templates works as expected because nested elements under the parent are removed in the directive templating phase during the [bootstrapping process](https://docs.angularjs.org/guide/bootstrap) and are safe to use. -### External Templates +### 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 +### 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: @@ -143,7 +143,7 @@ Where the element with an ID of “colTemplate” is the container of the templa {{/if}} ``` -### Non-Bindable Directive +### 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: @@ -158,12 +158,12 @@ Such templates can be again assigned to the options using the `getHtml()` functi **Related Sample:** [igGrid Sample](http://igniteui.github.io/igniteui-angularjs/samples/igGrid.html) -## Using Different Templating Engines +## Using Different Templating Engines While the Infragistics Templating Engine is used by default, it is not by any means exclusive. The `igGrid` for example comes with built-in [jsRender](http://www.jsviews.com/) support and different engines can be plugged-in quite easily using a single function override. -### jsRender with igGrid +### jsRender with igGrid [jsRender](http://www.jsviews.com/) is a powerful and fast templating engine that can handle complex templates and can be extended with custom tags and helper functions to produce highly customizable, advanced templates. The [jsRender Integration](/controls/iggrid/features/jsrender-integration.mdx) in the grid is controlled by the option: @@ -181,7 +181,7 @@ To use this feature jsRender script must be referenced on the page. Note that th **Related Sample:** [JsRender Integration]({environment:NewSamplesUrl}/grid/jsrender-integration) -### Overriding the Templating Function +### Overriding the Templating Function In advanced scenarios where other customization options are exhausted it is also possible to override the main templating function with your own. This is only possible in **{environment:ProductName} version 14.1 and later**. The `tmpl` is the main function of the Infragistics Templating Engine and is defined globally under the `$.ig` namespace object. This function is called by all relevant {environment:ProductName} controls and it receives both the template and data object: @@ -201,16 +201,16 @@ If you want to use Angular’s syntax there are two options that handle evaluati >**Note:** Keep in mind that overriding the templating function applies to every active {environment:ProductName} control in the application, so if other controls have templates the new function should be able to handle those as well. Changing templating engines also usually means templates for all controls must change to match the new syntax. -## Related Content +## Related Content -### Topics +### Topics The following topics provide additional information related to this topic. - [Using different template engines with {environment:ProductName} controls](http://www.infragistics.com/community/blogs/marina_stoyanova/archive/2014/05/30/using-different-template-engines-with-ignite-ui-controls.aspx) - [jsRender Integration](/controls/iggrid/features/jsrender-integration.mdx) -### Samples +### Samples The following samples provide additional information related to this topic. diff --git a/docs/jquery/src/content/en/topics/angularjs-directives/using-ignite-ui-with-angularjs.mdx b/docs/jquery/src/content/en/topics/angularjs-directives/using-ignite-ui-with-angularjs.mdx index 065ccc70d5..94ec4cb11f 100644 --- a/docs/jquery/src/content/en/topics/angularjs-directives/using-ignite-ui-with-angularjs.mdx +++ b/docs/jquery/src/content/en/topics/angularjs-directives/using-ignite-ui-with-angularjs.mdx @@ -4,9 +4,9 @@ slug: using-ignite-ui-with-angularjs --- import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; -#Using {environment:ProductName} with AngularJS +# Using {environment:ProductName} with AngularJS -##Topic Overview +## Topic Overview This topic contains an overview using the {environment:ProductName} directives for AngularJS. @@ -45,7 +45,7 @@ This topic contains the following sections: - [Topics](#topics) - [Samples](#samples) -## Introduction +## Introduction The [{environment:ProductName}® directives for AngularJS](https://github.com/IgniteUI/igniteui-angularjs) allow you to take advantage of data binding and declarative programming when using {environment:ProductName}® controls in AngularJS apps. @@ -54,7 +54,7 @@ The directives are available as a separate module called `'igniteui-directives'` >**Note:** Directives are registered dynamically based on the loaded {environment:ProductName} widgets. Therefore, you should make sure only the proper scripts are loaded on the page (and preferably avoid loading unused widgets). -## Directives +## Directives As Angular provides a very flexible syntax for writing directives and normalizes different declarative approaches to a single behavior, there are multiple ways you can initialize a control and its options. You have a number of different options available to you to initialize an {environment:ProductName} control in an Angular application. You may use a custom tag element ``, attributes like `
` or a class name `
`. Each of these approaches will match the control directive and produce the same result. Stated another way, the following definitions all work to initialize an `igRating` control: @@ -68,12 +68,12 @@ As Angular provides a very flexible syntax for writing directives and normalizes For readability, best practices recommend using tags and attributes over classes. Even though Angular normalizes other delimiters, it’s also recommended for {environment:ProductName} Angular directives the control names to be lower case and dash-delimited. -## Options +## Options All options provided for a directive are intended for the {environment:ProductName} widget that it will create, therefore all applicable options can be found under the [{environment:ProductName} API reference](https://www.igniteui.com/help/api/2025.1/). There are two mutually-exclusive ways to define options – declaratively in the View or as an object in the Scope. -### Declarative Options +### Declarative Options Options in the view are provided as either attributes of the main tag or as child tags in the case of complex type options. @@ -107,7 +107,7 @@ The name of the parent tag must match the name of the complex option or array (< ``` -### Scope Options +### Scope Options With scope options (or as often referred as Controller initialization which is the most common case) the entire options object is defined within the scope. The way the directive finds its options is by using the attribute directive matching and assigning it the scope object property to use. For example, if you have the following `igTree` directive: @@ -134,7 +134,7 @@ app.controller('treeController', ``` These options may seem familiar to you as they are simply using the [{environment:ProductName} API](https://www.igniteui.com/help/api/2025.1/ui.igtree) in the controller as there is no need for AngularJS to normalize them from the view. -### Events +### Events Although standard methods of [handling {environment:ProductName} events](/general-and-getting-started/using-events-in-igniteui-for-jquery.mdx) are still available, directives can also bind handlers that are defined declaratively as an attribute with `event-` prefix. The name of the event still follows the same naming convention as options - **lower case and dash-delimited**. For example, the following code listing shows how to declare the event of the `igVideoPlayer`: @@ -153,7 +153,7 @@ function ($scope) { ``` >**Note:** Keep in mind there are many user interaction-related events in the {environment:ProductName} controls are not raised when the controls are manipulated through the API. The directives use API methods to achieve data binding. For example, the event of the `igCombo` control is not raised because a change was made to the `ngModel` to which it was bound. -### Options Evaluation +### Options Evaluation Currently the options provided to the directives support only one time binding with an Angular expression. This means the value of the expression is evaluated in the scope once before it is passed to the widget for initialization. To assign a scope property to an option use Angular’s expression syntax inside the value itself. Everything that [$eval](https://docs.angularjs.org/api/ng/type//$rootScope.Scope#$eval) can evaluate within the scope can be used. For example assigning an `igRating` value (percent based by default) with a 0-10 value: @@ -173,9 +173,9 @@ By dividing it by 10: ![](images/Using_Ignite_UI_with_AngularJS_1.png) -## Creating Angular app with {environment:ProductName} +## Creating Angular app with {environment:ProductName} -### Requirements +### 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: @@ -184,7 +184,7 @@ When considering the required resources the same requirements and options apply - [AngularJS](http://www.angularjs.org/) 1.0 and later - [{environment:ProductName}](http://www.igniteui.com/) 13.1 and later -### Steps +### Steps 1. Begin by including the [{environment:ProductName} theme and structural](/general-and-getting-started/styling-and-theming/deployment-guide-styling-and-theming.mdx) files: @@ -243,7 +243,7 @@ When considering the required resources the same requirements and options apply ``` ![](images/Using_Ignite_UI_with_AngularJS_2.png) -## Data Binding +## 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: @@ -263,7 +263,7 @@ Where data is injected in the scope using a [factory provider](https://docs.angu $scope.northwind = northwind.data; }]); -### Two-way Data Binding +### 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: @@ -274,7 +274,7 @@ The most common case includes controls that can consume and manipulate data, for >**Note:** For some controls two-way binding requires enabling additional features, such as the Updating feature on the `igGrid`. -### One-way Data Binding +### 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: @@ -283,7 +283,7 @@ The other main group are controls that cannot edit their information (mostly con - igSparkline - igFunnelChart -## Templates +## 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: @@ -323,13 +323,13 @@ app.controller('gridController', ![](images/Using_Ignite_UI_with_AngularJS_4.png) -### Setting Templates Declaratively +### 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 +## 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. @@ -350,15 +350,15 @@ This approach to providing additional markup applies to controls such as the `ig **Related:** [igDialog Angular sample](http://igniteui.github.io/igniteui-angularjs/samples/igDialog.html) -## Related Content +## Related Content -### Topics +### 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 +### Samples The following samples provide additional information related to this topic. 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 index 48485b16eb..110c222481 100644 --- 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 @@ -29,7 +29,7 @@ Issue | Description | Status ## Known Issues and Limitations Details -### MVC helper-generated code in conjunction with the MVC Loader executes after any custom JavaScript code on a page +### 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. @@ -47,7 +47,7 @@ $.ig.loader(function () { }); ``` -### Default value for AutoGenerateLayouts changed +### 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. @@ -57,7 +57,7 @@ When [`AutoGenerateLayouts`](Infragistics.Web.Mvc~Infragistics.Web.Mvc.GridModel > > This is a breaking change. -### MVC Loader not functioning correctly in an MVC Razor Layout View +### 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. 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 index 7a73f5f478..f5eb18faa4 100644 --- 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 @@ -40,7 +40,7 @@ This is demonstrated in the screenshot below: 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 +### Prerequisites In order to use the ASP.NET Scaffolding feature, you must have: 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 index 79e4a15a80..87f6939344 100644 --- 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 @@ -17,7 +17,7 @@ This topic contains the following sections: - [Configuring data bound control](#control-configuration) - [Related Content](#related) -## Adding Tag Helpers to scope of the view +## 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: @@ -38,7 +38,7 @@ For example if the igGrids should be only registered: @addTagHelper Infragistics.Web.Mvc.TagHelpers.Grids.*, Infragistics.Web.AspNetCore ``` -## Configuring data bound control +## Configuring data bound control In this section we will demonstrate how to configure igGrid by using the ig-grid Tag Helper. @@ -142,6 +142,6 @@ and by using Tag Helpers: ``` -## Related Content +## 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 index 410a09c9cd..854db0bb51 100644 --- 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 @@ -17,9 +17,9 @@ This topic contains the following sections: - [Configuring the igUpload Middleware for file upload handling](#middleware) - [Related Content](#related) -## Referencing the Infragistics Web MVC NuGet package +## Referencing the Infragistics Web MVC NuGet package -### Using local feed +### 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. @@ -27,11 +27,11 @@ As such our new {environment:ProductNameASPNETCore} built on top of AS 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 +### 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 +## 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. @@ -75,5 +75,5 @@ Additional settings for the upload can be set in the ConfigureServices method. T ``` -## Related Content +## 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 index b6afb0fe10..e1e78f1c8c 100644 --- 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 @@ -14,12 +14,12 @@ The topic is organized as follows: - [Implementating the Object Model Approach](#dom) - [Related Topics](#related-content) -## Approaches to Generating Word Documents +## 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 +### 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. @@ -95,7 +95,7 @@ private void WriteParagraph( } ``` -### Implementating the Object Model Approach +### Implementating the Object Model Approach ##### Introduction to the Document Class @@ -150,7 +150,7 @@ p.ContentRuns.AddTextRun("Hello World"); doc.Save(filename); ``` -## Related Topics +## 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/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 index c2ea68ae78..e4f6dee02b 100644 --- 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 @@ -15,13 +15,13 @@ The topic is organized as follows: - [Examples](#Ex) - [Related Topics](#relatedTopics) -## Introduction +## 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 +## Requirements A reference to the Infragsitics3.Documents.IO assembly is required. -## Formatting Tables - Overview +## 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) @@ -29,7 +29,7 @@ Formatting table, table rows, and table cells is handled by various classes, suc - [TableCellProperties](Infragistics.Web.Documents.IO~Infragistics.Documents.Word.TableCellProperties.html) - [TableBorderProperties](Infragistics.Web.Documents.IO~Infragistics.Documents.Word.TableBorderProperties.html) -## Examples +## 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. @@ -226,7 +226,7 @@ docWriter.EndDocument(); docWriter.Close(); ``` -## Related Topics +## 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) 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 index ae1013d643..bfa519df78 100644 --- 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 @@ -21,7 +21,7 @@ The topic is organized as follows: - [Example Code: Full Code Sample](#ExCode) - [Related Topics](#RelatedTopics) -## Creating a Simple Word Document +## 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. @@ -49,7 +49,7 @@ 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 +## 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#:** @@ -64,8 +64,8 @@ para2.ContentRuns.AddTextRun("Hyperlink: "); para2.ContentRuns.AddHyperlink("http://www.infragistics.com", "Infragistics Inc."); ``` -## Adding a Picture -### Adding Anchored Picture +## 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#:** @@ -90,7 +90,7 @@ anchPic.Outline.LineWidth = 1; para3.Anchors.AddAnchoredPicture(anchPic); ``` -### Adding Inline Picture +### 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#:** @@ -113,8 +113,8 @@ 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 +## 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#:** @@ -139,7 +139,7 @@ headerPara.Anchors.AddAnchoredPicture(headeranchPic); headerPara.ContentRuns.AddTextRun("This is a header"); ``` -### Adding and Setting the Footer +### 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#:** @@ -162,7 +162,7 @@ footerPara.ContentRuns.AddTextRun("This is a footer"); footerPara.ContentRuns.AddPageNumberField(PageNumberFieldFormat.Ordinal); ``` -## Example Code: Full Code Sample +## Example Code: Full Code Sample Following is the complete functional code used in the examples in this topic. **In C#:** @@ -243,7 +243,7 @@ footerPara.ContentRuns.AddPageNumberField(PageNumberFieldFormat.Ordinal); doc.Save(documentName); ``` -## Related Topics +## 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) 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 index 224ea9a6b8..86525ac284 100644 --- 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 @@ -37,11 +37,11 @@ This topic contains the following sections: - [Samples](#samples) -## Adding igBulletGraph to an HTML Page – Conceptual Overview +## 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 +#### Requirements The following table summarizes the requirements for using the `igBulletGraph` control. @@ -63,7 +63,7 @@ The following table summarizes the requirements for using the `igBulletGraph` co </tbody> </table> -#### Steps +#### Steps Following are the general conceptual steps for adding `igBulletGraph` to an HTML Page. @@ -76,19 +76,19 @@ Following are the general conceptual steps for adding `igBulletGraph` to an HTML 7. Adding comparative ranges. -## Adding igBulletGraph to an HTML Page – Procedure -#### Introduction +## 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 +#### Preview The following screenshot is a preview of the result. ![](images/igBulletGraph_Adding_igBulletGraph_to_an_HTML_Page_1.png) -### Prerequisites +### Prerequisites To complete the procedure, you need the required JavaScript and CSS files referenced on the HTML page. @@ -121,7 +121,7 @@ To complete the procedure, you need the required JavaScript and CSS files refere ``` -### Steps +### Steps Follow these steps to add an `igBulletGraph` to an HTML page. @@ -253,7 +253,7 @@ Follow these steps to add an `igBulletGraph` to an HTML page. ![](images/igBulletGraph_Adding_igBulletGraph_to_an_HTML_Page_1.png) -### Full code +### Full code Following is the full code for this procedure. @@ -320,9 +320,9 @@ Following is the full code for this procedure. ``` -## Related Content +## Related Content -### Topics +### Topics The following topics provide additional information related to this topic. @@ -331,7 +331,7 @@ The following topics provide additional information related to this topic. - [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 +### Samples The following sample provides additional information related to this topic. 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 index 8fed8bd5cd..a4e819e396 100644 --- 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 @@ -49,7 +49,7 @@ This topic contains the following sections: - [Samples](#samples) -## Adding igBulletGraph to an ASP.NET MVC Application – Conceptual Overview +## 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: @@ -71,7 +71,7 @@ The `igBulletGraph` control can be added to an ASP.NET MVC view using the ASP.NE Apart from its and , a must be assigned to the individual range, so that its extent is specified. -### Requirements +### Requirements To complete the procedure, you need the following: @@ -105,7 +105,7 @@ To complete the procedure, you need the following: explained in the [Adding *igBulletGraph* to an HTML Page](/igbulletgraph-adding-to-an-html-page.mdx) topic. -### Steps +### Steps 1. Adding the ASP.NET MVC Helper 2. Instantiating the `igBulletGraph` control configuring its basic rendering options @@ -114,23 +114,23 @@ To complete the procedure, you need the following: 5. Configuring the comparative marker 6. Adding comparative ranges -## Adding igBulletGraph to an ASP.NET MVC Application – Procedure +## Adding igBulletGraph to an ASP.NET MVC Application – Procedure -#### Introduction +#### 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 +#### Preview The following screenshot is a preview of the result. ![](images/igBulletGraph_Adding_igBulletGraph_to_an_ASP.NET_MVC_Application_1.png) -### Prerequisites +### 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 +### Steps The following steps demonstrate how to instantiate `igBulletGraph` in an ASP.NET MVC application using the ASP.NET MVC helper. @@ -234,7 +234,7 @@ The final look of the graph is presented below. ![](images/igBulletGraph_Adding_igBulletGraph_to_an_ASP.NET_MVC_Application_1.png) -### Full code +### Full code Following is the full code for this procedure. @@ -273,9 +273,9 @@ Following is the full code for this procedure. ``` -## Related Content +## Related Content -### Topics +### 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. @@ -283,7 +283,7 @@ The following topics provide additional information related to this topic. - [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 +### Samples The following sample provides additional information related to this topic. 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 index 8bcb6aa0d1..6552bed6ae 100644 --- a/docs/jquery/src/content/en/topics/controls/igbulletgraph/api-links.mdx +++ b/docs/jquery/src/content/en/topics/controls/igbulletgraph/api-links.mdx @@ -4,7 +4,7 @@ slug: igbulletgraph-api-links --- import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; -#jQuery and MVC API Links (igBulletGraph) +# jQuery and MVC API Links (igBulletGraph) ## igBulletGraph API Reference Documentation 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 index 66bfedf1e0..613da0602a 100644 --- 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 @@ -35,9 +35,9 @@ This topic contains the following sections: - [Samples](#samples) -## Configuring Comparative Ranges +## Configuring Comparative Ranges -#### Comparative ranges configuration summary +#### Comparative ranges configuration summary The `igBulletGraph` control supports multiple comparative ranges via instantiating its ranges object. @@ -45,7 +45,7 @@ The `igBulletGraph` control supports multiple comparative ranges via instantiati 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 +### 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. @@ -114,7 +114,7 @@ The following table explains briefly the configurable aspects of `igBulletGraph` > **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 +### Property settings The following table maps the desired behavior to its respective property settings. @@ -201,7 +201,7 @@ The following table maps the desired behavior to its respective property setting -### Example +### Example The screenshot below demonstrates how a comparative range added to the `igBulletGraph` looks as a result of the following settings: @@ -241,9 +241,9 @@ $(function () { ``` -## Related Content +## Related Content -### Topics +### Topics The following topics provide additional information related to this topic. @@ -258,7 +258,7 @@ The following topics provide additional information related to this topic. - [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 +### Samples The following samples provide additional information related to this topic. 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 index 536c7ba8f3..5309878883 100644 --- 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 @@ -59,9 +59,9 @@ This topic contains the following sections: - [Samples](#samples) -## Introduction +## Introduction -#### Scale configuration summary +#### 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). @@ -69,7 +69,7 @@ The tick marks of the `igBulletGraph` control identify equal intervals of measur As far as the labels are concerned, various aspects of them can be configured such as position, text, format, etc.. -### Scale configuration summary chart +### 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. @@ -192,9 +192,9 @@ The following table explains briefly the configurable aspects of `igBulletGraph` -## Configuring the Scale’s Size and Position +## Configuring the Scale’s Size and Position -### Overview +### 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 ). @@ -204,7 +204,7 @@ The positioning of the scale in the other (across-the-scale) dimension of the Gr >**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 +### 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). @@ -236,7 +236,7 @@ The following table maps the desired behavior to its respective property setting -### Example +### Example The screenshot below demonstrates how the `igBulletGraph` would look as a result of the following settings: @@ -261,9 +261,9 @@ $('#igBulletGraph').igBulletGraph({ ``` -## Configuring the Scale’s Range +## Configuring the Scale’s Range -#### Overview +#### 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. @@ -273,7 +273,7 @@ Setting the minimum and maximum values implicitly defines all values within the 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 +### 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). @@ -303,7 +303,7 @@ The following table maps the desired behavior to its respective property setting -### Example +### Example The screenshot below demonstrates how the `igBulletGraph` would look as a result of the following settings: @@ -328,25 +328,25 @@ $('#igBulletGraph').igBulletGraph({ ``` -## Configuring the Scale’s Major Tick Marks +## Configuring the Scale’s Major Tick Marks -#### Overview +#### 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 +### 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 +### 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 +### 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). @@ -410,7 +410,7 @@ The following table maps the desired behavior to its respective property setting -### Example +### Example The screenshot below demonstrates how the `igBulletGraph` looks as a result of the following settings: @@ -445,23 +445,23 @@ Following is the code that implements this example. ``` -## Configuring the Scale’s Minor Tick Marks +## Configuring the Scale’s Minor Tick Marks -#### Overview +#### 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 +### 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 +### 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 +### 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). @@ -513,7 +513,7 @@ The following table maps the desired behavior to its respective property setting -### Example +### Example The screenshot below demonstrates how the `igBulletGraph` looks as a result of the following settings: @@ -584,9 +584,9 @@ Following is the code that implements this example. ``` -## Configuring the Scale’s Labeling +## Configuring the Scale’s Labeling -### Overview +### Overview By default, the labels indicating the scale’s measures are enabled. The labels are defined in terms of the following factors: @@ -601,7 +601,7 @@ The value that each label displays is defined by the value represented by its po 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 +### Event handling The labels of `igBulletGraph` can be additionally formatted and aligned on handling the corresponding events. @@ -613,7 +613,7 @@ Format the labels | -### Property settings +### 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). @@ -666,7 +666,7 @@ The following table maps the desired behavior to its respective property setting >**Note:** You can set the font-related properties in CSS through the `.ui-bulletgraph-label` and `.ui-bulletgraph` CSS classes. -### Example – horizontal orientation +### Example – horizontal orientation The screenshot below demonstrates how the *igBulletGraph* looks as a result of the following settings with the default horizontal scale orientation: @@ -695,7 +695,7 @@ Following is the code that implements this example. fontBrush: 'green'}); ``` -### Example – vertical orientation +### 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: @@ -728,9 +728,9 @@ Following is the code that implements this example. ``` -## Related Content +## Related Content -### Topics +### Topics The following topics provide additional information related to this topic. @@ -746,7 +746,7 @@ The following topics provide additional information related to this topic. - [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 +### Samples The following samples provide additional information related to this topic. 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 index e6f5afb5ba..3f9f62486d 100644 --- 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 @@ -34,9 +34,9 @@ This topic contains the following sections: - [Topics](#topics) -## Configuring the Background +## Configuring the Background -#### Background configuration summary +#### 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. @@ -44,7 +44,7 @@ The following picture demonstrates a background color of a variety of orange and ![](images/igBulletGraph_Configuring_the_Background_1.png) -### Background configuration summary chart +### 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. @@ -86,7 +86,7 @@ The following table explains briefly the configurable aspects of `igBulletGraph` -### Property settings +### Property settings The following table maps the desired behavior to its respective property settings. @@ -136,7 +136,7 @@ The following table maps the desired behavior to its respective property setting -### Example +### Example The screenshot below demonstrates how the `igBulletGraph` looks as a result of the following settings: @@ -169,9 +169,9 @@ Following is the code that implements this example. ``` -## Related Content +## Related Content -### Topics +### Topics The following topics provide additional information related to this topic. 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 index ab57520e97..4f78ee2980 100644 --- 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 @@ -35,9 +35,9 @@ This topic contains the following sections: - [Samples](#samples) -## Configuring the Comparative Marker +## Configuring the Comparative Marker -#### Comparative marker configuration summary +#### 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). @@ -45,7 +45,7 @@ The value indicated by the comparative marker (and its position on the scale, re ![](images/igBulletGraph_Configuring_the_Comparative_Marker_1.png) -#### Comparative marker configuration summary chart +#### 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. @@ -109,7 +109,7 @@ The following table explains briefly the configurable aspects of `igBulletGraph` -#### Property settings +#### Property settings The following table maps the desired behavior to its respective property settings. @@ -183,7 +183,7 @@ The following table maps the desired behavior to its respective property setting -#### Example +#### Example The screenshot below demonstrates how the `igBulletGraph` looks as a result of the following settings: @@ -220,9 +220,9 @@ $("#bulletGraph").igBulletGraph({ ``` -## Related Content +## Related Content -### Topics +### Topics The following topics provide additional information related to this topic. @@ -237,7 +237,7 @@ The following topics provide additional information related to this topic. - [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 +### Samples The following samples provide additional information related to this topic. 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 index 6940de5d6f..7c3236d7eb 100644 --- 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 @@ -35,9 +35,9 @@ This topic contains the following sections: - [Samples](#samples) -## Configuring the Performance Bar +## Configuring the Performance Bar -#### Performance bar appearance configuration summary +#### 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. @@ -47,7 +47,7 @@ Its position in the across-the-scale dimension is configurable relative to the e 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 +### 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. @@ -105,7 +105,7 @@ The following table explains briefly the configurable aspects of `igBulletGraph` > **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 +### Property settings The following table maps the desired behavior to its respective property settings. @@ -174,7 +174,7 @@ The following table maps the desired behavior to its respective property setting -### Example +### Example The screenshot below demonstrates how the `igBulletGraph` looks as a result of the following settings: @@ -209,9 +209,9 @@ Following is the code that implements this example. ``` -## Related Content +## Related Content -### Topics +### Topics The following topics provide additional information related to this topic. @@ -229,7 +229,7 @@ This topic explains, with code examples, how to configure the comparative measur - [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 +### Samples The following samples provide additional information related to this topic. 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 index 31f137fcb5..ca9bbca351 100644 --- 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 @@ -49,9 +49,9 @@ This topic contains the following sections: - [Topics](#topics) -## Introduction +## Introduction -#### Tooltips configuration summary +#### 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. @@ -59,7 +59,7 @@ Tooltips are configurable in terms of visibility (can be enabled/disabled), dela By default, tooltips are disabled. -### Tooltips configuration summary chart +### Tooltips configuration summary chart The following table maps the configurable aspects of the `igBulletGraph` control related to tooltips to the properties that manage them. @@ -109,11 +109,11 @@ The following table maps the configurable aspects of the `igBulletGraph` control > **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 +## Enabling/Disabling Tooltips You can show or hide (default setting) the tooltips on a `igBulletGraph`. -### Property settings +### Property settings The following table maps the desired behavior to property settings. @@ -123,7 +123,7 @@ Enable tooltips | | false -### Code Example +### Code Example The following code example enables the tooltips: @@ -137,10 +137,10 @@ $("#bulletgraph").igBulletGraph({ ``` -## Configuring the Tooltip Delay +## 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 +### Property settings The following table maps the desired behavior to property settings. @@ -149,7 +149,7 @@ 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 +### Code Example The following code example sets the tooltip delay to 2000 milliseconds: @@ -164,9 +164,9 @@ $("#bulletgraph").igBulletGraph({ ``` -## Configuring a Custom Tooltip for the Performance Bar +## Configuring a Custom Tooltip for the Performance Bar -### Overview +### Overview The default value of the tooltip is pre-configured depending on whether the property has been initialized. @@ -184,7 +184,7 @@ If the `valueName` property has not been initialized, the default format of the To change the data (and/or its look-and-feel) presented by the tooltip, you can set it to a custom template. -### Property settings +### Property settings The following table maps the desired behavior to its respective property settings. @@ -193,7 +193,7 @@ 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 +### Example The screenshot below demonstrates how the tooltip of the `igBulletGraph`’s performance bar looks as a result of the following settings: @@ -233,11 +233,11 @@ Following is the code that implements this example. ``` -## Configuring a Custom Tooltip for the Comparative Marker +## 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 +### Property settings The following table maps the desired behavior to its respective property settings. @@ -247,7 +247,7 @@ 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 +### Example The code below illustrates displaying the value presented in the tooltip of the comparative marker as a result of the following settings: @@ -288,12 +288,12 @@ Following is the code that implements this example. ``` -## Configuring a Custom Tooltip for the Comparative Ranges +## 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 +### Property settings The following table maps the desired behavior to its respective property settings. @@ -303,7 +303,7 @@ 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 +### Example The screenshot below demonstrates displaying the value presented in the tooltip of the comparative range as a result of the following settings: @@ -364,7 +364,7 @@ Following is the code that implements this example. ``` -## Configuring tooltips sample +## 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. @@ -375,9 +375,9 @@ In the sample's context, even though these tasks are executed simultaneously at [{environment:SamplesEmbedUrl}/bullet-graph/tooltip-settings]({environment:SamplesEmbedUrl}/bullet-graph/tooltip-settings)
-## Related Content +## Related Content -### Topics +### Topics The following topics provide additional information related to this topic. 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 index d0b603a413..f13c794702 100644 --- 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 @@ -41,9 +41,9 @@ This topic contains the following sections: - [Samples](#samples) -## Introduction +## Introduction -### Scale orientation and direction configuration summary +### 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. @@ -60,7 +60,7 @@ The scale direction is the direction in which the performance bar extends and th Scale direction is defined by the property of the control. The default orientation is standard. -### Scale orientation and direction configuration summary chart +### 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. @@ -70,11 +70,11 @@ Scale orientation | Horizontal or vertical orientation of the bullet graph scale Scale direction | Direction of the bullet graph, standard or inverted. | -## Configuring the Scale Orientation +## Configuring the Scale Orientation The orientation (horizontal or vertical) of the bullet graph is specified by the property of the control. -### Property settings +### Property settings The following table maps the desired configuration to its respective property settings. @@ -84,7 +84,7 @@ Specify horizontal orientation | Example +### Example The screenshot below demonstrates how the `igBulletGraph` looks as a result of the following settings: @@ -108,9 +108,9 @@ $('#igBulletGraph').igBulletGraph({ ``` -## Configuring the Scale Direction (Scale Inversion) +## Configuring the Scale Direction (Scale Inversion) -### Overview +### 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): @@ -128,7 +128,7 @@ When the direction is inverted, the scale begins at the top edge of the Graph ar ![](images/igBulletGraph_Configuring_the_Orientation_and_Direction_8.png) -### Property settings +### Property settings The following table maps the desired <configuration/behaviors> to its respective property settings. @@ -138,7 +138,7 @@ Configure standard direction | Example – inverted direction at horizontal orientation +### Example – inverted direction at horizontal orientation The screenshot below demonstrates how the igBulletGraph looks as a result of the following settings: @@ -162,7 +162,7 @@ $('#igBulletGraph').igBulletGraph({ }); ``` -### Example – inverted direction at vertical orientation +### Example – inverted direction at vertical orientation The screenshot below demonstrates how the `igBulletGraph` looks as a result of the following settings: @@ -188,13 +188,13 @@ $('#igBulletGraph').igBulletGraph({ ``` -## Related Content +## Related Content -### Topics +### 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 +### Samples The following samples provide additional information related to this topic. 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 index 35a8ab5d00..09bf1e37a5 100644 --- 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 @@ -30,9 +30,9 @@ Issue | Description | Status 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 +## igBulletGraph -#### Only one performance bar and one comparative marker supported +#### Only one performance bar and one comparative marker supported The `igBulletGraph` control supports only one performance bar and one comparative marker. @@ -40,7 +40,7 @@ The `igBulletGraph` control supports only one performance bar and one comparativ > 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 +#### 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. diff --git a/docs/jquery/src/content/en/topics/controls/igbulletgraph/overview.mdx b/docs/jquery/src/content/en/topics/controls/igbulletgraph/overview.mdx index 8bcd8e35b4..e55583520a 100644 --- a/docs/jquery/src/content/en/topics/controls/igbulletgraph/overview.mdx +++ b/docs/jquery/src/content/en/topics/controls/igbulletgraph/overview.mdx @@ -45,10 +45,10 @@ This topic contains the following sections: - [Resource](#related-resource) -## Introduction +## Introduction -#### igBulletGraph summary +#### 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. @@ -57,7 +57,7 @@ The `igBulletGraph` control is an **{environment:ProductName}**™ con 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 +## 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. @@ -78,10 +78,10 @@ The igBulletGraph control provides built-in support for animation by its Logical areas and Configurable Visual Elements Summary +## Logical areas and Configurable Visual Elements Summary -### Logical areas +### Logical areas The user-visible area of the igBulletGraph control is logically divided into a Graph area and a Reserved area. @@ -107,7 +107,7 @@ 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 +### Configurable visual elements The `igBulletGraph` control features the following visual elements (See the picture below.): @@ -126,9 +126,9 @@ The `igBulletGraph` control features the following visual elements (See the pict - 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 -### Configurable visual elements and related properties summary +### Configurable visual elements and related properties summary There are several specific aspects in which each element can be configured. @@ -145,7 +145,7 @@ The following table provides an overview of the configurable aspects of the visu | [Tooltips](#tooltips) | Display delay | -### Scale +### Scale The following pictures illustrate the scale-related extents, listed in the table below. @@ -296,7 +296,7 @@ The following table maps the configurable aspects related to the scale of the bu - [Configuring the Scale (*igBulletGraph*)](/configuring/elements/scale/igbulletgraph-configuring-the-scale.mdx) -### Performance bar +### Performance bar The following picture illustrates the performance-bar-related extents, listed in the table below. @@ -359,7 +359,7 @@ The following table maps the configurable aspects related to the performance bar - [Configuring the Performance Bar (*igBulletGraph*)](/configuring/elements/igbulletgraph-configuring-the-performance-bar.mdx) -### Comparative marker +### Comparative marker The following picture illustrates the comparative-market-related extents, listed in the table below. @@ -408,7 +408,7 @@ The following table maps the configurable aspects related to the comparative mar - [Configuring the Comparative Marker (*igBulletGraph*)](/configuring/elements/igbulletgraph-configuring-the-comparative-marker.mdx) -### Comparative ranges +### Comparative ranges The following picture illustrates the comparative-ranges-related extents, listed in the table below. @@ -482,7 +482,7 @@ The following table maps the configurable aspects related to the comparative ran - [Configuring Comparative Ranges (*igBulletGraph*)](/configuring/elements/igbulletgraph-configuring-comparative-ranges.mdx) -### Background +### Background The following picture illustrates the background-related extents, listed in the table below. @@ -529,7 +529,7 @@ The following table maps the configurable aspects related to the background of t - [Configuring the Background (*igBulletGraph*)](/configuring/elements/igbulletgraph-configuring-the-background.mdx) -### Tooltips +### Tooltips The following table maps the configurable aspects of the `igBulletGraph` control related to tooltips to the properties that manage them. @@ -579,7 +579,7 @@ The following table maps the configurable aspects of the `igBulletGraph` control - [Configuring the Tooltips (*igBulletGraph*)](/configuring/elements/igbulletgraph-configuring-the-tooltips.mdx) -## Default Configuration +## 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. @@ -587,7 +587,7 @@ The following picture demonstrates a `igBulletGraph` displayed with default sett ![](images/igBulletGraph_Overview_13.png) -## Requirements +## 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. @@ -596,9 +596,9 @@ In order for the bullet graph to display the performance value(s), the Related Content +## Related Content -### Topics +### Topics The following topics provide additional information related to this topic. @@ -612,7 +612,7 @@ The following topics provide additional information related to this topic. - [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 +### Samples The following samples provide additional information related to this topic. @@ -621,7 +621,7 @@ The following samples provide additional information related to this topic. - [Animated Transitions]({environment:SamplesUrl}/bullet-graph/animated-transitions): This sample demonstrates animated transitions between different sets of settings in the igBulletGraph control. -### Resource +### Resource The following material (available outside the Infragistics family of content) provides additional information related to this topic. 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 index 4d34f69c30..7c1977e283 100644 --- 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 @@ -44,7 +44,7 @@ The following screenshot displays the igCategoryChart control using the Callouts ![](images/categorychart-callouts-layer-01.png) -## Related Topics: +## Related Topics: - [Final Value Layer](/igcategorychart-final-value-layer.mdx) 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 index 989db7a5f0..9586ba6bc7 100644 --- 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 @@ -28,7 +28,7 @@ The following screenshot displays the igCategoryChart control using the Category ![](images/categorychart-category-highlight-layer-01.png) -## Related Topics: +## Related Topics: - [Item Highlight Layer](/igcategorychart-item-highlight-layer.mdx) 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 index e29a2620f3..1dd676294e 100644 --- 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 @@ -28,7 +28,7 @@ The following screenshot displays the igCategoryChart control using the Category ![](images/categorychart-category-tooltip-layer-01.png) -## Related Topics: +## Related Topics: - [Item Tooltip Layer](/igcategorychart-item-tooltip-layer.mdx) 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 index d4a638528b..a3b81f32d9 100644 --- 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 @@ -72,6 +72,6 @@ The following screenshot displays the igCategoryChart control using horizontal c ![](images/categorychart-crosshairs-layer-01.png) -## Related Topics: +## 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/final-value-layer.mdx b/docs/jquery/src/content/en/topics/controls/igcategorychart/annotations-and-interactions/final-value-layer.mdx index 77dc3d8e96..d749593130 100644 --- 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 @@ -28,7 +28,7 @@ The following screenshot displays the igCategoryChart control using the Final Va ![](images/categorychart-final-value-layer-01.png) -## Related Topics: +## Related Topics: - [Crosshairs Layer](/igcategorychart-crosshairs-layer.mdx) 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 index fb265f9fc0..5799786528 100644 --- 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 @@ -28,7 +28,7 @@ The following screenshot displays the igCategoryChart control using the Item Hig ![](images/categorychart-item-highlight-layer-01.png) -## Related Topics: +## Related Topics: - [Category Highlight Layer](/igcategorychart-category-highlight-layer.mdx) 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 index 04f5f6a2f8..44aa4a17d2 100644 --- 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 @@ -28,7 +28,7 @@ The following screenshot displays the igCategoryChart control using the Item Too ![](images/categorychart-item-tooltip-layer-01.png) -## Related Topics: +## Related Topics: - [Category Tooltip Layer](/igcategorychart-category-tooltip-layer.mdx) 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 index b83f32fd67..403e275bc8 100644 --- 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 @@ -19,7 +19,7 @@ This topic contains the following sections: - [Code Snippet](#codesnippet) - [Related Topics](#relatedtopics) -### Configuring XAxis and YAxis Major and Minor Intervals +### Configuring XAxis and YAxis Major and Minor Intervals In order to configure|Use this property|And set it to ---|---|--- @@ -30,7 +30,7 @@ The frequency of minor interval gridlines | `xAxisMinorInterval`,`yAxisMinorInte 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 +### Code Snippet The following code snippet demonstrates how to configure the interval on the x-axis. @@ -52,7 +52,7 @@ $(function () { ![](images/categorychart-intervals-01.png) -## Related Topics: +## Related Topics: - [Walkthrough](/igcategorychart-adding.mdx) 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 index baaeaebf5a..e447bd6604 100644 --- 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 @@ -16,7 +16,7 @@ This topic contains the following sections: - [Code Snippet](#codesnippet) - [Related Topics](#relatedtopics) -### Label Settings +### 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: @@ -29,7 +29,7 @@ Property Name|Property Type|Description `xAxisLabelLeftMargin`, `yAxisLabelLeftMargin`, `xAxisLabelRightMargin`, `yAxisLabelRightMargin`|Number|Determines the margin applied to each x-axis or y-axis labels -### Label Styling +### 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 @@ -38,7 +38,7 @@ Property Name|Property Type|Description `xAxisLabelTextColor`,`yAxisLabelTextColor`|Brush|Determines the text color of the x-axis or y-axis labels -### Code Snippet +### Code Snippet The following code example shows how to style labels on the x-axis using style properties: *In HTML:* @@ -61,7 +61,7 @@ The following screenshot demonstrates the igCategoryChart control with the x-axi ![](images/categorychart-configuring-axis-labels-01.png) -## Related Topics: +## Related Topics: - [Walkthrough](/igcategorychart-adding.mdx) 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 index 10c35c57f4..a629e6d47f 100644 --- 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 @@ -15,7 +15,7 @@ This topic contains the following sections: - [Code Snippet](#codesnippet) - [Related Topics](#relatedtopics) -### Property Settings +### 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 @@ -24,7 +24,7 @@ Property Name|Property Type|Description `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 +### Code Snippet The following code snippet demonstrates how to set the color, length and thickness of the tickmark on the x-axis @@ -43,7 +43,7 @@ $(function () { ![](images/categorychart-configuring-axis-tickmarks-01.png) -## Related Topics: +## Related Topics: - [Walkthrough](/igcategorychart-adding.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 index ea7816ca32..dd0878bf72 100644 --- 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 @@ -15,10 +15,10 @@ This topic contains the following sections: - [Code Snippet](#codesnippet) - [Related Topics](#relatedtopics) -### Overview +### 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 +### Code Snippet The following sample code demonstrates how to change the axis range on the y-axis. *In HTML:* @@ -35,7 +35,7 @@ $(function () { ![](images/categorychart-configuring-axis-ranges-01.png) -### Related Topics: +### Related Topics: - [Adding igCategoryChart](/igcategorychart-adding.mdx) 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 index f5aef96088..4c2b0804f4 100644 --- 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 @@ -14,7 +14,7 @@ This topic contains the following sections: - [Code Snippet](#codesnippet) - [Related Topics](#relatedtopics) -### Property Settings +### 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 @@ -31,7 +31,7 @@ Property Name|Property Type|Description `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 +### Code Snippet The following code example shows how to customize the titles on the x-axis and y-axis: *In HTML:* @@ -53,7 +53,7 @@ $(function () { ![](images/categorychart-configuring-axis-title-01.png) -## Related Topics: +## Related Topics: - [Walkthrough](/igcategorychart-adding.mdx) 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 index 65235cada9..ceeca7f493 100644 --- 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 @@ -6,7 +6,7 @@ slug: igcategorychart-accessibility-compliance # Accessibility Compliance (igCategoryChart) -##Topic Overview +## Topic Overview ### Purpose @@ -23,7 +23,7 @@ The following topics are prerequisite to understanding this topic: - [**Adding igCategoryChart**](/igcategorychart-adding.mdx): This topic demonstrates how to create add the `igCategoryChart` control and bind it to data. -##Accessibility Compliance Reference +## Accessibility Compliance Reference ### Introduction 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 index 9642549d01..86a3b6dd40 100644 --- 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 @@ -21,7 +21,7 @@ The following topics are prerequisite to understanding this topic: - [](/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 +## igCategoryChart API Reference ### Introduction 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 index 240d8d32ef..63cb3819fd 100644 --- 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 @@ -30,12 +30,12 @@ This topic contains the following sections: - [Steps](#HSteps) - [Related Topics](#relatedcontent) -### Binding to a JavaScript Array +### Binding to a JavaScript Array -#### Introduction +#### Introduction This procedure demonstrates how to bind the igCategoryChart control to a JavaScript data array. -#### Prerequisites +#### Prerequisites To complete the procedure, you need the following: - An HTML5 web page @@ -43,13 +43,13 @@ To complete the procedure, you need the following: For detailed information on instantiation and configuration of an igCategoryChart see [Adding igCategoryChart](/igcategorychart-adding.mdx). -#### Preview +#### Preview ![](images/categorychart-data-binding-01.png) -#### Steps +#### Steps The following steps demonstrate how to bind the igCategoryChart control to a JavaScript data array. **Define the data array** @@ -96,12 +96,12 @@ $(function() { ``` -### Binding to a Hierarchical JavaScript Array +### Binding to a Hierarchical JavaScript Array -#### Introduction +#### Introduction This procedure demonstrates how to bind the igCategoryChart control to a “semi-nested” hierarchical JavaScript data array. -#### Prerequisites +#### Prerequisites To complete the procedure, you need the following: - An HTML5 web page @@ -109,13 +109,13 @@ To complete the procedure, you need the following: For detailed information on instantiation and configuration of an igCategoryChart see [Adding igCategoryChart](/igcategorychart-adding.mdx). -#### Preview +#### Preview ![](images/categorychart-data-binding-02.png) -#### Steps +#### Steps The following steps demonstrate how to bind the igCategoryChart control to a JavaScript data array. **Define the data array** @@ -186,7 +186,7 @@ To do this, assign the data array defined in the previous step to the dataSource ``` -## Related Topics: +## Related Topics: - [Walkthrough](/igcategorychart-adding.mdx) 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 index 4f79bd9bd0..1bc9d7b8cc 100644 --- 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 @@ -16,7 +16,7 @@ This topic contains the following sections: - [Code Snippet](#codesnippet) - [Related Topics](#relatedtopics) -### Property Settings +### 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 @@ -38,7 +38,7 @@ Property Name|Property Type|Description `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 +### Code Snippet The following code example shows how to customize the title and subtitle: *In HTML:* @@ -62,7 +62,7 @@ $(function () { ![](images/categorychart-configuring-title-01.png) -## Related Topics: +## Related Topics: - [Adding igCategoryChart](/igcategorychart-adding.mdx) 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 index fd671b72eb..25d94d0c5a 100644 --- 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 @@ -14,7 +14,7 @@ This section provides you with useful information about working with the igCateg The appearance of chart markers is managed through the marker properties of the igCategoryChart class. -#### Marker Appearance +#### Marker Appearance The following table lists all marker appearance properties. @@ -26,7 +26,7 @@ Property Name|Property Type|Description -#### Marker Types +#### Marker Types Property Name|Property Type|Description ---|---|--- `circleMarker`|MarkerType|Displays the Circle marker type. @@ -58,7 +58,7 @@ The following screenshot displays the igCategoryChart control using the Line cha ![](images/categorychart-chart-markers-01.png) -#### Marker Brush and Outline +#### Marker Brush and Outline The code snippets below demonstrate how to change the markerBrushes and markerOutlines for the igCategoryChart. @@ -77,7 +77,7 @@ The following screenshot displays the igCategoryChart control using the Line cha ![](images/categorychart-chart-markers-02.png) -## Related Topics: +## Related Topics: - [Adding igCategoryChart](/igcategorychart-adding.mdx) 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 index b2b783cf52..582de3ee7d 100644 --- a/docs/jquery/src/content/en/topics/controls/igcategorychart/categorychart-styling.mdx +++ b/docs/jquery/src/content/en/topics/controls/igcategorychart/categorychart-styling.mdx @@ -53,7 +53,7 @@ This topic contains the following sections: - [Resources](#resources) -## Introduction +## Introduction ### Introduction to themes @@ -67,7 +67,7 @@ Detailed information for using themes with {environment:ProductName} l 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 +## Themes Summary A summary of the `igCategoryChart` control’s available themes. @@ -92,9 +92,9 @@ A summary of the `igCategoryChart` control’s available themes. -## Required Cascading Style Sheets (CSS) +## Required Cascading Style Sheets (CSS) -### Required CSS summary +### Required CSS summary The following CSS resources are necessary to correctly render charts: @@ -105,7 +105,7 @@ In the code snippets that follow, it is assumed that the CSS resources are locat >**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 +### Required CSS code: HTML **In HTML:** @@ -114,7 +114,7 @@ In the code snippets that follow, it is assumed that the CSS resources are locat ``` -### Required CSS code: ASPX +### Required CSS code: ASPX **In ASPX:** @@ -124,7 +124,7 @@ In the code snippets that follow, it is assumed that the CSS resources are locat ``` -## Chart Styles Reference +## Chart Styles Reference ### Style reference summary @@ -146,10 +146,10 @@ A summary of the `igCategoryChart` style’s purpose and functionality. >**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 +## Modifying the Chart-Specific Visual Elements Using Themes -### Introduction +### 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. @@ -164,7 +164,7 @@ To complete the procedure, you need the following: - An HTML5 web page with an existing `igCategoryChart` control -### Overview +### Overview A high level overview of the process: @@ -173,7 +173,7 @@ A high level overview of the process: 3. [Change the link from the default chart CSS file to the modified file](#change-css-links) 4. [Verify the result](#final-result) -### Steps +### Steps Demonstrate how to modify the default IG Chart styles with your preferred settings. @@ -272,9 +272,9 @@ Demonstrate how to modify the default IG Chart styles with your preferred settin To verify that the chart colors and styles changed, save the web page and open it in your browser. -## Related Content +## Related Content -### Topics +### Topics The following topics provide additional information related to this topic. @@ -283,7 +283,7 @@ The following topics provide additional information related to this topic. - [Adding igCategoryChart](/igcategorychart-adding.mdx): Demonstrates how to create the `igCategoryChart` control and bind it to data. -###Resources +### Resources The following third party material provides additional information related to this topic. 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 index eae835cc20..733c8a112e 100644 --- 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 @@ -17,12 +17,12 @@ The chart resizes allowing for the title and subtitle information. - [Configuring the Transition-In Animations](#configuringthetransitioninanimations) - [Related Topics](#relatedtopics) -### Overview +### 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 +## 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. @@ -52,7 +52,7 @@ Many types of animated transitions are supported based on the nature of the move * SweepFromValueAxisMaximum – Series sweeps in from the value axis maximum. * SweepFromValueAxisMinimum – Series sweeps in from the value axis minimum. -## Supported transition speed types +## 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. @@ -60,10 +60,10 @@ The transition’s speed type determines the speed of the individual items of th * 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 +## 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 +## 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. @@ -82,7 +82,7 @@ $(function () { }); ``` -## Related Topics: +## Related Topics: - [Adding igCategoryChart](/igcategorychart-adding.mdx) 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 index 04b7a271ea..3b806836a1 100644 --- a/docs/jquery/src/content/en/topics/controls/igcombo/accessibility-compliance.mdx +++ b/docs/jquery/src/content/en/topics/controls/igcombo/accessibility-compliance.mdx @@ -6,10 +6,10 @@ slug: igcombo-accessibility-compliance # Accessibility Compliance (igCombo) -##igCombo Accessibility Compliance +## igCombo Accessibility Compliance -###Introduction +### Introduction All of the {environment:ProductName}™ controls and components comply with Section 508, Subpart 1194.22 of the Rehabilitation Act of 1973. @@ -18,7 +18,7 @@ To meet the requirements each accessibility rule, in some cases, you may need to >**Note:** As jQuery controls are client-only, some of the rules are not supported and are marked as limitations. -###Accessibility reference chart +### Accessibility reference chart The table below briefly explains how the igCombo complies to the corresponding Section 508 rules. @@ -37,7 +37,7 @@ The table below briefly explains how the igCombo complies to the corresponding S - **p:** When a timed response is required, the user is alerted and given sufficient time to indicate more time is required. -##Related Topics +## Related Topics Following are some other topics you may find useful. 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 index 1184dc8a69..c33a1d26a3 100644 --- a/docs/jquery/src/content/en/topics/controls/igcombo/binding/cascading.mdx +++ b/docs/jquery/src/content/en/topics/controls/igcombo/binding/cascading.mdx @@ -6,7 +6,7 @@ slug: igcombo-cascading # Creating Cascading igCombos -##Topic Overview +## Topic Overview ### Purpose @@ -36,24 +36,24 @@ This topic contains the following sections: - [Finished Example](#finished-example) - [Related Content](#related-content) -##Creating Cascading Combos -### Introduction +## 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 +### Preview The following screenshot is a preview of the final result. ![](images/01_Cascading_Combo_with_Individaul_Data_Source_1.png) -### Prerequisites +### Prerequisites To comple the procedure you need the following: - A standard HTML page opened for editing. -### Steps +### Steps The following steps demonstrate how to bind the parent and child `igCombo` controls to different data sources. @@ -163,7 +163,7 @@ The following steps demonstrate how to bind the parent and child `igCombo` contr 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 +### Finished Example The following is the full code that was created for this sample to demonstrate what your page should look like when complete: @@ -219,9 +219,9 @@ The following is the full code that was created for this sample to demonstrate w ``` -##Related Content +## Related Content -### Samples +### Samples The following samples provide additional information related to this topic. 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 index 6bb2f2fe27..899fa98de5 100644 --- 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 @@ -39,7 +39,7 @@ 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 +## Binding igCombo Data – Conceptual Overview ### Requirements for binding @@ -76,7 +76,7 @@ The following lists the supported data sources and some basic specifics for thei - **`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 +## 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. @@ -88,7 +88,7 @@ The following class diagram demonstrates how data binding works. ![](images/igCombo_DataBinding_01.png) -## Binding igCombo Data – Procedure +## Binding igCombo Data – Procedure ### Introduction @@ -265,17 +265,17 @@ Following is a conceptual overview of the process: Render() %> ``` -## Demos +## Demos Online Combo binding examples -### JSON Binding +### 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 +### HTML Binding igCombo can bind directly to an HTML SELECT element. @@ -283,14 +283,14 @@ igCombo can bind directly to an HTML SELECT element. [{environment:SamplesEmbedUrl}/combo/html-binding]({environment:SamplesEmbedUrl}/combo/html-binding)
-### XML 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 +## Related Topics Following are some other topics you may find useful. 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 index 570d01fa19..e9c5d88883 100644 --- 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 @@ -6,7 +6,7 @@ slug: igcombo-binding-to-data # Binding igCombo to Data -##In This Group of Topics +## In This Group of Topics ### Introduction 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 index 6f33ab6fd1..7c599fca7e 100644 --- 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 @@ -17,22 +17,22 @@ This topic contains the following sections: - [Details](#Details) - [Related Content](#Related_Content) -### Preview +### Preview The following is a preview of the final result.
[{environment:SamplesEmbedUrl}/combo/angular]({environment:SamplesEmbedUrl}/combo/angular)
-### Requirements +### 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 +### 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 +### 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 index 54e22e045d..4e330f1843 100644 --- 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 @@ -31,27 +31,27 @@ This topic contains the following sections: - [Related Content](#_Related_Content) -### Preview +### Preview The following screenshot is a preview of the final result. ![](images/igCombo_init_MVC_example.png) -### Requirements +### 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 +### 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 +### Steps ​Create an `Order` class @@ -233,6 +233,6 @@ Run the sample and select an item from the dropdown. After that click on "Update ![](images/igCombo_updated_MVC_example.png) -### Related Content +### 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 index 23235e2f2e..5afc9cef91 100644 --- 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 @@ -7,13 +7,13 @@ import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; # Configuring Auto-Suggest (igCombo) -##Topic Overview -###Purpose +## Topic Overview +### Purpose This topic explains how to configure auto-suggest and different filtering options of the `igCombo`™ control. -###In this topic +### In this topic This topic contains the following sections: @@ -27,7 +27,7 @@ This topic contains the following sections: - [Auto-suggest property reference](#auto_suggest_property_reference) - [Related Topics](#related_topics) -###Required background +### Required background The list below lists the background you need for fully understanding the information in this topic. @@ -48,14 +48,14 @@ You need to first read the following topics: - [Adding igCombo](/igcombo-getting-started.mdx) - [Binding igCombo to Data](/binding/igcombo-binding-to-data.mdx) -##igCombo Configuration Overview +## igCombo Configuration Overview -###Control configuration chart +### Control configuration chart The table below lists the configurable behaviors of the `igCombo` control. -###Auto-suggest +### 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: @@ -67,10 +67,10 @@ The auto-suggest feature is the combination of dropdown list filtering and match - -##Configure Auto-Suggest +## Configure Auto-Suggest -###Auto-Suggest details +### 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. @@ -83,7 +83,7 @@ Additionally, the filtering and highlighting behaviors can be customized to chan ![](images/igCombo_AutoSuggest_01.png) -###Auto-Suggest property settings +### Auto-Suggest property settings The following table maps the desired behaviors to property settings. The properties are accessed through the `igCombo` control’s options. @@ -101,7 +101,7 @@ The following table maps the desired behaviors to property settings. The propert | Enable auto-complete | | true | -###Example: auto-suggest with local filtering +### Example: auto-suggest with local filtering The following settings demonstrate how to configure the auto-suggest behavior to match list values from local data. @@ -131,7 +131,7 @@ The following settings demonstrate how to configure the auto-suggest behavior to -##Example: case-sensitive auto-suggest with local filtering +## 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. @@ -164,7 +164,7 @@ The following settings demonstrate how to configure the auto-suggest behavior to -###Example: auto-suggest with auto-complete and local filtering +### Example: auto-suggest with auto-complete and local filtering @@ -195,14 +195,14 @@ The following settings demonstrate how to configure the auto-suggest behavior to
-###Auto-suggest property reference +### Auto-suggest property reference For detailed information about these properties, refer to their listing in the property reference section: - -###Related Topics +### Related Topics Following are some other topics you may find useful. 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 index b4d04d9d79..c0dfc5eb73 100644 --- 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 @@ -7,12 +7,12 @@ import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; # Configuring Remote Filtering (igCombo) -##Topic Overview +## Topic Overview This topic explains how to configure auto-suggest and different filtering options in the `igCombo`™ control. -###In this topic +### In this topic This topic contains the following sections: @@ -28,7 +28,7 @@ This topic contains the following sections: - [ASP.NET MVC list filtering configuration example](#asp_example) - [Related Topics](#related_topics) -###Required background +### Required background The table bellows lists the background you need for fully understanding the information in this topic. @@ -51,10 +51,10 @@ You need to first read the following topics: - [Adding igCombo](/igcombo-getting-started.mdx) - [Configure igCombo](/igcombo-configuring.mdx) -##igCombo Configuration Overview +## igCombo Configuration Overview -###Control configuration chart +### Control configuration chart The table below lists the configurable behaviors of the `igCombo` control. @@ -66,15 +66,15 @@ The table below lists the configurable behaviors of the `igCombo` control. | 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 +## Configure OData list filtering -###OData list filtering configuration details +### 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 +### OData list filtering configuration property settings The table below maps the desired configurations to property settings. The properties are accessed through the `igCombo` options. @@ -89,7 +89,7 @@ For detailed information about these properties, refer to their listing in the p - `igCombo` Options -###OData list filtering configuration example +### OData list filtering configuration example #### Introduction @@ -226,17 +226,17 @@ $("#comboTarget").igCombo({ %> ``` -##Configure ASP.NET MVC list filtering +## Configure ASP.NET MVC list filtering -###ASP.NET MVC list filtering configuration details +### 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 +### 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]. @@ -253,7 +253,7 @@ in the property reference section: - - -###ASP.NET MVC list filtering configuration example +### ASP.NET MVC list filtering configuration example #### Introduction @@ -305,7 +305,7 @@ Following is a conceptual overview of the process: comboViewModel.FilterExprUrlKey = "filter"; ``` -##Related Topics +## Related Topics Following are some other topics you may find useful. 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 index b6f81912d1..619e1bbda8 100644 --- 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 @@ -7,15 +7,15 @@ import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; # Configuring Selection (igCombo) -##Topic Overview +## Topic Overview -###Purpose +### 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 +### In this topic This topic contains the following sections: @@ -37,7 +37,7 @@ This topic contains the following sections: - [Steps](#cancel_selection_steps) - [Related Topics](#related_topics) -###Required background +### Required background The table below lists the background you need to fully understand the information in this topic. @@ -53,10 +53,10 @@ 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 +## igCombo Selection Configuration Overview -###Selection configuration +### Selection configuration The table below lists the configurable behaviors of the `igCombo` control. @@ -71,10 +71,10 @@ The table below lists the configurable behaviors of the `igCombo` control. | Cancel Selection | Cancel the selection changing event to cancel a selection operation. | | -##Configure Multiple Selection +## Configure Multiple Selection -###Multiple selection details +### 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 ``', '``. @@ -83,7 +83,7 @@ Finally, you can enable checkboxes to facilitate multiple selection. ![](images/Configure_Selection_in_the_igCombo__01.png) -###Multiple selection settings +### Multiple selection settings The table below maps the desired configurations to property settings. The properties are accessed through the `igCombo` control options. @@ -95,7 +95,7 @@ The table below maps the desired configurations to property settings. The proper | Show checkboxes | | true | -###Code Example: Configure checkboxes +### 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: @@ -134,24 +134,24 @@ Following is the full code used in this example to configure multiple selection %> ``` -###Multiple selection property reference +### 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 -######Clear selection details +###### 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 +###### Clear selection settings The table below maps the desired behaviors to property settings. The properties are accessed through the `igCombo` options. @@ -163,15 +163,15 @@ The table below maps the desired behaviors to property settings. The properties | Handle an event after selection has been changed | | -###Handle selection events +### Handle selection events -######Selection events details +###### 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 +###### Selection events settings The table below maps the desired configurations to property settings. The properties are accessed through the `igCombo` options. @@ -183,15 +183,15 @@ The table below maps the desired configurations to property settings. The proper | Handle an event after selection has been changed | | `function()` | -##Cancel Selection +## Cancel Selection -###Introduction +### Introduction By handling the `selectionChanging` event, you can cancel a selection operation. -###Overview +### Overview - Following is a conceptual overview of the process: @@ -200,7 +200,7 @@ By handling the `selectionChanging` event, you can cancel a selection operation. - Cancelling the event by returning false -###Steps +### Steps 1. Handle the `selectionChanging` event. @@ -251,7 +251,7 @@ By handling the `selectionChanging` event, you can cancel a selection operation. ``` -##Related Topics +## Related Topics Following are some other topics you may find useful. 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 index 860e0dd57b..194d4c109f 100644 --- a/docs/jquery/src/content/en/topics/controls/igcombo/configuring/configuring.mdx +++ b/docs/jquery/src/content/en/topics/controls/igcombo/configuring/configuring.mdx @@ -6,7 +6,7 @@ slug: igcombo-configuring # Configuring igCombo -##In This Group of Topics +## In This Group of Topics ### Introduction 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 index 4efc2de5d4..448df66eef 100644 --- a/docs/jquery/src/content/en/topics/controls/igcombo/configuring/grouping.mdx +++ b/docs/jquery/src/content/en/topics/controls/igcombo/configuring/grouping.mdx @@ -8,7 +8,7 @@ import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; Grouping functionality will allow you to unite items into groups by certain criteria or common category. -##Topic overview +## 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 @@ -19,13 +19,13 @@ This topic contains the following sections: - [Grouping overview](#groupingOverview) - [Related content](#relatedContent) -## Introduction +## 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 +## 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:** @@ -64,8 +64,8 @@ $(".selector").igCombo({ > **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 +## Related content +### API help - 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 index 0177b9a40b..68b71d080a 100644 --- 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 @@ -46,7 +46,7 @@ This topic contains the following sections: - [Resources](#resources) -## Introduction +## Introduction ### Knockout support summary @@ -63,7 +63,7 @@ In addition to that, the Knockout extension for `igCombo` can be configured in a >**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 ### Configuring igCombo with knockout support summary chart @@ -80,7 +80,7 @@ The following table maps the `igCombo` control configuration tasks related to Kn | 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 ### Code examples summary @@ -90,7 +90,7 @@ 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 +## 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. @@ -199,10 +199,10 @@ function viewModel() { 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 +## Related Content -### Topics +### Topics The following topics provide additional information related to this topic. @@ -211,7 +211,7 @@ The following topics provide additional information related to this topic. - [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 +### Samples The following samples provide additional information related to this topic. @@ -223,7 +223,7 @@ The following samples provide additional information related to this topic. >**Note:** The Knockout extensions do not work with the {environment:ProductNameMVC}. -### Resources +### Resources The following material (available outside the Infragistics family of content) provides additional information related to this topic. 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 index a243c56efe..2b2e21d714 100644 --- 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 @@ -7,7 +7,7 @@ import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; # Configuring Load-on-Demand (igCombo) -##Topic Overview +## Topic Overview ### Purpose @@ -47,7 +47,7 @@ This topic contains the following sections: - [Samples](#samples) -##Introduction +## Introduction ### Load-on-Demand feature summary @@ -57,7 +57,7 @@ The `igCombo` control supports Load-on-Demand feature. Enabling Load-on-Demand s 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 ### Enabling Load-on-Demand summary @@ -81,7 +81,7 @@ 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 ### Configuring Load-on-Demand summary @@ -96,10 +96,10 @@ The following table lists the configurable aspects of the `igCombo` control rega | 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 +## Code Example: Load-on-Demand, Paging and Header and Footer Templates -### Description +### Description This example demonstrates how to configure the Load-on-Demand feature for a remote OData data source with a specific page size. @@ -109,7 +109,7 @@ The `headerTemplate` option is assigned a string that represents an HTML code an 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 +### Footer template variables The following table lists the available footer template variables. @@ -121,7 +121,7 @@ The following table lists the available footer template variables. | Number of all records on server | {3} | ComboModel.RECORDS_SERVER_TOTAL | -### Code +### Code **In JavaScript:** @@ -160,10 +160,10 @@ $("#combo").igCombo({ ``` -##Related Content +## Related Content -### Topics +### Topics The following topics provide additional information related to this topic. @@ -171,7 +171,7 @@ 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 +### Samples The following samples provide additional information related to this topic. 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 index 9cfaf5fea8..7982891307 100644 --- 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 @@ -7,36 +7,36 @@ import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; # Optimizing Performance (igCombo) -##Topic Overview +## Topic Overview -###Purpose +### Purpose This topic demonstrates how to enable item virtualization for maximum performance while scrolling the `igCombo`™ control. -###Required background +### 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 +## Infragistics Combo Configuration Overview -###Control configuration +### Control configuration Enable the `virtualization` option to make the igCombo’s dropdown scroll quickly even with large amounts of data. -###Virtualization details +### 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 +### Virtualization property settings The table below maps the desired configurations to property settings. The properties are accessed through the `igCombo` control’s options. @@ -47,7 +47,7 @@ The table below maps the desired configurations to property settings. The proper | Enable virtualization | virtualization | true | -###Example: enabling virtualization +### Example: enabling virtualization **In HTML:** @@ -69,14 +69,14 @@ $("#combo").igCombo({ Render() %> ``` -###Virtualization property reference +### Virtualization property reference For detailed information about these properties, refer to their listing in the property reference section: - -##Related Topics +## Related Topics Following are some other topics you may find useful. 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 index f940c198ac..b7fdc230bb 100644 --- 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 @@ -22,20 +22,20 @@ This topic contains the following sections: - [Create an igCombo with TypeScript Data Source](#create_combos) - [Related Content](#Related_Content) -### Preview +### Preview The following screenshot is a preview of the final result. ![](images/igCombo_TypeScript.png) -### Requirements +### 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 +### Overview This topic takes you step-by-step toward creating a TypeScript class, data source and `igCombo`. -### Steps +### Steps ​Create the HTML - we are going to have three combos demonstrating keyboard navigation, multiple selection and filtering respectively. @@ -136,6 +136,6 @@ $(function () { }); ``` -### Related Content +### 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 index 6ea1f2acf8..17958a7ab1 100644 --- a/docs/jquery/src/content/en/topics/controls/igcombo/getting-started.mdx +++ b/docs/jquery/src/content/en/topics/controls/igcombo/getting-started.mdx @@ -6,15 +6,15 @@ slug: igcombo-getting-started # Adding igCombo -##Topic Overview +## Topic Overview -###Purpose +### 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 +### Required background You need to first read the following topics: @@ -22,22 +22,22 @@ 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 +## Create a basic igCombo implementation -###Introduction +### Introduction The following steps demonstrate how to configure basic options and bind to data using both jQuery and ASP.NET MVC. -###Preview +### Preview Following is a preview of the final result. ![](images/igCombo_Auto_Complete.png) -###Requirements +### Requirements To complete the procedure, you need the following: @@ -46,7 +46,7 @@ To complete the procedure, you need the following: - 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 +### Overview Following is a conceptual overview of the process: @@ -56,7 +56,7 @@ Following is a conceptual overview of the process: 3. (Optional) Configuring the width 4. (Optional) Enabling auto-complete -###Steps +### Steps 1. **Instantiate the `igCombo`.** @@ -205,10 +205,10 @@ Following is a conceptual overview of the process: AutoComplete(true) ``` -##Code Examples +## Code Examples -###Examples overview +### Examples overview The following table lists the code examples provided below. @@ -221,7 +221,7 @@ The following table lists the code examples provided below. | Basic ASP.NET MVC Implementation | Shows how to bind to data and set basic options using the {environment:ProductNameMVC} | -###Code Example: Basic jQuery implementation +### Code Example: Basic jQuery implementation The code below demonstrates how to create and configure the `igCombo` control using jQuery with the following parameters: @@ -259,7 +259,7 @@ The code below demonstrates how to create and configure the `igCombo` control us ``` -###Code Example: Basic ASP.NET MVC implementation +### 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: @@ -306,7 +306,7 @@ public class DefaultController : Controller{ }} ``` -##Related Topics +## Related Topics Following are some other topics you may find useful. diff --git a/docs/jquery/src/content/en/topics/controls/igcombo/igcombo.mdx b/docs/jquery/src/content/en/topics/controls/igcombo/igcombo.mdx index 67cf83f166..5df6d97daa 100644 --- a/docs/jquery/src/content/en/topics/controls/igcombo/igcombo.mdx +++ b/docs/jquery/src/content/en/topics/controls/igcombo/igcombo.mdx @@ -6,12 +6,12 @@ slug: igcombo-igcombo # igCombo -##Introduction +## Introduction The `igCombo` is a combo box control built in jQuery that offers auto-complete, auto-suggest, and rich editing capabilities. -##Topics +## Topics The information you need about the Infragistics Combo is covered in the following topics: 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 index 55cadccdb3..4b03e06078 100644 --- a/docs/jquery/src/content/en/topics/controls/igcombo/keyboard-navigation.mdx +++ b/docs/jquery/src/content/en/topics/controls/igcombo/keyboard-navigation.mdx @@ -3,9 +3,9 @@ title: "Keyboard Navigation (igCombo)" slug: igCombo-keyboard-navigation --- -#Keyboard Navigation (igCombo) +# Keyboard Navigation (igCombo) -##Topic overview +## 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 @@ -18,7 +18,7 @@ This topic contains the following sections: - [Ctrl interaction](#ctrlInteraction) - [From browser](#fromBrowser) -## Keyboard interactions +## Keyboard interactions ### Overview @@ -36,7 +36,7 @@ Press| To| When Esc key|Close the drop down| The drop down is opened Enter key|Close the drop down| There is selected item -##Multiselection +## Multiselection Press| To| When ---|---|--- @@ -46,7 +46,7 @@ Press| To| When 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 +### Shift interactions When press|Then ---|--- Shift|The item is highlighted to active state @@ -56,11 +56,11 @@ When press|Then > **Note:** Shift key only select items -###Ctrl interaction (addWithKeyModifier option set to true) +### 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 +## From browser Press| To ---|--- 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 index 15efb19d07..6a528c6501 100644 --- a/docs/jquery/src/content/en/topics/controls/igcombo/known-limitations.mdx +++ b/docs/jquery/src/content/en/topics/controls/igcombo/known-limitations.mdx @@ -7,7 +7,7 @@ slug: igcombo-known-limitations -##Known Issues and Limitations Summary +## Known Issues and Limitations Summary ### Known issues and limitations summary chart @@ -28,14 +28,14 @@ Issue | Description | Status [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 +## Known Issues and Limitations Details -###In IE9 and lower versions placeHolder text is not previewed +### 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 +### 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. @@ -61,12 +61,12 @@ A potential work around for this issue is to set `height` to the item template l }); ``` -###When Grouping and Virtualization are used some items are not rendered properly +### 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 +### 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 +### 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 index 2e02dd6e15..4d1ec0bd47 100644 --- 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 @@ -172,17 +172,17 @@ itemsRendered|Event which is raised after rendering of the combo items completes -###Knockout Integration changes +### 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 +#### 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 +#### Removed options Option| Description ---|--- @@ -240,7 +240,7 @@ var viewModel = new ViewModel(model); >**Note:** This will only work, when there is a change from the `igCombo` to the View-Model. -###Knockout Backwards compatibility +### 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. diff --git a/docs/jquery/src/content/en/topics/controls/igcombo/overview.mdx b/docs/jquery/src/content/en/topics/controls/igcombo/overview.mdx index e26467eadd..c79b26bee2 100644 --- a/docs/jquery/src/content/en/topics/controls/igcombo/overview.mdx +++ b/docs/jquery/src/content/en/topics/controls/igcombo/overview.mdx @@ -6,15 +6,15 @@ slug: igcombo-overview # igCombo Overview -##Topic Overview +## Topic Overview -###Purpose +### Purpose This topic provides conceptual information for the `igCombo`™ control including information regarding: features, binding to data sources, requirements, and templates. -###In this topic +### In this topic This topic contains the following sections: @@ -48,10 +48,10 @@ You need to first read the following topics: You need to first read the following article: [Working with jQuery Widgets](http://learn.jquery.com/jquery-ui/getting-started/) -##Main Features +## Main Features -###Features overview +### Features overview The table below briefly explains the main features of the `igCombo`. @@ -162,15 +162,15 @@ You can use the ASP.NET MVC Helper to use managed code languages to configure th - [{environment:ProductNameMVC} Combo]({environment:SamplesUrl}/combo/aspnet-mvc-helper) -##Minimum Requirements +## Minimum Requirements -###Introduction +### 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 +### Requirements The table below lists the requirements for the `igCombo` control. @@ -187,7 +187,7 @@ The table below lists the requirements for the `igCombo` control. | Base Theme | The base theme contains styles that primarily define the form and function for each widget. | -##Binding to Data Sources +## Binding to Data Sources The following table lists the requirements for binding the `igCombo` control to data sources grouped by requirement category. @@ -200,7 +200,7 @@ The following table lists the requirements for binding the `igCombo` control to | Data types | String Number Boolean Date | -###Supported data sources +### Supported data sources The following table lists the supported data sources and some basic specifics for their binding @@ -220,14 +220,14 @@ The following table lists the supported data sources and some basic specifics fo 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 +## Template Use and Selection -###Introduction +### 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 +### Template use chart The table bellows lists the `igCombo` templates and their possible uses. @@ -240,7 +240,7 @@ The table bellows lists the `igCombo` templates and their possible uses. | 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 +### Template selection chart The table below maps some of your possible needs to the appropriate templates. @@ -253,7 +253,7 @@ The table below maps some of your possible needs to the appropriate templates. | Show multiple pieces of information for each item in a custom layout | itemTemplate | -##Related Topics +## Related Topics Following are some other topics you may find useful. 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 index 215cc0866c..bf54f44d76 100644 --- a/docs/jquery/src/content/en/topics/controls/igcombo/using-themes.mdx +++ b/docs/jquery/src/content/en/topics/controls/igcombo/using-themes.mdx @@ -6,23 +6,23 @@ slug: igcombo-using-themes # Styling igCombo -##Using Themes +## Using Themes -###Introduction +### 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 +### 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 +## Related Topics Following are some other topics you may find useful. 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 index 71ffc5034a..6c41819365 100644 --- a/docs/jquery/src/content/en/topics/controls/igdatachart/accessibility-compliance.mdx +++ b/docs/jquery/src/content/en/topics/controls/igdatachart/accessibility-compliance.mdx @@ -6,7 +6,7 @@ slug: igdatachart-accessibility-compliance # Accessibility Compliance (igDataChart) -##Topic Overview +## Topic Overview ### Purpose @@ -23,7 +23,7 @@ The following topics are prerequisite to understanding this topic: - [**Adding igDataChart**](/igdatachart-adding.mdx): This topic demonstrates how to create add the `igDataChart` control and bind it to data. -##Accessibility Compliance Reference +## Accessibility Compliance Reference ### Introduction @@ -50,7 +50,7 @@ The following table summarizes the accessibility compliance features of the igDa \* - control limitations -##Related Content +## Related Content ### Topics diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/adding.mdx b/docs/jquery/src/content/en/topics/controls/igdatachart/adding.mdx index cc2e6f2da7..f702d06239 100644 --- a/docs/jquery/src/content/en/topics/controls/igdatachart/adding.mdx +++ b/docs/jquery/src/content/en/topics/controls/igdatachart/adding.mdx @@ -45,26 +45,26 @@ This topic contains the following sections: - [Samples](#samples) - [Resources](#resources) -##Add Chart to a Web Page +## Add Chart to a Web Page -### Introduction +### 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 +### Preview The following screenshot is a preview of the final result. ![](images/Adding_igDataChart_1.png) -### Requirements +### 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 +### 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: @@ -80,7 +80,7 @@ This topic takes you step-by-step toward adding a chart control to a web page. T 6. [Data series options](#configure-dataSeries) 7. [(Optional) Observe Final Result](#view-results) -### Steps +### Steps The following steps demonstrate how to add an `igDataChart` control to a web page. @@ -428,7 +428,7 @@ The following steps demonstrate how to add an `igDataChart` control to a web pag After completing all the above steps you may save the page and view the final result in a web browser. It must look like the figure shown in the beginning of the procedure. -##Resources for Charts Reference +## Resources for Charts Reference ### Introduction @@ -460,10 +460,10 @@ The following table specifies resource names to be used with `igLoader`™ for d | Overview Plus Detail Pane | igOverviewPlusDetailPane | -##Related Content +## Related Content -### Topics +### Topics The following topics provide additional information related to this topic. @@ -474,7 +474,7 @@ The following topics provide additional information related to this topic. - [Styling igDataChart](/styling/igdatachart-styling-themes.mdx): Demonstrates how to use the `igDataChart`™ control to apply styles and themes. -### Samples +### Samples The following samples provide additional information related to this topic. @@ -484,7 +484,7 @@ The following samples provide additional information related to this topic. - [Composite Chart]({environment:SamplesUrl}/data-chart/composite-chart): 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. -### Resources +### Resources The following material (available outside the Infragistics family of content) provides additional information related to this topic. diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/api-links.mdx b/docs/jquery/src/content/en/topics/controls/igdatachart/api-links.mdx index 7fb27e94f7..64a35bad49 100644 --- a/docs/jquery/src/content/en/topics/controls/igdatachart/api-links.mdx +++ b/docs/jquery/src/content/en/topics/controls/igdatachart/api-links.mdx @@ -7,7 +7,7 @@ import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; # jQuery and MVC API Reference Links (igDataChart) -##Topic Overview +## Topic Overview ### Purpose This topic provides links to the API documentation for jQuery and {environment:ProductNameMVC} class for `igDataChart`™ control. @@ -21,7 +21,7 @@ The following topics are prerequisite to understanding this topic: - [](/igdatachart-adding.mdx)[Adding igDataChart](/igdatachart-adding.mdx): This topic demonstrates how to create add the `igDataChart` control and bind it to data. -##igDataChart API Reference +## igDataChart API Reference ### Introduction @@ -33,7 +33,7 @@ The `igDataChart` is built as a jQuery UI widget with an accompanying {envi - [igDataChart MVC API](Infragistics.Web.Mvc~Infragistics.Web.Mvc.DataChart`1.html) : The documentation contains the DataChart class description and a list of all of its members. -##Related Content +## Related Content ### Topics diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/animating/charts-in-aspnet-mvc.mdx b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/animating/charts-in-aspnet-mvc.mdx index 1306748706..a15694c69f 100644 --- a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/animating/charts-in-aspnet-mvc.mdx +++ b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/animating/charts-in-aspnet-mvc.mdx @@ -6,7 +6,7 @@ slug: animating-charts-in-asp.net-mvc # Animating Charts in ASP.NET MVC(igDataChart) -##Topic Overview +## Topic Overview ### Purpose @@ -46,10 +46,10 @@ This topic contains the following sections: - [Samples](#samples) -##Animating Charts in MVC +## Animating Charts in MVC -### Introduction +### Introduction This procedure demonstrates how to create a simple animated column chart in an MVC application with AJAX Post request for updated data. @@ -57,19 +57,19 @@ In order to activate the Motion Framework it is necessary **to incorporate some The example implements a column chart with three data series and randomly generated car sales data. You place an Add Item button below the chart. Clicking the button adds new data to the chart. The button will make an AJAX Post request to the server to generate a new data item and return it the client as a plain JSON response. On receiving the response to the request the client will add the new data item to the chart and notify the chart about the change. When chart data items grow and exceed five, the oldest (the one with the least index number) drops from the chart. -### Preview +### Preview This is what the chart, visualized by the code, in this example should look like. ![](images/Using_Motion_Framework_in_MVC_with_AJAX_Updates_1.png) -### Requirements +### Requirements To complete the procedure, you need the following: - Microsoft® Visual Studio® 2010 with an MVC project -### Overview +### Overview Step-by-step instructions for creating a simple web page with an animated column chart consisting of three data series. This is the basic procedure for completing this task: @@ -83,7 +83,7 @@ Step-by-step instructions for creating a simple web page with an animated column 8. Updating the data and notifying the chart about the change 9. (Optional) Verifying the result -### Steps +### Steps 1. Add the data model. @@ -291,17 +291,17 @@ Step-by-step instructions for creating a simple web page with an animated column Experiment by creating different changes in the data source, like removing an item, and calling the `notifyRemoveItem()` method or clearing all data and calling the `notifyClearItem()` method. -##Related Content +## Related Content -### Topics +### Topics The following topics provide additional information related to this topic. - [Animating Charts in HTML and JavaScript](/igdatachart-animating-html.mdx) : Demonstrates how to: create an HTML view; use JavaScript to add data dynamically to a column chart; and animate data changes using the Motion Framework for charts in the {environment:ProductName} library. -### Samples +### Samples The following samples provide additional information related to this topic. diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/animating/charts.mdx b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/animating/charts.mdx index 24157471d8..862d93e0c9 100644 --- a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/animating/charts.mdx +++ b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/animating/charts.mdx @@ -6,7 +6,7 @@ slug: igdatachart-animating-charts # Animating Charts (Motion Framework for Charts) -##Topic overview +## Topic overview ### Introduction The Infragistics® Motion Framework™ is a framework for animating data changes in {environment:ProductName}™ chart controls. @@ -22,7 +22,7 @@ This section contains topics regarding animating charts with the Motion Framewor - [Animating Charts in ASP.NET MVC(igDataChart)](./02_Animating Charts in ASP.NET MVC.mdx): This topic demonstrates, with code examples, how to add a simple animated column chart in MVC using AJAX POST request for adding data dynamically. -##Related Content +## Related Content ### Topics diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/animating/html.mdx b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/animating/html.mdx index 026f99d23c..d33cb41f8f 100644 --- a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/animating/html.mdx +++ b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/animating/html.mdx @@ -6,7 +6,7 @@ slug: igdatachart-animating-html # Animating Charts in HTML and JavaScript (igDataChart) -##Topic Overview +## Topic Overview ### Purpose @@ -41,29 +41,29 @@ This topic contains the following sections: - [Samples](#samples) -##Animating Charts in HTML and JavaScript +## Animating Charts in HTML and JavaScript -### Introduction +### Introduction This procedure will guide you through the steps necessary to create a simple animated column chart in HTML and JavaScript. The example described here implements a column chart with three data series with randomly generated car sales data. A button titled Add Item is placed beneath the chart. Pressing this button adds a new data item to the chart and notifies the chart about the change. When the data items on the chart become more than five, the oldest one (the one with the lowest index number) is removed from the chart. -### Preview +### Preview Following is a chart with an Add Item implemented in this procedure. ![](images/Using_Motion_Framework_in_HTMLJavaScript_1.png) -### Prerequisites +### Prerequisites To complete the procedure, you need the following: - A web server - An HTML editor -### Overview +### Overview This topic takes you step-by-step toward creating a simple web page with animated column chart with three data series. The following is a conceptual overview of the process: @@ -75,7 +75,7 @@ This topic takes you step-by-step toward creating a simple web page with animate 6. Updating the data and notifying the chart about the change. 7. (Optional) Verifying the result. -### Steps +### Steps The following steps demonstrate how to create an animated column chart. @@ -231,10 +231,10 @@ When the HTML view is complete, you can observe the animation effect by clicking You can experiment by creating a different kind of change in the data source like removing an item and calling the `notifyRemoveItem()` method or clear all the data and calling the `notifyClearItem()` method. -##Related Content +## Related Content -### Topics +### Topics The following topics provide additional information related to this topic. @@ -242,7 +242,7 @@ The following topics provide additional information related to this topic. - [Animating Charts in ASP.NET MVC(igDataChart)](./02_Animating Charts in ASP.NET MVC.mdx): This topic explains how to create an MVC view and use jQuery to add data dynamically to a column chart by an AJAX POST request and use the Motion Framework for charts in the {environment:ProductName} library to animate data changes. -### Samples +### Samples The following samples provide additional information related to this topic. diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/animating/motion-framework.mdx b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/animating/motion-framework.mdx index 39cd8bdf16..e68cb7303f 100644 --- a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/animating/motion-framework.mdx +++ b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/animating/motion-framework.mdx @@ -7,7 +7,7 @@ import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; # Infragistics Motion Framework for Charts Overview (igDataChart) -##Topic Overview +## Topic Overview ### Purpose @@ -24,7 +24,7 @@ Prerequisite topics required to understand this material. - [](//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. -##Infragistics Motion Framework for Charts +## Infragistics Motion Framework for Charts ### Infragistics Motion Framework for Charts summary @@ -36,7 +36,7 @@ Motion Framework works on the principle that data is being fed, either continual The Motion Framework allows developers using the {environment:ProductName} chart controls, to increase the visual appeal of, and imply trends or other meaning behind the data. -##Chart Animation Configuration Summary +## Chart Animation Configuration Summary ### Chart animation configuration chart @@ -57,7 +57,7 @@ A catalog of the Infragistics Motion Network supported configurable chart animat | Notifications for data item updates | Notifies the chart that an item has been updates in the data source. | | -### Sample +### Sample The following sample demonstrates how to use the Motion Framework™ with igDataChart to build highly engaging visualizations and provide smooth playback of changes in data over time. @@ -66,7 +66,7 @@ The following sample demonstrates how to use the Motion Framework™ with igData -##Related Content +## Related Content ### Topics diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/axis-intervals.mdx b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/axis-intervals.mdx index 10ed68d9e1..c338c33089 100644 --- a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/axis-intervals.mdx +++ b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/axis-intervals.mdx @@ -6,7 +6,7 @@ slug: igdatachart-configuring-axis-intervals # Configuring Axis Intervals (igDataChart) -##Topic Overview +## Topic Overview ### Purpose @@ -35,14 +35,14 @@ This topic contains the following sections: - [CategoryXExample](#categoryxexample) - [Related Content](#related-content) -##Axis Intervals +## Axis Intervals -### Overview +### Overview 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. -### Preview +### Preview The following example is configurable `igDataChart` control, using NumericX and Y axes, where the following options can be set - Interval, MinorInterval, MajorStroke and MinorStroke. @@ -53,7 +53,7 @@ The following example is configurable `igDataChart` control, using NumericX and Axis major and minor intervals are implemented by setting the Interval and MinorInterval properties on an axis to a value greater than zero. In order to display minor gridlines that correspond to minor interval, one needs to set MinorStroke and MinorStrokeThickness properties on the axis, (as minor gridlines do not have a default color or thickness, and they will not be displayed without first assigning them). -### Properties +### Properties The following table summarizes the properties available for configuring the major and minor axis intervals @@ -68,7 +68,7 @@ The following table summarizes the properties available for configuring the majo | MinorStrokeThickness | double | A thickness in pixels of the axis minor gridlines set as a double value. | -### NumericXExample +### NumericXExample The screenshot, following the table, illustrates how the `igDataChart` control with the axis major and minor interval properties configured on the NumericXAxis will be displayed as a result of the following settings, (using the LineSeries): @@ -105,7 +105,7 @@ $("#container").igDataChart({ }, 
 ``` -### NumericYExample +### NumericYExample The screenshot, following the table, illustrates how the `igDataChart` control with the axis major and minor interval properties configured on the NumericYAxis will be displayed as a result of the following settings, (using the LineSeries): @@ -139,7 +139,7 @@ $("#container").igDataChart({ }, 
 ``` -### CategoryXExample +### CategoryXExample This sample illustrates how the `igDataChart` control, with the axis major and minor interval properties configured on the CategoryXAxis, will be displayed as a result of the usage of the following settings - MinorInterval, MinorStroke, MinorStrokeThickness, Interval, MajorStroke and MajorStrokeThickness. @@ -150,7 +150,7 @@ will be displayed as a result of the usage of the following settings - MinorInte -##Related Content +## Related Content ### Topics diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/axis-title.mdx b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/axis-title.mdx index 3cad12eb58..0e0e1a8eec 100644 --- a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/axis-title.mdx +++ b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/axis-title.mdx @@ -6,7 +6,7 @@ slug: igdatachart-axis-title # Configuring the Axis Title (igDataChart) -##Topic Overview +## Topic Overview ### Purpose @@ -33,22 +33,22 @@ This topic contains the following sections: - [Example](#example) - [Related Content](#related-content) -##Axis Title +## Axis Title -### Overview +### Overview The axis title feature of the `igDataChart` control allows you to add contextual information to the x and y axes of the `igDataChart` control. You can customize the axis title by specifying properties of an axis, such as the angle, font size and position. -### Preview +### Preview The following screenshot is a preview of the `igDataChart` control with a title set on the y-axis. ![](images/jQuery_Axis_Title_01.png) -### Properties +### Properties The following table summarizes the properties available for configuring the axis title. @@ -68,7 +68,7 @@ The following table summarizes the properties available for configuring the axis | titleRightMargin | double | Defines the title’s right margin, the horizontal space between the title and right edge of axis label panel. | -### Example +### Example The screenshot, following the table, illustrates how the `igDataChart` control with the axis’s `title` property looks as a result of the following settings: @@ -102,7 +102,7 @@ $("#container").igDataChart({ ``` -##Related Content +## Related Content ### Topics diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/chart-titles-and-subtitles.mdx b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/chart-titles-and-subtitles.mdx index 031851be9e..9f70b72968 100644 --- a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/chart-titles-and-subtitles.mdx +++ b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/chart-titles-and-subtitles.mdx @@ -6,7 +6,7 @@ slug: igdatachart-chart-titles-and-subtitles # Configuring the Chart Title and Subtitle (igDataChart) -##Topic Overview +## Topic Overview ### Purpose @@ -34,10 +34,10 @@ This topic contains the following sections: - [Samples](#samples) -##Introduction +## Introduction -###Title and subtitle summary +### Title and subtitle summary The title and subtitle feature of the `igDataChart` control allows you to add information to the top section of the chart control. The following screenshot demonstrates a title and subtitle added with their default settings: @@ -48,11 +48,11 @@ When adding a title, a subtitle or both to the chart control, the content of the The title and subtitle are added by setting the respective optional properties (title and subtitle) of the `igDataChart` control to strings representing the title/subtitle. -###Configuring the Title/Subtitle +### Configuring the Title/Subtitle The title and subtitle of the `igDatachart` control is highly configurable. The title and subtitle’s font, font size, color and alignment can be styled. -### Property settings +### Property settings The following table maps the desired configuration to the property settings that manage it. @@ -75,7 +75,7 @@ The following table maps the desired configuration to the property settings that | Set the title’s left margin | titleTopMargin | integer | -### Example +### Example Following are a chart title settings' table and an example that implements this configuration: @@ -95,10 +95,10 @@ Following are a chart title settings' table and an example that implements this -##Related Content +## Related Content -### Topics +### Topics The following topic provides additional information related to this topic: diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/configuring.mdx b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/configuring.mdx index 850bbe83b4..4a0b812825 100644 --- a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/configuring.mdx +++ b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/configuring.mdx @@ -6,7 +6,7 @@ slug: igdatachart-configuring # Configuring igDataChart -##In This Group of Topics +## In This Group of Topics ### Introduction diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/hover-interactions/callout-layer.mdx b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/hover-interactions/callout-layer.mdx index e0157c65de..d00d66723a 100644 --- a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/hover-interactions/callout-layer.mdx +++ b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/hover-interactions/callout-layer.mdx @@ -35,20 +35,20 @@ This topic contains the following sections: - [Samples](#samples) -## Overview +## Overview #### Callout Layer Overview The `calloutLayer` displays annotations from existing or new data on the chart. -### Preview +### Preview The following image is a preview of how the `igDataChart` control renders with the `calloutLayer` added. ![](images/jQuery_Callout_Layer_01.png) -## Properties +## Properties #### Callout Layer Summary @@ -63,7 +63,7 @@ yMemberPath | `String` | The path for your data that will be used as the annotat isCalloutOffsettingEnabled | `Boolean` | True if callout positions will be adjusted from collision resolution. -## Example +## Example The code snippet below demonstrates how to configure a couple callout layers. @@ -95,14 +95,14 @@ $(function () { ``` -## Related Content +## Related Content -### Topics +### 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 +### Samples The following samples provide additional information related to this topic. diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/hover-interactions/category-highlight-layer.mdx b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/hover-interactions/category-highlight-layer.mdx index cba038bb3a..9d79e7139a 100644 --- a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/hover-interactions/category-highlight-layer.mdx +++ b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/hover-interactions/category-highlight-layer.mdx @@ -33,7 +33,7 @@ This topic contains the following sections: - [Samples](#samples) -## Overview +## Overview #### Category highlight layer overview @@ -43,14 +43,14 @@ For other series, such as `lineSeries` series, it will render a band with an adj You can change the color of the highlighting area by setting the `brush` property. For more information on this property see the [Hover Interactions Property Reference (igDataChart)](/hoverinteractions-common-properties.mdx) topic. -### Preview +### Preview The following image is a preview of the `igDataChart` control rendered with the `categoryHighlightLayer` added. ![](images/jQuery_Category_Highlight_Layer_01.png) -## Properties +## Properties #### Category highlight layer summary @@ -63,7 +63,7 @@ targetAxis | categoryAxisBase | This property specifies which axis should have t useInterpolation | bool | This property specifies if the highlight band should snap-to-cursor, instead of snap-to-gridlines. This property has no effect if there are series present aligned between gridlines. For example, `columnSeries` and `waterfallSeries`. -## Example +## Example This sample demonstrates the Category Highlight Layer that targets a category axis, or all category axes in the igChart 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. @@ -73,9 +73,9 @@ The sample options pane allows you to edit the properties of the Category Highli ![](images/jQuery_Category_Highlight_Layer_01.png) -## Related Content +## Related Content -### Topics +### 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. @@ -89,7 +89,7 @@ The sample options pane allows you to edit the properties of the Category Highli - [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 +### Samples The following samples provide additional information related to this topic. diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/hover-interactions/category-item-highlight-layer.mdx b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/hover-interactions/category-item-highlight-layer.mdx index 94021b867b..f3f2d5c4c3 100644 --- a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/hover-interactions/category-item-highlight-layer.mdx +++ b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/hover-interactions/category-item-highlight-layer.mdx @@ -33,7 +33,7 @@ This topic contains the following sections: - [Samples](#samples) -## Overview +## Overview #### Category item highlight layer overview @@ -41,14 +41,14 @@ The `categoryItemHighlightLayer` highlights items in series using category axis The default highlight depends on the type of series. For example, the highlight for a `columnSeries` and a `lineSeries` is different; for `columnSeries` it is a banded shape, for `lineSeries` it is a marker. You can override the default highlight by setting the `highlightType` property. For more information on this property, see the [Properties](#properties) section below. -### Preview +### Preview The following image is a preview of the `igDataChart` control rendered with the `categoryItemHighlightLayer` added. ![](images/jQuery_Item_Highlight_Layer_01.png) -## Properties +## Properties #### Category item highlight layer summary @@ -61,7 +61,7 @@ highlightType | categoryItemHighlightType | This property specifies what the hig useInterpolation | bool | This property specifies if the highlight band should snap-to-cursor, instead of snap-to-gridlines. This property has no effect if there are series present aligned between gridlines. For example, `columnSeries` and `waterfallSeries` series. -## Example +## 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. @@ -71,9 +71,9 @@ This sample demonstrates the Category Item Highlight Layer that highlights items -## Related Content +## Related Content -### Topics +### 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. @@ -88,7 +88,7 @@ This sample demonstrates the Category Item Highlight Layer that highlights items - [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 +### Samples The following samples provide additional information related to this topic. diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/hover-interactions/category-tooltip-layer.mdx b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/hover-interactions/category-tooltip-layer.mdx index 9dbf9dfc79..c0f94e448f 100644 --- a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/hover-interactions/category-tooltip-layer.mdx +++ b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/hover-interactions/category-tooltip-layer.mdx @@ -34,7 +34,7 @@ This topic contains the following sections: - [Samples](#samples) -## Overview +## Overview #### Category tooltip layer overview @@ -44,14 +44,14 @@ You can configure tooltips to target a specific axis. This can be done be settin By default the grouped tooltips appear at the top of the `igDataChart` control; however this default value can be overridden by setting the `toolTipPosition` property. For more information on this property, see the `categoryTooltipLayer` properties section below. -#### Preview +#### Preview The following image is a preview of the `igDataChart` control renders with the `categoryTooltipLayer` added. ![](images/jQuery_Category_Tooltip_Layer_01.png) -## Properties +## Properties #### Category tooltip layer summary @@ -64,7 +64,7 @@ useInterpolation | bool | This property specifies if the tooltip’s x position toolTipPosition | categoryTooltipLayerPosition | This property specifies the location of the tooltip. It can be set to:
  • Auto –A position is selected automatically
  • OutsideStart - Displays at the outside start of the axis
  • InsideStart - Displays at the inside start of the axis
  • InsideEnd - Displays at the inside end of the axis
  • OutsideEnd - Displays at the outside end of the axis
-## Example +## 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. @@ -75,9 +75,9 @@ The sample options pane allows you to edit the properties of the layer, such as -## Related Content +## Related Content -### Topics +### 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. @@ -92,7 +92,7 @@ The sample options pane allows you to edit the properties of the layer, such as - [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 +### Samples The following samples provide additional information related to this topic. diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/hover-interactions/common-properties.mdx b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/hover-interactions/common-properties.mdx index ee2ee7eb55..80d4443021 100644 --- a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/hover-interactions/common-properties.mdx +++ b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/hover-interactions/common-properties.mdx @@ -30,12 +30,12 @@ This topic contains the following sections: - [Related Content](#related-content) -## Overview +## Overview The hover interactions layers inherit those `series` base class properties and methods that are relevant in the context of hover interactions. For example, hover interactions, by design do not interact with the mouse, so they do not raise the mouse events. Also, the hover interaction layers do not display data directly, so methods such as `scrollIntoView` are not applicable for this feature. -## Common Properties +## Common Properties The following table summarizes the series class properties inherited by the hover interaction classes. @@ -55,7 +55,7 @@ Method Name | Method Parameter | Description moveCursorPoint | point | This property allows you to simulate a cursor move. -## Setting the Inherited Properties on a Crosshair Layer +## Setting the Inherited Properties on a Crosshair Layer ### Example @@ -114,9 +114,9 @@ Following is the code used in this implementation ``` -## Related Content +## Related Content -### Topics +### 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. @@ -133,7 +133,7 @@ Following is the code used in this 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 +### Samples The following samples provide additional information related to this topic. 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 index 66ff2a4b0c..d91b6df35d 100644 --- 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 @@ -36,7 +36,7 @@ This topic contains the following sections: - [Samples](#samples) -## Overview +## Overview #### Crosshair layer overview @@ -46,14 +46,14 @@ You can configure the `crosshairLayer` so that the layer will only display one s 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 +#### Preview The following image is a preview of the `igDataChart` control rendered with the `crosshairLayer` added. ![](images/jQuery_Crosshair_Layer_01.png) -## Properties +## Properties #### Crosshair layer properties @@ -67,7 +67,7 @@ targetSeries | series | This property specifies which series should have an enab 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 +## 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. @@ -82,7 +82,7 @@ xAxisAnnotationTextColor
yAxisAnnotationTextColor | string | The color of th xAxisAnnotationOutline
yAxisAnnotationOutline | string | The color of the annotation's outline. xAxisAnnotationStrokeThickness
yAxisAnnotationStrokeThickness | number | The thickness of the annotation's outline. -## Example +## 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. @@ -93,9 +93,9 @@ The sample options pane allows you to edit the properties of the layer, such as -## Related Content +## Related Content -### Topics +### 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. @@ -110,7 +110,7 @@ The sample options pane allows you to edit the properties of the layer, such as - [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 +### Samples The following samples provide additional information related to this topic. 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 index 4ce6a1f1c4..db165e51f0 100644 --- 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 @@ -35,18 +35,18 @@ This topic contains the following sections: - [Samples](#samples) -## Overview +## Overview The `finalValueLayer` displays annotations based on the final value of data in the chart. -### Preview +### 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 +## Properties #### Item tooltip layer summary @@ -56,7 +56,7 @@ Property Name | Property Type | Description ---|---|--- finalValueSelectionMode | `enumeration` | Specifies method for how the final value is identified. -## Example +## Example The code snippet below demonstrates how to enable the final value layer. @@ -76,14 +76,14 @@ $(function () { ``` -## Related Content +## Related Content -### Topics +### 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 +### Samples The following samples provide additional information related to this topic. 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 index 0c843c56e2..561b417f0e 100644 --- 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 @@ -35,7 +35,7 @@ This topic contains the following sections: - [Samples](#samples) -## Overview +## Overview #### Item tooltip layer overview @@ -43,14 +43,14 @@ The `itemToolTipLayer` displays tooltips for all the series on the `igDataChart` 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 +### Preview The following image is a preview of the `igDataChart` control renders with the `itemToolTipLayer` added. ![](images/jQuery_Item_Tooltip_Layer_01.png) -## Properties +## Properties #### Item tooltip layer summary @@ -64,7 +64,7 @@ pointerToolTipStyle | style | This property specifies a style to apply to the po 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 +## 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. @@ -75,9 +75,9 @@ The sample options pane allows you to edit the properties of the layer, such as -## Related Content +## Related Content -### Topics +### 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. @@ -92,7 +92,7 @@ The sample options pane allows you to edit the properties of the layer, such as - [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 +### Samples The following samples provide additional information related to this topic. 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 index 7dd4164248..d8032ab222 100644 --- 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 @@ -6,7 +6,7 @@ slug: igchart-transitions-in-animations # Transitions In Animations -##Topic Overview +## Topic Overview ### Purpose @@ -40,10 +40,10 @@ This topic contains the following sections: - [Samples](#samples) -##Introduction +## Introduction -### Overview +### 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). @@ -53,7 +53,7 @@ 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 +### Supported series The following series types support the transition animations feature: @@ -62,7 +62,7 @@ The following series types support the transition animations feature: - Financial Price Series - Financial Indicators -### Supported transition types +### Supported transition types Many types of animated transitions are supported based on the nature of the movement and its direction: @@ -92,7 +92,7 @@ Many types of animated transitions are supported based on the nature of the move - `sweepFromValueAxisMaximum` – Series sweeps in from the value axis maximum. - `sweepFromValueAxisMinimum` – Series sweeps in from the value axis minimum. -### Supported transition speed types +### 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: @@ -102,19 +102,19 @@ The transition’s speed type determines the speed of the individual items of th - `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 +### 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 +## Configuring the Transition In Animations -### Overview +### 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 +### Example The following example demonstrates how to enable and change transition in animations for the financial chart: @@ -122,10 +122,10 @@ The following example demonstrates how to enable and change transition in animat [Transition Animation (Financial)]({environment:SamplesEmbedUrl}/data-chart/transition-animation-financial) -##Related Content +## Related Content -### Topics +### Topics The following topic provides additional information related to this topic: @@ -135,7 +135,7 @@ This topic demonstrates how to add the `igDataChart`™ control to a page and bind it to data. -### Samples +### Samples The following samples provide additional information related to this topic. 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 index c9974d07fb..310aa22373 100644 --- 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 @@ -7,7 +7,7 @@ import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; # Configuring Knockout Support (igDataChart) -##Topic Overview +## Topic Overview ### Purpose @@ -30,7 +30,7 @@ The following table lists the topics and external resources required as a prereq - [**Knockout Interactive Tutorials**](http://learn.knockoutjs.com/#/?tutorial=intro) -##Introduction +## Introduction ### Knockout support summary @@ -49,7 +49,7 @@ To instantiate a chart control bound to a Knockout managed data structure you ne ## Configuring igDataChart with Knockout Support -### Configuring igDataChart with knockout support summary chart +### 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. @@ -60,7 +60,7 @@ The following table maps the configuration tasks of the `igDataChart` control re | 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 +## Code Example: Configure igDataChart for Editing, Adding and Deleting an Item ### Description @@ -155,7 +155,7 @@ When the control is bound to the View-Model through Knockout it will receive not 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 +## 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. @@ -165,7 +165,7 @@ This example demonstrates the igDataChart control reacting to changes in the dat [{environment:SamplesEmbedUrl}/data-chart/edit-chart-items-with-knockout]({environment:SamplesEmbedUrl}/data-chart/edit-chart-items-with-knockout) -##Related Content +## Related Content ### Topics 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 index 5c05b4a2df..801ccb490a 100644 --- 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 @@ -7,7 +7,7 @@ import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; # Configuring the Navigation Features (igDataChart) -##Topic Overview +## Topic Overview ### Purpose @@ -35,10 +35,10 @@ This topic contains the following sections: - [Topics](#topics) -##Introduction +## Introduction -### Navigation features summary +### Navigation features summary The `igDataChart` control provides an extensive set of navigation features along with options and methods for using them in your code. @@ -49,7 +49,7 @@ The user can perform zooming in and out with mouse scroll or Page Up/Down keys, 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 ### Navigation features configuration summary chart @@ -65,7 +65,7 @@ Zooming modifier key|Modifier key to use when zooming is not the default interac 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 +## 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. @@ -74,10 +74,10 @@ This sample demonstrates various navigation methods available in the jQuery char -##Related Content +## Related Content -### Topics +### Topics The following topics provide additional information related to this topic. 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 index e2404c3b13..10c68d576b 100644 --- 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 @@ -6,7 +6,7 @@ slug: igdatachart-series-highlighting # Configuring the Series Highlighting (igDataChart) -##Topic Overview +## Topic Overview ### Purpose @@ -38,10 +38,10 @@ This topic contains the following sections: - [Related Content](#related-content) -## Series Highlighting +## Series Highlighting -### Overview +### 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. @@ -55,13 +55,13 @@ The series highlighting feature is supported for the following series types: - Financial Price Series - Financial Indicators -### Preview +### 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 +### Properties The following table summarizes the properties used for series highlighting. These properties are set on the supported series. @@ -73,7 +73,7 @@ The following table summarizes the properties used for series highlighting. Thes | highlightingTransitionDuration | timeSpan | Determines the duration that the highlighting change takes. | -### Examples +### Examples This sample demonstrates the series highlighting feature on different series types by configuring the `isHighlightingEnabled` and `highlightingTransitionDuration` series properties.
    @@ -86,10 +86,10 @@ The following example shows the same functionality, applied to a financial chart [Series Highlighting (Financial)]({environment:SamplesEmbedUrl}/data-chart/series-highlighting-financial)
    -## Events +## Events -### Overview +### Overview There are two events that are specifically related to the series highlighting feature. @@ -103,7 +103,7 @@ These events can be configured to achieve the following: 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 +### Event Arguments Properties The following table summarizes the properties of the `assigningCategoryStyleEventArgsBase`. @@ -139,7 +139,7 @@ The following table summarizes the properties of the `assigningCategoryMarke | radiusY | double | Overrides the default RadiusY property. | -### Example +### 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. @@ -148,7 +148,7 @@ The following example shows the usage of the `assigningCategoryStyle` event to c ![](images/jQuery_Series_Highlighting_02.png) -## Related Content +## Related Content ### Topics 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 index 3e3e2c1196..7c9c07c4a2 100644 --- 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 @@ -32,21 +32,21 @@ This topic contains the following sections: - [Topics](#topics) - [Samples](#samples) -## Overview +## 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 +### 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 +## 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 +## Example Based on the above data requirements, an example of how your data must be structured is as follows: @@ -89,14 +89,14 @@ With the above data and chart, the following result is generated: ![](images/jquery_scatter_polygon_02.png) -## Related Content +## Related Content -### Topics +### 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 +### 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 index e506154bb8..13e81d07f0 100644 --- 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 @@ -33,21 +33,21 @@ This topic contains the following sections: - [Samples](#samples) -## Overview +## 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 +### 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 +## 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 +## Example Based on the above data requirements, an example of how your data must be structured is as follows: @@ -90,14 +90,14 @@ With the above data and chart, the following result is generated: ![](images/jquery_scatter_polyline_02.png) -## Related Content +## Related Content -### Topics +### 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 +### 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/timexaxis.mdx b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/timexaxis.mdx index 8cb61674fd..9fd112a293 100644 --- a/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/timexaxis.mdx +++ b/docs/jquery/src/content/en/topics/controls/igdatachart/configuring/timexaxis.mdx @@ -17,7 +17,7 @@ Note: The following sections are only required if the default labels (i.e. forma - [Axis Interval Properties](#intervals) - [Related Content](#related-content) -### Introduction +### Introduction {/* image not found: igDataChart_%28TimeXAxis%29_1.png */} @@ -33,7 +33,7 @@ For more information on what axis types are required by a specific series, refer 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 +### 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. @@ -75,7 +75,7 @@ The following code snippets show how to skip labels on the TimeXAxis in the XamD {/* image not found: igDataChart_%28TimeXAxis_Break%29_1.png */} Figure 4: TimeXAxis displaying data from Monday through Friday in 2010. -### Axis Label Format Properties +### Axis Label Format Properties The TimeXAxis has the following label format properties: @@ -137,7 +137,7 @@ eg. The following lists a typical set of label formats for the given amount of t Figure 2: The XamDataChart control with a custom TimeAxisLabelFormat of "hh:mm:ss" -### Axis Interval Properties +### 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. @@ -199,7 +199,7 @@ The following code snippet demonstrates how to implement several Intervals for e {/* image not found: igDataChart_%28TimeXAxis_Interval%29_1.png */} Figure 3: TimeXAxis displaying data every 48 hours. -### Related Topics +### Related Topics The following topic provides additional information related to this topic: 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 index 6e4df7be40..cb9e6f9882 100644 --- 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 @@ -32,23 +32,23 @@ This topic contains the following sections: - [Related Content](#related-content) - [Topics](#topics) -## Overview +## 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 +### 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 +## 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 +## Data Binding The following table summarizes options of Scatter Area Series used for data binding. @@ -60,7 +60,7 @@ Property Name | Property Type | Description `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 +## 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. @@ -73,7 +73,7 @@ Property Name | Property Type | Description `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 +## Example The following code shows how to bind the Scatter Area Series to data. @@ -114,9 +114,9 @@ This code generates the following result: ![](images/jquery_scatter_area_02.png) -## Related Content +## Related Content -### Topics +### 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. 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 index 6b298f2011..bf6a60ea89 100644 --- 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 @@ -33,23 +33,23 @@ This topic contains the following sections: - [Related Content](#related-content) - [Topics](#topics) -## Overview +## 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 +### 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 +## 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 +## Data Binding The following table summarizes options of Scatter Contour Series used for data binding. @@ -61,7 +61,7 @@ Property Name | Property Type | Description `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 +## Fill Scale Use the `fillScale` option of the Scatter Contour Series to resolve fill brushes of the contour lines. @@ -73,7 +73,7 @@ Property Name | Property Type | Description `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 +## 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. @@ -86,7 +86,7 @@ valueResolver: { } ``` -## Example +## 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. @@ -130,9 +130,9 @@ This code generates the following result: ![](images/jquery_scatter_contour_02.png) -## Related Content +## Related Content -### Topics +### 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. diff --git a/docs/jquery/src/content/en/topics/controls/igdatachart/databinding.mdx b/docs/jquery/src/content/en/topics/controls/igdatachart/databinding.mdx index 4bddf72518..f79cb504fb 100644 --- a/docs/jquery/src/content/en/topics/controls/igdatachart/databinding.mdx +++ b/docs/jquery/src/content/en/topics/controls/igdatachart/databinding.mdx @@ -6,7 +6,7 @@ slug: igdatachart-databinding # Binding igDataChart to Data -##Topic Overview +## Topic Overview ### Purpose @@ -68,10 +68,10 @@ This topic contains the following sections: - [Resources](#resources) -##Binding to Data Sources +## Binding to Data Sources -### Supported data sources +### Supported data sources The `igDataChart` control supports the following data sources: @@ -82,7 +82,7 @@ The `igDataChart` control supports the following data sources: | IQueryable<T> | Used to supply data from an MVC controller method | -### Requirements for binding +### Requirements for binding Each data source has different requirements for data binding to the `igDataSource` control. The following table lists each requirement category. @@ -94,31 +94,31 @@ Each data source has different requirements for data binding to the `igDataSourc | Data types | String (for category axes) Number Date | -### Data sources summary +### 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 +## Binding to a JavaScript Array -### Introduction +### Introduction This procedure demonstrates how to bind the `igDataChart` control to a JavaScript data array. -### Prerequisites +### 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 +### 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 +### Steps The following steps demonstrate how to bind the `igDataChart` control to a JavaScript data array. @@ -198,33 +198,33 @@ 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 +### Binding to to an XML string -### Introduction +### Introduction This example demonstrates how to bind the `igDataChart` control to an XML string. -### Example +### Example
    [{environment:SamplesEmbedUrl}/data-chart/xml-binding]({environment:SamplesEmbedUrl}/data-chart/xml-binding)
    -##Binding to an IQueryable<T> in ASP.NET MVC +## Binding to an IQueryable<T> in ASP.NET MVC -### Introduction +### 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 +### 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 +### Preview The following screenshot demonstrates the `igDataChart` control visualizing the data in the sample array as result of successful binding @@ -232,7 +232,7 @@ to that array. ![](images/Data_Binding_in_igDataChart_2.png) -### Steps +### 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. @@ -315,21 +315,21 @@ The following steps demonstrate how to instantiate and bind an `igDataChart` con ``` -##Binding to an WCF Service +## Binding to an WCF Service -### Introduction +### 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 +### 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 +### Preview The following screenshot demonstrates the `igDataChart` control visualizing the data in the sample array as result of successful binding @@ -337,7 +337,7 @@ to that array. ![](images/Data_Binding_in_igDataChart_3.png) -### Steps +### Steps The following steps demonstrate how to bind an `igDataChart` control to a WCF service. @@ -439,10 +439,10 @@ The following steps demonstrate how to bind an `igDataChart` control to a WCF se %> ``` -##Related Content +## Related Content -### Topics +### Topics The following topics provide additional information related to this topic. @@ -453,14 +453,14 @@ The following topics provide additional information related to this topic. - [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 +### 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 +### Resources The following material (available outside the Infragistics family of content) provides additional information related to this topic. 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 index c349e71345..da27dd6580 100644 --- a/docs/jquery/src/content/en/topics/controls/igdatachart/known-issues.mdx +++ b/docs/jquery/src/content/en/topics/controls/igdatachart/known-issues.mdx @@ -12,7 +12,7 @@ import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; This topic lists all known issues and limitations in the `igDataChart`™ control. -##Known Issues and Limitations +## Known Issues and Limitations ### Overview @@ -34,19 +34,19 @@ Legend: | | [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 +### 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 +### 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 +### 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. 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 index 05389b4fd1..4559eed967 100644 --- a/docs/jquery/src/content/en/topics/controls/igdatachart/landing-page.mdx +++ b/docs/jquery/src/content/en/topics/controls/igdatachart/landing-page.mdx @@ -6,7 +6,7 @@ slug: igdatachart-landing-page # igDataChart -##In This Group of Topics +## In This Group of Topics ### Introduction @@ -51,7 +51,7 @@ The topics in this section provide detailed information regarding the `igDataCha - [Known Issues and Limitations (igDataChart)](/igdatachart-known-issues.mdx): This topic lists all known issues and limitations in the `igDataChart` control. -##Related Content +## Related Content ### Topics 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 index 4412887455..6de9f816cf 100644 --- 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 @@ -37,7 +37,7 @@ This topic contains the following sections: - [Samples](#samples) -## Overview +## Overview #### Hover interactions summary @@ -50,7 +50,7 @@ The following screenshot displays the `igDataChart` control with the category hi ![](../configuring/hover-interactions/images/jQuery_Multiple_Layers_01.png) -## Common Properties +## Common Properties #### Common properties and methods overview @@ -59,7 +59,7 @@ Since the hover interaction layers inherit from the `Series` object, they gain a 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 +## Types of Layers #### Introduction @@ -67,7 +67,7 @@ Currently there are 5 different hover interaction layers available on the `igDat The following summarizes the different types of layers available on the `igDataChart` control: -### Crosshair Layer +### Crosshair Layer The `crosshairLayer` provides crossing lines that meet at the actual value of every targeted series. @@ -75,7 +75,7 @@ The `crosshairLayer` provides crossing lines that meet at the actual value of ev For more information, see the [Configuring the Crosshair Layer (igDataChart)](../04_Configuring/04_Hover Interactions/03_HoverInteractions_Crosshair_Layer.mdx) topic. -### Category Highlight Layer +### 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. @@ -83,7 +83,7 @@ The `categoryHighlightLayer` targets a category axis, or all category axes in th 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 +### 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. @@ -91,7 +91,7 @@ The `categoryItemHighlightLayer` layer highlights items in a series that use a c 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 +### Category Tooltip Layer The `categoryTooltipLayer` displays grouped tooltips for series using a category axis. @@ -99,7 +99,7 @@ The `categoryTooltipLayer` displays grouped tooltips for series using a category 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 +### Item Tooltip Layer The `itemTooltipLayer` displays tooltips for all target series individually. @@ -107,7 +107,7 @@ The `itemTooltipLayer` displays tooltips for all target series individually. 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 +### Final Value Layer The `finalValueLayer` displays annotations that represent the current (final) value of a series on the chart. @@ -115,7 +115,7 @@ The `finalValueLayer` displays annotations that represent the current (final) va 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 +### Callout Layer The `calloutLayer` displays annotations from existing or new data on the chart. @@ -124,9 +124,9 @@ The `calloutLayer` displays annotations from existing or new data on the chart. For more information, see the [Configuring the Callout Layer (igDataChart)](../04_Configuring/04_Hover Interactions/06_HoverInteractions_Callout_Layer.mdx) topic. -## Related Content +## Related Content -### Topics +### 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. @@ -143,7 +143,7 @@ For more information, see the [Configuring the Callout Layer (igDataChart)](../0 - [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 +### Samples The following samples provide additional information related to this topic. 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 index f1dd437ada..276e2e3c6f 100644 --- a/docs/jquery/src/content/en/topics/controls/igdatachart/overview/overview.mdx +++ b/docs/jquery/src/content/en/topics/controls/igdatachart/overview/overview.mdx @@ -52,7 +52,7 @@ This topic contains the following sections: - [Samples](#samples) -##Introduction +## Introduction ### Introduction to the igDataChart @@ -64,7 +64,7 @@ The igDataChart is a charting control for rendering various kinds of charts into 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 ### Supported chart types summary @@ -104,7 +104,7 @@ The following table displays the supported chart types. | | Scatter Line | Visualizes data with a line with sharp edges on data points in Cartesian coordinate system. | scatterLine | | -##Minimum Requirements +## Minimum Requirements ### Minimum requirements summary @@ -155,10 +155,10 @@ The following table summarizes the requirements for using the `igDataChart` cont >**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 +## Main Features -### Features Overview +### Features Overview The following table summarizes the main features of the `igDataChart` control. Additional details are available after following the summary table. @@ -177,7 +177,7 @@ The following table summarizes the main features of the `igDataChart` control. A | [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 +### Legend The legend is a visual panel that shows an icon and a title for each data series in the chart. @@ -185,7 +185,7 @@ The legend is a visual panel that shows an icon and a title for each data series 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 +### 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. @@ -193,7 +193,7 @@ On the picture below a composite chart combining column and line category series ![](images/igDataChart_Overview_3.png) -### Navigation +### 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. @@ -203,7 +203,7 @@ The OPD window is a separate navigation tool. It is a smaller image of the chart 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 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. @@ -219,7 +219,7 @@ You can see the axis elements in the figure below: 4. Major line 5. Axis stripe -### Tooltips +### 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. @@ -227,7 +227,7 @@ Tooltips are small panels that appear on the current mouse position and display 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 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. @@ -235,7 +235,7 @@ On the figure below you can see the cross-hairs lines marked with two double-hea ![](images/igDataChart_Overview_7.png) -### Markers +### 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. @@ -247,7 +247,7 @@ On the figure below you can see a chart with circle markers (some markers are de - [Adding igDataChart](/igdatachart-adding.mdx) -### Trend Lines +### 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. @@ -256,10 +256,10 @@ On the picture below you can see a line category series with a trend line of the ![](images/igDataChart_Overview_9.png) -##User Interaction and Usability +## User Interaction and Usability -###User interactions summary +### 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. @@ -279,10 +279,10 @@ The following table summarizes the user interaction capabilities of the `igDataC | Switch On/Off markers | External checkbox | ![](../../../images/images/positive.png) | -##Related Content +## Related Content -### Topics +### Topics The following topics provide additional information related to this topic. @@ -301,7 +301,7 @@ Contains basic information about the related `igPieChart` control for displaying - [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 +### Samples The following samples provide additional information related to this topic. 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 index bfcdb933bc..d286cde350 100644 --- 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 @@ -7,7 +7,7 @@ import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; # Series Types (igDataChart) -##Topic Overview +## Topic Overview ### Purpose @@ -45,10 +45,10 @@ This topic contains the following sections: - [Samples](#samples) -##Chart Series Types +## Chart Series Types -### Supported chart types summary +### Supported chart types summary The `igDataChart` control allows for a variety of series types to be implemented for different visualization purposes. @@ -56,7 +56,7 @@ See the next block for detailed information on supported series types and basic >**Note:** Pie charts can be created using the separate `igPieChart` control. For details see [igPieChart Overview](//igpiechart/overview.mdx). -### Supported chart types table +### Supported chart types table | Chart type | Series type | Description | `Series.type` property setting | Data binding properties | @@ -104,7 +104,7 @@ See the next block for detailed information on supported series types and basic | | Scatter Polyline | Visualize data as a series of polylines in a Cartesian coordinate system. | `scatterPolyline` | | -### Bar and Column series +### 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. @@ -114,7 +114,7 @@ Technically, bar and column charts mean one and the same but we make a distincti 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 series Bubble charts represent data entities with four independent numeric parameters in the form of (typically) filled circles. @@ -122,7 +122,7 @@ Bubble charts represent data entities with four independent numeric parameters i 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 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. @@ -130,7 +130,7 @@ Following is an example of a waterfall chart. ![](images/igDataChart_Types_7.png) -### Financial series +### Financial series Financial charts (also called candlestick charts) are a variation of bar charts which allows for more variables to be depicted. @@ -140,7 +140,7 @@ They are mainly used to visualize stock market movements of a particular commodi 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 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. @@ -148,7 +148,7 @@ Polar scatter charts are plotted in polar coordinate system where the first coor It is also possible to plot polar line or area depending on the purpose. -### Radial series +### 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. @@ -156,7 +156,7 @@ Radial line charts are similar to polar scatter charts but it is a category type 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 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. @@ -166,7 +166,7 @@ This chart was invented by stock market traders and used primarily in that indus Using `igDataChart` you can implement range area and range column charts, and the sample chart above is a range area chart. -### Scatter series +### 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. @@ -178,7 +178,7 @@ Two of the scatter types, `scatterPolygon` and `scatterPolyline`, depict data di ![](images/igDataChart_Types_10.png) -## Composite Charts +## Composite Charts ### Composite charts summary @@ -192,9 +192,9 @@ There are no specific settings for creating composite charts but rather you can ![](images/igDataChart_Types_9.png) -##Related Content +## Related Content -### Topics +### Topics The following topics provide additional information related to this topic. @@ -204,7 +204,7 @@ The following topics provide additional information related to this topic. - [](/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 +### Samples The following samples provide additional information related to this topic. 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 index 24c21d591e..1b22785c56 100644 --- 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 @@ -7,7 +7,7 @@ import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; # Configurable Visual Elements (igDataChart) -##Topic Overview +## Topic Overview ### Purpose @@ -54,7 +54,7 @@ The following picture demonstrates the configurable visual elements of the `igDa ​10) Tooltip -### Configurable visual elements and related properties +### Configurable visual elements and related properties The following table maps the visual elements of the `igDataChart` control and the properties that configure them. @@ -113,7 +113,7 @@ The following table maps the visual elements of the `igDataChart` control and th -### Samples +### 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. @@ -128,7 +128,7 @@ In addition to the settings above, the sample below demonstrates both enabling t [Series Tooltips]({environment:SamplesEmbedUrl}/data-chart/series-tooltips) -##Related Content +## Related Content ### Topics 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 index 68d06f1c87..2ac85bfb86 100644 --- a/docs/jquery/src/content/en/topics/controls/igdatachart/series-requirements.mdx +++ b/docs/jquery/src/content/en/topics/controls/igdatachart/series-requirements.mdx @@ -21,7 +21,7 @@ The topic is organized as follows: - [Requirements for Polar and Radial Series](#polar-and-radial) - [Requirements for Financial Series](#financial) -## Requirements for Category Series +## 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. @@ -160,7 +160,7 @@ The table below shows what axis types can be used with Category Series in the `i -## Requirements for Range Series +## 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. @@ -207,7 +207,7 @@ The table below shows what axis types can be used with Range Series in the `igDa -## Requirements for Stacked Series +## 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. @@ -341,7 +341,7 @@ The table below shows what axis types can be used with Stacked Series in the `ig -## Requirements for Scatter Series +## 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. @@ -478,7 +478,7 @@ The table below shows what axis types can be used with Scatter Series in the `ig -## Requirements for Polar and Radial Series +## 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. @@ -584,7 +584,7 @@ The table below shows what axis types can be used with Polar Series and Radial S -## Requirements for Financial Series +## 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. 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 index 19a9d07f39..7c81185a41 100644 --- 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 @@ -7,7 +7,7 @@ import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; # Styling the Chart Series (igDataChart) -##Topic Overview +## Topic Overview ### Purpose @@ -40,7 +40,7 @@ This topic contains the following sections: - [Topics](#topics) -##Introduction +## Introduction ### Chart series styling summary @@ -49,7 +49,7 @@ The igDataChart's series can be styled in many aspects, the main of which are ap 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 +## 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: @@ -59,9 +59,9 @@ The following sample defines the chart configuration needed to achieve that effe -##Styling the Chart Series by Applying Drop-Shadow Effect +## Styling the Chart Series by Applying Drop-Shadow Effect -### Drop-shadow effect configuration summary +### Drop-shadow effect configuration summary With the drop-shadow effect, the series appear as if casting a shadow. @@ -72,7 +72,7 @@ With the drop-shadow effect, the series appear as if casting a shadow. 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 +### 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: @@ -85,7 +85,7 @@ The default schedule type is Monolith. The benefit of using the Compound shadow 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 +### 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. @@ -98,7 +98,7 @@ The following table explains briefly the configurable aspects of the chart drop- | 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 +### Property settings The following table lists the configurable aspects of the drop-shadow effect to their respective property settings. @@ -145,7 +145,7 @@ The following table lists the configurable aspects of the drop-shadow effect to -### Example – drop-shadow effect with Monolith shadow +### 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. @@ -178,7 +178,7 @@ series: [ } ``` -### Example – drop-shadow effect with Compound shadow +### Example – drop-shadow effect with Compound shadow This example demonstrates applying a [Compound](#shadow-types) drop-shadow with a blur. @@ -214,10 +214,10 @@ series: [ ``` -##Related Content +## Related Content -### Topics +### Topics The following topics provide additional information related to this topic. 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 index 3d8246952e..8cc7e3bcee 100644 --- a/docs/jquery/src/content/en/topics/controls/igdatachart/styling/themes.mdx +++ b/docs/jquery/src/content/en/topics/controls/igdatachart/styling/themes.mdx @@ -6,7 +6,7 @@ slug: igdatachart-styling-themes # Styling igDataChart -##Topic Overview +## Topic Overview ### Purpose @@ -57,7 +57,7 @@ This topic contains the following sections: - [Resources](#resources) -##Introduction +## Introduction ### Introduction to themes @@ -71,7 +71,7 @@ Detailed information for using themes with {environment:ProductName} l 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 +## Themes Summary A summary of the `igDataChart` control’s available themes. @@ -96,9 +96,9 @@ A summary of the `igDataChart` control’s available themes. -##Required Cascading Style Sheets (CSS) +## Required Cascading Style Sheets (CSS) -###Required CSS summary +### Required CSS summary The following CSS resources are necessary to correctly render charts: @@ -109,7 +109,7 @@ In the code snippets that follow, it is assumed that the CSS resources are locat >**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 +### Required CSS code: HTML **In HTML:** @@ -118,7 +118,7 @@ In the code snippets that follow, it is assumed that the CSS resources are locat ``` -###Required CSS code: ASPX +### Required CSS code: ASPX **In ASPX:** @@ -128,10 +128,10 @@ In the code snippets that follow, it is assumed that the CSS resources are locat ``` -##Chart Styles Reference +## Chart Styles Reference -###Style reference summary +### Style reference summary A summary of the `igDataChart` style’s purpose and functionality. @@ -150,10 +150,10 @@ A summary of the `igDataChart` style’s purpose and functionality. >**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 +## igDataChart Styling Options -###Introduction +### 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: @@ -170,7 +170,7 @@ With individual chart control options you can define: 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 +### igDataChart property-configurable styling aspects The property configurable styling aspects of the `igDataChart` control and map them the respective properties that manage them. @@ -195,10 +195,10 @@ The property configurable styling aspects of the `igDataChart` control and map t | Thickness of the trend line of data series with name key. | series[“key”].trendLineThickness | -##Modifying the Chart-Specific Visual Elements Using Themes +## Modifying the Chart-Specific Visual Elements Using Themes -###Introduction +### 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. @@ -206,7 +206,7 @@ Use an existing page with a chart, since the procedure for creating a chart is n In this example, we change the colors of data series. -###Preview +### Preview The following screenshots show the default and updated view of a sample chart. @@ -215,13 +215,13 @@ Default chart colors|Updated chart colors ![](images/Using_Themes_with_igDataChart_1.png)|![](images/Using_Themes_with_igDataChart_2.png) -###Prerequisites +### Prerequisites To complete the procedure, you need the following: - An HTML5 web page with an existing `igDataChart` control -###Overview +### Overview A high level overview of the process: @@ -230,7 +230,7 @@ A high level overview of the process: 3. [Change the link from the default chart CSS file to the modified file](#change-css-links) 4. [Verify the result](#final-result) -###Steps +### Steps Demonstrate how to modify the default IG Chart styles with your preferred settings. @@ -329,9 +329,9 @@ Demonstrate how to modify the default IG Chart styles with your preferred settin To verify that the chart colors and styles changed, save the web page and open it in your browser. -##Related Content +## Related Content -###Topics +### Topics The following topics provide additional information related to this topic. @@ -340,7 +340,7 @@ The following topics provide additional information related to this topic. - [Adding igDataChart](/igdatachart-adding.mdx): Demonstrates how to create the `igDataChart` control and bind it to data. -###Resources +### Resources The following third party material provides additional information related to this topic. 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 index ab290ecb0f..f7469d59d2 100644 --- a/docs/jquery/src/content/en/topics/controls/igdialog/accessibility-compliance.mdx +++ b/docs/jquery/src/content/en/topics/controls/igdialog/accessibility-compliance.mdx @@ -20,9 +20,9 @@ The following topics are prerequisite to understanding this topic: - [Topics](#topics) -## Accessibility Compliance Reference +## Accessibility Compliance Reference -### Introduction +### 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. @@ -30,7 +30,7 @@ To meet the requirements of each accessibility rule, in some cases you may need > **Note:** As jQuery controls are client-only, some of the rules are not supported and are thus marked as limitations. -### Accessibility compliance reference summary +### Accessibility compliance reference summary The following table summarizes the accessibility compliance features of the igDialog: @@ -43,9 +43,9 @@ Rules | Rule Text | How We Comply \* - control limitations -## Related Content +## Related Content -### Topics +### Topics The following topics provide additional information related to this topic: 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 index e43cad5080..c02ed41e7d 100644 --- 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 @@ -21,12 +21,12 @@ This topic contains the following sections: - [Related Content](#related-content) -## Introduction to the igDialog for Mobile CSS Classes +## 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 +## CSS Classes Reference The following summarizes the purpose and functionality of the `igDialog` control’s featured : @@ -211,9 +211,9 @@ ui-widget-contentui-dialog-content ``` -## Related Content +## Related Content -### Topics +### Topics The following topics provide additional information related to this topic: 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 index f8d17358c1..95ea48b2dc 100644 --- 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 @@ -24,7 +24,7 @@ This topic contains the following sections: - [Topics](#topics) -## Event Reference +## Event Reference The following table summarizes the purpose and functionality of the `igDialog` control’s featured events: @@ -37,9 +37,9 @@ Event | Description | Cancelable | Event is raised when the dialog or its content loses focus. | False -## Attaching Event Handlers in jQuery and MVC +## Attaching Event Handlers in jQuery and MVC -### Attaching Event Handlers in jQuery +### 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. @@ -59,7 +59,7 @@ The following example shows how this is done and it also demonstrates the use of [{environment:SamplesEmbedUrl}/dialog-window/api-and-events]({environment:SamplesEmbedUrl}/dialog-window/api-and-events) -### Attaching Event Handlers in MVC +### 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. @@ -73,9 +73,9 @@ $("#igDialog1").live({ igdialogstatechanging: function (e, args) { > **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 +## Related Content -### Topics +### Topics The following topics provide additional information related to this topic: 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 index d5b03425e7..7d603a9a97 100644 --- 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 @@ -22,7 +22,7 @@ This topic contains the following sections: - [Samples](#samples) -## Method Reference +## Method Reference The following table summarizes the purpose and functionality of the igDialog control’s featured methods: @@ -42,9 +42,9 @@ Method | Description | Moves dialog to the top. | Destroys the `igDialog` control. -## Related Content +## Related Content -### Topics +### Topics The following topics provide additional information related to this topic: @@ -53,7 +53,7 @@ The following topics provide additional information related to this topic: - [CSS Classes Reference (*igDialog*)](./03_igDialog Css Classes Reference.mdx): The topic that introduces the user to the `igDialog` control’s CSS classes. -### Samples +### Samples The following samples provide additional information related to this topic: 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 index 235c0df907..a8aafc22e6 100644 --- 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 @@ -23,7 +23,7 @@ This topic contains the following sections: - [Samples](#samples) -## jQuery Property Reference +## 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. @@ -71,7 +71,7 @@ The following table summarizes the purpose and functionality of the `igDialog` c | | string | **null** “RESTORE” | Gets or sets the tooltip for restore button in the igDialog. | -## MVC Method Reference +## 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). @@ -122,9 +122,9 @@ The following table summarizes the purpose and functionality of * {environm | [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 +## Related Content -### Topics +### Topics The following topics provide additional information related to this topic: @@ -135,7 +135,7 @@ The following topics provide additional information related to this topic: - [CSS Classes Reference (*igDialog*)](./03_igDialog Css Classes Reference.mdx): The topic that introduces the user to the `igDialog` control’s CSS classes. -### Samples +### Samples The following samples provide additional information related to this topic: 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 index 0f53b3fdaf..a2c2f24c84 100644 --- a/docs/jquery/src/content/en/topics/controls/igdialog/configuring/animations.mdx +++ b/docs/jquery/src/content/en/topics/controls/igdialog/configuring/animations.mdx @@ -34,7 +34,7 @@ This topic contains the following sections: - [Topics](#topics) -## Control Configuration Summary +## Control Configuration Summary The properties that need to be configured to animate `igDialog` upon closing and opening are: @@ -42,11 +42,11 @@ The properties that need to be configured to animate `igDialog` upon closing and - -## Configuring igDialog Animation +## 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 +### Property settings The following table maps the desired animation features to property settings: @@ -56,7 +56,7 @@ Animate *igDialog* on opening | | “explode” -### Example with jQuery +### Example with jQuery The code below demonstrates how set the `igDialog` animations in jQuery: @@ -69,7 +69,7 @@ $("#dialog").igDialog({ }); ``` -### Example with MVC +### Example with MVC The code below demonstrates how set the animations for the {environment:ProductNameMVC} Dialog: @@ -86,9 +86,9 @@ The code below demonstrates how set the animations for the {environment:Pro ``` -## Related Content +## Related Content -### Topics +### Topics The following topics provide additional information related to this topic: 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 index 0ed051a62e..5e2df40c39 100644 --- 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 @@ -34,9 +34,9 @@ This topic contains the following sections: - [Samples](#samples) -## Configuring igDialog with External Page +## Configuring igDialog with External Page -### Overview +### 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`. @@ -47,7 +47,7 @@ You can use the `igDialog` and load not only a bunch of HTML elements, but an en ``` -### Property Settings +### 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. @@ -62,16 +62,16 @@ Set a temporary `IFRAME` URL source. | 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 +### 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 +## Related Content -### Topics +### Topics The following topics provide additional information related to this topic: @@ -80,7 +80,7 @@ The following topics provide additional information related to this topic: - [**Adding *igDialog***](../01_Adding igDialog.mdx): This topic demonstrates how to add the `igDialog` control to a web page. -### Samples +### Samples The following samples provide additional information related to this topic: 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 index 340b020d46..607f6d4ffe 100644 --- 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 @@ -37,7 +37,7 @@ This topic contains the following sections: - [Samples](#samples) -## Control Configuration Summary +## 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. @@ -52,11 +52,11 @@ The following table lists the configurable aspects of the `igDialog` *header and 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 +## Enable and Configure igDialog Header The `igDialog` API proposes several API properties for modifying its header. -### Property Settings +### Property Settings The following table maps the desired header features to property settings: @@ -73,7 +73,7 @@ Set the igDialog unpin button title | | “RESTORE” -### Example +### Example The screenshot below demonstrates how the `igDialog` looks as a result of the settings above: @@ -83,11 +83,11 @@ The screenshot below demonstrates how the `igDialog` looks as a result of the se > `.clsImage { background-color: red; width: 5px; height: 5px; }` -## Enable and Configure igDialog Footer +## Enable and Configure igDialog Footer The `igDialog` API proposes two API properties for modifying its footer. -### Property Settings +### Property Settings The following table maps the desired header features to property settings: @@ -98,16 +98,16 @@ Show the `igDialog` footer | | “FOOTER” -### Example +### 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 +## Related Content -### Topics +### Topics The following topics provide additional information related to this topic: @@ -115,7 +115,7 @@ The following topics provide additional information related to this topic: - [**Adding *igDialog***](../01_Adding igDialog.mdx): This topic demonstrates how to add the `igDialog` control to a web page. -### Samples +### Samples The following samples provide additional information related to this topic: 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 index e87c41bcf1..25e98e9508 100644 --- 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 @@ -47,9 +47,9 @@ This topic contains the following sections: - [Samples](#samples) -## Control states +## Control states -### 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. @@ -61,7 +61,7 @@ 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 +### 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. @@ -72,7 +72,7 @@ The buttons in the picture above are: 1. Minimize button 2. Maximize button -### Preview in Maximized State +### 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. @@ -83,7 +83,7 @@ The buttons at the picture above are: 1. Minimize button 2. Restore button -### Preview in Minimized State +### Preview in Minimized State The picture below demonstrates the `igDialog` in the minimized state. You cannot resize window while in this state. @@ -95,7 +95,7 @@ The buttons at the picture above are: 2. Maximize button -## Control Configuration Summary +## Control Configuration Summary The following table lists the configurable aspects of the `igDialog` control. Additional details are available after the table. @@ -109,11 +109,11 @@ The following table lists the configurable aspects of the `igDialog` control. Ad | Minimize *igDialog* | Method from *igDialog* API that allows minimization. | | -## Configuring Minimize and Maximize Icons +## 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 +### Property Settings The following table maps the desired functionality to property settings: @@ -123,18 +123,18 @@ Show maximize button | | true -### Example +### 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 +## 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 +### Property Settings The following table describes the behavior of the `igDialog` depending on the value of the property: @@ -145,11 +145,11 @@ 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 +## 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 +### Code The following code demonstrates how to close the `igDialog` using its API: @@ -159,18 +159,18 @@ The following code demonstrates how to close the `igDialog` using its API: $('#igDialog).igDialog("minimize"); ``` -### Example +### Example The screenshot below shows you the position of the minimize button: ![](images/04_2_igDialog_MamimizeAndMinimize_5.png) -## Maximize igDialog +## 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 +### Code The following code demonstrates how to show the `igDialog` using its API: @@ -180,16 +180,16 @@ The following code demonstrates how to show the `igDialog` using its API: $('#igDialog).igDialog("maximize"); ``` -### Example +### Example The screenshot below shows you the position of the maximize button: ![](images/04_2_igDialog_MamimizeAndMinimize_6.png) -## Related Content +## Related Content -### Topics +### Topics The following topics provide additional information related to this topic: @@ -198,7 +198,7 @@ The following topics provide additional information related to this topic: - [Adding *igDialog*](../01_Adding igDialog.mdx): This topic demonstrates how to add the `igDialog` control to a web page. -### Samples +### Samples The following samples provide additional information related to this topic: 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 index 40e4a0a7c7..6c6d4baf7c 100644 --- 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 @@ -35,14 +35,14 @@ This topic contains the following sections: - [Samples](#samples) -## Introduction to the Modal igDialog +## 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 +## Control Configuration Summary The following table lists the configurable aspects of the `igDialog` control. Additional details are available after the table. @@ -51,13 +51,13 @@ Configurable aspects | Details | Properties Configuring modal `igDialog` | The properties that need to be configured to make an `igDialog` modal. | -## Configuring Modal igDialog +## 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 +### 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. @@ -68,16 +68,16 @@ Set the igDialog footer title | | “opened” -### Example +### 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 +## Related Content -### Topics +### Topics The following topics provide additional information related to this topic: @@ -86,7 +86,7 @@ The following topics provide additional information related to this topic: - [Adding *igDialog*](../01_Adding igDialog.mdx): This topic demonstrates how to add the `igDialog` control to a web page. -### Samples +### Samples The following samples provide additional information related to this topic: 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 index dec5c9132a..78bd8af932 100644 --- 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 @@ -37,9 +37,9 @@ This topic contains the following sections: - [Samples](#samples) -## Configuring Multiple igDialogs +## Configuring Multiple igDialogs -### Overview +### 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. @@ -47,7 +47,7 @@ What the control does automatically is it detects the first HTML placeholder and > **Note:** You cannot achieve this functionality using {environment:ProductNameMVC} Dialog. -### Code +### Code The following code demonstrates how to define your markup so that the second dialog will be shown on the top of the first: @@ -62,18 +62,18 @@ The following code demonstrates how to define your markup so that the second dia ``` -### Example +### 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 +## 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 +### Method Settings The following table maps the desired functionality to the method that proposes it: @@ -84,7 +84,7 @@ Check if dialog is modal and it is currently active | | *e* – browser event | object – reference to the moved `igDialog` -### Code +### Code The code below demonstrates how to call one the above `igDialog` methods: @@ -93,9 +93,9 @@ $(“#dialog”).igDialog(“moveToTop”, e); ``` -## Related Content +## Related Content -### Topics +### Topics The following topics provide additional information related to this topic: @@ -104,7 +104,7 @@ The following topics provide additional information related to this topic: - [Adding *igDialog*](../01_Adding igDialog.mdx): This topic demonstrates how to add the `igDialog` control to a web page. -### Samples +### Samples The following samples provide additional information related to this topic: 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 index f00203077b..0b0d7c4c2c 100644 --- a/docs/jquery/src/content/en/topics/controls/igdialog/configuring/pin.mdx +++ b/docs/jquery/src/content/en/topics/controls/igdialog/configuring/pin.mdx @@ -44,14 +44,14 @@ This topic contains the following sections: - [Samples](#samples) -## Introduction +## 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 +## Control Configuration Summary The following table lists the configurable aspects of the `igDialog` control. Additional details are available after the table. @@ -64,11 +64,11 @@ The following table lists the configurable aspects of the `igDialog` control. Ad | Unpin *igDialog* | Method from *igDialog* API that allows unpinning. | | -## Configuring Pin/Unpin +## 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 +### Property Settings The following table maps the desired functionality to property settings: @@ -78,18 +78,18 @@ Show pin button | | true -### Example +### 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 +## 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 +### Property Settings The following table maps the desired functionality to the property settings: @@ -99,18 +99,18 @@ Pin on minimize | | “minimized” -### Example +### 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 +## 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 +### Code The following code demonstrates how to pin the `igDialog` using its API: @@ -120,18 +120,18 @@ The following code demonstrates how to pin the `igDialog` using its API: $('#igDialog).igDialog("pin"); ``` -### Example +### Example The screenshot below shows you the position of the pin button: ![](images/04_3_igDialog_Pin_3.png) -## Unpin igDialog +## 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 +### Code The following code demonstrates how to unpin the `igDialog` using its API: @@ -141,16 +141,16 @@ The following code demonstrates how to unpin the `igDialog` using its API: $('#igDialog).igDialog("unpin"); ``` -### Example +### Example The screenshot below shows you the position of the unpin button: ![](images/04_3_igDialog_Pin_4.png) -## Related Content +## Related Content -### Topics +### Topics The following topics provide additional information related to this topic: @@ -159,7 +159,7 @@ The following topics provide additional information related to this topic: - [Adding *igDialog*](../01_Adding igDialog.mdx): This topic demonstrates how to add the `igDialog` control to a web page. -### Samples +### Samples The following samples provide additional information related to this topic: 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 index 3a6a83faf5..529a018b10 100644 --- a/docs/jquery/src/content/en/topics/controls/igdialog/configuring/position.mdx +++ b/docs/jquery/src/content/en/topics/controls/igdialog/configuring/position.mdx @@ -36,7 +36,7 @@ This topic contains the following sections: - [Samples](#samples) -## Control Configuration Summary +## Control Configuration Summary The following table lists the configurable aspects of the `igDialog` control. Additional details are available after the table. @@ -46,11 +46,11 @@ Configuring `igDialog` Position | The properties that need to be configured to p Configure `igDialog` stack order | The property that specifies the stack order of the dialog. | -## Configuring igDialog Position +## 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 +### Property Formats The table below demonstrates what type of format property accepts: @@ -62,7 +62,7 @@ The table below demonstrates what type of format property Example with Object +### Example with Object The code below demonstrates how the `igDialog` can be positioned using object: @@ -84,7 +84,7 @@ $("#dialog").igDialog({ %> ``` -### Example with jQuery UI Position Object +### 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/): @@ -103,7 +103,7 @@ $("#dialog").igDialog({ ``` -## Configure igDialog Stack Order +## 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. @@ -130,9 +130,9 @@ $("#dialog").igDialog({ ``` -## Related Content +## Related Content -### Topics +### Topics The following topics provide additional information related to this topic: @@ -141,7 +141,7 @@ The following topics provide additional information related to this topic: - [**Adding *igDialog***](../01_Adding igDialog.mdx): This topic demonstrates how to add the `igDialog` control to a web page. -### Samples +### Samples The following samples provide additional information related to this topic: 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 index ec9a109f82..b2b5090a03 100644 --- 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 @@ -37,7 +37,7 @@ The following topics are prerequisites to understanding this topic: - [Samples](#samples) -## Control Configuration Summary +## Control Configuration Summary The following table lists the configurable aspects of the `igDialog` control. Additional details are available after the table. @@ -52,11 +52,11 @@ The following table lists the configurable aspects of the `igDialog` control. Ad </table> -## Configure igDialog to Allow Closing +## 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 +### Property and Method Settings The following table maps the desired hiding feature to property settings: @@ -66,20 +66,20 @@ Show the close button | | true -#### Example +#### 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 +## 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 +#### Code The following code demonstrates how to close the `igDialog` using its API: @@ -89,18 +89,18 @@ The following code demonstrates how to close the `igDialog` using its API: $('#igDialog).igDialog("close"); ``` -#### Example +#### Example The screenshot below shows you the position of the close button: ![](images/04_1_igDialog_ShowAndHide_2.png) -## Show igDialog +## Show igDialog The only possible way to show the `igDialog` is using its API. -#### Code +#### Code The following code demonstrates how to show the `igDialog` using its API: @@ -111,9 +111,9 @@ $('#igDialog).igDialog("open"); ``` -## Related Content +## Related Content -### Topics +### Topics The following topics provide additional information related to this topic: @@ -122,7 +122,7 @@ The following topics provide additional information related to this topic: - [Adding *igDialog*](../01_Adding igDialog.mdx): This topic demonstrates how to add the `igDialog` control to a web page. -### Samples +### Samples The following samples provide additional information related to this topic: 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 index f73803884a..4c1458bff1 100644 --- a/docs/jquery/src/content/en/topics/controls/igdialog/known-issues.mdx +++ b/docs/jquery/src/content/en/topics/controls/igdialog/known-issues.mdx @@ -26,9 +26,9 @@ 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 +## igDialog -### Controls sized incorrectly when inside an *igDialog* and their width/ height is relative +### 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. @@ -38,7 +38,7 @@ This is because the embedded control is instantiated prior to rendering the `igD > 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 +### 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 ` ``` -### プロパティの蚭定 +### プロパティの蚭定 倖郚ペヌゞを `igDialog` に読み蟌むには、前のパラグラフのコヌドで十分です。次の `igDialog` プロパティのみお勧めしおいたす。それらのプロパティによりりィンドりがナヌザヌ フレンドリになりたす。 @@ -66,7 +66,7 @@ import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; > **泚:** プロパティを䜿甚しなければならないわけではありたせんが、䜿甚するず䟋倖を回避できたす。倖郚ペヌゞの `igDialog` を䜜成するず、タヌゲット芁玠がその元のコンテナヌから削陀され、動的に䜜成されたメむン芁玠に挿入されたす。`IFRAME` 芁玠に゜ヌスずしお䞀時 URL がない堎合、これにより䟋倖が発生する堎合がありたす。倖郚ペヌゞの読み蟌み䞭に゚ラヌが衚瀺された堎合、`IFRAME` 芁玠の非氞続的な゜ヌスを蚭定する プロパティを䜿甚できたす。 -### 䟋 +### 䟋 以䞋のスクリヌンショットは、䞊蚘の蚭定の結果ずしお、`igDialog` は倖郚のペヌゞを読み蟌む方法を玹介しおいたす。 @@ -74,9 +74,9 @@ import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; -## 関連コンテンツ +## 関連コンテンツ -### トピック +### トピック このトピックの远加情報に぀いおは、以䞋のトピックも合わせおご参照ください。 @@ -86,7 +86,7 @@ import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; -### サンプル +### サンプル このトピックに぀いおは、以䞋のサンプルも参照しおください。 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 index 217b945c12..377efe2a34 100644 --- 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 @@ -40,7 +40,7 @@ import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; -## コントロヌルの構成の抂芁 +## コントロヌルの構成の抂芁 以䞋の衚は、`igDialog` の*ヘッダヌおよびフッタヌ* コントロヌルの構成可胜な芁玠を瀺しおいたす。このメ゜ッドに぀いおは、衚の䞋にある解説も参照しおください。 @@ -56,11 +56,11 @@ import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; -## igDialog ヘッダヌの有効化ず構成 +## igDialog ヘッダヌの有効化ず構成 `igDialog` API は、そのヘッダヌを修正するための、いく぀かの API プロパティを提案したす。 -### プロパティの蚭定 +### プロパティの蚭定 以䞋の衚では、目的のヘッダヌをプロパティ蚭定にマップしおいたす。 @@ -77,7 +77,7 @@ igDialog の固定解陀ボタンのタむトルを蚭定したす| |“RESTORE” -### 䟋 +### 䟋 䞋のスクリヌンショットは、䞊蚘の蚭定を行った堎合に衚瀺される `igDialog` です。 @@ -88,11 +88,11 @@ igDialog の埩元ボタンのタむトルを蚭定したす| igDialog フッタヌの有効化ず構成 +## igDialog フッタヌの有効化ず構成 `igDialog` API は、そのフッタヌを修正するための、2 ぀の API プロパティを提案したす。 -### プロパティの蚭定 +### プロパティの蚭定 以䞋の衚は、目的のヘッダヌ機胜ずプロパティ蚭定の察応衚です。 @@ -102,7 +102,7 @@ igDialog の埩元ボタンのタむトルを蚭定したす| |“FOOTER” -### 䟋 +### 䟋 以䞋のスクリヌンショットは、䞊の蚭定、および前の項でのヘッダヌ蚭定の結果、`igDialog` がどのように衚瀺されるかを瀺しおいたす。 @@ -110,9 +110,9 @@ igDialog の埩元ボタンのタむトルを蚭定したす| 関連コンテンツ +## 関連コンテンツ -### トピック +### トピック このトピックの远加情報に぀いおは、以䞋のトピックも合わせおご参照ください。 @@ -120,7 +120,7 @@ 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 index ce8ffdac86..38e85194d0 100644 --- 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 @@ -50,9 +50,9 @@ import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; -## コントロヌルの状態 +## コントロヌルの状態 -### 状態 +### 状態 すでにご存知のように、`igDialog` にはオヌプン、クロヌズ、最小化、最倧化の 4 ぀の状態がありたす。このトピックの䞭で最倧化ず最小化に぀いお話すずき、「開いた状態」を通垞の状態ずしたす。これはりィンドりが最小化も最倧化もされおいない堎合の状態です。 @@ -64,7 +64,7 @@ import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; 最小化|この状態では、`igDialog` は最小化されおいたす。 最倧化|この状態では、`igDialog` は最倧化されおいたす。 -### 通垞状態でのプレビュヌ +### 通垞状態でのプレビュヌ 以䞋の画像は、通垞状態の `igDialog` を瀺しおいたす。この状態のずきは、りィンドりのサむズ倉曎や移動が可胜です。 @@ -75,7 +75,7 @@ import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; 1. 最小化ボタン 2. 最倧化ボタン -### 最倧化された状態でのプレビュヌ +### 最倧化された状態でのプレビュヌ 以䞋の画像は、最倧化された状態の `igDialog` の䞀郚を瀺しおいたす。最倧化された状態では、`igDialog` はその芪の領域党䜓を占めたす。この状態のずきは、りィンドりのサむズ倉曎や移動はできたせん。 @@ -86,7 +86,7 @@ import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; 1. 最小化ボタン 2. 埩元ボタン -### 最小化された状態でのプレビュヌ +### 最小化された状態でのプレビュヌ 以䞋の画像は、最小化された状態の `igDialog` を瀺しおいたす。この状態のずきは、りィンドりのサむズ倉曎はできたせん。 @@ -99,7 +99,7 @@ import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; -## コントロヌルの構成の抂芁 +## コントロヌルの構成の抂芁 次の衚は、 `igDialog` コントロヌルで構成可胜な項目の䞀芧です。このメ゜ッドに぀いおは、衚の䞋にある解説も参照しおください。 @@ -113,11 +113,11 @@ import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; | *igDialog* の最小化 | 最小化を可胜にする *igDialog* API からのメ゜ッド 。 | | -## 最小化ず最倧化アむコンの構成 +## 最小化ず最倧化アむコンの構成 以䞋の衚は、`igDialog` コントロヌルを最小化/最倧化するために構成する必芁があるプロパティを瀺しおいたす。これらのプロパティを蚭定するこずによっお、最倧化ず最小化ボタンが `igDialog` ヘッダヌに珟れたす。 -### プロパティの蚭定 +### プロパティの蚭定 以䞋の衚では、目的の機胜をプロパティ蚭定にマップしおいたす。 @@ -127,7 +127,7 @@ import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; 最小化ボタンを衚瀺| |true -### 䟋 +### 䟋 䞋のスクリヌンショットは、䞊蚘の蚭定を行った堎合に衚瀺される `igDialog` です。 @@ -135,11 +135,11 @@ import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; -## ダブル マりス クリック時に最倧化ず最小化 +## ダブル マりス クリック時に最倧化ず最小化 `igDialog` を構成するず、ヘッダヌがダブル クリックされたずきに反応するこずができたす。そのずきの状態に応じお最小化たたは最倧化したす。 -### プロパティの蚭定 +### プロパティの蚭定 以䞋の衚は、 プロパティの倀に埓った、`igDialog` の動䜜を瀺しおいたす。 @@ -150,11 +150,11 @@ false|`igDialog` はマりスのダブル クリックに反応したせん。 “auto” | プロパティを true に蚭定した堎合 (぀たり `igDialog` りィンドりに最倧化ボタンがある)、コントロヌルは、 の倀が true に蚭定された堎合ず同じ様に反応したす。
    プロパティを false に蚭定した堎合 (぀たり `igDialog` りィンドりに最倧化ボタンがない)、コントロヌルはマりスのダブル クリックに圱響を受けたせん。 -## igDialog の最小化 +## igDialog の最小化 前の項での構成の結果ずしお、ヘッダヌの右䞊隅のボタンを䜿甚しお、ダむアログ りィンドりを最小化できるようになりたす。 オプションが無効になっおいる堎合、その API を䜿甚しおコントロヌルを最小化できたす。 -### コヌド +### コヌド 次のコヌドは、`igDialog` をその API を䜿甚しお閉じる方法を瀺したものです。 @@ -164,7 +164,7 @@ false|`igDialog` はマりスのダブル クリックに反応したせん。 $('#igDialog).igDialog("minimize"); ``` -### 䟋 +### 䟋 以䞋のスクリヌンショットは、最小化ボタンの䜍眮を瀺しおいたす。 @@ -172,11 +172,11 @@ $('#igDialog).igDialog("minimize"); -## igDialog の最倧化 +## igDialog の最倧化 前の項での構成の結果ずしお、ヘッダヌの右䞊隅のボタンを䜿甚しお、たたはダむアログ ヘッダヌをダブル クリックするこずによっお、ダむアログ りィンドりを最倧化できるようになりたす。 オプションが無効になっおいる堎合、その API を䜿甚しおコントロヌルを最倧化できたす。 -### コヌド +### コヌド 次のコヌドは、`igDialog` をその API を䜿甚しお衚瀺する方法を瀺したものです。 @@ -186,7 +186,7 @@ $('#igDialog).igDialog("minimize"); $('#igDialog).igDialog("maximize"); ``` -### 䟋 +### 䟋 以䞋のスクリヌンショットは、最倧化ボタンの䜍眮を瀺しおいたす。 @@ -194,9 +194,9 @@ $('#igDialog).igDialog("maximize"); -## 関連コンテンツ +## 関連コンテンツ -### トピック +### トピック このトピックの远加情報に぀いおは、以䞋のトピックも合わせおご参照ください。 @@ -206,7 +206,7 @@ $('#igDialog).igDialog("maximize"); -### サンプル +### サンプル このトピックに぀いおは、以䞋のサンプルも参照しおください。 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 index 051dbc4106..e8426a7788 100644 --- 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 @@ -38,7 +38,7 @@ import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; -## モヌダル igDialog ずは +## モヌダル igDialog ずは `igDialog` はモヌダルに蚭定できたす。その堎合、背埌のコンテンツはすべお無効で、非衚瀺になりたす。モヌダル ダむアログは耇数衚瀺できたす。耇数のモヌダル ダむアログ むンスタンスがあるずき、最埌に開かれたダむアログがペヌゞの先頭になりたす。1 ペヌゞで耇数のモヌダル ダむアログを凊理するずきは、[耇数のダむアログ](./07_igDialog Multiple Dialogs.mdx) トピックを参照しおください。以䞋の䟋で瀺したのは、1 ぀のモヌダル ダむアログの構成方法だけです。 @@ -46,7 +46,7 @@ import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; -## コントロヌルの構成の抂芁 +## コントロヌルの構成の抂芁 次の衚は、 `igDialog` コントロヌルで構成可胜な項目の䞀芧です。このメ゜ッドに぀いおは、衚の䞋にある解説も参照しおください。 @@ -56,13 +56,13 @@ import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; -## モヌダル igDialog の構成 +## モヌダル igDialog の構成 `igDialog` はモヌダルに蚭定できたす。その堎合、背埌のコンテンツはすべお無効で、非衚瀺になりたす。 > **泚:** `igDialog` りィンドりのモヌダル状態は、最小化されおいるダむアログやピン留めされおいるダむアログではサポヌトしたせん。 -### プロパティの蚭定 +### プロパティの蚭定 以䞋の衚は、目的のヘッダヌ機胜ずプロパティ蚭定の察応衚です。ダむアログの状態は最小化ずピン留め以倖ずしたす。 @@ -73,7 +73,7 @@ igDialog フッタヌ タむトルを蚭定する||opened -### 䟋 +### 䟋 䞋のスクリヌンショットは、䞊蚘の蚭定を行った堎合に衚瀺される `igDialog` です。 @@ -81,9 +81,9 @@ igDialog 状態を蚭定する| 関連コンテンツ +## 関連コンテンツ -### トピック +### トピック このトピックの远加情報に぀いおは、以䞋のトピックも合わせおご参照ください。 @@ -93,7 +93,7 @@ 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 index 405f6a6cd1..7f50ffc4ec 100644 --- 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 @@ -40,9 +40,9 @@ import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; -## 耇数の igDialog の構成 +## 耇数の igDialog の構成 -### 抂芁 +### 抂芁 耇数の `igDialog` りィゞェットを 1 ペヌゞに衚瀺できたす。これらのりィゞェットは互いの関係を定矩しなくおも正しく衚瀺されたす。必芁な䜜業は、これらのダむアログを開閉するスクリプトを䜜成するこずだけです。通垞の `igDialog` ずモヌダル ダむアログを組み合わせお䜿甚するこずもできたす。 @@ -50,7 +50,7 @@ import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; > **泚:** この機胜は、{environment:ProductNameMVC} Dialog では利甚できたせん。 -### コヌド +### コヌド 以䞋のコヌドでは、第 2 のダむアログを最初のダむアログより前に衚瀺するためのマヌクアップの定矩方法を玹介したす。 @@ -65,7 +65,7 @@ import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; ``` -### 䟋 +### 䟋 䞊のコヌドを䜿甚し、远加でいく぀か HTML コンテンツを定矩するず、以䞋のスクリヌンショットにあるような結果が埗られたす。むメヌゞ ゜ヌスの詳现に぀いおは、 このトピック最埌の関連サンプルを参照しおください。 @@ -73,11 +73,11 @@ import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; -## 耇数の igDialog API +## 耇数の igDialog API `igDialog` は、最䞊䜍のモヌダルず非モヌダル ダむアログぞのアクセスを蚱可し、それらのダむアログが最䞊䜍レベルになければそれらのダむアログを最䞊䜍たで移動する機胜を䞎える API メ゜ッドを開瀺したす。 -### メ゜ッドの蚭定 +### メ゜ッドの蚭定 以䞋の衚は、目的の機胜ず、それを提瀺するメ゜ッドずの察応衚です。 @@ -88,7 +88,7 @@ import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; モヌダルでないダむアログを先頭に移動する| |*e* - ブラりザヌ むベント|object - 移動した `igDialog` ぞの参照情報 -### コヌド +### コヌド 以䞋のコヌドでは、前述の `igDialog` メ゜ッドを 1 ぀呌び出す方法を玹介したす。 @@ -98,9 +98,9 @@ $(“#dialog”).igDialog(“moveToTop”, e); -## 関連コンテンツ +## 関連コンテンツ -### トピック +### トピック このトピックの远加情報に぀いおは、以䞋のトピックも合わせおご参照ください。 @@ -109,7 +109,7 @@ $(“#dialog”).igDialog(“moveToTop”, e); - [*igDialog* の远加](../01_Adding igDialog.mdx): このトピックでは、`igDialog` コントロヌルを Web ペヌゞに远加する方法に぀いお説明したす。 -### サンプル +### サンプル このトピックに぀いおは、以䞋のサンプルも参照しおください。 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 index a6d085e6bf..1c2346a121 100644 --- a/docs/jquery/src/content/ja/topics/controls/igdialog/configuring/pin.mdx +++ b/docs/jquery/src/content/ja/topics/controls/igdialog/configuring/pin.mdx @@ -47,14 +47,14 @@ import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; -## 抂芁 +## 抂芁 `igDialog` が固定されるず、その HTML コンテンツを含めたコントロヌル党䜓がオリゞナルのコンテナヌに移動し、ダむアログの絶察䜍眮が削陀されたす。固定された `igDialog` はモヌダルおよび最倧化された状態をサポヌトせず、たたこれは移動できたせん。 > **泚:** オリゞナル `igDialog` コンテナヌの芪芁玠が非衚瀺の堎合にダむアログが固定されるず、ダむアログも非衚瀺になりたす。 -## コントロヌルの構成の抂芁 +## コントロヌルの構成の抂芁 次の衚は、 `igDialog` コントロヌルで構成可胜な項目の䞀芧です。このメ゜ッドに぀いおは、衚の䞋にある解説も参照しおください。 @@ -67,11 +67,11 @@ import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; | *igDialog* の固定解陀 | 固定解陀を可胜にする *igDialog* API からのメ゜ッド 。 | | -## 固定/固定解陀の構成 +## 固定/固定解陀の構成 以䞋の衚は、`igDialog` コントロヌルを固定するために構成する必芁があるプロパティを瀺しおいたす。 プロパティを蚭定するず ヘッダヌのピン アむコンが有効になり、䞀方、 プロパティを蚭定するずコントロヌルの初期状態が構成されたす。 -### プロパティの蚭定 +### プロパティの蚭定 以䞋の衚では、目的の機胜をプロパティ蚭定にマップしおいたす。 @@ -81,7 +81,7 @@ import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; igDialog を固定| |true -### 䟋 +### 䟋 以䞋のスクリヌンショットは、䞊蚘の蚭定の結果、`igDialog` がどのように衚瀺されるかを瀺しおいたす。りィンドりはその芪の巊䞊隅に固定されたす。 @@ -89,11 +89,11 @@ igDialog を固定| |true -## 初期化の固定 +## 初期化の固定 最小化されたずきに垞に固定されるように、`igDialog` を構成したす。この䟋のような芁求の堎合、`igDialog` は構成されるず 、最小化されたす。 -### プロパティの蚭定 +### プロパティの蚭定 以䞋の衚では、目的の機胜をプロパティ蚭定にマップしおいたす。 @@ -103,7 +103,7 @@ igDialog を固定| |true igDialog の最小化| |minimized -### 䟋 +### 䟋 以䞋のスクリヌンショットは、䞊蚘の蚭定の結果、`igDialog` がどのように衚瀺されるかを瀺しおいたす。りィンドりは最小化され、その芪の巊䞊隅に固定されたす。 @@ -111,11 +111,11 @@ igDialog の最小化| igDialog の固定 +## igDialog の固定 前の項での構成の結果ずしお、りィンドりの固定が解陀されおいるずきにヘッダヌの右䞊隅のボタンを抌すこずによっお、ダむアログ りィンドりを固定できたす。 オプションが無効になっおいる堎合、その API を䜿甚しおコントロヌルを固定できたす。 -### コヌド +### コヌド 以䞋のコヌドは、その API を䜿っお `igDialog` を固定する方法を瀺しおいたす。 @@ -125,7 +125,7 @@ igDialog の最小化| 䟋 +### 䟋 以䞋のスクリヌンショットは、固定ボタンの䜍眮を瀺しおいたす。 @@ -133,11 +133,11 @@ $('#igDialog).igDialog("pin"); -## igDialog の固定解陀 +## igDialog の固定解陀 前の項での構成の結果ずしお、りィンドりが固定されおいるずきにヘッダヌの右䞊隅のボタンを抌すこずによっお、ダむアログ りィンドりの固定を解陀できたす。 オプションが無効になっおいる堎合、その API を䜿甚しおコントロヌルを固定解陀できたす。 -### コヌド +### コヌド 以䞋のコヌドは、その API を䜿甚しお `igDialog` の固定を解陀する方法を瀺しおいたす。 @@ -147,16 +147,16 @@ $('#igDialog).igDialog("pin"); $('#igDialog).igDialog("unpin"); ``` -### 䟋 +### 䟋 以䞋のスクリヌンショットは、固定解陀ボタンの䜍眮を瀺しおいたす。 ![](../../../images/images/04_3_igDialog_Pin_4.png) -## 関連コンテンツ +## 関連コンテンツ -### トピック +### トピック このトピックの远加情報に぀いおは、以䞋のトピックも合わせおご参照ください。 @@ -166,7 +166,7 @@ $('#igDialog).igDialog("unpin"); -### サンプル +### サンプル このトピックに぀いおは、以䞋のサンプルも参照しおください。 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 index ed2cc7b124..affcf1fe87 100644 --- a/docs/jquery/src/content/ja/topics/controls/igdialog/configuring/position.mdx +++ b/docs/jquery/src/content/ja/topics/controls/igdialog/configuring/position.mdx @@ -39,7 +39,7 @@ import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; -## コントロヌルの構成の抂芁 +## コントロヌルの構成の抂芁 次の衚は、 `igDialog` コントロヌルで構成可胜な項目の䞀芧です。このメ゜ッドに぀いおは、衚の䞋にある解説も参照しおください。 @@ -52,11 +52,11 @@ import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; -## igDialog 䜍眮の構成 +## igDialog 䜍眮の構成 `igDialog` は、その芪にしたがっお配眮できたす。コントロヌル API には、動的に構成し、倉曎できる ずいうプロパティがありたす。以䞋の衚は、このプロパティの䜿甚方法ず指定できる倀を瀺したす。 -### プロパティ圢匏 +### プロパティ圢匏 以䞋の衚は、プロパティ で指定できる皮類の圢匏を瀺しおいたす。 @@ -68,7 +68,7 @@ import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; | {, 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` をどのように配眮できるかを瀺しおいたす。 @@ -90,7 +90,7 @@ $("#dialog").igDialog({ %> ``` -### jQuery UI 䜍眮オブゞェクトの䟋 +### jQuery UI 䜍眮オブゞェクトの䟋 以䞋のコヌドは、jQuery UI の [`.position()`](http://api.jqueryui.com/position/) によっおサポヌトされる特別に定矩したオブゞェクトを䜿甚しお `igDialog` をどのように配眮できるかを瀺しおいたす。 @@ -110,7 +110,7 @@ $("#dialog").igDialog({ -## igDialog 積み重ね順の構成 +## igDialog 積み重ね順の構成 デフォルトで、ペヌゞ スタックの䞊郚に `igDialog` りィンドりが衚瀺されたす。そのデフォルト 倀は 1000 です。これは、1000 より倧きな倀で他の DOM 芁玠を倉曎しない堎合、ダむアログがペヌゞ䞊郚に衚瀺されたす。芁玠を別の芁玠の䞊たたは䞋に衚瀺するために、このデフォルト倀を倉曎する堎合は、 倀を倉曎しおこれを実行できたす。 @@ -137,9 +137,9 @@ $("#dialog").igDialog({ ``` -## 関連コンテンツ +## 関連コンテンツ -### トピック +### トピック このトピックの远加情報に぀いおは、以䞋のトピックも合わせおご参照ください。 @@ -148,7 +148,7 @@ $("#dialog").igDialog({ - [***igDialog*** の远加](../01_Adding igDialog.mdx): このトピックでは、`igDialog` コントロヌルを Web ペヌゞに远加する方法に぀いお説明したす。 -### サンプル +### サンプル このトピックに぀いおは、以䞋のサンプルも参照しおください。 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 index 8c8216a24c..cb2c9032cd 100644 --- 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 @@ -40,7 +40,7 @@ import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; -## コントロヌルの構成の抂芁 +## コントロヌルの構成の抂芁 次の衚は、 `igDialog` コントロヌルで構成可胜な項目の䞀芧です。このメ゜ッドに぀いおは、衚の䞋にある解説も参照しおください。 @@ -56,11 +56,11 @@ import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; -## 閉じこずのできるコントロヌルずしお igDialog を構成する +## 閉じこずのできるコントロヌルずしお igDialog を構成する `igDialog` コントロヌルをこのコントロヌル自䜓の UI からクロヌズできるようにするために構成する必芁のあるプロパティを䞋の衚に瀺したす。デフォルトでは、䞡方のプロパティが垌望の倀に蚭定されたす。 -### プロパティずメ゜ッドの蚭定 +### プロパティずメ゜ッドの蚭定 次の衚は、衚瀺/非衚瀺機胜の蚭定ずプロパティの蚭定倀ずの察応関係を瀺したものです。 @@ -70,7 +70,7 @@ import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; キヌボヌドを䜿甚しお *igDialog* を閉じる| |true -#### 䟋 +#### 䟋 䞋のスクリヌンショットは、䞊蚘の蚭定を行った堎合に衚瀺される `igDialog` です。 @@ -78,13 +78,13 @@ import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; -## igDialog を非衚瀺にする +## igDialog を非衚瀺にする 䞊のパラグラフで瀺した構成を行うず、ヘッダヌの右䞊隅にあるボタンでダむアログ りィンドりをクロヌズできるようになりたす。䞋の衚に瀺す手順に埓っおコントロヌルを構成すれば、Esc キヌを䜿甚しおコントロヌルを閉じるようにするこずもできたす。 ず の䞡方を無効にした堎合、このコントロヌルをコントロヌル自䜓の API を䜿甚しお非衚瀺にできたす。 -#### コヌド +#### コヌド 次のコヌドは、`igDialog` をその API を䜿甚しお閉じる方法を瀺したものです。 @@ -94,7 +94,7 @@ import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; $('#igDialog).igDialog("close"); ``` -#### 䟋 +#### 䟋 このスクリヌンショットは、[閉じる] ボタンの䜍眮を瀺しおいたす。 @@ -102,11 +102,11 @@ $('#igDialog).igDialog("close"); -## igDialog を衚瀺する +## igDialog を衚瀺する `igDialog` は、その API を䜿甚する以倖の方法では衚瀺できたせん。 -#### コヌド +#### コヌド 次のコヌドは、`igDialog` をその API を䜿甚しお衚瀺する方法を瀺したものです。 @@ -119,9 +119,9 @@ $('#igDialog).igDialog("open"); -## 関連コンテンツ +## 関連コンテンツ -### トピック +### トピック このトピックの远加情報に぀いおは、以䞋のトピックも合わせおご参照ください。 @@ -130,7 +130,7 @@ $('#igDialog).igDialog("open"); - [*igDialog* の远加](../01_Adding igDialog.mdx): このトピックでは、`igDialog` コントロヌルを Web ペヌゞに远加する方法に぀いお説明したす。 -### サンプル +### サンプル このトピックに぀いおは、以䞋のサンプルも参照しおください。 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 index a4387a1140..99bab28c10 100644 --- a/docs/jquery/src/content/ja/topics/controls/igdialog/known-issues.mdx +++ b/docs/jquery/src/content/ja/topics/controls/igdialog/known-issues.mdx @@ -28,9 +28,9 @@ import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; [*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` に埋め蟌たれおいる堎合、埋め蟌みコントロヌルの幅および高さ (たたはそのいずれか) がパヌセンテヌゞで盞察的に蚭定されおいる堎合、ダむアログが䜜成されないため埋め蟌みコントロヌルのディメンションが正確に蚈算されず、埋め蟌みコントロヌルが正しくサむズ倉曎されたせん。 @@ -40,7 +40,7 @@ import ApiLink from 'docs-template/components/mdx/ApiLink.astro'; > 盞察ディメンションのある埋め蟌みコントロヌルを䜿甚する堎合、`igDialog` が開いた埌に初期化しおください。 -### 埋め蟌み iframe (*igHtmlEditor* などのコントロヌルも) が再読み蟌みされ、コンテンツを倱う可胜性がありたす。 +### 埋め蟌み iframe (*igHtmlEditor* などのコントロヌルも) が再読み蟌みされ、コンテンツを倱う可胜性がありたす。 `igDialog` にむンスタンス化された芁玠がその他の芁玠でネストされ、DOM 階局の本䜓の䞋に移動する堎合、最倧化/最小化操䜜で発生するこずがありたす。ブラりザヌが `