From 8c3fae500621dac0e7da4fc4045e5cea8c7a15c1 Mon Sep 17 00:00:00 2001 From: dobromirts Date: Tue, 19 May 2026 21:51:23 +0300 Subject: [PATCH 1/2] Add API docs link checker script and fix broken API links --- api-link-report-angular.md | 12 + api-link-report-blazor.md | 12 + api-link-report-react.md | 12 + api-link-report-wc.md | 12 + .../public/images/general/buildCLIapp.gif | Bin 0 -> 115663 bytes .../src/content/en/components/accordion.mdx | 2 +- .../src/content/en/components/badge.mdx | 2 +- .../charts/features/chart-axis-options.mdx | 4 +- .../charts/features/chart-overlays.mdx | 8 +- .../src/content/en/components/chat.mdx | 20 +- .../src/content/en/components/checkbox.mdx | 2 +- .../src/content/en/components/combo.mdx | 4 +- .../src/content/en/components/date-picker.mdx | 2 +- .../en/components/date-range-picker.mdx | 6 +- .../en/components/date-time-editor.mdx | 2 +- .../en/components/drop-down-virtual.mdx | 4 +- .../src/content/en/components/drop-down.mdx | 4 +- .../components/excel-library-using-cells.mdx | 36 +- .../components/excel-library-using-tables.mdx | 8 +- .../excel-library-using-workbooks.mdx | 8 +- .../excel-library-using-worksheets.mdx | 26 +- .../excel-library-working-with-charts.mdx | 2 +- .../excel-library-working-with-grids.mdx | 2 +- .../excel-library-working-with-sparklines.mdx | 2 +- .../content/en/components/excel-library.mdx | 4 +- .../content/en/components/excel-utility.mdx | 6 +- .../content/en/components/expansion-panel.mdx | 2 +- .../src/content/en/components/for-of.mdx | 2 +- .../en/components/general/update-guide.mdx | 2 +- .../geo-map-binding-multiple-shapes.mdx | 16 +- .../components/geo-map-binding-shp-file.mdx | 20 +- .../geo-map-display-azure-imagery.mdx | 15 +- .../geo-map-display-bing-imagery.mdx | 26 +- .../geo-map-display-esri-imagery.mdx | 6 +- .../geo-map-display-heat-imagery.mdx | 24 +- .../geo-map-display-imagery-types.mdx | 16 +- .../geo-map-display-osm-imagery.mdx | 6 +- .../en/components/geo-map-resources-esri.mdx | 4 +- .../geo-map-shape-files-reference.mdx | 2 +- .../geo-map-type-scatter-area-series.mdx | 8 +- .../geo-map-type-scatter-bubble-series.mdx | 2 +- .../geo-map-type-scatter-contour-series.mdx | 4 +- .../geo-map-type-scatter-symbol-series.mdx | 8 +- .../geo-map-type-shape-polygon-series.mdx | 8 +- .../geo-map-type-shape-polyline-series.mdx | 8 +- .../src/content/en/components/icon-button.mdx | 2 +- .../src/content/en/components/input-group.mdx | 10 +- .../src/content/en/components/label-input.mdx | 4 +- .../content/en/components/linear-progress.mdx | 4 +- .../src/content/en/components/navdrawer.mdx | 2 +- .../en/components/slider/slider-ticks.mdx | 2 +- .../content/en/components/slider/slider.mdx | 12 +- .../en/components/spreadsheet-activation.mdx | 10 +- .../components/spreadsheet-chart-adapter.mdx | 6 +- .../en/components/spreadsheet-clipboard.mdx | 4 +- .../en/components/spreadsheet-commands.mdx | 6 +- .../spreadsheet-conditional-formatting.mdx | 36 +- .../en/components/spreadsheet-configuring.mdx | 6 +- .../en/components/spreadsheet-overview.mdx | 2 +- .../en/components/themes/sass/animations.mdx | 6 +- .../src/content/en/components/time-picker.mdx | 6 +- .../src/content/en/components/tooltip.mdx | 2 +- .../en/components/transaction-classes.mdx | 9 +- .../en/components/transaction-how-to-use.mdx | 4 +- .../src/content/en/components/transaction.mdx | 4 +- .../en/grids_templates/batch-editing.mdx | 14 +- .../en/grids_templates/column-selection.mdx | 2 +- .../grids_templates/excel-style-filtering.mdx | 2 +- .../content/en/grids_templates/row-adding.mdx | 4 +- .../content/en/grids_templates/row-drag.mdx | 7 +- .../en/grids_templates/state-persistence.mdx | 2 +- .../src/content/jp/components/badge.mdx | 2 +- .../content/jp/components/bullet-graph.mdx | 4 +- .../jp/components/charts/chart-features.mdx | 6 +- .../jp/components/charts/chart-overview.mdx | 6 +- .../charts/features/chart-animations.mdx | 2 +- .../charts/features/chart-annotations.mdx | 2 +- .../charts/features/chart-axis-options.mdx | 4 +- .../features/chart-data-aggregations.mdx | 2 +- .../charts/features/chart-data-filtering.mdx | 2 +- .../charts/features/chart-data-legend.mdx | 2 +- .../charts/features/chart-data-tooltip.mdx | 8 +- .../charts/features/chart-highlighting.mdx | 6 +- .../charts/features/chart-markers.mdx | 2 +- .../charts/features/chart-navigation.mdx | 6 +- .../charts/features/chart-overlays.mdx | 18 +- .../charts/features/chart-performance.mdx | 6 +- .../charts/features/chart-synchronization.mdx | 2 +- .../charts/features/chart-tooltips.mdx | 8 +- .../charts/features/chart-trendlines.mdx | 8 +- .../features/chart-user-annotations.mdx | 12 +- .../jp/components/charts/types/area-chart.mdx | 20 +- .../jp/components/charts/types/bar-chart.mdx | 10 +- .../components/charts/types/bubble-chart.mdx | 6 +- .../components/charts/types/column-chart.mdx | 18 +- .../charts/types/composite-chart.mdx | 10 +- .../charts/types/data-pie-chart.mdx | 2 +- .../components/charts/types/donut-chart.mdx | 2 +- .../jp/components/charts/types/line-chart.mdx | 14 +- .../jp/components/charts/types/pie-chart.mdx | 2 +- .../components/charts/types/point-chart.mdx | 4 +- .../components/charts/types/polar-chart.mdx | 16 +- .../components/charts/types/radial-chart.mdx | 14 +- .../components/charts/types/scatter-chart.mdx | 14 +- .../components/charts/types/shape-chart.mdx | 10 +- .../charts/types/sparkline-chart.mdx | 2 +- .../components/charts/types/spline-chart.mdx | 8 +- .../jp/components/charts/types/step-chart.mdx | 2 +- .../components/charts/types/stock-chart.mdx | 2 +- .../components/charts/types/treemap-chart.mdx | 2 +- .../src/content/jp/components/chat.mdx | 20 +- .../src/content/jp/components/checkbox.mdx | 2 +- .../src/content/jp/components/combo.mdx | 4 +- .../content/jp/components/dashboard-tile.mdx | 14 +- .../src/content/jp/components/date-picker.mdx | 2 +- .../jp/components/date-range-picker.mdx | 6 +- .../jp/components/date-time-editor.mdx | 2 +- .../jp/components/drop-down-virtual.mdx | 4 +- .../src/content/jp/components/drop-down.mdx | 4 +- .../components/excel-library-using-cells.mdx | 30 +- .../components/excel-library-using-tables.mdx | 8 +- .../excel-library-using-workbooks.mdx | 8 +- .../excel-library-using-worksheets.mdx | 26 +- .../excel-library-working-with-charts.mdx | 2 +- .../excel-library-working-with-grids.mdx | 2 +- .../excel-library-working-with-sparklines.mdx | 2 +- .../content/jp/components/excel-library.mdx | 4 +- .../content/jp/components/excel-utility.mdx | 6 +- .../src/content/jp/components/for-of.mdx | 2 +- .../jp/components/general/update-guide.mdx | 2 +- .../components/geo-map-binding-data-csv.mdx | 2 +- .../geo-map-binding-data-json-points.mdx | 6 +- .../components/geo-map-binding-data-model.mdx | 12 +- .../geo-map-binding-data-overview.mdx | 2 +- .../geo-map-binding-multiple-shapes.mdx | 18 +- .../geo-map-binding-multiple-sources.mdx | 4 +- .../components/geo-map-binding-shp-file.mdx | 18 +- .../geo-map-display-azure-imagery.mdx | 20 +- .../geo-map-display-bing-imagery.mdx | 28 +- .../geo-map-display-esri-imagery.mdx | 8 +- .../geo-map-display-heat-imagery.mdx | 24 +- .../geo-map-display-imagery-types.mdx | 16 +- .../geo-map-display-osm-imagery.mdx | 6 +- .../jp/components/geo-map-navigation.mdx | 2 +- .../jp/components/geo-map-resources-esri.mdx | 6 +- ...eo-map-resources-shape-styling-utility.mdx | 4 +- .../geo-map-resources-world-connections.mdx | 2 +- .../geo-map-resources-world-locations.mdx | 2 +- .../geo-map-resources-world-util.mdx | 2 +- .../geo-map-shape-files-reference.mdx | 8 +- .../jp/components/geo-map-shape-styling.mdx | 4 +- .../geo-map-type-scatter-area-series.mdx | 10 +- .../geo-map-type-scatter-bubble-series.mdx | 4 +- .../geo-map-type-scatter-contour-series.mdx | 8 +- .../geo-map-type-scatter-density-series.mdx | 2 +- .../geo-map-type-scatter-symbol-series.mdx | 6 +- .../jp/components/geo-map-type-series.mdx | 2 +- .../geo-map-type-shape-polygon-series.mdx | 8 +- .../geo-map-type-shape-polyline-series.mdx | 8 +- .../src/content/jp/components/geo-map.mdx | 16 +- .../grid/selection-based-aggregates.mdx | 2 +- .../src/content/jp/components/icon-button.mdx | 2 +- .../src/content/jp/components/input-group.mdx | 10 +- .../jp/components/inputs/color-editor.mdx | 2 +- .../src/content/jp/components/label-input.mdx | 4 +- .../content/jp/components/linear-gauge.mdx | 4 +- .../content/jp/components/linear-progress.mdx | 4 +- .../content/jp/components/menus/toolbar.mdx | 4 +- .../src/content/jp/components/navdrawer.mdx | 6 +- .../content/jp/components/radial-gauge.mdx | 4 +- .../jp/components/slider/slider-ticks.mdx | 2 +- .../content/jp/components/slider/slider.mdx | 12 +- .../jp/components/spreadsheet-activation.mdx | 12 +- .../components/spreadsheet-chart-adapter.mdx | 6 +- .../jp/components/spreadsheet-clipboard.mdx | 6 +- .../jp/components/spreadsheet-commands.mdx | 4 +- .../spreadsheet-conditional-formatting.mdx | 34 +- .../jp/components/spreadsheet-configuring.mdx | 8 +- .../jp/components/spreadsheet-overview.mdx | 4 +- .../jp/components/themes/sass/animations.mdx | 6 +- .../src/content/jp/components/time-picker.mdx | 6 +- .../src/content/jp/components/tooltip.mdx | 2 +- .../jp/components/transaction-classes.mdx | 10 +- .../jp/components/transaction-how-to-use.mdx | 8 +- .../src/content/jp/components/transaction.mdx | 4 +- .../jp/components/zoomslider-overview.mdx | 4 +- .../jp/grids_templates/batch-editing.mdx | 16 +- .../jp/grids_templates/column-selection.mdx | 4 +- .../jp/grids_templates/column-types.mdx | 6 +- .../grids_templates/excel-style-filtering.mdx | 2 +- .../content/jp/grids_templates/row-adding.mdx | 2 +- .../content/jp/grids_templates/row-drag.mdx | 2 +- .../jp/grids_templates/state-persistence.mdx | 2 +- .../charts/features/chart-axis-options.mdx | 4 +- .../charts/features/chart-overlays.mdx | 8 +- .../editors/multi-column-combobox.mdx | 360 ----------- .../en/components/editors/xdate-picker.mdx | 172 ------ .../components/excel-library-using-cells.mdx | 36 +- .../components/excel-library-using-tables.mdx | 8 +- .../excel-library-using-workbooks.mdx | 8 +- .../excel-library-using-worksheets.mdx | 26 +- .../excel-library-working-with-charts.mdx | 2 +- .../excel-library-working-with-grids.mdx | 2 +- .../excel-library-working-with-sparklines.mdx | 2 +- .../content/en/components/excel-library.mdx | 4 +- .../content/en/components/excel-utility.mdx | 6 +- .../geo-map-binding-multiple-shapes.mdx | 16 +- .../components/geo-map-binding-shp-file.mdx | 20 +- .../geo-map-display-azure-imagery.mdx | 15 +- .../geo-map-display-bing-imagery.mdx | 26 +- .../geo-map-display-esri-imagery.mdx | 6 +- .../geo-map-display-heat-imagery.mdx | 24 +- .../geo-map-display-imagery-types.mdx | 16 +- .../geo-map-display-osm-imagery.mdx | 6 +- .../en/components/geo-map-resources-esri.mdx | 4 +- .../geo-map-shape-files-reference.mdx | 2 +- .../geo-map-type-scatter-area-series.mdx | 8 +- .../geo-map-type-scatter-bubble-series.mdx | 2 +- .../geo-map-type-scatter-contour-series.mdx | 4 +- .../geo-map-type-scatter-symbol-series.mdx | 8 +- .../geo-map-type-shape-polygon-series.mdx | 8 +- .../geo-map-type-shape-polyline-series.mdx | 8 +- .../grids/_shared/batch-editing.mdx | 18 +- .../grids/_shared/cascading-combos.mdx | 2 +- .../components/grids/_shared/cell-editing.mdx | 2 +- .../components/grids/_shared/cell-merging.mdx | 6 +- .../grids/_shared/clipboard-interactions.mdx | 14 +- .../grids/_shared/column-moving.mdx | 8 +- .../grids/_shared/column-pinning.mdx | 9 +- .../grids/_shared/column-resizing.mdx | 2 +- .../grids/_shared/column-selection.mdx | 2 +- .../components/grids/_shared/column-types.mdx | 4 +- .../_shared/conditional-cell-styling.mdx | 2 +- .../en/components/grids/_shared/editing.mdx | 24 +- .../components/grids/_shared/export-excel.mdx | 4 +- .../en/components/grids/_shared/filtering.mdx | 10 +- .../grids/_shared/keyboard-navigation.mdx | 8 +- .../grids/_shared/remote-data-operations.mdx | 4 +- .../components/grids/_shared/row-adding.mdx | 6 +- .../components/grids/_shared/row-editing.mdx | 2 +- .../components/grids/_shared/row-pinning.mdx | 8 +- .../grids/_shared/row-selection.mdx | 12 +- .../en/components/grids/_shared/search.mdx | 6 +- .../en/components/grids/_shared/sorting.mdx | 4 +- .../grids/_shared/state-persistence.mdx | 14 +- .../en/components/grids/_shared/summaries.mdx | 32 +- .../components/grids/_shared/validation.mdx | 10 +- .../content/en/components/grids/data-grid.mdx | 14 +- .../grids/data-grid/accessibility.mdx | 160 ----- .../grids/data-grid/cell-activation.mdx | 66 -- .../grids/data-grid/cell-editing.mdx | 400 ------------ .../grids/data-grid/cell-merging.mdx | 59 -- .../grids/data-grid/cell-selection.mdx | 74 --- .../grids/data-grid/column-animation.mdx | 107 ---- .../grids/data-grid/column-chooser.mdx | 340 ---------- .../grids/data-grid/column-filtering.mdx | 82 --- .../grids/data-grid/column-moving.mdx | 122 ---- .../grids/data-grid/column-options.mdx | 133 ---- .../grids/data-grid/column-pinning.mdx | 466 -------------- .../grids/data-grid/column-resizing.mdx | 146 ----- .../grids/data-grid/column-sorting.mdx | 180 ------ .../grids/data-grid/column-summaries.mdx | 345 ----------- .../grids/data-grid/column-types.mdx | 387 ------------ .../grids/data-grid/horizontal-scrolling.mdx | 142 ----- .../components/grids/data-grid/live-data.mdx | 41 -- .../grids/data-grid/load-save-layout.mdx | 55 -- .../components/grids/data-grid/local-data.mdx | 244 -------- .../grids/data-grid/localization.mdx | 183 ------ .../components/grids/data-grid/overview.mdx | 582 ------------------ .../grids/data-grid/performance.mdx | 61 -- .../grids/data-grid/remote-data.mdx | 152 ----- .../grids/data-grid/row-grouping.mdx | 243 -------- .../grids/data-grid/row-highlighting.mdx | 90 --- .../components/grids/data-grid/row-paging.mdx | 78 --- .../grids/data-grid/row-pinning.mdx | 116 ---- .../grids/data-grid/type-comparison-table.mdx | 41 -- .../grids/data-grid/type-heatmap-table.mdx | 41 -- .../grids/data-grid/type-matrix-table.mdx | 41 -- .../grids/data-grid/type-periodic-table.mdx | 41 -- .../grids/data-grid/type-sparkline-table.mdx | 198 ------ .../en/components/grids/grid/groupby.mdx | 16 +- .../en/components/grids/grid/icons.mdx | 7 + .../components/grids/grid/master-detail.mdx | 6 +- .../en/components/grids/grid/paste-excel.mdx | 2 +- .../grids/grid/selection-based-aggregates.mdx | 4 +- .../hierarchical-grid/load-on-demand.mdx | 4 +- .../grids/hierarchical-grid/overview.mdx | 10 +- .../components/grids/pivot-grid/features.mdx | 4 +- .../components/grids/pivot-grid/overview.mdx | 10 +- .../grids/pivot-grid/remote-operations.mdx | 4 +- .../grids/tree-grid/load-on-demand.mdx | 2 +- .../components/grids/tree-grid/overview.mdx | 8 +- .../en/components/inputs/icon-button.mdx | 3 - .../en/components/inputs/query-builder.mdx | 12 +- .../content/en/components/inputs/tooltip.mdx | 2 +- .../layouts/dock-manager-customization.mdx | 4 +- .../layouts/dock-manager-electron.mdx | 18 +- .../layouts/dock-manager-embedding-frames.mdx | 2 +- .../layouts/dock-manager-updating-panes.mdx | 2 +- .../en/components/layouts/dock-manager.mdx | 72 +-- .../en/components/scheduling/calendar.mdx | 4 +- .../en/components/spreadsheet-activation.mdx | 10 +- .../components/spreadsheet-chart-adapter.mdx | 6 +- .../en/components/spreadsheet-clipboard.mdx | 4 +- .../en/components/spreadsheet-commands.mdx | 6 +- .../spreadsheet-conditional-formatting.mdx | 68 +- .../en/components/spreadsheet-configuring.mdx | 6 +- .../en/components/spreadsheet-hyperlinks.mdx | 2 +- .../en/components/spreadsheet-overview.mdx | 2 +- .../en/components/themes/configuration.mdx | 6 +- .../en/components/themes/elevations.mdx | 4 +- .../content/en/components/themes/overview.mdx | 6 +- .../content/en/components/themes/palettes.mdx | 4 +- .../content/en/components/themes/styles.mdx | 6 +- .../en/components/themes/typography.mdx | 4 +- docs/xplat/src/content/en/toc.json | 297 --------- .../content/jp/components/bullet-graph.mdx | 4 +- .../jp/components/charts/chart-features.mdx | 6 +- .../jp/components/charts/chart-overview.mdx | 6 +- .../charts/features/chart-animations.mdx | 2 +- .../charts/features/chart-annotations.mdx | 2 +- .../charts/features/chart-axis-options.mdx | 4 +- .../features/chart-data-aggregations.mdx | 2 +- .../charts/features/chart-data-filtering.mdx | 2 +- .../charts/features/chart-data-legend.mdx | 2 +- .../charts/features/chart-data-tooltip.mdx | 8 +- .../charts/features/chart-highlighting.mdx | 6 +- .../charts/features/chart-markers.mdx | 2 +- .../charts/features/chart-navigation.mdx | 6 +- .../charts/features/chart-overlays.mdx | 18 +- .../charts/features/chart-performance.mdx | 6 +- .../charts/features/chart-synchronization.mdx | 2 +- .../charts/features/chart-tooltips.mdx | 8 +- .../charts/features/chart-trendlines.mdx | 8 +- .../features/chart-user-annotations.mdx | 12 +- .../jp/components/charts/types/area-chart.mdx | 20 +- .../jp/components/charts/types/bar-chart.mdx | 10 +- .../components/charts/types/bubble-chart.mdx | 6 +- .../components/charts/types/column-chart.mdx | 18 +- .../charts/types/composite-chart.mdx | 10 +- .../charts/types/data-pie-chart.mdx | 2 +- .../components/charts/types/donut-chart.mdx | 2 +- .../components/charts/types/gantt-chart.mdx | 10 +- .../jp/components/charts/types/line-chart.mdx | 14 +- .../components/charts/types/network-chart.mdx | 20 +- .../jp/components/charts/types/pie-chart.mdx | 2 +- .../components/charts/types/point-chart.mdx | 4 +- .../components/charts/types/polar-chart.mdx | 16 +- .../components/charts/types/pyramid-chart.mdx | 8 +- .../components/charts/types/radial-chart.mdx | 14 +- .../components/charts/types/scatter-chart.mdx | 14 +- .../components/charts/types/shape-chart.mdx | 10 +- .../charts/types/sparkline-chart.mdx | 2 +- .../components/charts/types/spline-chart.mdx | 8 +- .../jp/components/charts/types/step-chart.mdx | 2 +- .../components/charts/types/stock-chart.mdx | 2 +- .../components/charts/types/treemap-chart.mdx | 2 +- .../content/jp/components/dashboard-tile.mdx | 14 +- .../editors/multi-column-combobox.mdx | 362 ----------- .../jp/components/editors/xdate-picker.mdx | 154 ----- .../components/excel-library-using-cells.mdx | 30 +- .../components/excel-library-using-tables.mdx | 8 +- .../excel-library-using-workbooks.mdx | 8 +- .../excel-library-using-worksheets.mdx | 26 +- .../excel-library-working-with-charts.mdx | 2 +- .../excel-library-working-with-grids.mdx | 2 +- .../excel-library-working-with-sparklines.mdx | 2 +- .../content/jp/components/excel-library.mdx | 4 +- .../content/jp/components/excel-utility.mdx | 6 +- .../components/geo-map-binding-data-csv.mdx | 2 +- .../geo-map-binding-data-json-points.mdx | 6 +- .../components/geo-map-binding-data-model.mdx | 12 +- .../geo-map-binding-data-overview.mdx | 2 +- .../geo-map-binding-multiple-shapes.mdx | 18 +- .../geo-map-binding-multiple-sources.mdx | 4 +- .../components/geo-map-binding-shp-file.mdx | 18 +- .../geo-map-display-azure-imagery.mdx | 20 +- .../geo-map-display-bing-imagery.mdx | 28 +- .../geo-map-display-esri-imagery.mdx | 8 +- .../geo-map-display-heat-imagery.mdx | 24 +- .../geo-map-display-imagery-types.mdx | 16 +- .../geo-map-display-osm-imagery.mdx | 6 +- .../jp/components/geo-map-navigation.mdx | 2 +- .../jp/components/geo-map-resources-esri.mdx | 6 +- ...eo-map-resources-shape-styling-utility.mdx | 4 +- .../geo-map-resources-world-connections.mdx | 2 +- .../geo-map-resources-world-locations.mdx | 2 +- .../geo-map-resources-world-util.mdx | 2 +- .../geo-map-shape-files-reference.mdx | 8 +- .../jp/components/geo-map-shape-styling.mdx | 4 +- .../geo-map-type-scatter-area-series.mdx | 10 +- .../geo-map-type-scatter-bubble-series.mdx | 4 +- .../geo-map-type-scatter-contour-series.mdx | 8 +- .../geo-map-type-scatter-density-series.mdx | 2 +- .../geo-map-type-scatter-symbol-series.mdx | 6 +- .../jp/components/geo-map-type-series.mdx | 2 +- .../geo-map-type-shape-polygon-series.mdx | 8 +- .../geo-map-type-shape-polyline-series.mdx | 8 +- .../src/content/jp/components/geo-map.mdx | 16 +- .../jp/components/grid-lite/binding.mdx | 2 +- .../jp/components/grid-lite/cell-template.mdx | 2 +- .../grid-lite/column-configuration.mdx | 2 +- .../jp/components/grid-lite/filtering.mdx | 2 +- .../components/grid-lite/header-template.mdx | 2 +- .../jp/components/grid-lite/sorting.mdx | 2 +- .../jp/components/grid-lite/theming.mdx | 2 +- .../grids/_shared/advanced-filtering.mdx | 4 +- .../grids/_shared/batch-editing.mdx | 33 +- .../grids/_shared/cascading-combos.mdx | 10 +- .../components/grids/_shared/cell-editing.mdx | 9 +- .../components/grids/_shared/cell-merging.mdx | 10 +- .../grids/_shared/cell-selection.mdx | 2 +- .../grids/_shared/clipboard-interactions.mdx | 10 +- .../_shared/collapsible-column-groups.mdx | 6 +- .../grids/_shared/column-hiding.mdx | 12 +- .../grids/_shared/column-moving.mdx | 6 +- .../grids/_shared/column-pinning.mdx | 6 +- .../grids/_shared/column-resizing.mdx | 4 +- .../grids/_shared/column-selection.mdx | 6 +- .../components/grids/_shared/column-types.mdx | 8 +- .../_shared/conditional-cell-styling.mdx | 4 +- .../jp/components/grids/_shared/editing.mdx | 28 +- .../grids/_shared/excel-style-filtering.mdx | 11 +- .../components/grids/_shared/export-excel.mdx | 24 +- .../jp/components/grids/_shared/filtering.mdx | 14 +- .../grids/_shared/keyboard-navigation.mdx | 10 +- .../jp/components/grids/_shared/live-data.mdx | 2 +- .../grids/_shared/multi-column-headers.mdx | 6 +- .../grids/_shared/multi-row-layout.mdx | 4 +- .../jp/components/grids/_shared/paging.mdx | 12 +- .../grids/_shared/remote-data-operations.mdx | 6 +- .../components/grids/_shared/row-actions.mdx | 6 +- .../components/grids/_shared/row-adding.mdx | 6 +- .../jp/components/grids/_shared/row-drag.mdx | 4 +- .../components/grids/_shared/row-editing.mdx | 2 +- .../components/grids/_shared/row-pinning.mdx | 6 +- .../grids/_shared/row-selection.mdx | 14 +- .../jp/components/grids/_shared/search.mdx | 4 +- .../jp/components/grids/_shared/selection.mdx | 2 +- .../jp/components/grids/_shared/size.mdx | 4 +- .../jp/components/grids/_shared/sizing.mdx | 2 +- .../jp/components/grids/_shared/sorting.mdx | 12 +- .../grids/_shared/state-persistence.mdx | 16 +- .../jp/components/grids/_shared/summaries.mdx | 36 +- .../jp/components/grids/_shared/toolbar.mdx | 20 +- .../components/grids/_shared/validation.mdx | 14 +- .../grids/_shared/virtualization.mdx | 4 +- .../content/jp/components/grids/data-grid.mdx | 22 +- .../grids/data-grid/accessibility.mdx | 162 ----- .../grids/data-grid/cell-activation.mdx | 68 -- .../grids/data-grid/cell-editing.mdx | 402 ------------ .../grids/data-grid/cell-merging.mdx | 61 -- .../grids/data-grid/cell-selection.mdx | 76 --- .../grids/data-grid/column-animation.mdx | 109 ---- .../grids/data-grid/column-chooser.mdx | 343 ----------- .../grids/data-grid/column-filtering.mdx | 84 --- .../grids/data-grid/column-moving.mdx | 124 ---- .../grids/data-grid/column-options.mdx | 135 ---- .../grids/data-grid/column-pinning.mdx | 470 -------------- .../grids/data-grid/column-resizing.mdx | 148 ----- .../grids/data-grid/column-sorting.mdx | 182 ------ .../grids/data-grid/column-summaries.mdx | 347 ----------- .../grids/data-grid/column-types.mdx | 389 ------------ .../grids/data-grid/horizontal-scrolling.mdx | 144 ----- .../components/grids/data-grid/live-data.mdx | 43 -- .../grids/data-grid/load-save-layout.mdx | 57 -- .../components/grids/data-grid/local-data.mdx | 235 ------- .../grids/data-grid/localization.mdx | 185 ------ .../components/grids/data-grid/overview.mdx | 552 ----------------- .../grids/data-grid/performance.mdx | 48 -- .../grids/data-grid/remote-data.mdx | 154 ----- .../grids/data-grid/row-grouping.mdx | 245 -------- .../grids/data-grid/row-highlighting.mdx | 92 --- .../components/grids/data-grid/row-paging.mdx | 80 --- .../grids/data-grid/row-pinning.mdx | 118 ---- .../grids/data-grid/type-comparison-table.mdx | 43 -- .../grids/data-grid/type-heatmap-table.mdx | 43 -- .../grids/data-grid/type-matrix-table.mdx | 43 -- .../grids/data-grid/type-periodic-table.mdx | 43 -- .../grids/data-grid/type-sparkline-table.mdx | 189 ------ .../jp/components/grids/grid/groupby.mdx | 18 +- .../jp/components/grids/grid/icons.mdx | 9 +- .../components/grids/grid/master-detail.mdx | 6 +- .../jp/components/grids/grid/paste-excel.mdx | 2 +- .../grids/grid/selection-based-aggregates.mdx | 4 +- .../hierarchical-grid/load-on-demand.mdx | 4 +- .../grids/hierarchical-grid/overview.mdx | 10 +- .../src/content/jp/components/grids/list.mdx | 14 +- .../components/grids/pivot-grid/features.mdx | 4 +- .../components/grids/pivot-grid/overview.mdx | 10 +- .../grids/pivot-grid/remote-operations.mdx | 4 +- .../grids/tree-grid/load-on-demand.mdx | 2 +- .../components/grids/tree-grid/overview.mdx | 8 +- .../src/content/jp/components/grids/tree.mdx | 8 +- .../content/jp/components/inputs/badge.mdx | 2 +- .../jp/components/inputs/button-group.mdx | 8 +- .../content/jp/components/inputs/button.mdx | 6 +- .../content/jp/components/inputs/checkbox.mdx | 2 +- .../src/content/jp/components/inputs/chip.mdx | 2 +- .../components/inputs/circular-progress.mdx | 6 +- .../jp/components/inputs/color-editor.mdx | 2 +- .../jp/components/inputs/combo/features.mdx | 2 +- .../jp/components/inputs/combo/overview.mdx | 2 +- .../inputs/combo/single-selection.mdx | 2 +- .../jp/components/inputs/combo/templates.mdx | 2 +- .../jp/components/inputs/date-time-input.mdx | 8 +- .../content/jp/components/inputs/dropdown.mdx | 8 +- .../jp/components/inputs/file-input.mdx | 8 +- .../jp/components/inputs/icon-button.mdx | 7 +- .../content/jp/components/inputs/input.mdx | 6 +- .../jp/components/inputs/linear-progress.mdx | 4 +- .../jp/components/inputs/mask-input.mdx | 10 +- .../content/jp/components/inputs/radio.mdx | 4 +- .../content/jp/components/inputs/rating.mdx | 4 +- .../content/jp/components/inputs/ripple.mdx | 4 +- .../content/jp/components/inputs/select.mdx | 8 +- .../content/jp/components/inputs/slider.mdx | 6 +- .../content/jp/components/inputs/switch.mdx | 2 +- .../jp/components/inputs/text-area.mdx | 6 +- .../content/jp/components/inputs/tooltip.mdx | 20 +- .../jp/components/layouts/accordion.mdx | 4 +- .../content/jp/components/layouts/avatar.mdx | 2 +- .../content/jp/components/layouts/card.mdx | 18 +- .../jp/components/layouts/carousel.mdx | 12 +- .../content/jp/components/layouts/divider.mdx | 2 +- .../layouts/dock-manager-customization.mdx | 4 +- .../layouts/dock-manager-electron.mdx | 18 +- .../layouts/dock-manager-embedding-frames.mdx | 2 +- .../layouts/dock-manager-updating-panes.mdx | 2 +- .../jp/components/layouts/dock-manager.mdx | 70 +-- .../jp/components/layouts/expansion-panel.mdx | 2 +- .../content/jp/components/layouts/icon.mdx | 2 +- .../content/jp/components/layouts/stepper.mdx | 8 +- .../content/jp/components/layouts/tabs.mdx | 10 +- .../jp/components/layouts/tile-manager.mdx | 4 +- .../content/jp/components/linear-gauge.mdx | 4 +- .../content/jp/components/menus/navbar.mdx | 4 +- .../jp/components/menus/navigation-drawer.mdx | 16 +- .../content/jp/components/menus/toolbar.mdx | 4 +- .../jp/components/notifications/banner.mdx | 12 +- .../jp/components/notifications/dialog.mdx | 2 +- .../jp/components/notifications/snackbar.mdx | 2 +- .../jp/components/notifications/toast.mdx | 2 +- .../content/jp/components/radial-gauge.mdx | 4 +- .../jp/components/scheduling/calendar.mdx | 10 +- .../jp/components/scheduling/date-picker.mdx | 6 +- .../scheduling/date-range-picker.mdx | 10 +- .../jp/components/spreadsheet-activation.mdx | 12 +- .../components/spreadsheet-chart-adapter.mdx | 6 +- .../jp/components/spreadsheet-clipboard.mdx | 6 +- .../jp/components/spreadsheet-commands.mdx | 4 +- .../spreadsheet-conditional-formatting.mdx | 68 +- .../jp/components/spreadsheet-configuring.mdx | 8 +- .../spreadsheet-data-validation.mdx | 2 +- .../jp/components/spreadsheet-hyperlinks.mdx | 4 +- .../jp/components/spreadsheet-overview.mdx | 4 +- .../jp/components/themes/configuration.mdx | 2 +- .../jp/components/themes/elevations.mdx | 2 +- .../content/jp/components/themes/overview.mdx | 2 +- .../content/jp/components/themes/palettes.mdx | 2 +- .../content/jp/components/themes/styles.mdx | 2 +- .../jp/components/themes/typography.mdx | 2 +- .../jp/components/zoomslider-overview.mdx | 4 +- docs/xplat/src/content/jp/toc.json | 297 --------- package.json | 12 +- scripts/check-api-links.mjs | 460 ++++++++++++++ src/lib/platform-context.ts | 33 +- 567 files changed, 2480 insertions(+), 14467 deletions(-) create mode 100644 api-link-report-angular.md create mode 100644 api-link-report-blazor.md create mode 100644 api-link-report-react.md create mode 100644 api-link-report-wc.md create mode 100644 docs/angular/public/images/general/buildCLIapp.gif delete mode 100644 docs/xplat/src/content/en/components/editors/multi-column-combobox.mdx delete mode 100644 docs/xplat/src/content/en/components/editors/xdate-picker.mdx delete mode 100644 docs/xplat/src/content/en/components/grids/data-grid/accessibility.mdx delete mode 100644 docs/xplat/src/content/en/components/grids/data-grid/cell-activation.mdx delete mode 100644 docs/xplat/src/content/en/components/grids/data-grid/cell-editing.mdx delete mode 100644 docs/xplat/src/content/en/components/grids/data-grid/cell-merging.mdx delete mode 100644 docs/xplat/src/content/en/components/grids/data-grid/cell-selection.mdx delete mode 100644 docs/xplat/src/content/en/components/grids/data-grid/column-animation.mdx delete mode 100644 docs/xplat/src/content/en/components/grids/data-grid/column-chooser.mdx delete mode 100644 docs/xplat/src/content/en/components/grids/data-grid/column-filtering.mdx delete mode 100644 docs/xplat/src/content/en/components/grids/data-grid/column-moving.mdx delete mode 100644 docs/xplat/src/content/en/components/grids/data-grid/column-options.mdx delete mode 100644 docs/xplat/src/content/en/components/grids/data-grid/column-pinning.mdx delete mode 100644 docs/xplat/src/content/en/components/grids/data-grid/column-resizing.mdx delete mode 100644 docs/xplat/src/content/en/components/grids/data-grid/column-sorting.mdx delete mode 100644 docs/xplat/src/content/en/components/grids/data-grid/column-summaries.mdx delete mode 100644 docs/xplat/src/content/en/components/grids/data-grid/column-types.mdx delete mode 100644 docs/xplat/src/content/en/components/grids/data-grid/horizontal-scrolling.mdx delete mode 100644 docs/xplat/src/content/en/components/grids/data-grid/live-data.mdx delete mode 100644 docs/xplat/src/content/en/components/grids/data-grid/load-save-layout.mdx delete mode 100644 docs/xplat/src/content/en/components/grids/data-grid/local-data.mdx delete mode 100644 docs/xplat/src/content/en/components/grids/data-grid/localization.mdx delete mode 100644 docs/xplat/src/content/en/components/grids/data-grid/overview.mdx delete mode 100644 docs/xplat/src/content/en/components/grids/data-grid/performance.mdx delete mode 100644 docs/xplat/src/content/en/components/grids/data-grid/remote-data.mdx delete mode 100644 docs/xplat/src/content/en/components/grids/data-grid/row-grouping.mdx delete mode 100644 docs/xplat/src/content/en/components/grids/data-grid/row-highlighting.mdx delete mode 100644 docs/xplat/src/content/en/components/grids/data-grid/row-paging.mdx delete mode 100644 docs/xplat/src/content/en/components/grids/data-grid/row-pinning.mdx delete mode 100644 docs/xplat/src/content/en/components/grids/data-grid/type-comparison-table.mdx delete mode 100644 docs/xplat/src/content/en/components/grids/data-grid/type-heatmap-table.mdx delete mode 100644 docs/xplat/src/content/en/components/grids/data-grid/type-matrix-table.mdx delete mode 100644 docs/xplat/src/content/en/components/grids/data-grid/type-periodic-table.mdx delete mode 100644 docs/xplat/src/content/en/components/grids/data-grid/type-sparkline-table.mdx delete mode 100644 docs/xplat/src/content/jp/components/editors/multi-column-combobox.mdx delete mode 100644 docs/xplat/src/content/jp/components/editors/xdate-picker.mdx delete mode 100644 docs/xplat/src/content/jp/components/grids/data-grid/accessibility.mdx delete mode 100644 docs/xplat/src/content/jp/components/grids/data-grid/cell-activation.mdx delete mode 100644 docs/xplat/src/content/jp/components/grids/data-grid/cell-editing.mdx delete mode 100644 docs/xplat/src/content/jp/components/grids/data-grid/cell-merging.mdx delete mode 100644 docs/xplat/src/content/jp/components/grids/data-grid/cell-selection.mdx delete mode 100644 docs/xplat/src/content/jp/components/grids/data-grid/column-animation.mdx delete mode 100644 docs/xplat/src/content/jp/components/grids/data-grid/column-chooser.mdx delete mode 100644 docs/xplat/src/content/jp/components/grids/data-grid/column-filtering.mdx delete mode 100644 docs/xplat/src/content/jp/components/grids/data-grid/column-moving.mdx delete mode 100644 docs/xplat/src/content/jp/components/grids/data-grid/column-options.mdx delete mode 100644 docs/xplat/src/content/jp/components/grids/data-grid/column-pinning.mdx delete mode 100644 docs/xplat/src/content/jp/components/grids/data-grid/column-resizing.mdx delete mode 100644 docs/xplat/src/content/jp/components/grids/data-grid/column-sorting.mdx delete mode 100644 docs/xplat/src/content/jp/components/grids/data-grid/column-summaries.mdx delete mode 100644 docs/xplat/src/content/jp/components/grids/data-grid/column-types.mdx delete mode 100644 docs/xplat/src/content/jp/components/grids/data-grid/horizontal-scrolling.mdx delete mode 100644 docs/xplat/src/content/jp/components/grids/data-grid/live-data.mdx delete mode 100644 docs/xplat/src/content/jp/components/grids/data-grid/load-save-layout.mdx delete mode 100644 docs/xplat/src/content/jp/components/grids/data-grid/local-data.mdx delete mode 100644 docs/xplat/src/content/jp/components/grids/data-grid/localization.mdx delete mode 100644 docs/xplat/src/content/jp/components/grids/data-grid/overview.mdx delete mode 100644 docs/xplat/src/content/jp/components/grids/data-grid/performance.mdx delete mode 100644 docs/xplat/src/content/jp/components/grids/data-grid/remote-data.mdx delete mode 100644 docs/xplat/src/content/jp/components/grids/data-grid/row-grouping.mdx delete mode 100644 docs/xplat/src/content/jp/components/grids/data-grid/row-highlighting.mdx delete mode 100644 docs/xplat/src/content/jp/components/grids/data-grid/row-paging.mdx delete mode 100644 docs/xplat/src/content/jp/components/grids/data-grid/row-pinning.mdx delete mode 100644 docs/xplat/src/content/jp/components/grids/data-grid/type-comparison-table.mdx delete mode 100644 docs/xplat/src/content/jp/components/grids/data-grid/type-heatmap-table.mdx delete mode 100644 docs/xplat/src/content/jp/components/grids/data-grid/type-matrix-table.mdx delete mode 100644 docs/xplat/src/content/jp/components/grids/data-grid/type-periodic-table.mdx delete mode 100644 docs/xplat/src/content/jp/components/grids/data-grid/type-sparkline-table.mdx create mode 100644 scripts/check-api-links.mjs diff --git a/api-link-report-angular.md b/api-link-report-angular.md new file mode 100644 index 0000000000..a22fba1e16 --- /dev/null +++ b/api-link-report-angular.md @@ -0,0 +1,12 @@ +# API Link Check Report + +_Generated: 2026-05-19 18:51:16 UTC_ + +## Summary + +| | | +|---|---| +| ✅ OK | 1483 | +| ❌ Not found (type/member missing) | 0 | +| ❌ HTTP error | 0 | +| ❌ **Total broken** | **0** | diff --git a/api-link-report-blazor.md b/api-link-report-blazor.md new file mode 100644 index 0000000000..ae317e20ce --- /dev/null +++ b/api-link-report-blazor.md @@ -0,0 +1,12 @@ +# API Link Check Report + +_Generated: 2026-05-19 17:55:20 UTC_ + +## Summary + +| | | +|---|---| +| ✅ OK | 1054 | +| ❌ Not found (type/member missing) | 0 | +| ❌ HTTP error | 0 | +| ❌ **Total broken** | **0** | diff --git a/api-link-report-react.md b/api-link-report-react.md new file mode 100644 index 0000000000..f2a9b21a77 --- /dev/null +++ b/api-link-report-react.md @@ -0,0 +1,12 @@ +# API Link Check Report + +_Generated: 2026-05-19 17:53:29 UTC_ + +## Summary + +| | | +|---|---| +| ✅ OK | 1106 | +| ❌ Not found (type/member missing) | 0 | +| ❌ HTTP error | 0 | +| ❌ **Total broken** | **0** | diff --git a/api-link-report-wc.md b/api-link-report-wc.md new file mode 100644 index 0000000000..0abf1c8fac --- /dev/null +++ b/api-link-report-wc.md @@ -0,0 +1,12 @@ +# API Link Check Report + +_Generated: 2026-05-19 17:54:07 UTC_ + +## Summary + +| | | +|---|---| +| ✅ OK | 1128 | +| ❌ Not found (type/member missing) | 0 | +| ❌ HTTP error | 0 | +| ❌ **Total broken** | **0** | diff --git a/docs/angular/public/images/general/buildCLIapp.gif b/docs/angular/public/images/general/buildCLIapp.gif new file mode 100644 index 0000000000000000000000000000000000000000..0995ef4a6df021f74dbda07773a6889f85d9c0f0 GIT binary patch literal 115663 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

4kt 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, you can customize the header and content panel`s appearance. -The sample below demonstrates how elaborate filtering options can be implemented using the built-in templating functionality of the . +The sample below demonstrates how elaborate filtering options can be implemented using the built-in templating functionality of the . diff --git a/docs/angular/src/content/en/components/badge.mdx b/docs/angular/src/content/en/components/badge.mdx index 467c1155f8..1d2f43eb15 100644 --- a/docs/angular/src/content/en/components/badge.mdx +++ b/docs/angular/src/content/en/components/badge.mdx @@ -229,7 +229,7 @@ export class AppModule {} ``` -The has and inputs to configure the badge look. You can set the icon by providing its name from the official [material icons set](https://material.io/icons/). The badge type can be set to either , , , , or . Depending on the type, a specific background color is applied. +The has and inputs to configure the badge look. You can set the icon by providing its name from the official [material icons set](https://material.io/icons/). The badge type can be set to either `Default`, `Info`, `Success`, `Warning`, or `Error`. Depending on the type, a specific background color is applied. In our sample, and are bound to model properties named _icon_ and _type_. diff --git a/docs/angular/src/content/en/components/charts/features/chart-axis-options.mdx b/docs/angular/src/content/en/components/charts/features/chart-axis-options.mdx index bd3fb842c2..d8830f4a0e 100644 --- a/docs/angular/src/content/en/components/charts/features/chart-axis-options.mdx +++ b/docs/angular/src/content/en/components/charts/features/chart-axis-options.mdx @@ -45,9 +45,9 @@ The chart also has the ability to consider auto-rotation of the labels if they w After setting the , you can set the property to true to opt into the automatic margin or set the property to true for the auto-rotation. You can also further customize the automatic margin that is applied by setting the and to provide extra space or a maximum possible margin, respectively. -Custom label formats such as and can be added to each axis via the and collections. Commonly used for applying Intl.NumberFormat and Intl.DateTimeFormat language sensitive number, date and time formatting. In order for a custom format to be applied to the labels, the or need to be set to data item's property name on the , eg. `{Date}`. For the the number is the context because it uses a numeric axis, therefore this needs to be set to `{0}`. +Custom label formats such as `NumberFormatSpecifier` and `DateTimeFormatSpecifier` can be added to each axis via the and collections. Commonly used for applying Intl.NumberFormat and Intl.DateTimeFormat language sensitive number, date and time formatting. In order for a custom format to be applied to the labels, the or need to be set to data item's property name on the , eg. `{Date}`. For the the number is the context because it uses a numeric axis, therefore this needs to be set to `{0}`. -The following example formats the yAxis with a to represent $USD prices for top box office movies in the United States. +The following example formats the yAxis with a `NumberFormatSpecifier` to represent $USD prices for top box office movies in the United States. diff --git a/docs/angular/src/content/en/components/charts/features/chart-overlays.mdx b/docs/angular/src/content/en/components/charts/features/chart-overlays.mdx index e710a62819..219de9dbad 100644 --- a/docs/angular/src/content/en/components/charts/features/chart-overlays.mdx +++ b/docs/angular/src/content/en/components/charts/features/chart-overlays.mdx @@ -40,11 +40,11 @@ It is also possible to show an axis annotation on a in the and components is done by setting the property on the chart. This property takes a collection of the enumeration. You can mix and match multiple value layers in the same chart by adding multiple enumerations to the collection of the chart. +Applying the in the and components is done by setting the property on the chart. This property takes a collection of the enumeration. You can mix and match multiple value layers in the same chart by adding multiple enumerations to the collection of the chart. -In the , this is done by adding a to the `Series` collection of the chart and then setting the property to one of the enumerations. Each of these enumerations and what they mean is listed below: +In the , this is done by adding a to the `Series` collection of the chart and then setting the property to one of the enumerations. Each of these enumerations and what they mean is listed below: -- `Auto`: The default value mode of the enumeration. +- `Auto`: The default value mode of the enumeration. - `Average`: Applies potentially multiple value lines to call out the average value of each series plotted in the chart. - `GlobalAverage`: Applies a single value line to call out the average of all of the series values in the chart. - `GlobalMaximum`: Applies a single value line to call out the absolute maximum value of all of the series values in the chart. @@ -100,6 +100,6 @@ You can find more information about related chart types in these topics:


-
+


diff --git a/docs/angular/src/content/en/components/chat.mdx b/docs/angular/src/content/en/components/chat.mdx index a1cde229f4..af77e4bc7d 100644 --- a/docs/angular/src/content/en/components/chat.mdx +++ b/docs/angular/src/content/en/components/chat.mdx @@ -25,7 +25,7 @@ To get started, install Ignite UI for Angular package as well as the Ignite UI f npm install igniteui-angular igniteui-webcomponents ``` - provides Angular bindings (events, templates, DI, change detection, pipes), while the visual chat UI is rendered by the Web Component. Installing both ensures the chat behaves natively in Angular while leveraging the full Web Component UI. +`IgxChatComponent` provides Angular bindings (events, templates, DI, change detection, pipes), while the visual chat UI is rendered by the Web Component. Installing both ensures the chat behaves natively in Angular while leveraging the full Web Component UI. For a complete introduction to the Ignite UI for Angular, read the [_getting started_](/general/getting-started) topic. @@ -85,8 +85,8 @@ The Chat component exposes several key properties that let you control its state | ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `messages` | Array of messages (`IgcChatMessage[]`) displayed in the chat. You can bind to this to control which messages are shown. | | `draftMessage` | The current unsent message, represented as an object containing `text` and optional `attachments`. This is useful for saving or restoring message drafts. | -| `options` | Chat configuration () such as current user ID, input placeholders, accepted file types, quick reply suggestions and typing behavior. | -| `templates` | Custom Angular templates () for message content, input, attachments, and other parts of the chat UI. | +| `options` | Chat configuration (`IgxChatOptions`) such as current user ID, input placeholders, accepted file types, quick reply suggestions and typing behavior. | +| `templates` | Custom Angular templates (`IgxChatTemplates`) for message content, input, attachments, and other parts of the chat UI. | These properties make it straightforward to synchronize the Chat’s UI with your application’s state and backend. @@ -168,7 +168,7 @@ This level of granularity means you can tweak just one part (for example, how at Here: - `let-message` exposes the message object. -- The directive ensures proper typing for message templates. +- The `igxChatMessageContext` directive ensures proper typing for message templates. #### Custom Input Area By default, the chat input is a text area. You can override it to provide a more tailored experience, such as adding a voice input button: @@ -404,12 +404,12 @@ We highly recommend using the standard Web Component styling approaches before r ## API Reference -- -- -- -- -- -- +- `IgxChatComponent` +- `IgxChatOptions` +- `IgxChatTemplates` +- `IgxChatMessageContextDirective` +- `IgxChatInputContextDirective` +- `IgxChatAttachmentContextDirective` - [`Styling & Themes`](/themes) ## Additional Resources diff --git a/docs/angular/src/content/en/components/checkbox.mdx b/docs/angular/src/content/en/components/checkbox.mdx index a0fd1381a9..cc5492932e 100644 --- a/docs/angular/src/content/en/components/checkbox.mdx +++ b/docs/angular/src/content/en/components/checkbox.mdx @@ -393,7 +393,7 @@ At the end your checkbox should look like this: - - [IgxCheckboxComponent Styles]({environment:sassApiUrl}/themes#function-checkbox-theme) -- +- ## Theming Dependencies diff --git a/docs/angular/src/content/en/components/combo.mdx b/docs/angular/src/content/en/components/combo.mdx index 29ca481db8..b4e52ab406 100644 --- a/docs/angular/src/content/en/components/combo.mdx +++ b/docs/angular/src/content/en/components/combo.mdx @@ -391,7 +391,7 @@ $custom-combo-theme: combo-theme( ); ``` -The uses the internally as an item container. It also includes the and the components. Creating new themes, that extend these components' themes, and scoping them under the respective classes will let you change the combobox styles: +The uses the internally as an item container. It also includes the and the components. Creating new themes, that extend these components' themes, and scoping them under the respective classes will let you change the combobox styles: ```scss $custom-drop-down-theme: drop-down-theme( @@ -416,7 +416,7 @@ The last step is to include the component's theme. ``` -The component uses the [`IgxOverlay`](/overlay) service to hold and display the combobox items list container. To properly scope your styles you might have to use an . For more details check the [`IgxOverlay Styling Guide`](/overlay-styling). Also is necessary to use `::ng-deep` when we are styling the components. +The component uses the [`IgxOverlay`](/overlay) service to hold and display the combobox items list container. To properly scope your styles you might have to use an . For more details check the [`IgxOverlay Styling Guide`](/overlay-styling). Also is necessary to use `::ng-deep` when we are styling the components. [!Note] The default `type` of the `IgxCombo` is `box` unlike the [`IgxSelect`](/select) where it is `line`. diff --git a/docs/angular/src/content/en/components/date-picker.mdx b/docs/angular/src/content/en/components/date-picker.mdx index d2c6b52a89..775be26d07 100644 --- a/docs/angular/src/content/en/components/date-picker.mdx +++ b/docs/angular/src/content/en/components/date-picker.mdx @@ -151,7 +151,7 @@ The picker always returns a `Date` value, this means that If it is model bound o ### Projecting components -The allows the projection of child components that the supports (with the exception of ) - [`igxLabel`](/label-input), [`igx-hint / IgxHint`](/input-group#hints), [`igx-prefix / igxPrefix`](/input-group#prefix--suffix), [`igx-suffix / igxSuffix`](/input-group#prefix--suffix). More detailed information about this can be found in the [Label & Input](/label-input) topic. +The allows the projection of child components that the supports (with the exception of ) - [`igxLabel`](/label-input), [`igx-hint / IgxHint`](/input-group#hints), [`igx-prefix / igxPrefix`](/input-group#prefix--suffix), [`igx-suffix / igxSuffix`](/input-group#prefix--suffix). More detailed information about this can be found in the [Label & Input](/label-input) topic. ```html diff --git a/docs/angular/src/content/en/components/date-range-picker.mdx b/docs/angular/src/content/en/components/date-range-picker.mdx index 4e046203c4..4de9267086 100644 --- a/docs/angular/src/content/en/components/date-range-picker.mdx +++ b/docs/angular/src/content/en/components/date-range-picker.mdx @@ -156,7 +156,7 @@ To show a clear action, use `igx-picker-clear` with `igxSuffix` applied directly - and support projected content such as labels, hints, picker toggles, and clear buttons. - Use `igx-picker-toggle` for the calendar action and `igx-picker-clear` for the clear action. - Apply `igxPrefix` directly to `igx-picker-toggle` and `igxSuffix` directly to `igx-picker-clear`. -- Add the directly inside each component. +- Add the directly inside each component. - To enable date editing, decorate both inputs with the [`igxDateTimeEditor`](date-time-editor) directive. @@ -216,7 +216,7 @@ The [calendar keyboard navigation](/calendar#keyboard-navigation) section contai ### Projecting components -To enrich the default Date Range Picker UX, the component allows projecting child components - the same as in the : [`igxLabel`](/label-input), [`igx-hint / igxHint`](/input-group#hints), [`igx-prefix / igxPrefix`](/input-group#prefix--suffix), [`igx-suffix / igxSuffix`](/input-group#prefix--suffix), excluding . More detailed information about this can be found in the [Label & Input](/label-input) topic. +To enrich the default Date Range Picker UX, the component allows projecting child components - the same as in the : [`igxLabel`](/label-input), [`igx-hint / igxHint`](/input-group#hints), [`igx-prefix / igxPrefix`](/input-group#prefix--suffix), [`igx-suffix / igxSuffix`](/input-group#prefix--suffix), excluding . More detailed information about this can be found in the [Label & Input](/label-input) topic. ```html @@ -634,7 +634,7 @@ Regarding style scoping, you should refer to both styling sections [Overlay Scop ## Application Demo -The demo below defines a form for flight tickets that uses the . If no dates are selected, an is used to display a validation error. The selection of the dates is restricted by the and properties of the +The demo below defines a form for flight tickets that uses the . If no dates are selected, an is used to display a validation error. The selection of the dates is restricted by the and properties of the diff --git a/docs/angular/src/content/en/components/date-time-editor.mdx b/docs/angular/src/content/en/components/date-time-editor.mdx index 96bd827545..ad0cd918a0 100644 --- a/docs/angular/src/content/en/components/date-time-editor.mdx +++ b/docs/angular/src/content/en/components/date-time-editor.mdx @@ -137,7 +137,7 @@ Date Time Editor Directive has intuitive keyboard navigation that makes it easy ### Display and input format -The supports different display and input formats. +The supports different display and input formats. It uses Angular's [`DatePipe`](https://angular.io/api/common/DatePipe), which allows it to support predefined format options, such as `shortDate` and `longDate`. It can also accept a constructed format string using characters supported by the `DatePipe`, e.g. `EE/MM/yyyy`. Notice that formats like `shortDate`, `longDate`, etc., can be used as only. Also, if no is provided, the editor will use the as its . Alternatively, if the property is not set, the input format will be inferred from the in case it can be parsed as containing numeric date-time parts only. diff --git a/docs/angular/src/content/en/components/drop-down-virtual.mdx b/docs/angular/src/content/en/components/drop-down-virtual.mdx index f69545d724..d298e8b292 100644 --- a/docs/angular/src/content/en/components/drop-down-virtual.mdx +++ b/docs/angular/src/content/en/components/drop-down-virtual.mdx @@ -75,11 +75,11 @@ The additional parameters passed to the `*igxFor` directive are: - `containerSize` - the size of the virtualized container (in `px`). This needs to be enforced on the wrapping `

` as well - `itemSize` - the size of the items that will be displayed (in `px`) -In order to assure uniqueness of the items, pass `item` inside of the input and `index` inside of the input of the `igx-drop-down-item`. +In order to assure uniqueness of the items, pass `item` inside of the input and `index` inside of the input of the `igx-drop-down-item`. To preserve selection while scrolling, the drop-down item needs to have a reference to the data items it is bound to. -For the drop-down to work with a virtualized list of items, and inputs **must** be passed to all items. +For the drop-down to work with a virtualized list of items, and inputs **must** be passed to all items. It is strongly advised for each item to have an unique value passed to the `[value]` input. Otherwise, it might lead to unexpected results (incorrect selection). diff --git a/docs/angular/src/content/en/components/drop-down.mdx b/docs/angular/src/content/en/components/drop-down.mdx index d0755240fa..fcb3651251 100644 --- a/docs/angular/src/content/en/components/drop-down.mdx +++ b/docs/angular/src/content/en/components/drop-down.mdx @@ -154,7 +154,7 @@ export class MyDropDownComponent { ### Grouping items -To provide a more useful visual information, use the property to group items semantically or the property to display an item as a non-interactive. You can also set the property on a particular item to make it the selected item. The `igx-drop-down` items have out-of-the-box support for `igxPrefix`, `igxSuffix`, and `igx-divider` directives that can contain or be set on HTML elements or other web components. +To provide a more useful visual information, use the property to group items semantically or the property to display an item as a non-interactive. You can also set the property on a particular item to make it the selected item. The `igx-drop-down` items have out-of-the-box support for `igxPrefix`, `igxSuffix`, and `igx-divider` directives that can contain or be set on HTML elements or other web components. ```html {/* dropdown.component.html */} @@ -341,7 +341,7 @@ The following sample demonstrates how to implement a multi-level drop down menu For the implementation of the multi-level drop down menu we will use the as well as a custom directive and service described below. -In order to configure the to open an additional drop down, add the `multiLevel` directive that would handle the of the nested drop down and manages its opened/closed state through its `innerDropdown` property. +In order to configure the to open an additional drop down, add the `multiLevel` directive that would handle the of the nested drop down and manages its opened/closed state through its `innerDropdown` property. ```html diff --git a/docs/angular/src/content/en/components/excel-library-using-cells.mdx b/docs/angular/src/content/en/components/excel-library-using-cells.mdx index 91bdc727ca..b6a4380e2a 100644 --- a/docs/angular/src/content/en/components/excel-library-using-cells.mdx +++ b/docs/angular/src/content/en/components/excel-library-using-cells.mdx @@ -126,7 +126,7 @@ The following code shows you how to add a formula to a cell. ## Copying a Cell’s Format -Cells can have different formatting, including background color, format string, and font style. If you need a cell to have the same format as a previously formatted cell, instead of individually setting each option exposed by the object’s property, you can call the object’s `SetFormatting` method and pass it a object to copy. This will copy every format setting from the first cell to the second cell. You can also do this for a row, merged cell region, or column. +Cells can have different formatting, including background color, format string, and font style. If you need a cell to have the same format as a previously formatted cell, instead of individually setting each option exposed by the object’s property, you can call the object’s `SetFormatting` method and pass it a object to copy. This will copy every format setting from the first cell to the second cell. You can also do this for a row, merged cell region, or column. The following code shows you how to copy the format of the 2nd column to the 4th column: @@ -251,7 +251,7 @@ When the older formats are opened in Microsoft Excel 2003 and earlier versions, ## Excel Format Support -You can set a host of different formats on a by using the object returned by the property of that cell. This object enables you to style many different aspects of the cell such as borders, font, fill, alignments, and whether or not the cell should shrink to fit or be locked. +You can set a host of different formats on a by using the object returned by the property of that cell. This object enables you to style many different aspects of the cell such as borders, font, fill, alignments, and whether or not the cell should shrink to fit or be locked. You can also access the built-in styles to Microsoft Excel 2007 using the `Styles` collection of the object. The full list of styles in Excel can be found in the Cell Styles gallery of the Home tab of Microsoft Excel 2007. @@ -261,7 +261,7 @@ The `NormalStyle` contains the default properties for all cells in the workbook, You can clear the `Styles` collection or reset it to its predefined state by using the `Clear` and `Reset` methods, respectively. Both of these will remove all user-defined styles, but `Clear` will clear the `Styles` collection entirely. -With this feature, a `Style` property has been added to the object. This is a reference to a instance, representing the parent style of the format. For formats of a style, this property will always be null, because styles cannot have a parent style. For row, column, and cell formats, the `Style` property always returns the `NormalStyle` by default. +With this feature, a `Style` property has been added to the object. This is a reference to a instance, representing the parent style of the format. For formats of a style, this property will always be null, because styles cannot have a parent style. For row, column, and cell formats, the `Style` property always returns the `NormalStyle` by default. If the `Style` property is set to null, it will revert back to the `NormalStyle`. If it is set to another style in the styles collection, that style will now hold the defaults for all unset properties on the cell format. @@ -271,7 +271,7 @@ When a format option flag is removed from a format, all associated properties ar You can determine what would really be seen in cells by using the `GetResolvedCellFormat` method on classes which represent a row, column, cell, and merged cell. -This method returns a instance which refers back to the associated on which it is based. So subsequent changes to the property will be reflected in the instance returned from a `GetResolvedCellFormat` call. +This method returns a instance which refers back to the associated on which it is based. So subsequent changes to the property will be reflected in the instance returned from a `GetResolvedCellFormat` call. ## Merging Cells @@ -363,17 +363,17 @@ var cellText = worksheet.rows(0).cells(0).getText(); ## API References -
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/angular/src/content/en/components/excel-library-using-tables.mdx b/docs/angular/src/content/en/components/excel-library-using-tables.mdx index fa8a66b929..a4090c61c3 100644 --- a/docs/angular/src/content/en/components/excel-library-using-tables.mdx +++ b/docs/angular/src/content/en/components/excel-library-using-tables.mdx @@ -98,7 +98,7 @@ Sorting is done by setting a sorting condition on a table column. When a sorting If the data in the table is subsequently changed, the sort conditions do not automatically reevaluate. The sort conditions in a table are only reapplied when sort conditions are added, removed, modified, or when the `ReapplySortConditions` method is called on the table. When sorting conditions are reevaluated, only the visible cells are sorted. All cells in hidden rows are kept in place. -In addition to accessing sort conditions from the table columns, they are also exposed off the 's property's `SortConditions` collection. This is an ordered collection of columns/sort condition pairs. The order of this collection is the precedence of the sorting. +In addition to accessing sort conditions from the table columns, they are also exposed off the 's SortSettings property's `SortConditions` collection. This is an ordered collection of columns/sort condition pairs. The order of this collection is the precedence of the sorting. The following sort condition types are available to set on columns: @@ -107,7 +107,7 @@ The following sort condition types are available to set on columns: - `FillSortCondition` - Sort cells based on whether their fill is a specific pattern or gradient. - `FontColorSortCondition` - Sort cells based on whether their font is a specific color. -There is also a `CaseSensitive` property on the of the to determine whether strings should be sorted case sensitively or not. +There is also a `CaseSensitive` property on the SortSettings of the to determine whether strings should be sorted case sensitively or not. The following code snippet demonstrates how to apply an `OrderedSortCondition` to a : @@ -127,5 +127,5 @@ table.sortSettings.sortConditions().addItem(table.columns(0), new OrderedSortCon ## API References -
-
+
+
diff --git a/docs/angular/src/content/en/components/excel-library-using-workbooks.mdx b/docs/angular/src/content/en/components/excel-library-using-workbooks.mdx index d664a357dd..8b8b10d39d 100644 --- a/docs/angular/src/content/en/components/excel-library-using-workbooks.mdx +++ b/docs/angular/src/content/en/components/excel-library-using-workbooks.mdx @@ -24,7 +24,7 @@ The Infragistics Angular Excel Engine enables you to save data to and load data ## Change Default Font -First create a new instance of . Next, add the new font to the `Styles` collection of the . This style contains the default properties for all cells in the workbook, unless otherwise specified on a row, column, or cell. Changing properties of the style will change the default cell format properties in the workbook. +First create a new instance of . Next, add the new font to the `Styles` collection of the . This style contains the default properties for all cells in the workbook, unless otherwise specified on a row, column, or cell. Changing properties of the style will change the default cell format properties in the workbook. ```ts var workbook = new Workbook(); @@ -110,6 +110,6 @@ var protection = workbook.protection; ## API References -
-
-
+
+
+
diff --git a/docs/angular/src/content/en/components/excel-library-using-worksheets.mdx b/docs/angular/src/content/en/components/excel-library-using-worksheets.mdx index c293574821..f7e8a39e52 100644 --- a/docs/angular/src/content/en/components/excel-library-using-worksheets.mdx +++ b/docs/angular/src/content/en/components/excel-library-using-worksheets.mdx @@ -102,7 +102,7 @@ worksheet.protect(); You can also use the object's `Protect` method to protect a worksheet against structural changes. -When protection is set, you can set the object's `Locked` property on individual cells, rows, merged cell regions, or columns to override the worksheet object's protection on those objects. For example, if you need all cells of a worksheet to be read-only except for the cells of one column, you can protect the worksheet and then set the object's `Locked` property to **false** on a specific object. This will allow your users to edit cells within the column while disabling editing of the other cells in the worksheet. +When protection is set, you can set the object's `Locked` property on individual cells, rows, merged cell regions, or columns to override the worksheet object's protection on those objects. For example, if you need all cells of a worksheet to be read-only except for the cells of one column, you can protect the worksheet and then set the object's `Locked` property to **false** on a specific object. This will allow your users to edit cells within the column while disabling editing of the other cells in the worksheet. The following code demonstrates how you can do this: @@ -236,9 +236,9 @@ worksheet.protect(); You can configure the conditional formatting of a object by using the many "Add" methods exposed on the `ConditionalFormats` collection of that worksheet. The first parameter of these "Add" methods is the `string` region of the worksheet that you would like to apply the conditional format to. -Many of the conditional formats that you can add to your worksheet have a property that determines the way that the elements should look when the condition in that conditional format holds true. For example, you can use the properties attached to this property such as `Fill` and `Font` to determine the background and font settings of your cells under a particular conditional format, respectively. +Many of the conditional formats that you can add to your worksheet have a property that determines the way that the elements should look when the condition in that conditional format holds true. For example, you can use the properties attached to this property such as `Fill` and `Font` to determine the background and font settings of your cells under a particular conditional format, respectively. -There are a few conditional formats that do not have a property, as their visualization on the worksheet cell behaves differently. These conditional formats are the , , and `IconSetConditionalFormat`. +There are a few conditional formats that do not have a property, as their visualization on the worksheet cell behaves differently. These conditional formats are the , , and `IconSetConditionalFormat`. When loading a pre-existing from Excel, the formats will be preserved when that is loaded. The same is true for when you save the out to an Excel file. @@ -260,13 +260,13 @@ format.cellFormat.font.colorInfo = new WorkbookColorInfo(color); ## API References -
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/angular/src/content/en/components/excel-library-working-with-charts.mdx b/docs/angular/src/content/en/components/excel-library-working-with-charts.mdx index ce263b4d59..5c25e4b830 100644 --- a/docs/angular/src/content/en/components/excel-library-working-with-charts.mdx +++ b/docs/angular/src/content/en/components/excel-library-working-with-charts.mdx @@ -47,4 +47,4 @@ chart.setSourceData("A2:M6", true); ## API References -
+
diff --git a/docs/angular/src/content/en/components/excel-library-working-with-grids.mdx b/docs/angular/src/content/en/components/excel-library-working-with-grids.mdx index d8804d3b60..908a1576bd 100644 --- a/docs/angular/src/content/en/components/excel-library-working-with-grids.mdx +++ b/docs/angular/src/content/en/components/excel-library-working-with-grids.mdx @@ -31,4 +31,4 @@ TODO ## API References -
+
diff --git a/docs/angular/src/content/en/components/excel-library-working-with-sparklines.mdx b/docs/angular/src/content/en/components/excel-library-working-with-sparklines.mdx index 4ad7cf430a..868143eead 100644 --- a/docs/angular/src/content/en/components/excel-library-working-with-sparklines.mdx +++ b/docs/angular/src/content/en/components/excel-library-working-with-sparklines.mdx @@ -45,4 +45,4 @@ workbook.save(workbook, "Sparklines.xlsx"); ## API References -
+
diff --git a/docs/angular/src/content/en/components/excel-library.mdx b/docs/angular/src/content/en/components/excel-library.mdx index be8dcbacce..7dada53cdc 100644 --- a/docs/angular/src/content/en/components/excel-library.mdx +++ b/docs/angular/src/content/en/components/excel-library.mdx @@ -177,5 +177,5 @@ Modify `angular.json` by setting the `vendorSourceMap` option under architect => ## API References -
-
+
+
diff --git a/docs/angular/src/content/en/components/excel-utility.mdx b/docs/angular/src/content/en/components/excel-utility.mdx index c3c44a21d5..9ed7c6fada 100644 --- a/docs/angular/src/content/en/components/excel-utility.mdx +++ b/docs/angular/src/content/en/components/excel-utility.mdx @@ -127,6 +127,6 @@ export class ExcelUtility { ## API References -
-
-
+
+
+
diff --git a/docs/angular/src/content/en/components/expansion-panel.mdx b/docs/angular/src/content/en/components/expansion-panel.mdx index 6ecedb2189..e2e6243b2c 100644 --- a/docs/angular/src/content/en/components/expansion-panel.mdx +++ b/docs/angular/src/content/en/components/expansion-panel.mdx @@ -456,7 +456,7 @@ See the [igxAccordion topic](/accordion) ## API Reference -- +- - - - [IgxExpansionPanel Styles]({environment:sassApiUrl}/themes#mixin-expansion-panel) diff --git a/docs/angular/src/content/en/components/for-of.mdx b/docs/angular/src/content/en/components/for-of.mdx index dc09ef4b47..f5bb92a286 100644 --- a/docs/angular/src/content/en/components/for-of.mdx +++ b/docs/angular/src/content/en/components/for-of.mdx @@ -213,7 +213,7 @@ public ngAfterViewInit() { } ``` -When requesting data you can take advantage of the interface, which provides the and properties. Note that initially the chunkSize will be 0, so you have to specify the size of the first loaded chunk (the best value is the initial divided by the ). +When requesting data you can take advantage of the interface, which provides the and properties. Note that initially the chunkSize will be 0, so you have to specify the size of the first loaded chunk (the best value is the initial divided by the ). ```typescript public getData(data?: IForOfState, cb?: (any) => void): any { diff --git a/docs/angular/src/content/en/components/general/update-guide.mdx b/docs/angular/src/content/en/components/general/update-guide.mdx index f5b1124258..aaacf629a2 100644 --- a/docs/angular/src/content/en/components/general/update-guide.mdx +++ b/docs/angular/src/content/en/components/general/update-guide.mdx @@ -1187,7 +1187,7 @@ The was completel - API changes - The `id`, `itemStyle`, `panels`, `viewTabs`, `contentTabs` and `tabs` properties were removed. Currently, the property returns the collection of tabs. - The following properties were changed: - - The tab item's `isSelected` property was renamed to . + - The tab item's `isSelected` property was renamed to `selected`. - The `selectedTab` property was renamed to . - The `onTabSelected` and `onTabDeselected` events were removed. We introduced three new events, , and , which provide more flexibility and control over the tabs' selection. Unfortunately, having an adequate migration for these event changes is complicated to say the least, so any errors should be handled at project level. diff --git a/docs/angular/src/content/en/components/geo-map-binding-multiple-shapes.mdx b/docs/angular/src/content/en/components/geo-map-binding-multiple-shapes.mdx index 21d66fb710..f101c4c8a4 100644 --- a/docs/angular/src/content/en/components/geo-map-binding-multiple-shapes.mdx +++ b/docs/angular/src/content/en/components/geo-map-binding-multiple-shapes.mdx @@ -1,9 +1,9 @@ ---- +--- title: "Angular Map | Data Visualization Tools | Binding Multiple Data Shapes | Infragistics" description: Use Infragistics' Angular to add multiple geographic series objects to overlay a few shapefiles with geo-spacial data. View Ignite UI for Angular map tutorials! keywords: "Angular map, shape files, Ignite UI for Angular, Infragistics, data binding" license: commercial -mentionedTypes: ["GeographicMap", "ShapefileConverter", "Series", "GeographicShapeSeriesBase"] +mentionedTypes: ["GeographicMap", "ShapefileRecord", "Series", "GeographicShapeSeriesBase"] namespace: Infragistics.Controls.Maps --- import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; @@ -23,7 +23,7 @@ In the Ignite UI for Angular map, you can add multiple geographic series objects
-This topic takes you step-by-step towards displaying multiple geographic series in the map component. All geographic series plot following geo-spatial data loaded from shape files using the class. Refer to the [Binding Shape Files](geo-map-binding-shp-file.md) topic for more information about object. +This topic takes you step-by-step towards displaying multiple geographic series in the map component. All geographic series plot following geo-spatial data loaded from shape files using the class. Refer to the [Binding Shape Files](geo-map-binding-shp-file.md) topic for more information about object. - – displays locations of major cities - – displays routes between major ports @@ -124,7 +124,7 @@ Next, we need to create a map with a few Geographic Series that will later load ## Loading Shapefiles -Next, in constructor of your page, add a for each shapefile that you want to display in the geographic map component. +Next, in constructor of your page, add a for each shapefile that you want to display in the geographic map component. @@ -162,7 +162,7 @@ sdsLocations.dataBind(); ## Processing Polygons -Process shapes data loaded in with of countries of the world and assign it to object. +Process shapes data loaded in with of countries of the world and assign it to object. ```ts import { IgrGeographicShapeSeries } from 'igniteui-react-maps'; @@ -241,7 +241,7 @@ public onPolygonsLoaded(sds: IgcShapeDataSource, e: any) { ## Processing Polyline -Process shapes data loaded in with communication routes between major cities and assign it to object. +Process shapes data loaded in with communication routes between major cities and assign it to object. ```ts import { IgrGeographicPolylineSeries } from 'igniteui-react-maps'; @@ -328,7 +328,7 @@ public onPolylinesLoaded(sds: IgcShapeDataSource, e: any) { ## Processing Points -Process shapes data loaded in with locations of major cities and assign it to object. +Process shapes data loaded in with locations of major cities and assign it to object. ```ts import { IgrGeographicSymbolSeries } from 'igniteui-react-maps'; @@ -585,4 +585,4 @@ export class MapBindingMultipleShapesComponent implements AfterViewInit {


-
+
diff --git a/docs/angular/src/content/en/components/geo-map-binding-shp-file.mdx b/docs/angular/src/content/en/components/geo-map-binding-shp-file.mdx index a0fb18b483..6dd254b1f3 100644 --- a/docs/angular/src/content/en/components/geo-map-binding-shp-file.mdx +++ b/docs/angular/src/content/en/components/geo-map-binding-shp-file.mdx @@ -1,16 +1,16 @@ ---- +--- title: "Angular Map | Data Visualization Tools | Binding Geographic Shape Files | Infragistics" description: Use Infragistics' Angular JavaScript map to load geo-spatial data from shape files. View Ignite UI for Angular map demos! keywords: "Angular map, shapefiles, Ignite UI for Angular, Infragistics, data binding" license: commercial -mentionedTypes: ["GeographicMap", "ShapefileConverter", "Series", "GeographicShapeSeriesBase"] +mentionedTypes: ["GeographicMap", "ShapefileRecord", "Series", "GeographicShapeSeriesBase"] --- import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # Angular Binding Shape Files with Geo-spatial Data -The Ignite UI for Angular map component, the class loads geo-spatial data (points/locations, polylines, polygons) from shape files and converts it to a collection of objects. +The Ignite UI for Angular map component, the class loads geo-spatial data (points/locations, polylines, polygons) from shape files and converts it to a collection of `IgxShapefileRecord` objects. ## Angular Binding Shape Files with Geo-spatial Data Example @@ -23,7 +23,7 @@ The Ignite UI for Angular map component, the
-The following table explains properties of the class for loading shape files. +The following table explains properties of the class for loading shape files. | Property | Type | Description | @@ -34,17 +34,17 @@ The following table explains properties of the object’s ImportAsync method is invoked which in return performs fetching and reading the shape files and finally doing the conversion. After this operation is complete, the is populated with objects and the `ImportCompleted` event is raised in order to notify about completed process of loading and converting geo-spatial data from shape files. +When both source properties are set to non-null values, then the object’s ImportAsync method is invoked which in return performs fetching and reading the shape files and finally doing the conversion. After this operation is complete, the is populated with `IgxShapefileRecord` objects and the `ImportCompleted` event is raised in order to notify about completed process of loading and converting geo-spatial data from shape files. ## Loading Shapefiles -The following code creates an instance of the object for loading a shape file that contains locations of major cities in the world. It also demonstrates how to handle the `ImportCompleted` event as a prerequisite for binding data to the map component. +The following code creates an instance of the object for loading a shape file that contains locations of major cities in the world. It also demonstrates how to handle the `ImportCompleted` event as a prerequisite for binding data to the map component. ## Binding Shapefiles -In the map component, Geographic Series are used for displaying geo-spatial data that is loaded from shape files. All types of Geographic Series have an `ItemsSource` property which can be bound to an array of objects. The is an example such array because it contains a list of objects. +In the map component, Geographic Series are used for displaying geo-spatial data that is loaded from shape files. All types of Geographic Series have an `ItemsSource` property which can be bound to an array of objects. The is an example such array because it contains a list of `IgxShapefileRecord` objects. The `ShapefileRecord` class provides properties for storing geo-spatial data, listed in the following table. @@ -56,8 +56,8 @@ The `ShapefileRecord` class provides properties for storing geo-spatial data, li This data structure is suitable for use in most Geographic Series as long as appropriate data columns are mapped to them. ## Code Snippet -This code example assumes that shape files were loaded using the . -The following code binds in the map component to the and maps the `Points` property of all objects. +This code example assumes that shape files were loaded using the . +The following code binds in the map component to the and maps the `Points` property of all `IgxShapefileRecord` objects. @@ -160,4 +160,4 @@ export class MapBindingShapefilePolylinesComponent implements AfterViewInit { ## API References
-
+
diff --git a/docs/angular/src/content/en/components/geo-map-display-azure-imagery.mdx b/docs/angular/src/content/en/components/geo-map-display-azure-imagery.mdx index b296e01889..17229674cf 100644 --- a/docs/angular/src/content/en/components/geo-map-display-azure-imagery.mdx +++ b/docs/angular/src/content/en/components/geo-map-display-azure-imagery.mdx @@ -14,7 +14,7 @@ import azureTrafficTileSeriesWithBackground from '@xplat-images/general/Azure_Tr # Angular Imagery from Azure Maps -The Angular is geographic imagery mapping service provided by Microsoft®. It provides several styles of geographic imagery tiles of the world. This geographic imagery service is accessible directly on the www.azure.microsoft.com web site. The Ignite UI for Angular map component can display geographic imagery from Azure Maps in the map’s background content using the class. +The Angular is geographic imagery mapping service provided by Microsoft®. It provides several styles of geographic imagery tiles of the world. This geographic imagery service is accessible directly on the www.azure.microsoft.com web site. The Ignite UI for Angular map component can display geographic imagery from Azure Maps in the map’s background content using the class. ## Angular Displaying Imagery from Azure Maps - Overview @@ -28,7 +28,7 @@ The Angular is geographic imagery ## Angular Displaying Imagery from Azure Maps - Code Example -The following code snippet shows how to display geographic imagery tiles from Azure Maps in Angular using class. +The following code snippet shows how to display geographic imagery tiles from Azure Maps in Angular using class. @@ -83,7 +83,7 @@ This design allows you to build richer maps, for example:
## Angular Overlaying Imagery from Azure Maps - Code Example -The following code snippet shows how to display geographic imagery tiles on top of a background imagery joining eg. traffic with a dark grey map for the Angular using and classes. +The following code snippet shows how to display geographic imagery tiles on top of a background imagery joining eg. traffic with a dark grey map for the Angular using and classes. @@ -132,16 +132,15 @@ export class AppComponent implements AfterViewInit { ## Properties -The following table summarizes properties of the class: +The following table summarizes properties of the class: | Property Name | Property Type | Description | |----------------|-----------------|---------------| -||string|Represents the property for setting an API key required for the Azure Maps imagery service. You must obtain this key from the azure.microsoft.com website.| -|||Represents the property for setting the Azure Maps imagery tiles map style. This property can be set to the following enumeration values:
  • Satellite - Specifies the Satellite map style without road or labels overlay
  • Road - Specifies the Aerial map style with road and labels overlay
  • DarkGrey - Specifies a dark grey basemap style for contrast and highlighting overlays
  • TerraOverlay - Specifies a terrain map style with shaded relief to highlight elevation and landscape features
  • LabelsRoadOverlay - One of several overlays of city labels without an aerial overlay
  • HybridRoadOverlay - Satellite background combined with road and label overlays
  • HybridDarkGreyOverlay - Satellite background combined with dark grey label overlays
  • LabelsDarkGreyOverlay - One of several overlays of city labels over a dark grey basemap
  • TrafficDelayOverlay - Displays traffic delays and congestion areas in real time
  • TrafficAbsoluteOverlay - Displays current traffic speeds as absolute values
  • TrafficReducedOverlay - Displays reduced traffic flow with light-based visualization
  • TrafficRelativeOverlay - Displays traffic speeds relative to normal conditions
  • TrafficRelativeDarkOverlay - Displays traffic speeds relative to normal conditions over a dark basemap for enhanced contrast
  • WeatherRadarOverlay - Displays near real-time radar imagery of precipitation
  • WeatherInfraredOverlay - Displays infrared satellite imagery of cloud cover
| +||string|Represents the property for setting an API key required for the Azure Maps imagery service. You must obtain this key from the azure.microsoft.com website.| +||`IgxAzureMapsImageryStyle`|Represents the property for setting the Azure Maps imagery tiles map style. This property can be set to the following `IgxAzureMapsImageryStyle` enumeration values:
  • Satellite - Specifies the Satellite map style without road or labels overlay
  • Road - Specifies the Aerial map style with road and labels overlay
  • DarkGrey - Specifies a dark grey basemap style for contrast and highlighting overlays
  • TerraOverlay - Specifies a terrain map style with shaded relief to highlight elevation and landscape features
  • LabelsRoadOverlay - One of several overlays of city labels without an aerial overlay
  • HybridRoadOverlay - Satellite background combined with road and label overlays
  • HybridDarkGreyOverlay - Satellite background combined with dark grey label overlays
  • LabelsDarkGreyOverlay - One of several overlays of city labels over a dark grey basemap
  • TrafficDelayOverlay - Displays traffic delays and congestion areas in real time
  • TrafficAbsoluteOverlay - Displays current traffic speeds as absolute values
  • TrafficReducedOverlay - Displays reduced traffic flow with light-based visualization
  • TrafficRelativeOverlay - Displays traffic speeds relative to normal conditions
  • TrafficRelativeDarkOverlay - Displays traffic speeds relative to normal conditions over a dark basemap for enhanced contrast
  • WeatherRadarOverlay - Displays near real-time radar imagery of precipitation
  • WeatherInfraredOverlay - Displays infrared satellite imagery of cloud cover
| ## API References -
-
+

diff --git a/docs/angular/src/content/en/components/geo-map-display-bing-imagery.mdx b/docs/angular/src/content/en/components/geo-map-display-bing-imagery.mdx index fd3466b203..81bb6b0160 100644 --- a/docs/angular/src/content/en/components/geo-map-display-bing-imagery.mdx +++ b/docs/angular/src/content/en/components/geo-map-display-bing-imagery.mdx @@ -19,7 +19,7 @@ For more details: [Microsoft Bing Blogs](https://blogs.bing.com/maps/2025-06/Bing-Maps-for-Enterprise-Basic-Account-shutdown-June-30,2025) -The Angular is geographic imagery mapping service provided by Microsoft® company. It provides 3 styles of geographic imagery tiles of the world. This geographic imagery service is accessible directly on the www.bing.com/maps web site. The Ignite UI for Angular map component can display geographic imagery from Bing Maps in the map’s background content using the class. +The Angular is geographic imagery mapping service provided by Microsoft® company. It provides 3 styles of geographic imagery tiles of the world. This geographic imagery service is accessible directly on the www.bing.com/maps web site. The Ignite UI for Angular map component can display geographic imagery from Bing Maps in the map’s background content using the class. ## Angular Displaying Imagery from Bing Maps Example @@ -31,7 +31,7 @@ The Angular is geographic image
## Code Snippet -The following code snippet shows how to display geographic imagery tiles from Bing Maps in Angular using class. +The following code snippet shows how to display geographic imagery tiles from Bing Maps in Angular using class. @@ -75,22 +75,22 @@ this.map.backgroundContent = tileSource; ## Properties -The following table summarized properties of the class: +The following table summarized properties of the class: | Property Name | Property Type | Description | |----------------|-----------------|---------------| -||string|Represents the property for setting an API key required for the Bing Maps imagery service. You must obtain this key from the www.bingmapsportal.com website.| -|||Represents the property for setting the Bing Maps imagery tiles map style. This property can be set to the following enumeration values:
  • Aerial - Specifies the Aerial map style without road or labels overlay
  • AerialWithLabels - Specifies the Aerial map style with road and labels overlay
  • Road - Specifies the Roads map style without Aerial overlay
| -||string|Represents the property for setting the Bing Imagery REST URI specifying where the TilePath and SubDomains will come from. This is an optional property, and if not specified it will use the default REST URI.| -||string|Represents a property for setting the culture name for the tile source.| -||boolean|Represents the property that specifies whether or not the Bing Maps service should auto-initialized upon the assignment of valid property values.| -||boolean|Represents the property that is set to True occurs when geographic imagery tiles from Bing Maps service have been initialized and they are ready for rendering in the map component.| -||`SubDomainsCollection`|Represents an image collection of URI sub domains| -||string|Represents a property that sets the map tile image URI, this is the actual location of the Bing Maps| +||string|Represents the property for setting an API key required for the Bing Maps imagery service. You must obtain this key from the www.bingmapsportal.com website.| +|||Represents the property for setting the Bing Maps imagery tiles map style. This property can be set to the following enumeration values:
  • Aerial - Specifies the Aerial map style without road or labels overlay
  • AerialWithLabels - Specifies the Aerial map style with road and labels overlay
  • Road - Specifies the Roads map style without Aerial overlay
| +||string|Represents the property for setting the Bing Imagery REST URI specifying where the TilePath and SubDomains will come from. This is an optional property, and if not specified it will use the default REST URI.| +||string|Represents a property for setting the culture name for the tile source.| +||boolean|Represents the property that specifies whether or not the Bing Maps service should auto-initialized upon the assignment of valid property values.| +||boolean|Represents the property that is set to True occurs when geographic imagery tiles from Bing Maps service have been initialized and they are ready for rendering in the map component.| +||`SubDomainsCollection`|Represents an image collection of URI sub domains| +||string|Represents a property that sets the map tile image URI, this is the actual location of the Bing Maps| ## API References -
-
+
+

diff --git a/docs/angular/src/content/en/components/geo-map-display-esri-imagery.mdx b/docs/angular/src/content/en/components/geo-map-display-esri-imagery.mdx index 733e3f4810..6e5316a25a 100644 --- a/docs/angular/src/content/en/components/geo-map-display-esri-imagery.mdx +++ b/docs/angular/src/content/en/components/geo-map-display-esri-imagery.mdx @@ -10,7 +10,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # Angular Displaying Imagery from Esri Maps -The is a free geographic imagery mapping service created by Esri company. It provides over 40 styles of geographic imagery tiles of the world and some thematic tiles for the USA. This geographic imagery service can be accessed directly on www.arcgisonline.com web site. +The is a free geographic imagery mapping service created by Esri company. It provides over 40 styles of geographic imagery tiles of the world and some thematic tiles for the USA. This geographic imagery service can be accessed directly on www.arcgisonline.com web site. ## Angular Displaying Imagery from Esri Maps Example @@ -23,7 +23,7 @@ The is a free geographic im
## Code Snippet -The following code snippet shows how to display Angular geographic imagery tiles from Esri imagery servers in using class. +The following code snippet shows how to display Angular geographic imagery tiles from Esri imagery servers in using class. @@ -88,5 +88,5 @@ this.geoMap.backgroundContent = tileSource; ## API References -
+

diff --git a/docs/angular/src/content/en/components/geo-map-display-heat-imagery.mdx b/docs/angular/src/content/en/components/geo-map-display-heat-imagery.mdx index d4560530e7..007e8cf083 100644 --- a/docs/angular/src/content/en/components/geo-map-display-heat-imagery.mdx +++ b/docs/angular/src/content/en/components/geo-map-display-heat-imagery.mdx @@ -1,16 +1,16 @@ ---- +--- title: "Angular Map | Data Visualization Tools | Infragistics" description: Use Infragistics' Angular JavaScript map to display heat map imagery. Check out Ignite UI for Angular map demos! keywords: "Angular map, heat map imagery, Ignite UI for Angular, Infragistics" license: commercial -mentionedTypes: ["GeographicMap", "ShapefileConverter", "HeatTileGenerator", "GeographicTileSeries"] +mentionedTypes: ["GeographicMap", "ShapefileRecord", "HeatTileGenerator", "GeographicTileSeries"] --- import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # Angular Displaying Heat Imagery -The Ignite UI for Angular map control has the ability to show heat-map imagery through the use of the that are generated by a by loading geo-spatial data by loading shape files to a tile series. +The Ignite UI for Angular map control has the ability to show heat-map imagery through the use of the that are generated by a by loading geo-spatial data by loading shape files to a tile series. It is highly recommended that you review the [Binding Shape Files with Geo-Spatial Data](geo-map-binding-shp-file.md) topic as a pre-requisite to this topic. @@ -23,13 +23,13 @@ It is highly recommended that you review the [Binding Shape Files with Geo-Spati
-When a loads its shape files, it converts that data into objects. These objects can be retrieved from the `GetPointData()` method of the and can then be used to create a heat-map through usage of a object with a assigned to its `TileGenerator` property. This can then be used in a as its `TileImagery` source. +When a loads its shape files, it converts that data into objects. These objects can be retrieved from the `GetPointData()` method of the and can then be used to create a heat-map through usage of a object with a assigned to its `TileGenerator` property. This can then be used in a as its `TileImagery` source. -The object works such that it has three value paths, `XValues`, `YValues` and `Values`. As an example of how these could be used, in the case of a shape file that has information about population, you could consider the `XValues` to be longitude, `YValues` to be latitude, and `Values` to be the population data. Each of these properties takes a `number[]`. +The object works such that it has three value paths, `XValues`, `YValues` and `Values`. As an example of how these could be used, in the case of a shape file that has information about population, you could consider the `XValues` to be longitude, `YValues` to be latitude, and `Values` to be the population data. Each of these properties takes a `number[]`. -The display of the geographic tile series when using the heat-map functionality can be customized by setting the `MinimumColor` and `MaximumColor` properties to "rgba" strings that describe colors that you wish to correspond to the minimum and maximum values of the collection that you assign to the `Values` property of the . You can further customize this by setting the `ScaleColors` property of the generator to contain a collection of strings that describe colors, as this will tell the what colors to use for the displayed values in the map. It is also possible to customize how colors in your `ScaleColors` collection blur together by using the `BlurRadius`, `MaxBlurRadius`, and `UseBlurRadiusAdjustedForZoom` properties. +The display of the geographic tile series when using the heat-map functionality can be customized by setting the `MinimumColor` and `MaximumColor` properties to "rgba" strings that describe colors that you wish to correspond to the minimum and maximum values of the collection that you assign to the `Values` property of the . You can further customize this by setting the `ScaleColors` property of the generator to contain a collection of strings that describe colors, as this will tell the what colors to use for the displayed values in the map. It is also possible to customize how colors in your `ScaleColors` collection blur together by using the `BlurRadius`, `MaxBlurRadius`, and `UseBlurRadiusAdjustedForZoom` properties. -The can also use a logarithmic scale. If you want to use this, you can set the `UseLogarithmicScale` property to **true**. +The can also use a logarithmic scale. If you want to use this, you can set the `UseLogarithmicScale` property to **true**. ## Web Worker @@ -180,9 +180,7 @@ constructor() { ## API References
-
-
-
-
-
-
+
+
+
+
diff --git a/docs/angular/src/content/en/components/geo-map-display-imagery-types.mdx b/docs/angular/src/content/en/components/geo-map-display-imagery-types.mdx index 3c3214c80c..1b3a70a1ab 100644 --- a/docs/angular/src/content/en/components/geo-map-display-imagery-types.mdx +++ b/docs/angular/src/content/en/components/geo-map-display-imagery-types.mdx @@ -30,20 +30,20 @@ The following table summarizes imagery classes provided by the map component. | Imagery Class | Description | |---------------|---------------| -||Represents the base control for all imagery classes that display all types of supported geographic imagery tiles. This class can be extended for the purpose of implementing support for geographic imagery tiles from other geographic imagery sources such as Map Quest mapping service.| -||Represents the multi-scale imagery control for displaying geographic imagery tiles from the Open Street Maps service.| +||Represents the base control for all imagery classes that display all types of supported geographic imagery tiles. This class can be extended for the purpose of implementing support for geographic imagery tiles from other geographic imagery sources such as Map Quest mapping service.| +||Represents the multi-scale imagery control for displaying geographic imagery tiles from the Open Street Maps service.| {/* |`BingMapsMapImagery`|Represents the multi-scale imagery control for displaying geographic imagery tiles from the Bing Maps service.| */} -By default, the property is set to object and the map component displays geographic imagery tiles from the Open Street Maps service. In order to display different types of geographic imagery tiles, the map component must be re-configured. +By default, the property is set to object and the map component displays geographic imagery tiles from the Open Street Maps service. In order to display different types of geographic imagery tiles, the map component must be re-configured. -In addition, the property can be set to any object that inherits the class. However, only objects that inherit the class will allow panning and zooming of the map background content. +In addition, the property can be set to any object that inherits the class. However, only objects that inherit the class will allow panning and zooming of the map background content. In the map component, map background content is always rendered behind all geographic series. In other words, geographic imagery tiles are always rendered first and any geographic series in the map component's Series property is rendered on top of the geographic imagery tiles. This is especially important when displaying multiple geographic series in the same plot area of the map component because geographic imagery tiles can quickly get buried in the map view. ## Code Snippet -This code example explicitly sets of the map component to the object which provides geographic imagery tile from the Open Street Maps. +This code example explicitly sets of the map component to the object which provides geographic imagery tile from the Open Street Maps. ```html TODO - ADD CODE SNIPPET @@ -52,6 +52,6 @@ This code example explicitly sets
-
-
+`BackgroundContent`
+
+
diff --git a/docs/angular/src/content/en/components/geo-map-display-osm-imagery.mdx b/docs/angular/src/content/en/components/geo-map-display-osm-imagery.mdx index 7efd44b1fd..4bb2108e19 100644 --- a/docs/angular/src/content/en/components/geo-map-display-osm-imagery.mdx +++ b/docs/angular/src/content/en/components/geo-map-display-osm-imagery.mdx @@ -10,7 +10,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # Angular Displaying Imagery from Open Street Maps -The Angular is a free geographic imagery mapping service created collaboratively by OpenStreetMap© contributors from around the world. It provides geographic imagery tiles of the world only in road map style without any configuration options. This geographic imagery service can be accessed directly on www.OpenStreetMap.org web site. +The Angular is a free geographic imagery mapping service created collaboratively by OpenStreetMap© contributors from around the world. It provides geographic imagery tiles of the world only in road map style without any configuration options. This geographic imagery service can be accessed directly on www.OpenStreetMap.org web site. By the default, the Ignite UI for Angular map component already displays geographic imagery from the Open Street Maps. Therefore, there is no need to configure the control to display geographic imagery from the Open Street Maps. ## Angular Displaying Imagery from Open Street Maps Example @@ -24,7 +24,7 @@ By the default, the Ignite UI for Angular map component already displays geograp
## Code Snippet -This code example explicitly sets of the map component to the object which provides geographic imagery from OpenStreetMap© contributors. +This code example explicitly sets of the map component to the object which provides geographic imagery from OpenStreetMap© contributors. @@ -63,4 +63,4 @@ this.map.backgroundContent = tileSource; ## API References -
+
diff --git a/docs/angular/src/content/en/components/geo-map-resources-esri.mdx b/docs/angular/src/content/en/components/geo-map-resources-esri.mdx index 6db940f246..2f0cd03631 100644 --- a/docs/angular/src/content/en/components/geo-map-resources-esri.mdx +++ b/docs/angular/src/content/en/components/geo-map-resources-esri.mdx @@ -9,7 +9,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # Angular Esri Utility -The resource topic provides implementation of an utility that helps with using provided by Esri Maps in . +The resource topic provides implementation of an utility that helps with using provided by Esri Maps in . ## Code Snippet @@ -85,5 +85,5 @@ export enum EsriStyle { ## API References -
+

diff --git a/docs/angular/src/content/en/components/geo-map-shape-files-reference.mdx b/docs/angular/src/content/en/components/geo-map-shape-files-reference.mdx index f81fb906a2..fc9cd7cfa3 100644 --- a/docs/angular/src/content/en/components/geo-map-shape-files-reference.mdx +++ b/docs/angular/src/content/en/components/geo-map-shape-files-reference.mdx @@ -100,4 +100,4 @@ The following topics provide additional information related to this topic.


-
+
diff --git a/docs/angular/src/content/en/components/geo-map-type-scatter-area-series.mdx b/docs/angular/src/content/en/components/geo-map-type-scatter-area-series.mdx index 39e27dfda5..0761cc7e3d 100644 --- a/docs/angular/src/content/en/components/geo-map-type-scatter-area-series.mdx +++ b/docs/angular/src/content/en/components/geo-map-type-scatter-area-series.mdx @@ -1,4 +1,4 @@ ---- +--- title: "Angular Map | Data Visualization Tools | Scatter Area Series | Data Binding | Infragistics" description: Use Infragistics Angular map's scatter area series to draw a colored area surface based on a triangulation of longitude and latitude data with a numeric value assigned to each point. Learn more about Ignite UI for Angular map's series! keywords: "Angular map, scatter area series, Ignite UI for Angular, Infragistics" @@ -44,7 +44,7 @@ The following table summarizes properties of GeographicScatterAreaSeries used fo ## Color Scale Use the ColorScale property of the to resolve colors values of points and thus fill surface of the geographic series. The colors are smoothly interpolated around the shape of the surface by applying a pixel-wise triangle rasterizer to a triangulation data. Because rendering of the surface is pixel-wise, the color scale uses colors instead of brushes. -The provided class should satisfy most coloring needs, but the ColorScale base class can be inherited by the application for custom coloring logic. +The provided class should satisfy most coloring needs, but the ColorScale base class can be inherited by the application for custom coloring logic. The following table list properties of the `CustomPaletteColorScale` affecting surface coloring of the GeographicScatterAreaSeries. @@ -188,7 +188,7 @@ export class MapTypeScatterAreaSeriesComponent implements AfterViewInit { ## API References -
-
+
+


diff --git a/docs/angular/src/content/en/components/geo-map-type-scatter-bubble-series.mdx b/docs/angular/src/content/en/components/geo-map-type-scatter-bubble-series.mdx index a38e5a0139..2a7fd096cc 100644 --- a/docs/angular/src/content/en/components/geo-map-type-scatter-bubble-series.mdx +++ b/docs/angular/src/content/en/components/geo-map-type-scatter-bubble-series.mdx @@ -179,4 +179,4 @@ export class MapTypeScatterBubbleSeriesComponent implements AfterViewInit { ## API References
-
+`RadiusScale`
diff --git a/docs/angular/src/content/en/components/geo-map-type-scatter-contour-series.mdx b/docs/angular/src/content/en/components/geo-map-type-scatter-contour-series.mdx index fce30c7cc1..6d1b4b1fdf 100644 --- a/docs/angular/src/content/en/components/geo-map-type-scatter-contour-series.mdx +++ b/docs/angular/src/content/en/components/geo-map-type-scatter-contour-series.mdx @@ -180,7 +180,7 @@ export class MapTypeScatterContourSeriesComponent implements AfterViewInit { ## API References -
+`FillScale`


-
+
diff --git a/docs/angular/src/content/en/components/geo-map-type-scatter-symbol-series.mdx b/docs/angular/src/content/en/components/geo-map-type-scatter-symbol-series.mdx index 7c7b4cd51c..08232fb002 100644 --- a/docs/angular/src/content/en/components/geo-map-type-scatter-symbol-series.mdx +++ b/docs/angular/src/content/en/components/geo-map-type-scatter-symbol-series.mdx @@ -1,9 +1,9 @@ ---- +--- title: "Angular Map | Data Visualization Tools | Scatter Symbol Series | Data Binding | Infragistics" description: Use Infragistics Angular map's scatter symbol series to display geo-spatial data using points or markers in a geographic context.. Learn more about Ignite UI for Angular map's series! keywords: "Angular map, scatter symbol series, Ignite UI for Angular, Infragistics" license: commercial -mentionedTypes: ["GeographicMap", "ShapefileConverter", "Series"] +mentionedTypes: ["GeographicMap", "ShapefileRecord", "Series"] --- import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; @@ -26,7 +26,7 @@ In Angular map component, you can use the has the `ItemsSource` property which can be bound to an array of objects. In addition, each data item in this object must have two numeric data columns that store a geographic location (longitude and latitude). These data columns are then mapped to the `LatitudeMemberPath` and `LongitudeMemberPath` properties. The `GeographicSymbolSeries` uses values of these mapped data columns to plot symbol elements in the geographic map component. ## Code Snippet -The following code shows how to bind the to locations of cities loaded from a shape file using the . +The following code shows how to bind the to locations of cities loaded from a shape file using the . @@ -131,4 +131,4 @@ export class MapTypeScatterSymbolSeriesComponent implements AfterViewInit { ## API References
-
+
diff --git a/docs/angular/src/content/en/components/geo-map-type-shape-polygon-series.mdx b/docs/angular/src/content/en/components/geo-map-type-shape-polygon-series.mdx index cde55150f1..8eb3746cdc 100644 --- a/docs/angular/src/content/en/components/geo-map-type-shape-polygon-series.mdx +++ b/docs/angular/src/content/en/components/geo-map-type-shape-polygon-series.mdx @@ -1,9 +1,9 @@ ---- +--- title: "Angular Map | Data Visualization Tools | Shape Polygon Series | Infragistics" description: Use Infragistics Angular map's shape polygon series to render shapes of countries or regions defined by geographic locations. Learn more about Ignite UI for Angular map's series! keywords: "Angular map, shape polygon series, Ignite UI for Angular, Infragistics" license: commercial -mentionedTypes: ["GeographicMap", "ShapefileConverter", "Series", "GeographicShapeSeriesBase"] +mentionedTypes: ["GeographicMap", "ShapefileRecord", "Series", "GeographicShapeSeriesBase"] --- import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; @@ -28,7 +28,7 @@ The works a lot like the has the `ItemsSource` property which can be bound to an array of objects. In addition, each data item in this object must have one data column that stores single/multiple shapes using an array of arrays of objects with x and y values representing geographic locations. This data column is then mapped to the `ShapeMemberPath` property. The `GeographicShapeSeries` uses points of this mapped data column to plot polygons in the map control. ## Code Snippet -The following code demonstrates how to bind the to shapes of countries in the world loaded from a shape file using the . +The following code demonstrates how to bind the to shapes of countries in the world loaded from a shape file using the . @@ -175,4 +175,4 @@ export class MapTypeShapePolygonSeriesComponent implements AfterViewInit {

-
+
diff --git a/docs/angular/src/content/en/components/geo-map-type-shape-polyline-series.mdx b/docs/angular/src/content/en/components/geo-map-type-shape-polyline-series.mdx index 100e6c96c8..0d1a4b3942 100644 --- a/docs/angular/src/content/en/components/geo-map-type-shape-polyline-series.mdx +++ b/docs/angular/src/content/en/components/geo-map-type-shape-polyline-series.mdx @@ -1,9 +1,9 @@ ---- +--- title: "Angular Map | Data Visualization Tools | Shape Polyline Series | Infragistics" description: Use Infragistics Angular map's shape polyline series to render roads or connections between geographic locations such as cities or airports. Learn more about Ignite UI for Angular map's series! keywords: "Angular map, Ignite UI for Angular, shape polyline series, Infragistics" license: commercial -mentionedTypes: ["GeographicMap", "ShapefileConverter", "Series", "GeographicShapeSeriesBase"] +mentionedTypes: ["GeographicMap", "ShapefileRecord", "Series", "GeographicShapeSeriesBase"] --- import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; @@ -28,7 +28,7 @@ The works a lot like the Similarly to other types of geographic series in the control, the has the `ItemsSource` property which can be bound to an array of objects. In addition, each data item in this object must have one data column that stores single/multiple shapes using an array of arrays of objects with x and y values representing geographic locations. This data column is then mapped to the `ShapeMemberPath` property. The `GeographicPolylineSeries` uses points of this mapped data column to plot polygons in the control. ## Code Snippet -The following code shows how to bind the to locations of cities loaded from a shape file using the . +The following code shows how to bind the to locations of cities loaded from a shape file using the . @@ -164,4 +164,4 @@ export class MapTypeShapePolylineSeriesComponent implements AfterViewInit {

-
+
diff --git a/docs/angular/src/content/en/components/icon-button.mdx b/docs/angular/src/content/en/components/icon-button.mdx index 97342eaaf4..5081f2924a 100644 --- a/docs/angular/src/content/en/components/icon-button.mdx +++ b/docs/angular/src/content/en/components/icon-button.mdx @@ -99,7 +99,7 @@ Analogically, we can switch to outlined type: ### Disabled Icon Button -If you want to disable an icon button, you can use the property. In this sample we also demonstrate how to use icons from different families with the `igxIconButton` directive: +If you want to disable an icon button, you can use the property. In this sample we also demonstrate how to use icons from different families with the `igxIconButton` directive: ```html @@ -278,7 +278,7 @@ public onCommit(): void { ``` - を使用している場合は、primaryKey と childDataKey を引数として期待する メソッドのオーバー読み込みを使用することもできます。 + を使用している場合は、primaryKey と childDataKey を引数として期待する メソッドのオーバー読み込みを使用することもできます。 ```typescript public onCommit(): void { @@ -288,7 +288,7 @@ public onCommit(): void { ## 保留されたトランザクションのクリア -リストとのやり取りのどの時点でも、 メソッドを使用して、トランザクション ログをクリアできます。 +リストとのやり取りのどの時点でも、 メソッドを使用して、トランザクション ログをクリアできます。 ```html diff --git a/docs/angular/src/content/jp/components/transaction.mdx b/docs/angular/src/content/jp/components/transaction.mdx index 27cb7a87d4..8e37338716 100644 --- a/docs/angular/src/content/jp/components/transaction.mdx +++ b/docs/angular/src/content/jp/components/transaction.mdx @@ -22,9 +22,9 @@ import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro' 操作 () を実行するたびに、トランザクションログと基に戻すスタックに追加されます。トランザクション ログ内のすべての変更は、レコードごとに蓄積されます。その時点から、サービスは、一意のレコードの追加/更新/削除操作のみで構成される集計**状態**を維持します。これは、`recordRef`、`type`、`value` の 3 つのプロパティを持つ インターフェイスに基づいています。 - 上に 3 つのクラスを構築したことにより、ユーザーは、行ったすべての変更、または特定のレコードに加えられた変更のみを一度にコミットできます。これらのクラスは、、、 です。 + 上に 3 つのクラスを構築したことにより、ユーザーは、行ったすべての変更、または特定のレコードに加えられた変更のみを一度にコミットできます。これらのクラスは、、、 です。 - と は、、、および コンポーネントと完全に統合されています。以下のトピックは、トランザクションを有効にしてこれらのコンポーネントを使用する詳細な例を示します。 + と は、、、および コンポーネントと完全に統合されています。以下のトピックは、トランザクションを有効にしてこれらのコンポーネントを使用する詳細な例を示します。 - [igxGrid 一括編集とトランザクション](grid/batch-editing.md) - [igxHierarchicalGrid 一括編集とトランザクション](hierarchicalgrid/batch-editing.md) - [igxTreeGrid 一括編集とトランザクション](treegrid/batch-editing.md) diff --git a/docs/angular/src/content/jp/components/zoomslider-overview.mdx b/docs/angular/src/content/jp/components/zoomslider-overview.mdx index d710fa6c2f..f1b71f1bed 100644 --- a/docs/angular/src/content/jp/components/zoomslider-overview.mdx +++ b/docs/angular/src/content/jp/components/zoomslider-overview.mdx @@ -110,5 +110,5 @@ export class AppModule {} ## API リファレンス - - +
+
diff --git a/docs/angular/src/content/jp/grids_templates/batch-editing.mdx b/docs/angular/src/content/jp/grids_templates/batch-editing.mdx index ad86081940..09be07f8f7 100644 --- a/docs/angular/src/content/jp/grids_templates/batch-editing.mdx +++ b/docs/angular/src/content/jp/grids_templates/batch-editing.mdx @@ -11,7 +11,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # Angular {ComponentTitle} 一括編集とトランザクション - を と一緒に使用し、アイランドごとに個別のトランザクション ログを蓄積するには、代わりにサービス ファクトリを提供する必要があります。 として使用できるようになります。 + を と一緒に使用し、アイランドごとに個別のトランザクション ログを蓄積するには、代わりにサービス ファクトリを提供する必要があります。 として使用できるようになります。 [`HierarchicalTransactionService`]({environment:angularApiUrl}/classes/igxhierarchicaltransactionservice.html) を [`{ComponentName}`]({environment:angularApiUrl}/classes/igxhierarchicalgridcomponent.html) と一緒に使用し、アイランドごとに個別のトランザクション ログを蓄積するには、代わりにサービス ファクトリを提供する必要があります。[`IgxHierarchicalTransactionServiceFactory`]({environment:angularApiUrl}/index.html#igxhierarchicaltransactionservicefactory) として使用できるようになります。 @@ -21,11 +21,11 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; -The Batch Editing feature of the {ComponentName} is based on the . Follow the [`Transaction Service class hierarchy`](../transaction-classes) topic to see an overview of the `igxHierarchicalTransactionService` and details how it is implemented. +The Batch Editing feature of the {ComponentName} is based on the . Follow the [`Transaction Service class hierarchy`](../transaction-classes) topic to see an overview of the `igxHierarchicalTransactionService` and details how it is implemented. -In order to use the with , but have it accumulating separate transaction logs for each island, a service factory should be provided instead. One is exported and ready for use as . +In order to use the with , but have it accumulating separate transaction logs for each island, a service factory should be provided instead. One is exported and ready for use as . Below is a detailed example of how is Batch Editing enabled for the {ComponentTitle} component. @@ -157,7 +157,7 @@ export class AppModule {} -The following code demonstrates the usage of the API - undo, redo, commit. +The following code demonstrates the usage of the API - undo, redo, commit. ```typescript export class GridBatchEditingSampleComponent { @@ -185,7 +185,7 @@ export class GridBatchEditingSampleComponent { -The following code demonstrates the usage of the API - undo, redo, commit. +The following code demonstrates the usage of the API - undo, redo, commit. ```typescript export class TreeGridBatchEditingSampleComponent { @@ -213,7 +213,7 @@ export class TreeGridBatchEditingSampleComponent { -The following code demonstrates the usage of the API - undo, redo, commit. +The following code demonstrates the usage of the API - undo, redo, commit. ```typescript ... @@ -274,14 +274,14 @@ Disabling -- +- - - - -- +- ## その他のリソース diff --git a/docs/angular/src/content/jp/grids_templates/column-selection.mdx b/docs/angular/src/content/jp/grids_templates/column-selection.mdx index 0d126a815f..26bda6bf20 100644 --- a/docs/angular/src/content/jp/grids_templates/column-selection.mdx +++ b/docs/angular/src/content/jp/grids_templates/column-selection.mdx @@ -58,7 +58,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; ## 基本的な使用方法 -列選択機能は、 値を受け取る 入力によって有効にすることができます。 +列選択機能は、 値を受け取る 入力によって有効にすることができます。 ## インタラクション @@ -85,7 +85,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; ## キーボードの組み合わせ -キーボードの組み合わせは、グリッドの 入力が に設定されている場合にのみ使用できます。 +キーボードの組み合わせは、グリッドの 入力が `multiple` に設定されている場合にのみ使用できます。 **列の選択**機能のキーボード ナビゲーションには 2 つのオプションがあります。 diff --git a/docs/angular/src/content/jp/grids_templates/column-types.mdx b/docs/angular/src/content/jp/grids_templates/column-types.mdx index d957f2110a..ef3971fbdc 100644 --- a/docs/angular/src/content/jp/grids_templates/column-types.mdx +++ b/docs/angular/src/content/jp/grids_templates/column-types.mdx @@ -126,9 +126,9 @@ public timeFormats = [ #### セル編集 列タイプに基づくセル編集に関しては、別のエディターが表示されます。 -- dateTime - が使用されます。このエディターは、DateTime オブジェクトの入力要素部分のマスクを提供します。 -- date - が使用されます。 -- time - が使用されます。 +- dateTime - が使用されます。このエディターは、DateTime オブジェクトの入力要素部分のマスクを提供します。 +- date - が使用されます。 +- time - が使用されます。 #### フィルタリング diff --git a/docs/angular/src/content/jp/grids_templates/excel-style-filtering.mdx b/docs/angular/src/content/jp/grids_templates/excel-style-filtering.mdx index bd81ec7172..c241250272 100644 --- a/docs/angular/src/content/jp/grids_templates/excel-style-filtering.mdx +++ b/docs/angular/src/content/jp/grids_templates/excel-style-filtering.mdx @@ -422,7 +422,7 @@ Excel スタイル フィルタリング ダイアログ内のリスト項目は ### 使用方法 -Excel スタイル フィルタリング コンポーネントを設定するには、 プロパティを {ComponentTitle} 列の 1 つに設定する必要があります。上記のサンプルで、 プロパティは {ComponentTitle} 列を表示する IgxSelectComponent の値にバインドされています。 +Excel スタイル フィルタリング コンポーネントを設定するには、 プロパティを {ComponentTitle} 列の 1 つに設定する必要があります。上記のサンプルで、 プロパティは {ComponentTitle} 列を表示する IgxSelectComponent の値にバインドされています。 diff --git a/docs/angular/src/content/jp/grids_templates/row-adding.mdx b/docs/angular/src/content/jp/grids_templates/row-adding.mdx index 6649ce99ce..6e0e98a703 100644 --- a/docs/angular/src/content/jp/grids_templates/row-adding.mdx +++ b/docs/angular/src/content/jp/grids_templates/row-adding.mdx @@ -169,7 +169,7 @@ export class AppModule {} -[行の追加] のボタンの表示状態を制御する IgxGridEditingActions 入力は、アクション ストリップ コンテキスト (タイプ ) を使用して、ボタンが表示するレコードを調整できます。 +[行の追加] のボタンの表示状態を制御する IgxGridEditingActions 入力は、アクション ストリップ コンテキスト (タイプ ) を使用して、ボタンが表示するレコードを調整できます。 diff --git a/docs/angular/src/content/jp/grids_templates/row-drag.mdx b/docs/angular/src/content/jp/grids_templates/row-drag.mdx index d0d285d1b3..74007e7d32 100644 --- a/docs/angular/src/content/jp/grids_templates/row-drag.mdx +++ b/docs/angular/src/content/jp/grids_templates/row-drag.mdx @@ -207,7 +207,7 @@ export class {ComponentName}RowDragComponent { } ``` -行が削除されたら、行の メソッドを呼び出すだけです。 +行が削除されたら、行の メソッドを呼び出すだけです。 diff --git a/docs/angular/src/content/jp/grids_templates/state-persistence.mdx b/docs/angular/src/content/jp/grids_templates/state-persistence.mdx index de68abd745..d0ae40a38f 100644 --- a/docs/angular/src/content/jp/grids_templates/state-persistence.mdx +++ b/docs/angular/src/content/jp/grids_templates/state-persistence.mdx @@ -355,7 +355,7 @@ public onDimensionInit(dim: IPivotDimension) { ## 子グリッドの復元 -子グリッドの状態の保存/復元は、 プロパティによって制御され、デフォルトで有効に設定されています。 は、ルート グリッドと階層のすべての子グリッドの両方の機能を保存/復元するために同じオプションを使用します。たとえば、以下のオプションを渡す場合: +子グリッドの状態の保存/復元は、 プロパティによって制御され、デフォルトで有効に設定されています。 は、ルート グリッドと階層のすべての子グリッドの両方の機能を保存/復元するために同じオプションを使用します。たとえば、以下のオプションを渡す場合: ``` html diff --git a/docs/xplat/src/content/en/components/charts/features/chart-axis-options.mdx b/docs/xplat/src/content/en/components/charts/features/chart-axis-options.mdx index 380c21e68d..7d0491b3c1 100644 --- a/docs/xplat/src/content/en/components/charts/features/chart-axis-options.mdx +++ b/docs/xplat/src/content/en/components/charts/features/chart-axis-options.mdx @@ -45,9 +45,9 @@ The chart also has the ability to consider auto-rotation of the labels if they w After setting the , you can set the property to true to opt into the automatic margin or set the property to true for the auto-rotation. You can also further customize the automatic margin that is applied by setting the and to provide extra space or a maximum possible margin, respectively. -Custom label formats such as and can be added to each axis via the and collections. Commonly used for applying Intl.NumberFormat and Intl.DateTimeFormat language sensitive number, date and time formatting. In order for a custom format to be applied to the labels, the or need to be set to data item's property name on the , eg. `{Date}`. For the the number is the context because it uses a numeric axis, therefore this needs to be set to `{0}`. +Custom label formats such as `NumberFormatSpecifier` and `DateTimeFormatSpecifier` can be added to each axis via the and collections. Commonly used for applying Intl.NumberFormat and Intl.DateTimeFormat language sensitive number, date and time formatting. In order for a custom format to be applied to the labels, the or need to be set to data item's property name on the , eg. `{Date}`. For the the number is the context because it uses a numeric axis, therefore this needs to be set to `{0}`. -The following example formats the yAxis with a to represent $USD prices for top box office movies in the United States. +The following example formats the yAxis with a `NumberFormatSpecifier` to represent $USD prices for top box office movies in the United States. diff --git a/docs/xplat/src/content/en/components/charts/features/chart-overlays.mdx b/docs/xplat/src/content/en/components/charts/features/chart-overlays.mdx index 2774324524..3e44d9d6c2 100644 --- a/docs/xplat/src/content/en/components/charts/features/chart-overlays.mdx +++ b/docs/xplat/src/content/en/components/charts/features/chart-overlays.mdx @@ -41,11 +41,11 @@ It is also possible to show an axis annotation on a in the and components is done by setting the property on the chart. This property takes a collection of the enumeration. You can mix and match multiple value layers in the same chart by adding multiple enumerations to the collection of the chart. +Applying the in the and components is done by setting the property on the chart. This property takes a collection of the enumeration. You can mix and match multiple value layers in the same chart by adding multiple enumerations to the collection of the chart. -In the , this is done by adding a to the `Series` collection of the chart and then setting the property to one of the enumerations. Each of these enumerations and what they mean is listed below: +In the , this is done by adding a to the `Series` collection of the chart and then setting the property to one of the enumerations. Each of these enumerations and what they mean is listed below: -- `Auto`: The default value mode of the enumeration. +- `Auto`: The default value mode of the enumeration. - `Average`: Applies potentially multiple value lines to call out the average value of each series plotted in the chart. - `GlobalAverage`: Applies a single value line to call out the average of all of the series values in the chart. - `GlobalMaximum`: Applies a single value line to call out the absolute maximum value of all of the series values in the chart. @@ -145,6 +145,6 @@ You can find more information about related chart types in these topics:


-
+


diff --git a/docs/xplat/src/content/en/components/editors/multi-column-combobox.mdx b/docs/xplat/src/content/en/components/editors/multi-column-combobox.mdx deleted file mode 100644 index 3bb384b735..0000000000 --- a/docs/xplat/src/content/en/components/editors/multi-column-combobox.mdx +++ /dev/null @@ -1,360 +0,0 @@ ---- -title: "{Platform} Combo | Data Visualization Tools | Infragistics" -description: Infragistics' {Platform} combo component helps you select the best chart to display your data. Improve your graphs and visualization with Ignite UI for {Platform}! -keywords: "{Platform} combo, drop down, {ProductName}, Infragistics" -mentionedTypes: [] ---- -import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; -import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; -import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - -# {Platform} Multi-Column Combo Box Overview - -The Multi-Column Combo Box automatically generates columns for properties on the data object. This component is unique in that it's a combo box that visualizes large amounts of data similar to a data grid embedded in the dropdown. - -## {Platform} Multi-Column Combo Box Example - -This sample demonstrates how to create `MultiColumnComboBox` that displays data in multiple columns in a popup window. - - - - - - - - - -## Dependencies -When installing the charts component, the core package must also be installed. - -```cmd -npm install --save {PackageCore} -npm install --save {PackageDataGrids} -npm install --save {PackageInputs} -npm install --save {PackageLayouts} -``` - - - - -## Component Modules - -The Multi-Column Combo Box requires the following modules: - - - -```razor -// in Program.cs file - -builder.Services.AddIgniteUIBlazor( - typeof(IgbMultiColumnComboBoxModule)); -``` - - - - - -```ts -import { IgrMultiColumnComboBoxModule } from 'igniteui-react-data-grids'; -import { IgrMultiColumnComboBox } from 'igniteui-react-data-grids'; - -IgrMultiColumnComboBoxModule.register(); -``` - - - - - -```ts -import { IgcMultiColumnComboBoxModule } from 'igniteui-webcomponents-data-grids'; -import { IgcMultiColumnComboBoxComponent } from 'igniteui-webcomponents-data-grids'; - -ModuleManager.register( - IgcMultiColumnComboBoxModule -); -``` - - - -## Usage - -### Binding a Data Source - -In order to display your objects in the Multi-Column Combo Box component, you will need to bind the `DataSource` property. This can be bound in the form of an array of complex objects. The following code demonstrates how to bind the data source property. - - - -In the below code snippet, the "countryNames" collection is an any[] full of custom objects. - - - - - -```tsx - -``` - - - - - -```html - - -``` - - - -```ts -constructor() { - let multiColumnComboBox = document.getElementById("comboBox") as IgcMultiColumnComboBoxComponent; - multiColumnComboBox.dataSource = countryNames; -} -``` - - - - - -```razor - - -@code { - protected List CountryNames; - - protected override void OnInitialized() - { - this.CountryNames = CountryTreeData.Create(); - } -} -``` - - - -### Setting Display Value and Data Value - -You can configure different properties of the Multi-Column Combo Box's bound `DataSource` to act as the display text for the control as well as the underlying value when a selection is made. This is done by setting the `TextField` and `ValueField` properties of the control, respectively, to the name of the property on the data item that you want to represent these things. - - - - - -If the value of the component needs to be updated programmatically, the `ValueChanged` event needs to be handled. The `GetValue` and `GetValueAsync` methods can be used to get the value when not within the `ValueChanged` event handler. - - - - -The following code snippet shows how to set these properties, given that the underlying data item has a "Country" and "ID" property: - - - -```tsx - -``` - - - - - -```html - - -``` - - - -```ts -constructor() { - let multiColumnComboBox = document.getElementById("comboBox") as IgcMultiColumnComboBoxComponent; - multiColumnComboBox.dataSource = countryNames; - multiColumnComboBox.textField = "Country"; - multiColumnComboBox.valueField = ["ID"]; -} -``` - - - - - -```razor - - -@code { - protected List CountryNames; - - protected override void OnInitialized() - { - this.CountryNames = CountryTreeData.Create(); - } -} -``` - - - -### Setting Fields - -By default, the Multi-Column Combo Box will show all of the properties on the underlying data item, but this can be controlled by setting the `Fields` property on the component. This property takes a `string[]` of property paths on the underlying data item to determine which properties are shown. - -The following code snippet shows how to set this, and the resulting drop-down would only show the ID and Country columns: - - - -```tsx - -``` - - - - - -```html - - -``` - - - -```ts -constructor() { - let multiColumnComboBox = document.getElementById("comboBox") as IgcMultiColumnComboBoxComponent; - multiColumnComboBox.dataSource = countryNames; - multiColumnComboBox.fields = ["ID", "Country"]; -} -``` - - - - - -```razor - - -@code { - protected List CountryNames; - - protected override void OnInitialized() - { - this.CountryNames = CountryTreeData.Create(); - } -} -``` - - - -### Setting Placeholder Text - -It is possible to configure the text that shows as a placeholder for when there is no selection in the Multi-Column Combo Box component. This is done by setting the `Placeholder` property to the string you would like to be displayed. The following code demonstrates how to set this: - - - -```tsx - -``` - - - - - -```html - - -``` - - - -```ts -constructor() { - let multiColumnComboBox = document.getElementById("comboBox") as IgcMultiColumnComboBoxComponent; - multiColumnComboBox.dataSource = countryNames; - multiColumnComboBox.placeholder = "Please choose a country"; -} -``` - - - - - -```razor - - -@code { - protected List CountryNames; - - protected override void OnInitialized() - { - this.CountryNames = CountryTreeData.Create(); - } -} -``` - - - -### Configuring Sorting Mode - -The user has the ability to sort the columns that are displayed in the Multi-Column Combo Box by clicking the header of the column in the drop-down. The way the sorting is configured can be modified as well, as the columns can be sorted by only a single column or multiple columns, and they can be limited to either ascending and descending, or they can be tri-state. This is done by setting the `SortMode` property of the component. - -Note, the TriState sort options will allow sorted columns to be unsorted. - -The following code demonstrates how to set the Multi-Column Combo Box to be able to sort by multiple columns tri-state. - - - -```tsx - -``` - - - - - -```html - - -``` - - - -```ts -constructor() { - let multiColumnComboBox = document.getElementById("comboBox") as IgcMultiColumnComboBoxComponent; - multiColumnComboBox.dataSource = countryNames; - multiColumnComboBox.sortMode = SortMode.SortByMultipleColumnsTriState; -} -``` - - - - - -```razor - - -@code { - protected List CountryNames; - - protected override void OnInitialized() - { - this.CountryNames = CountryTreeData.Create(); - } -} -``` - - - - -## API References - -
diff --git a/docs/xplat/src/content/en/components/editors/xdate-picker.mdx b/docs/xplat/src/content/en/components/editors/xdate-picker.mdx deleted file mode 100644 index ed77620f3d..0000000000 --- a/docs/xplat/src/content/en/components/editors/xdate-picker.mdx +++ /dev/null @@ -1,172 +0,0 @@ ---- -title: "{Platform} XDate Picker | Data Visualization Tools | Infragistics" -description: Infragistics' {Platform} xdate picker component helps your users select dates. Improve your graphs and visualization with Ignite UI for {Platform}! -keywords: "{Platform} xdate picker, drop down, {ProductName}, Infragistics" -mentionedTypes: ["XDatePicker"] ---- -import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; -import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; -import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; -import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - -# {Platform} XDate Picker Overview - -The XDate Picker component allows users to use a drop-down calendar UI allowing the intuitive selection of a day, month and year. This can be helpful when an application user needs to select specific dates, and multiple editors can be combined to create a date-range UI. - - -The `XDatePicker` component is deprecated from version - - - -5.0.0 - - - - - -18.7.0 - - - of {ProductName}. For the latest supported {ProductName} Date Picker component refer to its respective page under "Scheduling". - -## {Platform} XDate Picker Example - -This sample demonstrates how to create `XDatePicker` with option to select a single date. - - - - - - - - - - -## Dependencies -When installing the XDate Picker component, the core and inputs packages must also be installed. - -```cmd -npm install --save {PackageCore} -npm install --save {PackageInputs} -npm install --save {PackageLayouts} -``` - - - - -## Component Modules - -The XDate Picker component requires the following modules to be registered: - - - -```razor -// in Program.cs file - -builder.Services.AddIgniteUIBlazor( - typeof(IgbXDatePickerModule)); -``` - - - - - -```ts -import { IgrXDatePickerModule } from 'igniteui-react-inputs'; - -IgrXDatePickerModule.register(); -``` - - - - - -```ts -import { IgcXDatePickerModule } from 'igniteui-webcomponents-inputs'; -import { ModuleManager } from 'igniteui-webcomponents-core'; - -ModuleManager.register(IgcXDatePickerModule); -``` - - - -
- -## Usage - -The {Platform} XDate Picker editor component consists of three default parts - the text area, a calendar drop-down button, and a clear button. These areas are described below: - -- Text Area: This displays the selected date, stored in the `Value` property of the editor. - -- Calendar: Clicking the calendar button will open the calendar drop-down of the XDate Picker. The calendar will open to show the month of the currently selected `Value`, if there is one. If a `Value` is not specified, the calendar will show the month corresponding to the current date. The month at the top can be clicked to show a list of months, and the same applies for the year. There are also arrow buttons to the left and right of the month and year visualization that will increment and decrement the shown month chronologically. - -- Clear Button: The 'x' icon will clear the current value. - -| Property | Type | Description | -| ---------|------|------------ | -| `IconColor` | string | Changes the color of the calendar button. | -| `AllowTextInput` | bool | The **xdate** picker's value can be typed-in and modified by toggling this property to true. | -| `DateFormat` | enum | Defaults to DateShort e.g. 'mm/dd/yyyy'. When set to DateLong, the date displayed in the editor will appear as e.g. Wednesday, April 14, 2021. | -| `FirstDayOfWeek` | enum | Defaults to Sunday. A given day of the week will be used as the first day in each weekly row of the calendar, e.g. Monday through Sunday. | -| `FormatString` | string | When DateShort is used, the date's format can be configured e.g. 'dd/mm/yyyy'. Note, if the `DateFormat`'s DateLong and `FormatString` are set then the `DateFormat` is ignored. | -| `Label` | string | Displays custom text above the date in the top-left corner of the XDate Picker. | -| `MinDate` | DateTime | Restricts earlier dates from being selected or viewed. | -| `MaxDate` | DateTime | Restricts later dates from being selected or viewed. | -| `Placeholder` | string | A custom string to be displayed when the value within the edit portion of the calendar is cleared. | -| `ShowClearButton` | bool | Defaults to true, the clear button is directly to the left of the calendar button, visualized by an X. When clicked, it will clear the `Value` of the XDate Picker. The clear button's visibility can be toggled on and off. | -| `ShowTodayButton`| bool | The today is directly below the dates when the calendar is opened. When clicked, it will select the current date. The today button's visibility can be toggled on and off. | -| `ShowWeekNumbers` | bool | Week numbers can be displayed as a number, at the left of every row of dates, in the drop down portion of the XDate Picker. The week number's visibility can be toggled on and off. | -| `FirstWeekOfYear` | enum | Configures the start of the week numbers for the entire year. Can be set to FirstDay, FirstFourDayWeek, FirstFullWeek. | -| `OpenOnFocus` | bool | By default, the dropdown portion of the XDate Picker is opened on single click, forcing the user to click the calendar button to drop down the calendar. | -| `Value` | date | Sets the value of the XDate Picker and selects it in the dropdown calendar. | - -Users can also customize the XDate Picker's font by using the various text properties of the control. They are: `TextColor`, `TextFontFamily`, `TextFontSize`, `TextFontStyle`, and `TextFontWeight`. - -### Editing - -The following example demonstrates how to enable editing in the `XDatePicker`. - - - - - - -
- -### Date Limits - -The following example demonstrates how to restrict selected dates in the `XDatePicker`. - - - - - - -
- -### Date Formats - -The following example demonstrates how apply a long date in the `XDatePicker`. - - - - - - -
- -### Date Ranges - -The following example demonstrates how combine multiple `XDatePicker` controls. - - - - - - -
- - -## API References - -
diff --git a/docs/xplat/src/content/en/components/excel-library-using-cells.mdx b/docs/xplat/src/content/en/components/excel-library-using-cells.mdx index 389774daa0..0073f5c484 100644 --- a/docs/xplat/src/content/en/components/excel-library-using-cells.mdx +++ b/docs/xplat/src/content/en/components/excel-library-using-cells.mdx @@ -181,7 +181,7 @@ sumFormula.ApplyTo(worksheet.Rows[5].Cells[0]); ## Copying a Cell’s Format -Cells can have different formatting, including background color, format string, and font style. If you need a cell to have the same format as a previously formatted cell, instead of individually setting each option exposed by the object’s property, you can call the object’s `SetFormatting` method and pass it a object to copy. This will copy every format setting from the first cell to the second cell. You can also do this for a row, merged cell region, or column. +Cells can have different formatting, including background color, format string, and font style. If you need a cell to have the same format as a previously formatted cell, instead of individually setting each option exposed by the object’s property, you can call the object’s `SetFormatting` method and pass it a object to copy. This will copy every format setting from the first cell to the second cell. You can also do this for a row, merged cell region, or column. The following code shows you how to copy the format of the 2nd column to the 4th column: @@ -339,7 +339,7 @@ When the older formats are opened in Microsoft Excel 2003 and earlier versions, ## Excel Format Support -You can set a host of different formats on a by using the object returned by the property of that cell. This object enables you to style many different aspects of the cell such as borders, font, fill, alignments, and whether or not the cell should shrink to fit or be locked. +You can set a host of different formats on a by using the object returned by the property of that cell. This object enables you to style many different aspects of the cell such as borders, font, fill, alignments, and whether or not the cell should shrink to fit or be locked. You can also access the built-in styles to Microsoft Excel 2007 using the `Styles` collection of the object. The full list of styles in Excel can be found in the Cell Styles gallery of the Home tab of Microsoft Excel 2007. @@ -349,7 +349,7 @@ The `NormalStyle` contains the default properties for all cells in the workbook, You can clear the `Styles` collection or reset it to its predefined state by using the `Clear` and `Reset` methods, respectively. Both of these will remove all user-defined styles, but `Clear` will clear the `Styles` collection entirely. -With this feature, a `Style` property has been added to the object. This is a reference to a instance, representing the parent style of the format. For formats of a style, this property will always be null, because styles cannot have a parent style. For row, column, and cell formats, the `Style` property always returns the `NormalStyle` by default. +With this feature, a `Style` property has been added to the object. This is a reference to a instance, representing the parent style of the format. For formats of a style, this property will always be null, because styles cannot have a parent style. For row, column, and cell formats, the `Style` property always returns the `NormalStyle` by default. If the `Style` property is set to null, it will revert back to the `NormalStyle`. If it is set to another style in the styles collection, that style will now hold the defaults for all unset properties on the cell format. @@ -359,7 +359,7 @@ When a format option flag is removed from a format, all associated properties ar You can determine what would really be seen in cells by using the `GetResolvedCellFormat` method on classes which represent a row, column, cell, and merged cell. -This method returns a instance which refers back to the associated on which it is based. So subsequent changes to the property will be reflected in the instance returned from a `GetResolvedCellFormat` call. +This method returns a instance which refers back to the associated on which it is based. So subsequent changes to the property will be reflected in the instance returned from a `GetResolvedCellFormat` call. ## Merging Cells @@ -482,17 +482,17 @@ var cellText = worksheet.Rows[0].Cells[0].GetText(); ## API References -
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/xplat/src/content/en/components/excel-library-using-tables.mdx b/docs/xplat/src/content/en/components/excel-library-using-tables.mdx index decb584074..07da899b24 100644 --- a/docs/xplat/src/content/en/components/excel-library-using-tables.mdx +++ b/docs/xplat/src/content/en/components/excel-library-using-tables.mdx @@ -141,7 +141,7 @@ Sorting is done by setting a sorting condition on a table column. When a sorting If the data in the table is subsequently changed, the sort conditions do not automatically reevaluate. The sort conditions in a table are only reapplied when sort conditions are added, removed, modified, or when the `ReapplySortConditions` method is called on the table. When sorting conditions are reevaluated, only the visible cells are sorted. All cells in hidden rows are kept in place. -In addition to accessing sort conditions from the table columns, they are also exposed off the 's property's `SortConditions` collection. This is an ordered collection of columns/sort condition pairs. The order of this collection is the precedence of the sorting. +In addition to accessing sort conditions from the table columns, they are also exposed off the 's SortSettings property's `SortConditions` collection. This is an ordered collection of columns/sort condition pairs. The order of this collection is the precedence of the sorting. The following sort condition types are available to set on columns: @@ -150,7 +150,7 @@ The following sort condition types are available to set on columns: - `FillSortCondition` - Sort cells based on whether their fill is a specific pattern or gradient. - `FontColorSortCondition` - Sort cells based on whether their font is a specific color. -There is also a `CaseSensitive` property on the of the to determine whether strings should be sorted case sensitively or not. +There is also a `CaseSensitive` property on the SortSettings of the to determine whether strings should be sorted case sensitively or not. The following code snippet demonstrates how to apply an `OrderedSortCondition` to a : @@ -183,5 +183,5 @@ table.SortSettings.SortConditions.Add(table.Columns[0], new Infragistics.Documen ## API References -
-
+
+
diff --git a/docs/xplat/src/content/en/components/excel-library-using-workbooks.mdx b/docs/xplat/src/content/en/components/excel-library-using-workbooks.mdx index 7823dea945..2f979a8fce 100644 --- a/docs/xplat/src/content/en/components/excel-library-using-workbooks.mdx +++ b/docs/xplat/src/content/en/components/excel-library-using-workbooks.mdx @@ -25,7 +25,7 @@ The Infragistics {Platform} Excel Engine enables you to save data to and load da ## Change Default Font -First create a new instance of . Next, add the new font to the `Styles` collection of the . This style contains the default properties for all cells in the workbook, unless otherwise specified on a row, column, or cell. Changing properties of the style will change the default cell format properties in the workbook. +First create a new instance of . Next, add the new font to the `Styles` collection of the . This style contains the default properties for all cells in the workbook, unless otherwise specified on a row, column, or cell. Changing properties of the style will change the default cell format properties in the workbook. ```ts var workbook = new Workbook(); @@ -149,6 +149,6 @@ var protect = workbook.Protection; ## API References -
-
-
+
+
+
diff --git a/docs/xplat/src/content/en/components/excel-library-using-worksheets.mdx b/docs/xplat/src/content/en/components/excel-library-using-worksheets.mdx index 0b880b7e27..45f8720f1d 100644 --- a/docs/xplat/src/content/en/components/excel-library-using-worksheets.mdx +++ b/docs/xplat/src/content/en/components/excel-library-using-worksheets.mdx @@ -139,7 +139,7 @@ worksheet.Protect(); You can also use the object's `Protect` method to protect a worksheet against structural changes. -When protection is set, you can set the object's `Locked` property on individual cells, rows, merged cell regions, or columns to override the worksheet object's protection on those objects. For example, if you need all cells of a worksheet to be read-only except for the cells of one column, you can protect the worksheet and then set the object's `Locked` property to **false** on a specific object. This will allow your users to edit cells within the column while disabling editing of the other cells in the worksheet. +When protection is set, you can set the object's `Locked` property on individual cells, rows, merged cell regions, or columns to override the worksheet object's protection on those objects. For example, if you need all cells of a worksheet to be read-only except for the cells of one column, you can protect the worksheet and then set the object's `Locked` property to **false** on a specific object. This will allow your users to edit cells within the column while disabling editing of the other cells in the worksheet. The following code demonstrates how you can do this: @@ -335,9 +335,9 @@ worksheet.Protect(); You can configure the conditional formatting of a object by using the many "Add" methods exposed on the `ConditionalFormats` collection of that worksheet. The first parameter of these "Add" methods is the `string` region of the worksheet that you would like to apply the conditional format to. -Many of the conditional formats that you can add to your worksheet have a property that determines the way that the elements should look when the condition in that conditional format holds true. For example, you can use the properties attached to this property such as `Fill` and `Font` to determine the background and font settings of your cells under a particular conditional format, respectively. +Many of the conditional formats that you can add to your worksheet have a property that determines the way that the elements should look when the condition in that conditional format holds true. For example, you can use the properties attached to this property such as `Fill` and `Font` to determine the background and font settings of your cells under a particular conditional format, respectively. -There are a few conditional formats that do not have a property, as their visualization on the worksheet cell behaves differently. These conditional formats are the , , and `IconSetConditionalFormat`. +There are a few conditional formats that do not have a property, as their visualization on the worksheet cell behaves differently. These conditional formats are the , , and `IconSetConditionalFormat`. When loading a pre-existing from Excel, the formats will be preserved when that is loaded. The same is true for when you save the out to an Excel file. @@ -369,13 +369,13 @@ format.CellFormat.Font.ColorInfo = new WorkbookColorInfo(Core.Graphics.Colors.Re ## API References -
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/xplat/src/content/en/components/excel-library-working-with-charts.mdx b/docs/xplat/src/content/en/components/excel-library-working-with-charts.mdx index eb8b6491d4..184de0f5b9 100644 --- a/docs/xplat/src/content/en/components/excel-library-working-with-charts.mdx +++ b/docs/xplat/src/content/en/components/excel-library-working-with-charts.mdx @@ -58,4 +58,4 @@ chart.SetSourceData("A2:M6", true); ## API References -
+
diff --git a/docs/xplat/src/content/en/components/excel-library-working-with-grids.mdx b/docs/xplat/src/content/en/components/excel-library-working-with-grids.mdx index beffbe677f..70582540cd 100644 --- a/docs/xplat/src/content/en/components/excel-library-working-with-grids.mdx +++ b/docs/xplat/src/content/en/components/excel-library-working-with-grids.mdx @@ -31,4 +31,4 @@ TODO ## API References -
+
diff --git a/docs/xplat/src/content/en/components/excel-library-working-with-sparklines.mdx b/docs/xplat/src/content/en/components/excel-library-working-with-sparklines.mdx index 703a66d6db..e367fe29b4 100644 --- a/docs/xplat/src/content/en/components/excel-library-working-with-sparklines.mdx +++ b/docs/xplat/src/content/en/components/excel-library-working-with-sparklines.mdx @@ -57,4 +57,4 @@ sheet1.SparklineGroups.Add(SparklineType.Column, "Sparklines!B1:B1", "Data!A2:A1 ## API References -
+
diff --git a/docs/xplat/src/content/en/components/excel-library.mdx b/docs/xplat/src/content/en/components/excel-library.mdx index b471993e9d..2ad854999f 100644 --- a/docs/xplat/src/content/en/components/excel-library.mdx +++ b/docs/xplat/src/content/en/components/excel-library.mdx @@ -239,5 +239,5 @@ Modify `angular.json` by setting the `vendorSourceMap` option under architect => ## API References -
-
+
+
diff --git a/docs/xplat/src/content/en/components/excel-utility.mdx b/docs/xplat/src/content/en/components/excel-utility.mdx index d5714ed7c1..4eb6f9c951 100644 --- a/docs/xplat/src/content/en/components/excel-utility.mdx +++ b/docs/xplat/src/content/en/components/excel-utility.mdx @@ -353,6 +353,6 @@ export class ExcelUtility { ## API References -
-
-
+
+
+
diff --git a/docs/xplat/src/content/en/components/geo-map-binding-multiple-shapes.mdx b/docs/xplat/src/content/en/components/geo-map-binding-multiple-shapes.mdx index 00bfc970f3..481584715e 100644 --- a/docs/xplat/src/content/en/components/geo-map-binding-multiple-shapes.mdx +++ b/docs/xplat/src/content/en/components/geo-map-binding-multiple-shapes.mdx @@ -1,9 +1,9 @@ ---- +--- title: "{Platform} Map | Data Visualization Tools | Binding Multiple Data Shapes | Infragistics" description: Use Infragistics' {Platform} to add multiple geographic series objects to overlay a few shapefiles with geo-spacial data. View {ProductName} map tutorials! keywords: "{Platform} map, shape files, {ProductName}, Infragistics, data binding" license: commercial -mentionedTypes: ["GeographicMap", "ShapefileConverter", "Series", "GeographicShapeSeriesBase"] +mentionedTypes: ["GeographicMap", "ShapefileRecord", "Series", "GeographicShapeSeriesBase"] namespace: Infragistics.Controls.Maps --- import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; @@ -24,7 +24,7 @@ In the {ProductName} map, you can add multiple geographic series objects to over
-This topic takes you step-by-step towards displaying multiple geographic series in the map component. All geographic series plot following geo-spatial data loaded from shape files using the class. Refer to the [Binding Shape Files](geo-map-binding-shp-file.md) topic for more information about object. +This topic takes you step-by-step towards displaying multiple geographic series in the map component. All geographic series plot following geo-spatial data loaded from shape files using the class. Refer to the [Binding Shape Files](geo-map-binding-shp-file.md) topic for more information about object. - – displays locations of major cities - – displays routes between major ports @@ -242,7 +242,7 @@ public render() { ## Loading Shapefiles -Next, in constructor of your page, add a for each shapefile that you want to display in the geographic map component. +Next, in constructor of your page, add a for each shapefile that you want to display in the geographic map component. @@ -342,7 +342,7 @@ protected override void OnInitialized() ## Processing Polygons -Process shapes data loaded in with of countries of the world and assign it to object. +Process shapes data loaded in with of countries of the world and assign it to object. ```ts import { IgrGeographicShapeSeries } from 'igniteui-react-maps'; @@ -421,7 +421,7 @@ public onPolygonsLoaded(sds: IgcShapeDataSource, e: any) { ## Processing Polyline -Process shapes data loaded in with communication routes between major cities and assign it to object. +Process shapes data loaded in with communication routes between major cities and assign it to object. ```ts import { IgrGeographicPolylineSeries } from 'igniteui-react-maps'; @@ -508,7 +508,7 @@ public onPolylinesLoaded(sds: IgcShapeDataSource, e: any) { ## Processing Points -Process shapes data loaded in with locations of major cities and assign it to object. +Process shapes data loaded in with locations of major cities and assign it to object. ```ts import { IgrGeographicSymbolSeries } from 'igniteui-react-maps'; @@ -1159,4 +1159,4 @@ export class MapBindingMultipleShapes extends SampleBase {


-
+
diff --git a/docs/xplat/src/content/en/components/geo-map-binding-shp-file.mdx b/docs/xplat/src/content/en/components/geo-map-binding-shp-file.mdx index 1e27421309..3bf6c88894 100644 --- a/docs/xplat/src/content/en/components/geo-map-binding-shp-file.mdx +++ b/docs/xplat/src/content/en/components/geo-map-binding-shp-file.mdx @@ -1,9 +1,9 @@ ---- +--- title: "{Platform} Map | Data Visualization Tools | Binding Geographic Shape Files | Infragistics" description: Use Infragistics' {Platform} JavaScript map to load geo-spatial data from shape files. View {ProductName} map demos! keywords: "{Platform} map, shapefiles, {ProductName}, Infragistics, data binding" license: commercial -mentionedTypes: ["GeographicMap", "ShapefileConverter", "Series", "GeographicShapeSeriesBase"] +mentionedTypes: ["GeographicMap", "ShapefileRecord", "Series", "GeographicShapeSeriesBase"] --- import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; @@ -11,7 +11,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # {Platform} Binding Shape Files with Geo-spatial Data -The {ProductName} map component, the class loads geo-spatial data (points/locations, polylines, polygons) from shape files and converts it to a collection of objects. +The {ProductName} map component, the class loads geo-spatial data (points/locations, polylines, polygons) from shape files and converts it to a collection of `IgxShapefileRecord` objects. ## {Platform} Binding Shape Files with Geo-spatial Data Example @@ -24,7 +24,7 @@ The {ProductName} map component, the -The following table explains properties of the class for loading shape files. +The following table explains properties of the class for loading shape files. | Property | Type | Description | @@ -35,10 +35,10 @@ The following table explains properties of the object’s ImportAsync method is invoked which in return performs fetching and reading the shape files and finally doing the conversion. After this operation is complete, the is populated with objects and the `ImportCompleted` event is raised in order to notify about completed process of loading and converting geo-spatial data from shape files. +When both source properties are set to non-null values, then the object’s ImportAsync method is invoked which in return performs fetching and reading the shape files and finally doing the conversion. After this operation is complete, the is populated with `IgxShapefileRecord` objects and the `ImportCompleted` event is raised in order to notify about completed process of loading and converting geo-spatial data from shape files. ## Loading Shapefiles -The following code creates an instance of the object for loading a shape file that contains locations of major cities in the world. It also demonstrates how to handle the `ImportCompleted` event as a prerequisite for binding data to the map component. +The following code creates an instance of the object for loading a shape file that contains locations of major cities in the world. It also demonstrates how to handle the `ImportCompleted` event as a prerequisite for binding data to the map component. ```html @@ -62,7 +62,7 @@ sds.dataBind(); ## Binding Shapefiles -In the map component, Geographic Series are used for displaying geo-spatial data that is loaded from shape files. All types of Geographic Series have an `ItemsSource` property which can be bound to an array of objects. The is an example such array because it contains a list of objects. +In the map component, Geographic Series are used for displaying geo-spatial data that is loaded from shape files. All types of Geographic Series have an `ItemsSource` property which can be bound to an array of objects. The is an example such array because it contains a list of `IgxShapefileRecord` objects. The `ShapefileRecord` class provides properties for storing geo-spatial data, listed in the following table. @@ -74,8 +74,8 @@ The `ShapefileRecord` class provides properties for storing geo-spatial data, li This data structure is suitable for use in most Geographic Series as long as appropriate data columns are mapped to them. ## Code Snippet -This code example assumes that shape files were loaded using the . -The following code binds in the map component to the and maps the `Points` property of all objects. +This code example assumes that shape files were loaded using the . +The following code binds in the map component to the and maps the `Points` property of all `IgxShapefileRecord` objects. @@ -292,4 +292,4 @@ onDataLoaded(sds: IgcShapeDataSource, e: any) { ## API References
-
+
diff --git a/docs/xplat/src/content/en/components/geo-map-display-azure-imagery.mdx b/docs/xplat/src/content/en/components/geo-map-display-azure-imagery.mdx index d7ac5f32a4..dca8085806 100644 --- a/docs/xplat/src/content/en/components/geo-map-display-azure-imagery.mdx +++ b/docs/xplat/src/content/en/components/geo-map-display-azure-imagery.mdx @@ -15,7 +15,7 @@ import azureTrafficTileSeriesWithBackground from '@xplat-images/general/Azure_Tr # {Platform} Imagery from Azure Maps -The {Platform} is geographic imagery mapping service provided by Microsoft®. It provides several styles of geographic imagery tiles of the world. This geographic imagery service is accessible directly on the www.azure.microsoft.com web site. The {ProductName} map component can display geographic imagery from Azure Maps in the map’s background content using the class. +The {Platform} is geographic imagery mapping service provided by Microsoft®. It provides several styles of geographic imagery tiles of the world. This geographic imagery service is accessible directly on the www.azure.microsoft.com web site. The {ProductName} map component can display geographic imagery from Azure Maps in the map’s background content using the class. ## {Platform} Displaying Imagery from Azure Maps - Overview @@ -29,7 +29,7 @@ The {Platform} is geographic imag ## {Platform} Displaying Imagery from Azure Maps - Code Example -The following code snippet shows how to display geographic imagery tiles from Azure Maps in {Platform} using class. +The following code snippet shows how to display geographic imagery tiles from Azure Maps in {Platform} using class. @@ -143,7 +143,7 @@ This design allows you to build richer maps, for example:
## {Platform} Overlaying Imagery from Azure Maps - Code Example -The following code snippet shows how to display geographic imagery tiles on top of a background imagery joining eg. traffic with a dark grey map for the {Platform} using and classes. +The following code snippet shows how to display geographic imagery tiles on top of a background imagery joining eg. traffic with a dark grey map for the {Platform} using and classes. @@ -332,16 +332,15 @@ window.addEventListener("load", () => { ## Properties -The following table summarizes properties of the class: +The following table summarizes properties of the class: | Property Name | Property Type | Description | |----------------|-----------------|---------------| -||string|Represents the property for setting an API key required for the Azure Maps imagery service. You must obtain this key from the azure.microsoft.com website.| -|||Represents the property for setting the Azure Maps imagery tiles map style. This property can be set to the following enumeration values:
  • Satellite - Specifies the Satellite map style without road or labels overlay
  • Road - Specifies the Aerial map style with road and labels overlay
  • DarkGrey - Specifies a dark grey basemap style for contrast and highlighting overlays
  • TerraOverlay - Specifies a terrain map style with shaded relief to highlight elevation and landscape features
  • LabelsRoadOverlay - One of several overlays of city labels without an aerial overlay
  • HybridRoadOverlay - Satellite background combined with road and label overlays
  • HybridDarkGreyOverlay - Satellite background combined with dark grey label overlays
  • LabelsDarkGreyOverlay - One of several overlays of city labels over a dark grey basemap
  • TrafficDelayOverlay - Displays traffic delays and congestion areas in real time
  • TrafficAbsoluteOverlay - Displays current traffic speeds as absolute values
  • TrafficReducedOverlay - Displays reduced traffic flow with light-based visualization
  • TrafficRelativeOverlay - Displays traffic speeds relative to normal conditions
  • TrafficRelativeDarkOverlay - Displays traffic speeds relative to normal conditions over a dark basemap for enhanced contrast
  • WeatherRadarOverlay - Displays near real-time radar imagery of precipitation
  • WeatherInfraredOverlay - Displays infrared satellite imagery of cloud cover
| +||string|Represents the property for setting an API key required for the Azure Maps imagery service. You must obtain this key from the azure.microsoft.com website.| +||`IgxAzureMapsImageryStyle`|Represents the property for setting the Azure Maps imagery tiles map style. This property can be set to the following `IgxAzureMapsImageryStyle` enumeration values:
  • Satellite - Specifies the Satellite map style without road or labels overlay
  • Road - Specifies the Aerial map style with road and labels overlay
  • DarkGrey - Specifies a dark grey basemap style for contrast and highlighting overlays
  • TerraOverlay - Specifies a terrain map style with shaded relief to highlight elevation and landscape features
  • LabelsRoadOverlay - One of several overlays of city labels without an aerial overlay
  • HybridRoadOverlay - Satellite background combined with road and label overlays
  • HybridDarkGreyOverlay - Satellite background combined with dark grey label overlays
  • LabelsDarkGreyOverlay - One of several overlays of city labels over a dark grey basemap
  • TrafficDelayOverlay - Displays traffic delays and congestion areas in real time
  • TrafficAbsoluteOverlay - Displays current traffic speeds as absolute values
  • TrafficReducedOverlay - Displays reduced traffic flow with light-based visualization
  • TrafficRelativeOverlay - Displays traffic speeds relative to normal conditions
  • TrafficRelativeDarkOverlay - Displays traffic speeds relative to normal conditions over a dark basemap for enhanced contrast
  • WeatherRadarOverlay - Displays near real-time radar imagery of precipitation
  • WeatherInfraredOverlay - Displays infrared satellite imagery of cloud cover
| ## API References -
-
+

diff --git a/docs/xplat/src/content/en/components/geo-map-display-bing-imagery.mdx b/docs/xplat/src/content/en/components/geo-map-display-bing-imagery.mdx index ed22d95411..ae757bfcca 100644 --- a/docs/xplat/src/content/en/components/geo-map-display-bing-imagery.mdx +++ b/docs/xplat/src/content/en/components/geo-map-display-bing-imagery.mdx @@ -20,7 +20,7 @@ For more details: [Microsoft Bing Blogs](https://blogs.bing.com/maps/2025-06/Bing-Maps-for-Enterprise-Basic-Account-shutdown-June-30,2025) -The {Platform} is geographic imagery mapping service provided by Microsoft® company. It provides 3 styles of geographic imagery tiles of the world. This geographic imagery service is accessible directly on the www.bing.com/maps web site. The {ProductName} map component can display geographic imagery from Bing Maps in the map’s background content using the class. +The {Platform} is geographic imagery mapping service provided by Microsoft® company. It provides 3 styles of geographic imagery tiles of the world. This geographic imagery service is accessible directly on the www.bing.com/maps web site. The {ProductName} map component can display geographic imagery from Bing Maps in the map’s background content using the class. ## {Platform} Displaying Imagery from Bing Maps Example @@ -32,7 +32,7 @@ The {Platform} is geographic im
## Code Snippet -The following code snippet shows how to display geographic imagery tiles from Bing Maps in {Platform} using class. +The following code snippet shows how to display geographic imagery tiles from Bing Maps in {Platform} using class. @@ -103,22 +103,22 @@ geoMap.backgroundContent = tileSource; ## Properties -The following table summarized properties of the class: +The following table summarized properties of the class: | Property Name | Property Type | Description | |----------------|-----------------|---------------| -||string|Represents the property for setting an API key required for the Bing Maps imagery service. You must obtain this key from the www.bingmapsportal.com website.| -|||Represents the property for setting the Bing Maps imagery tiles map style. This property can be set to the following enumeration values:
  • Aerial - Specifies the Aerial map style without road or labels overlay
  • AerialWithLabels - Specifies the Aerial map style with road and labels overlay
  • Road - Specifies the Roads map style without Aerial overlay
| -||string|Represents the property for setting the Bing Imagery REST URI specifying where the TilePath and SubDomains will come from. This is an optional property, and if not specified it will use the default REST URI.| -||string|Represents a property for setting the culture name for the tile source.| -||boolean|Represents the property that specifies whether or not the Bing Maps service should auto-initialized upon the assignment of valid property values.| -||boolean|Represents the property that is set to True occurs when geographic imagery tiles from Bing Maps service have been initialized and they are ready for rendering in the map component.| -||`SubDomainsCollection`|Represents an image collection of URI sub domains| -||string|Represents a property that sets the map tile image URI, this is the actual location of the Bing Maps| +||string|Represents the property for setting an API key required for the Bing Maps imagery service. You must obtain this key from the www.bingmapsportal.com website.| +|||Represents the property for setting the Bing Maps imagery tiles map style. This property can be set to the following enumeration values:
  • Aerial - Specifies the Aerial map style without road or labels overlay
  • AerialWithLabels - Specifies the Aerial map style with road and labels overlay
  • Road - Specifies the Roads map style without Aerial overlay
| +||string|Represents the property for setting the Bing Imagery REST URI specifying where the TilePath and SubDomains will come from. This is an optional property, and if not specified it will use the default REST URI.| +||string|Represents a property for setting the culture name for the tile source.| +||boolean|Represents the property that specifies whether or not the Bing Maps service should auto-initialized upon the assignment of valid property values.| +||boolean|Represents the property that is set to True occurs when geographic imagery tiles from Bing Maps service have been initialized and they are ready for rendering in the map component.| +||`SubDomainsCollection`|Represents an image collection of URI sub domains| +||string|Represents a property that sets the map tile image URI, this is the actual location of the Bing Maps| ## API References -
-
+
+

diff --git a/docs/xplat/src/content/en/components/geo-map-display-esri-imagery.mdx b/docs/xplat/src/content/en/components/geo-map-display-esri-imagery.mdx index 4008f97ef2..a071775719 100644 --- a/docs/xplat/src/content/en/components/geo-map-display-esri-imagery.mdx +++ b/docs/xplat/src/content/en/components/geo-map-display-esri-imagery.mdx @@ -11,7 +11,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # {Platform} Displaying Imagery from Esri Maps -The is a free geographic imagery mapping service created by Esri company. It provides over 40 styles of geographic imagery tiles of the world and some thematic tiles for the USA. This geographic imagery service can be accessed directly on www.arcgisonline.com web site. +The is a free geographic imagery mapping service created by Esri company. It provides over 40 styles of geographic imagery tiles of the world and some thematic tiles for the USA. This geographic imagery service can be accessed directly on www.arcgisonline.com web site. ## {Platform} Displaying Imagery from Esri Maps Example @@ -24,7 +24,7 @@ The is a free geographic im
## Code Snippet -The following code snippet shows how to display {Platform} geographic imagery tiles from Esri imagery servers in using class. +The following code snippet shows how to display {Platform} geographic imagery tiles from Esri imagery servers in using class. @@ -185,5 +185,5 @@ protected override void OnInitialized() ## API References -
+

diff --git a/docs/xplat/src/content/en/components/geo-map-display-heat-imagery.mdx b/docs/xplat/src/content/en/components/geo-map-display-heat-imagery.mdx index 1d48f7296e..e6040ad857 100644 --- a/docs/xplat/src/content/en/components/geo-map-display-heat-imagery.mdx +++ b/docs/xplat/src/content/en/components/geo-map-display-heat-imagery.mdx @@ -1,9 +1,9 @@ ---- +--- title: "{Platform} Map | Data Visualization Tools | Infragistics" description: Use Infragistics' {Platform} JavaScript map to display heat map imagery. Check out {ProductName} map demos! keywords: "{Platform} map, heat map imagery, {ProductName}, Infragistics" license: commercial -mentionedTypes: ["GeographicMap", "ShapefileConverter", "HeatTileGenerator", "GeographicTileSeries"] +mentionedTypes: ["GeographicMap", "ShapefileRecord", "HeatTileGenerator", "GeographicTileSeries"] --- import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; @@ -11,7 +11,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # {Platform} Displaying Heat Imagery -The {ProductName} map control has the ability to show heat-map imagery through the use of the that are generated by a by loading geo-spatial data by loading shape files to a tile series. +The {ProductName} map control has the ability to show heat-map imagery through the use of the that are generated by a by loading geo-spatial data by loading shape files to a tile series. It is highly recommended that you review the [Binding Shape Files with Geo-Spatial Data](geo-map-binding-shp-file.md) topic as a pre-requisite to this topic. @@ -24,13 +24,13 @@ It is highly recommended that you review the [Binding Shape Files with Geo-Spati
-When a loads its shape files, it converts that data into objects. These objects can be retrieved from the `GetPointData()` method of the and can then be used to create a heat-map through usage of a object with a assigned to its `TileGenerator` property. This can then be used in a as its `TileImagery` source. +When a loads its shape files, it converts that data into objects. These objects can be retrieved from the `GetPointData()` method of the and can then be used to create a heat-map through usage of a object with a assigned to its `TileGenerator` property. This can then be used in a as its `TileImagery` source. -The object works such that it has three value paths, `XValues`, `YValues` and `Values`. As an example of how these could be used, in the case of a shape file that has information about population, you could consider the `XValues` to be longitude, `YValues` to be latitude, and `Values` to be the population data. Each of these properties takes a `number[]`. +The object works such that it has three value paths, `XValues`, `YValues` and `Values`. As an example of how these could be used, in the case of a shape file that has information about population, you could consider the `XValues` to be longitude, `YValues` to be latitude, and `Values` to be the population data. Each of these properties takes a `number[]`. -The display of the geographic tile series when using the heat-map functionality can be customized by setting the `MinimumColor` and `MaximumColor` properties to "rgba" strings that describe colors that you wish to correspond to the minimum and maximum values of the collection that you assign to the `Values` property of the . You can further customize this by setting the `ScaleColors` property of the generator to contain a collection of strings that describe colors, as this will tell the what colors to use for the displayed values in the map. It is also possible to customize how colors in your `ScaleColors` collection blur together by using the `BlurRadius`, `MaxBlurRadius`, and `UseBlurRadiusAdjustedForZoom` properties. +The display of the geographic tile series when using the heat-map functionality can be customized by setting the `MinimumColor` and `MaximumColor` properties to "rgba" strings that describe colors that you wish to correspond to the minimum and maximum values of the collection that you assign to the `Values` property of the . You can further customize this by setting the `ScaleColors` property of the generator to contain a collection of strings that describe colors, as this will tell the what colors to use for the displayed values in the map. It is also possible to customize how colors in your `ScaleColors` collection blur together by using the `BlurRadius`, `MaxBlurRadius`, and `UseBlurRadiusAdjustedForZoom` properties. -The can also use a logarithmic scale. If you want to use this, you can set the `UseLogarithmicScale` property to **true**. +The can also use a logarithmic scale. If you want to use this, you can set the `UseLogarithmicScale` property to **true**. ## Web Worker @@ -407,9 +407,7 @@ public onDataLoaded(csvData: string) { ## API References
-
-
-
-
-
-
+
+
+
+
diff --git a/docs/xplat/src/content/en/components/geo-map-display-imagery-types.mdx b/docs/xplat/src/content/en/components/geo-map-display-imagery-types.mdx index 56db141f44..0f7616b608 100644 --- a/docs/xplat/src/content/en/components/geo-map-display-imagery-types.mdx +++ b/docs/xplat/src/content/en/components/geo-map-display-imagery-types.mdx @@ -30,20 +30,20 @@ The following table summarizes imagery classes provided by the map component. | Imagery Class | Description | |---------------|---------------| -||Represents the base control for all imagery classes that display all types of supported geographic imagery tiles. This class can be extended for the purpose of implementing support for geographic imagery tiles from other geographic imagery sources such as Map Quest mapping service.| -||Represents the multi-scale imagery control for displaying geographic imagery tiles from the Open Street Maps service.| +||Represents the base control for all imagery classes that display all types of supported geographic imagery tiles. This class can be extended for the purpose of implementing support for geographic imagery tiles from other geographic imagery sources such as Map Quest mapping service.| +||Represents the multi-scale imagery control for displaying geographic imagery tiles from the Open Street Maps service.| {/* |`BingMapsMapImagery`|Represents the multi-scale imagery control for displaying geographic imagery tiles from the Bing Maps service.| */} -By default, the property is set to object and the map component displays geographic imagery tiles from the Open Street Maps service. In order to display different types of geographic imagery tiles, the map component must be re-configured. +By default, the property is set to object and the map component displays geographic imagery tiles from the Open Street Maps service. In order to display different types of geographic imagery tiles, the map component must be re-configured. -In addition, the property can be set to any object that inherits the class. However, only objects that inherit the class will allow panning and zooming of the map background content. +In addition, the property can be set to any object that inherits the class. However, only objects that inherit the class will allow panning and zooming of the map background content. In the map component, map background content is always rendered behind all geographic series. In other words, geographic imagery tiles are always rendered first and any geographic series in the map component's Series property is rendered on top of the geographic imagery tiles. This is especially important when displaying multiple geographic series in the same plot area of the map component because geographic imagery tiles can quickly get buried in the map view. ## Code Snippet -This code example explicitly sets of the map component to the object which provides geographic imagery tile from the Open Street Maps. +This code example explicitly sets of the map component to the object which provides geographic imagery tile from the Open Street Maps. ```html TODO - ADD CODE SNIPPET @@ -52,6 +52,6 @@ This code example explicitly sets
-
-
+`BackgroundContent`
+
+
diff --git a/docs/xplat/src/content/en/components/geo-map-display-osm-imagery.mdx b/docs/xplat/src/content/en/components/geo-map-display-osm-imagery.mdx index 28ac44bf2a..388f04edc9 100644 --- a/docs/xplat/src/content/en/components/geo-map-display-osm-imagery.mdx +++ b/docs/xplat/src/content/en/components/geo-map-display-osm-imagery.mdx @@ -11,7 +11,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # {Platform} Displaying Imagery from Open Street Maps -The {Platform} is a free geographic imagery mapping service created collaboratively by OpenStreetMap© contributors from around the world. It provides geographic imagery tiles of the world only in road map style without any configuration options. This geographic imagery service can be accessed directly on www.OpenStreetMap.org web site. +The {Platform} is a free geographic imagery mapping service created collaboratively by OpenStreetMap© contributors from around the world. It provides geographic imagery tiles of the world only in road map style without any configuration options. This geographic imagery service can be accessed directly on www.OpenStreetMap.org web site. By the default, the {ProductName} map component already displays geographic imagery from the Open Street Maps. Therefore, there is no need to configure the control to display geographic imagery from the Open Street Maps. ## {Platform} Displaying Imagery from Open Street Maps Example @@ -25,7 +25,7 @@ By the default, the {ProductName} map component already displays geographic imag
## Code Snippet -This code example explicitly sets of the map component to the object which provides geographic imagery from OpenStreetMap© contributors. +This code example explicitly sets of the map component to the object which provides geographic imagery from OpenStreetMap© contributors. @@ -114,4 +114,4 @@ this.geoMap.backgroundContent = mapImagery; ## API References -
+
diff --git a/docs/xplat/src/content/en/components/geo-map-resources-esri.mdx b/docs/xplat/src/content/en/components/geo-map-resources-esri.mdx index 7d7e28b8fa..c19531fa32 100644 --- a/docs/xplat/src/content/en/components/geo-map-resources-esri.mdx +++ b/docs/xplat/src/content/en/components/geo-map-resources-esri.mdx @@ -10,7 +10,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # {Platform} Esri Utility -The resource topic provides implementation of an utility that helps with using provided by Esri Maps in . +The resource topic provides implementation of an utility that helps with using provided by Esri Maps in . ## Code Snippet @@ -136,5 +136,5 @@ public class EsriStyle ## API References -
+

diff --git a/docs/xplat/src/content/en/components/geo-map-shape-files-reference.mdx b/docs/xplat/src/content/en/components/geo-map-shape-files-reference.mdx index c510239d20..e58f849277 100644 --- a/docs/xplat/src/content/en/components/geo-map-shape-files-reference.mdx +++ b/docs/xplat/src/content/en/components/geo-map-shape-files-reference.mdx @@ -100,4 +100,4 @@ The following topics provide additional information related to this topic.


-
+
diff --git a/docs/xplat/src/content/en/components/geo-map-type-scatter-area-series.mdx b/docs/xplat/src/content/en/components/geo-map-type-scatter-area-series.mdx index 93eb6bb518..e64c2b2843 100644 --- a/docs/xplat/src/content/en/components/geo-map-type-scatter-area-series.mdx +++ b/docs/xplat/src/content/en/components/geo-map-type-scatter-area-series.mdx @@ -1,4 +1,4 @@ ---- +--- title: "{Platform} Map | Data Visualization Tools | Scatter Area Series | Data Binding | Infragistics" description: Use Infragistics {Platform} map's scatter area series to draw a colored area surface based on a triangulation of longitude and latitude data with a numeric value assigned to each point. Learn more about {ProductName} map's series! keywords: "{Platform} map, scatter area series, {ProductName}, Infragistics" @@ -45,7 +45,7 @@ The following table summarizes properties of GeographicScatterAreaSeries used fo ## Color Scale Use the ColorScale property of the to resolve colors values of points and thus fill surface of the geographic series. The colors are smoothly interpolated around the shape of the surface by applying a pixel-wise triangle rasterizer to a triangulation data. Because rendering of the surface is pixel-wise, the color scale uses colors instead of brushes. -The provided class should satisfy most coloring needs, but the ColorScale base class can be inherited by the application for custom coloring logic. +The provided class should satisfy most coloring needs, but the ColorScale base class can be inherited by the application for custom coloring logic. The following table list properties of the `CustomPaletteColorScale` affecting surface coloring of the GeographicScatterAreaSeries. @@ -381,7 +381,7 @@ createAreaSeries(data: any[]) { ## API References -
-
+
+


diff --git a/docs/xplat/src/content/en/components/geo-map-type-scatter-bubble-series.mdx b/docs/xplat/src/content/en/components/geo-map-type-scatter-bubble-series.mdx index 35225ac37b..2172a031cf 100644 --- a/docs/xplat/src/content/en/components/geo-map-type-scatter-bubble-series.mdx +++ b/docs/xplat/src/content/en/components/geo-map-type-scatter-bubble-series.mdx @@ -341,4 +341,4 @@ addSeriesWith(locations: any[]) ## API References
-
+`RadiusScale`
diff --git a/docs/xplat/src/content/en/components/geo-map-type-scatter-contour-series.mdx b/docs/xplat/src/content/en/components/geo-map-type-scatter-contour-series.mdx index 55e6aebd9d..7cdda26b7e 100644 --- a/docs/xplat/src/content/en/components/geo-map-type-scatter-contour-series.mdx +++ b/docs/xplat/src/content/en/components/geo-map-type-scatter-contour-series.mdx @@ -376,7 +376,7 @@ createContourSeries(data: any[]) ## API References -
+`FillScale`


-
+
diff --git a/docs/xplat/src/content/en/components/geo-map-type-scatter-symbol-series.mdx b/docs/xplat/src/content/en/components/geo-map-type-scatter-symbol-series.mdx index 52e46e2fc0..ff37b64830 100644 --- a/docs/xplat/src/content/en/components/geo-map-type-scatter-symbol-series.mdx +++ b/docs/xplat/src/content/en/components/geo-map-type-scatter-symbol-series.mdx @@ -1,9 +1,9 @@ ---- +--- title: "{Platform} Map | Data Visualization Tools | Scatter Symbol Series | Data Binding | Infragistics" description: Use Infragistics {Platform} map's scatter symbol series to display geo-spatial data using points or markers in a geographic context.. Learn more about {ProductName} map's series! keywords: "{Platform} map, scatter symbol series, {ProductName}, Infragistics" license: commercial -mentionedTypes: ["GeographicMap", "ShapefileConverter", "Series"] +mentionedTypes: ["GeographicMap", "ShapefileRecord", "Series"] --- import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; @@ -27,7 +27,7 @@ In {Platform} map component, you can use the has the `ItemsSource` property which can be bound to an array of objects. In addition, each data item in this object must have two numeric data columns that store a geographic location (longitude and latitude). These data columns are then mapped to the `LatitudeMemberPath` and `LongitudeMemberPath` properties. The `GeographicSymbolSeries` uses values of these mapped data columns to plot symbol elements in the geographic map component. ## Code Snippet -The following code shows how to bind the to locations of cities loaded from a shape file using the . +The following code shows how to bind the to locations of cities loaded from a shape file using the . @@ -250,4 +250,4 @@ addSeriesWith(locations: any[], brush: string) ## API References
-
+
diff --git a/docs/xplat/src/content/en/components/geo-map-type-shape-polygon-series.mdx b/docs/xplat/src/content/en/components/geo-map-type-shape-polygon-series.mdx index 4c37fdaa73..2cf5f771d5 100644 --- a/docs/xplat/src/content/en/components/geo-map-type-shape-polygon-series.mdx +++ b/docs/xplat/src/content/en/components/geo-map-type-shape-polygon-series.mdx @@ -1,9 +1,9 @@ ---- +--- title: "{Platform} Map | Data Visualization Tools | Shape Polygon Series | Infragistics" description: Use Infragistics {Platform} map's shape polygon series to render shapes of countries or regions defined by geographic locations. Learn more about {ProductName} map's series! keywords: "{Platform} map, shape polygon series, {ProductName}, Infragistics" license: commercial -mentionedTypes: ["GeographicMap", "ShapefileConverter", "Series", "GeographicShapeSeriesBase"] +mentionedTypes: ["GeographicMap", "ShapefileRecord", "Series", "GeographicShapeSeriesBase"] --- import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; @@ -29,7 +29,7 @@ The works a lot like the has the `ItemsSource` property which can be bound to an array of objects. In addition, each data item in this object must have one data column that stores single/multiple shapes using an array of arrays of objects with x and y values representing geographic locations. This data column is then mapped to the `ShapeMemberPath` property. The `GeographicShapeSeries` uses points of this mapped data column to plot polygons in the map control. ## Code Snippet -The following code demonstrates how to bind the to shapes of countries in the world loaded from a shape file using the . +The following code demonstrates how to bind the to shapes of countries in the world loaded from a shape file using the . @@ -354,4 +354,4 @@ createSeries(shapeData: any[], shapeBrush: string, shapeTitle: string)

-
+
diff --git a/docs/xplat/src/content/en/components/geo-map-type-shape-polyline-series.mdx b/docs/xplat/src/content/en/components/geo-map-type-shape-polyline-series.mdx index 9489a439c7..29b0fecf77 100644 --- a/docs/xplat/src/content/en/components/geo-map-type-shape-polyline-series.mdx +++ b/docs/xplat/src/content/en/components/geo-map-type-shape-polyline-series.mdx @@ -1,9 +1,9 @@ ---- +--- title: "{Platform} Map | Data Visualization Tools | Shape Polyline Series | Infragistics" description: Use Infragistics {Platform} map's shape polyline series to render roads or connections between geographic locations such as cities or airports. Learn more about {ProductName} map's series! keywords: "{Platform} map, {ProductName}, shape polyline series, Infragistics" license: commercial -mentionedTypes: ["GeographicMap", "ShapefileConverter", "Series", "GeographicShapeSeriesBase"] +mentionedTypes: ["GeographicMap", "ShapefileRecord", "Series", "GeographicShapeSeriesBase"] --- import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; @@ -29,7 +29,7 @@ The works a lot like the Similarly to other types of geographic series in the control, the has the `ItemsSource` property which can be bound to an array of objects. In addition, each data item in this object must have one data column that stores single/multiple shapes using an array of arrays of objects with x and y values representing geographic locations. This data column is then mapped to the `ShapeMemberPath` property. The `GeographicPolylineSeries` uses points of this mapped data column to plot polygons in the control. ## Code Snippet -The following code shows how to bind the to locations of cities loaded from a shape file using the . +The following code shows how to bind the to locations of cities loaded from a shape file using the . @@ -343,4 +343,4 @@ public addSeriesWith(shapeData: any[], shapeBrush: string) {

-
+
diff --git a/docs/xplat/src/content/en/components/grids/_shared/batch-editing.mdx b/docs/xplat/src/content/en/components/grids/_shared/batch-editing.mdx index 36aac3d357..d49dd4da8d 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/batch-editing.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/batch-editing.mdx @@ -16,17 +16,17 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # {Platform} {ComponentTitle} Batch Editing and Transactions -The Batch Editing feature of the is based on the . Follow the [**Transaction Service class hierarchy**](../transaction-classes.md) topic to see an overview of the and details how it is implemented. +The Batch Editing feature of the is based on the `TransactionService`. Follow the [**Transaction Service class hierarchy**](../transaction-classes.md) topic to see an overview of the `TransactionService` and details how it is implemented. -The Batch Editing feature of the is based on the . Follow the [**Transaction Service class hierarchy**](../transaction-classes.md) topic to see an overview of the and details how it is implemented. +The Batch Editing feature of the is based on the `HierarchicalTransactionService`. Follow the [**Transaction Service class hierarchy**](../transaction-classes.md) topic to see an overview of the `HierarchicalTransactionService` and details how it is implemented. -In order to use the with , but have it accumulating separate transaction logs for each island, a service factory should be provided instead. One is exported and ready for use as `HierarchicalTransactionServiceFactory`. +In order to use the `HierarchicalTransactionService` with , but have it accumulating separate transaction logs for each island, a service factory should be provided instead. One is exported and ready for use as `HierarchicalTransactionServiceFactory`. @@ -62,7 +62,7 @@ You need to enable . The proper is provided through a `TransactionFactory`. +This will ensure a proper instance of `Transaction` service is provided for the . The proper `TransactionService` is provided through a `TransactionFactory`. You can learn more about this internal implementation in the [transactions topic](../transaction-classes.md#transaction-factory). @@ -286,7 +286,7 @@ private OnRedoClick() { -The following code demonstrates the usage of the API - undo, redo, commit. +The following code demonstrates the usage of the `TransactionService` API - undo, redo, commit. @@ -346,7 +346,7 @@ export class GridBatchEditingSampleComponent { -The following code demonstrates the usage of the API - undo, redo, commit. +The following code demonstrates the usage of the `HierarchicalTransactionService` API - undo, redo, commit. ```typescript export class TreeGridBatchEditingSampleComponent { @@ -398,7 +398,7 @@ export class GridBatchEditingSampleComponent { -The following code demonstrates the usage of the API - undo, redo, commit. +The following code demonstrates the usage of the `TransactionService` API - undo, redo, commit. ```typescript export class HierarchicalGridBatchEditingSampleComponent { @@ -453,9 +453,7 @@ Disabling
-
-
-
+`Transactions`
## Additional Resources diff --git a/docs/xplat/src/content/en/components/grids/_shared/cascading-combos.mdx b/docs/xplat/src/content/en/components/grids/_shared/cascading-combos.mdx index fe24427ad2..e4788d7f7b 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/cascading-combos.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/cascading-combos.mdx @@ -320,5 +320,5 @@ And lastly, adding the , which is required whil

-
+

diff --git a/docs/xplat/src/content/en/components/grids/_shared/cell-editing.mdx b/docs/xplat/src/content/en/components/grids/_shared/cell-editing.mdx index 31a1675ab0..8fc9b2a3db 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/cell-editing.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/cell-editing.mdx @@ -1509,7 +1509,7 @@ The sample will not be affected by the selected global theme from **Change Theme

-
+
## Additional Resources diff --git a/docs/xplat/src/content/en/components/grids/_shared/cell-merging.mdx b/docs/xplat/src/content/en/components/grids/_shared/cell-merging.mdx index aa3ba7df15..5c62ec568f 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/cell-merging.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/cell-merging.mdx @@ -42,7 +42,7 @@ Cell merging in the grid is controlled at two levels: ### Grid Merge Mode -The grid exposes a property that accepts values from the enum: +The grid exposes a property that accepts values from the enum: - `always` - Merges any adjacent cells that meet the merging condition, regardless of sort state. - `onSort` - Merges adjacent cells only when the column is sorted **(default value)**. @@ -156,7 +156,7 @@ Here, the grid is set to merge only when columns are sorted, and both Category a In addition to the built-in `always` and `onSort` modes, the grid allows you to define a custom condition for merging cells through the property. This strategy controls both how cells are compared and how merged ranges are calculated. ### Merge Strategy Class -A custom merge strategy must implement the class: +A custom merge strategy must implement the class: ```ts @@ -198,7 +198,7 @@ export declare class IgcGridMergeStrategy { ### Extending the Default Strategy -If you only want to customize part of the behavior (for example, the comparer logic), you can extend the built-in and override the relevant methods. +If you only want to customize part of the behavior (for example, the comparer logic), you can extend the built-in and override the relevant methods. ```ts diff --git a/docs/xplat/src/content/en/components/grids/_shared/clipboard-interactions.mdx b/docs/xplat/src/content/en/components/grids/_shared/clipboard-interactions.mdx index 27a32d104a..685927efd8 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/clipboard-interactions.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/clipboard-interactions.mdx @@ -42,7 +42,7 @@ Copy behavior is working with the default interaction defined by the browser and - Both the **cut** and **copy** events are not natively supported in Internet Explorer. The exception is the -**paste** event (IE 11) which is emitted but does not expose the property in the event. +**paste** event (IE 11) which is emitted but does not expose the property in the event. In order to **copy** cells in IE 11, you can use the keyboard selection. Hold the SHIFT key in order to make a multi-cell selection, press CTRL + C in order to copy. @@ -60,22 +60,22 @@ You can use a custom paste handler in order to configure **paste** behavior, hav ## API Usage We expose property, which handles the following options: -- Enables/disables copying of selected cells. -- Include the associated headers when copying. -- Apply any existing column formatters to the copied data. -- The string separator to use the for formatting the data in the clipboard. Default is `/t` +- Enables/disables copying of selected cells. +- Include the associated headers when copying. +- Apply any existing column formatters to the copied data. +- The string separator to use the for formatting the data in the clipboard. Default is `/t` Excel can automatically detect text that is separated by tabs (tab-delimited `/t`) and properly paste the data into separate columns. When the paste format doesn't work, and everything you paste appears in a single column, then Excel's delimiter is set to another character, or your text is using spaces instead of tabs. -- Emitted when a copy operation is executed. Fired only if copy behavior is enabled through the . +- Emitted when a copy operation is executed. Fired only if copy behavior is enabled through the . ## API References
-
+
## Additional Resources diff --git a/docs/xplat/src/content/en/components/grids/_shared/column-moving.mdx b/docs/xplat/src/content/en/components/grids/_shared/column-moving.mdx index ec7a27b16d..3b5a6ab69c 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/column-moving.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/column-moving.mdx @@ -152,7 +152,7 @@ const headerTemplate = (ctx: IgrCellTemplateContext) => { In addition to the drag and drop functionality, the Column Moving feature also provides API methods to allow moving a column/reordering columns programmatically: - - Moves a column before or after another column (a target). The first parameter is the column to be moved, and the second parameter is the target column. Also accepts an optional third parameter `Position` (representing a value), which determines whether to place the column before or after the target column. + - Moves a column before or after another column (a target). The first parameter is the column to be moved, and the second parameter is the target column. Also accepts an optional third parameter `Position` (representing a value), which determines whether to place the column before or after the target column. @@ -197,13 +197,13 @@ idColumn.move(3); ``` -Note that when using the column moving feature, the event will be emitted if the operation was successful. Also note that in comparison to the drag and drop functionality, using the column moving feature does not require setting the property to true. +Note that when using the column moving feature, the event will be emitted if the operation was successful. Also note that in comparison to the drag and drop functionality, using the column moving feature does not require setting the property to true. ## Events -There are several events related to the column moving to provide a means for tapping into the columns' drag and drop operations. These are , `ColumnMoving` and . +There are several events related to the column moving to provide a means for tapping into the columns' drag and drop operations. These are , `ColumnMoving` and . -You can subscribe to the event of the to implement some custom logic when a column is dropped to a new position. For example, you can cancel dropping the **Category** column after the **Change On Year(%)** column in the following code snippet. +You can subscribe to the event of the to implement some custom logic when a column is dropped to a new position. For example, you can cancel dropping the **Category** column after the **Change On Year(%)** column in the following code snippet. ```html diff --git a/docs/xplat/src/content/en/components/grids/_shared/column-pinning.mdx b/docs/xplat/src/content/en/components/grids/_shared/column-pinning.mdx index c08e27278d..5d57b3ee92 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/column-pinning.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/column-pinning.mdx @@ -210,13 +210,18 @@ gridRef.current.unpinColumn('Debut'); Both methods return a boolean value indicating whether their respective operation is successful or not. Usually the reason they fail is that the column is already in the desired state. - + A column is pinned to the right of the rightmost pinned column. Changing the order of the pinned columns can be done by subscribing to the event and changing the property of the event arguments to the desired position index. + +A column is pinned to the right of the rightmost pinned column. Changing the order of the pinned columns can be done by subscribing to the event and changing the property of the event arguments to the desired position index. + + + -A column is pinned to the right of the rightmost pinned column. Changing the order of the pinned columns can be done by subscribing to the `ColumnPinScript` event and providing a JavaScript function for changing the property of the event arguments to the desired position index. +A column is pinned to the right of the rightmost pinned column. Changing the order of the pinned columns can be done by subscribing to the `ColumnPinScript` event and providing a JavaScript function for changing the property of the event arguments to the desired position index. diff --git a/docs/xplat/src/content/en/components/grids/_shared/column-resizing.mdx b/docs/xplat/src/content/en/components/grids/_shared/column-resizing.mdx index 7a7dfe7ce9..0b741852b6 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/column-resizing.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/column-resizing.mdx @@ -80,7 +80,7 @@ The {ProductName} Column Resizing feature in {Platform} {ComponentTitle} allows -You can subscribe to the event of the to implement some custom logic when a column is resized. Both, previous and new column widths, as well as the `Column` object, are exposed through the event arguments. +You can subscribe to the event of the to implement some custom logic when a column is resized. Both, previous and new column widths, as well as the `Column` object, are exposed through the event arguments. diff --git a/docs/xplat/src/content/en/components/grids/_shared/column-selection.mdx b/docs/xplat/src/content/en/components/grids/_shared/column-selection.mdx index 38b6653cdb..6f81c638f4 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/column-selection.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/column-selection.mdx @@ -43,7 +43,7 @@ The sample below demonstrates the three types of `{ComponentName}`'s **column se ## Basic Usage -The column selection feature can be enabled through the input, which takes values. +The column selection feature can be enabled through the input, which takes values. ## Interactions diff --git a/docs/xplat/src/content/en/components/grids/_shared/column-types.mdx b/docs/xplat/src/content/en/components/grids/_shared/column-types.mdx index 4b7b2672b1..63405cc0cf 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/column-types.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/column-types.mdx @@ -240,9 +240,9 @@ const timeFormats = [ #### Cell Editing When it comes to cell editing based on the column type a different editor will appear: -- `DateTime` - will be used. This editor will give you a mask directions for the input elements part of the `DateTime` object. +- `DateTime` - will be used. This editor will give you a mask directions for the input elements part of the `DateTime` object. - `Date` - will be used. -- `Time` - will be used. +- `Time` - will be used. #### Filtering diff --git a/docs/xplat/src/content/en/components/grids/_shared/conditional-cell-styling.mdx b/docs/xplat/src/content/en/components/grids/_shared/conditional-cell-styling.mdx index ffcef40d73..8abf6a487b 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/conditional-cell-styling.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/conditional-cell-styling.mdx @@ -767,7 +767,7 @@ Use **::ng-deep** or **ViewEncapsulation.None** to force the custom styles down -- By using the input ` which accepts an object literal where the keys are style properties and the values are expressions for evaluation. +- By using the input ` which accepts an object literal where the keys are style properties and the values are expressions for evaluation. > The callback signature for both `cellStyles` and `cellClasses` is now changed to: diff --git a/docs/xplat/src/content/en/components/grids/_shared/editing.mdx b/docs/xplat/src/content/en/components/grids/_shared/editing.mdx index 9539396b6e..0a1840ccc3 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/editing.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/editing.mdx @@ -56,11 +56,11 @@ In the , if you s - For `string` data type, default template is using . - For `number` data type, default template is using type="number", so if you try to update cell to a value which can not be parsed to a number your change is going to be discarded, and the value in the cell will be set to 0. - For `date` data type, default template is using -- For `dateTime` data type, default template is using . This editor will give you a mask directions for the input elements part of the DateTime object. -- For `time` - data type, default template is using . +- For `dateTime` data type, default template is using . This editor will give you a mask directions for the input elements part of the DateTime object. +- For `time` - data type, default template is using . - For `boolean` data type, default template is using . -- For `currency` data type, default template is using with prefix/suffix configuration based on application or grid locale settings. -- For `percent` data type, default template is using with suffix element that shows a preview of the edited value in percents. +- For `currency` data type, default template is using with prefix/suffix configuration based on application or grid locale settings. +- For `percent` data type, default template is using with suffix element that shows a preview of the edited value in percents. - For custom templates you can see [Cell Editing topic](cell-editing.md#{PlatformLower}-grid-cell-editing-and-edit-templates-example) @@ -76,14 +76,14 @@ The grid exposes a wide array of events that provide greater control over the ed | Event | Description | Arguments | Cancellable | | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------- | ----------- | - | | If `RowEditing` is enabled, fires when a row enters edit mode | | **true** | - | | Fires when a cell **enters edit mode** (after ) | | **true** | - | | If value is changed, fires just **before** a cell's value is **committed** (e.g. by pressing ENTER) | | **true** | - | | If value is changed, fires **after** a cell has been edited and cell's value is **committed** | | **false** | - | | Fires when a cell **exits edit mode** | | **false** | - | | If `RowEditing` is enabled, fires just before a row in edit mode's value is **committed** (e.g. by clicking the `Done` button on the Row Editing Overlay) | | **true** | - | | If `RowEditing` is enabled, fires **after** a row has been edited and new row's value has been **committed**. | | **false** | - | | If `RowEditing` is enabled, fires when a row **exits edit mode** | | **false** | + | | If `RowEditing` is enabled, fires when a row enters edit mode | | **true** | + | | Fires when a cell **enters edit mode** (after ) | | **true** | + | | If value is changed, fires just **before** a cell's value is **committed** (e.g. by pressing ENTER) | | **true** | + | | If value is changed, fires **after** a cell has been edited and cell's value is **committed** | | **false** | + | | Fires when a cell **exits edit mode** | | **false** | + | | If `RowEditing` is enabled, fires just before a row in edit mode's value is **committed** (e.g. by clicking the `Done` button on the Row Editing Overlay) | | **true** | + | | If `RowEditing` is enabled, fires **after** a row has been edited and new row's value has been **committed**. | | **false** | + | | If `RowEditing` is enabled, fires when a row **exits edit mode** | | **false** | ### Event Cancellation diff --git a/docs/xplat/src/content/en/components/grids/_shared/export-excel.mdx b/docs/xplat/src/content/en/components/grids/_shared/export-excel.mdx index 8ec698aabf..6b0671090d 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/export-excel.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/export-excel.mdx @@ -123,7 +123,7 @@ To export grouped data, group the with defined [multi-column headers](multi-column-headers.md). All headers are reflected in the exported Excel file as they are displayed in the . If you want to exclude the defined multi-column headers from the exported data, set the `ExporterOption` to `true`. +You can export with defined [multi-column headers](multi-column-headers.md). All headers are reflected in the exported Excel file as they are displayed in the . If you want to exclude the defined multi-column headers from the exported data, set the `ExporterOption` to `true`. @@ -146,7 +146,7 @@ The exported wil ## Export Grid with Frozen Column Headers -By default, the Excel Exporter service exports the grid with scrollable (unfrozen) column headers. In many scenarios you may want to freeze all headers at the top of the exported Excel file so they always stay in view as the user scrolls through the records. To achieve this, set the `ExporterOption` to `true`. +By default, the Excel Exporter service exports the grid with scrollable (unfrozen) column headers. In many scenarios you may want to freeze all headers at the top of the exported Excel file so they always stay in view as the user scrolls through the records. To achieve this, set the `ExporterOption` to `true`. PDF exports automatically include the column header row at the top of the document, so readers retain the same context when they open or print the file. diff --git a/docs/xplat/src/content/en/components/grids/_shared/filtering.mdx b/docs/xplat/src/content/en/components/grids/_shared/filtering.mdx index 0a59b85147..eb90f25521 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/filtering.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/filtering.mdx @@ -322,7 +322,7 @@ this.grid.clearFilter(); ## Initial filtered state -To set the initial filtering state of the , set the property to an array of for each column to be filtered. +To set the initial filtering state of the , set the property to an array of for each column to be filtered. ```typescript @@ -1018,14 +1018,14 @@ Some browsers such as Firefox fail to parse regional specific decimal separators ### Breaking Changes in 6.1.0 -- `filteringExpressions` property is removed. Use instead. -- `filter_multiple` method is removed. Use `Filter` method and property instead. +- `filteringExpressions` property is removed. Use instead. +- `filter_multiple` method is removed. Use `Filter` method and property instead. - The `Filter` method has new signature. It now accepts the following parameters: - `Name` - the name of the column to be filtered. - `Value` - the value to be used for filtering. - - `ConditionOrExpressionTree` (optional) - this parameter accepts object of type `FilteringOperation` or . If only simple filtering is needed, a filtering operation could be passed as an argument. In case of advanced filtering, an expressions tree containing complex filtering logic could be passed as an argument. + - `ConditionOrExpressionTree` (optional) - this parameter accepts object of type `FilteringOperation` or . If only simple filtering is needed, a filtering operation could be passed as an argument. In case of advanced filtering, an expressions tree containing complex filtering logic could be passed as an argument. - `IgnoreCase` (optional) - whether the filtering is case sensitive or not. -- `FilteringDone` event now have only one parameter of type which contains the filtering state of the filtered column. +- `FilteringDone` event now have only one parameter of type which contains the filtering state of the filtered column. - filtering operands: `FilteringExpression` condition property is no longer a direct reference to a filtering condition method, instead it's a reference to an `FilteringOperation`. - `ColumnComponent` now exposes a `Filters` property, which takes an `FilteringOperand` class reference. - Custom filters can be provided to the {ComponentTitle} columns by populating the `Operations` property of the `FilteringOperand` with operations of `FilteringOperation` type. diff --git a/docs/xplat/src/content/en/components/grids/_shared/keyboard-navigation.mdx b/docs/xplat/src/content/en/components/grids/_shared/keyboard-navigation.mdx index 78cafc127c..47c9619365 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/keyboard-navigation.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/keyboard-navigation.mdx @@ -143,15 +143,15 @@ Overriding the default behavior for a certain key or keys combination is one of | API | Description | Arguments | |---------|-------------|-----------| -| | An event that is emitted when any of key press/combinations described above is performed. Can be canceled. For any other key press/combination, use the default `onkeydown` event. | | -| | An event that is emitted when the active node is changed. You can use it to determine the Active focus position (header, tbody etc.), column index, row index or nested level. | | +| | An event that is emitted when any of key press/combinations described above is performed. Can be canceled. For any other key press/combination, use the default `onkeydown` event. | | +| | An event that is emitted when the active node is changed. You can use it to determine the Active focus position (header, tbody etc.), column index, row index or nested level. | | | API | Description | Arguments | |---------|-------------|-----------| -| | An event that is emitted when any of key press/combinations described above is performed. Can be canceled. For any other key press/combination, use the default `onkeydown` event. | | -| | An event that is emitted when the active node is changed. You can use it to determine the Active focus position (header, tbody etc.), column index, row index or nested level. | | +| | An event that is emitted when any of key press/combinations described above is performed. Can be canceled. For any other key press/combination, use the default `onkeydown` event. | | +| | An event that is emitted when the active node is changed. You can use it to determine the Active focus position (header, tbody etc.), column index, row index or nested level. | | | `NavigateTo` | Navigates to a position in the grid, based on provided `Rowindex` and `VisibleColumnIndex`. It can also execute a custom logic over the target element, through a callback function that accepts param of type ```{ targetType: GridKeydownTargetType, target: Object }``` . Usage:
```grid.navigateTo(10, 3, (args) => { args.target.nativeElement.focus(); });``` | ```RowIndex: number, VisibleColumnIndex: number, callback: ({ targetType: GridKeydownTargetType, target: Object }```) => {} | | `GetNextCell`| returns `ICellPosition` object, which defines the next cell by `RowIndex` and `VisibleColumnIndex`. A callback function can be passed as a third parameter of `GetNextCell` method. The callback function accepts `Column` as a param and returns a `boolean` value indication if a given criteria is met:
```const nextEditableCell = grid.getNextCell(0, 4, (col) => col.editable);``` | ```currentRowIndex: number, currentVisibleColumnIndex: number, callback: (Column) => boolean``` | | `GetPreviousCell` | returns `ICellPosition` object, which defines the previous cell by `RowIndex` and `VisibleColumnIndex`. A callback function can be passed as a third parameter of `GetPreviousCell` method. The callback function accepts `Column` as a param and returns a `boolean` value indication if a given criteria is met:
```const prevEditableCell = grid.getPreviousCell(0, 4, (col) => col.editable);``` | ``` CurrentRowIndex: number, CurrentVisibleColumnIndex: number, callback: (Column) => boolean ``` | diff --git a/docs/xplat/src/content/en/components/grids/_shared/remote-data-operations.mdx b/docs/xplat/src/content/en/components/grids/_shared/remote-data-operations.mdx index e2aa00f5e9..af6d87353e 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/remote-data-operations.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/remote-data-operations.mdx @@ -73,7 +73,7 @@ BLAZOR CODE SNIPPET HERE ``` -When requesting data, you need to utilize the interface, which provides the and properties. +When requesting data, you need to utilize the interface, which provides the and properties. The first will always be 0 and should be determined by you based on the specific application scenario. @@ -98,7 +98,7 @@ The first . -To implement infinite scroll, you have to fetch the data in chunks. The data that is already fetched should be stored locally and you have to determine the length of a chunk and how many chunks there are. You also have to keep a track of the last visible data row index in the grid. In this way, using the and properties, you can determine if the user scrolls up and you have to show them already fetched data or scrolls down and you have to fetch more data from the end-point. +To implement infinite scroll, you have to fetch the data in chunks. The data that is already fetched should be stored locally and you have to determine the length of a chunk and how many chunks there are. You also have to keep a track of the last visible data row index in the grid. In this way, using the and properties, you can determine if the user scrolls up and you have to show them already fetched data or scrolls down and you have to fetch more data from the end-point. diff --git a/docs/xplat/src/content/en/components/grids/_shared/row-adding.mdx b/docs/xplat/src/content/en/components/grids/_shared/row-adding.mdx index f932ace8d1..d2160f2364 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/row-adding.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/row-adding.mdx @@ -382,13 +382,13 @@ Then define a wi > **Note**: -> The input controlling the visibility of the add row button may use the action strip context (which is of type to fine tune which records the button shows for. +> The input controlling the visibility of the add row button may use the action strip context (which is of type to fine tune which records the button shows for. > **Note**: -> The inputs controlling the visibility of the add row and add child buttons may use the action strip context (which is of type to fine tune which records the buttons show for. +> The inputs controlling the visibility of the add row and add child buttons may use the action strip context (which is of type to fine tune which records the buttons show for. @@ -532,7 +532,7 @@ After a new row is added through the row adding UI, its position and/or visibili ### Customizing Text -Customizing the text of the row adding overlay is possible using the . +Customizing the text of the row adding overlay is possible using the . diff --git a/docs/xplat/src/content/en/components/grids/_shared/row-editing.mdx b/docs/xplat/src/content/en/components/grids/_shared/row-editing.mdx index d2c6f01da4..fd6ada9439 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/row-editing.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/row-editing.mdx @@ -447,7 +447,7 @@ export class {ComponentName}RowEditSampleComponent { -The `{ComponentName}` utilizes - an internal provider that holds pending cell changes until the row state is either submitted or cancelled. +The `{ComponentName}` utilizes `BaseTransactionService` - an internal provider that holds pending cell changes until the row state is either submitted or cancelled. ## Positioning diff --git a/docs/xplat/src/content/en/components/grids/_shared/row-pinning.mdx b/docs/xplat/src/content/en/components/grids/_shared/row-pinning.mdx index fe449e5429..96115ebf31 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/row-pinning.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/row-pinning.mdx @@ -96,7 +96,7 @@ The built-in row pinning UI is enabled by adding an input of the `Row`. Pinned rows are rendered at the top of the by default and stay fixed through vertical scrolling of the unpinned rows in the body. +Row pinning is controlled through the input of the `Row`. Pinned rows are rendered at the top of the by default and stay fixed through vertical scrolling of the unpinned rows in the body. ```typescript @@ -142,7 +142,7 @@ this.Grid.UnpinRowAsync("ALFKI"); Note that the row ID is the primary key value, defined by the of the grid, or the record instance itself. Both methods return a boolean value indicating whether their respective operation is successful or not. Usually the reason they fail is that the row is already in the desired state. -A row is pinned below the last pinned row. Changing the order of the pinned rows can be done by subscribing to the event and changing the property of the event arguments to the desired position index. +A row is pinned below the last pinned row. Changing the order of the pinned rows can be done by subscribing to the event and changing the property of the event arguments to the desired position index. ```html @@ -700,8 +700,8 @@ The sample will not be affected by the selected global theme from **Change Theme ## API References
-
-
+
+
## Additional Resources diff --git a/docs/xplat/src/content/en/components/grids/_shared/row-selection.mdx b/docs/xplat/src/content/en/components/grids/_shared/row-selection.mdx index 75566fa94a..d0f01f6721 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/row-selection.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/row-selection.mdx @@ -37,9 +37,9 @@ The sample below demonstrates the three types of , you just need to set the property. This property accepts values. +In order to setup row selection in the , you just need to set the property. This property accepts values. - exposes the following modes: + exposes the following modes: - **None** - **Single** @@ -857,10 +857,10 @@ This demo prevents some rows from being selected using the
-
-
-
-
+
+
+
+
## Additional Resources diff --git a/docs/xplat/src/content/en/components/grids/_shared/search.mdx b/docs/xplat/src/content/en/components/grids/_shared/search.mdx index 34b871f76b..f396d575c0 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/search.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/search.mdx @@ -257,8 +257,8 @@ Now let's create our search input! By binding our `searchText` to the `value` pr Both the `FindNext` and the `FindPrev` methods have three arguments: - `Text`: **string** (the text we are searching for) -- (optional) : **boolean** (should the search be case sensitive or not, default value is false) -- (optional) : **boolean** (should the search be by an exact match or not, default value is false) +- (optional) : **boolean** (should the search be case sensitive or not, default value is false) +- (optional) : **boolean** (should the search be by an exact match or not, default value is false) When searching by an exact match, the search API will highlight as results only the cell values that match entirely the by taking the case sensitivity into account as well. For example the strings '_software_' and '_Software_' are an exact match with a disregard for the case sensitivity. @@ -1128,7 +1128,7 @@ public showResults() { -- For displaying a couple of chips that toggle the and the properties. We have replaced the checkboxes with two stylish chips. Whenever a chip is clicked, we invoke its respective handler. +- For displaying a couple of chips that toggle the and the properties. We have replaced the checkboxes with two stylish chips. Whenever a chip is clicked, we invoke its respective handler. ```html diff --git a/docs/xplat/src/content/en/components/grids/_shared/sorting.mdx b/docs/xplat/src/content/en/components/grids/_shared/sorting.mdx index ab22ffd112..301e084f6b 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/sorting.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/sorting.mdx @@ -284,7 +284,7 @@ hierarchicalGridRef.current.sort([ -Sorting is performed using our algorithm. Any `Column` or `ISortingExpression` can use a custom implementation of the as a substitute algorithm. This is useful when custom sorting needs to be defined for complex template columns, or image columns, for example. +Sorting is performed using our algorithm. Any `Column` or `ISortingExpression` can use a custom implementation of the as a substitute algorithm. This is useful when custom sorting needs to be defined for complex template columns, or image columns, for example. As with the filtering behavior, you can clear the sorting state by using the method: @@ -921,7 +921,7 @@ Then set the related CSS properties to this class: ## API References
-
+
## Additional Resources diff --git a/docs/xplat/src/content/en/components/grids/_shared/state-persistence.mdx b/docs/xplat/src/content/en/components/grids/_shared/state-persistence.mdx index d5779c7f62..1454eddecc 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/state-persistence.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/state-persistence.mdx @@ -45,7 +45,7 @@ The {ProductName} State Persistence in {Platform} {ComponentTitle} allows develo - **Columns** - Multi column headers - Columns order - - Column properties defined by the interface. + - Column properties defined by the interface. @@ -64,7 +64,7 @@ The {ProductName} State Persistence in {Platform} {ComponentTitle} allows develo - **Columns** - Multi column headers - Columns order - - Column properties defined by the interface. + - Column properties defined by the interface. @@ -87,8 +87,8 @@ The {ProductName} State Persistence in {Platform} {ComponentTitle} allows develo - - - `Expansion` -- - - Pivot Configuration properties defined by the interface. +- + - Pivot Configuration properties defined by the interface. - Pivot Dimension and Value functions are restored using application level code, see [Restoring Pivot Configuration](state-persistence.md#restoring-pivot-configuration) section. @@ -1194,9 +1194,9 @@ state.applyState(gridState.columnSelection);

-
-
-
+
+
+
## Additional Resources diff --git a/docs/xplat/src/content/en/components/grids/_shared/summaries.mdx b/docs/xplat/src/content/en/components/grids/_shared/summaries.mdx index 2399ad08d2..b9f16cf5f0 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/summaries.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/summaries.mdx @@ -634,9 +634,9 @@ class PtoSummary { -As seen in the examples, the base classes expose the method, so you can choose to get all default summaries and modify the result, or calculate entirely new summary results. +As seen in the examples, the base classes expose the `Operate` method, so you can choose to get all default summaries and modify the result, or calculate entirely new summary results. -The method returns a list of . +The method returns a list of . ```typescript @@ -665,9 +665,11 @@ See [Custom summaries, which access all data](#custom-summaries-which-access-all In order to calculate the summary row height properly, the {ComponentTitle} needs the `Operate` method to always return an array of `SummaryResult` with the proper length even when the data is empty. + -In order to calculate the summary row height properly, the {ComponentTitle} needs the method to always return an array of with the proper length even when the data is empty. +In order to calculate the summary row height properly, the {ComponentTitle} needs the method to always return an array of with the proper length even when the data is empty. + And now let's add our custom summary to the column `UnitsInStock`. We will achieve that by setting the Summaries` property to the class we create below. @@ -865,7 +867,7 @@ igRegisterScript("WebTreeGridCustomSummary", (event) => { ### Custom summaries, which access all data - Now you can access all {ComponentTitle} data inside the custom column summary. Two additional optional parameters are introduced in the method. + Now you can access all {ComponentTitle} data inside the custom column summary. Two additional optional parameters are introduced in the `SummaryOperand` `Operate` method. As you can see in the code snippet below the operate method has the following three parameters: - columnData - gives you an array that contains the values only for the current column - allGridData - gives you the whole grid data source @@ -1282,14 +1284,14 @@ When you have grouped by columns, the property are: -- - Summaries are calculated only for the root level. -- - Summaries are calculated only for the child levels. -- - Summaries are calculated for both root and child levels. This is the default value. +- - Summaries are calculated only for the root level. +- - Summaries are calculated only for the child levels. +- - Summaries are calculated for both root and child levels. This is the default value. The available values of the property are: -- - The summary row appears before the group by row children. -- - The summary row appears after the group by row children. This is the default value. +- - The summary row appears before the group by row children. +- - The summary row appears after the group by row children. This is the default value. The property is boolean. Its default value is set to **false**, which means that the summary row would be hidden when the group row is collapsed. If the property is set to **true** the summary row stays visible when group row is collapsed. @@ -1313,14 +1315,14 @@ The supports sep The available values of the property are: -- - Summaries are calculated only for the root level nodes. -- - Summaries are calculated only for the child levels. -- - Summaries are calculated for both root and child levels. This is the default value. +- - Summaries are calculated only for the root level nodes. +- - Summaries are calculated only for the child levels. +- - Summaries are calculated for both root and child levels. This is the default value. The available values of the property are: -- - The summary row appears before the list of child rows. -- - The summary row appears after the list of child rows. This is the default value. +- - The summary row appears before the list of child rows. +- - The summary row appears after the list of child rows. This is the default value. The property is boolean. Its default value is set to **false**, which means that the summary row would be hidden when the parent row is collapsed. If the property is set to **true** the summary row stays visible when parent row is collapsed. @@ -1557,9 +1559,11 @@ Don't forget to include the themes in the same way as it was demonstrated above.

+


+ ## Additional Resources diff --git a/docs/xplat/src/content/en/components/grids/_shared/validation.mdx b/docs/xplat/src/content/en/components/grids/_shared/validation.mdx index f47f0c2be0..436b19e99e 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/validation.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/validation.mdx @@ -51,7 +51,7 @@ The following sample demonstrates how to use the prebuilt `Required`, `Email` an ### Configure via Reactive Forms -We expose the that will be used for validation when editing starts on a row/cell via a event. You can modify it by adding your own validators for the related fields: +We expose the that will be used for validation when editing starts on a row/cell via a event. You can modify it by adding your own validators for the related fields: ```html @@ -117,7 +117,7 @@ Invalid states will persis until the validation errors in them are fixed accordi Validation will be triggered in the following scenarios: -- While editing via the cell editor based on the grid's . Either on `Change` while typing in the editor, or on `Blur` when the editor loses focus or closes. +- While editing via the cell editor based on the grid's . Either on `Change` while typing in the editor, or on `Blur` when the editor loses focus or closes. - When updating cells/rows via the API - , , etc. - When using batch editing and the `Undo`/`Redo` API of the transaction service. @@ -202,7 +202,7 @@ The below example demonstrates the above-mentioned customization options. In some scenarios validation of one field may depend on the value of another field in the record. -In that case a custom validator can be used to compare the values in the record via their shared . +In that case a custom validator can be used to compare the values in the record via their shared . The below sample demonstrates a cross-field validation between different field of the same record. It checks the dates validity compared to the current date and between the active and created on date of the record as well as the deals won/lost ration for each employee. All errors are collected in a separate pinned column that shows that the record is invalid and displays the related errors. @@ -257,7 +257,7 @@ public calculateDealsRatio(dealsWon, dealsLost) { ``` -The cross-field validator can be added to the of the row from `FormGroupCreated` event, which returns the new for each row when entering edit mode: +The cross-field validator can be added to the of the row from `FormGroupCreated` event, which returns the new for each row when entering edit mode: ```html @@ -457,7 +457,7 @@ private rowValidator(): ValidatorFn { } ``` -The cross-field validator can be added to the of the row from `FormGroupCreated` event, which returns the new for each row when entering edit mode: +The cross-field validator can be added to the of the row from `FormGroupCreated` event, which returns the new for each row when entering edit mode: ```html -Make sure to check the API for the in order to get accustomed with the provided properties you can use in your templates. +Make sure to check the API for the in order to get accustomed with the provided properties you can use in your templates. ### Column Template API @@ -1932,7 +1932,7 @@ And the result from this configuration is: ### Working with Flat Data Overview -The flat data binding approach is similar to the one that we already described above, but instead of **cell value** we are going to use the property of the . +The flat data binding approach is similar to the one that we already described above, but instead of **cell value** we are going to use the property of the . Since the {Platform} grid is a component for **rendering**, **manipulating** and **preserving** data records, having access to **every data record** gives you the opportunity to customize the approach of handling it. The `data` property provides you this opportunity. @@ -2437,14 +2437,14 @@ To facilitate your work, apply the comment in the `src/styles.scss` file.

-
+


-
-
-
-
+
+
+
+
## Theming Dependencies diff --git a/docs/xplat/src/content/en/components/grids/data-grid/accessibility.mdx b/docs/xplat/src/content/en/components/grids/data-grid/accessibility.mdx deleted file mode 100644 index 1ebf9facc2..0000000000 --- a/docs/xplat/src/content/en/components/grids/data-grid/accessibility.mdx +++ /dev/null @@ -1,160 +0,0 @@ ---- -title: "{Platform} Data Grid | Real-Time Data Grid and Tables | Accessibility Compliance | Infragistics" -description: Use Infragistics' {ProductName} Data Table & Grid to support accessibility feature that will enable screen readers to read "speak" keyboard navigation interactions through the cells and columns of the grid. View {ProductName} table tutorials! -keywords: "{Platform} Table, Data Grid, cell accessibility, {ProductName}, Infragistics" -mentionedTypes: ["Grid", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: "{CanonicalLinkToGridMain}" ---- -import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; -import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; -import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; -import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - - - - - - - -Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md) component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - - - - - -# {Platform} Grid Accessibility Compliance - -The {ProductName} Data Table / Data Grid supports accessibility and screen readers that interpret keyboard navigation interactions through the cells and columns of the grid. - - - - - -This is activated by setting the property of the grid to **true**. - - - - - - - - -This is activated by setting `--use-accessibility` property to **true** explicitly in CSS, preferably using a div tag around the grid. - - - - -## {Platform} Grid Accessible Example - - - - - - - -
- -## Section 508 Compliance -Section 508 of the Rehabilitation Act was amended in 1998 by Congress to require all Federal agencies to make their electronic and information technology accessible to people with disabilities. Since then, Section 508 compliance has not only been a requirement in government agencies, but it's also important when providing software solutions and designing Web pages. - -Section 1194.22 of the Section 508 law specifically targets Web-based intranet and internet information and systems, and contains a set of 16 rules to follow. In order to enable you to keep your Web applications and Web sites compatible with these rules with minimal effort on your part, Infragistics has taken steps to ensure that the Ignite UI for Angular controls and components are compliant with the relevant accessibility rules. - -## WAI-ARIA Support -In 2014 the W3C finalized their WAI-ARIA specification which defined how to design Web content and Web applications to be more accessible to users with disabilities. - -This section shows the accessibility (ARIA) support of the framework as well as how easily manageable the directionality of the components is. - -ARIA Attributes -In order to give screen readers the contextual information they require to interpret and interact with the grid, ARIA attributes are added to the grid DOM elements. These attributes are particularity useful when plain HTML elements such div and span are used to create complex DOM structures, which is the case with ag-Grid. - -When inspecting the grid's DOM elements the following roles and properties are supported and announced by the screen reader: - -- Grid Cell - element containing a grid cell. -- Row Count - announces the number of rows. -- Column Count - announces the number of rows. -- Row - a row of column headers or grid cells. -- Row Index - announces the visible index of the row. -- Row Selected - only present if the row is selectable, it announces the selection state. -- Group Expanded - only present in row groups, it announces the expand state. -- Column Header - element containing a column header. -- Cell Index - announces the visible index of the column. -- Colspan - only present if the column spans across multiple columns, it helps guide screen readers. -- Sort - only present in sortable columns, it announces the sort state. -- Column Index - announces the visible index of the cell. -- Selected - only present if the cell is selectable, it announces the selection state. -- Expanded - only present in a group cell, it announces the expand state. - -## Keyboard Navigation - -After setting the property to **true**, this will enable a range of keyboard navigation options in the data grid that screen readers can recognize. Below is a description of each of the key presses / combinations and the effect they will have relative to the currently activated cell: - -Navigating within the Grid - -- CTRL + ALT + →: Navigate one cell up. -- CTRL + ALT + ←: Navigate one cell left. -- CTRL + ALT + ↓: Navigate one cell below. -- CTRL + ALT + ↑: Navigate one cell above. -- CTRL + ALT + HOME: Navigate to first column header. -- CTRL + ALT + END: Navigate to last visible cell. -- CTRL + ALT + SHIFT + ↑ Navigate to current column header. -- CTRL + ALT + SHIFT + ↓ Navigate to last cell in current column. -- CTRL + ALT + SHIFT + ← Navigate to first cell in current row. -- CTRL + ALT + SHIFT + → Navigate to last cell in current row. - -Screen Reader Commands - -- CTRL OR ALT + Num Pad 5: Read current cell. -- INSERT + SHIFT + ↑: Read current row. -- INSERT + SHIFT + HOME: Read from start of row. -- INSERT + SHIFT + PAGE UP: Read to end of row from current cell. -- INSERT + SHIFT + Num Pad 5: Read current column. -- INSERT + SHIFT + END: Read from top of column. -- INSERT + SHIFT + PAGE DOWN: Read to bottom of column. - -## Code Snippet - -The following demonstrates how to implement cell accessibility in the {Platform} data grid: - - - -```tsx - -``` - - - - - -```html - - -``` - - - - - -```razor -
- - @if (DataSource != null) - { - - } -
-``` - - - - -## API References - -
diff --git a/docs/xplat/src/content/en/components/grids/data-grid/cell-activation.mdx b/docs/xplat/src/content/en/components/grids/data-grid/cell-activation.mdx deleted file mode 100644 index 1cdc8c134a..0000000000 --- a/docs/xplat/src/content/en/components/grids/data-grid/cell-activation.mdx +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: "{Platform} Data Grid | Real-Time Data Grid and Tables | Activation | Infragistics" -description: Use Infragistics' {ProductName} Data Table & Grid to support the cell activation feature that will enable keyboard navigation through the cells of the grid. View {ProductName} table tutorials! -keywords: "{Platform} Table, Data Grid, cell activation, {ProductName}, Infragistics" -mentionedTypes: ["Grid", "GridActivationMode"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: "{CanonicalLinkToGridMain}" ---- -import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; -import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; -import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; -import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - - - - - - - -Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md) component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - - - - - -# {Platform} Grid Cell Activation - -The {ProductName} Data Table / Data Grid supports a cell activation feature that will enable keyboard navigation through the cells of the grid. This is activated by setting the property of the grid to `Cell`. - -## {Platform} Grid Cell Activation Example - - - - - - - -
- -## Excel Style Navigation - - property will configure the grid to navigate to the next cell up, down, left or right after the enter key is pressed in edit mode. Otherwise, the property of the grid can be used to navigate to other cells, while not in edit mode, up, down, left or right. - -## Keyboard Navigation - -After setting the property of the grid to `Cell`, this will enable a range of keyboard navigation options in the data grid. Below is a description of each of the key presses / combinations and the effect they will have relative to the currently activated cell: - -- ↑: Navigate one cell up. -- ↓: Navigate one cell down. -- ←: Navigate one cell to the left on the current row only. -- →: Navigate one cell to the right on the current row only. -- PAGE UP: Scroll the grid one viewport page up. -- PAGE DOWN: Scroll the grid one viewport page down. -- TAB: Move the active cell to the next cell to the right, or the left-most cell of the next row if the last cell of that row is reached. -- SHIFT + TAB: Move the active cell to the next cell to the left, or the right-most cell of the previous row if the first cell of that row is reached. -- CTRL + ↑: Move to the top cell in the column. -- CTRL + ↓: Move to the bottom cell in the column. -- CTRL + ←: Move to the left-most cell in the row. -- CTRL + →: Move to the right-most cell in the row. -- CTRL + HOME: Move to the top-left cell in the grid. -- CTRL + END: Move to the bottom-right cell in the grid. - - -## API References - -
diff --git a/docs/xplat/src/content/en/components/grids/data-grid/cell-editing.mdx b/docs/xplat/src/content/en/components/grids/data-grid/cell-editing.mdx deleted file mode 100644 index 6e8f5a8b54..0000000000 --- a/docs/xplat/src/content/en/components/grids/data-grid/cell-editing.mdx +++ /dev/null @@ -1,400 +0,0 @@ ---- -title: "{Platform} Data Grid | Cell and Row Editing with Batch Updating | Infragistics" -description: Use Infragistics' {Platform} grid component which supports the cell and row editing feature that can also be configured to batch update all cells of the grid at any given moment. Learn how {ProductName} can help you better display your data! -keywords: "{Platform} Table, Data Grid, cell and row editing, {ProductName}, batch updating, Infragistics" -mentionedTypes: ["Grid", "EditModeType", "TransactionType"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: "{CanonicalLinkToGridCellEditing}" ---- -import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; -import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; -import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; -import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - - - - - - - -Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md) component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - - - - - -# {Platform} Grid Editing - -The {ProductName} Data Table / Data Grid supports cell and row editing with batch updating. Note, this is currently limited to non-templated columns. - -## {Platform} Grid Editing Example - - - - - - - -
- -## Overview - -Editing in the {Platform} data grid is configured by using the option of the {Platform} grid. This property takes three different options, listed below: - -- `None`: Editing is not enabled. -- `Cell`: Allow cells to enter edit mode and commit the value on exiting edit mode. -- `CellBatch`: Allows cells to enter edit mode but changes will be cached later until they are committed. -- `Row`: Allow rows to enter edit mode and commit the value on exit. - -When set to `CellBatch`, in order to commit the changes you must perform the `commitEdits` method from the grid. The grid will italicize the cells until they are committed providing control over when to push changes back to the datasource. - -In addition, error handling can be performed by hooking the `onCellValueChanging` event and inspecting new values before they are committed. The grid exposes a `setEditError` method that can output an error message. This keeps the cell in edit mode until a valid value is entered. Otherwise the grid's `rejectEdit` method can be performed to revert the invalid value. If no invalid value is found, you can also commit your changes by calling the grid's `acceptEdit` method. - -Commits can be approved or declined at the grid level by hooking `onDataCommitting` via the `acceptCommit` or `rejectCommit` methods passing the `commitID` event argument as the parameter. This event also exposes a `changes` collection which stores all the modifications prior to being committed. For example, you can check if a commit was from an add, update, or delete operation via the property exposed on the `changes` collection and perform an `acceptCommit` or `rejectCommit` when necessary. - -## Excel Style Editing - - enables you to instantly begin editing when typing similar to how Excel behaves. In addition you may set the property to `SingleClick` to allow users to quickly edit cells while navigating to other cells. By default double-clicking is required to enter edit mode. - -## Code Snippet - -The following demonstrates how to configure editing on the data grid and committing the data. - - - -```tsx - - - -``` - - - - - -```ts -import { IgrDataGrid } from 'igniteui-react-data-grids'; - -onCommitClick = () => { - this._grid.commitEdits(); -} -``` - - - - - -```html - - - -``` - - - - - -```ts -import { IgcDataGridComponent } from 'igniteui-webcomponents-data-grids'; - -this.onCommitClick = this.onCommitClick.bind(this); - -public onCommitClick() { - this.grid.commitEdits(); -} -``` - - - - - -```razor - - - -@code { - public IgbDataGrid DataGridRef; - - private void OnCommitClick(MouseEventArgs e) - { - this.DataGridRef.CommitEdits(); - } -} -``` - - - -## Undo/Redo batch changes - -The following demonstrates how to revert changes while batch updating is enabled. - - - -```tsx - - - - -``` - - - - - -```ts -import { IgrDataGrid } from 'igniteui-react-data-grids'; - -onUndoClick = () => { - this._grid.undo(); - - // request a new render so the undo/redo buttons update. - this.setState({ }); -} - -onRedoClick = () => { - this._grid.redo(); - - // request a new render so the undo/redo buttons update. - this.setState({ }); -} -``` - - - - - -```html - - - - -``` - - - - - -```ts -import { IgcDataGridComponent } from 'igniteui-webcomponents-data-grids'; - -public onUndoClick() { - this.grid.undo(); - if (this.grid.editMode === EditModeType.CellBatch && this.redo !== null) - { - this.redo.disabled = false; - } -} - -public onRedoClick() { - this.grid.redo(); -} -``` - - - - - -```razor - - - - -@code { - public IgbDataGrid DataGridRef; - - private void OnUndoClick(MouseEventArgs e) - { - this.DataGridRef.Undo(); - } - - private void OnRedoClick(MouseEventArgs e) - { - this.DataGridRef.Redo(); - } -} -``` - - - -## Error Validation and Commit Integrity - -The following demonstrates how incorporate error by checking if cells are empty when leaving edit mode and accepts commits that are from updated cells only. - - - -```tsx - - -``` - - - - - -```html - -``` - - - - - -```ts -import { IgrGridDataCommittingEventArgs } from 'igniteui-react-data-grids'; -import { TransactionType } from 'igniteui-react-core' - -onCellValueChanging = (s: IgrDataGrid, e: IgrGridCellValueChangingEventArgs) => { - //check if value is empty upon exiting edit mode. - if (e.newValue === "") { - s.setEditError(e.editID, "Error, cell is empty"); - //or revert changes - s.rejectEdit(e.editID); - } - else { - s.acceptEdit(e.editID); - } -} - -onDataCommitting = (s: IgrDataGrid, e: IgrGridDataCommittingEventArgs) => { - - if (e.changes[0].transactionType === TransactionType.Update) { - //commit was passed - s.acceptCommit(e.commitID); - } - else{ - //commit was prevented - s.rejectCommit(e.commitID); - } -} -``` - - - - - -```ts -import { IgcGridDataCommittingEventArgs } from 'igniteui-webcomponents-data-grids'; -import { TransactionType } from 'igniteui-webcomponents-core' - -this.onCellValueChanging = this.onCellValueChanging.bind(this); -this.grid.cellValueChanging = this.onCellValueChanging; - -this.onDataCommitting = this.onDataCommitting.bind(this); -this.grid.dataCommitting = this.onDataCommitting; - - -public onCellValueChanging (s: IgcDataGridComponent, e: IgcGridCellValueChangingEventArgs) { - if (s.editMode === EditModeType.CellBatch && this.undo !== null) - { - this.undo.disabled = false; - } - - //check if value is empty upon exiting edit mode. - if (e.newValue === "") { - s.setEditError(e.editID, "Error, cell is empty"); - //or revert changes - s.rejectEdit(e.editID); - } - else { - s.acceptEdit(e.editID); - } -} - -public onDataCommitting (s: IgcDataGridComponent, e: IgcGridDataCommittingEventArgs) { - if (e.changes[0].transactionType === TransactionType.Update) { - //commit was passed - s.acceptCommit(e.commitID); - } - else{ - //commit was prevented - s.rejectCommit(e.commitID); - } -} -``` - - - - - -```razor - - - -@code { - public IgbDataGrid DataGridRef; - - public void OnCellValueChanging(IgbGridCellValueChangingEventArgs e) - { - //check if value is empty upon exiting edit mode. - if (e.NewValue == "") - { - this.DataGridRef.SetEditError(e.EditID, "Error, cell is empty"); - //or revert changes - this.DataGridRef.RejectEdit(e.EditID); - } - else - { - this.DataGridRef.AcceptEdit(e.EditID); - } - } - - public void OnDataCommitting(IgbGridDataCommittingEventArgs e) - { - if (e.Changes[0].TransactionType == TransactionType.Update) - { - //commit was passed - this.DataGridRef.AcceptCommit(e.CommitID); - } - else - { - //commit was prevented - this.DataGridRef.RejectCommit(e.CommitID); - } - } -} -``` - - - - -## API References - -
diff --git a/docs/xplat/src/content/en/components/grids/data-grid/cell-merging.mdx b/docs/xplat/src/content/en/components/grids/data-grid/cell-merging.mdx deleted file mode 100644 index c53203591a..0000000000 --- a/docs/xplat/src/content/en/components/grids/data-grid/cell-merging.mdx +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: "{Platform} Data Grid | Cell Merging | Merging | Infragistics" -description: Use the cell merging feature of the Infragistics' {Platform} data grid to join cells with duplicate values. -keywords: "{Platform} Table, Data Grid, cell merging, {ProductName}, Infragistics" -mentionedTypes: ["Grid", "MergedCellMode", "MergedCellEvaluationCriteria"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: "{CanonicalLinkToGridMain}" ---- -import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; -import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; -import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; -import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - - - - - - - -Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md) component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - - - - - -# {Platform} Grid Cell Merging - -The {ProductName} Data Table / Data Grid supports cell merging. You may opt-in and detect when adjacent sibling records for a specific column contains the same value. While the cells are not active, selected, or in edit mode, the value displays across the cells. - -## {Platform} Grid Cell Merging Example - - - - - - -
- -## Overview - -Cell Merging in the {Platform} data grid can be configured by using the option of the entire {Platform} grid or individual columns. This property can be set to one of the following options, listed below: - -- `Never`: The grid or column will never merge cells. This is the default behavior. -- `Always`: The grid or column will always attempt to merge cells. -- `OnlyWhenSorted`: The grid or column will only attempt to merge cells when a column is sorted. - -Note, regardless of the value of this property, cells can only be merged across sibling records. - -Cell merging can be evaluated based on whether the data is formatted or not using the property. This is applicable to the entire grid or individual columns and can be set to one of the following options, listed below: - -- `RawValue`: Merge cells from adjacent rows when the raw values from the cells are the same. This is the default value. -- `FormattedText`: Merge cells from adjacent rows when the formatted value from the cells is the same. - -
- - -## API References - -
diff --git a/docs/xplat/src/content/en/components/grids/data-grid/cell-selection.mdx b/docs/xplat/src/content/en/components/grids/data-grid/cell-selection.mdx deleted file mode 100644 index 8902a3986d..0000000000 --- a/docs/xplat/src/content/en/components/grids/data-grid/cell-selection.mdx +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: "{Platform} Data Grid | Cell Selection | Selection | Infragistics" -description: Use cell and row selection of the Infragistics' {Platform} data grid to highlight areas of the table. Learn how to configure single or multiple row selection for the {ProductName} table. -keywords: "{Platform} Table, Data Grid, cell selection, {ProductName}, Infragistics" -mentionedTypes: ["Grid", "DataGridSelectionMode"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: "{CanonicalLinkToGridCellSelection}" ---- -import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; -import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; -import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; -import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - - - - - - - -Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md) component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - - - - - -# {Platform} Grid Selection - -The {ProductName} Data Table / Data Grid supports single or multiple row and cell selection. - -## {Platform} Grid Selection Example - - - - - - - -
- -## Overview - -Selection in the {Platform} data grid is enabled on a row and cell level and can be configured by using the option of the {Platform} grid. This property takes five different options, listed below: - -- `None`: Selection is not enabled. -- `SingleCell`: Selection of a single cell is enabled. -- `SingleRow`: Selection of a single row is enabled. -- `MultipleCell`: Selection of multiple cells is enabled. -- `MultipleRow`: Selection of multiple rows is enabled. -- `RangeCell`: Selection of a range of multiple cells by clicking and dragging is enabled. - - defaults to `ModifierBased`, where only one row or cell is selected at a time and modifier keys (CTRL) are required to multi-select items. `SelectionBehavior` set to `Toggle` will allow multiple rows or cells to be selected on single click only. - -`MultipleRow` includes the following functionality: -- Click and drag to select rows -- SHIFT and click to select multiple rows. -- SHIFT and press the ↑ + ↓ arrow keys to select multiple rows. - -Pressing the space bar toggles selection of active row via `MultipleRow` or `SingleRow`. - -## Row Range Selection - -The following example demonstrates how to selected or deselected all rows in the grid. Note, must be set to MultipleRow. - - - - - - -
- - -## API References - -
diff --git a/docs/xplat/src/content/en/components/grids/data-grid/column-animation.mdx b/docs/xplat/src/content/en/components/grids/data-grid/column-animation.mdx deleted file mode 100644 index c0c8f475a3..0000000000 --- a/docs/xplat/src/content/en/components/grids/data-grid/column-animation.mdx +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: "{Platform} Data Grid | Column Animations | Infragistics" -description: Learn how to display column animations through events when moving or hiding columns with Infragistics' {ProductName} data table & grid. Check out {ProductName} table tutorials! -keywords: "{Platform} Table, Data Grid, column animations, {ProductName}, Infragistics" -mentionedTypes: ["Grid", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: "{CanonicalLinkToGridMain}" ---- -import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; -import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; -import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; -import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - - - - - - - -Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md) component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - - - - - -# {Platform} Grid Column Animations - -The {ProductName} Data Table / Data Grid supports Column Animation during events like Column Hiding or Column Moving. When Column Animation on the {Platform} data grid is set, the corresponding animation will fire for all of the cells in that column. - -## {Platform} Grid Column Animations Example - - - - - - - -
- -## Animation Properties - -Each column animation property is listed and described below: - -- : When a column is added, you have the option to have the column header and its cells slide in from the left, right, top, or bottom. There are also options to have it fade in as well as slide and fade in. -- : When a column is exchanged, you have the option to have the exchanged column header and its cells slide to the left, right, top, or bottom. There are also options to have it fade as well as slide and fade. -- : When a column is hidden, you have the option to have the column header and its cells slide out to the left, right, top, or bottom. There are also options to have it fade out as well as slide and fade out. -- : When a column is moved, you have the option to have the column header and its cells slide over. -- : When a column's property changes, you have the option to have that property change animate by interpolating or deeply interpolating its change. -- : When a column is added, you have the option to have the column header and its cells slide in from the left, right, top, or bottom. There are also options to have it fade in as well as slide and fade in. - -## Code Snippet - -The following demonstrates the implementation of each of the column animations described in this topic: - - - -```tsx - -``` - - - - - -```html - - -``` - - - - - -```razor - -``` - - - - -## API References - -
diff --git a/docs/xplat/src/content/en/components/grids/data-grid/column-chooser.mdx b/docs/xplat/src/content/en/components/grids/data-grid/column-chooser.mdx deleted file mode 100644 index cf89a6f378..0000000000 --- a/docs/xplat/src/content/en/components/grids/data-grid/column-chooser.mdx +++ /dev/null @@ -1,340 +0,0 @@ ---- -title: "{Platform} Data Grid | Column Chooser | Infragistics" -description: Learn how Infragistics' {ProductName} grid component supports the ability to show and hide columns directly through the UI or by using the {Platform} control. View {ProductName} table demos for more information! -keywords: "{Platform} Table, Data Grid, column chooser, {ProductName}, Infragistics" -mentionedTypes: ["Grid", "DataGridColumn", "DataGridToolbar", "Button", "ColumnChooser", "ColumnHidingAnimationMode", "ColumnShowingAnimationMode", "ColumnChooserTitle"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: "{CanonicalLinkToGridMain}" ---- -import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; -import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; -import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; -import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - - - - - - - -Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md) component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - - - - - -# {Platform} Grid Column Chooser Overview - -The {ProductName} Data Grid supports the ability show and hide columns with the UI through the component or by the component that provides flexibility to place it anywhere on the page. The property on the columns can also be used to quickly hide or show a single column programmatically for manual column generation, and the value of `IsHidden` will reflect in the component. Each approach can be used interchangeably to change the visible state of the columns. - -## {Platform} Grid Column Chooser Example - - - - - - - -
- - -## Toolbar's Column Chooser UI - -The Column Chooser UI is accessible within the component separate from the grid. For this purpose all we have to do is set the toolbar's `ColumnChooser` property to true. The toolbar will then display a button, when clicked, will display the column chooser UI. This button also displays the total of hidden columns. If the toolbar is not created, enabling the `ColumnChooser` property will have no effect and hide the button. - -The provides additional properties such as adding a title to the toolbar by using the property, placing text in the button by setting the property, and adding a title header to the column chooser UI by setting . - -The Column Chooser can be configured with animations by setting the grid's and properties. - -## Code Snippet - -The following demonstrates how to implement the Column Chooser Toolbar UI for the {Platform} Data Grid: - - - -```tsx - - - - -``` - - - - - -```ts -import { IgrDataGrid } from 'igniteui-react-data-grids'; -import { IgrDataGridToolbar } from 'igniteui-react-data-grids'; - -public grid : IgrDataGrid; -public toolbar: IgrDataGridToolbar; - -this.onGridRef = this.onGridRef.bind(this); -this.onToolbarRef = this.onToolbarRef.bind(this); - - -public onGridRef(grid: IgrDataGrid) { - this.grid = grid; - if (this.toolbar != null) { - this.toolbar.targetGrid = this.grid; - this.grid.columnMovingAnimationMode = ColumnMovingAnimationMode.SlideOver; - - let productNameColumn = document.getElementById("productname") as IgrTextColumnComponent; - productNameColumn.isHidden = true; - } -} - -public onToolbarRef(toolbar: IgrDataGridToolbar) { - this.toolbar = toolbar; - if (this.grid != null) { - this.toolbar.targetGrid = this.grid; - this.toolbar.columnChooser = "true"; - this.toolbar.toolbarTitle = "Grid Title"; - this.toolbar.columnChooserText = "Column Chooser"; - this.toolbar.columnChooserTitle = "Column Chooser"; - } -} -``` - - - - - -```html - - - - -``` - - - - - -```ts -import { IgcDataGrid } from 'igniteui-webcomponents-data-grids'; -import { IgcDataGridToolbar } from 'igniteui-webcomponents-data-grids'; -import { ColumnMovingAnimationMode } from 'igniteui-webcomponents-data-grids'; - -private grid: IgcDataGridComponent; -private toolbar: IgcDataGridToolbarComponent; - -connectedCallback() { - this.toolbar.targetGrid = this.grid; - let productNameColumn = document.getElementById("productname") as IgcTextColumnComponent; - productNameColumn.isHidden = true; - this.toolbar.columnChooser = true; - this.toolbar.toolbarTitle = "Grid Title"; - this.toolbar.columnChooserText = "Choose Text"; - this.toolbar.columnChooserTitle = "Choose Title Text"; - this.grid.columnMovingAnimationMode = ColumnMovingAnimationMode.SlideOver; -} -``` - - - - - -```razor - - - - -@code { - private DataGrid grid; - public DataGrid DataGridRef - { - get - { - return grid; - } - set - { - grid = value; - StateHasChanged(); - } - } -} -``` - - - -## Simple Column Chooser - -Let's say we want to manually display the UI without the toolbar and put it anywhere we want on our page. This can be easily done by simply creating an instance of the component in our markup. - -## Demo - - - - - - -
- -## Code Snippet - -The following demonstrates how to implement the Column Chooser UI for the Data Grid: - - - -```tsx - - - - - -``` - - - - - -```ts -import { IgrDataGrid } from 'igniteui-react-data-grids'; -import { IgrColumnChooser } from 'igniteui-react-data-grids'; -import { ColumnMovingAnimationMode } from 'igniteui-react-data-grids'; - -public grid : IgrDataGrid; -public columnChooser: IgrColumnChooser; - -public onGridRef(grid: IgrDataGrid) { - this.grid = grid; - if (this.columnChooser) { - this.columnChooser.targetGrid = this.grid; - this.grid.columnMovingAnimationMode = ColumnMovingAnimationMode.SlideOver; - } -} - -public onColumnChooserRef(columnChooser: IgrColumnChooser) { - this.columnChooser = columnChooser; - if (this.grid) { - this.columnChooser.targetGrid = this.grid; - this.columnChooser.showAllText = "Show All"; - this.columnChooser.hideAllText = "Hide All"; - } -} -``` - - - - - -```html - - - - - -``` - - - - - -```ts -import { IgcDataGrid } from 'igniteui-webcomponents-data-grids'; -import { IgcColumnChooser } from 'igniteui-webcomponents-data-grids'; -import { ColumnMovingAnimationMode } from 'igniteui-webcomponents-data-grids'; - -private grid: IgcDataGridComponent; -private columnChooser: IgcColumnChooserComponent; - -connectedCallback() { - this.columnChooser.targetGrid = this.grid; - this.columnChooser.showAllText = "Show All"; - this.columnChooser.hideAllText = "Hide All"; - this.grid.columnMovingAnimationMode = ColumnMovingAnimationMode.SlideOver; -} -``` - - - - - -```razor - - - -@code { - private IgbDataGrid grid; - public IgbDataGrid DataGridRef - { - get - { - return grid; - } - set - { - grid = value; - StateHasChanged(); - } - } -} -``` - - - - -## API References - -
-
diff --git a/docs/xplat/src/content/en/components/grids/data-grid/column-filtering.mdx b/docs/xplat/src/content/en/components/grids/data-grid/column-filtering.mdx deleted file mode 100644 index 2e0dac700e..0000000000 --- a/docs/xplat/src/content/en/components/grids/data-grid/column-filtering.mdx +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: "{Platform} Data Grid | Filtering | Infragistics" -description: Use Infragistics' {ProductName} grid component to perform expressive sort conditions and return data easily. View {ProductName} table's demo for more information! -keywords: "{Platform} Table, Data Grid, column, filtering, filter expressions, filter operands, {ProductName}, Infragistics" -mentionedTypes: ["Grid", "FilterExpressions", "FilterLogicalOperator", "FilterOperand"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: "{CanonicalLinkToGridFiltering}" ---- -import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; -import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; -import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; -import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - - - - - - - -Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md) component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - - - - - -# {Platform} Grid Filtering Overview - -The {ProductName} Data Table / Data Grid includes column filtering with both a filter row and API that gives you the ability to perform expressive sort conditions based on the data type of the column being filtered. - -## {Platform} Grid Filtering Example - - - - - - - -
- -As seen above, setting the `FilterUIType` property to FilterRow will enables the record filtering record to the user interface where the user can specify filter criteria to filter records. Records that do not match the specified filter criteria will be hidden. - -Filtering is also exposed in the column options UI by hovering a field and clicking the vertical ellipsis. This is achieved when setting the `FilterUIType` to ColumnOptions. Please refer to the sample below. - -## Filter Expressions - -In the example below, the data grid's FilterExpressions collection is updated to incorporate custom `FilterExpressions`. - - - - - - -
- - -## Filter Operators - -Columns can be given a custom `FilterOperand` that will appear in the filter-row operand dropdown. The key requirements is to ensure the operand is given a `DisplayName` and to utilize the `FilterRequested` event on the operand so you can apply a `FilterFactory`, which is responsible for assigning the operator and value you wish to the filter the column by, e.g. StartsWith with value of "A". - -In addition, the grid's `FilterLogicalOperator` property is responsible for indicating how filters across fields are combined: - -- `And` logical operator. In order for a successful match, all conditions have to pass. -- `Or` logical operator. In order for a successful match, at least one of the conditions have to pass. - - -Since the operands are applied to the column they can be added in several ways, such as inline, in-code, or in a separate class. Each approach is demonstrated in the example below. - - - - - - - -
- - -## API References - -
-
-
-
diff --git a/docs/xplat/src/content/en/components/grids/data-grid/column-moving.mdx b/docs/xplat/src/content/en/components/grids/data-grid/column-moving.mdx deleted file mode 100644 index e97c4d01c6..0000000000 --- a/docs/xplat/src/content/en/components/grids/data-grid/column-moving.mdx +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: "{Platform} Data Grid | Column Moving | Infragistics" -description: See how Infragistics' {ProductName} Data Grid supports the ability to move columns and gives you the flexibility over how you wish to display your columns. View {ProductName} table demos for more information! -keywords: "{Platform} Table, Data Grid, column moving, {ProductName}, Infragistics" -mentionedTypes: ["Grid", "ColumnMovingMode", "ColumnMovingAnimationMode"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: "{CanonicalLinkToGridColumnMoving}" ---- -import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; -import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; -import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; -import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - - - - - - - -Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md) component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - - - - - -# {Platform} Grid Column Moving Overview - -The {ProductName} Data Grid supports the ability to move columns, giving you the flexibility over how you wish to display your columns with respect to the order of the columns shown. - -## {Platform} Grid Column Moving Example - - - - - - - -
- -Column moving in the {ProductName} Data Grid is on by default, and can be controlled by setting the `ColumnMovingMode` property of the grid. This property has two options, `Deferred` or `None`. `Deferred` will allow column moving, while `None` will disable column moving for the entire grid. - -When column moving is set to `Deferred`, a separator will show up while moving a column. While moving a column, once the mouse pointer is released, the moved column will take the place of the column placed to the right of the separator. This separator can also be customized in width and color by using the `ColumnMovingSeparatorWidth` and `ColumnMovingSeparatorBackground` properties, respectively. - -You can also animate the column movements, if you wish. This can be done by setting the `ColumnMovingAnimationMode` property of the grid. Animations are not on by default. - -## Code Snippet - -The following demonstrates how to implement column moving in the {ProductName} Data Grid with deferred column moving, animations enabled, and a 5px wide separator: - - -```ts -import { ColumnMovingAnimationMode } from 'igniteui-react-data-grids'; -import { ColumnMovingMode } from 'igniteui-react-data-grids'; -``` - - - - - -```ts -import { ColumnMovingAnimationMode } from 'igniteui-webcomponents-data-grids'; -import { ColumnMovingMode } from 'igniteui-webcomponents-data-grids'; -``` - - - - - - -```tsx - -``` - - - - - -```html - - -``` - - - - - -```ts -let grid1 = (document.getElementById("grid") as IgcDataGridComponent); -grid1.dataSource = data; -``` - - - - - -```razor - -``` - - - - -## API References - -
-
diff --git a/docs/xplat/src/content/en/components/grids/data-grid/column-options.mdx b/docs/xplat/src/content/en/components/grids/data-grid/column-options.mdx deleted file mode 100644 index bc9d6dd290..0000000000 --- a/docs/xplat/src/content/en/components/grids/data-grid/column-options.mdx +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: "{Platform} Data Grid | Column Options | Infragistics" -description: See how Infragistics' {ProductName} Data Grid supports the ability to pin, move, filter, and sort columns individually through a drop down UI from each column header. Check out {ProductName} table's column option! -keywords: "{Platform} Table, Data Grid, column options, {ProductName}, Infragistics" -mentionedTypes: ["Grid", "HeaderClickAction", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: "{CanonicalLinkToGridMain}" ---- -import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; -import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; -import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; -import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - - - - - - - -Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md) component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - - - - - -# {Platform} Grid Column Options Overview - -The {ProductName} Data Grid supports the ability to group, hide, sort, move, pin, filter, and sort columns directly from a UI exposed on each column header. - -To enable the column options ui you can set the grid's `IsColumnOptionsEnabled` property to true. - -## {Platform} Grid Column Options Example - - - - - - - -
- -## Column Options Configurations - -Filtering can be toggled per column by setting the column's `IsFilteringEnabled` property. Setting true or false will show or hide the filtering section in the column's options ui. - -Sorting can be toggled for the entire grid if the `HeaderClickAction` property is applied. Setting this to `None` for example will completely remove sorting from grid and reflect in the options ui for each column. And setting `SortByOneColumnOnly` for example will continue to allow one column to be sorted at a time. - -## Code Snippet - -The following code demonstrates how to programmatically enable the column options ui adjust filtering and sorting in the column options ui by adjusting the grid and column. - - - -```tsx - - - -``` - - - - -```ts -import { HeaderClickAction } from 'igniteui-react-data-grids'; - -//enable column options -this.grid.isColumnOptionsEnabled="true"; - -//adjust filtering for column -let idColumn = this.grid.actualColumns.item(0); -idColumn.isFilteringEnabled="false"; - -//adjust sorting -this.grid.headerClickAction = HeaderClickAction.SortByOneColumnOnly; -``` - - - - - -```ts -import { HeaderClickAction } from 'igniteui-webcomponents-data-grids'; - -//enable column options -this.grid.isColumnOptionsEnabled="true"; - -//adjust filtering for column -let idColumn = this.grid.actualColumns.item(0); -idColumn.isFilteringEnabled="false"; - -//adjust sorting -this.grid.headerClickAction = HeaderClickAction.SortByOneColumnOnly; -``` - - - - - - -```html - - - -``` - - - - - -```razor - - - -``` - - - - -## API References - -
diff --git a/docs/xplat/src/content/en/components/grids/data-grid/column-pinning.mdx b/docs/xplat/src/content/en/components/grids/data-grid/column-pinning.mdx deleted file mode 100644 index d43493854f..0000000000 --- a/docs/xplat/src/content/en/components/grids/data-grid/column-pinning.mdx +++ /dev/null @@ -1,466 +0,0 @@ ---- -title: "{Platform} Data Grid | Column Pinning | Infragistics" -description: See how Infragistics' {ProductName} grid component supports the ability to pin columns and gives you the flexibility over how you wish to position your columns. View {ProductName} table demos for more information! -keywords: "{Platform} Table, Data Grid, column pinning, {ProductName}, Infragistics" -mentionedTypes: ["Grid", "PinnedPositions", "PinColumn", "ColumnPinning", "DataGridToolbar", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: "{CanonicalLinkToGridColumnPinning}" ---- -import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; -import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; -import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; -import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - - - - - - - -Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md) component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - - - - - -# {Platform} Grid Column Pinning Overview - -The {ProductName} Data Grid supports the ability to pin columns, allowing the end users to lock a column in a particular column order. - -A column or multiple columns can be pinned to the left-hand or right-hand side of the Data Grid. In addition, you can change the pin state of the columns by utilizing the `PinColumn` function. - -## {Platform} Grid Column Pinning Example - - - - - - - -
- -The Column Pinning API in the Data Grid can be enabled by setting either a column's `Pinned` property, or when setting it by utilizing the `PinColumn` function of the grid. - -The `Pinned` property has three options: - -- Left - enabling `Left` will position pinned columns to the left-hand side of the grid. -- Right - enabling `Right` will position pinned columns to the right side of the grid. -- None - enabling `None` will unpin a column and reposition its default placement within the grid. - -Unpinned columns that are adjacent to pinned columns will still maintain horizontal scrolling. - -The `PinColumn` function contains two required parameters. The first parameter is the column to be pinned, and the second is with the `PinnedPositions` enumeration setting. - - -## Code Snippet - -The following code demonstrates how to implement column pinning in the {Platform} Data Grid with column pinning by using the `Pinned` property and `PinColumn` function: - - - - - - - -```tsx - - - {/*Columns pinned left*/} - - - - - {/*Columns unpinned*/} - - - - - {/*Columns pinned right*/} - - - - -``` - - - - -```ts -import { PinnedPositions } from 'igniteui-react-data-grids'; - -public onButtonPinLeft = (e: any) => { - - let idColumn = this.grid.actualColumns.item(0); - let firstNameColumn = this.grid.actualColumns.item(1); - let lastNameColumn = this.grid.actualColumns.item(2); - - //pinned property - idColumn.pinned = PinnedPositions.Left; - firstNameColumn.pinned = PinnedPositions.Left; - lastNameColumn.pinned = PinnedPositions.Left; - - // pinColumn Function - this.grid.pinColumn(idColumn, PinnedPositions.Left); - this.grid.pinColumn(firstNameColumn, PinnedPositions.Left); - this.grid.pinColumn(lastNameColumn, PinnedPositions.Left); -} - -public onButtonPinRight = (e: any) => { - - let streetColumn = this.grid.actualColumns.item(6); - let cityColumn = this.grid.actualColumns.item(7); - let countryColumn = this.grid.actualColumns.item(8); - - //pinned property - streetColumn.pinned = PinnedPositions.Right; - cityColumn.pinned = PinnedPositions.Right; - countryColumn.pinned = PinnedPositions.Right; - - //pinColumn function - this.grid.pinColumn(streetColumn, PinnedPositions.Right); - this.grid.pinColumn(cityColumn, PinnedPositions.Right); - this.grid.pinColumn(countryColumn, PinnedPositions.Right); -} - -public onButtonUnPin = (e: any) => { - - let idColumn = this.grid.actualColumns.item(0); - let firstNameColumn = this.grid.actualColumns.item(1); - let lastNameColumn = this.grid.actualColumns.item(2); - - //pinned property - idColumn.pinned = PinnedPositions.Left; - firstNameColumn.pinned = PinnedPositions.Left; - lastNameColumn.pinned = PinnedPositions.Left; - - //pinColumn function - this.grid.pinColumn(idColumn, PinnedPositions.None); - this.grid.pinColumn(firstNameColumn, PinnedPositions.None); - this.grid.pinColumn(lastNameColumn, PinnedPositions.None); - - let streetColumn = this.grid.actualColumns.item(6); - let cityColumn = this.grid.actualColumns.item(7); - let countryColumn = this.grid.actualColumns.item(8); - - //pinned property - streetColumn.pinned = PinnedPositions.None; - cityColumn.pinned = PinnedPositions.None; - countryColumn.pinned = PinnedPositions.None; - - //pinColumn function - this.grid.pinColumn(streetColumn, PinnedPositions.None); - this.grid.pinColumn(cityColumn, PinnedPositions.None); - this.grid.pinColumn(countryColumn, PinnedPositions.None); -} -``` - - - - - - - - - - -```html - - - - - - - - - - - - - -``` - - - - -```ts -import { PinnedPositions } from 'igniteui-webcomponents-data-grids'; - -onButtonPinLeft() { - - let idColumn = this.grid.actualColumns.item(0); - let firstNameColumn = this.grid.actualColumns.item(1); - let lastNameColumn = this.grid.actualColumns.item(2); - - //pinned property - idColumn.pinned = PinnedPositions.Left; - firstNameColumn.pinned = PinnedPositions.Left; - lastNameColumn.pinned = PinnedPositions.Left; - - // pinColumn Function - this.grid.pinColumn(idColumn, PinnedPositions.Left); - this.grid.pinColumn(firstNameColumn, PinnedPositions.Left); - this.grid.pinColumn(lastNameColumn, PinnedPositions.Left); -} - -onButtonPinRight() { - - let streetColumn = this.grid.actualColumns.item(6); - let cityColumn = this.grid.actualColumns.item(7); - let countryColumn = this.grid.actualColumns.item(8); - - //pinned property - streetColumn.pinned = PinnedPositions.Right; - cityColumn.pinned = PinnedPositions.Right; - countryColumn.pinned = PinnedPositions.Right; - - //pinColumn function - this.grid.pinColumn(streetColumn, PinnedPositions.Right); - this.grid.pinColumn(cityColumn, PinnedPositions.Right); - this.grid.pinColumn(countryColumn, PinnedPositions.Right); -} - -onButtonUnPin() { - - let idColumn = this.grid.actualColumns.item(0); - let firstNameColumn = this.grid.actualColumns.item(1); - let lastNameColumn = this.grid.actualColumns.item(2); - - //pinned property - idColumn.pinned = PinnedPositions.Left; - firstNameColumn.pinned = PinnedPositions.Left; - lastNameColumn.pinned = PinnedPositions.Left; - - //pinColumn function - this.grid.pinColumn(idColumn, PinnedPositions.None); - this.grid.pinColumn(firstNameColumn, PinnedPositions.None); - this.grid.pinColumn(lastNameColumn, PinnedPositions.None); - - let streetColumn = this.grid.actualColumns.item(6); - let cityColumn = this.grid.actualColumns.item(7); - let countryColumn = this.grid.actualColumns.item(8); - - //pinned property - streetColumn.pinned = PinnedPositions.None; - cityColumn.pinned = PinnedPositions.None; - countryColumn.pinned = PinnedPositions.None; - - //pinColumn function - this.grid.pinColumn(streetColumn, PinnedPositions.None); - this.grid.pinColumn(cityColumn, PinnedPositions.None); - this.grid.pinColumn(countryColumn, PinnedPositions.None); -} -``` - - - - - - -```razor - - - @*Columns Pinned Left*@ - - - - - @*Columns Unpinned*@ - - - - - @*Columns Pinned Right*@ - - - - -``` - - - -## Toolbar's Column Pinning UI - -The Column Pinning UI is accessible within the `DataGridToolbar` component separate from the grid. For this purpose all we have to do is set the toolbar's `columnPinning` property to true. The toolbar will then display a `Button`, when clicked, will display the column pinning UI. This button also displays the total of pinned-left columns. If the toolbar is not created, enabling the `columnPinning` property will have no effect and hide the button. - -The `DataGridToolbar` provides additional properties such as adding a title to the toolbar by using the `ToolbarTitle` property, placing text in the `Button` by setting the `columnPinningText` property, and adding a title header to the column hiding UI by setting `columnPinningTitle`. - -## Demo - - - - - - -## Code Snippet - - - - - - - -```tsx - - - - -``` - - - - - - - - - -```ts -import { IgrDataGrid } from 'igniteui-react-data-grids'; -import { IgrDataGridToolbar } from 'igniteui-react-data-grids'; - -public grid : IgrDataGrid; -public toolbar: IgrDataGridToolbar; - -this.onGridRef = this.onGridRef.bind(this); -this.onToolbarRef = this.onToolbarRef.bind(this); - - -public onGridRef(grid: IgrDataGrid) { - this.grid = grid; - if (this.toolbar != null) { - this.toolbar.targetGrid = this.grid; - - let productNameColumn = this.grid.actualColumns.item(0); - productNameColumn.pinned = PinnedPositions.Left; - } -} - -public onToolbarRef(toolbar: IgrDataGridToolbar) { - this.toolbar = toolbar; - if (this.grid != null) { - this.toolbar.targetGrid = this.grid; - this.toolbar.columnPinning = "true"; - this.toolbar.toolbarTitle = "Grid Title"; - this.toolbar.columnPinningText = "Pinning"; - this.toolbar.columnPinningTitle = "Pinning Title"; - } -} -``` - - - - - - - - - -```html - - - - -``` - - - - - - - - - -```ts -import { IgcDataGrid } from 'igniteui-webcomponents-data-grids'; -import { IgcDataGridToolbar } from 'igniteui-webcomponents-data-grids'; - -private grid: IgcDataGridComponent; -private toolbar: IgcToolbarComponent; - -connectedCallback() { - this.toolbar.targetGrid = this.grid; - let productNameColumn = document.getElementById("productname") as IgcTextColumnComponent; - productNameColumn.pinned = true; - this.toolbar.columnPinning = true; - this.toolbar.toolbarTitle = "Grid Title"; - this.toolbar.columnPinningText = "Pinning Text"; - this.toolbar.columnPinningTitle = "Pinning Title Text"; -} -``` - - - - - -```razor - - - -@code { - private IgbDataGrid grid; - public IgbDataGrid DataGridRef - { - get - { - return grid; - } - set - { - grid = value; - StateHasChanged(); - } - } -} -``` - - - - -## API References - -
-
-
diff --git a/docs/xplat/src/content/en/components/grids/data-grid/column-resizing.mdx b/docs/xplat/src/content/en/components/grids/data-grid/column-resizing.mdx deleted file mode 100644 index 3628d959ca..0000000000 --- a/docs/xplat/src/content/en/components/grids/data-grid/column-resizing.mdx +++ /dev/null @@ -1,146 +0,0 @@ ---- -title: "{Platform} Data Grid | Column Resizing | Infragistics" -description: Start using Infragistics' {Platform} grid component to resize columns, giving you flexibility over how you wish to display your columns with respect to the width of each. View {ProductName} table demos for more information! -keywords: "{Platform} Table, Data Grid, column resizing, {ProductName}, Infragistics" -mentionedTypes: ["Grid", "ColumnResizingMode", "ColumnResizingAnimationMode"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: "{CanonicalLinkToGridColumnResizing}" ---- -import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; -import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; -import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; -import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - - - - - - - -Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md) component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - - - - - -# {Platform} Grid Column Resizing - -The {ProductName} Data Grid supports the ability to resize columns, giving you flexibility over how you wish to display your columns with respect to the width of each. - -## {Platform} Grid Column Resizing Example - - - - - - - -
- -Column resizing in the {ProductName} DataGrid is on by default, and can be controlled by using the `ColumnResizingMode` property of the grid. This property has three options. Each option is explained below: - -- `Deferred`: The default option. When resizing, a separator will appear showing how large or small the column will become when resized. -- `Immediate`: When resizing, there will be no separator. The column's width will follow the pointer as you drag the edge of the column and resize accordingly. -- `None`: Columns cannot be resized. - -When column resizing is set to `Deferred`, the separator that shows up can be modified in color and width by using the `ColumnResizingSeparatorBackground` and `ColumnResizingSeparatorWidth` properties of the grid, respectively. - -You can also animate the columns as they resize when the resizing mode is set to `Deferred` only. This is done by setting the `ColumnResizingAnimationMode` property to `Interpolate`. - -Each column in the grid can be determined whether or not it can resize individually. If you want to enable or disable resizing on a particular column, you can set the IsResizingEnabled property of that column. - -When resizing a star-width column, it will change that column to a fixed column. - -## Code Snippet - -The following code snippet demonstrates how to implement column resizing in the {Platform} data grid, where the Street column in this case will not be resizable. In this case, the column resizing separator will be 5 pixels wide and the columns that are resizable would animate when resized as well: - - -```ts -import { ColumnResizingMode } from 'igniteui-react-data-grids'; -import { ColumnResizingAnimationMode } from 'igniteui-react-data-grids'; -``` - - - - - -```ts -import { ColumnResizingMode } from 'igniteui-webcomponents-data-grids'; -import { ColumnResizingAnimationMode } from 'igniteui-webcomponents-data-grids'; -``` - - - - - - -```tsx - - - - - - -``` - - - - - -```html - - - - - - -``` - - - - - -```ts -let grid1 = (document.getElementById("grid") as IgcDataGridComponent); -grid1.dataSource = data; -``` - - - - - -```razor - - - - - - -``` - - - - -## API References - -
-
diff --git a/docs/xplat/src/content/en/components/grids/data-grid/column-sorting.mdx b/docs/xplat/src/content/en/components/grids/data-grid/column-sorting.mdx deleted file mode 100644 index d93f3fc8d9..0000000000 --- a/docs/xplat/src/content/en/components/grids/data-grid/column-sorting.mdx +++ /dev/null @@ -1,180 +0,0 @@ ---- -title: "{Platform} Data Grid | Column Sorting | Infragistics" -description: Use Infragistics' {Platform} grid component's sorting feature to configure a mix of sortable and non-sortable columns, with rich API and data sorting. View {ProductName} tutorials! -keywords: "{Platform} Table, Data Grid, column, sorting, row, {ProductName}, Infragistics" -mentionedTypes: ["Grid", "HeaderClickAction"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: "{CanonicalLinkToGridSorting}" ---- -import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; -import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; -import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; -import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - - - - - - - -Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md) component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - - - - - -# {Platform} Grid Sorting Overview - -The {ProductName} Data Table / Data Grid supports ascending and descending column sorting with a Single Column, Multi-Column and Tri-State Column Sorting configuration. - -## {Platform} Grid Sorting Example - - - - - - - -
- -## Code Snippet - -You can sort by a single or multiple column ascending or descending in the {Platform} data grid by using the `HeaderClickAction` property. If TriState is enabled you can remove the sort applied to a column. - -- `SortByMultipleColumns` -- `SortByMultipleColumnsTriState` -- `SortByOneColumnOnly` -- `SortByOneColumnOnlyTriState` - - -```ts -import { HeaderClickAction } from 'igniteui-react-data-grids'; -``` - - - - - -```ts -import { HeaderClickAction } from 'igniteui-webcomponents-data-grids'; -``` - - - - - - -```tsx - -``` - - - - - -```html - - -``` - - - - - -```razor - -``` - - - -## Sorting through API - - - -```ts -import { IgrColumnSortDescription } from 'igniteui-react-data-grids'; -import { ListSortDirection } from 'igniteui-react-core'; -``` - - - - - -```ts -public onGridRef(grid: IgrDataGrid) { - this.grid = grid; -} -// ... -let colSortDesc = new IgrColumnSortDescription(); -colSortDesc.field = "UnitsInStock"; -colSortDesc.sortDirection = ListSortDirection.Descending; -this.grid.sortDescriptions.add(colSortDesc); -``` - - - - - -```ts -import { IgcColumnSortDescription } from 'igniteui-webcomponents-data-grids'; -import { ListSortDirection } from 'igniteui-webcomponents-core'; - -let grid1 = (document.getElementById("grid") as IgcDataGridComponent); -grid1.dataSource = data; - -let colSortDesc = new IgcColumnSortDescription(); -colSortDesc.field = "UnitsInStock"; -colSortDesc.sortDirection = ListSortDirection.Descending; -grid1.sortDescriptions.add(colSortDesc); -``` - - - - - -```razor -@code { - // Using the ref property above: - private IgbDataGrid grid; - private IgbDataGrid DataGridRef - { - get { return grid; } - set - { - grid = value; - OnGridRefChanged(); - StateHasChanged(); - } - } - - private void OnGridRefChanged() - { - if (this.DataGridRef != null) - { - this.DataGridRef.SortDescriptions.Add(new ColumnSortDescription() - { - Field = "Property", - SortDirection = ListSortDirection.Descending - }); - } - } -} -``` - - - - -## API References - -
diff --git a/docs/xplat/src/content/en/components/grids/data-grid/column-summaries.mdx b/docs/xplat/src/content/en/components/grids/data-grid/column-summaries.mdx deleted file mode 100644 index c6051735ba..0000000000 --- a/docs/xplat/src/content/en/components/grids/data-grid/column-summaries.mdx +++ /dev/null @@ -1,345 +0,0 @@ ---- -title: "{Platform} Data Grid | Column Summaries | Infragistics" -description: Use Infragistics' {Platform} grid component's column summaries feature to display summarized data such as count, max, min and many more. Check out {ProductName} table demos! -keywords: "{Platform} Table, Data Grid, column, summaries, {ProductName}, Infragistics" -mentionedTypes: ["Implementation.Grid", "SummaryScope", "GroupSummaryDisplayMode"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: "{CanonicalLinkToGridSummaries}" ---- -import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; -import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; -import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; -import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - - - - - - - -Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md) component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - - - - - -# {Platform} Column Summaries - -The {ProductName} Data Table / Data Grid supports column summaries. In some cases, your end users may be overwhelmed by the amount of data displayed in the grid, and often may be looking for a summary of the data. Your end users may also want to derive additional information from the data of a specific column. Summaries help your end users achieve this, and you can enable them by setting the `SummaryScope` property. - -## {Platform} Column Summaries Example - - - - - - - -
- -## Summary Scope Property - -The {Platform} data grid supports 4 summary settings that you can configure using the `SummaryScope` property. These are listed and described below: - -- `Root`: This will display a grand total for all rows in the grid for the column the summary is applied to. -- `Groups`: This is specific to grouped rows and shows the grand total for all rows in a particular group. -- `Both`: This will use the `Groups` and `Root` options simultaneously. -- `None`: This will disable summaries for the grid. - -## Group Summary Display Mode Property - -The {Platform} data grid supports configuration of the locations that summaries are displayed. You can configure this by using the `GroupSummaryDisplayMode` property. The different options for this property are listed and described below: - -- **List**: This will render the group summaries in a flat list in the spanning group header. -- **Cells**: This will render the group header as cells, and the summary values will be rendered inside the cells, aligned with their corresponding column. The grid will only display a single summary per column using this option. -- **RowTop**: This will render the group summaries as summary rows at the top of the group. -- **RowBottom**: This will render the group summaries as summary rows at the bottom of the group. -- **None**: This will disable group summary rendering. - -## Code Snippets - - - -```tsx - - - - - - - -``` - - - - - -```html - - - - - - - -``` - - - - - -```ts -import { IgrColumnGroupDescription } from 'igniteui-react-data-grids'; -import { IgrColumnSummaryDescription } from 'igniteui-react-data-grids' -import { SummaryOperand, SummaryCalculator, DefaultSummaryResult, IDataSource, ISummaryResult } from 'igniteui-react-core'; - -public componentDidMount() { - window.addEventListener('load', this.onLoad); -} - -public onLoad() { - // Count Operand - const productCount = new IgrColumnSummaryDescription(); - productCount.field = "ProductName"; - productCount.operand = SummaryOperand.Count; - this.grid.summaryDescriptions.add(productCount); - // Min Operand with formatting - const priceMin = new IgrColumnSummaryDescription(); - priceMin.field = "BundlePrice"; - priceMin.operand = SummaryOperand.Min; - priceMin.formatOverride = new Intl.NumberFormat('en-EN', { style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0 }); - this.grid.summaryDescriptions.add(priceMin); - // Max Operand and formatting - const priceMax = new IgrColumnSummaryDescription(); - priceMax.field = "BundlePrice"; - priceMax.operand = SummaryOperand.Max; - priceMax.formatOverride = new Intl.NumberFormat('en-EN', { style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0 }); - this.grid.summaryDescriptions.add(priceMax); - // Sum Operand - const orderSum = new IgrColumnSummaryDescription(); - orderSum.field = "OrderItems"; - orderSum.operand = SummaryOperand.Sum; - this.grid.summaryDescriptions.add(orderSum); - // Average Operand and formatting - const orderValueAvg = new IgrColumnSummaryDescription(); - orderValueAvg.field = "OrderValue"; - orderValueAvg.operand = SummaryOperand.Average; - orderValueAvg.formatOverride = new Intl.NumberFormat('en-EN', { style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0 }); - this.grid.summaryDescriptions.add(orderValueAvg); -} -``` - - - - - -```ts -import { IgcColumnGroupDescription } from 'igniteui-webcomponents-data-grids'; -import { IgcColumnSummaryDescription } from 'igniteui-webcomponents-data-grids' -import { SummaryOperand, SummaryCalculator, DefaultSummaryResult, IDataSource, ISummaryResult } from 'igniteui-webcomponents-core'; - -connectedCallback() { - - // Count Operand - const productCount = new IgcColumnSummaryDescription(); - productCount.field = "ProductName"; - productCount.operand = SummaryOperand.Count; - this.grid.summaryDescriptions.add(productCount); - // Min Operand with formatting - const priceMin = new IgcColumnSummaryDescription(); - priceMin.field = "BundlePrice"; - priceMin.operand = SummaryOperand.Min; - priceMin.formatOverride = new Intl.NumberFormat('en-EN', { style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0 }); - this.grid.summaryDescriptions.add(priceMin); - // Max Operand and formatting - const priceMax = new IgcColumnSummaryDescription(); - priceMax.field = "BundlePrice"; - priceMax.operand = SummaryOperand.Max; - priceMax.formatOverride = new Intl.NumberFormat('en-EN', { style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0 }); - this.grid.summaryDescriptions.add(priceMax); - // Sum Operand - const orderSum = new IgcColumnSummaryDescription(); - orderSum.field = "OrderItems"; - orderSum.operand = SummaryOperand.Sum; - this.grid.summaryDescriptions.add(orderSum); - // Average Operand and formatting - const orderValueAvg = new IgcColumnSummaryDescription(); - orderValueAvg.field = "OrderValue"; - orderValueAvg.operand = SummaryOperand.Average; - orderValueAvg.formatOverride = new Intl.NumberFormat('en-EN', { style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0 }); - this.grid.summaryDescriptions.add(orderValueAvg); -} -``` - - - - - -```razor - - - - - - - - -@code { - private IgbDataGrid grid; - private IgbDataGrid DataGridRef - { - get { return grid; } - set - { - grid = value; - this.OnDataGridRef(); - StateHasChanged(); - } - } - - private void OnDataGridRef() - { - var productCount = new ColumnSummaryDescription() { Field = "ProductName", Operand = SummaryOperand.Count }; - var priceMin = new ColumnSummaryDescription() { Field = "BundlePrice", Operand = SummaryOperand.Min }; - var priceMax = new ColumnSummaryDescription() { Field = "BundlePrice", Operand = SummaryOperand.Max }; - var orderSum = new ColumnSummaryDescription() { Field = "OrderItems", Operand = SummaryOperand.Sum }; - var orderValueAvg = new ColumnSummaryDescription() { Field = "OrderValue", Operand = SummaryOperand.Average }; - - this.DataGridRef.SummaryDescriptions.Add(productCount); - this.DataGridRef.SummaryDescriptions.Add(priceMin); - this.DataGridRef.SummaryDescriptions.Add(priceMax); - this.DataGridRef.SummaryDescriptions.Add(orderSum); - this.DataGridRef.SummaryDescriptions.Add(orderValueAvg); - } -} -``` - - - - -## Custom Summaries - -In some situations, you may want to expand the default set of summaries. For example, if you were looking to show the number of times a particular value in a column appears, a custom summary would be required for this. - -The snippets below demonstrate how to display a Count for number of "USA" values appear in the column. - - - -```ts -import { IgrProvideCalculatorEventArgs } from 'igniteui-react-core'; - -public onLoad() -{ - // ... - // Custom Operand with calculator - const countries = new IgrColumnSummaryDescription(); - countries.field = "Countries"; - countries.operand = SummaryOperand.Custom; - countries.provideCalculator = this.onProvideCalculator; //refer to class below - this.grid.summaryDescriptions.add(countries); - -} - -onProvideCalculator(s: IgrColumnSummaryDescription, e: IgrProvideCalculatorEventArgs) { - e.calculator = new CustomDomestic(); -} - -// Custom Calculator - calculates the count for all USA. -class CustomDomestic extends SummaryCalculator -{ - get displayName(): string { - return "USA"; - } - public usCountries: number; - - public beginCalculation(a: IDataSource, b: string): void { - super.beginCalculation(a,b); - this.usCountries = 0; - } - public endCalculation(): ISummaryResult { - return new DefaultSummaryResult(this.propertyName, SummaryOperand.Custom, this.usCountries) - } - public aggregate(a: any): void { - if (a.Countries === "USA") - { - this.usCountries++; - } - } -} -``` - - - - - -```ts -import { IgcProvideCalculatorEventArgs } from 'igniteui-webcomponents-core'; - -onLoad() { - - const countries = new IgcColumnSummaryDescription(); - countries.field = "Countries"; - countries.operand = SummaryOperand.Custom; - countries.provideCalculator = this.onProvideCalculator; //refer to class below - this.grid.summaryDescriptions.add(countries); - -} - -onProvideCalculator(s: IgcColumnSummaryDescription, e: IgcProvideCalculatorEventArgs) { - e.calculator = new CustomDomestic(); -} - -// Custom Calculator - calculates the count for all USA. -class CustomDomestic extends SummaryCalculator -{ - get displayName(): string { - return "USA"; - } - public usCountries: number; - - public beginCalculation(a: IDataSource, b: string): void { - super.beginCalculation(a,b); - this.usCountries = 0; - } - public endCalculation(): ISummaryResult { - return new DefaultSummaryResult(this.propertyName, SummaryOperand.Custom, this.usCountries) - } - public aggregate(a: any): void { - if (a.Countries === "USA") - { - this.usCountries++; - } - } -} -``` - - - - - -## API References - - -
-
-
diff --git a/docs/xplat/src/content/en/components/grids/data-grid/column-types.mdx b/docs/xplat/src/content/en/components/grids/data-grid/column-types.mdx deleted file mode 100644 index ba77f60bc4..0000000000 --- a/docs/xplat/src/content/en/components/grids/data-grid/column-types.mdx +++ /dev/null @@ -1,387 +0,0 @@ ---- -title: "{Platform} Data Grid | Column Types | Infragistics" -description: Learn how Infragistics' {ProductName} data table & grid supports four column types to display your content such as Image, Text, Numeric, DataTime or a Template Column. View {ProductName} tutorials! -keywords: "{Platform} Table, Data Grid, column types, {ProductName}, Infragistics" -mentionedTypes: [ "Grid","CellInfo", "TemplateCellInfo", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: "{CanonicalLinkToGridColumnTypes}" ---- -import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; -import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; -import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; -import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - - - - - - - -Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md) component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - - - - - -# {Platform} Column Types - -The {ProductName} Data Table / Data Grid supports 5 column types, plus a Template Column type, giving you complete flexibility over the way your data is displayed in the {Platform} data grid. Column types supported are Text column, Numeric column, DateTime column, Image column, ComboBox and Template. - -Each column binds to data by setting the property to the name of the corresponding property on the items of your underlying data source bound to the {Platform} data grid. - -## {Platform} Column Types Example - - - - - - - -
- -## Text Column - -The {Platform} data grid is used for displaying formatted text in its associated cells. This is the default column type used to display data of the string type. - -## Numeric Column - -The is used for displaying a formatted numeric value in its associated cells and enables control of decimal place placement within cells and displaying fractional digits. - -## DateTime Column - -The is used for displaying Date objects in its associated cells and enables control to format the Date objects how you see fit. - -## Image Column - -The is used for displaying an image within a cell and exposes options for image stretch customization for cells by using its option. - -You can also choose what type of resource your image is by setting the option. - -## ComboBox Column - -The is used for displaying a drop-down list from which your end users can select a single item. - -Data binding can be achieved using an array of complex objects via the column's property. - -The property determines which value is shown when users make a selection. - -The property determines the bound value of the underlying data item selected. This is necessary if your list of objects have several properties. - -## Template Column - -The is used in conjunction with a cell template. It enables you to apply a custom template to the column's cell. This is done by handling the event of the template column. - -The `CellUpdating` event's arguments expose the that fires the event as well as a parameter. This event arguments parameter exposes a property that returns the HTMLDivElement that will be placed within the associated cells of the column. You can then append new elements to this div. - -The also exposes a property that you can use to get a object. This object exposes information about the cell and the row, such as the index, underlying data item, and appearance of the cell. - -## Sparkline Column - -You can embed Sparkline components in to show more complex data structures. -Refer to the [Column Sparkline](type-sparkline-table.md) topic for information on how to do this. - -## Code Snippet - -The following demonstrates the implementation of each of the columns described in this topic: - - - -```tsx - - - - - - - - - -``` - - - - - -```html - - - - - - - - - -``` - - - - - -```ts -import { IgcTemplateColumnComponent } from 'igniteui-webcomponents-data-grids'; -import { IgcTemplateCellInfo } from 'igniteui-webcomponents-data-grids'; -import { IgcTemplateCellUpdatingEventArgs } from 'igniteui-webcomponents-data-grids'; - -let grid1 = (document.getElementById("grid") as IgcDataGridComponent); -grid1.dataSource = data; - -let cityComboColumn = document.getElementById('city') as IgcComboBoxColumnComponent; - -if (cityComboColumn) - this.allCities = DataGridSharedData.getAllCities(); - cityComboColumn.dataSource = this.cityList; - cityComboColumn.textField = "name"; - -let TemplateColumn = (document.getElementById("Address") as IgcTemplateColumnComponent); -TemplateColumn.cellUpdating = onCellUpdating; - -onCellUpdating(s: IgcTemplateColumnComponent, e: IgcTemplateCellUpdatingEventArgs): void { - // alert("onAddressCellUpdating"); - const content = e.content as HTMLDivElement; - let span1: HTMLSpanElement | null = null; - let span2: HTMLSpanElement | null = null; - const info = e.cellInfo as IgcTemplateCellInfo ; - const item = info.rowItem; - - if (content.childElementCount === 0) { - - span1 = document.createElement("span"); - span2 = document.createElement("span"); - - content.style.verticalAlign = "top"; - content.style.marginTop = "15px"; - content.style.lineHeight = "normal"; - content.style.display = "inline-grid"; - content.style.fontFamily = "Verdana"; - content.style.fontSize = "13px"; - - content.appendChild(span1); - content.appendChild(span2); - } - else { - span1 = content.children[0] as HTMLSpanElement; - span2 = content.children[1] as HTMLSpanElement; - } - - if (span1 && span2) { - span1.textContent = item.Street; - span2.textContent = item.City + ", " + item.Country; - } -} -``` - - - - - -```ts -import { IgrTemplateCellUpdatingEventArgs } from 'igniteui-react-data-grids'; -import { IgrTemplateCellInfo } from 'igniteui-react-data-grids'; -import { IgrTemplateColumn } from 'igniteui-react-data-grids'; -import { IgrComboBoxColumn } from 'igniteui-react-data-grids'; - -public onAddressCellUpdating(s: IgrTemplateColumn, e: IgrTemplateCellUpdatingEventArgs) { - const content = e.content as HTMLDivElement; - let span1: HTMLSpanElement | null = null; - let span2: HTMLSpanElement | null = null; - const info = e.cellInfo as IgrTemplateCellInfo; - const item = info.rowItem; - - if (content.childElementCount === 0) { - - span1 = document.createElement("span"); - span2 = document.createElement("span"); - - content.style.verticalAlign = "top"; - content.style.marginTop = "15px"; - content.style.lineHeight = "normal"; - content.style.display = "inline-grid"; - content.style.fontFamily = "Verdana"; - content.style.fontSize = "13px"; - - content.appendChild(span1); - content.appendChild(span2); - } - else { - span1 = content.children[0] as HTMLSpanElement; - span2 = content.children[1] as HTMLSpanElement; - } - - if (span1 && span2) { - span1.textContent = item.Street; - span2.textContent = item.City + ", " + item.Country; - } -} -``` - - - -The following is a sample data source to use with the above columns. - -```ts -const maleNames: string[] = ["Kyle", "Oscar", "Ralph", "Torrey", "Bill", "Frank", "Howard", "Jack", "Larry", "Pete", "Steve", "Vince", "Mark", "Alex", "Max", "Brian", "Chris", "Andrew", "Martin", "Mike", "Steve", "Glenn", "Bruce"]; -const femaleNames: string[] = ["Gina", "Irene", "Katie", "Brenda", "Casey", "Fiona", "Holly", "Kate", "Liz", "Pamela", "Nelly", "Marisa", "Monica", "Anna", "Jessica", "Sofia", "Isabella", "Margo", "Jane", "Audrey", "Sally", "Melanie", "Greta", "Aurora", "Sally"]; -const lastNames: string[] = ["Adams", "Crowley", "Ellis", "Martinez", "Irvine", "Maxwell", "Clark", "Owens", "Rooney", "Lincoln", "Thomas", "Spacey", "Betts", "King", "Newton", "Fitzgerald", "Holmes", "Jefferson", "Landry", "Newberry", "Perez", "Spencer", "Starr", "Carter", "Edwards", "Stark", "Johnson", "Fitz", "Chief", "Blanc", "Perry", "Stone", "Williams", "Lane", "Jobs", "Adama", "Power", "Tesla"]; -const genders: string[] = ["male", "female"]; -const cities: string[] = ["New York, New York", "Columbus, Ohio", "Los Angeles, California", "Orlando, Florida", "New Orleans, Louisiana", "Las Vegas, Nevada", "Atlanta, Georgia"]; -const roadSuffixes: string[] = ["Road", "Street", "Court", "Way"]; -const roadNames: string[] = ["Alpha", "Beta", "Charlie", "Delta", "Echo", "Foxtrot", "Golf", "Hotel", "India", "Julia", "Kilo", "Lima", "Mike", "November"]; - -const people: any[] = []; - -let maleCount: number = 0; -let femaleCount: number = 0; -for (let i = 0; i < 250; i++) { - - const age: number = Math.round(this.getRandomNumber(20, 40)); - const today: Date = new Date(); - const gender: string = this.getRandomItem(genders); - - let firstName: string; - const lastName: string = this.getRandomItem(lastNames); - - const propertyNum: string = Math.round(this.getRandomNumber(1, 300)).toString(); - const cityState: string = this.getRandomItem(cities); - const road: string = this.getRandomItem(roadNames) + " " + this.getRandomItem(roadSuffixes); - - let photoPath: string; - - if (gender === "male") { - firstName = this.getRandomItem(maleNames); - maleCount++; - - if (maleCount > 26) { - maleCount = 0; - } - - if (maleCount < 10) { - photoPath = '/assets/GUY0' + maleCount.toString() + '.png'; - } - else { - photoPath = '/assets/GUY' + maleCount.toString() + '.png'; - } - } - else { - firstName = this.getRandomItem(femaleNames); - femaleCount++; - - if (femaleCount > 24) { - femaleCount = 0; - } - - if (femaleCount < 10) { - photoPath = '/assets/GIRL0' + femaleCount.toString() + '.png'; - } - else { - photoPath = '/assets/GIRL' + femaleCount.toString() + '.png'; - } - } - - const path: string = './assets/GIRL01.png'; - - const birthday: Date = new Date(today.getFullYear() - age, Math.round(this.getRandomNumber(1, 12)), Math.round(this.getRandomNumber(1, 28))); - - people.push({ - Address: propertyNum + " " + road + ", " + cityState, - Age: age, - Birthday: birthday, - City: cityState, - FirstName: firstName, - LastName: lastName, - Photo: path, - Street: propertyNum + " " + road + "," - }); -} - -this.data = people; - -public getRandomNumber(min: number, max: number): number { - return min + Math.random() * (max - min); -} - -public getRandomItem(array: any[]): any { - const index = Math.round(this.getRandomNumber(0, array.length - 1)); - return array[index]; -} -``` - - - -```razor - - - - - - - - - - -// In JS file: -function onUpdatingAddressColumn(grid, args) { - let content = args.content; - let info = args.cellInfo; - let item = info.rowItem; - let span1 = null; - let span2 = null; - - if (content.childElementCount === 0) { - content.style.fontFamily = "Verdana"; - content.style.fontSize = "13px"; - content.style.verticalAlign = "center"; - content.style.lineHeight = "normal"; - content.style.display = "flex"; - content.style.flexDirection = "column"; - content.style.justifyContent = "center"; - content.style.height = "100%"; - content.style.width = "100%"; - content.style.color = "rgb(24, 29, 31)"; - // stacking above elements in the content of grid's cell - span1 = document.createElement("span"); - span2 = document.createElement("span"); - content.appendChild(span1); - content.appendChild(span2); - } - else { - span1 = content.children[0]; - span2 = content.children[1]; - } - - if (span1 && span2) { - // updating elements in the content of grid's cell - span1.textContent = item.Street; - span2.textContent = item.City + ", " + item.Country; - } -} - -igRegisterScript("onUpdatingAddressColumn", onUpdatingAddressColumn, false); -``` - - - - -## API References - -
-
-
-
-
-
-
-
diff --git a/docs/xplat/src/content/en/components/grids/data-grid/horizontal-scrolling.mdx b/docs/xplat/src/content/en/components/grids/data-grid/horizontal-scrolling.mdx deleted file mode 100644 index fa5ba7aaa7..0000000000 --- a/docs/xplat/src/content/en/components/grids/data-grid/horizontal-scrolling.mdx +++ /dev/null @@ -1,142 +0,0 @@ ---- -title: "{Platform} Data Grid | Horizontal Scrolling | Infragistics" -description: Use Infragistics' {Platform} grid component's horizontal scrolling feature to scroll seamlessly through the columns. Check out {ProductName} table demos! -keywords: "{Platform} Table, Data Grid, column, horizontal, scrolling, {ProductName}, Infragistics" -mentionedTypes: ["Grid", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: "{CanonicalLinkToGridMain}" ---- -import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; -import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; -import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; -import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - - - - - - - -Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md) component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - - - - - -# {Platform} Horizontal Scrolling - -The {ProductName} Data Table / Data Grid supports Horizontal Scrolling is enabled by setting the total width of the columns greater than the width of the {Platform} data grid. - -## {Platform} Horizontal Scrolling Example - - - - - - - -
- -## Setting Default Column Width - - - -```tsx - -``` - - - - - -```html - - -``` - - - - - -```razor - -``` - - - -## Setting Individual Column Widths - - - -```tsx - - - - - - - - - - -``` - - - - - -```html - - - - - - - - - - -``` - - - - - -```razor - - - - - - - - - - -``` - - - - -## API References - -
diff --git a/docs/xplat/src/content/en/components/grids/data-grid/live-data.mdx b/docs/xplat/src/content/en/components/grids/data-grid/live-data.mdx deleted file mode 100644 index 0b835680e0..0000000000 --- a/docs/xplat/src/content/en/components/grids/data-grid/live-data.mdx +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: "{Platform} Data Grid | Data Animation | Data Binding | Infragistics" -description: Use Infragistics' {Platform} table to handle thousands of updates per seconds while remaining responsive. View {ProductName} table demos! -keywords: "{Platform} Table, Data Grid, live data updates, {ProductName}, Infragistics, data binding" -mentionedTypes: ["Implementation.Grid", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: "{CanonicalLinkToGridMain}" ---- -import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; -import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; -import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; -import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - - - - - - - -Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md) component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - - - - - -# {Platform} Binding Live Data - -The {ProductName} Data Table / Data Grid is able to handle thousands of updates per seconds, while keeping the grid responsive for any interaction that the user may undertake. You can use the following sample to check performance of the Grid handling under various live data scenarios by adjusting interval between data updates as well as volume of data updates. - -## {Platform} Binding Live Data Example - - - - - -## API References - - - - -
diff --git a/docs/xplat/src/content/en/components/grids/data-grid/load-save-layout.mdx b/docs/xplat/src/content/en/components/grids/data-grid/load-save-layout.mdx deleted file mode 100644 index f352fe1cb7..0000000000 --- a/docs/xplat/src/content/en/components/grids/data-grid/load-save-layout.mdx +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: "{Platform} Data Grid | Real-Time Data Grid and Tables | Load & Save | Infragistics" -description: Use Infragistics' {ProductName} Data Table & Grid which supports loading and saving the layout the user makes. -keywords: "{Platform} Table, Data Grid, cell activation, {ProductName}, Infragistics" -mentionedTypes: ["Grid", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: "{CanonicalLinkToGridMain}" ---- -import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; -import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; -import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; -import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - - - - - - - -Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md) component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - - - - - -# {Platform} Grid Load & Save Layout - -The {ProductName} Data Table / Data Grid supports loading and saving the grid layout. This is performed by calling the and methods of the grid. These features are useful when an end user can move, sort, and group columns, and wants to preserve the state of the grid and be able to recover the layout and resume work at a later time. - -## {Platform} Grid Load & Save Layout Example - - - - - - - -
- -## Supported Features - -The grid supports saving the following features: - -- [Column Visibility](column-chooser.md) -- [Column Pinning](column-pinning.md) -- [Column Moving](column-moving.md) -- [Column Resizing](column-resizing.md) -- [Column Sorting](column-sorting.md) -- [Column Filtering](column-filtering.md) -- [Row Grouping](row-grouping.md) - - -## API References - -
diff --git a/docs/xplat/src/content/en/components/grids/data-grid/local-data.mdx b/docs/xplat/src/content/en/components/grids/data-grid/local-data.mdx deleted file mode 100644 index 3d23bc727e..0000000000 --- a/docs/xplat/src/content/en/components/grids/data-grid/local-data.mdx +++ /dev/null @@ -1,244 +0,0 @@ ---- -title: "{Platform} Data Grid | Binding Local Data | Infragistics" -description: Use Infragistics' {Platform} grid control to bind to an array of data. Learn how {ProductName} table can help you better display your data! -keywords: "{Platform} Table, Data Grid, binding to data, {ProductName}, Infragistics, data binding" -mentionedTypes: ["Grid", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: "{CanonicalLinkToGridMain}" ---- -import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; -import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; -import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; -import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - - - - - - - -Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md) component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - - - - - -# {Platform} Binding Local Data - -The following sample demonstrates the {ProductName} Data Table / Data Grid data binding to an array of data. - -## {Platform} Binding Local Data Example - - - - - - - -## Code Snippet - - - -```tsx - - - - - - - - - - - - -``` - - - -```ts -public data: any[]; -public initData() { - const names: string[] = [ - "Intel CPU", "AMD CPU", - "Intel Motherboard", "AMD Motherboard", "Nvidia Motherboard", - "Nvidia GPU", "Gigabyte GPU", "Asus GPU", "AMD GPU", "MSI GPU", - "Corsair Memory", "Patriot Memory", "Skill Memory", - "Samsung HDD", "WD HDD", "Seagate HDD", "Intel HDD", "Asus HDD", - "Samsung SSD", "WD SSD", "Seagate SSD", "Intel SSD", "Asus SSD", - "Samsung Monitor", "Asus Monitor", "LG Monitor", "HP Monitor" ]; - - const countries: string[] = ["USA", "UK", "France", "Canada", "Poland", - "Denmark", "Croatia", "Australia", "Seychelles", - "Sweden", "Germany", "Japan", "Ireland", - "Barbados", "Jamaica", "Cuba", "Spain",]; - const status: string[] = [ "Packing", "Shipped", "Delivered"] - const sales: any[] = []; - - for (let i = 0; i < 200; i++) { - const price = this.getRandomNumber(10000, 90000) / 100; - const items = this.getRandomNumber(4, 30); - const value = Math.round(price * items); - const margin = this.getRandomNumber(2, 5); - const profit = Math.round((price * margin / 100) * items); - const country = this.getRandomItem(countries); - sales.push({ - Country: country, - CountryFlag: this.getCountryFlag(country), - Margin: margin, - OrderDate: this.getRandomDate(), - OrderItems: items, - OrderValue: value, - ProductID: 1001 + i, - ProductName: this.getRandomItem(names), - ProductPrice: price, - Profit: Math.round(profit), - Status: this.getRandomItem(status), - }); - } - - this.data = sales; - } -``` - - - -```razor - - - - - - - - - - - - - -@code { - - private List DataSource; - private Random Rand = new Random(); - - protected override void OnInitialized() - { - base.OnInitialized(); - - GenerateData(); - } - - public void GenerateData() - { - string[] names = new string[] { - "Intel CPU", "AMD CPU", - "Intel Motherboard", "AMD Motherboard", "Nvidia Motherboard", - "Nvidia GPU", "Gigabyte GPU", "Asus GPU", "AMD GPU", "MSI GPU", - "Corsair Memory", "Patriot Memory", "Skill Memory", - "Samsung HDD", "WD HDD", "Seagate HDD", "Intel HDD", "Asus HDD", - "Samsung SSD", "WD SSD", "Seagate SSD", "Intel SSD", "Asus SSD", - "Samsung Monitor", "Asus Monitor", "LG Monitor", "HP Monitor" }; - - string[] countries = new string[] { - "USA", "UK", "France", "Canada", "Poland", - "Denmark", "Croatia", "Australia", "Seychelles", - "Sweden", "Germany", "Japan", "Ireland", - "Barbados", "Jamaica", "Cuba", "Spain", }; - string[] status = new string[] { "Packing", "Shipped", "Delivered" }; - - var sales = new List(); - - for (var i = 0; i < 200; i++) - { - var price = GetRandomNumber(10000, 90000) / 100; - var items = GetRandomNumber(4, 30); - var value = Math.Round(price * items); - var margin = GetRandomNumber(2, 5); - var profit = Math.Round((price * margin / 100) * items); - var country = GetRandomItem(countries); - - var item = new SaleInfo() - { - Country = country, - CountryFlag = GetCountryFlag(country), - Margin = margin, - OrderDate = GetRandomDate(), - OrderItems = items, - OrderValue = value, - ProductID = 1001 + i, - ProductName = GetRandomItem(names), - ProductPrice = price, - Profit = Math.Round(profit), - Status = GetRandomItem(status) - }; - sales.Add(item); - } - - this.DataSource = sales; - } - - public double GetRandomNumber(double min, double max) - { - return Math.Round(min + (Rand.NextDouble() * (max - min))); - } - - public string GetRandomItem(string[] array) - { - var index = (int)Math.Round(GetRandomNumber(0, array.Length - 1)); - return array[index]; - } - - public DateTime GetRandomDate() { - var today = new DateTime(); - var year = today.Year; - var month = this.GetRandomNumber(1, 9); - var day = this.GetRandomNumber(10, 27); - return new DateTime(year, (int)month, (int)day); - } - - public string GetCountryFlag(string country) - { - var flag = "https://static.infragistics.com/xplatform/images/flags/" + country + ".png"; - return flag; - } - - public class SaleInfo - { - public string Status { get; set; } - public string ProductName { get; set; } - public string CountryFlag { get; set; } - public string Country { get; set; } - public DateTime OrderDate { get; set; } - public double Profit { get; set; } - public double ProductPrice { get; set; } - public double ProductID { get; set; } - public double OrderValue { get; set; } - public double OrderItems { get; set; } - public double Margin { get; set; } - } -} -``` - - - -{/* TODO ADD WC, ETC. */} - - -## API References - -
diff --git a/docs/xplat/src/content/en/components/grids/data-grid/localization.mdx b/docs/xplat/src/content/en/components/grids/data-grid/localization.mdx deleted file mode 100644 index 39b609352f..0000000000 --- a/docs/xplat/src/content/en/components/grids/data-grid/localization.mdx +++ /dev/null @@ -1,183 +0,0 @@ ---- -title: "{Platform} Data Grid | Real-Time Data Grid and Tables | Localization | Infragistics" -description: Use Infragistics' {ProductName} Data Table & Grid which supports localization. View {ProductName} table tutorials! -keywords: "{Platform} Table, Data Grid, cell accessibility, {ProductName}, Infragistics" -mentionedTypes: ["Grid", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: "{CanonicalLinkToGridMain}" ---- -import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; -import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; -import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; -import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - - - - - - - -Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md) component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - - - - - -# {Platform} Grid Localization - -The {ProductName} Data Table / Data Grid supports localizing the resource strings specific to the column options pop-up and summaries. Note, this is not intended to be used nor capable of translating the data. - - - - - -The Data Grid contains for assigning strings associated with the column options. The grid's property also has this method for assigning resource strings necessary for the summaries. - - - - -## {Platform} Grid Localization Example - - - - - - -
- -## Resource Strings - -This is the full list of strings to localize the grid. - -### Column Option Strings - -- Apply -- Cancel -- Clear_Column_Filter -- Column_Move -- Column_Move_Left -- Column_Move_Right -- Column_Pin -- Column_Pin_Left -- Column_Pin_Right -- Column_Sort -- Column_Sort_Ascending -- Column_Sort_Descending -- Filter_Columns_List -- Search -- Select_All -- ComparisonOperator_Bottom -- ComparisonOperator_BottomPercentile -- ComparisonOperator_Contains -- ComparisonOperator_DoesNotContain -- ComparisonOperator_DoesNotEndWith -- ComparisonOperator_DoesNotMatch -- ComparisonOperator_DoesNotStartWith -- ComparisonOperator_Empty -- ComparisonOperator_EndsWith -- ComparisonOperator_Equals -- ComparisonOperator_False -- ComparisonOperator_GreaterThan -- ComparisonOperator_GreaterThanOrEqualTo -- ComparisonOperator_LastMonth -- ComparisonOperator_LastQuarter -- ComparisonOperator_LastWeek -- ComparisonOperator_LastYear -- ComparisonOperator_LessThan -- ComparisonOperator_LessThanOrEqualTo -- ComparisonOperator_NextMonth -- ComparisonOperator_NextQuarter -- ComparisonOperator_NextWeek -- ComparisonOperator_NextYear -- ComparisonOperator_NotEmpty -- ComparisonOperator_NotEquals -- ComparisonOperator_StartsWith -- ComparisonOperator_ThisMonth -- ComparisonOperator_ThisQuarter -- ComparisonOperator_ThisWeek -- ComparisonOperator_ThisYear -- ComparisonOperator_Today -- ComparisonOperator_Tomorrow -- ComparisonOperator_Top -- ComparisonOperator_TopPercentile -- ComparisonOperator_True -- ComparisonOperator_Yesterday -- Column_Options_Summary_Average -- Column_Options_Summary_Count -- Column_Options_Summary_Maximum -- Column_Options_Summary_Minimum -- Column_Options_Summary_Sum -- Column_Options_Summaries - -### Summary Strings - -- DataSource_Summary_Avg -- DataSource_Summary_Count -- DataSource_Summary_Max -- DataSource_Summary_Min -- DataSource_Summary_Sum - - - - - -### Date-Time Column Strings - -- January_Full -- January_Short -- February_Full -- February_Short -- March_Full -- March_Short -- April_Full -- April_Short -- May_Full -- May_Short -- June_Full -- June_Short -- July_Full -- July_Short -- August_Full -- August_Short -- September_Full -- September_Short -- October_Full -- October_Short -- November_Full -- November_Short -- December_Full -- December_Short -- Monday_Full -- Monday_Short -- Monday_Single -- Thursday_Single -- Today -- Tuesday_Full -- Tuesday_Short -- Tuesday_Single -- Wednesday_Full -- Wednesday_Short -- Wednesday_Single -- Thursday_Full -- Thursday_Short -- Friday_Full -- Friday_Short -- Friday_Single -- Saturday_Full -- Saturday_Short -- Saturday_Single -- Sunday_Full -- Sunday_Short -- Sunday_Single - -### ComboBox Column Strings - -- NoMatches - - - - -## API References - - -
diff --git a/docs/xplat/src/content/en/components/grids/data-grid/overview.mdx b/docs/xplat/src/content/en/components/grids/data-grid/overview.mdx deleted file mode 100644 index 015e0a22ad..0000000000 --- a/docs/xplat/src/content/en/components/grids/data-grid/overview.mdx +++ /dev/null @@ -1,582 +0,0 @@ ---- -title: "{Platform} Data Grid Component | Real-Time {Platform} Tables | Infragistics" -description: Infragistics' {Platform} grid component helps you create a fast, real-time react data grid. Learn how {ProductName} can help you better display your data! -keywords: "{Platform} Table, Data Grid, overview, {ProductName}, data binding, Infragistics" -mentionedTypes: ["Grid", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: "{CanonicalLinkToGridMain}" ---- -import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; -import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; -import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; -import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - - - - - - - - -Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md), and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - - - - - -# {Platform} Data Grid Overview - -The {ProductName} Data Table / Data Grid is a tabular {Platform} grid component that allows you to quickly bind and display your data with little coding or configuration. Features of the {Platform} data grid include filtering, sorting, templates, row selection, row grouping, row pinning and movable columns. The {Platform} tables are optimized for live, streaming data, with the ability to handle unlimited data set size in number of rows or columns. - -## {Platform} Data Grid Example - -This demo implements some of the features that are available in the Grid: -Filtering, Grouping, Pin/Unpin columns, Reposition columns, Sorting, and Summaries - - - - - - -
- -## Getting Started - -### Dependencies - - - - - -Please refer to these topics on adding the IgniteUI.Blazor package. -- [Getting Started](../../general-getting-started.md) -- [Adding Nuget Package](../../general-nuget-feed.md) - -Afterwards, you may start implementing the control by adding the following namespaces: - -```razor -@using IgniteUI.Blazor.Controls -``` - - - - - - - - -When installing the {Platform} grid package, the core package must also be installed. - -```cmd -npm install --save {PackageCore} -npm install --save {PackageGrids} -npm install --save {PackageInputs} -``` - - - - -### Component Modules - -The `Grid` requires the following modules: - - - - - - -```razor -// in Program.cs file - -builder.Services.AddIgniteUIBlazor(typeof(IgbDataGridModule)); -``` - - - - - - - - - - -```ts -import { IgrDataGridModule } from 'igniteui-react-data-grids'; -import { IgrDataGrid } from 'igniteui-react-data-grids'; - -IgrDataGridModule.register(); -``` - - - - - - - - - - -```ts -import { ModuleManager } from 'igniteui-webcomponents-core'; -import { IgcDataGridModule } from 'igniteui-webcomponents-data-grids'; -import { IgcDataGridComponent } from 'igniteui-webcomponents-data-grids'; - -ModuleManager.register( - IgcDataGridModule -); -``` - - - - - -
- -### Optional Modules - -The optional `Grid` features, seen above, requires the following modules: - - - -```razor -// in Program.cs file - -builder.Services.AddIgniteUIBlazor( - typeof(IgbDataGridModule), - typeof(IgbDataGridToolbarModule), - typeof(IgbSparklineModule) -); -``` - - - - - -```ts -import { IgrGridColumnOptionsModule } from 'igniteui-react-data-grids'; -import { IgrDataGridToolbarModule } from "igniteui-react-data-grids"; -import { IgrSparklineModule } from 'igniteui-react-charts'; - -IgrGridColumnOptionsModule.register(); -IgrDataGridToolbarModule.register(); -IgrSparklineModule.register(); -``` - - - - - -```ts -import { IgcGridColumnOptionsModule } from 'igniteui-webcomponents-data-grids'; -import { IgcGridColumnOptionsComponent } from 'igniteui-webcomponents-data-grids'; -import { IgcDataGridToolbarModule } from 'igniteui-webcomponents-data-grids'; -import { IgcDataGridToolbarComponent } from 'igniteui-webcomponents-data-grids'; -import { IgcSparklineModule } from 'igniteui-webcomponents-charts'; -import { IgcSparklineComponent } from 'igniteui-webcomponents-charts'; - -ModuleManager.register( - IgcGridColumnOptionsModule, - IgcDataGridToolbarModule, - IgcSparklineModule -); -``` - - - - -
- -### Sample Data Source -Now that the {Platform} data grid module is imported, next is the basic configuration of the {Platform} grid that binds to local data. - -```ts - this.data = [{ - Discontinued: false, - OrderDate: new Date("2012-02-12"), - ProductID: 1, - ProductName: "Chai", - QuantityPerUnit: "10 boxes x 20 bags", - ReorderLevel: 10, - UnitPrice: 18.0000, - UnitsInStock: 39 - }, { - Discontinued: false, - OrderDate: new Date("2003-03-17"), - ProductID: 2, - ProductName: "Chang", - QuantityPerUnit: "24 - 12 oz bottles", - ReorderLevel: 25, - UnitPrice: 19.0000, - UnitsInStock: 17 - }, { - Discontinued: false, - OrderDate: new Date("2006-03-17"), - ProductID: 3, - ProductName: "Aniseed Syrup", - QuantityPerUnit: "12 - 550 ml bottles", - ReorderLevel: 25, - UnitPrice: 10.0000, - UnitsInStock: 13 - }, { - Discontinued: false, - OrderDate: new Date("2016-03-17"), - ProductID: 4, - ProductName: "Chef Antony Cajun Seasoning", - QuantityPerUnit: "48 - 6 oz jars", - ReorderLevel: 0, - UnitPrice: 22.0000, - UnitsInStock: 53 - }, { - Discontinued: true, - OrderDate: new Date("2011-11-11"), - ProductID: 5, - ProductName: "Chef Antony Gumbo Mix", - QuantityPerUnit: "36 boxes", - ReorderLevel: 0, - UnitPrice: 21.3500, - UnitsInStock: 0 - }]; -``` - - - -```razor -@code { - - public List DataSource { get; set;} - Random Rand = new Random(); - - protected override void OnInitialized() - { - GenerateData(); - } - - public void GenerateData() - { - string[] names = new string[] { - "Intel CPU", "AMD CPU", - "Intel Motherboard", "AMD Motherboard", "Nvidia Motherboard", - "Nvidia GPU", "Gigabyte GPU", "Asus GPU", "AMD GPU", "MSI GPU", - "Corsair Memory", "Patriot Memory", "Skill Memory", - "Samsung HDD", "WD HDD", "Seagate HDD", "Intel HDD", "Asus HDD", - "Samsung SSD", "WD SSD", "Seagate SSD", "Intel SSD", "Asus SSD", - "Samsung Monitor", "Asus Monitor", "LG Monitor", "HP Monitor" }; - - string[] countries = new string[] { - "USA", "UK", "France", "Canada", "Poland", - "Denmark", "Croatia", "Australia", "Seychelles", - "Sweden", "Germany", "Japan", "Ireland", - "Barbados", "Jamaica", "Cuba", "Spain", }; - string[] status = new string[] { "Packing", "Shipped", "Delivered" }; - - var sales = new List(); - - for (var i = 0; i < 200; i++) - { - var price = GetRandomNumber(10000, 90000) / 100; - var items = GetRandomNumber(4, 30); - var value = Math.Round(price * items); - var margin = GetRandomNumber(2, 5); - var profit = Math.Round((price * margin / 100) * items); - var country = GetRandomItem(countries); - - var item = new SaleInfo() - { - Country = country, - CountryFlag = GetCountryFlag(country), - Margin = margin, - OrderDate = GetRandomDate(), - OrderItems = items, - OrderValue = value, - ProductID = 1001 + i, - ProductName = GetRandomItem(names), - ProductPrice = price, - Profit = Math.Round(profit), - Status = GetRandomItem(status) - }; - sales.Add(item); - } - - this.DataSource = sales; - } - - public double GetRandomNumber(double min, double max) - { - return Math.Round(min + (Rand.NextDouble() * (max - min))); - } - - public string GetRandomItem(string[] array) - { - var index = (int)Math.Round(GetRandomNumber(0, array.Length - 1)); - return array[index]; - } - - public DateTime GetRandomDate() { - var today = new DateTime(); - var year = today.Year; - var month = this.GetRandomNumber(1, 9); - var day = this.GetRandomNumber(10, 27); - return new DateTime(year, (int)month, (int)day); - } - - public string GetCountryFlag(string country) - { - var flag = "https://static.infragistics.com/xplatform/images/flags/" + country + ".png"; - return flag; - } - - public class SaleInfo - { - public string? Status { get; set; } - public string? ProductName { get; set; } - public string? CountryFlag { get; set; } - public string? Country { get; set; } - public DateTime OrderDate { get; set; } - public double Profit { get; set; } - public double ProductPrice { get; set; } - public double ProductID { get; set; } - public double OrderValue { get; set; } - public double OrderItems { get; set; } - public double Margin { get; set; } - } -} -``` - - - -### Auto-Generate Columns -The following code demonstrates how to bind the {Platform} data grid to the above local data. - - - -```tsx - -``` - - - - - -```html - - -``` - - - - - -```ts -let grid1 = (document.getElementById("grid") as IgcDataGridComponent); -grid1.dataSource = data; -``` - - - - - -```razor - -``` - - - -### Manually Define Columns - - - -```tsx - - - - - - - -``` - - - - - -```html - - - - - - - -``` - - - - - -```ts -let grid1 = (document.getElementById("grid") as IgcDataGridComponent); -grid1.dataSource = data; -``` - - - - - -```razor - - - - - - - -``` - - - -### Styling Columns -The following code demonstrates how to style specific columns using the provided column's properties. - - - -```tsx - -``` - - - - - -```html - -``` - - - - - -```razor - -``` - - - - - - - -### Tutorial Video - -Learn more about creating a Blazor data grid in our short tutorial video: - - - - - - -## Additional Resources - -- [Accessibility Compliance](accessibility.md) -- [Cell Activation](cell-activation.md) -- [Grid Editing](cell-editing.md) -- [Cell Selection](cell-selection.md) -- [Column Animation](column-animation.md) -- [Column Chooser](column-chooser.md) -- [Column Filtering](column-filtering.md) -- [Column Moving](column-moving.md) -- [Column Options](column-options.md) -- [Column Resizing](column-resizing.md) -- [Column Sorting](column-sorting.md) -- [Column Types](column-types.md) -- [Performance](performance.md) -- [Row Pinning](row-pinning.md) -- [Row Grouping](row-grouping.md) -- [Row Highlighting](row-highlighting.md) - -{/* TODO fix build flagging list items */} - - - - -{/* - [Row Paging](row-paging.md) */} - - - - -## API References - - -
diff --git a/docs/xplat/src/content/en/components/grids/data-grid/performance.mdx b/docs/xplat/src/content/en/components/grids/data-grid/performance.mdx deleted file mode 100644 index b1c61c4e42..0000000000 --- a/docs/xplat/src/content/en/components/grids/data-grid/performance.mdx +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: "{Platform} Data Grid | Performance | Infragistics" -description: Use the Infragistics' {Platform} table for high performance data scenarios. Scroll through an unlimited number of rows and columns with full virtualization. View {ProductName} table tutorials! -keywords: "{Platform} Table, Data Grid, performance, {ProductName}, Infragistics, data binding" -mentionedTypes: ["Grid", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: "{CanonicalLinkToGridMain}" ---- -import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; -import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; -import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; -import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - - - - - - - -Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md) component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - - - - - -# {Platform} High Performance with Live Data - -The {ProductName} Data Table / Data Grid is optimized for high-performance with live data scenarios. With fast load time, smooth scrolling with zero lag time or screen flicker, you can seamlessly scroll through an unlimited number of rows and columns in your {Platform} data grid application with full virtualization of grid's columns and rows. - -## {Platform} High Performance with Live Data Example - -This sample demonstrates this performance by binding thousands of financial records to the {Platform} data grid, grouping them by 1 column (eg. Territory), and live-updating multiple columns every couple of milliseconds. You can change various options in real-time and the Data Grid performance with no lag, screen flicker, or visual delay - - - - - - - -
- - -## Additional Resources - - - - - -{/* TODO fix build flagging list items */} -{/* - [Binding Virtual Data](remote-data.md) */} - - - -- [Column Types](column-types.md) -- [Row Grouping](row-grouping.md) - - -## API References - - -
diff --git a/docs/xplat/src/content/en/components/grids/data-grid/remote-data.mdx b/docs/xplat/src/content/en/components/grids/data-grid/remote-data.mdx deleted file mode 100644 index 44b17d2cc2..0000000000 --- a/docs/xplat/src/content/en/components/grids/data-grid/remote-data.mdx +++ /dev/null @@ -1,152 +0,0 @@ ---- -title: "{Platform} Data Grid | Remote Data | Infragistics" -description: Use the Infragistics {Platform} grid component's Virtual Data Source to bind remote data. View {ProductName} table tutorials! -keywords: "{Platform} Table, Data Grid, virtual data, {ProductName}, Infragistics, data binding" -mentionedTypes: ["Grid", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: "{CanonicalLinkToGridMain}" ---- -import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; -import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; -import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; -import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - - - - - - - -Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md) component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - - - - - -# {Platform} Grid Binding Virtual Data - -The {ProductName} Data Table / Data Grid supports data binding to remote datasources with one line of code. With the {Platform} data table’s Virtual Data Source, you simply configure the {Platform} grid with your remote URI and which OData Entity you’d like returned, and the {Platform} grid does the rest of the work for you. - -## {Platform} Grid Binding Virtual Data Example - - - - - - - -
- - - - -In addition to the core and {Platform} data grid packages you will also have to install the datasources package. - -- **npm install --save {PackageCore}** -- **npm install --save {PackageGrids}** -- **npm install --save {PackageInputs}** -- **npm install --save {PackageDataSources}** - - - - - -## Component Modules - -The requires the following modules: - - - -```razor -// in Program.cs file - -builder.Services.AddIgniteUIBlazor(typeof(IgbDataGridModule)); -``` - - - - - -```ts -import './odatajs-4.0.0'; -import { IgrDataGridModule } from 'igniteui-react-data-grids'; -import { IgrDataGrid } from 'igniteui-react-data-grids'; -import { ODataVirtualDataSource } from 'igniteui-react-datasources'; - -IgrDataGridModule.register(); -``` - - - - - -```ts -import './odatajs-4.0.0'; -import { ModuleManager } from 'igniteui-webcomponents-core'; -import { IgcDataGridModule } from 'igniteui-webcomponents-data-grids'; -import { IgcDataGridComponent } from 'igniteui-webcomponents-data-grids'; -import { ODataVirtualDataSource } from 'igniteui-webcomponents-dataSource'; - -ModuleManager.register(IgcDataGridModule); -``` - - - -
- -## Code Snippet - -Now that the {Platform} data grid module is imported, the next step is the basic configuration of the {Platform} grid that binds to remote data. Create the virtual data source. Assign the url where the data will be retrieved from to the baseUri property. Setting the entitySet property will inform which table to retrieve from the virtual data source. - - - -```tsx - -``` - - - - - -```html - - -``` - - - -Assign the data source to the grid. - -```ts -private virtualData: ODataVirtualDataSource; -// ... -const vds = new ODataVirtualDataSource(); -vds.baseUri = ("https://services.odata.org/V4/Northwind/Northwind.svc"); -vds.entitySet = ("Orders"); -this.virtualData = vds; -``` - - - -```ts -const vds = new ODataVirtualDataSource(); -vds.baseUri = ("https://services.odata.org/V4/Northwind/Northwind.svc"); -vds.entitySet = ("Orders"); - -let grid1 = (document.getElementById("grid") as IgcDataGridComponent); -grid1.dataSource = vds; -``` - - - - -## API References - -
diff --git a/docs/xplat/src/content/en/components/grids/data-grid/row-grouping.mdx b/docs/xplat/src/content/en/components/grids/data-grid/row-grouping.mdx deleted file mode 100644 index 42f2ed5095..0000000000 --- a/docs/xplat/src/content/en/components/grids/data-grid/row-grouping.mdx +++ /dev/null @@ -1,243 +0,0 @@ ---- -title: "{Platform} Data Grid | Row Grouping | Infragistics" -description: Use Infragistics' {Platform} grid component's Group Row feature to group rows into a sticky header Row Group. This is an easy way to visually group data based on your criteria. Check out {ProductName} table demos! -keywords: "{Platform} Table, Data Grid, row grouping, groupby area, {ProductName}, Infragistics" -mentionedTypes: ["Grid", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: "{CanonicalLinkToGridGroupBy}" ---- -import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; -import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; -import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; -import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - - - - - - - -Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md) component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - - - - - -# {Platform} Row Grouping - -The {ProductName} Data Table / Data Grid lets you group rows into a ‘sticky header’ Row Group. This is similar to the Group By feature in Microsoft Outlook, which is an easy way to visually group data based on your own criteria. - -## {Platform} Row Group-By Area Example - - - - - - -
- -## Group-By Area - -Set `IsGroupByAreaVisible` property on the DataGrid to True, as shown in the example above, to the user interface. The group-by area allows users more options to group and sort columns without interact when interacting the DataGrid indirectly. Groups can be positioned and reordered based on the users needs. This area also populates when columns are programmatically added as `GroupDescriptions` on the DataGrid as well. - -## Using Group Descriptions Example - - - - - - -
- -## Hierarchical Groups - -The `GroupHeaderDisplayMode` property allows the groups to be hierarchical. By default, each group description that is added gets aggregated together. Setting the `GroupHeaderDisplayMode` to `Split` will create a section header for ever group defined in `GroupDescriptions` property of the `Grid`. - - - -```ts -import { GroupHeaderDisplayMode } from 'igniteui-react-core'; - -public componentDidMount() { - // ... - this.grid.groupHeaderDisplayMode = GroupHeaderDisplayMode.Split; -} -``` - - - - - -```ts -import { GroupHeaderDisplayMode } from 'igniteui-webcomponents-core'; - -public connectedCallback() { - // ... - this.grid.groupHeaderDisplayMode = GroupHeaderDisplayMode.Split; -} -``` - - - - - - -```razor - -``` - - - -## Collapsible Groups - -Also, the `Grid` can display a toggle on each group section to allow the end user to expand or collapse the grouped data via the `IsGroupCollapsable` property. - - -```ts -public componentDidMount() { - // ... - this.grid.isGroupCollapsable = true; -} -``` - - - - - -```ts -public connectedCallback() { - // ... - this.grid.isGroupCollapsable = true; -} -``` - - - - - - -```razor - -``` - - - -## Summary - -For your convenience, all above code snippets are combined into one code block below that you can easily copy to your project. - - - - -```ts -import { IgrColumnGroupDescription } from 'igniteui-react-data-grids'; -import { ListSortDirection } from 'igniteui-react-core'; -import { GroupHeaderDisplayMode } from 'igniteui-react-core'; - -public componentDidMount() { - window.addEventListener('load', this.onLoad); -} - -public onLoad() { - const state = new IgrColumnGroupDescription(); - state.field = "Country"; - state.displayName = "Location"; - state.sortDirection = ListSortDirection.Descending; - const city = new IgrColumnGroupDescription(); - city.field = "City"; - city.displayName = ""; - const income = new IgrColumnGroupDescription(); - income.field = "Income"; - income.displayName = "Income"; - - this.grid.groupDescriptions.add(state); - this.grid.groupDescriptions.add(city); - this.grid.groupDescriptions.add(income); - - this.grid.isGroupCollapsable = true; - this.grid.groupHeaderDisplayMode = GroupHeaderDisplayMode.Split; -} -``` - - - - - -```ts -import { IgcIgcColumnGroupDescription } from 'igniteui-webcomponents-data-grids'; -import { ListSortDirection } from 'igniteui-webcomponents-core'; -import { GroupHeaderDisplayMode } from 'igniteui-webcomponents-core'; - -public connectedCallback() { - const state = new IgcColumnGroupDescription(); - state.field = "Country"; - state.displayName = "Location"; - state.sortDirection = ListSortDirection.Descending; - const city = new IgcColumnGroupDescription(); - city.field = "City"; - city.displayName = ""; - const income = new IgcColumnGroupDescription(); - income.field = "Income"; - income.displayName = "Income"; - - this.grid = document.getElementById("grid") as IgcDataGridComponent; - this.grid.groupDescriptions.add(state); - this.grid.groupDescriptions.add(city); - this.grid.groupDescriptions.add(income); - - this.grid.isGroupCollapsable = true; - this.grid.groupHeaderDisplayMode = GroupHeaderDisplayMode.Split; -} -``` - - - - - -```razor - - -@code { - private IgbDataGrid grid; - public IgbDataGrid DataGridRef - { - get - { - return grid; - } - set - { - grid = value; - OnGridCreated(); - StateHasChanged(); - } - } - - private void OnGridCreated() - { - var state = new ColumnGroupDescription { Field = "Country", DisplayName = "Location" }; - var city = new ColumnGroupDescription { Field = "City", DisplayName = "City" }; - var income = new ColumnGroupDescription { Field = "Income", DisplayName = "Income" }; - - this.DataGridRef.GroupDescriptions.Add(state); - this.DataGridRef.GroupDescriptions.Add(city); - this.DataGridRef.GroupDescriptions.Add(income); - } -} -``` - - - - -## API References - -
-
diff --git a/docs/xplat/src/content/en/components/grids/data-grid/row-highlighting.mdx b/docs/xplat/src/content/en/components/grids/data-grid/row-highlighting.mdx deleted file mode 100644 index c444a249d3..0000000000 --- a/docs/xplat/src/content/en/components/grids/data-grid/row-highlighting.mdx +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: "{Platform} Data Grid | Row Highlighting | Infragistics" -description: Configuring the row highlight of the Infragistics' {Platform} data grid on mouse over. Learn how to configure row highlight for the {ProductName} table. -keywords: "{Platform} Table, Data Grid, row highlighting, {ProductName}, Infragistics" -mentionedTypes: ["Grid", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: "{CanonicalLinkToGridMain}" ---- -import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; -import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; -import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; -import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - - - - - - - -Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md) component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - - - - - -# {Platform} Grid Highlighting - -The {ProductName} Data Table / Data Grid supports configuring the appearance of row highlighting. - -## {Platform} Grid Highlighting Example - - - - - - - -
- -## Overview - -Highlighting records in the {Platform} data can be toggled by setting the boolean property of the {Platform} grid. Note, this is enabled by default. - -In addition, the color is configurable by setting the string property to a hex value. - -## Code Snippet - -The following demonstrates how to enable row highlighting on the {Platform} data grid and applies the color blue: - - - -```tsx - -``` - - - - - -```html - - -``` - - - - - -```razor - -``` - - - - -## API References - -
diff --git a/docs/xplat/src/content/en/components/grids/data-grid/row-paging.mdx b/docs/xplat/src/content/en/components/grids/data-grid/row-paging.mdx deleted file mode 100644 index 84c3110d1e..0000000000 --- a/docs/xplat/src/content/en/components/grids/data-grid/row-paging.mdx +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: "{Platform} grid/table pagination – {ProductName} " -description: View Infragistics' {Platform} grid component's Pager, which was designed to take in an array of data and output portions of that data as a page. -keywords: "{Platform} Table, Data Grid, row, paging, {ProductName}, Infragistics" -mentionedTypes: ["Grid", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: "{CanonicalLinkToGridPaging}" ---- -import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; -import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; -import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; -import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - - - - - - - -Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md) component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - - - - - -# {Platform} Grid/Table Pagination - -Tabular table UIs are used commonly in many web products. Building a tabular table UI from scratch isn't easy, however, {ProductName} grid, creating a Table UI is simple, and binding large amounts of local or remote data to the {Platform} grid is easy. Since the grid is virtualized by default, you are not required to include table pagination to show large data sets. It is mainly used due to its most efficient ways of organizing complex data in the UI. With table pagination, data can be displayed in a set number of rows, letting users “scroll” through their data, without actually needing a scroll bar. The UI for table pagination usually includes things like the current page, total pages, and clickable Previous and Next arrows / buttons that let users flip through pages, as demonstrated here: - -Row Paging is enabled within the {ProductName} Data Table / Data Grid by setting the property. In addition, you can limit the maximum number of visible rows by setting . - -## {Platform} Row Paging Example - - - - - - -
- -## Overview - -From a UX perspective, table pagination has pros and cons. According to a [recent article](https://www.uxmatters.com/mt/archives/2018/11/paging-scrolling-and-infinite-scroll.php) on UX Matters, here is a breakdown of the good and the bad when it comes to table pagination. - -Table Pagination Benefits: - -- Limits user choice -- Clicks are measurable - -Table Pagination Negatives: - -- Users still have to scrolls -- Pagers work and behave differently from site to site -- Too many UI controls can be confusing -- Users perceive paging and slow and cumbersome -- Users may not notice pagination controls -- Page loading may be slow -- Users are confused whether actions apply to Page or entire set of data - -With the Ignite UI {Platform} grid, we allow the developer to add paging, however, as the grid has infinite scrolling built in by default, we recommend infinite (or virtual) scrolling vs. adding a pager to the grid. With virtualized, infinite scrolling as the default user experience, you get: - -- Best performance while still having control or how much data is ‘paged’ via the scrolling interaction -- Natural approach to scrolling all content -- All interactions are clear to the end user -- Maps to the natural interactions on a mobile UX - -## {Platform} Grid/Page Synchronization - -When users interact with the Grid like sorting and grouping, and you have enabled the {Platform} Pager on the grid, you need to use the following functions to ensure that the {Platform} Pagination data is synchronized with the {Platform} table display. - -- applySorts -- applyGroups -- applyFilters - - -## API References - -
diff --git a/docs/xplat/src/content/en/components/grids/data-grid/row-pinning.mdx b/docs/xplat/src/content/en/components/grids/data-grid/row-pinning.mdx deleted file mode 100644 index f588f7252b..0000000000 --- a/docs/xplat/src/content/en/components/grids/data-grid/row-pinning.mdx +++ /dev/null @@ -1,116 +0,0 @@ ---- -title: "{Platform} Data Grid | Row Pinning | Infragistics" -description: Use Infragistics' {Platform} grid component's row pinning feature in order to lock row change row order with a rich and easy to use API. Check out {ProductName} table demos! -keywords: "{Platform} Table, Data Grid, row pinning, {ProductName}, Infragistics" -mentionedTypes: ["Grid", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: "{CanonicalLinkToGridRowPinning}" ---- -import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; -import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; -import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; -import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - - - - - - - -Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md) component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - - - - - -# {Platform} Row Pinning - - The {ProductName} Data Table / Data Grid allows Row Pinning by either using keys or the underlying data source items. When a row is pinned, it will be duplicated at the top of the {PlatformLower} data grid and remain fixed there with light gray background and its actual row will be rendered with low opacity. - -## {Platform} Row Pinning Example - - - - - - - -
- -You can pin rows in the {Platform} data grid by adding the target row’s underlying data item to the collection of the {Platform} grid. - -## Code Snippet - - - -```ts -public onGridRef(grid: IgrDataGrid) { - this.grid = grid; - this.grid.pinnedItems.add(this.data[2]); - this.grid.pinnedItems.add(this.data[4]); -} -``` - - - - - -```html - - -``` - - - - - -```ts -let grid1 = (document.getElementById("grid") as IgcDataGridComponent); -grid1.dataSource = data; -grid1.pinnedItems.add(data[2]); -grid1.pinnedItems.add(data[4]); -``` - - - - - -```razor - - -@code { - - private IgbDataGrid grid; - public IgbDataGrid DataGridRef - { - get - { - return grid; - } - set - { - grid = value; - OnGridChanged(); - StateHasChanged(); - } - } - - private void OnGridChanged() - { - grid.PinnedItems.Add(this.DataSource[2] as Employee); - grid.PinnedItems.Add(this.DataSource[4] as Employee); - } -} -``` - - - - -## API References - - -
diff --git a/docs/xplat/src/content/en/components/grids/data-grid/type-comparison-table.mdx b/docs/xplat/src/content/en/components/grids/data-grid/type-comparison-table.mdx deleted file mode 100644 index 3b428732f2..0000000000 --- a/docs/xplat/src/content/en/components/grids/data-grid/type-comparison-table.mdx +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: "{Platform} Data Grid | Comparison Table | Data Binding | Infragistics" -description: Use Infragistics' {Platform} grid component to bind to comparison data. View our {ProductName} table demos! -keywords: "{Platform} Table, Data Grid, column template, comparison data, {ProductName}, data binding, Infragistics" -mentionedTypes: ["Grid", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: "{CanonicalLinkToGridMain}" ---- -import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; -import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; -import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; -import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - - - - - - - -Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md) component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - - - - - -# {Platform} Binding Comparison Data - -The {ProductName} Data Table / Data Grid supports [template columns](column-types.md#template-column) to insert images. - -## {Platform} Binding Comparison Data Example - - - - - -## API References - - - - -
diff --git a/docs/xplat/src/content/en/components/grids/data-grid/type-heatmap-table.mdx b/docs/xplat/src/content/en/components/grids/data-grid/type-heatmap-table.mdx deleted file mode 100644 index 966a05e5bc..0000000000 --- a/docs/xplat/src/content/en/components/grids/data-grid/type-heatmap-table.mdx +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: "{Platform} Data Grid | HeatMap Table | Data Binding | Infragistics" -description: Use Infragistics' {Platform} grid component's template columns to create a heatmap table. View our {ProductName} table demos! -keywords: "{Platform} Table, Data Grid, column template, heatmap table, {ProductName}, data binding, Infragistics" -mentionedTypes: ["Grid", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: "{CanonicalLinkToGridMain}" ---- -import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; -import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; -import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; -import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - - - - - - - -Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md) component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - - - - - -# {Platform} Binding Heatmap Data - -The {ProductName} Data Table / Data Grid supports [template columns](column-types.md#template-column) to create a heatmap. - -## {Platform} Binding Heatmap Data Example - - - - - -## API References - - - - -
diff --git a/docs/xplat/src/content/en/components/grids/data-grid/type-matrix-table.mdx b/docs/xplat/src/content/en/components/grids/data-grid/type-matrix-table.mdx deleted file mode 100644 index a4ff8c4b7a..0000000000 --- a/docs/xplat/src/content/en/components/grids/data-grid/type-matrix-table.mdx +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: "{Platform} Data Grid | Matrix Data | Data Binding | Infragistics" -description: Use Infragistics' {Platform} grid component's template columns to create a matrix table. View our {ProductName} table demos! -keywords: "{Platform} Table, Data Grid, column template, matrix table, {ProductName}, data binding, Infragistics" -mentionedTypes: ["Grid", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: "{CanonicalLinkToGridMain}" ---- -import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; -import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; -import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; -import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - - - - - - - -Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md) component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - - - - - -# {Platform} Binding Matrix Data - -The {ProductName} Data Table / Data Grid supports [template columns](column-types.md#template-column) to create a matrix table. - -## {Platform} Binding Matrix Data Example - - - - - -## API References - - - - -
diff --git a/docs/xplat/src/content/en/components/grids/data-grid/type-periodic-table.mdx b/docs/xplat/src/content/en/components/grids/data-grid/type-periodic-table.mdx deleted file mode 100644 index 6acc58209d..0000000000 --- a/docs/xplat/src/content/en/components/grids/data-grid/type-periodic-table.mdx +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: "{Platform} Data Grid | Periodic Table | Data Binding | Infragistics" -description: Use Infragistics' {Platform} grid component's template columns to create a periodic table. View our {ProductName} table demos! -keywords: "{Platform} Table, Data Grid, column template, periodic table, {ProductName}, data binding, Infragistics" -mentionedTypes: ["Grid", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: "{CanonicalLinkToGridMain}" ---- -import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; -import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; -import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; -import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - - - - - - - -Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md) component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - - - - - -# {Platform} Binding Periodic Table - -The {ProductName} Data Table / Data Grid supports [template columns](column-types.md#template-column) to create a periodic table. - -## {Platform} Binding Periodic Table Example - - - - - -## API References - - - - -
diff --git a/docs/xplat/src/content/en/components/grids/data-grid/type-sparkline-table.mdx b/docs/xplat/src/content/en/components/grids/data-grid/type-sparkline-table.mdx deleted file mode 100644 index 8e2f9de220..0000000000 --- a/docs/xplat/src/content/en/components/grids/data-grid/type-sparkline-table.mdx +++ /dev/null @@ -1,198 +0,0 @@ ---- -title: "{Platform} Data Grid | Column Sparkline | Infragistics" -description: See how {ProductName} Data Table & Grid supports a template column which provides you a way to embed other components such as the column sparkline. -keywords: "{Platform} Table, Data Grid, column sparkline, {ProductName}, data binding, Infragistics" -mentionedTypes: ["Grid", "CellInfo", "TemplateCellInfo", "Sparkline"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: "{CanonicalLinkToGridMain}" ---- -import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; -import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; -import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; -import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - - - - - - - -Please note that this control has been deprecated and replaced with the [Grid](../data-grid.md) component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support. - - - - - -# {Platform} Column Sparkline - -The {ProductName} Data Table / Data Grid supports a Template Column which provides you to a way to embed other components such as {ProductName} sparkline component. Refer to the [Column Types](column-types.md) topic for other types of columns supported in the component. - -## {Platform} Column Sparkline Example - - - - - - - -
- -## Code Snippet - -The following code example shows how to embed `Sparkline` component in of the component: - - - -```tsx - - {/* ... */} - - {/* ... */} - -``` - - - - - -```ts -import { IgrDataGrid } from 'igniteui-react-data-grids'; -import { IgrTemplateColumn, IIgrCellTemplateProps } from 'igniteui-react-data-grids'; - -public getOrderHistoryTemplate(props: IIgrCellTemplateProps) { - const info = props.dataContext as IgrTemplateCellInfo; - return ( -
- -
- ); -} -``` - - - - - -```html - - - - - -``` - - - - - -```ts -import { IgcDataGridModule } from 'igniteui-webcomponents-data-grids'; -import { IgcDataGridComponent } from 'igniteui-webcomponents-data-grids'; -import { IgcTemplateColumnComponent } from 'igniteui-webcomponents-data-grids'; -import { IgcTemplateCellInfo } from 'igniteui-webcomponents-data-grids'; -import { IgcTemplateCellUpdatingEventArgs } from 'igniteui-webcomponents-data-grids'; -import { IgcSparklineModule } from 'igniteui-webcomponents-charts'; -import { IgcSparklineComponent } from 'igniteui-webcomponents-charts'; - -// registering Grid and Sparkline chart's modules: -ModuleManager.register(IgcDataGridModule); -ModuleManager.register(IgcSparklineModule); - -constructor() { -this.grid = document.getElementById("grid") as IgcDataGridComponent; -this.grid.dataSource = Products.getData(); - -this.onUpdatingHistoryColumn = this.onUpdatingHistoryColumn.bind(this); - -const historyColumn = document.getElementById("historyColumn") as IgcTemplateColumnComponent; -historyColumn.cellUpdating = this.onUpdatingHistoryColumn; -} - -public onUpdatingHistoryColumn(s: IgcTemplateColumnComponent, e: IgcTemplateCellUpdatingEventArgs) { - const content = e.content as HTMLDivElement; - let chart: IgcSparklineComponent | null = null; - let info = e.cellInfo as IgcTemplateCellInfo; - - if (content.childElementCount === 0) { - chart = new IgcSparklineComponent(); - chart.valueMemberPath = "Sold"; - chart.labelMemberPath = "Week"; - chart.displayType = SparklineDisplayType.Line; - chart.lineThickness = 2; - chart.brush = "rgb(21, 190, 6)"; - chart.negativeBrush = "rgb(211, 17, 3)"; - chart.width = "100%"; - chart.height = "100%"; - - content.style.width = "calc(100% - 10px)"; - content.style.height = "calc(100% - 10px)"; - content.style.padding = "5px"; - content.style.margin = "0px"; - content.style.display = "inline-grid"; - content.appendChild(chart); - } - else { - chart = content.children[0] as IgcSparklineComponent; - } - - if (chart) { - chart.dataSource = info.rowItem.OrderHistory; - } -} -``` - - - - - -```razor - - 180")" HeaderText="Order History" > - - - -``` - - - - -## API References - -
-
diff --git a/docs/xplat/src/content/en/components/grids/grid/groupby.mdx b/docs/xplat/src/content/en/components/grids/grid/groupby.mdx index b8462ca209..acb39b92bf 100644 --- a/docs/xplat/src/content/en/components/grids/grid/groupby.mdx +++ b/docs/xplat/src/content/en/components/grids/grid/groupby.mdx @@ -269,9 +269,9 @@ Up until now, grouping/sorting worked in conjunction with each other. In 13.2 ve ### Expand/Collapse API -In addition to grouping expressions you can also control the expansion states for group rows. They are stored in a separate property of the component which is a collection of . Each expansion state is uniquely defined by the field name it is created for and the value it represents for each level of grouping, i.e. the identifier is a hierarchy array of . +In addition to grouping expressions you can also control the expansion states for group rows. They are stored in a separate property of the component which is a collection of . Each expansion state is uniquely defined by the field name it is created for and the value it represents for each level of grouping, i.e. the identifier is a hierarchy array of . -As with , setting a list of directly to the will change the expansion accordingly. Additionally exposes a method that toggles a group by the group record instance or via the property of the row. +As with , setting a list of directly to the will change the expansion accordingly. Additionally exposes a method that toggles a group by the group record instance or via the property of the row. @@ -409,7 +409,7 @@ this.grid.DeselectRowsInGroup(row.GroupRow); ### Group Row Templates -The group row except for the expand/collapse UI is fully templatable. By default it renders a grouping icon and displays the field name and value it represents. The context to render the template against is of type . +The group row except for the expand/collapse UI is fully templatable. By default it renders a grouping icon and displays the field name and value it represents. The context to render the template against is of type . As an example, the following template would make the group rows summary more verbose: @@ -466,7 +466,7 @@ igRegisterScript("WebGridGroupByRowTemplate", (ctx) => { As mentioned above the group row except for the expand/collapse UI is fully templatable. To create a custom Group By row selector template use `GroupByRowSelectorTemplate`. From the template, you can access the implicitly provided context variable, with properties that give you information about the Group By row's state. -The property shows how many of the group records are currently selected while shows how many records belong to the group. +The property shows how many of the group records are currently selected while shows how many records belong to the group. ```html @@ -513,7 +513,7 @@ igRegisterScript("GroupByRowSelectorTemplate", (ctx) => { -The property returns a reference to the group row. +The property returns a reference to the group row. ```html @@ -561,7 +561,7 @@ igRegisterScript("GroupByRowSelectorTemplate", (ctx) => { -The and properties can be used to determine if the Group By row selector should be checked or indeterminate (partially selected). +The and properties can be used to determine if the Group By row selector should be checked or indeterminate (partially selected). @@ -927,8 +927,8 @@ The sample will not be affected by the selected global theme from **Change Theme ## API References -
-
+
+

## Additional Resources diff --git a/docs/xplat/src/content/en/components/grids/grid/icons.mdx b/docs/xplat/src/content/en/components/grids/grid/icons.mdx index 4f27af5055..d9e7b55e5c 100644 --- a/docs/xplat/src/content/en/components/grids/grid/icons.mdx +++ b/docs/xplat/src/content/en/components/grids/grid/icons.mdx @@ -14,9 +14,16 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; The {ProductName} icons can be customized to use custom icons from a different collection set using the exposed API methods: + - - - + + +- +- +- + Registering an icon caches it locally, so that it can reused between components, that reference that icon by name and collection name. Setting a reference changes which icon, from which collection, will be used when referencing that icon by name. diff --git a/docs/xplat/src/content/en/components/grids/grid/master-detail.mdx b/docs/xplat/src/content/en/components/grids/grid/master-detail.mdx index 169537191e..a37e9c1a26 100644 --- a/docs/xplat/src/content/en/components/grids/grid/master-detail.mdx +++ b/docs/xplat/src/content/en/components/grids/grid/master-detail.mdx @@ -183,6 +183,6 @@ Additional API methods for controlling the expansion states are also exposed: ## API References -
-
-
+
+
+
diff --git a/docs/xplat/src/content/en/components/grids/grid/paste-excel.mdx b/docs/xplat/src/content/en/components/grids/grid/paste-excel.mdx index 3194c66883..fd03e1c4c2 100644 --- a/docs/xplat/src/content/en/components/grids/grid/paste-excel.mdx +++ b/docs/xplat/src/content/en/components/grids/grid/paste-excel.mdx @@ -656,7 +656,7 @@ export class PasteHandler { ## API References -
+
## Additional Resources diff --git a/docs/xplat/src/content/en/components/grids/grid/selection-based-aggregates.mdx b/docs/xplat/src/content/en/components/grids/grid/selection-based-aggregates.mdx index 196441a537..ad529dd406 100644 --- a/docs/xplat/src/content/en/components/grids/grid/selection-based-aggregates.mdx +++ b/docs/xplat/src/content/en/components/grids/grid/selection-based-aggregates.mdx @@ -65,8 +65,8 @@ Change the selection to see summaries of the currently selected range. ## API References -
-
+
+
## Additional Resources
diff --git a/docs/xplat/src/content/en/components/grids/hierarchical-grid/load-on-demand.mdx b/docs/xplat/src/content/en/components/grids/hierarchical-grid/load-on-demand.mdx index d995dab986..4433935143 100644 --- a/docs/xplat/src/content/en/components/grids/hierarchical-grid/load-on-demand.mdx +++ b/docs/xplat/src/content/en/components/grids/hierarchical-grid/load-on-demand.mdx @@ -1085,8 +1085,8 @@ igRegisterScript("OnGridCreated", (args) => { ## API References -
-
+
+
## Additional Resources diff --git a/docs/xplat/src/content/en/components/grids/hierarchical-grid/overview.mdx b/docs/xplat/src/content/en/components/grids/hierarchical-grid/overview.mdx index a2131437f9..0599d6576d 100644 --- a/docs/xplat/src/content/en/components/grids/hierarchical-grid/overview.mdx +++ b/docs/xplat/src/content/en/components/grids/hierarchical-grid/overview.mdx @@ -1020,8 +1020,8 @@ Then set the `--header-background` and `--header-text-color` CSS properties for ## API References -
-
-
-
-
+
+
+
+
+
diff --git a/docs/xplat/src/content/en/components/grids/pivot-grid/features.mdx b/docs/xplat/src/content/en/components/grids/pivot-grid/features.mdx index ec496c4b0f..e1902a332d 100644 --- a/docs/xplat/src/content/en/components/grids/pivot-grid/features.mdx +++ b/docs/xplat/src/content/en/components/grids/pivot-grid/features.mdx @@ -295,8 +295,8 @@ The chips from the {PivotGridTitle} can not be moved to the Pivot Data Selector ## API References -
-
+
+
## Additional Resources diff --git a/docs/xplat/src/content/en/components/grids/pivot-grid/overview.mdx b/docs/xplat/src/content/en/components/grids/pivot-grid/overview.mdx index 0071acdf2a..4dbcf29bcd 100644 --- a/docs/xplat/src/content/en/components/grids/pivot-grid/overview.mdx +++ b/docs/xplat/src/content/en/components/grids/pivot-grid/overview.mdx @@ -832,11 +832,11 @@ When overriding the `PivotKeys` in Blazor, currently you will need to define all ## API References -
-
-
-
-
+
+
+
+
+
## Additional Resources diff --git a/docs/xplat/src/content/en/components/grids/pivot-grid/remote-operations.mdx b/docs/xplat/src/content/en/components/grids/pivot-grid/remote-operations.mdx index 9d13aabbf7..7f8f3b5c16 100644 --- a/docs/xplat/src/content/en/components/grids/pivot-grid/remote-operations.mdx +++ b/docs/xplat/src/content/en/components/grids/pivot-grid/remote-operations.mdx @@ -226,8 +226,8 @@ public noopSortStrategy = NoopSortingStrategy.instance(); ## API References -
-
+
+
## Additional Resources diff --git a/docs/xplat/src/content/en/components/grids/tree-grid/load-on-demand.mdx b/docs/xplat/src/content/en/components/grids/tree-grid/load-on-demand.mdx index 7ab1520a6f..9df3b61cd3 100644 --- a/docs/xplat/src/content/en/components/grids/tree-grid/load-on-demand.mdx +++ b/docs/xplat/src/content/en/components/grids/tree-grid/load-on-demand.mdx @@ -153,7 +153,7 @@ If you want to provide your own custom loading indicator, you may create an ng-t ## API References -
+
## Additional Resources diff --git a/docs/xplat/src/content/en/components/grids/tree-grid/overview.mdx b/docs/xplat/src/content/en/components/grids/tree-grid/overview.mdx index cb245fb524..db2b75acc4 100644 --- a/docs/xplat/src/content/en/components/grids/tree-grid/overview.mdx +++ b/docs/xplat/src/content/en/components/grids/tree-grid/overview.mdx @@ -554,10 +554,10 @@ Then set the related CSS properties for that class: -
-
-
-
+
+
+
+
## Additional Resources diff --git a/docs/xplat/src/content/en/components/inputs/icon-button.mdx b/docs/xplat/src/content/en/components/inputs/icon-button.mdx index d9dcb1d483..1da4dc2b7c 100644 --- a/docs/xplat/src/content/en/components/inputs/icon-button.mdx +++ b/docs/xplat/src/content/en/components/inputs/icon-button.mdx @@ -273,9 +273,6 @@ igc-icon-button::part(icon) { ## API References - - -



diff --git a/docs/xplat/src/content/en/components/inputs/query-builder.mdx b/docs/xplat/src/content/en/components/inputs/query-builder.mdx index 5946d277c5..d1b7034619 100644 --- a/docs/xplat/src/content/en/components/inputs/query-builder.mdx +++ b/docs/xplat/src/content/en/components/inputs/query-builder.mdx @@ -64,8 +64,8 @@ Clicking on the (AND or OR) button placed above each group, will open a menu wit Since every condition is related to a specific field from a particular entity changing the entity will lead to resetting all preset conditions and groups. -You can start using the component by setting the property to an array describing the entity name and an array of its fields, where each field is defined by its name and data type. Once a field is selected it will automatically assign the corresponding operands based on the data type. -The Query Builder has the property. You could use it to set an initial state of the control and access the user-specified filtering logic. +You can start using the component by setting the property to an array describing the entity name and an array of its fields, where each field is defined by its name and data type. Once a field is selected it will automatically assign the corresponding operands based on the data type. +The Query Builder has the property. You could use it to set an initial state of the control and access the user-specified filtering logic. @@ -236,7 +236,7 @@ The {ProductName} Query Builder allows defining templates for the component's he ### Header Template -By default the header would not be displayed. In order to define such, the component should be added inside the query builder. +By default the header would not be displayed. In order to define such, the component should be added inside the query builder. @@ -251,7 +251,7 @@ By default the header would not be displayed. In ### Search Value Template -The search value of a condition can be templated by setting the property to a function that returns a lit-html template. +The search value of a condition can be templated by setting the property to a function that returns a lit-html template. When using `SearchValueTemplate`, you must provide templates for all field types in your entity, or the query builder will not function correctly. It is mandatory to implement a default/fallback template that handles any fields or conditions not covered by specific custom templates. Without this, users will not be able to edit @@ -760,8 +760,8 @@ We’ve created this example to show you the templating and formatter functional ## API References -
-
+
+
## Additional Resources diff --git a/docs/xplat/src/content/en/components/inputs/tooltip.mdx b/docs/xplat/src/content/en/components/inputs/tooltip.mdx index 3cce21169f..4f93a7e4ee 100644 --- a/docs/xplat/src/content/en/components/inputs/tooltip.mdx +++ b/docs/xplat/src/content/en/components/inputs/tooltip.mdx @@ -368,7 +368,7 @@ It's important to note that the Tooltip API methods — can also be positioned relative to its target element with ease. All you need to do is use the property along with one of the options. +The can also be positioned relative to its target element with ease. All you need to do is use the property along with one of the PopoverPlacement options. If the property is not set, the default value is `Bottom`, which places the below the target element. diff --git a/docs/xplat/src/content/en/components/layouts/dock-manager-customization.mdx b/docs/xplat/src/content/en/components/layouts/dock-manager-customization.mdx index a8637baa69..6546dd733e 100644 --- a/docs/xplat/src/content/en/components/layouts/dock-manager-customization.mdx +++ b/docs/xplat/src/content/en/components/layouts/dock-manager-customization.mdx @@ -201,5 +201,5 @@ Try it for yourself in the sample below: ## API References -
-
+
+
diff --git a/docs/xplat/src/content/en/components/layouts/dock-manager-electron.mdx b/docs/xplat/src/content/en/components/layouts/dock-manager-electron.mdx index 869101c069..e491378391 100644 --- a/docs/xplat/src/content/en/components/layouts/dock-manager-electron.mdx +++ b/docs/xplat/src/content/en/components/layouts/dock-manager-electron.mdx @@ -39,7 +39,7 @@ For the Dock Manager pane contents we have used **iframe** elements which host d ### Drag and drop -In order to support dragging panes outside the application window we have replaced the built-in drag/drop which creates in-application floating panes with a custom implementation based on the [HTML Drag and Drop API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API). We have subscribed to the and events which are fired when a header element is connected to the DOM. When a header element is connected we reset the built-in `DragService` and attach `DragStart` and `DragEnd` event listeners. +In order to support dragging panes outside the application window we have replaced the built-in drag/drop which creates in-application floating panes with a custom implementation based on the [HTML Drag and Drop API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API). We have subscribed to the and events which are fired when a header element is connected to the DOM. When a header element is connected we reset the built-in `DragService` and attach `DragStart` and `DragEnd` event listeners. @@ -63,7 +63,7 @@ dockManager.addEventListener('paneHeaderConnected', paneHeaderConnected); -In the `PaneHeaderDragStart` function we set the property of the Dock Manager component which will notify it that a drag operation has been started. +In the `PaneHeaderDragStart` function we set the property of the Dock Manager component which will notify it that a drag operation has been started. @@ -77,7 +77,7 @@ const paneHeaderDragStart = async (pane: IgcContentPane, event: DragEvent) => { -We have subscribed to the `DragOver` and `drop` events of the `document` element. In the `DragOver` listener we notify the Dock Manager that the mouse is dragged over it by setting its property. This forces the Dock Manager to display its docking indicators. +We have subscribed to the `DragOver` and `drop` events of the `document` element. In the `DragOver` listener we notify the Dock Manager that the mouse is dragged over it by setting its property. This forces the Dock Manager to display its docking indicators. ```ts const handleDocumentDragOver = (event: DragEvent) => { @@ -108,7 +108,7 @@ const paneHeaderDragEnd = async (event: DragEvent) => { } ``` -When the pane header is dropped inside a document we call the method which notifies the Dock Manager that the dragged pane was dropped. If the pane was dropped on a docking indicator the method returns **true**. If the pane was dropped in the same window it was dragged from, the pane will be docked to its new position automatically. However, if it was dropped in another window we call the `droppedInAnotherWindow` function which first removes the pane from the source Dock Manager and then adds it to the new one. +When the pane header is dropped inside a document we call the method which notifies the Dock Manager that the dragged pane was dropped. If the pane was dropped on a docking indicator the method returns **true**. If the pane was dropped in the same window it was dragged from, the pane will be docked to its new position automatically. However, if it was dropped in another window we call the `droppedInAnotherWindow` function which first removes the pane from the source Dock Manager and then adds it to the new one. @@ -131,7 +131,7 @@ const handleDocumentDrop = async (event: DragEvent) => { -When a pane is dropped out of its current window, we need to remove the from its Dock Manager component and update the layout. +When a pane is dropped out of its current window, we need to remove the from its Dock Manager component and update the layout. @@ -178,7 +178,7 @@ For the full source code please clone the [repository](https://github.com/Ignite ## API References -
-
-
-
+
+
+
+
diff --git a/docs/xplat/src/content/en/components/layouts/dock-manager-embedding-frames.mdx b/docs/xplat/src/content/en/components/layouts/dock-manager-embedding-frames.mdx index 8136267391..aefc92544f 100644 --- a/docs/xplat/src/content/en/components/layouts/dock-manager-embedding-frames.mdx +++ b/docs/xplat/src/content/en/components/layouts/dock-manager-embedding-frames.mdx @@ -80,4 +80,4 @@ this.dockManager.layout = { ## API References -
+
diff --git a/docs/xplat/src/content/en/components/layouts/dock-manager-updating-panes.mdx b/docs/xplat/src/content/en/components/layouts/dock-manager-updating-panes.mdx index 9c2fd0b497..626af87e70 100644 --- a/docs/xplat/src/content/en/components/layouts/dock-manager-updating-panes.mdx +++ b/docs/xplat/src/content/en/components/layouts/dock-manager-updating-panes.mdx @@ -80,4 +80,4 @@ this.dockManager.layout = { ## API References -
+
diff --git a/docs/xplat/src/content/en/components/layouts/dock-manager.mdx b/docs/xplat/src/content/en/components/layouts/dock-manager.mdx index 2d7a020d09..5a1064db01 100644 --- a/docs/xplat/src/content/en/components/layouts/dock-manager.mdx +++ b/docs/xplat/src/content/en/components/layouts/dock-manager.mdx @@ -24,7 +24,7 @@ The Infragistics {Platform} Dock Manager provides a means to manage the layout o ## {Platform} Dock Manager Example -This example shows most functionalities and docking options of the that you can use in your application. +This example shows most functionalities and docking options of the that you can use in your application. @@ -89,7 +89,7 @@ Once the Dock Manager is imported, you can add it on the page: Since the Dock Manager component uses ShadowDOM and slots it is not supported on older browsers like Internet Explorer 11 and Edge 18 and below (non-Chromium versions). -The Dock Manager has a property, which describes the layout of the panes. To start defining a layout, you should set the property and add child panes. Here is how you can define a layout with a single content pane: +The Dock Manager has a property, which describes the layout of the panes. To start defining a layout, you should set the property and add child panes. Here is how you can define a layout with a single content pane: ```ts @@ -156,10 +156,10 @@ To load the content of the panes, the Dock Manager uses [slots](https://develope The Dock Manager defines several pane types: -- -- -- -- +- +- +- +- Each type of pane has a `Size` property. Depending on the parent orientation the size may affect either the width or the height of the pane. By default, the size of a pane is relative to the sizes of its sibling panes and defaults to 100. If you have two sibling panes, where the first one has its size set to 200 and the second one - size set to 100, the first will be twice the size of the second one and these two panes would fill up all the available space. If the absolute size of their parent is 900px, they will be sized to 600px and 300px respectively. If, for certain panes, you want to specify their sizes in pixels, instead of relying on the relative distribution of all the available space, you should set the `useFixedSize` of the parent split pane. @@ -176,11 +176,11 @@ The end-user can perform the following actions to customize the layout at runtim - Dock a floating pane - Maximize a pane -All of these are reflected in the property of the Dock Manager. +All of these are reflected in the property of the Dock Manager. ### Content Pane -The represents a pane with header and content. It can be hosted inside a Split Pane or a Tab Group Pane. Here is how a content pane is defined: +The represents a pane with header and content. It can be hosted inside a Split Pane or a Tab Group Pane. Here is how a content pane is defined: ```ts @@ -244,7 +244,7 @@ const contentPane: IgrContentPane = { ``` -When a pane is unpinned, it appears as a tab header at one of the edges of the Dock Manager. If the end-user selects it, its content appears over the docked pinned panes. To unpin a content pane, set its property to **false**. +When a pane is unpinned, it appears as a tab header at one of the edges of the Dock Manager. If the end-user selects it, its content appears over the docked pinned panes. To unpin a content pane, set its property to **false**. ```ts @@ -270,7 +270,7 @@ const contentPane = { The `IsPinned` property affects only content panes that are docked outside a document host. Also, content panes hosted in a floating pane cannot be unpinned. -By default, the unpin destination for a content pane is calculated automatically based on the location of the pane relative to the document host. When more than one document host is defined, the nearest one in the parent hierarchy of the unpinned content pane will be used. If there is no document host defined, the default location is used - `Left`. It is also possible to set the desired destination of the unpinned pane by using the property. +By default, the unpin destination for a content pane is calculated automatically based on the location of the pane relative to the document host. When more than one document host is defined, the nearest one in the parent hierarchy of the unpinned content pane will be used. If there is no document host defined, the default location is used - `Left`. It is also possible to set the desired destination of the unpinned pane by using the property. You can configure which end-user operations are allowed for a content pane using its `AllowClose`, `AllowPinning`, `AllowDocking` and `AllowFloating` properties. @@ -278,7 +278,7 @@ When defining a content pane, you can set the `DocumentOnly` property to true so To restrict the user interaction with the content pane and its content, you can set the `Disabled` property to true. This will prevent all user interactions with the pane unless it is a single floating pane. The latter could be moved, maximized or closed (according to the pane's settings for maximizing and closing), so the user can have a look at the elements under it but will not be able to interact with its content. -By default, when you close a pane it gets removed from the `Layout` object. However, in some cases you would want to temporary hide the pane and show it later again. In order to do that without changing the `Layout` object you can use the property of the content pane. Setting the property to **true** will hide it from the UI, but it will remain in the object. In order to override the default close behavior you can subscribe to the `PaneClose` event like this: +By default, when you close a pane it gets removed from the `Layout` object. However, in some cases you would want to temporary hide the pane and show it later again. In order to do that without changing the `Layout` object you can use the property of the content pane. Setting the property to **true** will hide it from the UI, but it will remain in the object. In order to override the default close behavior you can subscribe to the `PaneClose` event like this: ```ts @@ -304,7 +304,7 @@ this.dockManager.addEventListener('paneClose', ev => { ### Split Pane -The is a container pane which stacks all of its child `Panes` horizontally or vertically based on its property. Here is how a horizontal split pane with two child content panes is defined: +The is a container pane which stacks all of its child `Panes` horizontally or vertically based on its property. Here is how a horizontal split pane with two child content panes is defined: ```ts @@ -354,7 +354,7 @@ By default, if the split pane is empty it is not displayed. Yet if you would lik ### Tab Group Pane -The displays its child content `Panes` as the tabs of a tab component. Here is how a tab group pane with a content pane for each of its two tabs is defined: +The displays its child content `Panes` as the tabs of a tab component. Here is how a tab group pane with a content pane for each of its two tabs is defined: ```ts @@ -404,7 +404,7 @@ In case you would like the tab group pane to be displayed in the UI when it has ### Document Host -The is an area of tabs for documents, similar to the one in Visual Studio for code editing and design view. Here is how to define a document host with two document tabs: +The is an area of tabs for documents, similar to the one in Visual Studio for code editing and design view. Here is how to define a document host with two document tabs: ```ts @@ -466,7 +466,7 @@ const docHost: IgrDocumentHost = { ### Floating Pane -The floating pane is a split pane rendered above all other ones in a floating window. The floating pane definitions are stored in the property of the . Here is how to add a floating pane with a single content pane inside: +The floating pane is a split pane rendered above all other ones in a floating window. The floating pane definitions are stored in the property of the . Here is how to add a floating pane with a single content pane inside: ```ts @@ -529,7 +529,7 @@ With the `FloatingResizable` and ### Active Pane -The Dock Manager component highlights the content pane which contains the focus and exposes it in its property. You can programmatically change the active pane by setting the property. You can also listen for changes of the property by subscribing to the `ActivePaneChanged` event: +The Dock Manager component highlights the content pane which contains the focus and exposes it in its property. You can programmatically change the active pane by setting the property. You can also listen for changes of the property by subscribing to the `ActivePaneChanged` event: ```ts @@ -555,7 +555,7 @@ When you start dragging a floating pane, different docking indicators will appea #### Root Docking -In this type of docking while dragging a pane, four arrow docking indicators will appear close to the four edges of the dock manager. Once released, the dragged pane will become a direct child of the Dock Manager's . Visually, the newly docked pane will snap into place at the respective edge and occupy up to half of the dock manager's width or height, shifting all the other content to the other half. +In this type of docking while dragging a pane, four arrow docking indicators will appear close to the four edges of the dock manager. Once released, the dragged pane will become a direct child of the Dock Manager's . Visually, the newly docked pane will snap into place at the respective edge and occupy up to half of the dock manager's width or height, shifting all the other content to the other half. dockmanager-root-docking @@ -630,7 +630,7 @@ this.dockManager.layout = { ...this.dockManager.layout }; ### Save/Load Layout -To restore or persist a layout, you simply have to get/set the value of the property. Here is how to save the layout as a stringified JSON: +To restore or persist a layout, you simply have to get/set the value of the property. Here is how to save the layout as a stringified JSON: ```ts @@ -663,7 +663,7 @@ private loadLayout() { ### Adding Panes At Runtime -Contents and panes can be added to the at runtime. In the example below, you can see how you can add content, document and floating panes. +Contents and panes can be added to the at runtime. In the example below, you can see how you can add content, document and floating panes. @@ -718,7 +718,7 @@ this.dockManager.addEventListener('paneClose', ev => console.log(ev.detail)); The Dock Manager component provides the option to customize all buttons using slots and parts. To change any of the buttons you simply have to define your own element inside the Dock Manager and set the slot attribute to the corresponding identifier. -Let's utilize these slots and parts to create a customized Dock Manager layout. First, we will provide our own icons, using the , , , and slots: +Let's utilize these slots and parts to create a customized Dock Manager layout. First, we will provide our own icons, using the , , , and slots: @@ -835,16 +835,16 @@ Below you can find a list containing the slot names for all of the buttons as we | Slot name | Description | | ----------|------------ | -| | The close buttons. | -| | The close buttons of the pane headers. | -| | The close buttons of the tab headers. | -| | The more tabs buttons. | -| | The more options buttons. | -| | The maximize buttons. | -| | The minimize buttons. | -| | The pin buttons. | -| | The unpin buttons. | -| | The splitter handle. | +| | The close buttons. | +| | The close buttons of the pane headers. | +| | The close buttons of the tab headers. | +| | The more tabs buttons. | +| | The more options buttons. | +| | The maximize buttons. | +| | The minimize buttons. | +| | The pin buttons. | +| | The unpin buttons. | +| | The splitter handle. | You can find each slot's corresponding part in the **CSS Parts** under **Styling** section of this page. @@ -1057,9 +1057,9 @@ The Dock Manager exposes `ResourceStrings` property which allows you to modify t ## API References -
-
-
-
-
-
+
+
+
+
+
+
diff --git a/docs/xplat/src/content/en/components/scheduling/calendar.mdx b/docs/xplat/src/content/en/components/scheduling/calendar.mdx index 115a5b8d5d..87c36f47d3 100644 --- a/docs/xplat/src/content/en/components/scheduling/calendar.mdx +++ b/docs/xplat/src/content/en/components/scheduling/calendar.mdx @@ -354,7 +354,7 @@ If everything went well, we should now have a Calendar with customized display, ### Disabled dates -In some cases you would want to have disabled dates in the Calendar which can't be selected by the end user. This functionality is achieved by using the property. The property is an array of objects. Each descriptor has a `Type` and optionally a `DateRange` which is an array of `Date` objects. +In some cases you would want to have disabled dates in the Calendar which can't be selected by the end user. This functionality is achieved by using the property. The property is an array of `DateRangeDescriptor` objects. Each descriptor has a `Type` and optionally a `DateRange` which is an array of `Date` objects. These are the available options for the `Type` property: @@ -763,7 +763,7 @@ The following sample demonstrates the above CSS configuration:


-
+`DateRangeDescriptor` ## Additional Resources diff --git a/docs/xplat/src/content/en/components/spreadsheet-activation.mdx b/docs/xplat/src/content/en/components/spreadsheet-activation.mdx index f81f700f16..40e53a0ea5 100644 --- a/docs/xplat/src/content/en/components/spreadsheet-activation.mdx +++ b/docs/xplat/src/content/en/components/spreadsheet-activation.mdx @@ -25,11 +25,11 @@ The {Platform} Spreadsheet component exposes properties that allow you to determ ## Activation Overview -The activation of the {Platform} control is split up between the cells, panes, and worksheets of the current of the spreadsheet. The three "active" properties are described below: +The activation of the {Platform} control is split up between the cells, panes, and worksheets of the current of the spreadsheet. The three "active" properties are described below: -- : Returns or sets the active cell in the spreadsheet. To set it, you must create a new instance of and pass in information about that cell, such as the column and row or the string address of the cell. +- : Returns or sets the active cell in the spreadsheet. To set it, you must create a new instance of and pass in information about that cell, such as the column and row or the string address of the cell. - : Returns the active pane in the currently active worksheet of the spreadsheet control. -- : Returns or sets the active worksheet in the of the spreadsheet control. This can be set by setting it to an existing worksheet in the attached to the spreadsheet. +- : Returns or sets the active worksheet in the of the spreadsheet control. This can be set by setting it to an existing worksheet in the attached to the spreadsheet. ## Code Snippet @@ -44,6 +44,6 @@ this.spreadsheet.activeCell = new SpreadsheetCell("C5"); ## API References -
+

-
+
diff --git a/docs/xplat/src/content/en/components/spreadsheet-chart-adapter.mdx b/docs/xplat/src/content/en/components/spreadsheet-chart-adapter.mdx index 6032ec7da2..8d78b4e193 100644 --- a/docs/xplat/src/content/en/components/spreadsheet-chart-adapter.mdx +++ b/docs/xplat/src/content/en/components/spreadsheet-chart-adapter.mdx @@ -23,7 +23,7 @@ The {Platform} Spreadsheet component allows displaying charts in your you can display the charts in the spreadsheet. The spreadsheet chart adapters creates and initializes chart elements for the spreadsheet based on a Infragistics.Documents.Excel.WorksheetChart instance. +Using you can display the charts in the spreadsheet. The spreadsheet chart adapters creates and initializes chart elements for the spreadsheet based on a Infragistics.Documents.Excel.WorksheetChart instance. In order to add a WorksheetChart to a worksheet, you must use the `AddChart` method of the worksheet’s Shapes collection. You can find more detail of adding charts in Excel below. @@ -219,6 +219,6 @@ ExcelUtility.loadFromUrl(process.env.PUBLIC_URL + "/ExcelFiles/ChartData.xlsx"). ## API References -
+

-
+
diff --git a/docs/xplat/src/content/en/components/spreadsheet-clipboard.mdx b/docs/xplat/src/content/en/components/spreadsheet-clipboard.mdx index c3c9b754c0..cd0c0d0f2e 100644 --- a/docs/xplat/src/content/en/components/spreadsheet-clipboard.mdx +++ b/docs/xplat/src/content/en/components/spreadsheet-clipboard.mdx @@ -25,7 +25,7 @@ This topic explains how to perform clipboard operations on the {ProductName} spr ## Dependencies -Before making use of the clipboard you will want to import the enumeration: +Before making use of the clipboard you will want to import the enumeration: @@ -78,5 +78,5 @@ public paste(): void { ## API References -
+

diff --git a/docs/xplat/src/content/en/components/spreadsheet-commands.mdx b/docs/xplat/src/content/en/components/spreadsheet-commands.mdx index f2aa052f6b..fa6d64693f 100644 --- a/docs/xplat/src/content/en/components/spreadsheet-commands.mdx +++ b/docs/xplat/src/content/en/components/spreadsheet-commands.mdx @@ -11,7 +11,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # {Platform} Working with Commands -The {Platform} Spreadsheet component allows you to perform commands for activating different features of the spreadsheet. This topic explains how to perform different operations with the control using commands. Many of the commands will perform their action based on the active cells, rows, or worksheets. For example two such commands are ZoomIn and ZoomOut. See the enum for a full list. +The {Platform} Spreadsheet component allows you to perform commands for activating different features of the spreadsheet. This topic explains how to perform different operations with the control using commands. Many of the commands will perform their action based on the active cells, rows, or worksheets. For example two such commands are ZoomIn and ZoomOut. See the enum for a full list. ## {Platform} Working with Commands Example @@ -25,7 +25,7 @@ The {Platform} Spreadsheet component allows you to perform commands for activati ## Dependencies -Before making use of the commands you will want to import the +Before making use of the commands you will want to import the @@ -119,4 +119,4 @@ function zoomOut(): void { ## API References -
+
diff --git a/docs/xplat/src/content/en/components/spreadsheet-conditional-formatting.mdx b/docs/xplat/src/content/en/components/spreadsheet-conditional-formatting.mdx index 36eb38bdad..843af547ee 100644 --- a/docs/xplat/src/content/en/components/spreadsheet-conditional-formatting.mdx +++ b/docs/xplat/src/content/en/components/spreadsheet-conditional-formatting.mdx @@ -1,4 +1,4 @@ ---- +--- title: "{Platform} Spreadsheet | Conditional Formatting | Infragistics" description: Use Infragistics' {Platform} spreadsheet control to conditionally format the cells of a worksheet. Check out {ProductName} spreadsheet demos! keywords: Spreadsheet, conditional formatting, {ProductName}, Infragistics, Worksheet @@ -25,33 +25,33 @@ The {Platform} component allows ## Conditional Formatting Overview -You can configure the conditional formatting of a particular worksheet by using the many `Add` methods exposed on the collection of that worksheet. The first parameter of these `Add` methods is the string region of the worksheet that you would like to apply the conditional format to. +You can configure the conditional formatting of a particular worksheet by using the many `Add` methods exposed on the `ConditionalFormats` collection of that worksheet. The first parameter of these `Add` methods is the string region of the worksheet that you would like to apply the conditional format to. Many of the conditional formats that you can add to your worksheet have a `CellFormat` property that determines the way that the cells should look when the condition in that conditional format holds true. For example, you can use the properties attached to this `CellFormat` property such as `Fill` and `Font` to determine the background and font settings of your cells, respectively. When a conditional format is created and a `CellFormat` applied, there is a subset of properties that are currently supported by the worksheet cell. The properties that are currently honored off of the `CellFormat` are `Fill`, `Border` properties, `FormatString`, and some `Font` properties such as strikethrough, underline, italic, bold, and color. Many of these can be seen from the code snippet below. -There are a few conditional formats that do not have a `CellFormat` property, as their visualization on the cells behaves differently. These conditional formats are the , , and . +There are a few conditional formats that do not have a `CellFormat` property, as their visualization on the cells behaves differently. These conditional formats are the `DataBarConditionalFormat`, `ColorScaleConditionalFormat`, and `IconSetConditionalFormat`. When loading a pre-existing workbook from Excel, the formats will be preserved when that workbook is loaded. The same is true for when you save the workbook out to an Excel file. The following lists the supported conditional formats in the {Platform} control: -- : Added using the `AddAverageCondition` method, this conditional format exposes properties which control the visual attributes of a worksheet cell based on whether a cell’s value is above or below the average or standard deviation for the associated range. -- : Added using the `AddBlanksCondition` method, this conditional format exposes properties which control the visual attributes of a worksheet cell based on whether the cell’s value is not set. -- : Added using the `AddColorScaleCondition` method, this conditional format exposes properties which control the coloring of a worksheet cell based on the cell’s value as relative to minimum, midpoint, and maximum threshold values. -- : Added using the `AddDataBarCondition` method, this conditional format exposes properties which display data bars in a worksheet cell based on the cell’s value as relative to the associated range of values. -- : Added using the `AddDateTimeCondition` method, this conditional format exposes properties which control the visual attributes of a worksheet cell based on whether a cell’s date value falls within a given range of time. -- : Added using the `AddDuplicateCondition` method, this conditional format exposes properties which control the visual attributes of a worksheet cell based on whether a cell’s value is unique or duplicated across the associated range. -- : Added using the `AddErrorsCondition` method, this conditional format exposes properties which control the visual attributes of a worksheet cell based on whether the cell’s value is valid. -- : Added using the `AddFormulaCondition` method, this conditional format exposes properties which control the visual attributes of a worksheet cell based on whether the cell’s value meets the criteria defined by a formula. -- : Added using the `AddIconSetCondition` method, this conditional format exposes properties which display icons in a worksheet cell based on the cell’s value as relative to threshold values. -- : Added using the `AddNoBlanksCondition` method, this conditional format exposes properties which control the visual attributes of a worksheet cell based on whether the cell’s value is set. -- : Added using the `AddNoErrorsCondition` method, this conditional format exposes properties which control the visual attributes of a worksheet cell based on whether the cell’s value is valid. -- : Added using the `AddOperatorCondition` method, this conditional format exposes properties which control the visual attributes of a worksheet cell based on whether the cell’s value meets the criteria defined by a logical operator. -- : Added using the `AddRankCondition` method, this conditional format exposes properties which control the visual attributes of a worksheet cell based on whether a cell’s value is within the top of bottom rank of values across the associated range. -- : Added using the `AddTextCondition` method, this conditional format exposes properties which control the visual attributes of a worksheet cell based on whether a cell’s text value meets the criteria defined by a string and a value as placed in the `AddTextCondition` method’s parameters. -- : Added using the `AddUniqueCondition` method, this conditional format exposes properties which control the visual attributes of a worksheet cell based on whether a cell’s value is unique across the associated range. +- `AverageConditionalFormat`: Added using the `AddAverageCondition` method, this conditional format exposes properties which control the visual attributes of a worksheet cell based on whether a cell’s value is above or below the average or standard deviation for the associated range. +- `BlanksConditionalFormat`: Added using the `AddBlanksCondition` method, this conditional format exposes properties which control the visual attributes of a worksheet cell based on whether the cell’s value is not set. +- `ColorScaleConditionalFormat`: Added using the `AddColorScaleCondition` method, this conditional format exposes properties which control the coloring of a worksheet cell based on the cell’s value as relative to minimum, midpoint, and maximum threshold values. +- `DataBarConditionalFormat`: Added using the `AddDataBarCondition` method, this conditional format exposes properties which display data bars in a worksheet cell based on the cell’s value as relative to the associated range of values. +- `DateTimeConditionalFormat`: Added using the `AddDateTimeCondition` method, this conditional format exposes properties which control the visual attributes of a worksheet cell based on whether a cell’s date value falls within a given range of time. +- `DuplicateConditionalFormat`: Added using the `AddDuplicateCondition` method, this conditional format exposes properties which control the visual attributes of a worksheet cell based on whether a cell’s value is unique or duplicated across the associated range. +- `ErrorsConditionalFormat`: Added using the `AddErrorsCondition` method, this conditional format exposes properties which control the visual attributes of a worksheet cell based on whether the cell’s value is valid. +- `FormulaConditionalFormat`: Added using the `AddFormulaCondition` method, this conditional format exposes properties which control the visual attributes of a worksheet cell based on whether the cell’s value meets the criteria defined by a formula. +- `IconSetConditionalFormat`: Added using the `AddIconSetCondition` method, this conditional format exposes properties which display icons in a worksheet cell based on the cell’s value as relative to threshold values. +- `NoBlanksConditionalFormat`: Added using the `AddNoBlanksCondition` method, this conditional format exposes properties which control the visual attributes of a worksheet cell based on whether the cell’s value is set. +- `NoErrorsConditionalFormat`: Added using the `AddNoErrorsCondition` method, this conditional format exposes properties which control the visual attributes of a worksheet cell based on whether the cell’s value is valid. +- `OperatorConditionalFormat`: Added using the `AddOperatorCondition` method, this conditional format exposes properties which control the visual attributes of a worksheet cell based on whether the cell’s value meets the criteria defined by a logical operator. +- `RankConditionalFormat`: Added using the `AddRankCondition` method, this conditional format exposes properties which control the visual attributes of a worksheet cell based on whether a cell’s value is within the top of bottom rank of values across the associated range. +- `TextOperatorConditionalFormat`: Added using the `AddTextCondition` method, this conditional format exposes properties which control the visual attributes of a worksheet cell based on whether a cell’s text value meets the criteria defined by a string and a `FormatConditionTextOperator` value as placed in the `AddTextCondition` method’s parameters. +- `UniqueConditionalFormat`: Added using the `AddUniqueCondition` method, this conditional format exposes properties which control the visual attributes of a worksheet cell based on whether a cell’s value is unique across the associated range. ## Dependencies @@ -174,22 +174,22 @@ uniqueFormat.cellFormat.font.colorInfo = new WorkbookColorInfo(blue); ## API References -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+`AverageConditionalFormat`
+`BlanksConditionalFormat`
+`ColorScaleConditionalFormat`
+`DataBarConditionalFormat`
+`DateTimeConditionalFormat`
+`DuplicateConditionalFormat`
+`ErrorsConditionalFormat`
+`FormulaConditionalFormat`
+`IconSetConditionalFormat`
+`NoBlanksConditionalFormat`
+`NoErrorsConditionalFormat`
+`OperatorConditionalFormat`
+`RankConditionalFormat`
+`TextOperatorConditionalFormat`
+`UniqueConditionalFormat`
+`FormatConditionTextOperator`

diff --git a/docs/xplat/src/content/en/components/spreadsheet-configuring.mdx b/docs/xplat/src/content/en/components/spreadsheet-configuring.mdx index e27347a77f..d739b05d31 100644 --- a/docs/xplat/src/content/en/components/spreadsheet-configuring.mdx +++ b/docs/xplat/src/content/en/components/spreadsheet-configuring.mdx @@ -352,7 +352,7 @@ this.spreadsheet.zoomLevel = 200; ## API References -
-
+
+

-
+
diff --git a/docs/xplat/src/content/en/components/spreadsheet-hyperlinks.mdx b/docs/xplat/src/content/en/components/spreadsheet-hyperlinks.mdx index df37f1f9e3..2af4acce07 100644 --- a/docs/xplat/src/content/en/components/spreadsheet-hyperlinks.mdx +++ b/docs/xplat/src/content/en/components/spreadsheet-hyperlinks.mdx @@ -64,7 +64,7 @@ this.spreadsheet.activeWorksheet.hyperlinks().add(new WorksheetHyperlink("A1", " ## API References
-
+
 diff --git a/docs/xplat/src/content/en/components/spreadsheet-overview.mdx b/docs/xplat/src/content/en/components/spreadsheet-overview.mdx index 66e8e6dba1..bf05ec32dc 100644 --- a/docs/xplat/src/content/en/components/spreadsheet-overview.mdx +++ b/docs/xplat/src/content/en/components/spreadsheet-overview.mdx @@ -228,4 +228,4 @@ ExcelUtility.loadFromUrl(excelFile).then((w: Workbook) => { ## API References
-
+
diff --git a/docs/xplat/src/content/en/components/themes/configuration.mdx b/docs/xplat/src/content/en/components/themes/configuration.mdx index 918adff20f..82f5338ea9 100644 --- a/docs/xplat/src/content/en/components/themes/configuration.mdx +++ b/docs/xplat/src/content/en/components/themes/configuration.mdx @@ -1,6 +1,6 @@ ---- +--- title: "{Platform} Styling and Themes | {Platform} Theming | Theme Switching | Infragistics" -description: Use Infragistics' {Platform} components to create apps and improve data visualization with the world’s fastest, virtualized, real-time {Platform} data grid and streaming financial and business and financial charts. +description: Use Infragistics' {Platform} components to create apps and improve data visualization with the world’s fastest, virtualized, real-time {Platform} data grid and streaming financial and business and financial charts. keywords: "{ProductName}, Infragistics, Themes, Styling" license: MIT mentionedTypes: ["ConfigureTheme"] @@ -101,4 +101,4 @@ As mentioned before, you can control the horizontal and vertical spacing individ ## API References -
+
diff --git a/docs/xplat/src/content/en/components/themes/elevations.mdx b/docs/xplat/src/content/en/components/themes/elevations.mdx index 0661c912f3..8f6fb00338 100644 --- a/docs/xplat/src/content/en/components/themes/elevations.mdx +++ b/docs/xplat/src/content/en/components/themes/elevations.mdx @@ -1,4 +1,4 @@ ---- +--- title: "{Platform} Styling and Themes | {Platform} Elevations | Infragistics" description: keywords: "{ProductName}, Infragistics, Elevations, Styling" @@ -88,4 +88,4 @@ The `--ig-elevation-factor` can also be set to a decimal value or a value bigger ## API References -
+`Elevations` diff --git a/docs/xplat/src/content/en/components/themes/overview.mdx b/docs/xplat/src/content/en/components/themes/overview.mdx index fe0b8ab936..10a2bcfd25 100644 --- a/docs/xplat/src/content/en/components/themes/overview.mdx +++ b/docs/xplat/src/content/en/components/themes/overview.mdx @@ -1,6 +1,6 @@ ---- +--- title: "{Platform} Styling and Themes | {Platform} Theming | Theme Switching | Infragistics" -description: Use Infragistics' {Platform} components to create apps and improve data visualization with the world’s fastest, virtualized, real-time {Platform} data grid and streaming financial and business and financial charts. +description: Use Infragistics' {Platform} components to create apps and improve data visualization with the world’s fastest, virtualized, real-time {Platform} data grid and streaming financial and business and financial charts. keywords: "{ProductName}, Infragistics, Themes, Styling" license: MIT mentionedTypes: ["ConfigureTheme"] @@ -81,4 +81,4 @@ This only tells components to switch their internal styles to the desired theme, ## API References -
+
 diff --git a/docs/xplat/src/content/en/components/themes/palettes.mdx b/docs/xplat/src/content/en/components/themes/palettes.mdx index cbf10e942a..d948d1d9b7 100644 --- a/docs/xplat/src/content/en/components/themes/palettes.mdx +++ b/docs/xplat/src/content/en/components/themes/palettes.mdx @@ -1,4 +1,4 @@ ---- +--- title: "{Platform} Styling and Themes | {Platform} Palettes | Infragistics" description: keywords: "{ProductName}, Infragistics, Palettes, Styling" @@ -181,4 +181,4 @@ So far we've covered the `primary`, `secondary`, `gray`, and `surface` color var ## API References -
+`Palettes` diff --git a/docs/xplat/src/content/en/components/themes/styles.mdx b/docs/xplat/src/content/en/components/themes/styles.mdx index ffd4a362f4..a72c345998 100644 --- a/docs/xplat/src/content/en/components/themes/styles.mdx +++ b/docs/xplat/src/content/en/components/themes/styles.mdx @@ -1,6 +1,6 @@ ---- +--- title: "{Platform} Styling and Themes | {Platform} Theming | Theme Switching | Infragistics" -description: Use Infragistics' {Platform} components to create apps and improve data visualization with the world’s fastest, virtualized, real-time {Platform} data grid and streaming financial and business and financial charts. +description: Use Infragistics' {Platform} components to create apps and improve data visualization with the world’s fastest, virtualized, real-time {Platform} data grid and streaming financial and business and financial charts. keywords: "{ProductName}, Infragistics, Themes, Styling" license: MIT mentionedTypes: ["ConfigureTheme"] @@ -55,4 +55,4 @@ Having learned about CSS parts and CSS variables and in combination with the oth ## API References -
+
diff --git a/docs/xplat/src/content/en/components/themes/typography.mdx b/docs/xplat/src/content/en/components/themes/typography.mdx index 0044b4404b..6a15bafcc6 100644 --- a/docs/xplat/src/content/en/components/themes/typography.mdx +++ b/docs/xplat/src/content/en/components/themes/typography.mdx @@ -1,4 +1,4 @@ ---- +--- title: "{Platform} Styling and Themes | {Platform} Typography | Infragistics" description: keywords: "{ProductName}, Infragistics, Typography, Styling" @@ -66,4 +66,4 @@ Keep in mind that this will update the global button typography styles. If you w ## API References -
+`Typography` diff --git a/docs/xplat/src/content/en/toc.json b/docs/xplat/src/content/en/toc.json index 879292c8c7..a86f8ae61d 100644 --- a/docs/xplat/src/content/en/toc.json +++ b/docs/xplat/src/content/en/toc.json @@ -2713,302 +2713,5 @@ "name": "Custom Tailwind Classes", "href": "themes/tailwind.md", "new": true - }, - { - "exclude": [ - "Angular" - ], - "name": "Deprecated Components", - "header": true - }, - { - "exclude": [ - "Angular" - ], - "name": "Table / Grid", - "href": "grids/data-grid/overview.md", - "items": [ - { - "exclude": [ - "Angular" - ], - "name": "Accessibility Compliance", - "href": "grids/data-grid/accessibility.md", - "premium": true - }, - { - "exclude": [ - "Angular" - ], - "name": "Binding Live Data", - "href": "grids/data-grid/live-data.md", - "premium": true - }, - { - "exclude": [ - "Angular" - ], - "name": "Binding Local Data", - "href": "grids/data-grid/local-data.md", - "premium": true - }, - { - "exclude": [ - "Angular" - ], - "name": "Localization", - "href": "grids/data-grid/localization.md", - "premium": true - }, - { - "exclude": [ - "Angular", - "Blazor" - ], - "name": "Binding Comparison Data", - "href": "grids/data-grid/type-comparison-table.md", - "premium": true - }, - { - "exclude": [ - "Angular", - "React", - "Blazor" - ], - "name": "Binding Heatmap Data", - "href": "grids/data-grid/type-heatmap-table.md", - "premium": true - }, - { - "exclude": [ - "Angular", - "React", - "Blazor" - ], - "name": "Binding Matrix Data", - "href": "grids/data-grid/type-matrix-table.md", - "premium": true - }, - { - "exclude": [ - "Angular", - "React", - "Blazor" - ], - "name": "Binding Periodic Data", - "href": "grids/data-grid/type-periodic-table.md", - "premium": true - }, - { - "exclude": [ - "Angular", - "React", - "Blazor" - ], - "name": "Binding Virtual Data", - "href": "grids/data-grid/remote-data.md", - "premium": true - }, - { - "exclude": [ - "Angular" - ], - "name": "Cell Activation", - "href": "grids/data-grid/cell-activation.md", - "premium": true - }, - { - "exclude": [ - "Angular" - ], - "name": "Grid Editing", - "href": "grids/data-grid/cell-editing.md", - "premium": true - }, - { - "exclude": [ - "Angular" - ], - "name": "Cell Merging", - "href": "grids/data-grid/cell-merging.md", - "premium": true - }, - { - "exclude": [ - "Angular" - ], - "name": "Cell Selection", - "href": "grids/data-grid/cell-selection.md", - "premium": true - }, - { - "exclude": [ - "Angular" - ], - "name": "Column Animations", - "href": "grids/data-grid/column-animation.md", - "premium": true - }, - { - "exclude": [ - "Angular" - ], - "name": "Column Filtering", - "href": "grids/data-grid/column-filtering.md", - "premium": true - }, - { - "exclude": [ - "Angular" - ], - "name": "Column Moving", - "href": "grids/data-grid/column-moving.md", - "premium": true - }, - { - "exclude": [ - "Angular" - ], - "name": "Column Chooser", - "href": "grids/data-grid/column-chooser.md", - "premium": true - }, - { - "exclude": [ - "Angular" - ], - "name": "Column Options", - "href": "grids/data-grid/column-options.md", - "premium": true - }, - { - "exclude": [ - "Angular" - ], - "name": "Column Pinning", - "href": "grids/data-grid/column-pinning.md", - "premium": true - }, - { - "exclude": [ - "Angular" - ], - "name": "Column Resizing", - "href": "grids/data-grid/column-resizing.md", - "premium": true - }, - { - "exclude": [ - "Angular" - ], - "name": "Column Sorting", - "href": "grids/data-grid/column-sorting.md", - "premium": true - }, - { - "exclude": [ - "Angular" - ], - "name": "Column Sparkline", - "href": "grids/data-grid/type-sparkline-table.md", - "premium": true - }, - { - "exclude": [ - "Angular" - ], - "name": "Column Summaries", - "href": "grids/data-grid/column-summaries.md", - "premium": true - }, - { - "exclude": [ - "Angular" - ], - "name": "Column Types", - "href": "grids/data-grid/column-types.md", - "premium": true - }, - { - "exclude": [ - "Angular" - ], - "name": "High Performance", - "href": "grids/data-grid/performance.md", - "premium": true - }, - { - "exclude": [ - "Angular" - ], - "name": "Horizontal Scrolling", - "href": "grids/data-grid/horizontal-scrolling.md", - "premium": true - }, - { - "exclude": [ - "Angular" - ], - "name": "Load & Save Grid Layout", - "href": "grids/data-grid/load-save-layout.md", - "premium": true - }, - { - "exclude": [ - "Angular" - ], - "name": "Row Grouping", - "href": "grids/data-grid/row-grouping.md", - "premium": true - }, - { - "exclude": [ - "Angular" - ], - "name": "Row Highlighting", - "href": "grids/data-grid/row-highlighting.md", - "premium": true - }, - { - "exclude": [ - "Angular" - ], - "name": "Row Paging", - "href": "grids/data-grid/row-paging.md", - "premium": true - }, - { - "exclude": [ - "Angular" - ], - "name": "Row Pinning", - "href": "grids/data-grid/row-pinning.md", - "premium": true - }, - { - "exclude": [ - "Angular" - ], - "name": "Theming", - "href": "grids/theming.md", - "premium": true - } - ] - }, - { - "exclude": [ - "Angular" - ], - "name": "Multi-Column Combo Box", - "href": "editors/multi-column-combobox.md", - "premium": true - }, - { - "exclude": [ - "Angular" - ], - "name": "XDate Picker", - "href": "editors/xdate-picker.md", - "premium": true } ] diff --git a/docs/xplat/src/content/jp/components/bullet-graph.mdx b/docs/xplat/src/content/jp/components/bullet-graph.mdx index c0d9385298..cbb01e1bea 100644 --- a/docs/xplat/src/content/jp/components/bullet-graph.mdx +++ b/docs/xplat/src/content/jp/components/bullet-graph.mdx @@ -1174,8 +1174,8 @@ MaximumValue="55" TargetValue="43"> ## API リファレンス - - +
+
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/charts/chart-features.mdx b/docs/xplat/src/content/jp/components/charts/chart-features.mdx index 8c92f6eb6a..994ba0f678 100644 --- a/docs/xplat/src/content/jp/components/charts/chart-features.mdx +++ b/docs/xplat/src/content/jp/components/charts/chart-features.mdx @@ -79,6 +79,6 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; ## API リファレンス - - - +
+
+
diff --git a/docs/xplat/src/content/jp/components/charts/chart-overview.mdx b/docs/xplat/src/content/jp/components/charts/chart-overview.mdx index 9124d4d482..e4a546586e 100644 --- a/docs/xplat/src/content/jp/components/charts/chart-overview.mdx +++ b/docs/xplat/src/content/jp/components/charts/chart-overview.mdx @@ -265,6 +265,6 @@ import igniteUiAngularFinancialChartCustomTooltips1100 from '@xplat-images/chart ## API リファレンス - - - +
+
+
diff --git a/docs/xplat/src/content/jp/components/charts/features/chart-animations.mdx b/docs/xplat/src/content/jp/components/charts/features/chart-animations.mdx index 983d247f11..d86cd7e8f4 100644 --- a/docs/xplat/src/content/jp/components/charts/features/chart-animations.mdx +++ b/docs/xplat/src/content/jp/components/charts/features/chart-animations.mdx @@ -43,4 +43,4 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; ## API リファレンス - +
diff --git a/docs/xplat/src/content/jp/components/charts/features/chart-annotations.mdx b/docs/xplat/src/content/jp/components/charts/features/chart-annotations.mdx index 4357cad193..f5f2dc48a5 100644 --- a/docs/xplat/src/content/jp/components/charts/features/chart-annotations.mdx +++ b/docs/xplat/src/content/jp/components/charts/features/chart-annotations.mdx @@ -213,4 +213,4 @@ chart.calloutsLabelMemberPath = "info"; ## API リファレンス - +
diff --git a/docs/xplat/src/content/jp/components/charts/features/chart-axis-options.mdx b/docs/xplat/src/content/jp/components/charts/features/chart-axis-options.mdx index 9823e18078..3b0a59422b 100644 --- a/docs/xplat/src/content/jp/components/charts/features/chart-axis-options.mdx +++ b/docs/xplat/src/content/jp/components/charts/features/chart-axis-options.mdx @@ -51,9 +51,9 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; を設定した後、 プロパティを true に設定して自動マージンをオプトインするか プロパティを true に設定して自動回転を行うことができます。 と を設して、それぞれ追加のスペースまたは可能な最大マージンを提供することにより、適用される自動マージンをさらにカスタマイズすることもできます。 - や などのカスタム ラベル書式は、 および コレクションを介して各軸に追加できます。一般に、Intl.NumberFormat および Intl.DateTimeFormat の言語に依存した数値、日付、時刻の書式設定を適用するために使用されます。ラベルにカスタム書式を適用するには、 または を のデータ項目のプロパティ名 (例: `{Date}`) に設定する必要があります。 の場合、数値軸を使用するため、数値がコンテキストとなり、これを `{0}` に設定する必要があります。 +`NumberFormatSpecifier` や `DateTimeFormatSpecifier` などのカスタム ラベル書式は、 および コレクションを介して各軸に追加できます。一般に、Intl.NumberFormat および Intl.DateTimeFormat の言語に依存した数値、日付、時刻の書式設定を適用するために使用されます。ラベルにカスタム書式を適用するには、 または を のデータ項目のプロパティ名 (例: `{Date}`) に設定する必要があります。 の場合、数値軸を使用するため、数値がコンテキストとなり、これを `{0}` に設定する必要があります。 -次の例では、yAxis を でフォーマットして、米国のトップ興行収入映画の $USD 価格を表します。 +次の例では、yAxis を `NumberFormatSpecifier` でフォーマットして、米国のトップ興行収入映画の $USD 価格を表します。 diff --git a/docs/xplat/src/content/jp/components/charts/features/chart-data-aggregations.mdx b/docs/xplat/src/content/jp/components/charts/features/chart-data-aggregations.mdx index 000635e7f3..6ef7861851 100644 --- a/docs/xplat/src/content/jp/components/charts/features/chart-data-aggregations.mdx +++ b/docs/xplat/src/content/jp/components/charts/features/chart-data-aggregations.mdx @@ -71,4 +71,4 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; ## API リファレンス - +
diff --git a/docs/xplat/src/content/jp/components/charts/features/chart-data-filtering.mdx b/docs/xplat/src/content/jp/components/charts/features/chart-data-filtering.mdx index 05107cef84..fbf87118a5 100644 --- a/docs/xplat/src/content/jp/components/charts/features/chart-data-filtering.mdx +++ b/docs/xplat/src/content/jp/components/charts/features/chart-data-filtering.mdx @@ -53,4 +53,4 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; ## API リファレンス - +
diff --git a/docs/xplat/src/content/jp/components/charts/features/chart-data-legend.mdx b/docs/xplat/src/content/jp/components/charts/features/chart-data-legend.mdx index b12b212324..2723ec1ba6 100644 --- a/docs/xplat/src/content/jp/components/charts/features/chart-data-legend.mdx +++ b/docs/xplat/src/content/jp/components/charts/features/chart-data-legend.mdx @@ -176,4 +176,4 @@ OHLC 価格の **TypicalPrice** (標準価格) とパーセンテージの **Cha - +
diff --git a/docs/xplat/src/content/jp/components/charts/features/chart-data-tooltip.mdx b/docs/xplat/src/content/jp/components/charts/features/chart-data-tooltip.mdx index 72df0d7c59..09a21b85e5 100644 --- a/docs/xplat/src/content/jp/components/charts/features/chart-data-tooltip.mdx +++ b/docs/xplat/src/content/jp/components/charts/features/chart-data-tooltip.mdx @@ -162,7 +162,7 @@ import layoutMode from '@xplat-images/general/layout_mode.png'; ## API リファレンス - - - - +
+
+
+
diff --git a/docs/xplat/src/content/jp/components/charts/features/chart-highlighting.mdx b/docs/xplat/src/content/jp/components/charts/features/chart-highlighting.mdx index 509cd52777..9758f73b6f 100644 --- a/docs/xplat/src/content/jp/components/charts/features/chart-highlighting.mdx +++ b/docs/xplat/src/content/jp/components/charts/features/chart-highlighting.mdx @@ -75,6 +75,6 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; ## API リファレンス - - - +
+
+
diff --git a/docs/xplat/src/content/jp/components/charts/features/chart-markers.mdx b/docs/xplat/src/content/jp/components/charts/features/chart-markers.mdx index 3f1af2b196..3d41e0e4df 100644 --- a/docs/xplat/src/content/jp/components/charts/features/chart-markers.mdx +++ b/docs/xplat/src/content/jp/components/charts/features/chart-markers.mdx @@ -52,4 +52,4 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; ## API リファレンス - +
diff --git a/docs/xplat/src/content/jp/components/charts/features/chart-navigation.mdx b/docs/xplat/src/content/jp/components/charts/features/chart-navigation.mdx index 0a8326fb41..9aa437e63e 100644 --- a/docs/xplat/src/content/jp/components/charts/features/chart-navigation.mdx +++ b/docs/xplat/src/content/jp/components/charts/features/chart-navigation.mdx @@ -101,6 +101,6 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; ## API リファレンス - - - +
+
+
diff --git a/docs/xplat/src/content/jp/components/charts/features/chart-overlays.mdx b/docs/xplat/src/content/jp/components/charts/features/chart-overlays.mdx index 2581af6ac7..ed763d0bd1 100644 --- a/docs/xplat/src/content/jp/components/charts/features/chart-overlays.mdx +++ b/docs/xplat/src/content/jp/components/charts/features/chart-overlays.mdx @@ -47,11 +47,11 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; {Platform} チャート コンポーネントは、値の線を使用して、最小値、最大値、平均値などのデータのさまざまな焦点を示す機能も公開します。 - および コンポーネントに を適用するには、チャート上で プロパティを設定します。このプロパティは、 列挙体のコレクションを受け取ります。複数の 列挙をチャートの コレクションに追加することで、同じチャート内で複数の値レイヤーを組み合わせたりできます。 + および コンポーネントに を適用するには、チャート上で プロパティを設定します。このプロパティは、 列挙体のコレクションを受け取ります。複数の 列挙をチャートの コレクションに追加することで、同じチャート内で複数の値レイヤーを組み合わせたりできます。 -`DataChart` では、これは、チャートの `Series` コレクションに を追加し、次に プロパティを 列挙の 1 つに設定することによって行われます。これらの各列挙とその意味を以下に示します。 +`DataChart` では、これは、チャートの `Series` コレクションに を追加し、次に プロパティを 列挙の 1 つに設定することによって行われます。これらの各列挙とその意味を以下に示します。 -- `Auto`: 列挙体のデフォルト値モード。 +- `Auto`: 列挙体のデフォルト値モード。 - `Average`: 複数の値の線を適用して、チャートにプロットされた各系列の平均値を呼び出します。 - `GlobalAverage`: 単一の値線を適用して、チャート内のすべての系列値の平均を呼び出します。 - `GlobalMaximum`: 単一の値線を適用して、チャート内のすべての系列値の絶対最大値を呼び出します。 @@ -147,9 +147,9 @@ public Series StylingOverlayText() ## API リファレンス - - - - - - +
+
+
+
+
+
diff --git a/docs/xplat/src/content/jp/components/charts/features/chart-performance.mdx b/docs/xplat/src/content/jp/components/charts/features/chart-performance.mdx index 693f4e7271..0052105c3e 100644 --- a/docs/xplat/src/content/jp/components/charts/features/chart-performance.mdx +++ b/docs/xplat/src/content/jp/components/charts/features/chart-performance.mdx @@ -713,6 +713,6 @@ this.LineSeries.Resolution = 10; ## API リファレンス - - - +
+
+
diff --git a/docs/xplat/src/content/jp/components/charts/features/chart-synchronization.mdx b/docs/xplat/src/content/jp/components/charts/features/chart-synchronization.mdx index 0b3582f7fa..51ad6b1ea9 100644 --- a/docs/xplat/src/content/jp/components/charts/features/chart-synchronization.mdx +++ b/docs/xplat/src/content/jp/components/charts/features/chart-synchronization.mdx @@ -35,4 +35,4 @@ $ ProductName$ データ チャートを使用すると、複数のチャート ## API リファレンス - +
diff --git a/docs/xplat/src/content/jp/components/charts/features/chart-tooltips.mdx b/docs/xplat/src/content/jp/components/charts/features/chart-tooltips.mdx index e90ec5f7e3..703a38fa3e 100644 --- a/docs/xplat/src/content/jp/components/charts/features/chart-tooltips.mdx +++ b/docs/xplat/src/content/jp/components/charts/features/chart-tooltips.mdx @@ -71,7 +71,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; ## API リファレンス - - - - +
+
+
+
diff --git a/docs/xplat/src/content/jp/components/charts/features/chart-trendlines.mdx b/docs/xplat/src/content/jp/components/charts/features/chart-trendlines.mdx index 9c3e7dc0c4..0bb8873c6b 100644 --- a/docs/xplat/src/content/jp/components/charts/features/chart-trendlines.mdx +++ b/docs/xplat/src/content/jp/components/charts/features/chart-trendlines.mdx @@ -80,7 +80,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; ## API リファレンス - - - - +
+
+
+
diff --git a/docs/xplat/src/content/jp/components/charts/features/chart-user-annotations.mdx b/docs/xplat/src/content/jp/components/charts/features/chart-user-annotations.mdx index fdd6a9d07c..c93eda4796 100644 --- a/docs/xplat/src/content/jp/components/charts/features/chart-user-annotations.mdx +++ b/docs/xplat/src/content/jp/components/charts/features/chart-user-annotations.mdx @@ -82,12 +82,12 @@ import dataChartUserAnnotationDelete from '@xplat-images/charts/data-chart-user- ## API リファレンス - - - - - - +
+
+
+
+
+
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/charts/types/area-chart.mdx b/docs/xplat/src/content/jp/components/charts/types/area-chart.mdx index 8295fd69a8..94c9e07a6c 100644 --- a/docs/xplat/src/content/jp/components/charts/types/area-chart.mdx +++ b/docs/xplat/src/content/jp/components/charts/types/area-chart.mdx @@ -228,13 +228,13 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; ## API References - - - - - - - - - - +
+
+
+
+
+
+
+
+
+
diff --git a/docs/xplat/src/content/jp/components/charts/types/bar-chart.mdx b/docs/xplat/src/content/jp/components/charts/types/bar-chart.mdx index 2fd7d3e519..01269c3c0a 100644 --- a/docs/xplat/src/content/jp/components/charts/types/bar-chart.mdx +++ b/docs/xplat/src/content/jp/components/charts/types/bar-chart.mdx @@ -148,8 +148,8 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; ## API リファレンス - - - - - +
+
+
+
+
diff --git a/docs/xplat/src/content/jp/components/charts/types/bubble-chart.mdx b/docs/xplat/src/content/jp/components/charts/types/bubble-chart.mdx index f95f3cd0da..f2a9ceb6bd 100644 --- a/docs/xplat/src/content/jp/components/charts/types/bubble-chart.mdx +++ b/docs/xplat/src/content/jp/components/charts/types/bubble-chart.mdx @@ -70,6 +70,6 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; ## API リファレンス - - - +
+
+
diff --git a/docs/xplat/src/content/jp/components/charts/types/column-chart.mdx b/docs/xplat/src/content/jp/components/charts/types/column-chart.mdx index 732002dbe3..09beaa0b52 100644 --- a/docs/xplat/src/content/jp/components/charts/types/column-chart.mdx +++ b/docs/xplat/src/content/jp/components/charts/types/column-chart.mdx @@ -187,12 +187,12 @@ The following table lists API members mentioned in the above sections: | Stacked 100% Column | `DataChart` | `Stacked100ColumnSeries` | | Waterfall | `DataChart` | `WaterfallSeries` | - - - - - - - - - +
+
+
+
+
+
+
+
+
diff --git a/docs/xplat/src/content/jp/components/charts/types/composite-chart.mdx b/docs/xplat/src/content/jp/components/charts/types/composite-chart.mdx index 39646b0fad..c94836e3f8 100644 --- a/docs/xplat/src/content/jp/components/charts/types/composite-chart.mdx +++ b/docs/xplat/src/content/jp/components/charts/types/composite-chart.mdx @@ -32,8 +32,8 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; ## API リファレンス - - - - - +
+
+
+
+
diff --git a/docs/xplat/src/content/jp/components/charts/types/data-pie-chart.mdx b/docs/xplat/src/content/jp/components/charts/types/data-pie-chart.mdx index 3571719600..accf2e5d66 100644 --- a/docs/xplat/src/content/jp/components/charts/types/data-pie-chart.mdx +++ b/docs/xplat/src/content/jp/components/charts/types/data-pie-chart.mdx @@ -202,4 +202,4 @@ ItemLegend バッジを変更することもできます。デフォルトでは ## API リファレンス - +
diff --git a/docs/xplat/src/content/jp/components/charts/types/donut-chart.mdx b/docs/xplat/src/content/jp/components/charts/types/donut-chart.mdx index a9909baf40..ef0673031b 100644 --- a/docs/xplat/src/content/jp/components/charts/types/donut-chart.mdx +++ b/docs/xplat/src/content/jp/components/charts/types/donut-chart.mdx @@ -87,4 +87,4 @@ The {ProductName} ドーナツ チャートは[円チャート](pie-chart.md)と ## API リファレンス - +
diff --git a/docs/xplat/src/content/jp/components/charts/types/gantt-chart.mdx b/docs/xplat/src/content/jp/components/charts/types/gantt-chart.mdx index dabb00e261..f61cad45dc 100644 --- a/docs/xplat/src/content/jp/components/charts/types/gantt-chart.mdx +++ b/docs/xplat/src/content/jp/components/charts/types/gantt-chart.mdx @@ -32,8 +32,8 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; ## API リファレンス - - - - - +
+
+
+
+
diff --git a/docs/xplat/src/content/jp/components/charts/types/line-chart.mdx b/docs/xplat/src/content/jp/components/charts/types/line-chart.mdx index c7d04becae..a998c93938 100644 --- a/docs/xplat/src/content/jp/components/charts/types/line-chart.mdx +++ b/docs/xplat/src/content/jp/components/charts/types/line-chart.mdx @@ -208,10 +208,10 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; | 積層型折れ線 | `DataChart` | `StackedLineSeries` | | 積層型 100% 折れ線 | `DataChart` | `Stacked100LineSeries` | - - - - - - - +
+
+
+
+
+
+
diff --git a/docs/xplat/src/content/jp/components/charts/types/network-chart.mdx b/docs/xplat/src/content/jp/components/charts/types/network-chart.mdx index 7c7da3f6d3..abcd4475d6 100644 --- a/docs/xplat/src/content/jp/components/charts/types/network-chart.mdx +++ b/docs/xplat/src/content/jp/components/charts/types/network-chart.mdx @@ -48,13 +48,13 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; ## API リファレンス - - - - - - - - - - +
+
+
+
+
+
+
+
+
+
diff --git a/docs/xplat/src/content/jp/components/charts/types/pie-chart.mdx b/docs/xplat/src/content/jp/components/charts/types/pie-chart.mdx index bbc52fb517..f772bccb6b 100644 --- a/docs/xplat/src/content/jp/components/charts/types/pie-chart.mdx +++ b/docs/xplat/src/content/jp/components/charts/types/pie-chart.mdx @@ -180,4 +180,4 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; ## API リファレンス - +
diff --git a/docs/xplat/src/content/jp/components/charts/types/point-chart.mdx b/docs/xplat/src/content/jp/components/charts/types/point-chart.mdx index 480bc59e2f..02fc6e1611 100644 --- a/docs/xplat/src/content/jp/components/charts/types/point-chart.mdx +++ b/docs/xplat/src/content/jp/components/charts/types/point-chart.mdx @@ -78,5 +78,5 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; ## API リファレンス - - +
+
diff --git a/docs/xplat/src/content/jp/components/charts/types/polar-chart.mdx b/docs/xplat/src/content/jp/components/charts/types/polar-chart.mdx index 78f2329529..d59fe025cb 100644 --- a/docs/xplat/src/content/jp/components/charts/types/polar-chart.mdx +++ b/docs/xplat/src/content/jp/components/charts/types/polar-chart.mdx @@ -96,11 +96,11 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; ## API リファレンス - - - - - - - - +
+
+
+
+
+
+
+
diff --git a/docs/xplat/src/content/jp/components/charts/types/pyramid-chart.mdx b/docs/xplat/src/content/jp/components/charts/types/pyramid-chart.mdx index 70a4b9271c..f91dad3166 100644 --- a/docs/xplat/src/content/jp/components/charts/types/pyramid-chart.mdx +++ b/docs/xplat/src/content/jp/components/charts/types/pyramid-chart.mdx @@ -31,7 +31,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; ## API リファレンス - - - - +
+
+
+
diff --git a/docs/xplat/src/content/jp/components/charts/types/radial-chart.mdx b/docs/xplat/src/content/jp/components/charts/types/radial-chart.mdx index 49e6fe52e6..d814e7eaf6 100644 --- a/docs/xplat/src/content/jp/components/charts/types/radial-chart.mdx +++ b/docs/xplat/src/content/jp/components/charts/types/radial-chart.mdx @@ -88,10 +88,10 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; ## API リファレンス - - - - - - - +
+
+
+
+
+
+
diff --git a/docs/xplat/src/content/jp/components/charts/types/scatter-chart.mdx b/docs/xplat/src/content/jp/components/charts/types/scatter-chart.mdx index ced16bf1bf..f0a60af1c5 100644 --- a/docs/xplat/src/content/jp/components/charts/types/scatter-chart.mdx +++ b/docs/xplat/src/content/jp/components/charts/types/scatter-chart.mdx @@ -107,10 +107,10 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; ## API References - - - - - - - +
+
+
+
+
+
+
diff --git a/docs/xplat/src/content/jp/components/charts/types/shape-chart.mdx b/docs/xplat/src/content/jp/components/charts/types/shape-chart.mdx index 4f2a565d1f..a6bea4c5f3 100644 --- a/docs/xplat/src/content/jp/components/charts/types/shape-chart.mdx +++ b/docs/xplat/src/content/jp/components/charts/types/shape-chart.mdx @@ -56,8 +56,8 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; ## API リファレンス - - - - - +
+
+
+
+
diff --git a/docs/xplat/src/content/jp/components/charts/types/sparkline-chart.mdx b/docs/xplat/src/content/jp/components/charts/types/sparkline-chart.mdx index ae5f0c5261..9b3bab8de8 100644 --- a/docs/xplat/src/content/jp/components/charts/types/sparkline-chart.mdx +++ b/docs/xplat/src/content/jp/components/charts/types/sparkline-chart.mdx @@ -164,4 +164,4 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; ## API リファレンス - +
diff --git a/docs/xplat/src/content/jp/components/charts/types/spline-chart.mdx b/docs/xplat/src/content/jp/components/charts/types/spline-chart.mdx index a9ba0e10bd..b1f22d4d45 100644 --- a/docs/xplat/src/content/jp/components/charts/types/spline-chart.mdx +++ b/docs/xplat/src/content/jp/components/charts/types/spline-chart.mdx @@ -114,7 +114,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; | 積層型スプライン | `DataChart` | `StackedSplineSeries` | | 積層型 100% スプライン | `DataChart` | `Stacked100SplineSeries` | - - - - +
+
+
+
diff --git a/docs/xplat/src/content/jp/components/charts/types/step-chart.mdx b/docs/xplat/src/content/jp/components/charts/types/step-chart.mdx index 9ab84f84cf..d1e2d598eb 100644 --- a/docs/xplat/src/content/jp/components/charts/types/step-chart.mdx +++ b/docs/xplat/src/content/jp/components/charts/types/step-chart.mdx @@ -61,4 +61,4 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; ## API リファレンス - +
diff --git a/docs/xplat/src/content/jp/components/charts/types/stock-chart.mdx b/docs/xplat/src/content/jp/components/charts/types/stock-chart.mdx index 0293aad2ca..bc12f05a37 100644 --- a/docs/xplat/src/content/jp/components/charts/types/stock-chart.mdx +++ b/docs/xplat/src/content/jp/components/charts/types/stock-chart.mdx @@ -162,4 +162,4 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; ## API リファレンス - +
diff --git a/docs/xplat/src/content/jp/components/charts/types/treemap-chart.mdx b/docs/xplat/src/content/jp/components/charts/types/treemap-chart.mdx index 59679452d4..209b2f8c80 100644 --- a/docs/xplat/src/content/jp/components/charts/types/treemap-chart.mdx +++ b/docs/xplat/src/content/jp/components/charts/types/treemap-chart.mdx @@ -136,4 +136,4 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; ## API リファレンス - +
diff --git a/docs/xplat/src/content/jp/components/dashboard-tile.mdx b/docs/xplat/src/content/jp/components/dashboard-tile.mdx index 9084cc4c2d..8afff88cab 100644 --- a/docs/xplat/src/content/jp/components/dashboard-tile.mdx +++ b/docs/xplat/src/content/jp/components/dashboard-tile.mdx @@ -194,13 +194,13 @@ IgrDashboardTileModule.register(); - - - - - - - +
+
+
+
+
+
+
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/editors/multi-column-combobox.mdx b/docs/xplat/src/content/jp/components/editors/multi-column-combobox.mdx deleted file mode 100644 index 71f3a42b31..0000000000 --- a/docs/xplat/src/content/jp/components/editors/multi-column-combobox.mdx +++ /dev/null @@ -1,362 +0,0 @@ ---- -title: "{Platform} コンボ | データ可視化ツール | インフラジスティックス" -description: インフラジスティックスの {Platform} コンボ コンポーネントは、データを表示するのに最適なチャートを選択するのに役立ちます。{ProductName} でグラフと視覚化を改善します! -keywords: "{Platform} combo, drop down, {ProductName}, Infragistics, {Platform} コンボ, ドロップダウン, インフラジスティックス" -mentionedTypes: [] -_language: ja ---- -import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; -import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; -import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - - -# {Platform} 複数列コンボ ボックスの概要 - -複数列コンボ ボックスは、データ オブジェクトのプロパティ列を自動的に生成します。このコンポーネントは、ドロップダウンに埋め込まれたデータ グリッドのように大量のデータを可視化するコンボ ボックスであるという点で独特です。 - -## {Platform} 複数列コンボ ボックスの例 - -このサンプルは、ポップアップ ウィンドウの複数の列にデータを表示する `MultiColumnComboBox` を作成する方法を示しています。 - - - - - - - - - -## 依存関係 -Chart コンポーネントをインストールするときに core パッケージもインストールする必要があります。 - -```cmd -npm install --save {PackageCore} -npm install --save {PackageDataGrids} -npm install --save {PackageInputs} -npm install --save {PackageLayouts} -``` - - - - -## モジュールの要件 - -複数列コンボ ボックスを作成するには、以下のモジュールが必要です。 - - - -```razor -// in Program.cs file - -builder.Services.AddIgniteUIBlazor( - typeof(IgbMultiColumnComboBoxModule)); -``` - - - - - -```ts -import { IgrMultiColumnComboBoxModule } from 'igniteui-react-data-grids'; -import { IgrMultiColumnComboBox } from 'igniteui-react-data-grids'; - -IgrMultiColumnComboBoxModule.register(); -``` - - - - - -```ts -import { IgcMultiColumnComboBoxModule } from 'igniteui-webcomponents-data-grids'; -import { IgcMultiColumnComboBoxComponent } from 'igniteui-webcomponents-data-grids'; - -ModuleManager.register( - IgcMultiColumnComboBoxModule -); -``` - - - -## 使用方法 - -### データ ソースのバインド - -オブジェクトを複数列コンボ ボックス コンポーネントに表示するには、`DataSource` プロパティをバインドする必要があります。これは、複雑なオブジェクトの配列の形式としてバインドできます。以下のコードは、データ ソース プロパティをバインドする方法を示します。 - - - -以下のコード スニペットでは、"countryNames" コレクションはカスタム オブジェクトで満たされた any[] です。 - - - - - -```tsx - -``` - - - - - -```html - - -``` - - - -```ts -constructor() { - let multiColumnComboBox = document.getElementById("comboBox") as IgcMultiColumnComboBoxComponent; - multiColumnComboBox.dataSource = countryNames; -} -``` - - - - - -```razor - - -@code { - protected List CountryNames; - - protected override void OnInitialized() - { - this.CountryNames = CountryTreeData.Create(); - } -} -``` - - - -### 表示値とデータ値の設定 - -複数列コンボ ボックスのバインドされた `DataSource` のさまざまなプロパティを構成して、コントロールの表示テキストとして機能し、選択が行われたときに既定値としても機能します。コントロールの `TextField` と `ValueField` プロパティをこれらを表現したいデータ項目のプロパティ名に設定します。 - - - - - -コンポーネントの値をプログラムで更新する必要がある場合、`ValueChanged` イベントを処理する必要があります。`ValueChanged` イベント ハンドラー内にない場合、`GetValue` と `GetValueAsync` メソッドを使用して値を取得できます。 - - - - -以下のコード スニペットは、基本データ項目に "Country" および "ID" プロパティがある場合、これらのプロパティを設定する方法を示しています。 - - - -```tsx - -``` - - - - - -```html - - -``` - - - -```ts -constructor() { - let multiColumnComboBox = document.getElementById("comboBox") as IgcMultiColumnComboBoxComponent; - multiColumnComboBox.dataSource = countryNames; - multiColumnComboBox.textField = "Country"; - multiColumnComboBox.valueField = ["ID"]; -} -``` - - - - - -```razor - - -@code { - protected List CountryNames; - - protected override void OnInitialized() - { - this.CountryNames = CountryTreeData.Create(); - } -} -``` - - - -### フィールドの設定 - -デフォルトで、複数列コンボ ボックスは基本データ項目のすべてのプロパティを表示しますが、これはコンポーネントの `Fields` プロパティを設定することで制御できます。このプロパティは表示されるプロパティを決定するために基本データ項目のプロパティ パスの `string[]` を取得します。 - -以下のコード スニペットはこれを設定する方法を示します。結果のドロップダウンは ID および Country 列のみを表示します。 - - - -```tsx - -``` - - - - - -```html - - -``` - - - -```ts -constructor() { - let multiColumnComboBox = document.getElementById("comboBox") as IgcMultiColumnComboBoxComponent; - multiColumnComboBox.dataSource = countryNames; - multiColumnComboBox.fields = ["ID", "Country"]; -} -``` - - - - - -```razor - - -@code { - protected List CountryNames; - - protected override void OnInitialized() - { - this.CountryNames = CountryTreeData.Create(); - } -} -``` - - - -### プレースホルダー テキストの設定 - -複数列コンボ ボックス コンポーネントに選択がない場合にプレースホルダーとして表示するテキストを設定できます。`Placeholder` プロパティを表示したい文字列に設定します。以下のコードは設定する方法を示します。 - - - -```tsx - -``` - - - - - -```html - - -``` - - - -```ts -constructor() { - let multiColumnComboBox = document.getElementById("comboBox") as IgcMultiColumnComboBoxComponent; - multiColumnComboBox.dataSource = countryNames; - multiColumnComboBox.placeholder = "Please choose a country"; -} -``` - - - - - -```razor - - -@code { - protected List CountryNames; - - protected override void OnInitialized() - { - this.CountryNames = CountryTreeData.Create(); - } -} -``` - - - -### ソート モードの設定 - -ユーザーは、ドロップダウンで列のヘッダーをクリックして、複数列コンボ ボックスに表示される列をソートすることができます。列は単一の列または複数の列でソートすることができ、昇順または降順に制限したり、3 ステートにしたり、ソートの構成方法も変更できます。コンポーネントの `SortMode` プロパティを使用して設定します。 - -注: TriState のソート オプションを使用すると、ソートされた列のソートを解除できます。 - -以下のコードは、複数列の 3 ステートでソートできるように複数列コンボ ボックスを設定する方法を示します。 - - - -```tsx - -``` - - - - - -```html - - -``` - - - -```ts -constructor() { - let multiColumnComboBox = document.getElementById("comboBox") as IgcMultiColumnComboBoxComponent; - multiColumnComboBox.dataSource = countryNames; - multiColumnComboBox.sortMode = SortMode.SortByMultipleColumnsTriState; -} -``` - - - - - -```razor - - -@code { - protected List CountryNames; - - protected override void OnInitialized() - { - this.CountryNames = CountryTreeData.Create(); - } -} -``` - - - - -## API リファレンス - - diff --git a/docs/xplat/src/content/jp/components/editors/xdate-picker.mdx b/docs/xplat/src/content/jp/components/editors/xdate-picker.mdx deleted file mode 100644 index fd0d246cc8..0000000000 --- a/docs/xplat/src/content/jp/components/editors/xdate-picker.mdx +++ /dev/null @@ -1,154 +0,0 @@ ---- -title: "{Platform} XDate Picker | データ可視化ツール | インフラジスティックス" -description: インフラジスティックスの {Platform} XDate Picker コンポーネントは、ユーザーの日付選択を支援します。{ProductName} でグラフと視覚化を改善します! -keywords: "{Platform} xdate picker, drop down, {ProductName}, Infragistics, ドロップダウン, インフラジスティックス" -mentionedTypes: ["XDatePicker"] -_language: ja ---- -import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; -import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; -import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; -import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - -# {Platform} XDate Picker (XDate ピッカー) の概要 - -XDate Picker コンポーネントは、ドロップダウン カレンダー UI を使用して日、月、年を直感的に選択できます。これは、アプリケーション ユーザーが特定の日付を選択する必要があり、複数のエディターを組み合わせて日付範囲 UI を作成する場合に便利です。 - - -`XDatePicker` コンポーネントは、{ProductName} のバージョン 5.0.018.7.0 以降では非推奨です。サポートされている最新の {ProductName} Date Picker コンポーネントについては、「スケジュール」のそれぞれのページを参照してください。 - - - -5.0.0 - - - - - -18.7.0 - - - of {ProductName}. For the latest supported {ProductName} Date Picker component refer to its respective page under "Scheduling". - -## {Platform} XDate Picker の例 - -このサンプルは、単一の日付を選択するオプションを使用して `XDatePicker` を作成する方法を示しています。 - - - - - -## 依存関係 -XDate Picker コンポーネントをインストールするときに core と input のパッケージもインストールする必要があります。 - -```cmd -npm install --save {PackageCore} -npm install --save {PackageInputs} -npm install --save {PackageLayouts} -``` - - - -## コンポーネント モジュール - -XDate Picker コンポーネントを使用するには、以下のモジュールを登録する必要があります。 - - - -```razor -// in Program.cs file - -builder.Services.AddIgniteUIBlazor( - typeof(IgbXDatePickerModule)); -``` - - - - - -```ts -import { IgrXDatePickerModule } from 'igniteui-react-inputs'; - -IgrXDatePickerModule.register(); -``` - - - - - -```ts -import { IgcXDatePickerModule } from 'igniteui-webcomponents-inputs'; -import { ModuleManager } from 'igniteui-webcomponents-core'; - -ModuleManager.register(IgcXDatePickerModule); -``` - - - -
- -## 使用方法 - -{Platform} XDate Picker エディター コンポーネントは、デフォルトでは、テキスト領域、カレンダー ドロップダウン ボタン、およびクリア ボタンの 3 つの構成されます。これらの領域について以下に説明します。 - -- テキスト領域: エディターの `Value` プロパティに保存されている選択した日付を表示します。 - -- カレンダー: カレンダー ボタンをクリックすると、XDate Picker のカレンダー ドロップダウンが開きます。カレンダーが開き、現在選択されている `Value` の月が表示されます。`Value` が指定されていない場合、カレンダーは現在の日付に対応する月を表示します。上部の月をクリックすると、月のリストが表示され、年も同様です。月と年の可視化の左右にある矢印ボタンは、表示されている月を時系列で増減します。 - -- クリア ボタン: x アイコンは現在の値をクリアします。 - -| プロパティ | タイプ | 説明 | -| ---------|------|------------ | -| `IconColor` | string | カレンダー ボタンの色を変更します。 | -| `AllowTextInput` | bool | このプロパティを true に切り替えることで、XDate Picker の値を入力して変更できます。 | -| `DateFormat` | enum | デフォルトは DateShort です。例: 'mm/dd/yyyy'。DateLong に設定すると、エディターに表示される曜日を含めた日付が表示されます。例: 2021年4月14日水曜日。 | -| `FirstDayOfWeek` | enum | デフォルトは日曜日です。特定の曜日が、カレンダーの各週の行の最初の日として使用されます。例えば、月曜日から日曜日。 | -| `FormatString` | string | DateShort を使用すると、日付の形式を構成できます。例えば、'dd/mm/yyyy'。`DateFormat` の DateLong と `FormatString` が設定されている場合、`DateFormat` は無視されることに注意してください。 | -| `Label` | string | XDate Picker の左上隅の日付の上にカスタム テキストを表示します。 | -| `MinDate` | DateTime | 以前の日付が選択または表示されないように制限します。 | -| `MaxDate` | DateTime | 後の日付が選択または表示されないように制限します。 | -| `Placeholder` | string | カレンダーの編集部分の値がクリアされたときに表示されるカスタム文字列。 | -| `ShowClearButton` | bool | デフォルトは true で、クリア ボタンはカレンダー ボタンのすぐ左にあり、X で視覚化されます。クリックすると、XDate Picker の `Value` がクリアされます。クリア ボタンの表示は、オンとオフを切り替えることができます。 | -| `ShowTodayButton`| bool | 本日は、カレンダーが開かれた日付のすぐ下に表示されます。クリックすると、現在の日付が選択されます。本日のボタンの表示は、オンとオフを切り替えることができます。 | -| `ShowWeekNumbers` | bool | 週番号は、XDate Picker のドロップダウン部分の日付のすべての行の左側に番号として表示できます。週番号の表示のオンとオフを切り替えることができます。 | -| `FirstWeekOfYear` | enum | 年間の週の開始番号を構成します。FirstDay、FirstFourDayWeek、FirstFullWeek に設定できます。 | -| `OpenOnFocus` | bool | デフォルトでは、XDate Picker のドロップダウン部分はシングル クリックで開かれ、ユーザーはカレンダー ボタンをクリックしてカレンダーをドロップダウンする必要があります。 | -| `Value` | date | XDate Picker の値を設定し、ドロップダウン カレンダーで選択します。 | - -ユーザーは、コントロールのさまざまなテキスト プロパティを使用して XDate Picker のフォントをカスタマイズできます。使用できるプロパティは `TextColor`、`TextFontFamily`、`TextFontSize`、`TextFontStyle`、および `TextFontWeight` です。 - -### 編集 - -次の例は、`XDatePicker` で編集を有効にする方法を示しています。 - - - -
- -### 日付制限 - -次の例は、`XDatePicker` で選択した日付を制限する方法を示しています。 - - - -
- -### 日付の書式 - -次の例は、`XDatePicker` で長い日付を適用する方法を示しています。 - - - -
- -### 日付範囲 - -次の例は、複数の `XDatePicker` コントロールを組み合わせる方法を示しています。 - - - -
- -## API リファレンス - - diff --git a/docs/xplat/src/content/jp/components/excel-library-using-cells.mdx b/docs/xplat/src/content/jp/components/excel-library-using-cells.mdx index 13c5e69554..cd75971bf9 100644 --- a/docs/xplat/src/content/jp/components/excel-library-using-cells.mdx +++ b/docs/xplat/src/content/jp/components/excel-library-using-cells.mdx @@ -351,7 +351,7 @@ RGB またはテーマの色が使用される場合、色を明るくする、 以下のメソッドを使用して `Styles` コレクションのクリア、または `Clear` や `Reset` メソッドで定義された状態にリセットすることができます。両メソッドはすべてのユーザー定義スタイルを削除しますが `Clear` は `Styles` コレクション全体をクリアします。 -この機能では、`Style` プロパティが オブジェクトに追加されています。これは書式の親スタイルを表す、 インターフェイスへの参照です。スタイルの書式では、このプロパティは常に null です。スタイルが親スタイルを持つことができないためです。行、列およびセル書式には、`Style` プロパティが常にデフォルトで `NormalStyle` スタイルを返します。 +この機能では、`Style` プロパティが オブジェクトに追加されています。これは書式の親スタイルを表す、 インターフェイスへの参照です。スタイルの書式では、このプロパティは常に null です。スタイルが親スタイルを持つことができないためです。行、列およびセル書式には、`Style` プロパティが常にデフォルトで `NormalStyle` スタイルを返します。 `Style` プロパティを null に設定した場合、`NormalStyle` スタイルに戻ります。スタイル コレクションで別のスタイルに設定される場合、そのスタイルはセル書式にすべての未設定のプロパティのデフォルトを保持するようになります。 @@ -484,17 +484,17 @@ var cellText = worksheet.Rows[0].Cells[0].GetText(); ## API リファレンス - - - - - - - - - - - - - - +
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/xplat/src/content/jp/components/excel-library-using-tables.mdx b/docs/xplat/src/content/jp/components/excel-library-using-tables.mdx index 8bb83d2078..8bfdeb0f8e 100644 --- a/docs/xplat/src/content/jp/components/excel-library-using-tables.mdx +++ b/docs/xplat/src/content/jp/components/excel-library-using-tables.mdx @@ -137,7 +137,7 @@ table.Columns[0].ApplyAverageFilter(Documents.Excel.Filtering.AverageFilterType. テーブルのデータが後で変更される場合、ソート条件は自動的に再評価されません。テーブルのソート条件は、ソート条件が追加、削除、変更される時に、または `ReapplySortConditions` メソッドがテーブルで呼び出されるときに限り再適用されます。ソート条件が再評価されると、表示されたセルのみがソートられます。非表示行のすべてのセルは適切に維持されます。 -テーブル列からソート条件へアクセスする以外に の プロパティの `SortConditions` コレクションからも公開されます。これは、列/ソート条件のペアの順番に並べられたコレクションです。このコレクション内の順序はソートの優先順位です。 +テーブル列からソート条件へアクセスする以外に の `SortSettings` プロパティの `SortConditions` コレクションからも公開されます。これは、列/ソート条件のペアの順番に並べられたコレクションです。このコレクション内の順序はソートの優先順位です。 列に設定可能なソート条件タイプは以下のとおりです。 @@ -146,7 +146,7 @@ table.Columns[0].ApplyAverageFilter(Documents.Excel.Filtering.AverageFilterType. - `FillSortCondition` - 塗りつぶしが特定のパターン/グラデーションであるかどうかに基づいてセルをソートします。 - `FontColorSortCondition` - フォントが特定の色であるかどうかによってセルをソートします。 -また の の `CaseSensitive` プロパティは、文字列が大文字と小文字を区別してソートできるかどうかを開発者が設定できます。 +また の `SortSettings` の `CaseSensitive` プロパティは、文字列が大文字と小文字を区別してソートできるかどうかを開発者が設定できます。 以下のコード スニペットは、 に `OrderedSortCondition` を適用する方法です。 @@ -178,5 +178,5 @@ table.SortSettings.SortConditions.Add(table.Columns[0], new Infragistics.Documen ## API リファレンス - - +
+
diff --git a/docs/xplat/src/content/jp/components/excel-library-using-workbooks.mdx b/docs/xplat/src/content/jp/components/excel-library-using-workbooks.mdx index aba5a74a33..fb9e842b71 100644 --- a/docs/xplat/src/content/jp/components/excel-library-using-workbooks.mdx +++ b/docs/xplat/src/content/jp/components/excel-library-using-workbooks.mdx @@ -27,7 +27,7 @@ Infragistics {Platform} Excel Engine は、データを Microsoft® Excel® に ## 既定のフォントを変更 - の新しいインスタンスを作成します。 の `Styles` コレクションに新しいフォントを追加します。このスタイルにはワークブックのすべてのセルのデフォルトのプロパティが含まれています。ただし、行、列またはセルで指定されている場合はその限りではありません。スタイルのプロパティを変更すると、ワークブックのデフォルトのセル書式プロパティが変更します。 + の新しいインスタンスを作成します。 の `Styles` コレクションに新しいフォントを追加します。このスタイルにはワークブックのすべてのセルのデフォルトのプロパティが含まれています。ただし、行、列またはセルで指定されている場合はその限りではありません。スタイルのプロパティを変更すると、ワークブックのデフォルトのセル書式プロパティが変更します。 ```ts var workbook = new Workbook(); @@ -151,6 +151,6 @@ var protect = workbook.Protection; ## API リファレンス - - - +
+
+
diff --git a/docs/xplat/src/content/jp/components/excel-library-using-worksheets.mdx b/docs/xplat/src/content/jp/components/excel-library-using-worksheets.mdx index d66a2cd0b3..2037394aec 100644 --- a/docs/xplat/src/content/jp/components/excel-library-using-worksheets.mdx +++ b/docs/xplat/src/content/jp/components/excel-library-using-worksheets.mdx @@ -141,7 +141,7 @@ worksheet.Protect(); オブジェクトの `Protect` メソッドを使用して構造変更からワークシートを保護できます。 -保護が設定されると、Worksheet オブジェクトの保護をこれらのオブジェクトでオーバーライドするために、 オブジェクトの `Locked` プロパティを各セル、行、マージされたセル領域、または列で設定することができます。たとえば、1 つの列のセルを除き、ワークシートのすべてのセルを読み取り専用にする必要がある場合、特定の オブジェクトで プロパティの `Locked` を **false** に設定します。これにより、その列内のセルの編集をユーザーに許可し、ワークシートの他のセルの編集は禁止できます。 +保護が設定されると、Worksheet オブジェクトの保護をこれらのオブジェクトでオーバーライドするために、 オブジェクトの `Locked` プロパティを各セル、行、マージされたセル領域、または列で設定することができます。たとえば、1 つの列のセルを除き、ワークシートのすべてのセルを読み取り専用にする必要がある場合、特定の オブジェクトで プロパティの `Locked` を **false** に設定します。これにより、その列内のセルの編集をユーザーに許可し、ワークシートの他のセルの編集は禁止できます。 以下のコードはその方法を示します。 @@ -337,9 +337,9 @@ worksheet.Protect(); の条件付き書式を設定するには、ワークシートの `ConditionalFormats` コレクションで公開される多数の Add メソッドを使用できます。この Add メソッドの最初のパラメーターは条件付き書式に適用する Worksheet の `string` 領域です。 -Worksheet に追加可能な条件付き書式にその条件が true の場合に 要素の外観を決定する プロパティがあります。たとえば、`Fill` や `Font` などのこの プロパティにアタッチされるプロパティを使用してセルの背景およびフォント設定を決定できます。 +Worksheet に追加可能な条件付き書式にその条件が true の場合に 要素の外観を決定する プロパティがあります。たとえば、`Fill` や `Font` などのこの プロパティにアタッチされるプロパティを使用してセルの背景およびフォント設定を決定できます。 -ワークシート セルの可視化の動作が異なるため、 プロパティがない条件付き書式もあります。この条件付き書式は 、、`IconSetConditionalFormat` です。 +ワークシート セルの可視化の動作が異なるため、 プロパティがない条件付き書式もあります。この条件付き書式は 、、`IconSetConditionalFormat` です。 既存の を Excel から読み込む際に、その が読み込まれた場合も書式設定は保持されます。 を Excel ファイルに保存する場合も保持されます。 @@ -371,13 +371,13 @@ format.CellFormat.Font.ColorInfo = new WorkbookColorInfo(Core.Graphics.Colors.Re ## API リファレンス - - - - - - - - - - +
+
+
+
+
+
+
+
+
+
diff --git a/docs/xplat/src/content/jp/components/excel-library-working-with-charts.mdx b/docs/xplat/src/content/jp/components/excel-library-working-with-charts.mdx index 52047c86da..d1a8006ba9 100644 --- a/docs/xplat/src/content/jp/components/excel-library-working-with-charts.mdx +++ b/docs/xplat/src/content/jp/components/excel-library-working-with-charts.mdx @@ -64,4 +64,4 @@ chart.SetSourceData("A2:M6", true); ## API リファレンス - +
diff --git a/docs/xplat/src/content/jp/components/excel-library-working-with-grids.mdx b/docs/xplat/src/content/jp/components/excel-library-working-with-grids.mdx index 9abd1deba2..1dc60173d6 100644 --- a/docs/xplat/src/content/jp/components/excel-library-working-with-grids.mdx +++ b/docs/xplat/src/content/jp/components/excel-library-working-with-grids.mdx @@ -33,4 +33,4 @@ TODO ## API リファレンス - +
diff --git a/docs/xplat/src/content/jp/components/excel-library-working-with-sparklines.mdx b/docs/xplat/src/content/jp/components/excel-library-working-with-sparklines.mdx index 90f8869261..ce550c1c2d 100644 --- a/docs/xplat/src/content/jp/components/excel-library-working-with-sparklines.mdx +++ b/docs/xplat/src/content/jp/components/excel-library-working-with-sparklines.mdx @@ -59,4 +59,4 @@ sheet1.SparklineGroups.Add(SparklineType.Column, "Sparklines!B1:B1", "Data!A2:A1 ## API リファレンス - +
diff --git a/docs/xplat/src/content/jp/components/excel-library.mdx b/docs/xplat/src/content/jp/components/excel-library.mdx index 47c52c129e..154fa2068c 100644 --- a/docs/xplat/src/content/jp/components/excel-library.mdx +++ b/docs/xplat/src/content/jp/components/excel-library.mdx @@ -254,5 +254,5 @@ Modify `angular.json` by setting the `vendorSourceMap` option under architect => ## API References - - +
+
diff --git a/docs/xplat/src/content/jp/components/excel-utility.mdx b/docs/xplat/src/content/jp/components/excel-utility.mdx index 3437c9401a..4c4bc5a0b4 100644 --- a/docs/xplat/src/content/jp/components/excel-utility.mdx +++ b/docs/xplat/src/content/jp/components/excel-utility.mdx @@ -355,6 +355,6 @@ export class ExcelUtility { ## API リファレンス - - - +
+
+
diff --git a/docs/xplat/src/content/jp/components/geo-map-binding-data-csv.mdx b/docs/xplat/src/content/jp/components/geo-map-binding-data-csv.mdx index d8467b7c96..8decbcd250 100644 --- a/docs/xplat/src/content/jp/components/geo-map-binding-data-csv.mdx +++ b/docs/xplat/src/content/jp/components/geo-map-binding-data-csv.mdx @@ -339,4 +339,4 @@ onDataLoaded(csvData: string) { ## API リファレンス - +
diff --git a/docs/xplat/src/content/jp/components/geo-map-binding-data-json-points.mdx b/docs/xplat/src/content/jp/components/geo-map-binding-data-json-points.mdx index 000c39e99d..89b2ba0052 100644 --- a/docs/xplat/src/content/jp/components/geo-map-binding-data-json-points.mdx +++ b/docs/xplat/src/content/jp/components/geo-map-binding-data-json-points.mdx @@ -273,6 +273,6 @@ onDataLoaded(jsonData: any[]) { ## API リファレンス - - - +
+
+
diff --git a/docs/xplat/src/content/jp/components/geo-map-binding-data-model.mdx b/docs/xplat/src/content/jp/components/geo-map-binding-data-model.mdx index 53aee224fb..ebb947a067 100644 --- a/docs/xplat/src/content/jp/components/geo-map-binding-data-model.mdx +++ b/docs/xplat/src/content/jp/components/geo-map-binding-data-model.mdx @@ -433,9 +433,9 @@ createPolylineSeries(flight: any) ## API リファレンス - - - - - - +
+
+
+
+
+
diff --git a/docs/xplat/src/content/jp/components/geo-map-binding-data-overview.mdx b/docs/xplat/src/content/jp/components/geo-map-binding-data-overview.mdx index 9d7bac3b61..0075f2bc7a 100644 --- a/docs/xplat/src/content/jp/components/geo-map-binding-data-overview.mdx +++ b/docs/xplat/src/content/jp/components/geo-map-binding-data-overview.mdx @@ -27,4 +27,4 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; ## API リファレンス - +
diff --git a/docs/xplat/src/content/jp/components/geo-map-binding-multiple-shapes.mdx b/docs/xplat/src/content/jp/components/geo-map-binding-multiple-shapes.mdx index fe9ab4bdfd..2057cb259d 100644 --- a/docs/xplat/src/content/jp/components/geo-map-binding-multiple-shapes.mdx +++ b/docs/xplat/src/content/jp/components/geo-map-binding-multiple-shapes.mdx @@ -26,7 +26,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-このトピックでは、マップ コンポーネントに複数の地理的シリーズを表示する方法について段階的に説明します。すべての地理的シリーズは、 クラスを使用して形状ファイルからロードされた地理空間データに従ってプロットします。 オブジェクトの詳細については、[シェープ ファイルのバインディング](geo-map-binding-shp-file.md)のトピックを参照してください。 +このトピックでは、マップ コンポーネントに複数の地理的シリーズを表示する方法について段階的に説明します。すべての地理的シリーズは、 クラスを使用して形状ファイルからロードされた地理空間データに従ってプロットします。 オブジェクトの詳細については、[シェープ ファイルのバインディング](geo-map-binding-shp-file.md)のトピックを参照してください。 - – 主要都市の場所を表示します。 - – 主要ポート間のルートを表示します。 @@ -244,7 +244,7 @@ public render() { ## シェープファイルの読み込み -次に、ページのコンストラクターで、地理マップコンポーネントに表示する各シェープファイルの を追加します。 +次に、ページのコンストラクターで、地理マップコンポーネントに表示する各シェープファイルの を追加します。 @@ -344,7 +344,7 @@ protected override void OnInitialized() ## ポリゴンの処理 -世界の国々の に読み込まれた形状データを処理し、 オブジェクトに割り当てます。 +世界の国々の に読み込まれた形状データを処理し、 オブジェクトに割り当てます。 ```ts import { IgrGeographicShapeSeries } from 'igniteui-react-maps'; @@ -423,7 +423,7 @@ public onPolygonsLoaded(sds: IgcShapeDataSource, e: any) { ## ポリラインの処理 - に読み込まれた形状データを処理し、主要都市間の通信ルートを使用して、 オブジェクトに割り当てます。 + に読み込まれた形状データを処理し、主要都市間の通信ルートを使用して、 オブジェクトに割り当てます。 ```ts import { IgrGeographicPolylineSeries } from 'igniteui-react-maps'; @@ -510,7 +510,7 @@ public onPolylinesLoaded(sds: IgcShapeDataSource, e: any) { ## ポイントの処理 - に読み込まれた世界各国の形状データを処理し、 オブジェクトに割り当てます。 + に読み込まれた世界各国の形状データを処理し、 オブジェクトに割り当てます。 ```ts import { IgrGeographicSymbolSeries } from 'igniteui-react-maps'; @@ -1158,7 +1158,7 @@ export class MapBindingMultipleShapes extends SampleBase { ## API リファレンス - - - - +
+
+
+
diff --git a/docs/xplat/src/content/jp/components/geo-map-binding-multiple-sources.mdx b/docs/xplat/src/content/jp/components/geo-map-binding-multiple-sources.mdx index a9bd2eb2d7..6a2849bee9 100644 --- a/docs/xplat/src/content/jp/components/geo-map-binding-multiple-sources.mdx +++ b/docs/xplat/src/content/jp/components/geo-map-binding-multiple-sources.mdx @@ -379,5 +379,5 @@ export class MapBindingMultipleSourcesComponent implements AfterViewInit { ## API リファレンス - - +
+
diff --git a/docs/xplat/src/content/jp/components/geo-map-binding-shp-file.mdx b/docs/xplat/src/content/jp/components/geo-map-binding-shp-file.mdx index a121143b62..c75c7ad833 100644 --- a/docs/xplat/src/content/jp/components/geo-map-binding-shp-file.mdx +++ b/docs/xplat/src/content/jp/components/geo-map-binding-shp-file.mdx @@ -12,7 +12,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # {Platform} シェープ ファイルを地理的データにバインディング -{ProductName} Map コンポーネントの クラスは、形状ファイルから地理空間データ (ポイント/位置、ポリライン、ポリゴン) を読み込み、それを オブジェクトのコレクションに変換します。 +{ProductName} Map コンポーネントの クラスは、形状ファイルから地理空間データ (ポイント/位置、ポリライン、ポリゴン) を読み込み、それを オブジェクトのコレクションに変換します。 ## {Platform} シェープ ファイルを地理的データにバインディングの例 @@ -20,7 +20,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-以下の表は、シェイプ ファイルを読み込むための クラスのプロパティを説明します。 +以下の表は、シェイプ ファイルを読み込むための クラスのプロパティを説明します。 | プロパティ | 型 | 概要 | |----------|------|---------------| @@ -30,10 +30,10 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; -両方のソース プロパティが null 以外の値に設定されると、 オブジェクトの ImportAsync メソッドが起動し、シェイプ ファイルを取得して読み込み、最終的に変換を実行します。この操作が完了すると、 は オブジェクトで生成され、シェイプ ファイルから地理空間データを読み込んで変換するプロセスが完了したことを通知するために、`ImportCompleted` イベントが起動されます。 +両方のソース プロパティが null 以外の値に設定されると、 オブジェクトの ImportAsync メソッドが起動し、シェイプ ファイルを取得して読み込み、最終的に変換を実行します。この操作が完了すると、 は オブジェクトで生成され、シェイプ ファイルから地理空間データを読み込んで変換するプロセスが完了したことを通知するために、`ImportCompleted` イベントが起動されます。 ## シェープファイルの読み込み -以下のコードは、世界の主要都市の場所を含むシェイプ ファイルを読み込むための オブジェクトのインスタンスを作成します。また、xamGeographicMap コントロールにデータをバインドするための前提条件として `ImportCompleted` イベントを処理する方法も示します。 +以下のコードは、世界の主要都市の場所を含むシェイプ ファイルを読み込むための オブジェクトのインスタンスを作成します。また、xamGeographicMap コントロールにデータをバインドするための前提条件として `ImportCompleted` イベントを処理する方法も示します。 ```html @@ -57,7 +57,7 @@ sds.dataBind(); ## シェープファイルをバインド -Map コンポーネントでは、Geographic Series は、シェイプ ファイルから読み込まれる地理的データを表示するために使用されます。すべてのタイプの地理的シリーズには、オブジェクトの配列にバインドできる `ItemsSource` プロパティがあります。 は オブジェクトのリストを含むため、このような配列の例です。 +Map コンポーネントでは、Geographic Series は、シェイプ ファイルから読み込まれる地理的データを表示するために使用されます。すべてのタイプの地理的シリーズには、オブジェクトの配列にバインドできる `ItemsSource` プロパティがあります。 は オブジェクトのリストを含むため、このような配列の例です。 `ShapefileRecord` クラスは、以下の表にリストする地理的データを保存するためのプロパティを提供します。 @@ -69,8 +69,8 @@ Map コンポーネントでは、Geographic Series は、シェイプ ファイ このデータ構造は、適切なデータ列がマップされている限り、ほとんどの地理的シリーズでの使用に適しています。 ## コード スニペット -このコード例は、シェープ ファイルが を使用して読み込まれたことを前提としています。 -以下のコードは、マップ コンポーネント内の を にバインドし、すべての オブジェクトの `Points` プロパティをマップします。 +このコード例は、シェープ ファイルが を使用して読み込まれたことを前提としています。 +以下のコードは、マップ コンポーネント内の を にバインドし、すべての オブジェクトの `Points` プロパティをマップします。 @@ -285,5 +285,5 @@ onDataLoaded(sds: IgcShapeDataSource, e: any) { ## API リファレンス - - +
+
diff --git a/docs/xplat/src/content/jp/components/geo-map-display-azure-imagery.mdx b/docs/xplat/src/content/jp/components/geo-map-display-azure-imagery.mdx index 0858a7b6a1..c29910a012 100644 --- a/docs/xplat/src/content/jp/components/geo-map-display-azure-imagery.mdx +++ b/docs/xplat/src/content/jp/components/geo-map-display-azure-imagery.mdx @@ -16,8 +16,8 @@ import azureTrafficTileSeriesWithBackground from '@xplat-images/general/Azure_Tr # {Platform} Azure Maps からの画像 -{Platform} は、Microsoft® が提供する地理的画像マッピング サービスです。 -世界の地理的画像タイルを複数のスタイルで供します。この地理的画像サービスは、www.azure.microsoft.com ウェブサイトから直接アクセスできます。{ProductName} Map コンポーネントは、 クラスを使用して、地図の背景コンテンツに Azure Maps の地理的画像を表示します。 +{Platform} は、Microsoft® が提供する地理的画像マッピング サービスです。 +世界の地理的画像タイルを複数のスタイルで供します。この地理的画像サービスは、www.azure.microsoft.com ウェブサイトから直接アクセスできます。{ProductName} Map コンポーネントは、 クラスを使用して、地図の背景コンテンツに Azure Maps の地理的画像を表示します。 ## {Platform} Azure Maps からの画像の表示 - 概要 @@ -28,7 +28,7 @@ import azureTrafficTileSeriesWithBackground from '@xplat-images/general/Azure_Tr ## {Platform} Azure Maps からの画像の表示 - コード例 -以下のコード スニペットは、 クラスを使用して {Platform} `GeographicMap` で Azure Maps からの地理的画像タイルを表示する方法を示します。 +以下のコード スニペットは、 クラスを使用して {Platform} `GeographicMap` で Azure Maps からの地理的画像タイルを表示する方法を示します。 @@ -142,7 +142,7 @@ map.backgroundContent = tileSource;
## Azure Maps からの画像オーバーレイ - コード例 -次のコード スニペットは、 クラスと クラスを使用して、{Platform} `GeographicMap` の交通情報と濃い灰色のマップを結合した背景画像の上に地理画像タイルを表示する方法を示しています。 +次のコード スニペットは、 クラスと クラスを使用して、{Platform} `GeographicMap` の交通情報と濃い灰色のマップを結合した背景画像の上に地理画像タイルを表示する方法を示しています。 @@ -331,15 +331,15 @@ window.addEventListener("load", () => { ## プロパティ -以下の表で、 クラスのプロパティを説明します。 +以下の表で、 クラスのプロパティを説明します。 | プロパティ名 | プロパティ タイプ | 説明 | |----------------|-----------------|---------------| -||string|Azure Maps 画像サービスで必要となる API キーを設定するためのプロパティを表します。このキーは azure.microsoft.com ウェブサイトから取得してください。| -|||Azure Maps 画像タイルのマップ スタイルを設定するプロパティを表します。このプロパティは、以下の 列挙値に設定できます。
  • Satellite - 道路またはラベルのオーバーレイなしの衛星地図スタイルを指定します。
  • Road - 道路およびラベル付きの衛星地図スタイルを指定します。
  • DarkGrey - コントラストやオーバーレイのハイライト表示に適したダーク グレーのベース マップ スタイルを指定します。
  • TerraOverlay - 標高や地形の特徴をハイライト表示する陰影起伏付きの地形マップ スタイルを指定します。
  • LabelsRoadOverlay - 航空写真オーバーレイなしで都市ラベルを表示する複数のオーバーレイの 1 つです。
  • HybridRoadOverlay - 衛星画像の背景に道路とラベルのオーバーレイを組み合わせます。
  • HybridDarkGreyOverlay - 衛星画像の背景にダーク グレーのラベル オーバーレイを組み合わせます。
  • LabelsDarkGreyOverlay - ダーク グレーのベース マップ上に都市ラベルを表示する複数のオーバーレイの 1 つです。
  • TrafficDelayOverlay - 交通遅延や渋滞エリアをリアルタイムで表示します。
  • TrafficAbsoluteOverlay - 現在の交通速度を絶対値で表示します。
  • TrafficReducedOverlay - 減少した交通流を光ベースの視覚化で表示します。
  • TrafficRelativeOverlay - 通常の状況に対する相対的な交通速度を表示します。
  • TrafficRelativeDarkOverlay - 通常時と比較した交通速度をダーク ベースマップ上に表示し、コントラストを強調します。
  • WeatherRadarOverlay - 降水のほぼリアルタイムのレーダー画像を表示します。
  • WeatherInfraredOverlay - 雲量の赤外線衛星画像を表示します。
| +||string|Azure Maps 画像サービスで必要となる API キーを設定するためのプロパティを表します。このキーは azure.microsoft.com ウェブサイトから取得してください。| +||`AzureMapsImageryStyle`|Azure Maps 画像タイルのマップ スタイルを設定するプロパティを表します。このプロパティは、以下の `AzureMapsImageryStyle` 列挙値に設定できます。
  • Satellite - 道路またはラベルのオーバーレイなしの衛星地図スタイルを指定します。
  • Road - 道路およびラベル付きの衛星地図スタイルを指定します。
  • DarkGrey - コントラストやオーバーレイのハイライト表示に適したダーク グレーのベース マップ スタイルを指定します。
  • TerraOverlay - 標高や地形の特徴をハイライト表示する陰影起伏付きの地形マップ スタイルを指定します。
  • LabelsRoadOverlay - 航空写真オーバーレイなしで都市ラベルを表示する複数のオーバーレイの 1 つです。
  • HybridRoadOverlay - 衛星画像の背景に道路とラベルのオーバーレイを組み合わせます。
  • HybridDarkGreyOverlay - 衛星画像の背景にダーク グレーのラベル オーバーレイを組み合わせます。
  • LabelsDarkGreyOverlay - ダーク グレーのベース マップ上に都市ラベルを表示する複数のオーバーレイの 1 つです。
  • TrafficDelayOverlay - 交通遅延や渋滞エリアをリアルタイムで表示します。
  • TrafficAbsoluteOverlay - 現在の交通速度を絶対値で表示します。
  • TrafficReducedOverlay - 減少した交通流を光ベースの視覚化で表示します。
  • TrafficRelativeOverlay - 通常の状況に対する相対的な交通速度を表示します。
  • TrafficRelativeDarkOverlay - 通常時と比較した交通速度をダーク ベースマップ上に表示し、コントラストを強調します。
  • WeatherRadarOverlay - 降水のほぼリアルタイムのレーダー画像を表示します。
  • WeatherInfraredOverlay - 雲量の赤外線衛星画像を表示します。
| ## API リファレンス - - - + +
+
diff --git a/docs/xplat/src/content/jp/components/geo-map-display-bing-imagery.mdx b/docs/xplat/src/content/jp/components/geo-map-display-bing-imagery.mdx index 5d743169ce..e2dd8182e6 100644 --- a/docs/xplat/src/content/jp/components/geo-map-display-bing-imagery.mdx +++ b/docs/xplat/src/content/jp/components/geo-map-display-bing-imagery.mdx @@ -22,7 +22,7 @@ import bingmapsimagery from '@xplat-images/general/BingMapsImagery.png'; [Microsoft Bing ブログ](https://blogs.bing.com/maps/2025-06/Bing-Maps-for-Enterprise-Basic-Account-shutdown-June-30,2025) - は、Microsoft® 社が提供する地理的画像マッピング サービスです。世界の地理的画像タイルを 3 以上提供します。この地理的画像サービスは、www.bing.com/maps に直接アクセスして利用できます。{ProductName} マップ コンポーネントは、 クラスを使用して、地図の背景コンテンツに Bing Maps の地理的画像を表示します。 + は、Microsoft® 社が提供する地理的画像マッピング サービスです。世界の地理的画像タイルを 3 以上提供します。この地理的画像サービスは、www.bing.com/maps に直接アクセスして利用できます。{ProductName} マップ コンポーネントは、 クラスを使用して、地図の背景コンテンツに Bing Maps の地理的画像を表示します。 ## {Platform} Bing Maps 画像の表示の例 @@ -34,7 +34,7 @@ import bingmapsimagery from '@xplat-images/general/BingMapsImagery.png';
## コード スニペット -以下のコード スニペットは、 を使用して {Platform} `GeographicMap` で Bing Maps からの地理的画像を表示する方法を示します。 +以下のコード スニペットは、 を使用して {Platform} `GeographicMap` で Bing Maps からの地理的画像を表示する方法を示します。 @@ -105,22 +105,22 @@ geoMap.backgroundContent = tileSource; ## プロパティ -以下の表で、 クラスのプロパティを説明します。 +以下の表で、 クラスのプロパティを説明します。 | プロパティ名 | プロパティ型 | 概要 | |----------------|-----------------|---------------| -||文字列|Bing Maps 画像サービスで必要となる API キーを設定するためのプロパティを表します。このキーは www.bingmapsportal.com ウェブサイトから取得してください。| -|||Bing Maps 画像タイルのマップ スタイルを設定するプロパティを表します。このプロパティは、以下の 列挙値に設定できます。Aerial - 道路またはラベルオーバーレイなしの Aerial マップ スタイルを指定します。
  • Aerial - 道路およびラベル付きの衛星地図スタイルを指定します。
  • AerialWithLabels - 道路およびラベル付きの衛星地図スタイルを指定します。
  • Road - 衛星オーバーレイなしの道路地図スタイルを指定します。
| -||文字列|TilePath と SubDomain の位置を指定する Bing Imagery REST URI を設定するためのプロパティを表します。これはオプションのプロパティです。指定されていない場合、デフォルトの REST URI を使用します。| -||文字列|タイル ソースのカルチャ名を設定するためのプロパティを表します。| -||ブール値|Bing Maps サービスが有効なプロパティ値の割り当てで自動初期化するかどうかを指定するプロパティを表します。| -||ブール値|True に設定されているプロパティは、Bing Maps サービスからの地理的画像タイルが初期化され、マップ コンポーネントでのレンダリングの準備ができたときに発生することを表します。| -||`SubDomainsCollection`|URI サブ ドメインの画像コレクションを表します。| -||文字列|マップ タイル画像 URI を設定するプロパティを表します。これは Bing Maps の実際の位置です。| +||文字列|Bing Maps 画像サービスで必要となる API キーを設定するためのプロパティを表します。このキーは www.bingmapsportal.com ウェブサイトから取得してください。| +|||Bing Maps 画像タイルのマップ スタイルを設定するプロパティを表します。このプロパティは、以下の 列挙値に設定できます。Aerial - 道路またはラベルオーバーレイなしの Aerial マップ スタイルを指定します。
  • Aerial - 道路およびラベル付きの衛星地図スタイルを指定します。
  • AerialWithLabels - 道路およびラベル付きの衛星地図スタイルを指定します。
  • Road - 衛星オーバーレイなしの道路地図スタイルを指定します。
| +||文字列|TilePath と SubDomain の位置を指定する Bing Imagery REST URI を設定するためのプロパティを表します。これはオプションのプロパティです。指定されていない場合、デフォルトの REST URI を使用します。| +||文字列|タイル ソースのカルチャ名を設定するためのプロパティを表します。| +||ブール値|Bing Maps サービスが有効なプロパティ値の割り当てで自動初期化するかどうかを指定するプロパティを表します。| +||ブール値|True に設定されているプロパティは、Bing Maps サービスからの地理的画像タイルが初期化され、マップ コンポーネントでのレンダリングの準備ができたときに発生することを表します。| +||`SubDomainsCollection`|URI サブ ドメインの画像コレクションを表します。| +||文字列|マップ タイル画像 URI を設定するプロパティを表します。これは Bing Maps の実際の位置です。| ## API リファレンス - - - +
+
+
diff --git a/docs/xplat/src/content/jp/components/geo-map-display-esri-imagery.mdx b/docs/xplat/src/content/jp/components/geo-map-display-esri-imagery.mdx index 1e3d3a0e55..f39854d3a9 100644 --- a/docs/xplat/src/content/jp/components/geo-map-display-esri-imagery.mdx +++ b/docs/xplat/src/content/jp/components/geo-map-display-esri-imagery.mdx @@ -13,7 +13,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # {Platform} Esri Maps から地理的画像を表示 - は、Esri によって作成された無料の地理的画像マッピング サービスです。世界の地理的画像タイルの 40 スタイル以上を提供します。この地理的画像サービスは、www.arcgisonline.com に直接アクセスして利用できます。 + は、Esri によって作成された無料の地理的画像マッピング サービスです。世界の地理的画像タイルの 40 スタイル以上を提供します。この地理的画像サービスは、www.arcgisonline.com に直接アクセスして利用できます。 ## {Platform} Esri Maps から地理的画像を表示の例 @@ -26,7 +26,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
## コード スニペット -以下のコード スニペットは、 クラスを使用して `GeographicMap` で Esri 画像サーバーからの {Platform} 地理的画像タイルを表示する方法を示します。 +以下のコード スニペットは、 クラスを使用して `GeographicMap` で Esri 画像サーバーからの {Platform} 地理的画像タイルを表示する方法を示します。 @@ -187,5 +187,5 @@ protected override void OnInitialized() ## API リファレンス - - +
+
diff --git a/docs/xplat/src/content/jp/components/geo-map-display-heat-imagery.mdx b/docs/xplat/src/content/jp/components/geo-map-display-heat-imagery.mdx index aab157648e..d32405ac8f 100644 --- a/docs/xplat/src/content/jp/components/geo-map-display-heat-imagery.mdx +++ b/docs/xplat/src/content/jp/components/geo-map-display-heat-imagery.mdx @@ -13,7 +13,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # {Platform} ヒート画像の表示 -{ProductName} マップ コントロールには、Shape ファイルをタイル シリーズにロードして地理空間データをロードすることにより、 によって生成される `ShapeFileRecord` を使用して、ヒートマップ画像を表示する機能があります。 +{ProductName} マップ コントロールには、Shape ファイルをタイル シリーズにロードして地理空間データをロードすることにより、 によって生成される `ShapeFileRecord` を使用して、ヒートマップ画像を表示する機能があります。 このトピックを読み進めるための前提条件として、[シェープ ファイルを地理的データにバインディング](geo-map-binding-shp-file.md)をお読みください。 @@ -26,13 +26,13 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
- がそのシェイプ ファイルを読み込むと、そのデータを オブジェクトに変換します。これらのオブジェクトは、 の `GetPointData()` メソッドから取得でき、`TileGenerator` プロパティに割り当てられた で オブジェクトを使用してヒートマップを作成するために使用できます。この は、`TileImagery` ソースとして で使用できます。 + がそのシェイプ ファイルを読み込むと、そのデータを オブジェクトに変換します。これらのオブジェクトは、 の `GetPointData()` メソッドから取得でき、`TileGenerator` プロパティに割り当てられた で オブジェクトを使用してヒートマップを作成するために使用できます。この は、`TileImagery` ソースとして で使用できます。 - オブジェクトは、`XValues`、`YValues`、`Values` の 3 つの値パスを持つように機能します。これらの使用方法の例として、人口に関する情報を持つ形状ファイルの場合、`XValues` を経度、`YValues` を緯度、`Values` を人口データとみなすことができます。これらの各プロパティは、`number[]` を取得します。 + オブジェクトは、`XValues`、`YValues`、`Values` の 3 つの値パスを持つように機能します。これらの使用方法の例として、人口に関する情報を持つ形状ファイルの場合、`XValues` を経度、`YValues` を緯度、`Values` を人口データとみなすことができます。これらの各プロパティは、`number[]` を取得します。 -ヒートマップ機能を使用する際の地理的タイルシリーズの表示は、`MinimumColor` プロパティと `MaximumColor` プロパティを の `Values` プロパティに割り当てるコレクションの最小値と最大値に対応する色を記述する「rgba」文字列に設定することでカスタマイズできます。これをさらにカスタマイズするには、ジェネレーターの `ScaleColors` プロパティを設定して、色を説明する文字列のコレクションを含めます。これにより、 に、マップに表示される値に使用する色がわかります。`BlurRadius`、`MaxBlurRadius`、`UseBlurRadiusAdjustedForZoom` プロパティを使用して、`ScaleColors` コレクション内の色が一緒にぼやける方法をカスタマイズすることもできます。 +ヒートマップ機能を使用する際の地理的タイルシリーズの表示は、`MinimumColor` プロパティと `MaximumColor` プロパティを の `Values` プロパティに割り当てるコレクションの最小値と最大値に対応する色を記述する「rgba」文字列に設定することでカスタマイズできます。これをさらにカスタマイズするには、ジェネレーターの `ScaleColors` プロパティを設定して、色を説明する文字列のコレクションを含めます。これにより、 に、マップに表示される値に使用する色がわかります。`BlurRadius`、`MaxBlurRadius`、`UseBlurRadiusAdjustedForZoom` プロパティを使用して、`ScaleColors` コレクション内の色が一緒にぼやける方法をカスタマイズすることもできます。 - は対数スケールも使用できます。これを使用する場合は、`UseLogarithmicScale` プロパティを **true** に設定できます。 + は対数スケールも使用できます。これを使用する場合は、`UseLogarithmicScale` プロパティを **true** に設定できます。 ## Web Worker @@ -408,10 +408,10 @@ public onDataLoaded(csvData: string) { ## API リファレンス - - - - - - - +
+
+
+
+
+ + diff --git a/docs/xplat/src/content/jp/components/geo-map-display-imagery-types.mdx b/docs/xplat/src/content/jp/components/geo-map-display-imagery-types.mdx index f21eb020c4..e58374d2d7 100644 --- a/docs/xplat/src/content/jp/components/geo-map-display-imagery-types.mdx +++ b/docs/xplat/src/content/jp/components/geo-map-display-imagery-types.mdx @@ -31,20 +31,20 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; | 画像クラス | 説明 | |---------------|---------------| -||サポートされている地理的画像タイルのすべてのタイプを表示するすべての画像クラスの基本コントロールを表します。このクラスは、Map Quest マッピング サービスなどの他の地理的画像ソースから地理的画像タイルのサポートを実装する目的のために拡張できます。| -||Open Street Maps サービスから地理的画像タイルを表示するためのマルチスケール画像コントロールを表します。| +||サポートされている地理的画像タイルのすべてのタイプを表示するすべての画像クラスの基本コントロールを表します。このクラスは、Map Quest マッピング サービスなどの他の地理的画像ソースから地理的画像タイルのサポートを実装する目的のために拡張できます。| +||Open Street Maps サービスから地理的画像タイルを表示するためのマルチスケール画像コントロールを表します。| -デフォルトでは、 プロパティは オブジェクトに設定され、マップコンポーネントは Open Street Maps サービスからの地理的画像タイルを表示します。さまざまな種類の地理的画像タイルを表示するには、マップ コンポーネントを再設定する必要があります。 +デフォルトでは、 プロパティは オブジェクトに設定され、マップコンポーネントは Open Street Maps サービスからの地理的画像タイルを表示します。さまざまな種類の地理的画像タイルを表示するには、マップ コンポーネントを再設定する必要があります。 -さらに、 プロパティは、このクラスを継承するオブジェクトに設定できます。ただし、 クラスを継承するオブジェクトだけが、マップ背景コンテンツのパンおよびズームができます。 +さらに、 プロパティは、このクラスを継承するオブジェクトに設定できます。ただし、 クラスを継承するオブジェクトだけが、マップ背景コンテンツのパンおよびズームができます。 マップ コンポーネントでは、マップの背景コンテンツは常にすべての地理的シリーズの背後にレンダリングされます。つまり、地理的画像タイルは常に最初にレンダリングされ、マップ コンポーネントの Series プロパティ内の地理的シリーズは地理的画像タイルの上にレンダリングされます。地理的画像タイルはマップ ビューにすばやく埋め込まれるため、これは、マップ コンポーネントの同じプロット領域に複数の地理的シリーズを表示する場合に特に重要です。 ## コード スニペット -このコード例では、マップコンポーネントの を、Open Street Maps の地理的画像タイルを提供する オブジェクトに明示的に設定しています。 +このコード例では、マップコンポーネントの を、Open Street Maps の地理的画像タイルを提供する オブジェクトに明示的に設定しています。 ```html TODO - ADD CODE SNIPPET @@ -53,6 +53,6 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; ## API リファレンス - - - +`BackgroundContent`
+
+
diff --git a/docs/xplat/src/content/jp/components/geo-map-display-osm-imagery.mdx b/docs/xplat/src/content/jp/components/geo-map-display-osm-imagery.mdx index 87853107fa..a92bf79a62 100644 --- a/docs/xplat/src/content/jp/components/geo-map-display-osm-imagery.mdx +++ b/docs/xplat/src/content/jp/components/geo-map-display-osm-imagery.mdx @@ -13,7 +13,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # {Platform} オープン ストリート マップ画像の表示 -{Platform} は、世界中の OpenStreetMap© のコントリビューターが共同で作成した無料の地理的画像マッピングサービスです。これは、構成オプションなしで、道路地図スタイル限定で世界の地理的画像を提供します。この地理的画像サービスは、www.OpenStreetMap.org に直接アクセスして利用できます。 +{Platform} は、世界中の OpenStreetMap© のコントリビューターが共同で作成した無料の地理的画像マッピングサービスです。これは、構成オプションなしで、道路地図スタイル限定で世界の地理的画像を提供します。この地理的画像サービスは、www.OpenStreetMap.org に直接アクセスして利用できます。 デフォルトでは、{ProductName} マップ コンポーネントには、Open Street Maps の地理的画像が既に表示されています。したがって、Open Street Maps から地理的画像を表示するように、コントロールを構成する必要はありません。 ## {Platform} オープン ストリート マップ画像の表示の例 @@ -27,7 +27,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
## コード スニペット -このコード例では、マップ コンポーネントの を OpenStreetMap© コントリビューターの地理画像を提供する オブジェクトに明示的に設定します。 +このコード例では、マップ コンポーネントの を OpenStreetMap© コントリビューターの地理画像を提供する オブジェクトに明示的に設定します。 @@ -116,4 +116,4 @@ this.geoMap.backgroundContent = mapImagery; ## API リファレンス - +
diff --git a/docs/xplat/src/content/jp/components/geo-map-navigation.mdx b/docs/xplat/src/content/jp/components/geo-map-navigation.mdx index 04e6169211..a36dcd6841 100644 --- a/docs/xplat/src/content/jp/components/geo-map-navigation.mdx +++ b/docs/xplat/src/content/jp/components/geo-map-navigation.mdx @@ -106,4 +106,4 @@ this.GeoMap.WindowScale = 0.5; ## API リファレンス - +
diff --git a/docs/xplat/src/content/jp/components/geo-map-resources-esri.mdx b/docs/xplat/src/content/jp/components/geo-map-resources-esri.mdx index f2fc69bab1..2df67d4f0f 100644 --- a/docs/xplat/src/content/jp/components/geo-map-resources-esri.mdx +++ b/docs/xplat/src/content/jp/components/geo-map-resources-esri.mdx @@ -12,7 +12,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # {Platform} Esri ユーティリティ -リソース トピックは、Esri Maps が `GeographicMap` で提供する の使用に役立つユーティリティの実装を提供します。 +リソース トピックは、Esri Maps が `GeographicMap` で提供する の使用に役立つユーティリティの実装を提供します。 ## コード スニペット @@ -138,5 +138,5 @@ public class EsriStyle ## API リファレンス - - +
+
diff --git a/docs/xplat/src/content/jp/components/geo-map-resources-shape-styling-utility.mdx b/docs/xplat/src/content/jp/components/geo-map-resources-shape-styling-utility.mdx index abef838558..16ade1e1f6 100644 --- a/docs/xplat/src/content/jp/components/geo-map-resources-shape-styling-utility.mdx +++ b/docs/xplat/src/content/jp/components/geo-map-resources-shape-styling-utility.mdx @@ -280,5 +280,5 @@ export class ShapeComparison { ## API リファレンス - - +
+
diff --git a/docs/xplat/src/content/jp/components/geo-map-resources-world-connections.mdx b/docs/xplat/src/content/jp/components/geo-map-resources-world-connections.mdx index ebbf701ce6..bd22c42f84 100644 --- a/docs/xplat/src/content/jp/components/geo-map-resources-world-connections.mdx +++ b/docs/xplat/src/content/jp/components/geo-map-resources-world-connections.mdx @@ -317,4 +317,4 @@ export default class WorldConnections { ## API リファレンス - +
diff --git a/docs/xplat/src/content/jp/components/geo-map-resources-world-locations.mdx b/docs/xplat/src/content/jp/components/geo-map-resources-world-locations.mdx index 568d91e523..0590737c38 100644 --- a/docs/xplat/src/content/jp/components/geo-map-resources-world-locations.mdx +++ b/docs/xplat/src/content/jp/components/geo-map-resources-world-locations.mdx @@ -1303,4 +1303,4 @@ export default class WorldLocations { ## API リファレンス - +
diff --git a/docs/xplat/src/content/jp/components/geo-map-resources-world-util.mdx b/docs/xplat/src/content/jp/components/geo-map-resources-world-util.mdx index bf96eae10a..0ca2518858 100644 --- a/docs/xplat/src/content/jp/components/geo-map-resources-world-util.mdx +++ b/docs/xplat/src/content/jp/components/geo-map-resources-world-util.mdx @@ -423,4 +423,4 @@ export default class WorldUtils { ## API リファレンス - +
diff --git a/docs/xplat/src/content/jp/components/geo-map-shape-files-reference.mdx b/docs/xplat/src/content/jp/components/geo-map-shape-files-reference.mdx index ec18be7cdb..eb703ac48e 100644 --- a/docs/xplat/src/content/jp/components/geo-map-shape-files-reference.mdx +++ b/docs/xplat/src/content/jp/components/geo-map-shape-files-reference.mdx @@ -87,7 +87,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; ## API リファレンス - - - - +
+
+
+
diff --git a/docs/xplat/src/content/jp/components/geo-map-shape-styling.mdx b/docs/xplat/src/content/jp/components/geo-map-shape-styling.mdx index d88ce4f526..3db91977b8 100644 --- a/docs/xplat/src/content/jp/components/geo-map-shape-styling.mdx +++ b/docs/xplat/src/content/jp/components/geo-map-shape-styling.mdx @@ -472,5 +472,5 @@ public onStylingShape(s: IgcGeographicShapeSeriesComponent, args: IgcStyleShapeE ## API リファレンス - - +
+
diff --git a/docs/xplat/src/content/jp/components/geo-map-type-scatter-area-series.mdx b/docs/xplat/src/content/jp/components/geo-map-type-scatter-area-series.mdx index 0a03e1e3d6..ffd2f06acb 100644 --- a/docs/xplat/src/content/jp/components/geo-map-type-scatter-area-series.mdx +++ b/docs/xplat/src/content/jp/components/geo-map-type-scatter-area-series.mdx @@ -47,7 +47,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; ## カラー スケール の ColorScale プロパティを使用して、ポイントの色の値を解決し、地理的シリーズの面を塗りつぶします。色は、ピクセル単位の三角ラスタライザーを三角測量データに適用することによって、サーフェスの図形の周りをなめらかに補間します。サーフェスの描画がピクセル単位であるため、カラー スケールはブラシではなく色を使用します。 -提供される クラスはほとんどのカラーリングのニーズを満たすはずですが、ColorScale ベースのクラスはカスタムのカラリング ロジックのアプリケーションによって継承できます。 +提供される クラスはほとんどのカラーリングのニーズを満たすはずですが、ColorScale ベースのクラスはカスタムのカラリング ロジックのアプリケーションによって継承できます。 以下の表は GeographicScatterAreaSeries の面のカラリングに影響する `CustomPaletteColorScale` プロパティをリストします。 @@ -383,7 +383,7 @@ createAreaSeries(data: any[]) { ## API リファレンス - - - - +
+
+
+
diff --git a/docs/xplat/src/content/jp/components/geo-map-type-scatter-bubble-series.mdx b/docs/xplat/src/content/jp/components/geo-map-type-scatter-bubble-series.mdx index 91b24633f7..a13078ee0c 100644 --- a/docs/xplat/src/content/jp/components/geo-map-type-scatter-bubble-series.mdx +++ b/docs/xplat/src/content/jp/components/geo-map-type-scatter-bubble-series.mdx @@ -342,5 +342,5 @@ addSeriesWith(locations: any[]) ## API リファレンス - - +
+`RadiusScale`
diff --git a/docs/xplat/src/content/jp/components/geo-map-type-scatter-contour-series.mdx b/docs/xplat/src/content/jp/components/geo-map-type-scatter-contour-series.mdx index d3725b73f7..a9165e9bc7 100644 --- a/docs/xplat/src/content/jp/components/geo-map-type-scatter-contour-series.mdx +++ b/docs/xplat/src/content/jp/components/geo-map-type-scatter-contour-series.mdx @@ -378,7 +378,7 @@ createContourSeries(data: any[]) ## API リファレンス - - - - +`FillScale`
+
+
+
diff --git a/docs/xplat/src/content/jp/components/geo-map-type-scatter-density-series.mdx b/docs/xplat/src/content/jp/components/geo-map-type-scatter-density-series.mdx index 8850a225ba..1e4189bd82 100644 --- a/docs/xplat/src/content/jp/components/geo-map-type-scatter-density-series.mdx +++ b/docs/xplat/src/content/jp/components/geo-map-type-scatter-density-series.mdx @@ -331,4 +331,4 @@ onDataLoaded(csvData: string) { ## API リファレンス - +
diff --git a/docs/xplat/src/content/jp/components/geo-map-type-scatter-symbol-series.mdx b/docs/xplat/src/content/jp/components/geo-map-type-scatter-symbol-series.mdx index 6a175c8bf6..69e07885c9 100644 --- a/docs/xplat/src/content/jp/components/geo-map-type-scatter-symbol-series.mdx +++ b/docs/xplat/src/content/jp/components/geo-map-type-scatter-symbol-series.mdx @@ -29,7 +29,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; マップコンポーネントの他の種類の地理的シリーズと同様に、 には、オブジェクトの配列にバインドできる `ItemsSource` プロパティがあります。さらに、このオブジェクトの各データ項目は、地理的位置 (経度と緯度) を保存する 2 つの数値データ列を持つ必要があります。これらのデータ列は、`LatitudeMemberPath` および `LongitudeMemberPath` プロパティにマップされます。 は、これらのマップされたデータ列の値を使用して、地理マップコンポーネントにシンボル要素をプロットします。 ## コード スニペット -以下のコードは、 を使用してシェイプ ファイルからロードした都市の場所に をバインドする方法を示します。 +以下のコードは、 を使用してシェイプ ファイルからロードした都市の場所に をバインドする方法を示します。 @@ -251,5 +251,5 @@ addSeriesWith(locations: any[], brush: string) ## API リファレンス - - +
+
diff --git a/docs/xplat/src/content/jp/components/geo-map-type-series.mdx b/docs/xplat/src/content/jp/components/geo-map-type-series.mdx index 1af4d7c022..5936eeb63c 100644 --- a/docs/xplat/src/content/jp/components/geo-map-type-series.mdx +++ b/docs/xplat/src/content/jp/components/geo-map-type-series.mdx @@ -33,4 +33,4 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; ## API リファレンス - +
diff --git a/docs/xplat/src/content/jp/components/geo-map-type-shape-polygon-series.mdx b/docs/xplat/src/content/jp/components/geo-map-type-shape-polygon-series.mdx index ca9f531489..2fe857b5ad 100644 --- a/docs/xplat/src/content/jp/components/geo-map-type-shape-polygon-series.mdx +++ b/docs/xplat/src/content/jp/components/geo-map-type-shape-polygon-series.mdx @@ -31,7 +31,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; マップコントロールの他の種類の地理的シリーズと同様に、 には、オブジェクトの配列にバインドできる `ItemsSource` プロパティがあります。さらに、このオブジェクトの各データ項目には、地理的位置を表す x 値と y 値を持つオブジェクトの配列の配列を使用して単一または複数の形状を格納する 1 つのデータ列が必要です。このデータ列は、`ShapeMemberPath` プロパティにマップされます。 は、マップされたデータ列の点を使用してマップコントロールにポリゴンをプロットします。 ## コード スニペット -以下のコードは、 を使用してシェイプ ファイルからロードした世界の国々の図形に をバインドする方法を示します。 +以下のコードは、 を使用してシェイプ ファイルからロードした世界の国々の図形に をバインドする方法を示します。 @@ -354,6 +354,6 @@ createSeries(shapeData: any[], shapeBrush: string, shapeTitle: string) ## API リファレンス - - - +
+
+
diff --git a/docs/xplat/src/content/jp/components/geo-map-type-shape-polyline-series.mdx b/docs/xplat/src/content/jp/components/geo-map-type-shape-polyline-series.mdx index f2d85ebc56..8241386ac5 100644 --- a/docs/xplat/src/content/jp/components/geo-map-type-shape-polyline-series.mdx +++ b/docs/xplat/src/content/jp/components/geo-map-type-shape-polyline-series.mdx @@ -31,7 +31,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; コントロール内の他の種類の地理的シリーズと同様に、 には、オブジェクトの配列にバインドできる `ItemsSource` プロパティがあります。さらに、このオブジェクトの各データ項目には、地理的位置を表す x 値と y 値を持つオブジェクトの配列の配列を使用して単一または複数の形状を格納する 1 つのデータ列が必要です。このデータ列は、ShapeMemberPath プロパティにマップされます。 は、コントロールで多角形をプロットするために、このマップされたデータ列のポイントを使用します。 ## コード スニペット -以下のコードは、 を使用してシェイプ ファイルからロードした都市の場所に をバインドする方法を示します。 +以下のコードは、 を使用してシェイプ ファイルからロードした都市の場所に をバインドする方法を示します。 @@ -343,6 +343,6 @@ public addSeriesWith(shapeData: any[], shapeBrush: string) { ## API リファレンス - - - +
+
+
diff --git a/docs/xplat/src/content/jp/components/geo-map.mdx b/docs/xplat/src/content/jp/components/geo-map.mdx index dfbc88980e..405ac9f1e4 100644 --- a/docs/xplat/src/content/jp/components/geo-map.mdx +++ b/docs/xplat/src/content/jp/components/geo-map.mdx @@ -220,11 +220,11 @@ ModuleManager.register( ## API リファレンス - - - - - - - - +
+
+
+
+
+
+
+
diff --git a/docs/xplat/src/content/jp/components/grid-lite/binding.mdx b/docs/xplat/src/content/jp/components/grid-lite/binding.mdx index f317f27cd9..954ac629b9 100644 --- a/docs/xplat/src/content/jp/components/grid-lite/binding.mdx +++ b/docs/xplat/src/content/jp/components/grid-lite/binding.mdx @@ -159,7 +159,7 @@ grid.data = []; -{/* TODO +{/* TODO
*/} ## その他のリソース diff --git a/docs/xplat/src/content/jp/components/grid-lite/cell-template.mdx b/docs/xplat/src/content/jp/components/grid-lite/cell-template.mdx index 73cebecefa..ca185cb99e 100644 --- a/docs/xplat/src/content/jp/components/grid-lite/cell-template.mdx +++ b/docs/xplat/src/content/jp/components/grid-lite/cell-template.mdx @@ -202,7 +202,7 @@ export interface GridLiteCellContext< -{/* TODO +{/* TODO
*/} ## その他のリソース diff --git a/docs/xplat/src/content/jp/components/grid-lite/column-configuration.mdx b/docs/xplat/src/content/jp/components/grid-lite/column-configuration.mdx index 202abbcf0e..a3161a616b 100644 --- a/docs/xplat/src/content/jp/components/grid-lite/column-configuration.mdx +++ b/docs/xplat/src/content/jp/components/grid-lite/column-configuration.mdx @@ -312,7 +312,7 @@ return ( -{/* TODO +{/* TODO
*/} ## その他のリソース diff --git a/docs/xplat/src/content/jp/components/grid-lite/filtering.mdx b/docs/xplat/src/content/jp/components/grid-lite/filtering.mdx index ca1dba95b6..0e18a14071 100644 --- a/docs/xplat/src/content/jp/components/grid-lite/filtering.mdx +++ b/docs/xplat/src/content/jp/components/grid-lite/filtering.mdx @@ -572,7 +572,7 @@ grid.DataPipelineConfiguration = new DataPipelineConfiguration `DataPipelineConfiguration` プロパティを使用すると、フィルター操作が実行されるたびに呼び出されるカスタム フックを提供できます。コールバックには `DataPipelineParams` オブジェクトが渡されます。 -{/* TODO +{/* TODO
*/} ## その他のリソース diff --git a/docs/xplat/src/content/jp/components/grid-lite/header-template.mdx b/docs/xplat/src/content/jp/components/grid-lite/header-template.mdx index 7ba5920bd0..da50761ced 100644 --- a/docs/xplat/src/content/jp/components/grid-lite/header-template.mdx +++ b/docs/xplat/src/content/jp/components/grid-lite/header-template.mdx @@ -93,7 +93,7 @@ column.headerTemplate = () => html`

⭐ Rating ⭐

`; -{/* TODO +{/* TODO
*/} ## その他のリソース diff --git a/docs/xplat/src/content/jp/components/grid-lite/sorting.mdx b/docs/xplat/src/content/jp/components/grid-lite/sorting.mdx index 86a992fcee..288f55819a 100644 --- a/docs/xplat/src/content/jp/components/grid-lite/sorting.mdx +++ b/docs/xplat/src/content/jp/components/grid-lite/sorting.mdx @@ -630,7 +630,7 @@ grid.DataPipelineConfiguration = new DataPipelineParams `DataPipelineConfiguration` プロパティを使用すると、ソート操作が実行されるたびに呼び出されるカスタム フックを提供できます。コールバックには `DataPipelineParams` オブジェクトが渡されます。 -{/* TODO +{/* TODO
*/} ## その他のリソース diff --git a/docs/xplat/src/content/jp/components/grid-lite/theming.mdx b/docs/xplat/src/content/jp/components/grid-lite/theming.mdx index 8588af9146..e1ebbe8af1 100644 --- a/docs/xplat/src/content/jp/components/grid-lite/theming.mdx +++ b/docs/xplat/src/content/jp/components/grid-lite/theming.mdx @@ -68,7 +68,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; -{/* TODO +{/* TODO
*/} ## その他のリソース diff --git a/docs/xplat/src/content/jp/components/grids/_shared/advanced-filtering.mdx b/docs/xplat/src/content/jp/components/grids/_shared/advanced-filtering.mdx index 40391e0fe5..4a08d7245c 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/advanced-filtering.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/advanced-filtering.mdx @@ -600,8 +600,8 @@ $custom-drop-down: drop-down-theme( ## API リファレンス - - +
+
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/grids/_shared/batch-editing.mdx b/docs/xplat/src/content/jp/components/grids/_shared/batch-editing.mdx index 91c491c00b..f348b3544b 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/batch-editing.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/batch-editing.mdx @@ -26,7 +26,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - と を使用した場合も各アイランドに個別のトランザクション ログを累積させるには、代わりにサービス ファクトリが必要です。エクスポートされると `HierarchicalTransactionServiceFactory` として利用できます。 +`HierarchicalTransactionService` と を使用した場合も各アイランドに個別のトランザクション ログを累積させるには、代わりにサービス ファクトリが必要です。エクスポートされると `HierarchicalTransactionServiceFactory` として利用できます。 @@ -60,7 +60,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; ``` -これにより、`Transaction` サービスの適切なインスタンスが に提供されます。適切な は `TransactionFactory` を通じて提供されます。 +これにより、`Transaction` サービスの適切なインスタンスが に提供されます。適切な `TransactionService` は `TransactionFactory` を通じて提供されます。 @@ -284,7 +284,7 @@ private OnRedoClick() { -以下のコード例は、 API (undo、redo、commit) の使用方法を示します。 +以下のコード例は、`TransactionService` API (undo、redo、commit) の使用方法を示します。 @@ -344,7 +344,7 @@ export class GridBatchEditingSampleComponent { -以下のコード例は、 API (undo、redo、commit) の使用方法を示します。 +以下のコード例は、`HierarchicalTransactionService` API (undo、redo、commit) の使用方法を示します。 ```html -以下のコード例は、 API (undo、redo、commit) の使用方法を示します。 +以下のコード例は、`TransactionService` API (undo、redo、commit) の使用方法を示します。 ```html -## 一括編集のリモート ページング デモ - - - - - - ## API リファレンス - -- `Transactions` -- `TransactionService` - -- `HierarchicalTransactionService` -- `RowEditable` - - - - - -- `HierarchicalTransactionServiceFactory` - - +
+`Transactions`
Our community is active and always welcoming to new ideas. diff --git a/docs/xplat/src/content/jp/components/grids/_shared/cascading-combos.mdx b/docs/xplat/src/content/jp/components/grids/_shared/cascading-combos.mdx index 5f53a441cb..bcab09f384 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/cascading-combos.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/cascading-combos.mdx @@ -319,9 +319,9 @@ public webGridCountryDropDownTemplate: IgcRenderFunction | コンボ ドロップダウン リストは他の UI 要素の後ろに隠れる場合があります。 | グリッド内の要素の積み重ね順序により、コンボ ドロップダウンがヘッダーやフッターなどの他の要素の後ろに隠れる場合があります。 | -## {Platform} {ComponentTitle} API メンバー +## API リファレンス - - - - +
+
+
+
diff --git a/docs/xplat/src/content/jp/components/grids/_shared/cell-editing.mdx b/docs/xplat/src/content/jp/components/grids/_shared/cell-editing.mdx index 1458a366bb..ab7d0a69ff 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/cell-editing.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/cell-editing.mdx @@ -1459,11 +1459,12 @@ In addition to the steps above, we can also style the controls that are used for -## スタイル ライブラリのインポート +## API リファレンス + +
+
+
- - - ## パレットの定義 diff --git a/docs/xplat/src/content/jp/components/grids/_shared/cell-merging.mdx b/docs/xplat/src/content/jp/components/grids/_shared/cell-merging.mdx index 3c992919cf..83e086f127 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/cell-merging.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/cell-merging.mdx @@ -44,7 +44,7 @@ Ignite UI for {Platform} {ComponentTitle} には、同じ値を持つ隣接セ ### グリッド結合モード -グリッドは、 列挙型の値を受け入れる `cellMergeMode` プロパティを公開します。 +グリッドは、 列挙型の値を受け入れる `cellMergeMode` プロパティを公開します。 - `always` - ソート状態に関係なく、結合条件を満たすすべての隣接セルを結合。 - `onSort` - 列がソートされているときのみ隣接セルを結合 **(デフォルト値)**。 @@ -158,7 +158,7 @@ const cellMergeMode: GridCellMergeMode = 'onSort'; `always` と `onSort` の組み込みモードに加えて、`mergeStrategy` プロパティを使用して独自の結合条件を定義することができます。このストラテジでは、セルの比較方法と結合範囲の計算方法の両方を制御します。 ### 結合ストラテジ クラス -カスタム結合ストラテジは クラスを実装する必要があります: +カスタム結合ストラテジは クラスを実装する必要があります: ```ts @@ -197,7 +197,7 @@ export declare class IgcGridMergeStrategy { ### Extending the Default Strategy -If you only want to customize part of the behavior (for example, the comparer logic), you can extend the built-in and override the relevant methods. +If you only want to customize part of the behavior (for example, the comparer logic), you can extend the built-in and override the relevant methods. ```ts @@ -327,9 +327,9 @@ If a merged cell is clicked, the closest cell from the merge sequence will becom 定義したカスタム ストラテジは、`mergeStrategy` プロパティを通じてグリッドに割り当てます。 -## デモ +## API リファレンス - +
## 機能の統合 diff --git a/docs/xplat/src/content/jp/components/grids/_shared/cell-selection.mdx b/docs/xplat/src/content/jp/components/grids/_shared/cell-selection.mdx index b01bd33e85..484d27f0d8 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/cell-selection.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/cell-selection.mdx @@ -461,7 +461,7 @@ $custom-grid-theme: grid-theme( ## API リファレンス - +
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/grids/_shared/clipboard-interactions.mdx b/docs/xplat/src/content/jp/components/grids/_shared/clipboard-interactions.mdx index 5ede1a92ac..7a1196fe31 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/clipboard-interactions.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/clipboard-interactions.mdx @@ -42,7 +42,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; ## 制限 -- カットとコピーの両方のイベントは、Internet Explorer では本来サポートされていません。**paste** イベント (IE 11) は発生されますが、イベントの プロパティを公開しません。 +- カットとコピーの両方のイベントは、Internet Explorer では本来サポートされていません。**paste** イベント (IE 11) は発生されますが、イベントの プロパティを公開しません。 IE 11のセルを**コピー**するためには、キーボード選択を使用できます。複数セルを選択するには SHIFT キー を押しながらコピーするには CTRL + C を押します。 @@ -59,7 +59,7 @@ You can use a custom paste handler in order to configure **paste** behavior, hav ## API の使用 -次のオプションを処理する プロパティを公開します。 +次のオプションを処理する プロパティを公開します。 - `Enabled` は選択したセルのコピーを有効または無効にします。 - `CopyHeaders` は、コピー時に関連付けられているヘッダーを含めます。 - `CopyFormatters` は、既存の列フォーマッタをコピーしたデータに適用します。 @@ -72,10 +72,10 @@ Excel は、タブで区切られたテキスト (タブ区切り `/t`) を自 - `GridCopy` は、コピー操作が実行されたときに発生します。`ClipboardOptions` を使用してコピー動作が有効になっている場合のみ発生します。 -## その他のリソース +## API リファレンス - - +
+
## Additional Resources diff --git a/docs/xplat/src/content/jp/components/grids/_shared/collapsible-column-groups.mdx b/docs/xplat/src/content/jp/components/grids/_shared/collapsible-column-groups.mdx index 0cfdfe3dab..5555bdf4c6 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/collapsible-column-groups.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/collapsible-column-groups.mdx @@ -303,9 +303,9 @@ const collapsibleIndicatorTemplate = (ctx: IgrColumnTemplateContext) => { ## API リファレンス - - - +
+
+
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/grids/_shared/column-hiding.mdx b/docs/xplat/src/content/jp/components/grids/_shared/column-hiding.mdx index 6b74125b49..7888be81d9 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/column-hiding.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/column-hiding.mdx @@ -1193,12 +1193,12 @@ $custom-button: button-theme( ## API リファレンス - - - - - - +
+
+
+
+
+
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/grids/_shared/column-moving.mdx b/docs/xplat/src/content/jp/components/grids/_shared/column-moving.mdx index 144dd0a277..02087dad6b 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/column-moving.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/column-moving.mdx @@ -149,7 +149,7 @@ const headerTemplate = (ctx: IgrCellTemplateContext) => { ドラッグアンドドロップ機能に加えて、列の移動機能には、プログラムで列を移動/並べ替えできる API メソッドも用意されています。 - - Moves a column before or after another column (a target). The first parameter is the column to be moved, and the second parameter is the target column. Also accepts an optional third parameter `Position` (representing a value), which determines whether to place the column before or after the target column. + - Moves a column before or after another column (a target). The first parameter is the column to be moved, and the second parameter is the target column. Also accepts an optional third parameter `Position` (representing a value), which determines whether to place the column before or after the target column. ```typescript @@ -436,8 +436,8 @@ $dark-grid-column-moving-theme: grid-theme( ## API リファレンス - - +
+
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/grids/_shared/column-pinning.mdx b/docs/xplat/src/content/jp/components/grids/_shared/column-pinning.mdx index b3b4ba947d..77aecb307e 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/column-pinning.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/column-pinning.mdx @@ -966,10 +966,10 @@ Then set the related CSS properties to this class: -## グローバル テーマのインポート +## API リファレンス - - +
+
## カスタム テーマの定義 diff --git a/docs/xplat/src/content/jp/components/grids/_shared/column-resizing.mdx b/docs/xplat/src/content/jp/components/grids/_shared/column-resizing.mdx index 9fe35d8f1b..d58a641254 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/column-resizing.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/column-resizing.mdx @@ -889,8 +889,8 @@ $custom-grid-theme: grid-theme( ## API リファレンス - - +
+
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/grids/_shared/column-selection.mdx b/docs/xplat/src/content/jp/components/grids/_shared/column-selection.mdx index 1fdaf8b055..abe116f325 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/column-selection.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/column-selection.mdx @@ -41,7 +41,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; ## 基本的な使用方法 -列選択機能は、 値を受け取る `ColumnSelection` 入力によって有効にすることができます。 +列選択機能は、 値を受け取る `ColumnSelection` 入力によって有効にすることができます。 ## インタラクション @@ -206,8 +206,8 @@ Internet Explorer 11 のコンポーネントをスタイル設定するには ## API リファレンス - - +
+
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/grids/_shared/column-types.mdx b/docs/xplat/src/content/jp/components/grids/_shared/column-types.mdx index 150c8dc2cd..2606a325f3 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/column-types.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/column-types.mdx @@ -243,9 +243,9 @@ const timeFormats = [ #### セルの編集 列タイプに基づくセル編集に関しては、別のエディターが表示されます。 -- `DateTime` - が使用されます。このエディターは、`DateTime` オブジェクトの入力要素部分のマスクを提供します。 +- `DateTime` - が使用されます。このエディターは、`DateTime` オブジェクトの入力要素部分のマスクを提供します。 - `Date` - が使用されます。 -- `Time` - が使用されます。 +- `Time` - が使用されます。 #### フィルタリング @@ -692,8 +692,8 @@ public init(column: IgxColumnComponent) { ## API リファレンス - - +
+
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/grids/_shared/conditional-cell-styling.mdx b/docs/xplat/src/content/jp/components/grids/_shared/conditional-cell-styling.mdx index 51b6e9c8bd..44bd2b8dfc 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/conditional-cell-styling.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/conditional-cell-styling.mdx @@ -1232,8 +1232,8 @@ const editDone = (event: IgrGridEditEventArgs) => { ## API リファレンス - - +
+
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/grids/_shared/editing.mdx b/docs/xplat/src/content/jp/components/grids/_shared/editing.mdx index b19e248948..6acec377f6 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/editing.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/editing.mdx @@ -55,11 +55,11 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - `string` データ型の場合、デフォルトのテンプレートは を使用します。 - `number` データ型のデフォルト テンプレートは type="number" を使用します。数値に解析できない値にセルを更新した場合、変更は無視されてセルの値が 0 に設定されます。 - `date` データ型ではデフォルトのテンプレートは を使用します。 -- `dateTime` データ型ではデフォルトのテンプレートは を使用します。このエディターは、DateTime オブジェクトの入力要素部分のマスクを提供します。 -- `time` データ型ではデフォルトのテンプレートは を使用します。 +- `dateTime` データ型ではデフォルトのテンプレートは を使用します。このエディターは、DateTime オブジェクトの入力要素部分のマスクを提供します。 +- `time` データ型ではデフォルトのテンプレートは を使用します。 - `boolean` データ型ではデフォルトのテンプレートは を使用します。 -- `currency` データ型の場合、デフォルトのテンプレートは、アプリケーションまたはグリッドのロケール設定に基づいたプレフィックス/サフィックス構成の を使用します。 -- `percent` パーセントデータ型の場合、デフォルトのテンプレートは、編集された値のプレビューをパーセントで表示するサフィックス要素を持つ を使用します。 +- `currency` データ型の場合、デフォルトのテンプレートは、アプリケーションまたはグリッドのロケール設定に基づいたプレフィックス/サフィックス構成の を使用します。 +- `percent` パーセントデータ型の場合、デフォルトのテンプレートは、編集された値のプレビューをパーセントで表示するサフィックス要素を持つ を使用します。 - カスタム テンプレートについては、[セル編集トピック](cell-editing.md#セル編集テンプレート)を参照してください。 @@ -78,14 +78,14 @@ All available column data types could be found in the official [Column types top | イベント | 説明 | 引数 | キャンセル可能 | | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------- | ----------- | - | `RowEditEnter` | `RowEditing` が有効な場合、行が編集モードに入るときに発生します。 | | **true** | - | `CellEditEnter` |セルが**編集モードに入る**ときに発生します。 (`RowEditEnter` の後) | | **true** | - | `CellEdit` | 値が変更された場合、セルの値が**コミットされた前に**発生します。 (ENTER の押下など) | | **true** | - | `CellEditDone` | 値が変更された場合、セルが編集され、セルの値が**コミットされた後に**発生します。 | | **false** | - | `CellEditExit` | セルが**編集モードを終了した**ときに発生します。| | **false** | - | `RowEdit` | が有効な場合、編集モードの値の行が**コミットされた前に**発生します (行編集オーバーレイの [完了] ボタンをクリックなど)。 | | **true** | - | `RowEditDone` | が有効な場合、行が編集され、新しい行の値が**コミットされた後に**発生します。 | | **false** | - | `RowEditExit` | が有効な場合、行が**編集モードを終了した**ときに発生します。 | | **false** | + | `RowEditEnter` | `RowEditing` が有効な場合、行が編集モードに入るときに発生します。 | | **true** | + | `CellEditEnter` |セルが**編集モードに入る**ときに発生します。 (`RowEditEnter` の後) | | **true** | + | `CellEdit` | 値が変更された場合、セルの値が**コミットされた前に**発生します。 (ENTER の押下など) | | **true** | + | `CellEditDone` | 値が変更された場合、セルが編集され、セルの値が**コミットされた後に**発生します。 | | **false** | + | `CellEditExit` | セルが**編集モードを終了した**ときに発生します。| | **false** | + | `RowEdit` | が有効な場合、編集モードの値の行が**コミットされた前に**発生します (行編集オーバーレイの [完了] ボタンをクリックなど)。 | | **true** | + | `RowEditDone` | が有効な場合、行が編集され、新しい行の値が**コミットされた後に**発生します。 | | **false** | + | `RowEditExit` | が有効な場合、行が**編集モードを終了した**ときに発生します。 | | **false** | ### イベントのキャンセル @@ -176,8 +176,8 @@ function onSorting(args: IgrSortingEventArgs) { ## API リファレンス - - +
+
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/grids/_shared/excel-style-filtering.mdx b/docs/xplat/src/content/jp/components/grids/_shared/excel-style-filtering.mdx index aa3ff9e1d3..99e3eba2be 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/excel-style-filtering.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/excel-style-filtering.mdx @@ -943,17 +943,10 @@ Then set the related CSS properties to this class: -## デモ - - - - ## API リファレンス - -- `Column` -- `{ComponentName}` - +
+
Our community is active and always welcoming to new ideas. diff --git a/docs/xplat/src/content/jp/components/grids/_shared/export-excel.mdx b/docs/xplat/src/content/jp/components/grids/_shared/export-excel.mdx index 1fefeccf38..c993fa1a50 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/export-excel.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/export-excel.mdx @@ -270,29 +270,7 @@ this.excelExportService.export(this.{ComponentTitle}, new ExcelExporterOptions(' ## API リファレンス - -- `ExcelExporterService` -- `ExcelExporterOptions` -- `PdfExporterService` -- `PdfExporterOptions` - - - -- `{ComponentName}` - - - -|Limitation|Description| -|--- |--- | -|Hierarchy levels|The excel exporter service can create up to 8 levels of hierarchy.| -|Max worksheet size|The maximum worksheet size supported by Excel is 1,048,576 rows by 16,384 columns.| -|Exporting pinned columns|In the exported Excel file, the pinned columns will not be frozen but will be displayed in the same order as they appear in the grid.| -|Wide PDF layouts|Very wide grids can force PDF columns to shrink to fit the page. Apply column widths or hide low-priority fields before exporting to keep the document legible.| - - -## その他のリソース - - +
## Additional Resources diff --git a/docs/xplat/src/content/jp/components/grids/_shared/filtering.mdx b/docs/xplat/src/content/jp/components/grids/_shared/filtering.mdx index c9a585d234..7d1eb009e0 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/filtering.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/filtering.mdx @@ -298,7 +298,7 @@ this.grid.clearFilter(); ## 初期のフィルター状態 - の初期フィルタリング状態の設定は、 プロパティを の配列に設定して各列をフィルターします。 + の初期フィルタリング状態の設定は、 プロパティを の配列に設定して各列をフィルターします。 ```typescript @@ -891,14 +891,14 @@ $custom-grid: grid-theme( ### Breaking Changes in 6.1.0 -- `filteringExpressions` property is removed. Use instead. -- `filter_multiple` method is removed. Use `Filter` method and property instead. +- `filteringExpressions` property is removed. Use instead. +- `filter_multiple` method is removed. Use `Filter` method and property instead. - The `Filter` method has new signature. It now accepts the following parameters: - `Name` - the name of the column to be filtered. - `Value` - the value to be used for filtering. - - `ConditionOrExpressionTree` (optional) - this parameter accepts object of type `FilteringOperation` or . If only simple filtering is needed, a filtering operation could be passed as an argument. In case of advanced filtering, an expressions tree containing complex filtering logic could be passed as an argument. + - `ConditionOrExpressionTree` (optional) - this parameter accepts object of type `FilteringOperation` or . If only simple filtering is needed, a filtering operation could be passed as an argument. In case of advanced filtering, an expressions tree containing complex filtering logic could be passed as an argument. - `IgnoreCase` (optional) - whether the filtering is case sensitive or not. -- `FilteringDone` event now have only one parameter of type which contains the filtering state of the filtered column. +- `FilteringDone` event now have only one parameter of type which contains the filtering state of the filtered column. - filtering operands: `FilteringExpression` condition property is no longer a direct reference to a filtering condition method, instead it's a reference to an `FilteringOperation`. - `ColumnComponent` now exposes a `Filters` property, which takes an `FilteringOperand` class reference. - Custom filters can be provided to the {ComponentTitle} columns by populating the `Operations` property of the `FilteringOperand` with operations of `FilteringOperation` type. @@ -908,8 +908,8 @@ $custom-grid: grid-theme( ## デモ - - +
+
## 既知の問題と制限 diff --git a/docs/xplat/src/content/jp/components/grids/_shared/keyboard-navigation.mdx b/docs/xplat/src/content/jp/components/grids/_shared/keyboard-navigation.mdx index bb55b4b0e6..fccf19ca6b 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/keyboard-navigation.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/keyboard-navigation.mdx @@ -169,15 +169,15 @@ Practice all of the above mentioned actions in the demo sample below. Focus any | API | 説明 | 引数 | |---------|-------------|-----------| -| `GridKeydown` | 上記のキー押下やキー押下の組み合わせのいずれかが実行されたときに発生されるイベント。キャンセルできます。その他のキーの押下/組み合わせには、デフォルトの `onkeydown` イベントを使用します。 | | -| `ActiveNodeChange` | アクティブ ノードが変更されたときに発生するイベント。これを使用して、アクティブ フォーカス位置 (ヘッダー、tbody など)、列インデックス、行インデックス、またはネストされたレベルを決定できます。| | +| `GridKeydown` | 上記のキー押下やキー押下の組み合わせのいずれかが実行されたときに発生されるイベント。キャンセルできます。その他のキーの押下/組み合わせには、デフォルトの `onkeydown` イベントを使用します。 | | +| `ActiveNodeChange` | アクティブ ノードが変更されたときに発生するイベント。これを使用して、アクティブ フォーカス位置 (ヘッダー、tbody など)、列インデックス、行インデックス、またはネストされたレベルを決定できます。| | | API | 説明 | 引数 | |---------|-------------|-----------| -| `GridKeydown` | 上記のキー押下やキー押下の組み合わせのいずれかが実行されたときに発生されるイベント。キャンセルできます。その他のキーの押下/組み合わせには、デフォルトの `onkeydown` イベントを使用します。 | | -| `ActiveNodeChange` | アクティブ ノードが変更されたときに発行されるイベント。これを使用して、アクティブ フォーカス位置 (ヘッダー、tbody など)、列インデックス、行インデックス、またはネストされたレベルを決定できます。 | | +| `GridKeydown` | 上記のキー押下やキー押下の組み合わせのいずれかが実行されたときに発生されるイベント。キャンセルできます。その他のキーの押下/組み合わせには、デフォルトの `onkeydown` イベントを使用します。 | | +| `ActiveNodeChange` | アクティブ ノードが変更されたときに発行されるイベント。これを使用して、アクティブ フォーカス位置 (ヘッダー、tbody など)、列インデックス、行インデックス、またはネストされたレベルを決定できます。 | | | `NavigateTo` | 提供された `Rowindex` と `VisibleColumnIndex` に基づいてグリッド内の位置に移動します。```{ targetType: GridKeydownTargetType, target: Object }``` タイプのパラメーターを受け入れるコールバック関数を通してターゲット要素上でカスタム ロジックを実行することもできます。使用方法:
```grid.navigateTo(10, 3, (args) => { args.target.nativeElement.focus(); });``` | ```RowIndex: number, VisibleColumnIndex: number, callback: ({ targetType: GridKeydownTargetType, target: Object }```) => {} | | `GetNextCell`| `RowIndex` と `VisibleColumnIndex` で次のセルを定義する `ICellPosition` オブジェクトを返します。コールバック関数は、`GetNextCell` メソッドの 3 番目のパラメーターとして渡すことができます。コールバック関数は、パラメーターとして `Column` を受け取り、指定された条件が満たされた場合に `boolean` 値を返します:
```const nextEditableCell = grid.getNextCell(0, 4, (col) => col.editable);``` | ```currentRowIndex: number, currentVisibleColumnIndex: number, callback: (Column) => boolean``` | | `GetPreviousCell` | `RowIndex` と `VisibleColumnIndex` で前のセルを定義する `ICellPosition` オブジェクトを返します。コールバック関数は、`GetPreviousCell` メソッドの 3 番目のパラメーターとして渡すことができます。コールバック関数は、パラメーターとして `Column` を受け取り、指定された条件が満たされた場合に `boolean` 値を返します:
```const prevEditableCell = grid.getPreviousCell(0, 4, (col) => col.editable);``` | ``` CurrentRowIndex: number, CurrentVisibleColumnIndex: number, callback: (Column) => boolean ``` | @@ -365,7 +365,7 @@ igRegisterScript("WebGridCustomKBNav", (evtArgs) => { ## API リファレンス - +
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/grids/_shared/live-data.mdx b/docs/xplat/src/content/jp/components/grids/_shared/live-data.mdx index 542195cdf1..459152dfee 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/live-data.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/live-data.mdx @@ -226,7 +226,7 @@ this.hubConnection.invoke('updateparameters', frequency, volume, live, updateAll ## API リファレンス - +
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/grids/_shared/multi-column-headers.mdx b/docs/xplat/src/content/jp/components/grids/_shared/multi-column-headers.mdx index 3e573547d6..3d8c982b0f 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/multi-column-headers.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/multi-column-headers.mdx @@ -914,9 +914,9 @@ import 'core-js/es7/array'; ## API リファレンス - - - +
+
+
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/grids/_shared/multi-row-layout.mdx b/docs/xplat/src/content/jp/components/grids/_shared/multi-row-layout.mdx index ad406a7daf..1f4b7e761d 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/multi-row-layout.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/multi-row-layout.mdx @@ -401,8 +401,8 @@ $my-custom-schema: extend($light-schema, ( ## API リファレンス - - +
+
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/grids/_shared/paging.mdx b/docs/xplat/src/content/jp/components/grids/_shared/paging.mdx index 6b14c02fe4..88393d5413 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/paging.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/paging.mdx @@ -362,18 +362,10 @@ $dark-button: button-theme( -## ページネーション スタイルの例 - - - - ## API リファレンス - -- `{ComponentName}` -- `Paginator` - - +
+
Our community is active and always welcoming to new ideas. diff --git a/docs/xplat/src/content/jp/components/grids/_shared/remote-data-operations.mdx b/docs/xplat/src/content/jp/components/grids/_shared/remote-data-operations.mdx index 12ac294852..360bacf6a3 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/remote-data-operations.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/remote-data-operations.mdx @@ -1850,10 +1850,10 @@ As you can see in the `Paginate` method, custom pagination logic is performed, b その後は、ページング イベントをカスタム メソッドにバインドするだけで、リモート ページングが設定されます。 -## グリッド リモート ページングのデモ +## API リファレンス - - +
+
## グリッド リモート ページングのデモ diff --git a/docs/xplat/src/content/jp/components/grids/_shared/row-actions.mdx b/docs/xplat/src/content/jp/components/grids/_shared/row-actions.mdx index 1bfac00fa2..5fd175aaba 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/row-actions.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/row-actions.mdx @@ -324,6 +324,6 @@ import { IgxActionStripModule } from 'igniteui-angular'; ## API リファレンス - - - +
+
+
diff --git a/docs/xplat/src/content/jp/components/grids/_shared/row-adding.mdx b/docs/xplat/src/content/jp/components/grids/_shared/row-adding.mdx index d85da1f946..c190150d99 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/row-adding.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/row-adding.mdx @@ -382,13 +382,13 @@ export class AppModule {} > **注**: -> [行の追加] のボタンの表示状態を制御する 入力は、アクション ストリップ コンテキスト (タイプ を使用して、ボタンが表示するレコードを調整できます。 +> [行の追加] のボタンの表示状態を制御する 入力は、アクション ストリップ コンテキスト (タイプ を使用して、ボタンが表示するレコードを調整できます。 > **注**: -> [行の追加] のボタンの表示状態を制御する 入力は、アクション ストリップ コンテキスト (タイプ ) を使用して、ボタンが表示するレコードを調整できます。 +> [行の追加] のボタンの表示状態を制御する 入力は、アクション ストリップ コンテキスト (タイプ ) を使用して、ボタンが表示するレコードを調整できます。 @@ -642,7 +642,7 @@ igRegisterScript("rowEditActionsTemplate", (endRowEdit) => { ## API リファレンス - +
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/grids/_shared/row-drag.mdx b/docs/xplat/src/content/jp/components/grids/_shared/row-drag.mdx index 498fdc4fa9..5a4156b400 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/row-drag.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/row-drag.mdx @@ -1503,9 +1503,9 @@ Following is the example of both scenarios described above - showing a drop indi グリッドの行ドラッグ イベントと `Drop` ディレクティブを使用して、ドラッグよる行の並べ替えるが可能なグリッドを作成できます。 -## 行ドラッグ シナリオでの UX の改善 +## API リファレンス - +
## カーソル位置に基づいてドラッグ ゴーストを変更する 以下のスニペットでは、ドラッグ ゴースト内のテキストを変更して、ホバーされた行の名前を表示する方法を示しています。 diff --git a/docs/xplat/src/content/jp/components/grids/_shared/row-editing.mdx b/docs/xplat/src/content/jp/components/grids/_shared/row-editing.mdx index 6ba65dcfb2..348dfebfb2 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/row-editing.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/row-editing.mdx @@ -770,7 +770,7 @@ Then set the related CSS properties for that class: ## API References - +
## Additional Resources diff --git a/docs/xplat/src/content/jp/components/grids/_shared/row-pinning.mdx b/docs/xplat/src/content/jp/components/grids/_shared/row-pinning.mdx index 556b84034f..1d92874d3d 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/row-pinning.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/row-pinning.mdx @@ -688,9 +688,9 @@ $custom-grid-theme: grid-theme( ## API リファレンス - - - +
+
+
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/grids/_shared/row-selection.mdx b/docs/xplat/src/content/jp/components/grids/_shared/row-selection.mdx index 7082d79a0a..a5861e3c8b 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/row-selection.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/row-selection.mdx @@ -39,9 +39,9 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; ## 設定 -で項目の選択を設定するには、その `RowSelection` プロパティを設定する必要があります。このプロパティは、 列挙を受け取ります。 +で項目の選択を設定するには、その `RowSelection` プロパティを設定する必要があります。このプロパティは、 列挙を受け取ります。 - exposes the following modes: + exposes the following modes: `GridSelectionMode` は以下のモードを公開します。 @@ -854,11 +854,11 @@ const headSelectorTemplate = (ctx: IgrHeadSelectorTemplateContext) => { ## API リファレンス - - - - - +
+
+
+
+
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/grids/_shared/search.mdx b/docs/xplat/src/content/jp/components/grids/_shared/search.mdx index 30c612e2ce..07cebbe2c7 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/search.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/search.mdx @@ -1341,8 +1341,8 @@ public updateSearch() { ## API リファレンス - - +
+
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/grids/_shared/selection.mdx b/docs/xplat/src/content/jp/components/grids/_shared/selection.mdx index 2ceb02146f..649a62d1b5 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/selection.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/selection.mdx @@ -564,7 +564,7 @@ import "core-js/es7/array"; ## API リファレンス - +
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/grids/_shared/size.mdx b/docs/xplat/src/content/jp/components/grids/_shared/size.mdx index 45eaee9e08..32bfbdd5df 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/size.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/size.mdx @@ -977,8 +977,8 @@ public webGridSetGridSize(sender: any, args: IgrPropertyEditorPropertyDescriptio ## API リファレンス - - +
+
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/grids/_shared/sizing.mdx b/docs/xplat/src/content/jp/components/grids/_shared/sizing.mdx index 19f949cd6d..e59dc2f4bf 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/sizing.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/sizing.mdx @@ -292,7 +292,7 @@ import hgridHeightPercentagesV2 from '@xplat-images/grid_sizing/hgrid-height-per ## API リファレンス - +
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/grids/_shared/sorting.mdx b/docs/xplat/src/content/jp/components/grids/_shared/sorting.mdx index 91ea537765..ac0d2828d7 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/sorting.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/sorting.mdx @@ -286,7 +286,7 @@ hierarchicalGridRef.current.sort([ -Sorting は、 アルゴリズムを使用して実行されます。 または `ISortingExpression` は、代替アルゴリズムとして `ISortingStrategy` のカスタム実装を使用できます。たとえば複雑なテンプレート列や画像列にユーザー定義のソートを定義する必要がある場合に便利です。 +Sorting は、 アルゴリズムを使用して実行されます。 または `ISortingExpression` は、代替アルゴリズムとして `ISortingStrategy` のカスタム実装を使用できます。たとえば複雑なテンプレート列や画像列にユーザー定義のソートを定義する必要がある場合に便利です。 フィルター動作と同様に、ソート状態をクリアするには `ClearSort` メソッドを使用します。 @@ -925,16 +925,10 @@ const sortAscendingHeaderIconTemplate = (ctx: IgrGridHeaderTemplateContext) => { -## デモ - - - - ## API リファレンス - -- `SortingExpression` - +
+
Our community is active and always welcoming to new ideas. diff --git a/docs/xplat/src/content/jp/components/grids/_shared/state-persistence.mdx b/docs/xplat/src/content/jp/components/grids/_shared/state-persistence.mdx index dd290d46a4..3373bee611 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/state-persistence.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/state-persistence.mdx @@ -74,8 +74,8 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - - - `Expansion` -- - - Pivot Configuration properties defined by the interface. +- + - Pivot Configuration properties defined by the interface. - Pivot Dimension and Value functions are restored using application level code, see [Restoring Pivot Configuration](state-persistence.md#restoring-pivot-configuration) section. @@ -1088,13 +1088,13 @@ Add snippet for blazor for restore state -## 制限 +## API リファレンス - - - - - +
+
+
+
+
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/grids/_shared/summaries.mdx b/docs/xplat/src/content/jp/components/grids/_shared/summaries.mdx index 0c07ca98a4..ad3e2a3cee 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/summaries.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/summaries.mdx @@ -855,7 +855,7 @@ igRegisterScript("WebTreeGridCustomSummary", (event) => { ### すべてのデータにアクセスするカスタム集計 -カスタム列集計内のすべての {ComponentTitle} データにアクセスできます。SummaryOperand メソッドには、2 つの追加のオプション パラメーターが導入されています。 +カスタム列集計内のすべての {ComponentTitle} データにアクセスできます。SummaryOperand `SummaryOperand` `Operate` メソッドには、2 つの追加のオプション パラメーターが導入されています。 以下のコード スニペットで示されるように operate メソッドには以下の 3 つのパラメーターがあります。 - columnData - 現在の列の値のみを含む配列を提供します。 - allGridData - グリッド データソース全体を提供します。 @@ -1261,14 +1261,14 @@ const summaryFormatter = (summary: IgrSummaryResult, summaryOperand: IgrSummaryO 以下は使用できる プロパティの値です: -- - ルート レベルのみ集計が計算されます。 -- - 子レベルのみ集計が計算されます。 -- - ルートと子レベルの両方の集計が計算されます。これがデフォルト値です。 +- - ルート レベルのみ集計が計算されます。 +- - 子レベルのみ集計が計算されます。 +- - ルートと子レベルの両方の集計が計算されます。これがデフォルト値です。 以下は使用できる プロパティの値です。 -- - 集計行はグループ列の子の前に表示されます。 -- - 集計行はグループ列の子の後に表示されます。これがデフォルト値です。 +- - 集計行はグループ列の子の前に表示されます。 +- - 集計行はグループ列の子の後に表示されます。これがデフォルト値です。 プロパティはブール値です。デフォルト値は **false** に設定されています。これは、親行が縮小されたときに集計行が非表示になることを意味します。プロパティが **true** に設定されている場合、グループ行が縮小されたときに、集計行は表示されたままになります。 @@ -1289,14 +1289,14 @@ const summaryFormatter = (summary: IgrSummaryResult, summaryOperand: IgrSummaryO 以下は使用できる プロパティの値です: -- - ルート レベルのノードのみ集計が計算されます。 -- - 子レベルのみ集計が計算されます。 -- - ルートと子レベルの両方の集計が計算されます。これがデフォルト値です。 +- - ルート レベルのノードのみ集計が計算されます。 +- - 子レベルのみ集計が計算されます。 +- - ルートと子レベルの両方の集計が計算されます。これがデフォルト値です。 以下は使用できる プロパティの値です。 -- - 集計行は子行のリストの前に表示されます。 -- - 集計行は子行のリストの後に表示されます。これがデフォルト値です。 +- - 集計行は子行のリストの前に表示されます。 +- - 集計行は子行のリストの後に表示されます。これがデフォルト値です。 プロパティはブール値です。デフォルト値は **false** に設定されています。これは、親行が縮小されたときに集計行が非表示になることを意味します。プロパティが **true** に設定されている場合、親行が縮小されたときに、集計行は表示されたままになります。 @@ -1515,13 +1515,15 @@ Don't forget to include the themes in the same way as it was demonstrated above. -## デモ +## API リファレンス - - - - - +
+
+ +
+
+
+ ## スタイル設定 diff --git a/docs/xplat/src/content/jp/components/grids/_shared/toolbar.mdx b/docs/xplat/src/content/jp/components/grids/_shared/toolbar.mdx index f9a1cc066b..8c3e803822 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/toolbar.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/toolbar.mdx @@ -1467,17 +1467,15 @@ Currently, defining a toolbar component directly inside the {RowIslandSelector} -## スタイル設定 - - - - - - - - - -## デモ +## API リファレンス + +
+
+
+
+
+
+
diff --git a/docs/xplat/src/content/jp/components/grids/_shared/validation.mdx b/docs/xplat/src/content/jp/components/grids/_shared/validation.mdx index 8de301b7ea..09b132fe47 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/validation.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/validation.mdx @@ -51,7 +51,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; ### リアクティブ フォームで構成する -`formGroupCreated` イベントを介して行/セルで編集を開始するときに検証に使用する を公開します。関連するフィールドに独自の検証を追加して変更できます。 +`formGroupCreated` イベントを介して行/セルで編集を開始するときに検証に使用する を公開します。関連するフィールドに独自の検証を追加して変更できます。 ```html @@ -117,7 +117,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; 検証は以下のシナリオでトリガーされます。 -- グリッドの に基づくセルエディターでの編集中。エディター入力中の変更時 (`Change`)、またはエディターがフォーカスを失うか (`Blur`) 閉じた場合。 +- グリッドの に基づくセルエディターでの編集中。エディター入力中の変更時 (`Change`)、またはエディターがフォーカスを失うか (`Blur`) 閉じた場合。 - `UpdateRow`、`UpdateCell` などの API を使用してセル / 行を更新する場合 。 - トランザクション サービスの一括編集および `Undo`/`Redo` API を使用する場合。 @@ -196,7 +196,7 @@ export class PhoneFormatDirective extends Validators { 場合によっては、1 つのフィールドの検証がレコード内の別のフィールドの値に依存することがあります。 -その場合、カスタム検証を使用して共有 を介してレコード内の値を比較できます。 +その場合、カスタム検証を使用して共有 を介してレコード内の値を比較できます。 The below sample demonstrates a cross-field validation between different field of the same record. It checks the dates validity compared to the current date and between the active and created on date of the record as well as the deals won/lost ration for each employee. All errors are collected in a separate pinned column that shows that the record is invalid and displays the related errors. @@ -251,7 +251,7 @@ public calculateDealsRatio(dealsWon, dealsLost) { ``` -The cross-field validator can be added to the of the row from `FormGroupCreated` event, which returns the new for each row when entering edit mode: +The cross-field validator can be added to the of the row from `FormGroupCreated` event, which returns the new for each row when entering edit mode: ```html @@ -451,7 +451,7 @@ private rowValidator(): ValidatorFn { } ``` -The cross-field validator can be added to the of the row from `FormGroupCreated` event, which returns the new for each row when entering edit mode: +The cross-field validator can be added to the of the row from `FormGroupCreated` event, which returns the new for each row when entering edit mode: ```html - +
+
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/grids/_shared/virtualization.mdx b/docs/xplat/src/content/jp/components/grids/_shared/virtualization.mdx index 46f83e5096..8b4e629f13 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/virtualization.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/virtualization.mdx @@ -101,8 +101,8 @@ igRegisterScript("CellTemplate", (ctx) => { ## API リファレンス - - +
+
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/grids/data-grid.mdx b/docs/xplat/src/content/jp/components/grids/data-grid.mdx index 72051905c6..9bd70dbdf3 100644 --- a/docs/xplat/src/content/jp/components/grids/data-grid.mdx +++ b/docs/xplat/src/content/jp/components/grids/data-grid.mdx @@ -855,7 +855,7 @@ function updateValue(event, value) { -テンプレートで使用可能なプロパティの詳細については、 の API を参照してください。 +テンプレートで使用可能なプロパティの詳細については、 の API を参照してください。 ### 列テンプレート API @@ -1931,7 +1931,7 @@ igRegisterScript("WebGridNestedDataCellTemplate", (ctx) => { ### フラット データの操作の概要 -フラット データ バインディングのアプローチは既に説明したものと似ていますが、**セル値**の代わりに、`GridRow` の プロパティを使用します。 +フラット データ バインディングのアプローチは既に説明したものと似ていますが、**セル値**の代わりに、`GridRow` の プロパティを使用します。 {Platform} グリッドはデータ レコードを**レンダリング**、**操作**、**保存する**ためのコンポーネントのため、**すべてのデータ レコード**へアクセスすることで、それを処理する方法をカスタマイズすることができます。それには、`data` プロパティを使用します。 @@ -2422,16 +2422,16 @@ platformBrowserDynamic() ## API リファレンス - - - - - +
+
+
+
+
- - - - +
+
+
+
## テーマの依存関係 diff --git a/docs/xplat/src/content/jp/components/grids/data-grid/accessibility.mdx b/docs/xplat/src/content/jp/components/grids/data-grid/accessibility.mdx deleted file mode 100644 index f7fad6eecf..0000000000 --- a/docs/xplat/src/content/jp/components/grids/data-grid/accessibility.mdx +++ /dev/null @@ -1,162 +0,0 @@ ---- -title: "{Platform} データ グリッド | リアルタイム データ グリッドとテーブル | アクセシビリティの遵守 | インフラジスティックス" -description: インフラジスティックスの {ProductName} データ テーブルとグリッドを使用して、スクリーン リーダーがグリッドのセルと列を介して「話す」キーボード ナビゲーションのインタラクションを読み取ることができるアクセシビリティ機能をサポートします。{ProductName} テーブルのチュートリアルをご覧ください! -keywords: "{Platform} Table, Data Grid, cell accessibility, {ProductName}, Infragistics, {Platform} テーブル, データ グリッド, セルのアクセシビリティ, インフラジスティックス" -mentionedTypes: ["Grid", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: "{CanonicalLinkToGridMain}" -_language: ja ---- -import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; -import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; -import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; -import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - - - - - - - - - -このコントロールは非推奨であり、[Grid](../data-grid.md) に置き換えられていることに注意してください。そのため、そのコントロールに移行することをお勧めします。これは新しい機能を受け取ることはなく、バグ修正は優先されません。コードベースをデータ グリッドに移行する際のヘルプや質問については、サポートにお問い合わせください。 - - - - -# {Platform} Grid アクセシビリティの遵守 - -{ProductName} データ テーブル / データ グリッドは、グリッドのセルと列を介したキーボード ナビゲーションのインタラクションを解釈するアクセシビリティとスクリーン リーダーをサポートしています。 - - - - - -これは、グリッドの プロパティを **true** に設定することによってアクティブになります。 - - - - - - - - -これは、CSS で `--use-accessibility` プロパティを明示的に **true** に設定することによってアクティブになります。できれば、グリッドを div タグで囲みます。 - - - - -## {Platform} Grid アクセシビリティの例 - - - - - - - -
- -## 第 508 条の遵守 -Section 508 of the Rehabilitation Act was amended in 1998 by Congress to require all Federal agencies to make their electronic and information technology accessible to people with disabilities. Since then, Section 508 compliance has not only been a requirement in government agencies, but it's also important when providing software solutions and designing Web pages. - -リハビリテーション法第 508 条は、連邦議会によって 1998 年に改正され、すべての連邦政府機関は障害を持つ人が電子情報技術にアクセスできるようにすることを義務付けました。それ以降、第 508 条の準拠は連邦政府機関の要件であるだけでなく、ソフトウェア ソリューションを提供し、Web ページを設計する際にも重要となります。 - -## WAI-ARIA サポート -2014 年に W3C は WAI-ARIA 仕様を完成しました。障害を持つユーザーに Web コンテンツおよび Web アプリケーションへのアクセシビリティを提供するためのデザイン方法を定義したものです。 - -このセクションでは、フレームワークのアクセシビリティ (ARIA) サポートと、コンポーネントの文字表記の方向の簡単な管理を示します。 - -ARIA 属性 -スクリーン リーダーに、グリッドの解釈とインタラクションに必要なコンテキスト情報を提供するために、ARIA 属性がグリッドの DOM 要素に追加されます。これらの属性は、div や span などのプレーンな HTML 要素を使用して複雑な DOM 構造を作成する場合に特に役立ちます。これは、ag-Grid の場合です。 - -グリッドの DOM 要素を検査する場合、次の役割とプロパティがサポートされ、スクリーン リーダーによって通知されます。 - -- グリッド セル - グリッド セルを含む要素。 -- 行数 - 行数を通知します。 -- 列数 - 列数を通知します。 -- 行 - 列ヘッダーまたはグリッド セルの行。 -- 行インデックス - 行の表示インデックスを通知します。 -- 選択された行 - 行が選択可能な場合にのみ存在し、選択状態を通知します。 -- 展開されたグループ - 行グループにのみ存在し、展開状態を通知します。 -- 列ヘッダー - 列ヘッダーを含む要素。 -- セル インデックス - 列の表示インデックスを通知します。 -- Colspan - 列が複数の列にまたがる場合にのみ存在し、スクリーン リーダーのガイドに役立ちます。 -- ソート - ソート可能な列にのみ存在し、ソートの状態を通知します。 -- 列インデックス - セルの表示インデックスを通知します。 -- 選択済み - セルが選択可能である場合にのみ存在し、選択状態を通知します。 -- 展開済み - グループ セルにのみ存在し、展開状態を通知します。 - -## キーボード ナビゲーション - - プロパティを **true** に設定すると、スクリーン リーダーが認識できるデータ グリッド内のさまざまなキーボード ナビゲーション オプションが有効になります。以下は、現在押下されているセルに対する各キーの押下 / 組み合わせとそれらが持つ効果についての説明です。 - -グリッド内の移動 - -- CTRL + ALT + →: 1 つ上のセルに移動します。 -- CTRL + ALT + ←: 左のセルに移動します。 -- CTRL + ALT + ↓: 1 つ下のセルに移動します。 -- CTRL + ALT + ↑: 1 つ上のセルに移動します。 -- CTRL + ALT + HOME: 最初の列ヘッダーに移動します。 -- CTRL + ALT + END: 最後に表示されているセルに移動します。 -- CTRL + ALT + SHIFT + ↑ 現在の列ヘッダーに移動します。 -- CTRL + ALT + SHIFT + ↓ 現在の列の最後のセルに移動します。 -- CTRL + ALT + SHIFT + ← 現在の行の最初のセルに移動します。 -- CTRL + ALT + SHIFT + → 現在の行の最後のセルに移動します。 - -スクリーン リーダー コマンド - -- CTRL または ALT + Num Pad 5: 現在のセルを読み上げます。 -- INSERT + SHIFT + ↑: 現在の行を読み上げます。 -- INSERT + SHIFT + HOME: 行の始まりから読み上げます。 -- INSERT + SHIFT + PAGE UP: 現在のセルから行の終わりまで読み上げます。 -- INSERT + SHIFT + Num Pad 5: 現在の列を読み上げます。 -- INSERT + SHIFT + END: 列の先頭から読み上げます。 -- INSERT + SHIFT + PAGE DOWN: 列の下部まで読み上げます。 - -## コード スニペット - -以下は、{Platform} データ グリッドにセルのアクセシビリティを実装する方法を示しています。 - - - -```tsx - -``` - - - - - -```html - - -``` - - - - - -```razor -
- - @if (DataSource != null) - { - - } -
-``` - - - - -## API リファレンス - - diff --git a/docs/xplat/src/content/jp/components/grids/data-grid/cell-activation.mdx b/docs/xplat/src/content/jp/components/grids/data-grid/cell-activation.mdx deleted file mode 100644 index ff7aa219ad..0000000000 --- a/docs/xplat/src/content/jp/components/grids/data-grid/cell-activation.mdx +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: "{Platform} データ グリッド | リアルタイム データ グリッドとテーブル | アクティブ化 | インフラジスティックス" -description: インフラジスティックスの {ProductName} Data Table / Data Grid を使用して、グリッドのセルを介したキーボードナビゲーションを可能にするセルのアクティブ化機能をサポートします。{ProductName} テーブル チュートリアルを是非お試しください! -keywords: "{Platform} Table, Data Grid, cell activation, {ProductName}, Infragistics, {Platform} テーブル, データ グリッド, セルのアクティブ化, インフラジスティックス" -mentionedTypes: ["Grid", "GridActivationMode"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: "{CanonicalLinkToGridMain}" -_language: ja ---- -import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; -import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; -import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; -import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - - - - - - - - - -このコントロールは非推奨であり、[Grid](../data-grid.md) に置き換えられていることに注意してください。そのため、そのコントロールに移行することをお勧めします。これは新しい機能を受け取ることはなく、バグ修正は優先されません。コードベースをデータ グリッドに移行する際のヘルプや質問については、サポートにお問い合わせください。 - - - - -# {Platform} グリッド セルのアクティブ化 - -{ProductName} Data Table / Data Grid は、グリッドのセルを介したキーボードナビゲーションを可能にするセルアクティベーション機能をサポートします。これは、グリッドの プロパティを `Cell` に設定することによってアクティブになります。 - -## {Platform} グリッド セルのアクティブ化の例 - - - - - - - -
- -## Excel スタイルのナビゲーション - - property will configure the grid to navigate to the next cell up, down, left or right after the enter key is pressed in edit mode. Otherwise, the property of the grid can be used to navigate to other cells, while not in edit mode, up, down, left or right. - -## キーボード ナビゲーション - -グリッドの プロパティを `Cell` に設定すると、データ グリッド内のさまざまなキーボードナビゲーションオプションが有効になります。以下は、現在押下されているセルに対する各キーの押下/組み合わせとそれらが持つ効果についての説明です。 - -- ↑: 1 つ上のセルに移動します。 -- ↓: 1 つ下のセルに移動します。 -- ←: 現在の行でセルを 1 つ左に移動します。 -- → 現在の行でセルを 1 つ右に移動します。 -- PAGE UP: グリッドを 1 ビューポート ページ上にスクロールします。 -- PAGE DOWN: グリッドを 1 ビューポート ページ下にスクロールします。 -- TAB: アクティブ セルを右の以下のセルに移動するか、その行の最後のセルに達した場合、以下の行の一番左のセルに移動します。 -- SHIFT + TAB: アクティブセルを左の以下のセルに移動するか、またはその行の最初のセルに達した場合、前の行の一番右のセルに移動します。 -- CTRL + ↑: 列の一番上のセルに移動します。 -- CTRL + ↓: 列の一番下のセルに移動します。 -- CTRL + ←: 列の一番左のセルに移動します。 -- CTRL + →: 列の一番右のセルに移動します。 -- CTRL + HOME: グリッド内の左上のセルに移動します。 -- CTRL + END: グリッド内の右下のセルに移動します。 - - -## API リファレンス - - diff --git a/docs/xplat/src/content/jp/components/grids/data-grid/cell-editing.mdx b/docs/xplat/src/content/jp/components/grids/data-grid/cell-editing.mdx deleted file mode 100644 index bf24cfd546..0000000000 --- a/docs/xplat/src/content/jp/components/grids/data-grid/cell-editing.mdx +++ /dev/null @@ -1,402 +0,0 @@ ---- -title: "{Platform} データ グリッド | 一括更新のセルおよび行編集 | インフラジスティックス" -description: セルおよび行の編集機能をサポートするインフラジスティックスの {Platform} グリッド コンポーネントを使用して、任意の時点でグリッドのすべてのセルを一括更新するように設定できます。{ProductName} を使用したデータの表示方法について説明します。 -keywords: "{Platform} Table, Data Grid, cell and row editing, {ProductName}, batch updating, Infragistics, {Platform} テーブル, データ グリッド, セルおよび行の編集, 一括更新, インフラジスティックス" -mentionedTypes: ["Grid", "EditModeType", "TransactionType"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: "{CanonicalLinkToGridCellEditing}" -_language: ja ---- -import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; -import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; -import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; -import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - - - - - - - - - -このコントロールは非推奨であり、[Grid](grid/overview.md) に置き換えられていることに注意してください。そのため、そのコントロールに移行することをお勧めします。これは新しい機能を受け取ることはなく、バグ修正は優先されません。コードベースをデータ グリッドに移行する際のヘルプや質問については、サポートにお問い合わせください。 - - - - -# {Platform} Grid 編集 - -{ProductName} Data Table / Data Grid は、一括更新のセルおよび行編集をサポートします。注: 現在、これは非テンプレート列に制限されています。 - -## {Platform} Grid 編集の例 - - - - - - - -
- -## 概要 - -{Platform} データ グリッドの編集は、{Platform} グリッドの オプションを使用して設定します。このプロパティには、以下にリストされている 3 つの異なるオプションがあります。 - -- `None`: 編集は有効ではありません。 -- `Cell`: セルが編集モードに入り、編集モードの終了時に値をコミットできるようにします。 -- `CellBatch`: セルが編集モードに入りますが、変更はコミットされるまで後でキャッシュされます。 -- `Row`: 行が編集モードに入り、編集モードの終了時に値をコミットできるようにします。 - -`CellBatch` に設定した場合、変更をコミットするにはグリッドから `commitEdits` メソッドを実行する必要があります。グリッドは、コミットされるまでセルを斜体で表示し、変更をデータ ソースにプッシュするタイミングを制御します。 - -さらに、`onCellValueChanging` イベントをフックし、コミットされる前に新しい値を調べることでエラー処理を実行できます。グリッドはエラー メッセージを出力できる `setEditError` メソッドを公開します。これにより、有効な値が入力されるまで、セルを編集モードに維持します。それ以外の場合は、グリッドの `rejectEdit` メソッドを実行して無効な値を元に戻すことができます。無効な値が見つからない場合、グリッドの `acceptEdit` メソッドを呼び出して変更をコミットすることもできます。 - -コミットは、`acceptCommit` または `rejectCommit` メソッドで `onDataCommitting` をフックし、`commitID` イベント引数をパラメーターとして渡すことで、グリッド レベルで承認または拒否できます。このイベントは、コミットされる前のすべての変更を保存する `changes` コレクションも公開します。たとえば、コミットが追加、更新、削除操作のいずれであるかを `changes` コレクションで公開された プロパティによって確認し、必要に応じて `acceptCommit` または `rejectCommit` を実行できます。 - -## Excel スタイル編集 - - enables you to instantly begin editing when typing similar to how Excel behaves. In addition you may set the property to `SingleClick` to allow users to quickly edit cells while navigating to other cells. By default double-clicking is required to enter edit mode. - -## コード スニペット - -以下は、データ グリッドで編集を設定し、データをコミットする方法を示します。 - - - -```tsx - - - -``` - - - - - -```ts -import { IgrDataGrid } from 'igniteui-react-data-grids'; - -onCommitClick = () => { - this._grid.commitEdits(); -} -``` - - - - - -```html - - - -``` - - - - - -```ts -import { IgcDataGridComponent } from 'igniteui-webcomponents-data-grids'; - -this.onCommitClick = this.onCommitClick.bind(this); - -public onCommitClick() { - this.grid.commitEdits(); -} -``` - - - - - -```razor - - - -@code { - public IgbDataGrid DataGridRef; - - private void OnCommitClick(MouseEventArgs e) - { - this.DataGridRef.CommitEdits(); - } -} -``` - - - -## 一括変更を元に戻す/やり直し - -以下は、一括更新が有効な場合に変更を元に戻す方法を示しています。 - - - -```tsx - - - - -``` - - - - - -```ts -import { IgrDataGrid } from 'igniteui-react-data-grids'; - -onUndoClick = () => { - this._grid.undo(); - - // request a new render so the undo/redo buttons update. - this.setState({ }); -} - -onRedoClick = () => { - this._grid.redo(); - - // request a new render so the undo/redo buttons update. - this.setState({ }); -} -``` - - - - - -```html - - - - -``` - - - - - -```ts -import { IgcDataGridComponent } from 'igniteui-webcomponents-data-grids'; - -public onUndoClick() { - this.grid.undo(); - if (this.grid.editMode === EditModeType.CellBatch && this.redo !== null) - { - this.redo.disabled = false; - } -} - -public onRedoClick() { - this.grid.redo(); -} -``` - - - - - -```razor - - - - -@code { - public IgbDataGrid DataGridRef; - - private void OnUndoClick(MouseEventArgs e) - { - this.DataGridRef.Undo(); - } - - private void OnRedoClick(MouseEventArgs e) - { - this.DataGridRef.Redo(); - } -} -``` - - - -## エラー検証とコミットの整合性 - -以下は、編集モードを終了するときにセルが空かどうかを確認し、更新されたセルからのコミットのみを受け入れることによって、エラーを組み込む方法を示しています。 - - - -```tsx - - -``` - - - - - -```html - -``` - - - - - -```ts -import { IgrGridDataCommittingEventArgs } from 'igniteui-react-data-grids'; -import { TransactionType } from 'igniteui-react-core' - -onCellValueChanging = (s: IgrDataGrid, e: IgrGridCellValueChangingEventArgs) => { - //check if value is empty upon exiting edit mode. - if (e.newValue === "") { - s.setEditError(e.editID, "Error, cell is empty"); - //or revert changes - s.rejectEdit(e.editID); - } - else { - s.acceptEdit(e.editID); - } -} - -onDataCommitting = (s: IgrDataGrid, e: IgrGridDataCommittingEventArgs) => { - - if (e.changes[0].transactionType === TransactionType.Update) { - //commit was passed - s.acceptCommit(e.commitID); - } - else{ - //commit was prevented - s.rejectCommit(e.commitID); - } -} -``` - - - - - -```ts -import { IgcGridDataCommittingEventArgs } from 'igniteui-webcomponents-data-grids'; -import { TransactionType } from 'igniteui-webcomponents-core' - -this.onCellValueChanging = this.onCellValueChanging.bind(this); -this.grid.cellValueChanging = this.onCellValueChanging; - -this.onDataCommitting = this.onDataCommitting.bind(this); -this.grid.dataCommitting = this.onDataCommitting; - - -public onCellValueChanging (s: IgcDataGridComponent, e: IgcGridCellValueChangingEventArgs) { - if (s.editMode === EditModeType.CellBatch && this.undo !== null) - { - this.undo.disabled = false; - } - - //check if value is empty upon exiting edit mode. - if (e.newValue === "") { - s.setEditError(e.editID, "Error, cell is empty"); - //or revert changes - s.rejectEdit(e.editID); - } - else { - s.acceptEdit(e.editID); - } -} - -public onDataCommitting (s: IgcDataGridComponent, e: IgcGridDataCommittingEventArgs) { - if (e.changes[0].transactionType === TransactionType.Update) { - //commit was passed - s.acceptCommit(e.commitID); - } - else{ - //commit was prevented - s.rejectCommit(e.commitID); - } -} -``` - - - - - -```razor - - - -@code { - public IgbDataGrid DataGridRef; - - public void OnCellValueChanging(IgbGridCellValueChangingEventArgs e) - { - //check if value is empty upon exiting edit mode. - if (e.NewValue == "") - { - this.DataGridRef.SetEditError(e.EditID, "Error, cell is empty"); - //or revert changes - this.DataGridRef.RejectEdit(e.EditID); - } - else - { - this.DataGridRef.AcceptEdit(e.EditID); - } - } - - public void OnDataCommitting(IgbGridDataCommittingEventArgs e) - { - if (e.Changes[0].TransactionType == TransactionType.Update) - { - //commit was passed - this.DataGridRef.AcceptCommit(e.CommitID); - } - else - { - //commit was prevented - this.DataGridRef.RejectCommit(e.CommitID); - } - } -} -``` - - - - -## API リファレンス - - diff --git a/docs/xplat/src/content/jp/components/grids/data-grid/cell-merging.mdx b/docs/xplat/src/content/jp/components/grids/data-grid/cell-merging.mdx deleted file mode 100644 index ab531db839..0000000000 --- a/docs/xplat/src/content/jp/components/grids/data-grid/cell-merging.mdx +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: "{Platform} データ グリッド | セル結合 | 結合 | インフラジスティックス" -description: Infragistics の {Platform} データ グリッドのセル結合機能を使用して、重複する値を持つセルを結合します。 -keywords: "{Platform} Table, Data Grid, cell merging, {ProductName}, Infragistics, {Platform} テーブル, データ グリッド, セル結合, インフラジスティックス" -mentionedTypes: ["Grid", "MergedCellMode", "MergedCellEvaluationCriteria"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: "{CanonicalLinkToGridMain}" -_language: ja ---- -import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; -import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; -import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; -import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - - - - - - - - - -このコントロールは非推奨であり、[Grid](../data-grid.md) に置き換えられていることに注意してください。そのため、そのコントロールに移行することをお勧めします。これは新しい機能を受け取ることはなく、バグ修正は優先されません。コードベースをデータ グリッドに移行する際のヘルプや質問については、サポートにお問い合わせください。 - - - - -# {Platform} グリッド セルの結合 - -{ProductName} データ テーブル / データ グリッドはセルの結合をサポートします。オプトインして、特定の列の隣接する兄弟レコードに同じ値が含まれている場合に検出できます。セルがアクティブ、選択、または編集モードではない間、値はセル全体に表示されます。 - -## {Platform} グリッド セルの結合例 - - - - - - -
- -## 概要 - -{Platform} データ グリッドでのセルの結合は、{Platform} グリッド全体または個々の列の オプションを使用して構成できます。このプロパティは、以下にリストされている次のオプションのいずれかに設定できます: - -- `Never`: グリッドまたは列がセルを結合することはありません。これがデフォルトの動作です。 -- `Always`: グリッドまたは列が常にセルの結合を試みます。 -- `OnlyWhenSorted`: グリッドまたは列が列がソートされたときにのみセルの結合を試みます。 - -このプロパティの値に関係なく、セルは兄弟レコード間でのみ結合できることに注意してください。 - -セルの結合は、 プロパティを使用してデータが書式設定されているかどうかに基づいて評価できます。これは、グリッド全体または個々の列に適用され、以下にリストされている次のオプションのいずれかに設定できます。 - -- `RawValue`: セルの生の値が同じ場合、隣接する行のセルを結合します。これがデフォルト値です。 -- `FormattedText`: セルからのフォーマットされた値が同じである場合、隣接する行からのセルを結合します。 - -
- - -## API リファレンス - - diff --git a/docs/xplat/src/content/jp/components/grids/data-grid/cell-selection.mdx b/docs/xplat/src/content/jp/components/grids/data-grid/cell-selection.mdx deleted file mode 100644 index 2870a733c6..0000000000 --- a/docs/xplat/src/content/jp/components/grids/data-grid/cell-selection.mdx +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: "{Platform} データ グリッド | セル選択 | 選択 | インフラジスティックス" -description: インフラジスティックスの {Platform} データ グリッドのセルおよび行選択を使用して、テーブルの領域をハイライト表示します。{ProductName} テーブルの単一行選択または複数行選択を設定する方法について説明します。 -keywords: "{Platform} Table, Data Grid, cell selection, {ProductName}, Infragistics, {Platform} テーブル, データ グリッド, セル選択, インフラジスティックス" -mentionedTypes: ["Grid", "DataGridSelectionMode"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: "{CanonicalLinkToGridCellSelection}" -_language: ja ---- -import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; -import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; -import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; -import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - - - - - - - - - -このコントロールは非推奨であり、[Grid](grid/overview.md) に置き換えられていることに注意してください。そのため、そのコントロールに移行することをお勧めします。これは新しい機能を受け取ることはなく、バグ修正は優先されません。コードベースをデータ グリッドに移行する際のヘルプや質問については、サポートにお問い合わせください。 - - - - -# {Platform} グリッドの選択 - -{ProductName} Data Table / Data Grid は、単一行または複数行およびセルの選択をサポートしています。 - -## {Platform} グリッド選択の例 - - - - - - - -
- -## 概要 - -{Platform} データ グリッドでの選択は行およびセル レベルで有効になり、{Platform} グリッドの オプションを使用して構成できます。このプロパティには、以下にリストされている 5 つの異なるオプションがあります。 - -- `None`: 選択は有効にされていません。 -- `SingleCell`: 単一セルの選択が有効です。 -- `SingleRow`: 単一行の選択が有効です。 -- `MultipleCell`: 複数セルの選択が可能になります。 -- `MultipleRow`: 複数行の選択が可能になります。 -- `RangeCell`: クリックしてドラッグの複数セル範囲の選択が可能になります。 - - defaults to `ModifierBased`, where only one row or cell is selected at a time and modifier keys (CTRL) are required to multi-select items. `SelectionBehavior` set to `Toggle` will allow multiple rows or cells to be selected on single click only. - -`SelectionBehavior` のデフォルトは `ModifierBased` で、一度に 1 つの行またはセルのみが選択され、項目を複数選択するには修飾キー (CTRL) が必要です。`SelectionBehavior` を `Toggle` に設定すると、シングル クリックでのみ複数の行またはセルを選択できます。 - -`MultipleRow` には次の機能が含まれています。 -- クリックしてドラッグし、行を選択します。 -- SHIFT キーを押しながらクリックして、複数の行を選択します。 -- SHIFT キーを押しながら ↑ + ↓ 矢印キーを押して、複数の行を選択します。 - -## 範囲の行選択 - -次の例は、グリッド内のすべての行を選択または選択解除する方法を示しています。 は MultipleRow に設定する必要があることに注意してください。 - - - - - - -
- - -## API リファレンス - - diff --git a/docs/xplat/src/content/jp/components/grids/data-grid/column-animation.mdx b/docs/xplat/src/content/jp/components/grids/data-grid/column-animation.mdx deleted file mode 100644 index 5db85e7e43..0000000000 --- a/docs/xplat/src/content/jp/components/grids/data-grid/column-animation.mdx +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: "{Platform} データ グリッド | 列アニメーション | インフラジスティックス" -description: Infragistics {ProductName} データ テーブルとグリッドを使用して、列を移動または非表示にするときに、イベントで列アニメーションを表示する方法を説明します。{ProductName} テーブル チュートリアルを是非お試しください! -keywords: "{Platform} Table, Data Grid, column animations, {ProductName}, Infragistics, {Platform} テーブル, データ グリッド, 列アニメーション, インフラジスティックス" -mentionedTypes: ["Grid", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: "{CanonicalLinkToGridMain}" -_language: ja ---- -import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; -import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; -import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; -import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - - - - - - - - - -このコントロールは非推奨であり、[Grid](../data-grid.md) に置き換えられていることに注意してください。そのため、そのコントロールに移行することをお勧めします。これは新しい機能を受け取ることはなく、バグ修正は優先されません。コードベースをデータ グリッドに移行する際のヘルプや質問については、サポートにお問い合わせください。 - - - - -# {Platform} グリッド列アニメーション - -{ProductName} Data Table / Data Grid は、列の非表示や列の移動などのイベント時に列のアニメーションをサポートします。{Platform} データ グリッドで Column Animation が設定されている場合、対応するアニメーションはその列のすべてのセルに対して発生します。 - -## {Platform} グリッド列アニメーションの例 - - - - - - - -
- -## アニメーション プロパティ - -各列のアニメーションプロパティは以下のとおりです。 - -- : 列を追加すると、列ヘッダーとそのセルを左、右、上、または下からスライドさせることができます。スライドやフェード インだけでなく、フェード インさせるオプションもあります。 -- : 列を交換する場合、交換した列ヘッダーとそのセルを左、右、上、または下にスライドさせることができます。スライドやフェードだけでなく、フェードさせるオプションもあります。 -- : 列を非表示にすると、列ヘッダーとそのセルを左、右、上、または下からスライドさせることができます。スライドやフェード アウトだけでなく、フェード アウトさせるオプションもあります。 -- : 列が移動すると、列ヘッダーとそのセルを左、右、上、または下からスライドさせることができます。 -- : 列のプロパティが変更されると、その変更を補完または深く補完してそのプロパティの変更をアニメーションするオプションがあります。 -- : 列を追加すると、列ヘッダーとそのセルを左、右、上、または下からスライドさせることができます。スライドやフェード インだけでなく、フェード インさせるオプションもあります。 - -## コード スニペット - -このトピックで説明されている各列アニメーションの実装を次に示します。 - - - -```tsx - -``` - - - - - -```html - - -``` - - - - - -```razor - -``` - - - - -## API リファレンス - - diff --git a/docs/xplat/src/content/jp/components/grids/data-grid/column-chooser.mdx b/docs/xplat/src/content/jp/components/grids/data-grid/column-chooser.mdx deleted file mode 100644 index c2234b3eb8..0000000000 --- a/docs/xplat/src/content/jp/components/grids/data-grid/column-chooser.mdx +++ /dev/null @@ -1,343 +0,0 @@ ---- -title: "{Platform} データ グリッド | 列選択 | インフラジスティックス" -description: インフラジスティックスの {ProductName} グリッド コンポーネントで UI から直接、または {Platform} コントロールを使用して列の表示/非表示機能をサポートする方法について説明します。詳細については、{ProductName} テーブル サンプルを参照してください。 -keywords: "{Platform} Table, Data Grid, column chooser, {ProductName}, Infragistics, {Platform} テーブル, データ グリッド, 列選択, インフラジスティックス" -mentionedTypes: ["Grid", "DataGridColumn", "DataGridToolbar", "Button", "ColumnChooser", "ColumnHidingAnimationMode", "ColumnShowingAnimationMode", "ColumnChooserTitle"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: "{CanonicalLinkToGridMain}" -_language: ja ---- -import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; -import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; -import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; -import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - - - - - - - - - -このコントロールは非推奨であり、[Grid](../data-grid.md) に置き換えられていることに注意してください。そのため、そのコントロールに移行することをお勧めします。これは新しい機能を受け取ることはなく、バグ修正は優先されません。コードベースをデータ グリッドに移行する際のヘルプや質問については、サポートにお問い合わせください。 - - - - -# {Platform} Grid 列選択の概要 - -{ProductName} Data Grid は、 コンポーネントまたはページのどこにでも配置できる コンポーネントによって UI から列の表示/非表示を行う機能をサポートしています。列の プロパティにより、手動生成の列に対してプログラムによって列の表示/非表示を設定することができます。 の値は コンポーネントに反映されます。各方法は列の表示状態を変更するために使用できます。 - -## {Platform} Grid 列選択の例 - - - - - - - -
- - -## ツールバーの列選択 UI - -列選択 UI は、グリッドとは別に コンポーネント内でアクセスできます。このため、ツールバーの `ColumnChooser` プロパティを true に設定します。 -ツールバーは `Button` を表示し、クリックすると列選択 UI を表示します。このボタンは、非表示列の合計も表示します。ツールバーが作成されていない場合、`ColumnChooser` プロパティを有効にしても効果はなく、ボタンを非表示にします。 - - は、 プロパティを使用してツールバーにタイトルを追加、 プロパティを設定して `Button` にテキストを配置、 を設定して、タイトル ヘッダーを列選択 UI に追加などの追加プロパティを提供します。 - -列選択は、グリッドの および プロパティを設定することでアニメーションで構成できます。 - -## コード スニペット - -以下は、データ グリッドの列選択ツールバー UI の実装方法を示します。 - - - -```tsx - - - - -``` - - - - - -```ts -import { IgrDataGrid } from 'igniteui-react-data-grids'; -import { IgrDataGridToolbar } from 'igniteui-react-data-grids'; - -public grid : IgrDataGrid; -public toolbar: IgrDataGridToolbar; - -this.onGridRef = this.onGridRef.bind(this); -this.onToolbarRef = this.onToolbarRef.bind(this); - - -public onGridRef(grid: IgrDataGrid) { - this.grid = grid; - if (this.toolbar != null) { - this.toolbar.targetGrid = this.grid; - this.grid.columnMovingAnimationMode = ColumnMovingAnimationMode.SlideOver; - - let productNameColumn = document.getElementById("productname") as IgrTextColumnComponent; - productNameColumn.isHidden = true; - } -} - -public onToolbarRef(toolbar: IgrDataGridToolbar) { - this.toolbar = toolbar; - if (this.grid != null) { - this.toolbar.targetGrid = this.grid; - this.toolbar.columnChooser = "true"; - this.toolbar.toolbarTitle = "Grid Title"; - this.toolbar.columnChooserText = "Column Chooser"; - this.toolbar.columnChooserTitle = "Column Chooser"; - } -} -``` - - - - - -```html - - - - -``` - - - - - -```ts -import { IgcDataGrid } from 'igniteui-webcomponents-data-grids'; -import { IgcDataGridToolbar } from 'igniteui-webcomponents-data-grids'; -import { ColumnMovingAnimationMode } from 'igniteui-webcomponents-data-grids'; - -private grid: IgcDataGridComponent; -private toolbar: IgcDataGridToolbarComponent; - -connectedCallback() { - this.toolbar.targetGrid = this.grid; - let productNameColumn = document.getElementById("productname") as IgcTextColumnComponent; - productNameColumn.isHidden = true; - this.toolbar.columnChooser = true; - this.toolbar.toolbarTitle = "Grid Title"; - this.toolbar.columnChooserText = "Choose Text"; - this.toolbar.columnChooserTitle = "Choose Title Text"; - this.grid.columnMovingAnimationMode = ColumnMovingAnimationMode.SlideOver; -} -``` - - - - - -```razor - - - - -@code { - private DataGrid grid; - public DataGrid DataGridRef - { - get - { - return grid; - } - set - { - grid = value; - StateHasChanged(); - } - } -} -``` - - - -## シンプルな列選択 - -ツールバーなしで UIを手動で表示し、ページの任意の場所に配置するとします。マークアップでコンポーネントのインスタンスを作成して簡単に行うことができます。 - -## サンプル - - - - - - -
- -## コード スニペット - -以下は、データ グリッドの列選択 UI の実装方法を示します。 - - - -```tsx - - - - - -``` - - - - - -```ts -import { IgrDataGrid } from 'igniteui-react-data-grids'; -import { IgrColumnChooser } from 'igniteui-react-data-grids'; -import { ColumnMovingAnimationMode } from 'igniteui-react-data-grids'; - -public grid : IgrDataGrid; -public columnChooser: IgrColumnChooser; - -public onGridRef(grid: IgrDataGrid) { - this.grid = grid; - if (this.columnChooser) { - this.columnChooser.targetGrid = this.grid; - this.grid.columnMovingAnimationMode = ColumnMovingAnimationMode.SlideOver; - } -} - -public onColumnChooserRef(columnChooser: IgrColumnChooser) { - this.columnChooser = columnChooser; - if (this.grid) { - this.columnChooser.targetGrid = this.grid; - this.columnChooser.showAllText = "Show All"; - this.columnChooser.hideAllText = "Hide All"; - } -} -``` - - - - - -```html - - - - - -``` - - - - - -```ts -import { IgcDataGrid } from 'igniteui-webcomponents-data-grids'; -import { IgcColumnChooser } from 'igniteui-webcomponents-data-grids'; -import { ColumnMovingAnimationMode } from 'igniteui-webcomponents-data-grids'; - -private grid: IgcDataGridComponent; -private columnChooser: IgcColumnChooserComponent; - -connectedCallback() { - this.columnChooser.targetGrid = this.grid; - this.columnChooser.showAllText = "Show All"; - this.columnChooser.hideAllText = "Hide All"; - this.grid.columnMovingAnimationMode = ColumnMovingAnimationMode.SlideOver; -} -``` - - - - - -```razor - - - -@code { - private IgbDataGrid grid; - public IgbDataGrid DataGridRef - { - get - { - return grid; - } - set - { - grid = value; - StateHasChanged(); - } - } -} -``` - - - - -## API リファレンス - - - diff --git a/docs/xplat/src/content/jp/components/grids/data-grid/column-filtering.mdx b/docs/xplat/src/content/jp/components/grids/data-grid/column-filtering.mdx deleted file mode 100644 index 48e41652ae..0000000000 --- a/docs/xplat/src/content/jp/components/grids/data-grid/column-filtering.mdx +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: "{Platform} データ グリッド | フィルタリング | インフラジスティックス" -description: インフラジスティックスの {ProductName} グリッド コンポーネントを使用して表現的なソート条件を実行し、データを簡単に返します。詳細については、{ProductName} テーブルのサンプルを参照してください。 -keywords: "{Platform} Table, Data Grid, column, filtering, filter expressions, filter operands, {ProductName}, Infragistics, {Platform} テーブル, データ グリッド, 列, フィルタリング, フィルター式, フィルター オペランド, インフラジスティックス" -mentionedTypes: ["Grid", "FilterExpressions", "FilterLogicalOperator", "FilterOperand"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: "{CanonicalLinkToGridFiltering}" -_language: ja ---- -import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; -import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; -import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; -import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - - - - - - - - - -このコントロールは非推奨であり、[Grid](../data-grid.md) に置き換えられていることに注意してください。そのため、そのコントロールに移行することをお勧めします。これは新しい機能を受け取ることはなく、バグ修正は優先されません。コードベースをデータ グリッドに移行する際のヘルプや質問については、サポートにお問い合わせください。 - - - - -# {Platform} グリッド フィルターの概要 - -{ProductName} Data Table / Data Grid には、フィルター行と API の両方を使用した列フィルタリングが含まれており、フィルター処理される列のデータ型に基づいてソート条件を実行できます。 - -## {Platform} グリッド フィルターの例 - - - - - - - -
- -上記のように、`FilterUIType` プロパティを FilterRow に設定すると、ユーザー インターフェイスでレコードをフィルタリングできるようになり、ユーザーはレコードをフィルタリングするためのフィルター基準を指定できます。指定されたフィルター基準に一致しないレコードは非表示になります。 - -フィールドにカーソルを合わせて垂直の省略記号をクリックすると、列オプション UI にもフィルタリングが表示されます。これは、`FilterUIType` を ColumnOptions に設定するときに実現されます。以下のサンプルを参照してください。 - -## フィルター式 - -以下の例では、データ グリッドの FilterExpressions コレクションが更新され、カスタムの `FilterExpressions` が組み込まれています。 - - - - - - -
- - -## フィルター演算子 - -列には、filter-row オペランド ドロップダウンに表示されるカスタムの `FilterOperand` を指定できます。重要な要件は、オペランドに `DisplayName` が指定されていることを確認し、オペランドで `FilterRequested` イベントを利用して、`FilterFactory` を適用できるようにすることです。これにより、列をフィルタリングする演算子と値を割り当てることができます。例えば、「A」の値で開始します。 - -さらに、グリッドの `FilterLogicalOperator` プロパティは、フィールド間のフィルターがどのように組み合わされるかを示す役割を果たします。 - -- `And` 論理演算子。正しく一致させるためには、すべての条件をパスする必要があります。 -- `Or` 論理演算子。正しく一致させるためには、少なくとも 1 つの条件をパスする必要があります。 - - -オペランドは列に適用されるため、インライン、コード内、または別のクラスなど、いくつかの方法で追加できます。各アプローチは、以下の例で示されています。 - - - - - - - -
- - -## API リファレンス - - - - - diff --git a/docs/xplat/src/content/jp/components/grids/data-grid/column-moving.mdx b/docs/xplat/src/content/jp/components/grids/data-grid/column-moving.mdx deleted file mode 100644 index fd45e6e5dc..0000000000 --- a/docs/xplat/src/content/jp/components/grids/data-grid/column-moving.mdx +++ /dev/null @@ -1,124 +0,0 @@ ---- -title: "{Platform} データ グリッド | 列移動 | インフラジスティックス" -description: インフラジスティックスの {ProductName} データ グリッドは列の移動をサポートし、列の表示方法を柔軟に選択できます。詳細については、{ProductName} テーブル サンプルを参照してください。 -keywords: "{Platform} Table, Data Grid, column moving, {ProductName}, Infragistics, {Platform} テーブル, データ グリッド, 列移動, インフラジスティックス" -mentionedTypes: ["Grid", "ColumnMovingMode", "ColumnMovingAnimationMode"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: "{CanonicalLinkToGridColumnMoving}" -_language: ja ---- -import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; -import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; -import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; -import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - - - - - - - - - -このコントロールは非推奨であり、[Grid](grid/overview.md) に置き換えられていることに注意してください。そのため、そのコントロールに移行することをお勧めします。これは新しい機能を受け取ることはなく、バグ修正は優先されません。コードベースをデータ グリッドに移行する際のヘルプや質問については、サポートにお問い合わせください。 - - - - -# {Platform} グリッド列移動の概要 - -{ProductName} Data Grid は列を移動する機能をサポートしているので、表示されている列の順序に関して列の表示方法を柔軟に選択できます。 - -## {Platform} グリッド列移動の例 - - - - - - - -
- -{ProductName} Data Grid の列移動はデフォルトで有効になっているため、グリッドの `ColumnMovingMode` プロパティを設定して制御できます。このプロパティには、Deferred または None の 2 つのオプションがあります。`Deferred` は列の移動を許可しますが、`None` はグリッド全体の列の移動を無効にします。 - -列の移動が `Deferred` に設定されていると、列を移動している間、セパレーターが表示されます。列を移動しているときにマウス ポインタを離すと、移動した列は区切り記号の右側にある列の位置に移動します。このセパレータは、それぞれ `ColumnMovingSeparatorWidth` プロパティと `ColumnMovingSeparatorBackground` プロパティを使用して幅と色をカスタマイズすることもできます。 - -必要に応じて、列の動きをアニメートすることもできます。これは、グリッドの `ColumnMovingAnimationMode` プロパティを設定することによって実行できます。アニメーションはデフォルトで編集できません。 - -## コード スニペット - -以下は、遅延列の移動、アニメーションの有効化、5 ピクセル幅のセパレーターを使用して {ProductName} Data Grid に列移動を実装する方法を示しています。 - - -```ts -import { ColumnMovingAnimationMode } from 'igniteui-react-data-grids'; -import { ColumnMovingMode } from 'igniteui-react-data-grids'; -``` - - - - - -```ts -import { ColumnMovingAnimationMode } from 'igniteui-webcomponents-data-grids'; -import { ColumnMovingMode } from 'igniteui-webcomponents-data-grids'; -``` - - - - - - -```tsx - -``` - - - - - -```html - - -``` - - - - - -```ts -let grid1 = (document.getElementById("grid") as IgcDataGridComponent); -grid1.dataSource = data; -``` - - - - - -```razor - -``` - - - - -## API リファレンス - - - diff --git a/docs/xplat/src/content/jp/components/grids/data-grid/column-options.mdx b/docs/xplat/src/content/jp/components/grids/data-grid/column-options.mdx deleted file mode 100644 index 13aefd544a..0000000000 --- a/docs/xplat/src/content/jp/components/grids/data-grid/column-options.mdx +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: "{Platform} データ グリッド | 列オプション | インフラジスティックス" -description: インフラジスティックスの {ProductName} データ グリッドは、各列ヘッダーのドロップダウン UI を介して列のピン固定、移動、フィルター、およびソートの機能をサポートします。{ProductName} テーブルの列オプションを是非お試しください! -keywords: "{Platform} Table, Data Grid, column options, {ProductName}, Infragistics, {Platform} テーブル, データ グリッド, 列オプション, インフラジスティックス" -mentionedTypes: ["Grid", "HeaderClickAction", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: "{CanonicalLinkToGridMain}" -_language: ja ---- -import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; -import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; -import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; -import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - - - - - - - - - -このコントロールは非推奨であり、[Grid](../data-grid.md) に置き換えられていることに注意してください。そのため、そのコントロールに移行することをお勧めします。これは新しい機能を受け取ることはなく、バグ修正は優先されません。コードベースをデータ グリッドに移行する際のヘルプや質問については、サポートにお問い合わせください。 - - - - -# {Platform} Grid 列オプションの概要 - -{ProductName} データ グリッドは、各列ヘッダに表示される UI による列のグループ化、非表示、移動、固定、フィルター、およびソートの機能をサポートします。 - -列オプション UI を有効にするには、グリッドの `IsColumnOptionsEnabled` プロパティを true に設定します。 - -## {Platform} Grid 列オプションの例 - - - - - - - -
- -## 列オプションの構成 - -列の `IsFilteringEnabled` プロパティにより、列ごとにフィルタリングの有効/無効化を切り替えることができます。True または false に設定すると、列のオプション UI のフィルタリング セクションが表示または非表示になります。 - -`HeaderClickAction` プロパティを使用すると、グリッド全体のソートの有効/無効化を切り替えることができます。これを `None` に設定すると、グリッドのソートが完全に削除され、各列のオプション UI に反映されます。`SortByOneColumnOnly` を設定すると、一度に 1 つの列のソートが有効になります。 - -## コード スニペット - -以下のコードは、グリッドと列を調整することにより、列オプション UI でフィルタリングとソートをプログラムで有効にする方法を紹介します。 - - - -```tsx - - - -``` - - - - -```ts -import { HeaderClickAction } from 'igniteui-react-data-grids'; - -//enable column options -this.grid.isColumnOptionsEnabled="true"; - -//adjust filtering for column -let idColumn = this.grid.actualColumns.item(0); -idColumn.isFilteringEnabled="false"; - -//adjust sorting -this.grid.headerClickAction = HeaderClickAction.SortByOneColumnOnly; -``` - - - - - -```ts -import { HeaderClickAction } from 'igniteui-webcomponents-data-grids'; - -//enable column options -this.grid.isColumnOptionsEnabled="true"; - -//adjust filtering for column -let idColumn = this.grid.actualColumns.item(0); -idColumn.isFilteringEnabled="false"; - -//adjust sorting -this.grid.headerClickAction = HeaderClickAction.SortByOneColumnOnly; -``` - - - - - - -```html - - - -``` - - - - - -```razor - - - -``` - - - - -## API リファレンス - - diff --git a/docs/xplat/src/content/jp/components/grids/data-grid/column-pinning.mdx b/docs/xplat/src/content/jp/components/grids/data-grid/column-pinning.mdx deleted file mode 100644 index 514c577e93..0000000000 --- a/docs/xplat/src/content/jp/components/grids/data-grid/column-pinning.mdx +++ /dev/null @@ -1,470 +0,0 @@ ---- -title: "{Platform} データ グリッド | 列ピン固定 | インフラジスティックス" -description: インフラジスティックスの {ProductName} グリッド コンポーネントは列のピン固定をサポートし、列の位置を柔軟に選択できます。詳細については、{ProductName} テーブル サンプルを参照してください。 -keywords: "{Platform} Table, Data Grid, column pinning, {ProductName}, Infragistics, {Platform} テーブル, データ グリッド, 列ピン固定, インフラジスティックス" -mentionedTypes: ["Grid", "PinnedPositions", "PinColumn", "ColumnPinning", "DataGridToolbar", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: "{CanonicalLinkToGridColumnPinning}" -_language: ja ---- -import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; -import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; -import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; -import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - - - - - - - - - -このコントロールは非推奨であり、[Grid](../data-grid.md) に置き換えられていることに注意してください。そのため、そのコントロールに移行することをお勧めします。これは新しい機能を受け取ることはなく、バグ修正は優先されません。コードベースをデータ グリッドに移行する際のヘルプや質問については、サポートにお問い合わせください。 - - - - - - -# {Platform} Grid 列ピン固定の概要 - -{ProductName} Data Grid は列をピン固定する機能をサポートし、エンド ユーザーが特定の列順序で列をロックできます。 - -単一または複数の列をデータ グリッドの左側または右側にピン固定できます。その他、`PinColumn` 関数を介して列のピン固定状態を変更できます。 - -## {Platform} Grid 列ピン固定の例 - - - - - - - -
- -データグリッドの列ピン固定 API は、列の `Pinned` プロパティまたはグリッドの `PinColumn` 関数を設定することで有効にできます。 - -`Pinned` プロパティに 3 つのオプションがあります。 - -- Left - `Left` を有効にすると、ピン固定した列がグリッドの左側に配置されます。 -- Right - `Right` を有効にすると、ピン固定した列がグリッドの右側に配置されます。 -- None - `None` を有効にすると、列のピン固定を解除し、グリッド内のデフォルトの配置を再配置します。 - -ピン固定された列に近接するピン固定されていない列は、水平スクロールを維持します。 - -`PinColumn` 関数に 2 つのパラメーターがあります。最初のパラメーターはピン固定する列で、2 番目は `PinnedPositions` 列挙型設定です。 - - -## コード スニペット - -以下のコードは、`Pinned` プロパティと `PinColumn` 関数で列のピン固定を使用して、データ グリッドで列のピン固定を実装する方法を示します。 - - - - - - - -```tsx - - - {/*Columns pinned left*/} - - - - - {/*Columns unpinned*/} - - - - - {/*Columns pinned right*/} - - - - -``` - - - - -```ts -import { PinnedPositions } from 'igniteui-react-data-grids'; - -public onButtonPinLeft = (e: any) => { - - let idColumn = this.grid.actualColumns.item(0); - let firstNameColumn = this.grid.actualColumns.item(1); - let lastNameColumn = this.grid.actualColumns.item(2); - - //pinned property - idColumn.pinned = PinnedPositions.Left; - firstNameColumn.pinned = PinnedPositions.Left; - lastNameColumn.pinned = PinnedPositions.Left; - - // pinColumn Function - this.grid.pinColumn(idColumn, PinnedPositions.Left); - this.grid.pinColumn(firstNameColumn, PinnedPositions.Left); - this.grid.pinColumn(lastNameColumn, PinnedPositions.Left); -} - -public onButtonPinRight = (e: any) => { - - let streetColumn = this.grid.actualColumns.item(6); - let cityColumn = this.grid.actualColumns.item(7); - let countryColumn = this.grid.actualColumns.item(8); - - //pinned property - streetColumn.pinned = PinnedPositions.Right; - cityColumn.pinned = PinnedPositions.Right; - countryColumn.pinned = PinnedPositions.Right; - - //pinColumn function - this.grid.pinColumn(streetColumn, PinnedPositions.Right); - this.grid.pinColumn(cityColumn, PinnedPositions.Right); - this.grid.pinColumn(countryColumn, PinnedPositions.Right); -} - -public onButtonUnPin = (e: any) => { - - let idColumn = this.grid.actualColumns.item(0); - let firstNameColumn = this.grid.actualColumns.item(1); - let lastNameColumn = this.grid.actualColumns.item(2); - - //pinned property - idColumn.pinned = PinnedPositions.Left; - firstNameColumn.pinned = PinnedPositions.Left; - lastNameColumn.pinned = PinnedPositions.Left; - - //pinColumn function - this.grid.pinColumn(idColumn, PinnedPositions.None); - this.grid.pinColumn(firstNameColumn, PinnedPositions.None); - this.grid.pinColumn(lastNameColumn, PinnedPositions.None); - - let streetColumn = this.grid.actualColumns.item(6); - let cityColumn = this.grid.actualColumns.item(7); - let countryColumn = this.grid.actualColumns.item(8); - - //pinned property - streetColumn.pinned = PinnedPositions.None; - cityColumn.pinned = PinnedPositions.None; - countryColumn.pinned = PinnedPositions.None; - - //pinColumn function - this.grid.pinColumn(streetColumn, PinnedPositions.None); - this.grid.pinColumn(cityColumn, PinnedPositions.None); - this.grid.pinColumn(countryColumn, PinnedPositions.None); -} -``` - - - - - - - - - - -```html - - - - - - - - - - - - - -``` - - - - -```ts -import { PinnedPositions } from 'igniteui-webcomponents-data-grids'; - -onButtonPinLeft() { - - let idColumn = this.grid.actualColumns.item(0); - let firstNameColumn = this.grid.actualColumns.item(1); - let lastNameColumn = this.grid.actualColumns.item(2); - - //pinned property - idColumn.pinned = PinnedPositions.Left; - firstNameColumn.pinned = PinnedPositions.Left; - lastNameColumn.pinned = PinnedPositions.Left; - - // pinColumn Function - this.grid.pinColumn(idColumn, PinnedPositions.Left); - this.grid.pinColumn(firstNameColumn, PinnedPositions.Left); - this.grid.pinColumn(lastNameColumn, PinnedPositions.Left); -} - -onButtonPinRight() { - - let streetColumn = this.grid.actualColumns.item(6); - let cityColumn = this.grid.actualColumns.item(7); - let countryColumn = this.grid.actualColumns.item(8); - - //pinned property - streetColumn.pinned = PinnedPositions.Right; - cityColumn.pinned = PinnedPositions.Right; - countryColumn.pinned = PinnedPositions.Right; - - //pinColumn function - this.grid.pinColumn(streetColumn, PinnedPositions.Right); - this.grid.pinColumn(cityColumn, PinnedPositions.Right); - this.grid.pinColumn(countryColumn, PinnedPositions.Right); -} - -onButtonUnPin() { - - let idColumn = this.grid.actualColumns.item(0); - let firstNameColumn = this.grid.actualColumns.item(1); - let lastNameColumn = this.grid.actualColumns.item(2); - - //pinned property - idColumn.pinned = PinnedPositions.Left; - firstNameColumn.pinned = PinnedPositions.Left; - lastNameColumn.pinned = PinnedPositions.Left; - - //pinColumn function - this.grid.pinColumn(idColumn, PinnedPositions.None); - this.grid.pinColumn(firstNameColumn, PinnedPositions.None); - this.grid.pinColumn(lastNameColumn, PinnedPositions.None); - - let streetColumn = this.grid.actualColumns.item(6); - let cityColumn = this.grid.actualColumns.item(7); - let countryColumn = this.grid.actualColumns.item(8); - - //pinned property - streetColumn.pinned = PinnedPositions.None; - cityColumn.pinned = PinnedPositions.None; - countryColumn.pinned = PinnedPositions.None; - - //pinColumn function - this.grid.pinColumn(streetColumn, PinnedPositions.None); - this.grid.pinColumn(cityColumn, PinnedPositions.None); - this.grid.pinColumn(countryColumn, PinnedPositions.None); -} -``` - - - - - - -```razor - - - @*Columns Pinned Left*@ - - - - - @*Columns Unpinned*@ - - - - - @*Columns Pinned Right*@ - - - - -``` - - - -## ツールバーの列ピン固定 UI - -列ピン固定 UI は、グリッドとは別に `DataGridToolbar` コンポーネント内でアクセスできます。このため、ツールバーの `columnPinning` プロパティを true に設定します。ツールバーは `Button` を表示し、クリックすると列ピン固定 UI を表示します。このボタンは、左側にピン固定された列の合計も表示します。ツールバーが作成されていない場合、`columnPinning` プロパティを有効にしても効果はなく、ボタンを非表示にします。 - -`DataGridToolbar` は、`ToolbarTitle` プロパティを使用してツールバーにタイトルを追加、`columnPinningText` プロパティを設定して `Button` にテキストを配置、`columnPinningTitle` を設定して、タイトル ヘッダーを列非表示 UI に追加などの追加プロパティを提供します。 - -## サンプル - - - - - - -## コード スニペット - - - - - - - -```tsx - - - - -``` - - - - - - - - - -```ts -import { IgrDataGrid } from 'igniteui-react-data-grids'; -import { IgrDataGridToolbar } from 'igniteui-react-data-grids'; - -public grid : IgrDataGrid; -public toolbar: IgrDataGridToolbar; - -this.onGridRef = this.onGridRef.bind(this); -this.onToolbarRef = this.onToolbarRef.bind(this); - - -public onGridRef(grid: IgrDataGrid) { - this.grid = grid; - if (this.toolbar != null) { - this.toolbar.targetGrid = this.grid; - - let productNameColumn = this.grid.actualColumns.item(0); - productNameColumn.pinned = PinnedPositions.Left; - } -} - -public onToolbarRef(toolbar: IgrDataGridToolbar) { - this.toolbar = toolbar; - if (this.grid != null) { - this.toolbar.targetGrid = this.grid; - this.toolbar.columnPinning = "true"; - this.toolbar.toolbarTitle = "Grid Title"; - this.toolbar.columnPinningText = "Pinning"; - this.toolbar.columnPinningTitle = "Pinning Title"; - } -} -``` - - - - - - - - - -```html - - - - -``` - - - - - - - - - -```ts -import { IgcDataGrid } from 'igniteui-webcomponents-data-grids'; -import { IgcDataGridToolbar } from 'igniteui-webcomponents-data-grids'; - -private grid: IgcDataGridComponent; -private toolbar: IgcToolbarComponent; - -connectedCallback() { - this.toolbar.targetGrid = this.grid; - let productNameColumn = document.getElementById("productname") as IgcTextColumnComponent; - productNameColumn.pinned = true; - this.toolbar.columnPinning = true; - this.toolbar.toolbarTitle = "Grid Title"; - this.toolbar.columnPinningText = "Pinning Text"; - this.toolbar.columnPinningTitle = "Pinning Title Text"; -} -``` - - - - - -```razor - - - -@code { - private IgbDataGrid grid; - public IgbDataGrid DataGridRef - { - get - { - return grid; - } - set - { - grid = value; - StateHasChanged(); - } - } -} -``` - - - - -## API References - - - - diff --git a/docs/xplat/src/content/jp/components/grids/data-grid/column-resizing.mdx b/docs/xplat/src/content/jp/components/grids/data-grid/column-resizing.mdx deleted file mode 100644 index 612542c9e4..0000000000 --- a/docs/xplat/src/content/jp/components/grids/data-grid/column-resizing.mdx +++ /dev/null @@ -1,148 +0,0 @@ ---- -title: "{Platform} データ グリッド | 列サイズ変更 | インフラジスティックス" -description: インフラジスティックスの {ProductName} グリッド コンポーネントは列サイズを変更する機能をサポートしており、各列の幅に関して列の表示方法を柔軟に選択できます。詳細については、{ProductName} テーブル サンプルを参照してください。 -keywords: "{Platform} Table, Data Grid, column resizing, {ProductName}, Infragistics, {Platform} テーブル, データ グリッド, 列サイズ変更, インフラジスティックス" -mentionedTypes: ["Grid", "ColumnResizingMode", "ColumnResizingAnimationMode"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: "{CanonicalLinkToGridColumnResizing}" -_language: ja ---- -import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; -import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; -import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; -import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - - - - - - - - - -このコントロールは非推奨であり、[Grid](../data-grid.md) に置き換えられていることに注意してください。そのため、そのコントロールに移行することをお勧めします。これは新しい機能を受け取ることはなく、バグ修正は優先されません。コードベースをデータ グリッドに移行する際のヘルプや質問については、サポートにお問い合わせください。 - - - - -# {Platform} グリッドの列サイズ変更 - -{ProductName} Data Grid は列サイズを変更する機能をサポートしており、各列の幅に関して列の表示方法を柔軟に選択できます。 - -## {Platform} グリッドの列サイズ変更の例 - - - - - - - -
- -{ProductName} データグリッド内の列サイズ変更はデフォルトでオンになっており、グリッドの `ColumnResizingMode` プロパティを使用して制御できます。このプロパティには 3 つのオプションがあります。各オプションを以下に説明します。 - -- `Deferred`: デフォルト オプションです。サイズを変更すると、サイズが変更された後に列が大きくまたは小さくなる量を示すセパレーターが表示されます。 -- `Immediate`: サイズを変更する際のセパレーターはありません。列の端をドラッグすると、列の幅はポインターの動きを追ってそれに応じてサイズを変更します。 -- `None`: 列サイズを変更することはできません。 - -列サイズ変更を `Deferred` に設定すると、グリッドの `ColumnResizingSeparatorBackground` プロパティと `ColumnResizingSeparatorWidth` プロパティを使用して、表示するセパレーターの色と幅をそれぞれ変更できます。 - -サイズ変更モードが `Deferred` のみに設定されている場合、列のサイズを変更するときに列をアニメーション化することもできます。これを実行するには、`ColumnResizingAnimationMode` プロパティ `Interpolate` にを設定します。 - -グリッドの各列は、個別にサイズ変更できるかどうかを決定できます。特定の列でサイズ変更を有効または無効にする場合、その列の IsResizingEnabled プロパティを設定できます。 - -スター幅の列のサイズを変更すると、その列が固定列に変更されます。 - -## コード スニペット - -以下のコード スニペットは、{Platform} データ グリッドで列のサイズ変更を実装する方法を示します。この場合、**Street** 列はサイズ変更できません。この場合、列のサイズ変更セパレーターの幅は 5 ピクセルになり、サイズ変更可能な列もサイズ変更時にアニメーション化されます。 - - -```ts -import { ColumnResizingMode } from 'igniteui-react-data-grids'; -import { ColumnResizingAnimationMode } from 'igniteui-react-data-grids'; -``` - - - - - -```ts -import { ColumnResizingMode } from 'igniteui-webcomponents-data-grids'; -import { ColumnResizingAnimationMode } from 'igniteui-webcomponents-data-grids'; -``` - - - - - - -```tsx - - - - - - -``` - - - - - -```html - - - - - - -``` - - - - - -```ts -let grid1 = (document.getElementById("grid") as IgcDataGridComponent); -grid1.dataSource = data; -``` - - - - - -```razor - - - - - - -``` - - - - -## API リファレンス - - - diff --git a/docs/xplat/src/content/jp/components/grids/data-grid/column-sorting.mdx b/docs/xplat/src/content/jp/components/grids/data-grid/column-sorting.mdx deleted file mode 100644 index a72c1db20c..0000000000 --- a/docs/xplat/src/content/jp/components/grids/data-grid/column-sorting.mdx +++ /dev/null @@ -1,182 +0,0 @@ ---- -title: "{Platform} データ グリッド | 列ソート | インフラジスティックス" -description: インフラジスティックスの {Platform} グリッド コンポーネントのソート機能を使用して、豊富な API とデータ並び替えによって、ソート可能な列とソート不可の列の組み合わせを設定します。{ProductName} チュートリアルを是非お試しください! -keywords: "{Platform} Table, Data Grid, column, sorting, row, {ProductName}, Infragistics, {Platform} テーブル, データ グリッド, 列, ソート, 行, インフラジスティックス" -mentionedTypes: ["Grid", "HeaderClickAction"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: "{CanonicalLinkToGridSorting}" -_language: ja ---- -import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; -import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; -import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; -import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - - - - - - - - - -このコントロールは非推奨であり、[Grid](../data-grid.md) に置き換えられていることに注意してください。そのため、そのコントロールに移行することをお勧めします。これは新しい機能を受け取ることはなく、バグ修正は優先されません。コードベースをデータ グリッドに移行する際のヘルプや質問については、サポートにお問い合わせください。 - - - - -# {Platform} グリッド ソートの概要 - -{Platform} Data Table / Data Grid は、単一列、複数列、およびトライステート列のソート構成で昇順および降順の列のソートをサポートします。 - -## {Platform} グリッド ソートの例 - - - - - - - -
- -## コード スニペット - -`HeaderClickAction` プロパティを使用して、{Platform} データ グリッドで単一または複数の列を昇順降順にソートできます。TriState が有効な場合、列に適用されているソートを削除できます。 - -- `SortByMultipleColumns` -- `SortByMultipleColumnsTriState` -- `SortByOneColumnOnly` -- `SortByOneColumnOnlyTriState` - - -```ts -import { HeaderClickAction } from 'igniteui-react-data-grids'; -``` - - - - - -```ts -import { HeaderClickAction } from 'igniteui-webcomponents-data-grids'; -``` - - - - - - -```tsx - -``` - - - - - -```html - - -``` - - - - - -```razor - -``` - - - -## API を使用したソート - - - -```ts -import { IgrColumnSortDescription } from 'igniteui-react-data-grids'; -import { ListSortDirection } from 'igniteui-react-core'; -``` - - - - - -```ts -public onGridRef(grid: IgrDataGrid) { - this.grid = grid; -} -// ... -let colSortDesc = new IgrColumnSortDescription(); -colSortDesc.field = "UnitsInStock"; -colSortDesc.sortDirection = ListSortDirection.Descending; -this.grid.sortDescriptions.add(colSortDesc); -``` - - - - - -```ts -import { IgcColumnSortDescription } from 'igniteui-webcomponents-data-grids'; -import { ListSortDirection } from 'igniteui-webcomponents-core'; - -let grid1 = (document.getElementById("grid") as IgcDataGridComponent); -grid1.dataSource = data; - -let colSortDesc = new IgcColumnSortDescription(); -colSortDesc.field = "UnitsInStock"; -colSortDesc.sortDirection = ListSortDirection.Descending; -grid1.sortDescriptions.add(colSortDesc); -``` - - - - - -```razor -@code { - // Using the ref property above: - private IgbDataGrid grid; - private IgbDataGrid DataGridRef - { - get { return grid; } - set - { - grid = value; - OnGridRefChanged(); - StateHasChanged(); - } - } - - private void OnGridRefChanged() - { - if (this.DataGridRef != null) - { - this.DataGridRef.SortDescriptions.Add(new ColumnSortDescription() - { - Field = "Property", - SortDirection = ListSortDirection.Descending - }); - } - } -} -``` - - - - -## API リファレンス - - diff --git a/docs/xplat/src/content/jp/components/grids/data-grid/column-summaries.mdx b/docs/xplat/src/content/jp/components/grids/data-grid/column-summaries.mdx deleted file mode 100644 index c991df11bb..0000000000 --- a/docs/xplat/src/content/jp/components/grids/data-grid/column-summaries.mdx +++ /dev/null @@ -1,347 +0,0 @@ ---- -title: "{Platform} データ グリッド | 列集計 | インフラジスティックス" -description: Infragistics のグリッド コンポーネントの列集計機能を使用して、件数、最大値、最小値などの集計データを表示します。{ProductName} テーブルのサンプルを是非お試しください! -keywords: "{Platform} Table, Data Grid, column, summaries, {ProductName}, Infragistics, {Platform} テーブル, データ グリッド, 列, 集計, インフラジスティックス" -mentionedTypes: ["Implementation.Grid", "SummaryScope", "GroupSummaryDisplayMode"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: "{CanonicalLinkToGridSummaries}" -_language: ja ---- -import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; -import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; -import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; -import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - - - - - - - - - -このコントロールは非推奨であり、[Grid](../data-grid.md) に置き換えられていることに注意してください。そのため、そのコントロールに移行することをお勧めします。これは新しい機能を受け取ることはなく、バグ修正は優先されません。コードベースをデータ グリッドに移行する際のヘルプや質問については、サポートにお問い合わせください。 - - - - -# {Platform} 列集計 - -{ProductName} Data Table / Data Grid は、列集計をサポートしています。エンドユーザーは、グリッドに表示されるデータ量が多い場合などでデータ集計の表示を必要とすることがあります。エンドユーザーは、特定の列のデータから追加情報を取得することもできます。これを実現するには集計が役立ちます。集計を有効にするには、`SummaryScope` プロパティを設定します。 - -## {Platform} 列集計の例 - - - - - - - -
- -## SummaryScope プロパティ - -グリッドでは、`SummaryScope` プロパティを使用して、構成できる４つの集計設定をサポートします。集計設定は以下のとおりです。 - -- `Root`: 集計が適用される列にグリッド全体の行の総計を表示します。 -- `Groups`: これはグループ化された行に対して有効です。特定のグループ内の行の総計を表示します。 -- `Both`: `Groups` と `Root` オプションを同時に使用します。 -- `None`: グリッドの集計を無効にします。 - -## GroupSummaryDisplayMode プロパティ - -グリッドは、集計が表示される場所の構成をサポートします。これを構成するには、`GroupSummaryDisplayMode` プロパティを使用します。このプロパティのオプションは以下のとおりです。 - -- **List**: グループ集計をスパン グループ ヘッダーのフラット リストにレンダリングします。 -- **Cells**: グループ ヘッダーをセルとしてレンダリングし、集計値を対応する列に揃えてセル内にレンダリングします。グリッドは、このオプションを使用して列ごとに 1 つの集計のみを表示します。 -- **RowTop**: グループ集計をグループの上部に集計行としてレンダリングします。 -- **RowBottom**: グループ集計をグループの下部に集計行としてレンダリングします。 -- **None**: グループ集計のレンダリングを無効にします。 - -## コード スニペット - - - -```tsx - - - - - - - -``` - - - - - -```html - - - - - - - -``` - - - - - -```ts -import { IgrColumnGroupDescription } from 'igniteui-react-data-grids'; -import { IgrColumnSummaryDescription } from 'igniteui-react-data-grids' -import { SummaryOperand, SummaryCalculator, DefaultSummaryResult, IDataSource, ISummaryResult } from 'igniteui-react-core'; - -public componentDidMount() { - window.addEventListener('load', this.onLoad); -} - -public onLoad() { - // Count Operand - const productCount = new IgrColumnSummaryDescription(); - productCount.field = "ProductName"; - productCount.operand = SummaryOperand.Count; - this.grid.summaryDescriptions.add(productCount); - // Min Operand with formatting - const priceMin = new IgrColumnSummaryDescription(); - priceMin.field = "BundlePrice"; - priceMin.operand = SummaryOperand.Min; - priceMin.formatOverride = new Intl.NumberFormat('en-EN', { style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0 }); - this.grid.summaryDescriptions.add(priceMin); - // Max Operand and formatting - const priceMax = new IgrColumnSummaryDescription(); - priceMax.field = "BundlePrice"; - priceMax.operand = SummaryOperand.Max; - priceMax.formatOverride = new Intl.NumberFormat('en-EN', { style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0 }); - this.grid.summaryDescriptions.add(priceMax); - // Sum Operand - const orderSum = new IgrColumnSummaryDescription(); - orderSum.field = "OrderItems"; - orderSum.operand = SummaryOperand.Sum; - this.grid.summaryDescriptions.add(orderSum); - // Average Operand and formatting - const orderValueAvg = new IgrColumnSummaryDescription(); - orderValueAvg.field = "OrderValue"; - orderValueAvg.operand = SummaryOperand.Average; - orderValueAvg.formatOverride = new Intl.NumberFormat('en-EN', { style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0 }); - this.grid.summaryDescriptions.add(orderValueAvg); -} -``` - - - - - -```ts -import { IgcColumnGroupDescription } from 'igniteui-webcomponents-data-grids'; -import { IgcColumnSummaryDescription } from 'igniteui-webcomponents-data-grids' -import { SummaryOperand, SummaryCalculator, DefaultSummaryResult, IDataSource, ISummaryResult } from 'igniteui-webcomponents-core'; - -connectedCallback() { - - // Count Operand - const productCount = new IgcColumnSummaryDescription(); - productCount.field = "ProductName"; - productCount.operand = SummaryOperand.Count; - this.grid.summaryDescriptions.add(productCount); - // Min Operand with formatting - const priceMin = new IgcColumnSummaryDescription(); - priceMin.field = "BundlePrice"; - priceMin.operand = SummaryOperand.Min; - priceMin.formatOverride = new Intl.NumberFormat('en-EN', { style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0 }); - this.grid.summaryDescriptions.add(priceMin); - // Max Operand and formatting - const priceMax = new IgcColumnSummaryDescription(); - priceMax.field = "BundlePrice"; - priceMax.operand = SummaryOperand.Max; - priceMax.formatOverride = new Intl.NumberFormat('en-EN', { style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0 }); - this.grid.summaryDescriptions.add(priceMax); - // Sum Operand - const orderSum = new IgcColumnSummaryDescription(); - orderSum.field = "OrderItems"; - orderSum.operand = SummaryOperand.Sum; - this.grid.summaryDescriptions.add(orderSum); - // Average Operand and formatting - const orderValueAvg = new IgcColumnSummaryDescription(); - orderValueAvg.field = "OrderValue"; - orderValueAvg.operand = SummaryOperand.Average; - orderValueAvg.formatOverride = new Intl.NumberFormat('en-EN', { style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0 }); - this.grid.summaryDescriptions.add(orderValueAvg); -} -``` - - - - - -```razor - - - - - - - - -@code { - private IgbDataGrid grid; - private IgbDataGrid DataGridRef - { - get { return grid; } - set - { - grid = value; - this.OnDataGridRef(); - StateHasChanged(); - } - } - - private void OnDataGridRef() - { - var productCount = new ColumnSummaryDescription() { Field = "ProductName", Operand = SummaryOperand.Count }; - var priceMin = new ColumnSummaryDescription() { Field = "BundlePrice", Operand = SummaryOperand.Min }; - var priceMax = new ColumnSummaryDescription() { Field = "BundlePrice", Operand = SummaryOperand.Max }; - var orderSum = new ColumnSummaryDescription() { Field = "OrderItems", Operand = SummaryOperand.Sum }; - var orderValueAvg = new ColumnSummaryDescription() { Field = "OrderValue", Operand = SummaryOperand.Average }; - - this.DataGridRef.SummaryDescriptions.Add(productCount); - this.DataGridRef.SummaryDescriptions.Add(priceMin); - this.DataGridRef.SummaryDescriptions.Add(priceMax); - this.DataGridRef.SummaryDescriptions.Add(orderSum); - this.DataGridRef.SummaryDescriptions.Add(orderValueAvg); - } -} -``` - - - - -## カスタム集計 - -デフォルトの集計セットを拡張したい場合があります。たとえば、列の特定の値が表示される回数を表示する場合、カスタム集計が必要です。 - -以下のスニペットは、列に表示される 「USA」 値の数の Count を表示する方法を示します。 - - - -```ts -import { IgrProvideCalculatorEventArgs } from 'igniteui-react-core'; - -public onLoad() -{ - // ... - // Custom Operand with calculator - const countries = new IgrColumnSummaryDescription(); - countries.field = "Countries"; - countries.operand = SummaryOperand.Custom; - countries.provideCalculator = this.onProvideCalculator; //refer to class below - this.grid.summaryDescriptions.add(countries); - -} - -onProvideCalculator(s: IgrColumnSummaryDescription, e: IgrProvideCalculatorEventArgs) { - e.calculator = new CustomDomestic(); -} - -// Custom Calculator - calculates the count for all USA. -class CustomDomestic extends SummaryCalculator -{ - get displayName(): string { - return "USA"; - } - public usCountries: number; - - public beginCalculation(a: IDataSource, b: string): void { - super.beginCalculation(a,b); - this.usCountries = 0; - } - public endCalculation(): ISummaryResult { - return new DefaultSummaryResult(this.propertyName, SummaryOperand.Custom, this.usCountries) - } - public aggregate(a: any): void { - if (a.Countries === "USA") - { - this.usCountries++; - } - } -} -``` - - - - - -```ts -import { IgcProvideCalculatorEventArgs } from 'igniteui-webcomponents-core'; - -onLoad() { - - const countries = new IgcColumnSummaryDescription(); - countries.field = "Countries"; - countries.operand = SummaryOperand.Custom; - countries.provideCalculator = this.onProvideCalculator; //refer to class below - this.grid.summaryDescriptions.add(countries); - -} - -onProvideCalculator(s: IgcColumnSummaryDescription, e: IgcProvideCalculatorEventArgs) { - e.calculator = new CustomDomestic(); -} - -// Custom Calculator - calculates the count for all USA. -class CustomDomestic extends SummaryCalculator -{ - get displayName(): string { - return "USA"; - } - public usCountries: number; - - public beginCalculation(a: IDataSource, b: string): void { - super.beginCalculation(a,b); - this.usCountries = 0; - } - public endCalculation(): ISummaryResult { - return new DefaultSummaryResult(this.propertyName, SummaryOperand.Custom, this.usCountries) - } - public aggregate(a: any): void { - if (a.Countries === "USA") - { - this.usCountries++; - } - } -} -``` - - - - - -## API リファレンス - - - - - diff --git a/docs/xplat/src/content/jp/components/grids/data-grid/column-types.mdx b/docs/xplat/src/content/jp/components/grids/data-grid/column-types.mdx deleted file mode 100644 index d438d9058b..0000000000 --- a/docs/xplat/src/content/jp/components/grids/data-grid/column-types.mdx +++ /dev/null @@ -1,389 +0,0 @@ ---- -title: "{Platform} データ グリッド | 列タイプ | インフラジスティックス" -description: インフラジスティックスの {ProductName} データ テーブルとグリッドは、画像、テキスト、数値、日付列、テンプレート列などのコンテンツを表示する 4 つの列タイプをサポートします。{ProductName} チュートリアルを是非お試しください! -keywords: "{Platform} Table, Data Grid, column types, {ProductName}, Infragistics, {Platform} テーブル, データ グリッド, 列タイプ, インフラジスティックス" -mentionedTypes: [ "Grid","CellInfo", "TemplateCellInfo", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: "{CanonicalLinkToGridColumnTypes}" -_language: ja ---- -import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; -import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; -import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; -import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - - - - - - - - - -このコントロールは非推奨であり、[Grid](../data-grid.md) に置き換えられていることに注意してください。そのため、そのコントロールに移行することをお勧めします。これは新しい機能を受け取ることはなく、バグ修正は優先されません。コードベースをデータ グリッドに移行する際のヘルプや質問については、サポートにお問い合わせください。 - - - - -# {Platform} 列タイプ - -{ProductName} Data Table / Data Grid は、データを {Platform} データ グリッドに表示する方法を 5 つの列タイプとテンプレート列タイプから選択できます。サポートされている列タイプは、Text 列、Numeric 列、DateTime 列、Image 列、ComboBox および Template です。 - -各列は、 プロパティを、グリッドにバインドされた基になる データ ソースの項目の対応するプロパティの名前に設定することによって {Platform} データ グリッドにバインドします。 - -## {Platform} 列タイプの例 - - - - - - - -
- -## テキスト列 - -{Platform} データ グリッド は、関連付けられたセルに書式設定されたテキストを表示するために使用されます。これは、string 型のデータを表示するために使用されるデフォルトの列型です。 - -## 数値列 - - は、関連付けられたセルに書式設定された数値を表示するために使用され、セル内の小数点以下の桁数の制御と小数桁の表示を可能にします。 - -## DateTime 列 - - は、関連付けられたセルに Date オブジェクトを表示するために使用され、Date オブジェクトを適切に表示する方法をコントロールで制御できます。 - -## 画像列 - - はセル内に画像を表示するために使用され、その オプションを使用してセルの画像ストレッチカスタマイズのためのオプションを公開します。 - - オプションを設定して、イメージのリソースの種類を選択することもできます。 - -## コンボボックス列 - - は、エンドユーザーが単一の項目を選択できるドロップダウン リストを表示するために使用されます。 - -データ バインディングは、列の プロパティで複合オブジェクトの配列を使用して実現できます。 - - プロパティはユーザーが選択を行うときに表示する値を決定します。 - - プロパティは選択された基本データ項目のバインド値を決定します。オブジェクトのリストに複数のプロパティがある場合に必要です。 - -## テンプレート列 - - はセルテンプレートと共に使用されます。カスタム テンプレートを列のセルに適用することができます。これは、テンプレート列の イベントを処理することによって行われます。 - -`CellUpdating` イベントの引数は、イベントを発生させる と パラメーターを公開します。このイベント引数パラメーターは、列の関連付けられたセル内に配置される HTMLDivElement を返す プロパティを公開します。その後、この div に新しい要素を追加することができます。 - - は、 オブジェクトを取得するために使用できる プロパティも公開しています。このオブジェクトは、インデックス、基になるデータ項目、セルの外観など、セルと行に関する情報を公開します。 - -## スパークライン列 - -Sparkline コンポーネントを に埋め込み、より複雑なデータ構造を表示できます。 -この方法の詳細については、[列スパークライン](type-sparkline-table.md) トピックを参照してください。 - -## コード スニペット - -以下は、このトピックで説明されている各列の実装を示します。 - - - -```tsx - - - - - - - - - -``` - - - - - -```html - - - - - - - - - -``` - - - - - -```ts -import { IgcTemplateColumnComponent } from 'igniteui-webcomponents-data-grids'; -import { IgcTemplateCellInfo } from 'igniteui-webcomponents-data-grids'; -import { IgcTemplateCellUpdatingEventArgs } from 'igniteui-webcomponents-data-grids'; - -let grid1 = (document.getElementById("grid") as IgcDataGridComponent); -grid1.dataSource = data; - -let cityComboColumn = document.getElementById('city') as IgcComboBoxColumnComponent; - -if (cityComboColumn) - this.allCities = DataGridSharedData.getAllCities(); - cityComboColumn.dataSource = this.cityList; - cityComboColumn.textField = "name"; - -let TemplateColumn = (document.getElementById("Address") as IgcTemplateColumnComponent); -TemplateColumn.cellUpdating = onCellUpdating; - -onCellUpdating(s: IgcTemplateColumnComponent, e: IgcTemplateCellUpdatingEventArgs): void { - // alert("onAddressCellUpdating"); - const content = e.content as HTMLDivElement; - let span1: HTMLSpanElement | null = null; - let span2: HTMLSpanElement | null = null; - const info = e.cellInfo as IgcTemplateCellInfo ; - const item = info.rowItem; - - if (content.childElementCount === 0) { - - span1 = document.createElement("span"); - span2 = document.createElement("span"); - - content.style.verticalAlign = "top"; - content.style.marginTop = "15px"; - content.style.lineHeight = "normal"; - content.style.display = "inline-grid"; - content.style.fontFamily = "Verdana"; - content.style.fontSize = "13px"; - - content.appendChild(span1); - content.appendChild(span2); - } - else { - span1 = content.children[0] as HTMLSpanElement; - span2 = content.children[1] as HTMLSpanElement; - } - - if (span1 && span2) { - span1.textContent = item.Street; - span2.textContent = item.City + ", " + item.Country; - } -} -``` - - - - - -```ts -import { IgrTemplateCellUpdatingEventArgs } from 'igniteui-react-data-grids'; -import { IgrTemplateCellInfo } from 'igniteui-react-data-grids'; -import { IgrTemplateColumn } from 'igniteui-react-data-grids'; -import { IgrComboBoxColumn } from 'igniteui-react-data-grids'; - -public onAddressCellUpdating(s: IgrTemplateColumn, e: IgrTemplateCellUpdatingEventArgs) { - const content = e.content as HTMLDivElement; - let span1: HTMLSpanElement | null = null; - let span2: HTMLSpanElement | null = null; - const info = e.cellInfo as IgrTemplateCellInfo; - const item = info.rowItem; - - if (content.childElementCount === 0) { - - span1 = document.createElement("span"); - span2 = document.createElement("span"); - - content.style.verticalAlign = "top"; - content.style.marginTop = "15px"; - content.style.lineHeight = "normal"; - content.style.display = "inline-grid"; - content.style.fontFamily = "Verdana"; - content.style.fontSize = "13px"; - - content.appendChild(span1); - content.appendChild(span2); - } - else { - span1 = content.children[0] as HTMLSpanElement; - span2 = content.children[1] as HTMLSpanElement; - } - - if (span1 && span2) { - span1.textContent = item.Street; - span2.textContent = item.City + ", " + item.Country; - } -} -``` - - - -以下は、上記の列で使用するサンプルデータ ソースです。 - -```ts -const maleNames: string[] = ["Kyle", "Oscar", "Ralph", "Torrey", "Bill", "Frank", "Howard", "Jack", "Larry", "Pete", "Steve", "Vince", "Mark", "Alex", "Max", "Brian", "Chris", "Andrew", "Martin", "Mike", "Steve", "Glenn", "Bruce"]; -const femaleNames: string[] = ["Gina", "Irene", "Katie", "Brenda", "Casey", "Fiona", "Holly", "Kate", "Liz", "Pamela", "Nelly", "Marisa", "Monica", "Anna", "Jessica", "Sofia", "Isabella", "Margo", "Jane", "Audrey", "Sally", "Melanie", "Greta", "Aurora", "Sally"]; -const lastNames: string[] = ["Adams", "Crowley", "Ellis", "Martinez", "Irvine", "Maxwell", "Clark", "Owens", "Rooney", "Lincoln", "Thomas", "Spacey", "Betts", "King", "Newton", "Fitzgerald", "Holmes", "Jefferson", "Landry", "Newberry", "Perez", "Spencer", "Starr", "Carter", "Edwards", "Stark", "Johnson", "Fitz", "Chief", "Blanc", "Perry", "Stone", "Williams", "Lane", "Jobs", "Adama", "Power", "Tesla"]; -const genders: string[] = ["male", "female"]; -const cities: string[] = ["New York, New York", "Columbus, Ohio", "Los Angeles, California", "Orlando, Florida", "New Orleans, Louisiana", "Las Vegas, Nevada", "Atlanta, Georgia"]; -const roadSuffixes: string[] = ["Road", "Street", "Court", "Way"]; -const roadNames: string[] = ["Alpha", "Beta", "Charlie", "Delta", "Echo", "Foxtrot", "Golf", "Hotel", "India", "Julia", "Kilo", "Lima", "Mike", "November"]; - -const people: any[] = []; - -let maleCount: number = 0; -let femaleCount: number = 0; -for (let i = 0; i < 250; i++) { - - const age: number = Math.round(this.getRandomNumber(20, 40)); - const today: Date = new Date(); - const gender: string = this.getRandomItem(genders); - - let firstName: string; - const lastName: string = this.getRandomItem(lastNames); - - const propertyNum: string = Math.round(this.getRandomNumber(1, 300)).toString(); - const cityState: string = this.getRandomItem(cities); - const road: string = this.getRandomItem(roadNames) + " " + this.getRandomItem(roadSuffixes); - - let photoPath: string; - - if (gender === "male") { - firstName = this.getRandomItem(maleNames); - maleCount++; - - if (maleCount > 26) { - maleCount = 0; - } - - if (maleCount < 10) { - photoPath = '/assets/GUY0' + maleCount.toString() + '.png'; - } - else { - photoPath = '/assets/GUY' + maleCount.toString() + '.png'; - } - } - else { - firstName = this.getRandomItem(femaleNames); - femaleCount++; - - if (femaleCount > 24) { - femaleCount = 0; - } - - if (femaleCount < 10) { - photoPath = '/assets/GIRL0' + femaleCount.toString() + '.png'; - } - else { - photoPath = '/assets/GIRL' + femaleCount.toString() + '.png'; - } - } - - const path: string = './assets/GIRL01.png'; - - const birthday: Date = new Date(today.getFullYear() - age, Math.round(this.getRandomNumber(1, 12)), Math.round(this.getRandomNumber(1, 28))); - - people.push({ - Address: propertyNum + " " + road + ", " + cityState, - Age: age, - Birthday: birthday, - City: cityState, - FirstName: firstName, - LastName: lastName, - Photo: path, - Street: propertyNum + " " + road + "," - }); -} - -this.data = people; - -public getRandomNumber(min: number, max: number): number { - return min + Math.random() * (max - min); -} - -public getRandomItem(array: any[]): any { - const index = Math.round(this.getRandomNumber(0, array.length - 1)); - return array[index]; -} -``` - - - -```razor - - - - - - - - - - -// In JS file: -function onUpdatingAddressColumn(grid, args) { - let content = args.content; - let info = args.cellInfo; - let item = info.rowItem; - let span1 = null; - let span2 = null; - - if (content.childElementCount === 0) { - content.style.fontFamily = "Verdana"; - content.style.fontSize = "13px"; - content.style.verticalAlign = "center"; - content.style.lineHeight = "normal"; - content.style.display = "flex"; - content.style.flexDirection = "column"; - content.style.justifyContent = "center"; - content.style.height = "100%"; - content.style.width = "100%"; - content.style.color = "rgb(24, 29, 31)"; - // stacking above elements in the content of grid's cell - span1 = document.createElement("span"); - span2 = document.createElement("span"); - content.appendChild(span1); - content.appendChild(span2); - } - else { - span1 = content.children[0]; - span2 = content.children[1]; - } - - if (span1 && span2) { - // updating elements in the content of grid's cell - span1.textContent = item.Street; - span2.textContent = item.City + ", " + item.Country; - } -} - -igRegisterScript("onUpdatingAddressColumn", onUpdatingAddressColumn, false); -``` - - - - -## API リファレンス - - - - - - - - - diff --git a/docs/xplat/src/content/jp/components/grids/data-grid/horizontal-scrolling.mdx b/docs/xplat/src/content/jp/components/grids/data-grid/horizontal-scrolling.mdx deleted file mode 100644 index 0bb9569748..0000000000 --- a/docs/xplat/src/content/jp/components/grids/data-grid/horizontal-scrolling.mdx +++ /dev/null @@ -1,144 +0,0 @@ ---- -title: "{Platform} データ グリッド | 水平方向スクロール | インフラジスティックス" -description: Infragistics のグリッド コンポーネントの水平方向スクロール機能を使用して、列をシームレスにスクロールします。{ProductName} テーブルのサンプルを是非お試しください! -keywords: "{Platform} Table, Data Grid, column, horizontal, scrolling, {ProductName}, Infragistics, {Platform} テーブル, データ グリッド, 列, 水平, スクロール, インフラジスティックス" -mentionedTypes: ["Grid", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: "{CanonicalLinkToGridMain}" -_language: ja ---- -import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; -import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; -import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; -import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - - - - - - - - - -このコントロールは非推奨であり、[Grid](../data-grid.md) に置き換えられていることに注意してください。そのため、そのコントロールに移行することをお勧めします。これは新しい機能を受け取ることはなく、バグ修正は優先されません。コードベースをデータ グリッドに移行する際のヘルプや質問については、サポートにお問い合わせください。 - - - - -# {Platform} 水平方向のスクロール - -{ProductName} Data Table / Data Grid は、{Platform} データ グリッドの幅より大きい列の合計幅を設定することにより Horizontal Scrolling を有効にできます。 - -## {Platform} 水平方向のスクロールの例 - - - - - - - -
- -## デフォルト列幅の設定 - - - -```tsx - -``` - - - - - -```html - - -``` - - - - - -```razor - -``` - - - -## 各列の幅の設定 - - - -```tsx - - - - - - - - - - -``` - - - - - -```html - - - - - - - - - - -``` - - - - - -```razor - - - - - - - - - - -``` - - - - -## API リファレンス - - diff --git a/docs/xplat/src/content/jp/components/grids/data-grid/live-data.mdx b/docs/xplat/src/content/jp/components/grids/data-grid/live-data.mdx deleted file mode 100644 index 36343b87f5..0000000000 --- a/docs/xplat/src/content/jp/components/grids/data-grid/live-data.mdx +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: "{Platform} データ グリッド | データ アニメーション | データ バインディング | インフラジスティックス" -description: Infragistics のテーブルを使用して、1 秒あたり数千の更新を処理します。{ProductName} テーブルのサンプルを是非お試しください! -keywords: "{Platform} Table, Data Grid, live data updates, {ProductName}, Infragistics, data binding, {Platform} テーブル, データ グリッド, ライブ データの更新, データ バインディング, インフラジスティックス" -mentionedTypes: ["Implementation.Grid", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: "{CanonicalLinkToGridMain}" -_language: ja ---- -import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; -import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; -import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; -import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - - - - - - - - - -このコントロールは非推奨であり、[Grid](../data-grid.md) に置き換えられていることに注意してください。そのため、そのコントロールに移行することをお勧めします。これは新しい機能を受け取ることはなく、バグ修正は優先されません。コードベースをデータ グリッドに移行する際のヘルプや質問については、サポートにお問い合わせください。 - - - - -# {Platform} ライブ データのバインディング - -{ProductName} Data Table / Data Grid は、1 秒間に何千もの更新を処理しながら、ユーザーはグリッドをインタラクティブに操作できます。以下のサンプルを使用して、データ更新の間隔とデータ更新の量を調整することにより、さまざまなライブ データシ ナリオでのグリッド処理のパフォーマンスを確認できます。 - -## {Platform} ライブ データのバインディングの例 - - - - - -## API リファレンス - - - - - diff --git a/docs/xplat/src/content/jp/components/grids/data-grid/load-save-layout.mdx b/docs/xplat/src/content/jp/components/grids/data-grid/load-save-layout.mdx deleted file mode 100644 index 4299c61f4b..0000000000 --- a/docs/xplat/src/content/jp/components/grids/data-grid/load-save-layout.mdx +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: "{Platform} データ グリッド | リアルタイム データ グリッドとテーブル | 読み込みと保存 | インフラジスティックス" -description: ユーザーが作成したレイアウトの読み込みと保存をサポートするインフラジスティックスの {ProductName} データ テーブルとグリッドをお試しください。 -keywords: "{Platform} Table, Data Grid, cell activation, {ProductName}, Infragistics, {Platform} テーブル, データ グリッド, セルのアクティブ化, インフラジスティックス" -mentionedTypes: ["Grid", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: "{CanonicalLinkToGridMain}" -_language: ja ---- -import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; -import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; -import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; -import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - - - - - - - - - -このコントロールは非推奨であり、[Grid](../data-grid.md) に置き換えられていることに注意してください。そのため、そのコントロールに移行することをお勧めします。これは新しい機能を受け取ることはなく、バグ修正は優先されません。コードベースをデータ グリッドに移行する際のヘルプや質問については、サポートにお問い合わせください。 - - - - -# {Platform} グリッド レイアウトの読み込みと保存 - -{ProductName} データ テーブル / データ グリッドは、グリッド レイアウトの読み込みと保存をサポートしています。これは、グリッドの メソッドと メソッドを呼び出すことによって実行されます。これらの機能は、エンドユーザーが列を移動、ソート、グループ化でき、グリッドの状態を保持し、レイアウトを復元して後で作業を再開できるようにする場合に役立ちます。 - -## {Platform} グリッド レイアウトの読み込みと保存の例 - - - - - - - -
- -## サポートされる機能 - -グリッドは、次の機能の保存をサポートしています: - -- [列の表示状態](column-chooser.md) -- [列のピン固定](column-pinning.md) -- [列の移動](column-moving.md) -- [列のサイズ変更](column-resizing.md) -- [行グループ](row-grouping.md) -- [列のソート](column-sorting.md) -- [列フィルタリング](column-filtering.md) - - -## API リファレンス - - diff --git a/docs/xplat/src/content/jp/components/grids/data-grid/local-data.mdx b/docs/xplat/src/content/jp/components/grids/data-grid/local-data.mdx deleted file mode 100644 index e52a6b84ef..0000000000 --- a/docs/xplat/src/content/jp/components/grids/data-grid/local-data.mdx +++ /dev/null @@ -1,235 +0,0 @@ ---- -title: "{Platform} データ グリッド | ローカル データ ソースのバインディング | インフラジスティックス" -description: Infragistics のグリッド コントロールを使用してデータの配列にバインドします。{ProductName} を使用したデータの表示方法について説明します。 -keywords: "{Platform} Table, Data Grid, binding to data, {ProductName}, Infragistics, data binding, {Platform} テーブル, データ グリッド, データへのバインド, データ バインディング, インフラジスティックス" -mentionedTypes: ["Grid", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: "{CanonicalLinkToGridMain}" -_language: ja ---- -import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; -import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; -import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; -import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - - - - -このコントロールは非推奨であり、[Grid](../data-grid.md) に置き換えられていることに注意してください。そのため、そのコントロールに移行することをお勧めします。これは新しい機能を受け取ることはなく、バグ修正は優先されません。コードベースをデータ グリッドに移行する際のヘルプや質問については、サポートにお問い合わせください。 - - - -# {Platform} ローカル データのバインディング - -次のサンプルは、データの配列への {ProductName} Data Table / Data Grid データ バインディングを示します。 - -## {Platform} ローカル データのバインディングの例 - - - -## コード スニペット - - - -```tsx - - - - - - - - - - - - -``` - - - -```ts -public data: any[]; -public initData() { - const names: string[] = [ - "Intel CPU", "AMD CPU", - "Intel Motherboard", "AMD Motherboard", "Nvidia Motherboard", - "Nvidia GPU", "Gigabyte GPU", "Asus GPU", "AMD GPU", "MSI GPU", - "Corsair Memory", "Patriot Memory", "Skill Memory", - "Samsung HDD", "WD HDD", "Seagate HDD", "Intel HDD", "Asus HDD", - "Samsung SSD", "WD SSD", "Seagate SSD", "Intel SSD", "Asus SSD", - "Samsung Monitor", "Asus Monitor", "LG Monitor", "HP Monitor" ]; - - const countries: string[] = ["USA", "UK", "France", "Canada", "Poland", - "Denmark", "Croatia", "Australia", "Seychelles", - "Sweden", "Germany", "Japan", "Ireland", - "Barbados", "Jamaica", "Cuba", "Spain",]; - const status: string[] = [ "Packing", "Shipped", "Delivered"] - const sales: any[] = []; - - for (let i = 0; i < 200; i++) { - const price = this.getRandomNumber(10000, 90000) / 100; - const items = this.getRandomNumber(4, 30); - const value = Math.round(price * items); - const margin = this.getRandomNumber(2, 5); - const profit = Math.round((price * margin / 100) * items); - const country = this.getRandomItem(countries); - sales.push({ - Country: country, - CountryFlag: this.getCountryFlag(country), - Margin: margin, - OrderDate: this.getRandomDate(), - OrderItems: items, - OrderValue: value, - ProductID: 1001 + i, - ProductName: this.getRandomItem(names), - ProductPrice: price, - Profit: Math.round(profit), - Status: this.getRandomItem(status), - }); - } - - this.data = sales; - } -``` - - - -```razor - - - - - - - - - - - - - -@code { - - private List DataSource; - private Random Rand = new Random(); - - protected override void OnInitialized() - { - base.OnInitialized(); - - GenerateData(); - } - - public void GenerateData() - { - string[] names = new string[] { - "Intel CPU", "AMD CPU", - "Intel Motherboard", "AMD Motherboard", "Nvidia Motherboard", - "Nvidia GPU", "Gigabyte GPU", "Asus GPU", "AMD GPU", "MSI GPU", - "Corsair Memory", "Patriot Memory", "Skill Memory", - "Samsung HDD", "WD HDD", "Seagate HDD", "Intel HDD", "Asus HDD", - "Samsung SSD", "WD SSD", "Seagate SSD", "Intel SSD", "Asus SSD", - "Samsung Monitor", "Asus Monitor", "LG Monitor", "HP Monitor" }; - - string[] countries = new string[] { - "USA", "UK", "France", "Canada", "Poland", - "Denmark", "Croatia", "Australia", "Seychelles", - "Sweden", "Germany", "Japan", "Ireland", - "Barbados", "Jamaica", "Cuba", "Spain", }; - string[] status = new string[] { "Packing", "Shipped", "Delivered" }; - - var sales = new List(); - - for (var i = 0; i < 200; i++) - { - var price = GetRandomNumber(10000, 90000) / 100; - var items = GetRandomNumber(4, 30); - var value = Math.Round(price * items); - var margin = GetRandomNumber(2, 5); - var profit = Math.Round((price * margin / 100) * items); - var country = GetRandomItem(countries); - - var item = new SaleInfo() - { - Country = country, - CountryFlag = GetCountryFlag(country), - Margin = margin, - OrderDate = GetRandomDate(), - OrderItems = items, - OrderValue = value, - ProductID = 1001 + i, - ProductName = GetRandomItem(names), - ProductPrice = price, - Profit = Math.Round(profit), - Status = GetRandomItem(status) - }; - sales.Add(item); - } - - this.DataSource = sales; - } - - public double GetRandomNumber(double min, double max) - { - return Math.Round(min + (Rand.NextDouble() * (max - min))); - } - - public string GetRandomItem(string[] array) - { - var index = (int)Math.Round(GetRandomNumber(0, array.Length - 1)); - return array[index]; - } - - public DateTime GetRandomDate() { - var today = new DateTime(); - var year = today.Year; - var month = this.GetRandomNumber(1, 9); - var day = this.GetRandomNumber(10, 27); - return new DateTime(year, (int)month, (int)day); - } - - public string GetCountryFlag(string country) - { - var flag = "https://static.infragistics.com/xplatform/images/flags/" + country + ".png"; - return flag; - } - - public class SaleInfo - { - public string Status { get; set; } - public string ProductName { get; set; } - public string CountryFlag { get; set; } - public string Country { get; set; } - public DateTime OrderDate { get; set; } - public double Profit { get; set; } - public double ProductPrice { get; set; } - public double ProductID { get; set; } - public double OrderValue { get; set; } - public double OrderItems { get; set; } - public double Margin { get; set; } - } -} -``` - - - - - -## API リファレンス - - diff --git a/docs/xplat/src/content/jp/components/grids/data-grid/localization.mdx b/docs/xplat/src/content/jp/components/grids/data-grid/localization.mdx deleted file mode 100644 index aaac417ba9..0000000000 --- a/docs/xplat/src/content/jp/components/grids/data-grid/localization.mdx +++ /dev/null @@ -1,185 +0,0 @@ ---- -title: "{Platform} データ グリッド | リアルタイム データ グリッドとテーブル | ローカリゼーション | インフラジスティックス" -description: ローカリゼーションをサポートするインフラジスティックスの {ProductName} データ テーブルとグリッドを試しましょう。{ProductName} テーブルのチュートリアルをご覧ください。 -keywords: "{Platform} テーブル、データ グリッド、セル アクセシビリティ、{ProductName}、インフラジスティック" -mentionedTypes: ["Grid", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: "{CanonicalLinkToGridMain}" -_language: ja ---- -import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; -import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; -import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; -import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - - - - - - - - - -このコントロールは非推奨であり、[Grid](../data-grid.md) に置き換えられていることに注意してください。そのため、そのコントロールに移行することをお勧めします。これは新しい機能を受け取ることはなく、バグ修正は優先されません。コードベースをデータ グリッドに移行する際のヘルプや質問については、サポートにお問い合わせください。 - - - - -# {Platform} グリッドのローカリゼーション - -{ProductName} データ テーブル / データ グリッドは、列オプションのポップアップと要約に固有のリソース文字列のローカライズをサポートします。これは、データの翻訳に使用することを意図したものではないことに注意してください。 - - - - - -データ グリッドには、列オプションに関連付けられた文字列を割り当てるための が含まれています。グリッドの プロパティには、集計に必要なリソース文字列を割り当てるためのこのメソッドもあります。 - - - - -## {Platform} グリッド ローカリゼーションの例 - - - - - - -
- -## リソース文字列 - -これは、グリッドをローカライズするための文字列の完全なリストです。 - -### 列オプションの文字列 - -- Apply -- Cancel -- Clear_Column_Filter -- Column_Move -- Column_Move_Left -- Column_Move_Right -- Column_Pin -- Column_Pin_Left -- Column_Pin_Right -- Column_Sort -- Column_Sort_Ascending -- Column_Sort_Descending -- Filter_Columns_List -- Search -- Select_All -- ComparisonOperator_Bottom -- ComparisonOperator_BottomPercentile -- ComparisonOperator_Contains -- ComparisonOperator_DoesNotContain -- ComparisonOperator_DoesNotEndWith -- ComparisonOperator_DoesNotMatch -- ComparisonOperator_DoesNotStartWith -- ComparisonOperator_Empty -- ComparisonOperator_EndsWith -- ComparisonOperator_Equals -- ComparisonOperator_False -- ComparisonOperator_GreaterThan -- ComparisonOperator_GreaterThanOrEqualTo -- ComparisonOperator_LastMonth -- ComparisonOperator_LastQuarter -- ComparisonOperator_LastWeek -- ComparisonOperator_LastYear -- ComparisonOperator_LessThan -- ComparisonOperator_LessThanOrEqualTo -- ComparisonOperator_NextMonth -- ComparisonOperator_NextQuarter -- ComparisonOperator_NextWeek -- ComparisonOperator_NextYear -- ComparisonOperator_NotEmpty -- ComparisonOperator_NotEquals -- ComparisonOperator_StartsWith -- ComparisonOperator_ThisMonth -- ComparisonOperator_ThisQuarter -- ComparisonOperator_ThisWeek -- ComparisonOperator_ThisYear -- ComparisonOperator_Today -- ComparisonOperator_Tomorrow -- ComparisonOperator_Top -- ComparisonOperator_TopPercentile -- ComparisonOperator_True -- ComparisonOperator_Yesterday -- Column_Options_Summary_Average -- Column_Options_Summary_Count -- Column_Options_Summary_Maximum -- Column_Options_Summary_Minimum -- Column_Options_Summary_Sum -- Column_Options_Summaries - -### 集計の文字列 - -- DataSource_Summary_Avg -- DataSource_Summary_Count -- DataSource_Summary_Max -- DataSource_Summary_Min -- DataSource_Summary_Sum - - - - - -### 日時列の文字列 - -- January_Full -- January_Short -- February_Full -- February_Short -- March_Full -- March_Short -- April_Full -- April_Short -- May_Full -- May_Short -- June_Full -- June_Short -- July_Full -- July_Short -- August_Full -- August_Short -- September_Full -- September_Short -- October_Full -- October_Short -- November_Full -- November_Short -- December_Full -- December_Short -- Monday_Full -- Monday_Short -- Monday_Single -- Thursday_Single -- Today -- Tuesday_Full -- Tuesday_Short -- Tuesday_Single -- Wednesday_Full -- Wednesday_Short -- Wednesday_Single -- Thursday_Full -- Thursday_Short -- Friday_Full -- Friday_Short -- Friday_Single -- Saturday_Full -- Saturday_Short -- Saturday_Single -- Sunday_Full -- Sunday_Short -- Sunday_Single - -### コンボボックス列の文字列 - -- NoMatches - - - - -## API リファレンス - - - diff --git a/docs/xplat/src/content/jp/components/grids/data-grid/overview.mdx b/docs/xplat/src/content/jp/components/grids/data-grid/overview.mdx deleted file mode 100644 index 59f8aca0d1..0000000000 --- a/docs/xplat/src/content/jp/components/grids/data-grid/overview.mdx +++ /dev/null @@ -1,552 +0,0 @@ ---- -title: "{Platform} データ グリッド コンポーネント | リアルタイム {Platform} テーブル | インフラジスティックス" -description: インフラジスティックスの {Platform} グリッド コンポーネントは、高速でリアルタイムの React データ グリッドを作成します。{ProductName} を使用したデータの表示方法について説明します。 -keywords: "{Platform} Table, Data Grid, overview, {ProductName}, data binding, Infragistics, {Platform} テーブル, データ グリッド, 概要, データ バインディング, インフラジスティックス" -mentionedTypes: ["Grid", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: "{CanonicalLinkToGridMain}" -_language: ja ---- -import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; -import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; -import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; -import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - - - - -このコントロールは非推奨であり、[Grid](../data-grid.md) に置き換えられていることに注意してください。そのため、そのコントロールに移行することをお勧めします。これは新しい機能を受け取ることはなく、バグ修正は優先されません。コードベースをデータ グリッドに移行する際のヘルプや質問については、サポートにお問い合わせください。 - - - -# {Platform} Data Grid 概要 - -{ProductName} Data Table / Data Grid は、表形式の {Platform} コンポーネントでコーディングや設定をほとんど行わずにデータをすばやくバインドして表示できます。{Platform} の機能には、フィルタリング、ソート、テンプレート、行選択、行のグループ化、行の固定、および列移動があります。{Platform} データ テーブルは、ライブ ストリーミング データ用に最適化されており、無制限のデータセットサイズを行数または列数で処理することができます。 - -## {Platform} Data Grid の例 - -このデモは、グリッドで利用可能な機能のいくつかを実装しています: -フィルタリング、グループ化、列のピン固定/ピン固定解除、列の再配置、ソート、および集計。 - - - -
- -## 作業の開始 - -### 依存関係 - - - -IgniteUI.Blazor パッケージの追加については、以下のトピックを参照してください。 -- [作業の開始](../../general-getting-started.md) -- [NuGet パッケージの追加](../../general-nuget-feed.md) - -以下の名前空間を追加してコントロールの実装を開始できます。 - -```razor -@using IgniteUI.Blazor.Controls -``` - - - - - -{Platform} Grid のパッケージをインストールするときに core パッケージもインストールする必要があります。 - -```cmd -npm install --save {PackageCore} -npm install --save {PackageGrids} -npm install --save {PackageInputs} -``` - - - -### モジュールの要件 - -`Grid` を作成するには、以下のモジュールが必要です。 - - - - -```razor -// in Program.cs file - -builder.Services.AddIgniteUIBlazor(typeof(IgbDataGridModule)); -``` - - - - - - - -```ts -import { IgrDataGridModule } from 'igniteui-react-data-grids'; -import { IgrDataGrid } from 'igniteui-react-data-grids'; - -IgrDataGridModule.register(); -``` - - - - - - - -```ts -import { ModuleManager } from 'igniteui-webcomponents-core'; -import { IgcDataGridModule } from 'igniteui-webcomponents-data-grids'; -import { IgcDataGridComponent } from 'igniteui-webcomponents-data-grids'; - -ModuleManager.register( - IgcDataGridModule -); -``` - - - - -
- -### オプションのモジュール - -上記のオプションの `Grid` 機能を使用するには、以下のモジュールが必要です。 - - - -```razor -// in Program.cs file - -builder.Services.AddIgniteUIBlazor( - typeof(IgbDataGridModule), - typeof(IgbDataGridToolbarModule), - typeof(IgbSparklineModule) -); -``` - - - - - -```ts -import { IgrGridColumnOptionsModule } from 'igniteui-react-data-grids'; -import { IgrDataGridToolbarModule } from "igniteui-react-data-grids"; -import { IgrSparklineModule } from 'igniteui-react-charts'; - -IgrGridColumnOptionsModule.register(); -IgrDataGridToolbarModule.register(); -IgrSparklineModule.register(); -``` - - - - - -```ts -import { IgcGridColumnOptionsModule } from 'igniteui-webcomponents-data-grids'; -import { IgcGridColumnOptionsComponent } from 'igniteui-webcomponents-data-grids'; -import { IgcDataGridToolbarModule } from 'igniteui-webcomponents-data-grids'; -import { IgcDataGridToolbarComponent } from 'igniteui-webcomponents-data-grids'; -import { IgcSparklineModule } from 'igniteui-webcomponents-charts'; -import { IgcSparklineComponent } from 'igniteui-webcomponents-charts'; - -ModuleManager.register( - IgcGridColumnOptionsModule, - IgcDataGridToolbarModule, - IgcSparklineModule -); -``` - - - -
- -### サンプル データ ソース -{Platform} グリッド モジュールがインポートされました。以下のステップはローカル データにバインドするグリッドの基本的な設定です。 - -```ts - this.data = [{ - Discontinued: false, - OrderDate: new Date("2012-02-12"), - ProductID: 1, - ProductName: "Chai", - QuantityPerUnit: "10 boxes x 20 bags", - ReorderLevel: 10, - UnitPrice: 18.0000, - UnitsInStock: 39 - }, { - Discontinued: false, - OrderDate: new Date("2003-03-17"), - ProductID: 2, - ProductName: "Chang", - QuantityPerUnit: "24 - 12 oz bottles", - ReorderLevel: 25, - UnitPrice: 19.0000, - UnitsInStock: 17 - }, { - Discontinued: false, - OrderDate: new Date("2006-03-17"), - ProductID: 3, - ProductName: "Aniseed Syrup", - QuantityPerUnit: "12 - 550 ml bottles", - ReorderLevel: 25, - UnitPrice: 10.0000, - UnitsInStock: 13 - }, { - Discontinued: false, - OrderDate: new Date("2016-03-17"), - ProductID: 4, - ProductName: "Chef Antony Cajun Seasoning", - QuantityPerUnit: "48 - 6 oz jars", - ReorderLevel: 0, - UnitPrice: 22.0000, - UnitsInStock: 53 - }, { - Discontinued: true, - OrderDate: new Date("2011-11-11"), - ProductID: 5, - ProductName: "Chef Antony Gumbo Mix", - QuantityPerUnit: "36 boxes", - ReorderLevel: 0, - UnitPrice: 21.3500, - UnitsInStock: 0 - }]; -``` - - - -```razor -@code { - - public List DataSource { get; set;} - Random Rand = new Random(); - - protected override void OnInitialized() - { - GenerateData(); - } - - public void GenerateData() - { - string[] names = new string[] { - "Intel CPU", "AMD CPU", - "Intel Motherboard", "AMD Motherboard", "Nvidia Motherboard", - "Nvidia GPU", "Gigabyte GPU", "Asus GPU", "AMD GPU", "MSI GPU", - "Corsair Memory", "Patriot Memory", "Skill Memory", - "Samsung HDD", "WD HDD", "Seagate HDD", "Intel HDD", "Asus HDD", - "Samsung SSD", "WD SSD", "Seagate SSD", "Intel SSD", "Asus SSD", - "Samsung Monitor", "Asus Monitor", "LG Monitor", "HP Monitor" }; - - string[] countries = new string[] { - "USA", "UK", "France", "Canada", "Poland", - "Denmark", "Croatia", "Australia", "Seychelles", - "Sweden", "Germany", "Japan", "Ireland", - "Barbados", "Jamaica", "Cuba", "Spain", }; - string[] status = new string[] { "Packing", "Shipped", "Delivered" }; - - var sales = new List(); - - for (var i = 0; i < 200; i++) - { - var price = GetRandomNumber(10000, 90000) / 100; - var items = GetRandomNumber(4, 30); - var value = Math.Round(price * items); - var margin = GetRandomNumber(2, 5); - var profit = Math.Round((price * margin / 100) * items); - var country = GetRandomItem(countries); - - var item = new SaleInfo() - { - Country = country, - CountryFlag = GetCountryFlag(country), - Margin = margin, - OrderDate = GetRandomDate(), - OrderItems = items, - OrderValue = value, - ProductID = 1001 + i, - ProductName = GetRandomItem(names), - ProductPrice = price, - Profit = Math.Round(profit), - Status = GetRandomItem(status) - }; - sales.Add(item); - } - - this.DataSource = sales; - } - - public double GetRandomNumber(double min, double max) - { - return Math.Round(min + (Rand.NextDouble() * (max - min))); - } - - public string GetRandomItem(string[] array) - { - var index = (int)Math.Round(GetRandomNumber(0, array.Length - 1)); - return array[index]; - } - - public DateTime GetRandomDate() { - var today = new DateTime(); - var year = today.Year; - var month = this.GetRandomNumber(1, 9); - var day = this.GetRandomNumber(10, 27); - return new DateTime(year, (int)month, (int)day); - } - - public string GetCountryFlag(string country) - { - var flag = "https://static.infragistics.com/xplatform/images/flags/" + country + ".png"; - return flag; - } - - public class SaleInfo - { - public string? Status { get; set; } - public string? ProductName { get; set; } - public string? CountryFlag { get; set; } - public string? Country { get; set; } - public DateTime OrderDate { get; set; } - public double Profit { get; set; } - public double ProductPrice { get; set; } - public double ProductID { get; set; } - public double OrderValue { get; set; } - public double OrderItems { get; set; } - public double Margin { get; set; } - } -} -``` - - - -### 列の自動生成 -以下のコードは、{Platform} データ グリッドを上記のローカルデータにバインドする方法を示しています。 - - - -```tsx - -``` - - - - - -```html - - -``` - - - - - -```ts -let grid1 = (document.getElementById("grid") as IgcDataGridComponent); -grid1.dataSource = data; -``` - - - - - -```razor - -``` - - - -### 列の手動定義 - - - -```tsx - - - - - - - -``` - - - - - -```html - - - - - - - -``` - - - - - -```ts -let grid1 = (document.getElementById("grid") as IgcDataGridComponent); -grid1.dataSource = data; -``` - - - - - -```razor - - - - - - - -``` - - - -### 列のスタイル設定 -次のコードは、提供された列のプロパティを使用して特定の列のスタイルを設定する方法を示しています。 - - - -```tsx - -``` - - - - - -```html - -``` - - - - - -```razor - -``` - - - - - -### ビデオ チュートリアル - -Blazor データ グリッドの作成について詳しくは、このチュートリアル ビデオ (英語) をご覧ください。 - - - - - -## その他のリソース - -- [アクセシビリティの遵守](accessibility.md) -- [セルのアクティブ化](cell-activation.md) -- [グリッド編集](cell-editing.md) -- [セル選択](cell-selection.md) -- [列アニメーション](column-animation.md) -- [列の選択](column-chooser.md) -- [列フィルタリング](column-filtering.md) -- [列の移動](column-moving.md) -- [列のオプション](column-options.md) -- [列サイズの変更](column-resizing.md) -- [列の並ソート](column-sorting.md) -- [列タイプ](column-types.md) -- [パフォーマンス](performance.md) -- [行のピン固定](row-pinning.md) -- [行グループ](row-grouping.md) -- [行のハイライト表示](row-highlighting.md) - - - - - - - - - -## API リファレンス - - diff --git a/docs/xplat/src/content/jp/components/grids/data-grid/performance.mdx b/docs/xplat/src/content/jp/components/grids/data-grid/performance.mdx deleted file mode 100644 index 5d60bc1394..0000000000 --- a/docs/xplat/src/content/jp/components/grids/data-grid/performance.mdx +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: "{Platform} データ グリッド | パフォーマンス | インフラジスティックス" -description: インフラジスティックスの {Platform} テーブルは、高パフォーマンスのデータ シナリオに使用されています。完全仮想化を使用して、無限の数の行と列を無制限にスクロールできます。{ProductName} テーブル チュートリアルを是非お試しください! -keywords: "{Platform} Table, Data Grid, performance, {ProductName}, Infragistics, data binding, {Platform} テーブル, データ グリッド, パフォーマンス, データ バインディング, インフラジスティックス" -mentionedTypes: ["Grid", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: "{CanonicalLinkToGridMain}" -_language: ja ---- -import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; -import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; -import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; -import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - - - - -このコントロールは非推奨であり、[Grid](../data-grid.md) に置き換えられていることに注意してください。そのため、そのコントロールに移行することをお勧めします。これは新しい機能を受け取ることはなく、バグ修正は優先されません。コードベースをデータ グリッドに移行する際のヘルプや質問については、サポートにお問い合わせください。 - - - -# {Platform} ライブ データの高パフォーマンス - -{ProductName} Data Table / Data Grid は、高パフォーマンスのライブ データ シナリオに最適化されています。速いロード時間、タイムラグのないスムーズなスクロール、または画面のちらつきにより、グリッドの列と行の完全仮想化を使用して、{Platform} データ グリッド アプリケーション内の行と列を無制限にスクロールできます。 - -## {Platform} ライブ データの高パフォーマンスの例 - -このサンプルは、何千もの財務記録を {Platform} Data Grid に結合し、1 つの列 (Territory) にグループ化した複数の列を数ミリ秒ごとにライブ更新します。ラグ、画面のちらつき、または表示の遅延なしに、さまざまなオプションをリアル タイムで変更し、データ グリッドのパフォーマンスを変更できます。 - - - -
- -## その他のリソース - - - - - - - - -- [列タイプ](column-types.md) -- [行のグループ化](row-grouping.md) - -## API リファレンス - - diff --git a/docs/xplat/src/content/jp/components/grids/data-grid/remote-data.mdx b/docs/xplat/src/content/jp/components/grids/data-grid/remote-data.mdx deleted file mode 100644 index de56de8c24..0000000000 --- a/docs/xplat/src/content/jp/components/grids/data-grid/remote-data.mdx +++ /dev/null @@ -1,154 +0,0 @@ ---- -title: "{Platform} データ グリッド | リモート データ | インフラジスティックス" -description: インフラジスティックスの {Platform} グリッド コンポーネントの仮想データ ソースを使用してリモート データをバインドします。{ProductName} テーブル チュートリアルを是非お試しください! -keywords: "{Platform} Table, Data Grid, virtual data, {ProductName}, Infragistics, data binding, {Platform} テーブル, データ グリッド, 仮想データ, データ バインディング, インフラジスティックス" -mentionedTypes: ["Grid", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: "{CanonicalLinkToGridMain}" -_language: ja ---- -import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; -import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; -import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; -import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - - - - - - - - - -このコントロールは非推奨であり、[Grid](../data-grid.md) に置き換えられていることに注意してください。そのため、そのコントロールに移行することをお勧めします。これは新しい機能を受け取ることはなく、バグ修正は優先されません。コードベースをデータ グリッドに移行する際のヘルプや質問については、サポートにお問い合わせください。 - - - - -# {Platform} グリッド仮想データのバインディン - -{ProductName} Data Table / Data Grid は、1 行のコードでリモート データ ソースへのデータ バインドをサポートします。{Platform} データ テーブルの仮想データ ソースを使用すると、リモート URI と返される Odata エンティティで {Platform} グリッドを設定するだけで、残りの作業は {Platform} グリッドが行います。 - -## {Platform} グリッド仮想データのバインディンの例 - - - - - - - -
- - - - -コア パッケージと {Platform} データ グリッド パッケージに加えて、データ ソース パッケージもインストールする必要があります。 - -- **npm install --save {PackageCore}** -- **npm install --save {PackageGrids}** -- **npm install --save {PackageInputs}** -- **npm install --save {PackageDataSources}** - - - - - -## モジュールの要件 - - を作成するには、以下のモジュールが必要です。 - - - -```razor -// in Program.cs file - -builder.Services.AddIgniteUIBlazor(typeof(IgbDataGridModule)); -``` - - - - - -```ts -import './odatajs-4.0.0'; -import { IgrDataGridModule } from 'igniteui-react-data-grids'; -import { IgrDataGrid } from 'igniteui-react-data-grids'; -import { ODataVirtualDataSource } from 'igniteui-react-datasources'; - -IgrDataGridModule.register(); -``` - - - - - -```ts -import './odatajs-4.0.0'; -import { ModuleManager } from 'igniteui-webcomponents-core'; -import { IgcDataGridModule } from 'igniteui-webcomponents-data-grids'; -import { IgcDataGridComponent } from 'igniteui-webcomponents-data-grids'; -import { ODataVirtualDataSource } from 'igniteui-webcomponents-dataSource'; - -ModuleManager.register(IgcDataGridModule); -``` - - - -
- -## コード スニペット - -グリッド モジュールがインポートされました。以下のステップはリモート データにバインドするグリッドの基本的な設定です。仮想データ ソースを作成します。データが取得される URL を `baseUri` プロパティに割り当てます。`entitySet` プロパティを設定すると、仮想データ ソースから取得するテーブルがわかります。 - - - -```tsx - -``` - - - - - -```html - - -``` - - - -データ ソースをグリッドに割り当てます。 - -```ts -private virtualData: ODataVirtualDataSource; -// ... -const vds = new ODataVirtualDataSource(); -vds.baseUri = ("https://services.odata.org/V4/Northwind/Northwind.svc"); -vds.entitySet = ("Orders"); -this.virtualData = vds; -``` - - - -```ts -const vds = new ODataVirtualDataSource(); -vds.baseUri = ("https://services.odata.org/V4/Northwind/Northwind.svc"); -vds.entitySet = ("Orders"); - -let grid1 = (document.getElementById("grid") as IgcDataGridComponent); -grid1.dataSource = vds; -``` - - - - -## API リファレンス - - diff --git a/docs/xplat/src/content/jp/components/grids/data-grid/row-grouping.mdx b/docs/xplat/src/content/jp/components/grids/data-grid/row-grouping.mdx deleted file mode 100644 index a1f6aa18b9..0000000000 --- a/docs/xplat/src/content/jp/components/grids/data-grid/row-grouping.mdx +++ /dev/null @@ -1,245 +0,0 @@ ---- -title: "{Platform} データ グリッド | 行のグループ化 | インフラジスティックス" -description: インフラジスティックスの {Platform} グリッド コンポーネントのグループ行機能を使用して、行を「固定ヘッダー」行グループにまとめます。独自の基準に基づいてデータを視覚的にグループ化する簡単な方法です。{ProductName} テーブルのサンプルを是非お試しください! -keywords: "{Platform} Table, Data Grid, row grouping, groupby area, {ProductName}, Infragistics, {Platform} テーブル, データ グリッド, 行のグループ化, groupby 領域, インフラジスティックス" -mentionedTypes: ["Grid", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: "{CanonicalLinkToGridGroupBy}" -_language: ja ---- -import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; -import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; -import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; -import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - - - - - - - - - -このコントロールは非推奨であり、[Grid](../data-grid.md) に置き換えられていることに注意してください。そのため、そのコントロールに移行することをお勧めします。これは新しい機能を受け取ることはなく、バグ修正は優先されません。コードベースをデータ グリッドに移行する際のヘルプや質問については、サポートにお問い合わせください。 - - - - -# {Platform} 行のグループ化 - -{ProductName} Data Table / Data Grid は、行を「固定ヘッダー」行グループにまとめることができます。これ機能は Microsoft Outlook の Group By 機能に似ています。独自の基準に基づいてデータを視覚的にグループ化する簡単な方法です。 - -## {Platform} 行の GroupBy 領域の例 - - - - - - -
- -## Group-By 領域 - -上記の例に示すように、DataGrid の `IsGroupByAreaVisible` プロパティをユーザー インターフェイスで True に設定します。group-by 領域を使用すると、ユーザーは、DataGrid を間接的に操作するときに、操作せずに列をグループ化およびソート オプションを増やすことができます。グループは、ユーザーのニーズに基づいて配置および並べ替えることができます。この領域は、DataGrid で列がプログラムで `GroupDescriptions` として追加されたときにも入力されます。 - -## グループ化説明の使用の例 - - - - - - -
- -## 階層グループ - -`GroupHeaderDisplayMode` プロパティを使用すると、グループを階層化できます。デフォルトで、追加された各グループの説明が集計されます。`GroupHeaderDisplayMode` を `Split` に設定すると、`Grid` の `GroupDescriptions` プロパティで定義されたグループのセクション ヘッダーが作成されます。 - - - -```ts -import { GroupHeaderDisplayMode } from 'igniteui-react-core'; - -public componentDidMount() { - // ... - this.grid.groupHeaderDisplayMode = GroupHeaderDisplayMode.Split; -} -``` - - - - - -```ts -import { GroupHeaderDisplayMode } from 'igniteui-webcomponents-core'; - -public connectedCallback() { - // ... - this.grid.groupHeaderDisplayMode = GroupHeaderDisplayMode.Split; -} -``` - - - - - - -```razor - -``` - - - -## 縮小可能なグループ - -また、`Grid` は各グループ セクションに切り替えを表示して、エンドユーザーが `IsGroupCollapsable` プロパティでグループ化されたデータを展開または縮小できます。 - - -```ts -public componentDidMount() { - // ... - this.grid.isGroupCollapsable = true; -} -``` - - - - - -```ts -public connectedCallback() { - // ... - this.grid.isGroupCollapsable = true; -} -``` - - - - - - -```razor - -``` - - - -## まとめ - -上記すべてのコード スニペットを以下のコード ブロックにまとめて、プロジェクトに簡単にコピーできます。 - - - - -```ts -import { IgrColumnGroupDescription } from 'igniteui-react-data-grids'; -import { ListSortDirection } from 'igniteui-react-core'; -import { GroupHeaderDisplayMode } from 'igniteui-react-core'; - -public componentDidMount() { - window.addEventListener('load', this.onLoad); -} - -public onLoad() { - const state = new IgrColumnGroupDescription(); - state.field = "Country"; - state.displayName = "Location"; - state.sortDirection = ListSortDirection.Descending; - const city = new IgrColumnGroupDescription(); - city.field = "City"; - city.displayName = ""; - const income = new IgrColumnGroupDescription(); - income.field = "Income"; - income.displayName = "Income"; - - this.grid.groupDescriptions.add(state); - this.grid.groupDescriptions.add(city); - this.grid.groupDescriptions.add(income); - - this.grid.isGroupCollapsable = true; - this.grid.groupHeaderDisplayMode = GroupHeaderDisplayMode.Split; -} -``` - - - - - -```ts -import { IgcIgcColumnGroupDescription } from 'igniteui-webcomponents-data-grids'; -import { ListSortDirection } from 'igniteui-webcomponents-core'; -import { GroupHeaderDisplayMode } from 'igniteui-webcomponents-core'; - -public connectedCallback() { - const state = new IgcColumnGroupDescription(); - state.field = "Country"; - state.displayName = "Location"; - state.sortDirection = ListSortDirection.Descending; - const city = new IgcColumnGroupDescription(); - city.field = "City"; - city.displayName = ""; - const income = new IgcColumnGroupDescription(); - income.field = "Income"; - income.displayName = "Income"; - - this.grid = document.getElementById("grid") as IgcDataGridComponent; - this.grid.groupDescriptions.add(state); - this.grid.groupDescriptions.add(city); - this.grid.groupDescriptions.add(income); - - this.grid.isGroupCollapsable = true; - this.grid.groupHeaderDisplayMode = GroupHeaderDisplayMode.Split; -} -``` - - - - - -```razor - - -@code { - private IgbDataGrid grid; - public IgbDataGrid DataGridRef - { - get - { - return grid; - } - set - { - grid = value; - OnGridCreated(); - StateHasChanged(); - } - } - - private void OnGridCreated() - { - var state = new ColumnGroupDescription { Field = "Country", DisplayName = "Location" }; - var city = new ColumnGroupDescription { Field = "City", DisplayName = "City" }; - var income = new ColumnGroupDescription { Field = "Income", DisplayName = "Income" }; - - this.DataGridRef.GroupDescriptions.Add(state); - this.DataGridRef.GroupDescriptions.Add(city); - this.DataGridRef.GroupDescriptions.Add(income); - } -} -``` - - - - -## API リファレンス - - - diff --git a/docs/xplat/src/content/jp/components/grids/data-grid/row-highlighting.mdx b/docs/xplat/src/content/jp/components/grids/data-grid/row-highlighting.mdx deleted file mode 100644 index 2c747aceea..0000000000 --- a/docs/xplat/src/content/jp/components/grids/data-grid/row-highlighting.mdx +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: "{Platform} Data Grid | 行のハイライト表示 | インフラジスティックス" -description: マウスオーバーでインフラジスティックスの {Platform} データ グリッドの行ハイライト表示の構成。{ProductName} テーブルの行ハイライト表示を設定する方法について説明します。 -keywords: "{Platform} Table, Data Grid, row highlighting, {ProductName}, Infragistics, {Platform} テーブル, データ グリッド, 行のハイライト表示, インフラジスティックス" -mentionedTypes: ["Grid", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: "{CanonicalLinkToGridMain}" -_language: ja ---- -import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; -import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; -import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; -import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - - - - - - - - - -このコントロールは非推奨であり、[Grid](../data-grid.md) に置き換えられていることに注意してください。そのため、そのコントロールに移行することをお勧めします。これは新しい機能を受け取ることはなく、バグ修正は優先されません。コードベースをデータ グリッドに移行する際のヘルプや質問については、サポートにお問い合わせください。 - - - - -# {Platform} Grid ハイライト表示 - -{ProductName} Data Table / Data Grid は、行のハイライト表示の構成をサポートします。 - -## {Platform} Grid ハイライト表示の例 - - - - - - - -
- -## 概要 - -{Platform} データ内のレコードのハイライト表示は、{Platform} グリッド の ブール値プロパティを設定して切り替えることができます。これはデフォルトで有効になっていることに注意してください。 - -さらに、 文字列プロパティを 16 進数値に設定して色を設定できます。 - -## コード スニペット - -以下は、{Platform} データ グリッドで行のハイライト表示を有効にし、青色を適用する方法を示します。 - - - -```tsx - -``` - - - - - -```html - - -``` - - - - - -```razor - -``` - - - - -## API リファレンス - - diff --git a/docs/xplat/src/content/jp/components/grids/data-grid/row-paging.mdx b/docs/xplat/src/content/jp/components/grids/data-grid/row-paging.mdx deleted file mode 100644 index 99438d8284..0000000000 --- a/docs/xplat/src/content/jp/components/grids/data-grid/row-paging.mdx +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: "{Platform} グリッド/テーブルのページネーション – {ProductName}" -description: データの配列を取り込み、そのデータの一部を １ ページとして出力するように設計されたインフラジスティックスの {Platform} グリッド コンポーネントの Pager を是非お試しください。 -keywords: "{Platform} Table, Data Grid, row, paging, {ProductName}, Infragistics, {Platform} テーブル, データ グリッド, 行のページング, インフラジスティックス" -mentionedTypes: ["Grid", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: "{CanonicalLinkToGridPaging}" -_language: ja ---- -import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; -import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; -import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; -import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - - - - - - - - - -このコントロールは非推奨であり、[Grid](../data-grid.md) に置き換えられていることに注意してください。そのため、そのコントロールに移行することをお勧めします。これは新しい機能を受け取ることはなく、バグ修正は優先されません。コードベースをデータ グリッドに移行する際のヘルプや質問については、サポートにお問い合わせください。 - - - - -# {Platform} グリッド / テーブルのページネーション - -表形式のテーブル UI は、多くの Web 製品で一般的に使用されています。表形式のテーブル UI を最初から作成するのは簡単ではありませんが、{ProductName} グリッドを使用すると、テーブル UI の作成が簡単になり、大量のローカル データまたはリモート データを {Platform} グリッドにバインドするのも簡単です。グリッドはデフォルトで仮想化されているため、大きなデータ セットを表示するためにテーブルのページネーションを含める必要はありません。これは主に、UI で複雑なデータを整理する最も効率的な方法のために使用されます。テーブルのページネーションを使用すると、データを設定された行数で表示できるため、ユーザーは実際にスクロールバーを必要とせずに、データをスクロールできます。テーブルのページネーション UI には通常、現在のページ、合計ページ、クリック可能な [前へ] と [次へ] の矢印/ボタンなどが含まれ、ユーザーは次のようにページをめくることができます: - -行のページングは、 プロパティを設定することにより、{ProductName} データ テーブル / データ グリッド内で有効になります。さらに、 を設定することで、表示される行の最大数を制限できます。 - -## {Platform} 行のページングの例 - - - - - - -
- -## 概要 - -UX の観点から、テーブルのページネーションには長所と短所があります。UX Matters の[最近の記事](https://www.uxmatters.com/mt/archives/2018/11/paging-scrolling-and-infinite-scroll.php)による、テーブルのページネーションの良い面と悪い面の分類です: - -テーブルのページネーションの利点: - -- ユーザーの選択を制限します。 -- クリック数は測定可能です。 - -テーブルのページネーションの欠点: - -- ユーザーはまだスクロールする必要があります。 -- ページャーの作業と動作はサイトごとに異なります。 -- UI コントロールが多すぎると、混乱する可能性があります。 -- ユーザーは、ページネーションが遅くて面倒だと考えています。 -- ユーザーはページネーション コントロールに気付かない場合があります。 -- ページの読み込みが遅い場合があります。 -- アクションがページに適用されるのか、データ セット全体に適用されるのか、ユーザーは混乱します。 - -Ignite UI {Platform} グリッドを使用すると、開発者はページングを追加できますが、グリッドにはデフォルトで無限スクロールが組み込まれているため、グリッドにページャーを追加するのではなく、無限 (または仮想) スクロールをお勧めします。デフォルトのユーザー エクスペリエンスとして仮想化された無限スクロールを使用すると、次のことが可能になります: - -- スクロール操作によってページングされるデータの量を制御しながら、最高のパフォーマンスを実現。 -- すべてのコンテンツをスクロールするための自然なアプローチ。 -- すべてのインタラクションはエンド ユーザーに明確です。 -- モバイル UX での自然なインタラクションにマップします。 - -## {Platform} グリッド/ページの同期 - -ユーザーがソートやグループ化などのグリッドを操作し、グリッドで {Platform} Pager を有効にした場合、次の関数を使用して、{Platform} ページネーション データが {Platform} テーブル表示と同期されるようにする必要があります。 - -- applySorts -- applyGroups -- applyFilters - - -## API リファレンス - - diff --git a/docs/xplat/src/content/jp/components/grids/data-grid/row-pinning.mdx b/docs/xplat/src/content/jp/components/grids/data-grid/row-pinning.mdx deleted file mode 100644 index d58b2e3fd4..0000000000 --- a/docs/xplat/src/content/jp/components/grids/data-grid/row-pinning.mdx +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: "{Platform} データ グリッド | 行のピン固定 | インフラジスティックス" -description: インフラジスティックスの {Platform} グリッド コンポーネントの行ピン固定機能を使用し、豊富で使いやすい API によって、行変更の順序をロックします。{ProductName} テーブルのサンプルを是非お試しください! -keywords: "{Platform} Table, Data Grid, row pinning, {ProductName}, Infragistics, {Platform} テーブル, データ グリッド, 行のピン固定, インフラジスティックス" -mentionedTypes: ["Grid", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: "{CanonicalLinkToGridRowPinning}" -_language: ja ---- -import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; -import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; -import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; -import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - - - - - - - - - -このコントロールは非推奨であり、[Grid](grid/overview.md) に置き換えられていることに注意してください。そのため、そのコントロールに移行することをお勧めします。これは新しい機能を受け取ることはなく、バグ修正は優先されません。コードベースをデータ グリッドに移行する際のヘルプや質問については、サポートにお問い合わせください。 - - - - -# {Platform} 行のピン固定 - -{ProductName} Data Table / Data Grid では、キーまたは基本データ ソースの項目を使用した行のピン固定が可能です。行を固定するとその行が {PlatformLower} データ グリッドの最上部に複製され、薄い灰色の背景で固定されたままになり、実際の行は低い不透明度でレンダリングされます。 - -## {Platform} 行のピン固定の例 - - - - - - - -
- -{Platform} データ グリッドでターゲット行の基本データ項目を {Platform} グリッドの コレクションに追加して行をピン固定できます。 - -## コード スニペット - - - -```ts -public onGridRef(grid: IgrDataGrid) { - this.grid = grid; - this.grid.pinnedItems.add(this.data[2]); - this.grid.pinnedItems.add(this.data[4]); -} -``` - - - - - -```html - - -``` - - - - - -```ts -let grid1 = (document.getElementById("grid") as IgcDataGridComponent); -grid1.dataSource = data; -grid1.pinnedItems.add(data[2]); -grid1.pinnedItems.add(data[4]); -``` - - - - - -```razor - - -@code { - - private IgbDataGrid grid; - public IgbDataGrid DataGridRef - { - get - { - return grid; - } - set - { - grid = value; - OnGridChanged(); - StateHasChanged(); - } - } - - private void OnGridChanged() - { - grid.PinnedItems.Add(this.DataSource[2] as Employee); - grid.PinnedItems.Add(this.DataSource[4] as Employee); - } -} -``` - - - - -## API リファレンス - - - diff --git a/docs/xplat/src/content/jp/components/grids/data-grid/type-comparison-table.mdx b/docs/xplat/src/content/jp/components/grids/data-grid/type-comparison-table.mdx deleted file mode 100644 index bb3299bf3d..0000000000 --- a/docs/xplat/src/content/jp/components/grids/data-grid/type-comparison-table.mdx +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: "{Platform} データ グリッド | 比較表 | データ バインディング | インフラジスティックス" -description: Infragistics のグリッド コンポーネントを使用して比較データにバインドします。{ProductName} テーブルのサンプルを是非お試しください! -keywords: "{Platform} Table, Data Grid, column template, comparison data, {ProductName}, data binding, Infragistics, {Platform} テーブル, データ グリッド, 列テンプレート, 比較データ, データ バインディング, インフラジスティックス" -mentionedTypes: ["Grid", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: "{CanonicalLinkToGridMain}" -_language: ja ---- -import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; -import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; -import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; -import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - - - - - - - - - -このコントロールは非推奨であり、[Grid](../data-grid.md) に置き換えられていることに注意してください。そのため、そのコントロールに移行することをお勧めします。これは新しい機能を受け取ることはなく、バグ修正は優先されません。コードベースをデータ グリッドに移行する際のヘルプや質問については、サポートにお問い合わせください。 - - - - -# {Platform} 比較データのバインディング - -{ProductName} Data Table / Data Grid は、画像を挿入する[テンプレート列](column-types.md#テンプレート列)をサポートしています。 - -## {Platform} 比較データのバインディングの例 - - - - - -## API リファレンス - - - - - diff --git a/docs/xplat/src/content/jp/components/grids/data-grid/type-heatmap-table.mdx b/docs/xplat/src/content/jp/components/grids/data-grid/type-heatmap-table.mdx deleted file mode 100644 index 56b8e8e59e..0000000000 --- a/docs/xplat/src/content/jp/components/grids/data-grid/type-heatmap-table.mdx +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: "{Platform} データ グリッド | ヒートマップ テーブル | データ バインディング | インフラジスティックス" -description: インフラジスティックスのグリッド コンポーネントのテンプレート列を使用してヒートマップ テーブルを作成します。{ProductName} テーブルのサンプルを是非お試しください! -keywords: "{Platform} Table, Data Grid, column template, heatmap table, {ProductName}, data binding, Infragistics, {Platform} テーブル, データ グリッド, 列テンプレート, ヒートマップ テーブル, データ バインディング, インフラジスティックス" -mentionedTypes: ["Grid", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: "{CanonicalLinkToGridMain}" -_language: ja ---- -import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; -import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; -import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; -import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - - - - - - - - - -このコントロールは非推奨であり、[Grid](../data-grid.md) に置き換えられていることに注意してください。そのため、そのコントロールに移行することをお勧めします。これは新しい機能を受け取ることはなく、バグ修正は優先されません。コードベースをデータ グリッドに移行する際のヘルプや質問については、サポートにお問い合わせください。 - - - - -# {Platform} ヒートマップ データのバインディング - -{ProductName} Data Table / Data Grid は、ヒートマップを作成する[テンプレート列](column-types.md#テンプレート列)をサポートしています。 - -## {Platform} ヒートマップ データのバインディングの例 - - - - - -## API リファレンス - - - - - diff --git a/docs/xplat/src/content/jp/components/grids/data-grid/type-matrix-table.mdx b/docs/xplat/src/content/jp/components/grids/data-grid/type-matrix-table.mdx deleted file mode 100644 index 492d4c9d92..0000000000 --- a/docs/xplat/src/content/jp/components/grids/data-grid/type-matrix-table.mdx +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: "{Platform} データ グリッド | マトリックス データ | データ バインディング | インフラジスティックス" -description: インフラジスティックスのグリッド コンポーネントのテンプレート列を使用してマトリックス テーブルを作成します。{ProductName} テーブルのサンプルを是非お試しください! -keywords: "{Platform} Table, Data Grid, column template, matrix table, {ProductName}, data binding, Infragistics, {Platform} テーブル, データ グリッド, 列テンプレート, マトリックス テーブル, データ バインディング, インフラジスティックス" -mentionedTypes: ["Grid", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: "{CanonicalLinkToGridMain}" -_language: ja ---- -import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; -import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; -import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; -import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - - - - - - - - - -このコントロールは非推奨であり、[Grid](../data-grid.md) に置き換えられていることに注意してください。そのため、そのコントロールに移行することをお勧めします。これは新しい機能を受け取ることはなく、バグ修正は優先されません。コードベースをデータ グリッドに移行する際のヘルプや質問については、サポートにお問い合わせください。 - - - - -# {Platform} マトリックス データのバインディング - -{ProductName} Data Table / Data Grid は、マトリックス テーブルを作成する[テンプレート列](column-types.md#テンプレート列)をサポートしています。 - -## {Platform} マトリックス データのバインディングの例 - - - - - -## API リファレンス - - - - - diff --git a/docs/xplat/src/content/jp/components/grids/data-grid/type-periodic-table.mdx b/docs/xplat/src/content/jp/components/grids/data-grid/type-periodic-table.mdx deleted file mode 100644 index 11ea4ccf62..0000000000 --- a/docs/xplat/src/content/jp/components/grids/data-grid/type-periodic-table.mdx +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: "{Platform} データ グリッド | 周期表 | データ バインディング | インフラジスティックス" -description: インフラジスティックスの {Platform} グリッド コンポーネントのテンプレート列を使用して周期表を作成します。{ProductName} テーブルのサンプルを是非お試しください! -keywords: "{Platform} Table, Data Grid, column template, periodic table, {ProductName}, data binding, Infragistics, {Platform} テーブル, データ グリッド, 列テンプレート, 周期表, データ バインディング, インフラジスティックス" -mentionedTypes: ["Grid", "DataGridColumn"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: "{CanonicalLinkToGridMain}" -_language: ja ---- -import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; -import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; -import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; -import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - - - - - - - - - -このコントロールは非推奨であり、[Grid](../data-grid.md) に置き換えられていることに注意してください。そのため、そのコントロールに移行することをお勧めします。これは新しい機能を受け取ることはなく、バグ修正は優先されません。コードベースをデータ グリッドに移行する際のヘルプや質問については、サポートにお問い合わせください。 - - - - -# {Platform} 周期表のバインディング - -{ProductName} Data Table / Data Grid は、周期表を作成する[テンプレート列](column-types.md#テンプレート列)をサポートしています。 - -## {Platform} 周期表のバインディングの例 - - - - - -## API リファレンス - - - - - diff --git a/docs/xplat/src/content/jp/components/grids/data-grid/type-sparkline-table.mdx b/docs/xplat/src/content/jp/components/grids/data-grid/type-sparkline-table.mdx deleted file mode 100644 index 010669957e..0000000000 --- a/docs/xplat/src/content/jp/components/grids/data-grid/type-sparkline-table.mdx +++ /dev/null @@ -1,189 +0,0 @@ ---- -title: "{Platform} データ グリッド | 列スパークライン | インフラジスティックス" -description: "{ProductName} Data Table / Data Grid は、列スパークラインなどの他のコンポーネントを埋め込む方法を提供するテンプレート列をサポートします。" -keywords: "{Platform} Table, Data Grid, column sparkline, {ProductName}, data binding, Infragistics, {Platform} テーブル, データ グリッド, 列スパークライン, データ バインディング, インフラジスティックス" -mentionedTypes: ["Grid", "CellInfo", "TemplateCellInfo", "Sparkline"] -namespace: Infragistics.Controls.Grids.Implementation -_canonicalLink: "{CanonicalLinkToGridMain}" -_language: ja ---- -import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; -import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; -import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; -import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - - - - -このコントロールは非推奨であり、[Grid](../data-grid.md) に置き換えられていることに注意してください。そのため、そのコントロールに移行することをお勧めします。これは新しい機能を受け取ることはなく、バグ修正は優先されません。コードベースをデータ グリッドに移行する際のヘルプや質問については、サポートにお問い合わせください。 - - - -# {Platform} 列スパークライン - -{ProductName} Data Table / Data Grid は、{ProductName} スパークライン コンポーネントなど、他のコンポーネントを埋め込むことができるテンプレート列をサポートします。`Grid` コンポーネントにサポートされる他の列タイプについては、[列タイプ](column-types.md) トピックを参照してください。 - -## {Platform} 列スパークラインの例 - - - -
- -## コード スニペット - -以下のコード例は、 コンポーネントの に `Sparkline` を埋め込む方法を示します。 - - - -```tsx - - {/* ... */} - - {/* ... */} - -``` - - - - - -```ts -import { IgrDataGrid } from 'igniteui-react-data-grids'; -import { IgrTemplateColumn, IIgrCellTemplateProps } from 'igniteui-react-data-grids'; - -public getOrderHistoryTemplate(props: IIgrCellTemplateProps) { - const info = props.dataContext as IgrTemplateCellInfo; - return ( -
- -
- ); -} -``` - - - - - -```html - - - - - -``` - - - - - -```ts -import { IgcDataGridModule } from 'igniteui-webcomponents-data-grids'; -import { IgcDataGridComponent } from 'igniteui-webcomponents-data-grids'; -import { IgcTemplateColumnComponent } from 'igniteui-webcomponents-data-grids'; -import { IgcTemplateCellInfo } from 'igniteui-webcomponents-data-grids'; -import { IgcTemplateCellUpdatingEventArgs } from 'igniteui-webcomponents-data-grids'; -import { IgcSparklineModule } from 'igniteui-webcomponents-charts'; -import { IgcSparklineComponent } from 'igniteui-webcomponents-charts'; - -// registering Grid and Sparkline chart's modules: -ModuleManager.register(IgcDataGridModule); -ModuleManager.register(IgcSparklineModule); - -constructor() { -this.grid = document.getElementById("grid") as IgcDataGridComponent; -this.grid.dataSource = Products.getData(); - -this.onUpdatingHistoryColumn = this.onUpdatingHistoryColumn.bind(this); - -const historyColumn = document.getElementById("historyColumn") as IgcTemplateColumnComponent; -historyColumn.cellUpdating = this.onUpdatingHistoryColumn; -} - -public onUpdatingHistoryColumn(s: IgcTemplateColumnComponent, e: IgcTemplateCellUpdatingEventArgs) { - const content = e.content as HTMLDivElement; - let chart: IgcSparklineComponent | null = null; - let info = e.cellInfo as IgcTemplateCellInfo; - - if (content.childElementCount === 0) { - chart = new IgcSparklineComponent(); - chart.valueMemberPath = "Sold"; - chart.labelMemberPath = "Week"; - chart.displayType = SparklineDisplayType.Line; - chart.lineThickness = 2; - chart.brush = "rgb(21, 190, 6)"; - chart.negativeBrush = "rgb(211, 17, 3)"; - chart.width = "100%"; - chart.height = "100%"; - - content.style.width = "calc(100% - 10px)"; - content.style.height = "calc(100% - 10px)"; - content.style.padding = "5px"; - content.style.margin = "0px"; - content.style.display = "inline-grid"; - content.appendChild(chart); - } - else { - chart = content.children[0] as IgcSparklineComponent; - } - - if (chart) { - chart.dataSource = info.rowItem.OrderHistory; - } -} -``` - - - - - -```razor - - 180")" HeaderText="Order History" > - - - -``` - - - -## API リファレンス - - - diff --git a/docs/xplat/src/content/jp/components/grids/grid/groupby.mdx b/docs/xplat/src/content/jp/components/grids/grid/groupby.mdx index 9da0ed833e..e98c177811 100644 --- a/docs/xplat/src/content/jp/components/grids/grid/groupby.mdx +++ b/docs/xplat/src/content/jp/components/grids/grid/groupby.mdx @@ -237,9 +237,9 @@ gridRef.current.groupBy([{ fieldName: 'ProductName', dir: SortingDirection.Desc, ### 展開 / 縮小 API -グループ式の他にグループ行の展開も制御できます。これらは、 のコレクションである、 コンポーネントの別のプロパティ に保存されます。各展開状態は、作成されたフィールド名とグループ化の各レベルで表す値によって一意に定義されます。つまり、識別子は の階層配列です。 +グループ式の他にグループ行の展開も制御できます。これらは、 のコレクションである、 コンポーネントの別のプロパティ に保存されます。各展開状態は、作成されたフィールド名とグループ化の各レベルで表す値によって一意に定義されます。つまり、識別子は の階層配列です。 - で `IGroupByExpandState` のリストを直接 に設定すると展開が変更されます。また、 は、グループ レコード インスタンスまたは行の プロパティによってグループを切り替えるメソッド を公開します。 + で `IGroupByExpandState` のリストを直接 に設定すると展開が変更されます。また、 は、グループ レコード インスタンスまたは行の プロパティによってグループを切り替えるメソッド を公開します。 @@ -364,7 +364,7 @@ this.grid.DeselectRowsInGroup(row.GroupRow); ### グループ行テンプレート -展開/縮小 UI を除くグループ行は完全にテンプレート化可能です。デフォルトでグループ アイコンを描画し、フィールド名と値を表示します。テンプレートを描画するコンテキストのタイプは です。 +展開/縮小 UI を除くグループ行は完全にテンプレート化可能です。デフォルトでグループ アイコンを描画し、フィールド名と値を表示します。テンプレートを描画するコンテキストのタイプは です。 たとえば、以下のテンプレートはグループ行集計でより詳細な情報を表示します。 @@ -420,7 +420,7 @@ igRegisterScript("WebGridGroupByRowTemplate", (ctx) => { 上記のように、展開/縮小 UI を除くグループ行は完全にテンプレート化可能です。カスタムの GroupBy 行セレクター テンプレートを作成するには、`GroupByRowSelectorTemplate` ディレクティブを使用します。テンプレートから、Group By 行の状態に関する情報を提供するプロパティを使用して、暗黙的に提供されたコンテキスト変数にアクセスできます。 - プロパティは、現在選択されているグループ レコードの数を示し、 はグループに属するレコードの数を示します。 + プロパティは、現在選択されているグループ レコードの数を示し、 はグループに属するレコードの数を示します。 ```html @@ -467,7 +467,7 @@ igRegisterScript("GroupByRowSelectorTemplate", (ctx) => { - プロパティは、グループ行への参照を返します。 + プロパティは、グループ行への参照を返します。 ```html @@ -515,7 +515,7 @@ igRegisterScript("GroupByRowSelectorTemplate", (ctx) => { - と プロパティを使用して、Group By 行セレクターをチェックするか不確定にする (部分的に選択する) かを決定できます。 + と プロパティを使用して、Group By 行セレクターをチェックするか不確定にする (部分的に選択する) かを決定できます。 @@ -844,9 +844,9 @@ $custom-theme: grid-theme( ## API リファレン - - - +
+
+
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/grids/grid/icons.mdx b/docs/xplat/src/content/jp/components/grids/grid/icons.mdx index c3563a9d4d..61d9959700 100644 --- a/docs/xplat/src/content/jp/components/grids/grid/icons.mdx +++ b/docs/xplat/src/content/jp/components/grids/grid/icons.mdx @@ -16,9 +16,16 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; {ProductName} アイコンは、公開されている API メソッドを使用して、別のコレクション セットのカスタム アイコンを使用するようにカスタマイズできます。 + - - - + + +- +- +- + アイコンを登録すると、アイコンがローカルにキャッシュされるため、名前とコレクション名でそのアイコンを参照するコンポーネント間で再利用できます。参照を設定すると、名前でアイコンを参照するときに、どのコレクションのどのアイコンが使用されるかが変更されます。 @@ -262,7 +269,7 @@ setIconRef('filter_list', 'default', { ## API リファレンス - +
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/grids/grid/master-detail.mdx b/docs/xplat/src/content/jp/components/grids/grid/master-detail.mdx index 3fc1c22547..7bb026ec71 100644 --- a/docs/xplat/src/content/jp/components/grids/grid/master-detail.mdx +++ b/docs/xplat/src/content/jp/components/grids/grid/master-detail.mdx @@ -173,6 +173,6 @@ const masterDetailTemplate = (args: IgrGridMasterDetailContext) => { ## API リファレンス - - - +
+
+
diff --git a/docs/xplat/src/content/jp/components/grids/grid/paste-excel.mdx b/docs/xplat/src/content/jp/components/grids/grid/paste-excel.mdx index 7423c22622..2f0d48189e 100644 --- a/docs/xplat/src/content/jp/components/grids/grid/paste-excel.mdx +++ b/docs/xplat/src/content/jp/components/grids/grid/paste-excel.mdx @@ -658,7 +658,7 @@ export class PasteHandler { ## API リファレンス - +
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/grids/grid/selection-based-aggregates.mdx b/docs/xplat/src/content/jp/components/grids/grid/selection-based-aggregates.mdx index a57d8697e9..ae359c26a6 100644 --- a/docs/xplat/src/content/jp/components/grids/grid/selection-based-aggregates.mdx +++ b/docs/xplat/src/content/jp/components/grids/grid/selection-based-aggregates.mdx @@ -56,8 +56,8 @@ const dates = data.filter(rec => isDate(rec)); ## API リファレンス - - +
+
## その他のリソース
diff --git a/docs/xplat/src/content/jp/components/grids/hierarchical-grid/load-on-demand.mdx b/docs/xplat/src/content/jp/components/grids/hierarchical-grid/load-on-demand.mdx index 8350c238a4..0bb3c22e77 100644 --- a/docs/xplat/src/content/jp/components/grids/hierarchical-grid/load-on-demand.mdx +++ b/docs/xplat/src/content/jp/components/grids/hierarchical-grid/load-on-demand.mdx @@ -1087,8 +1087,8 @@ igRegisterScript("OnGridCreated", (args) => { ## API リファレンス - - +
+
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/grids/hierarchical-grid/overview.mdx b/docs/xplat/src/content/jp/components/grids/hierarchical-grid/overview.mdx index 800745f1fd..41c19781b3 100644 --- a/docs/xplat/src/content/jp/components/grids/hierarchical-grid/overview.mdx +++ b/docs/xplat/src/content/jp/components/grids/hierarchical-grid/overview.mdx @@ -975,8 +975,8 @@ $custom-theme: grid-theme( ## API リファレンス - - - - - +
+
+
+
+
diff --git a/docs/xplat/src/content/jp/components/grids/list.mdx b/docs/xplat/src/content/jp/components/grids/list.mdx index f3372c90f4..2edd0e4713 100644 --- a/docs/xplat/src/content/jp/components/grids/list.mdx +++ b/docs/xplat/src/content/jp/components/grids/list.mdx @@ -550,13 +550,13 @@ igc-list-item::part(subtitle) { ## API リファレンス - - - - - - - +
+
+
+
+
+
+
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/grids/pivot-grid/features.mdx b/docs/xplat/src/content/jp/components/grids/pivot-grid/features.mdx index c4f168b6df..60060a2c18 100644 --- a/docs/xplat/src/content/jp/components/grids/pivot-grid/features.mdx +++ b/docs/xplat/src/content/jp/components/grids/pivot-grid/features.mdx @@ -297,8 +297,8 @@ const igrPivotDimension2: IgrPivotDimension = { ## API リファレンス - - +
+
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/grids/pivot-grid/overview.mdx b/docs/xplat/src/content/jp/components/grids/pivot-grid/overview.mdx index 49ab19374b..4788795b67 100644 --- a/docs/xplat/src/content/jp/components/grids/pivot-grid/overview.mdx +++ b/docs/xplat/src/content/jp/components/grids/pivot-grid/overview.mdx @@ -834,11 +834,11 @@ Blazor で `PivotKeys` をオーバーライドする場合、新しい PivotKey ## API リファレンス - - - - - +
+
+
+
+
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/grids/pivot-grid/remote-operations.mdx b/docs/xplat/src/content/jp/components/grids/pivot-grid/remote-operations.mdx index 88f2cabd43..2e3a8f176c 100644 --- a/docs/xplat/src/content/jp/components/grids/pivot-grid/remote-operations.mdx +++ b/docs/xplat/src/content/jp/components/grids/pivot-grid/remote-operations.mdx @@ -209,8 +209,8 @@ public noopSortStrategy = NoopSortingStrategy.instance(); ## API リファレンス - - +
+
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/grids/tree-grid/load-on-demand.mdx b/docs/xplat/src/content/jp/components/grids/tree-grid/load-on-demand.mdx index 1a4b0492a8..f6212adf11 100644 --- a/docs/xplat/src/content/jp/components/grids/tree-grid/load-on-demand.mdx +++ b/docs/xplat/src/content/jp/components/grids/tree-grid/load-on-demand.mdx @@ -155,7 +155,7 @@ public rowLoadingTemplate() { ## API リファレンス - +
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/grids/tree-grid/overview.mdx b/docs/xplat/src/content/jp/components/grids/tree-grid/overview.mdx index 0f3531ad8b..efaadb7e7b 100644 --- a/docs/xplat/src/content/jp/components/grids/tree-grid/overview.mdx +++ b/docs/xplat/src/content/jp/components/grids/tree-grid/overview.mdx @@ -522,10 +522,10 @@ const data = [ ## API リファレンス - - - - +
+
+
+
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/grids/tree.mdx b/docs/xplat/src/content/jp/components/grids/tree.mdx index 980ea033f9..10678d12a5 100644 --- a/docs/xplat/src/content/jp/components/grids/tree.mdx +++ b/docs/xplat/src/content/jp/components/grids/tree.mdx @@ -435,10 +435,10 @@ igc-tree-item { ## API リファレンス - - - - +
+
+
+
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/inputs/badge.mdx b/docs/xplat/src/content/jp/components/inputs/badge.mdx index 32e5d395b1..451c61a550 100644 --- a/docs/xplat/src/content/jp/components/inputs/badge.mdx +++ b/docs/xplat/src/content/jp/components/inputs/badge.mdx @@ -264,7 +264,7 @@ igc-badge::part(base) { ## API リファレンス - +
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/inputs/button-group.mdx b/docs/xplat/src/content/jp/components/inputs/button-group.mdx index 6b2f283298..978aa53383 100644 --- a/docs/xplat/src/content/jp/components/inputs/button-group.mdx +++ b/docs/xplat/src/content/jp/components/inputs/button-group.mdx @@ -290,10 +290,10 @@ igc-toggle-button::part(toggle) { ## API リファレンス - - - - +
+
+
+
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/inputs/button.mdx b/docs/xplat/src/content/jp/components/inputs/button.mdx index e8c5d999f9..a5d8cb7e21 100644 --- a/docs/xplat/src/content/jp/components/inputs/button.mdx +++ b/docs/xplat/src/content/jp/components/inputs/button.mdx @@ -472,9 +472,9 @@ igc-button::part(base) { ## API リファレンス - - - +
+
+
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/inputs/checkbox.mdx b/docs/xplat/src/content/jp/components/inputs/checkbox.mdx index 4e3a6c1192..92206540d1 100644 --- a/docs/xplat/src/content/jp/components/inputs/checkbox.mdx +++ b/docs/xplat/src/content/jp/components/inputs/checkbox.mdx @@ -431,7 +431,7 @@ igc-checkbox::part(control checked)::after { ## API リファレンス - +
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/inputs/chip.mdx b/docs/xplat/src/content/jp/components/inputs/chip.mdx index 25f3a35589..95672aec0a 100644 --- a/docs/xplat/src/content/jp/components/inputs/chip.mdx +++ b/docs/xplat/src/content/jp/components/inputs/chip.mdx @@ -319,7 +319,7 @@ igc-chip::part(suffix) { ## API リファレンス - +
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/inputs/circular-progress.mdx b/docs/xplat/src/content/jp/components/inputs/circular-progress.mdx index 5a9e36ea45..2b6bf796f5 100644 --- a/docs/xplat/src/content/jp/components/inputs/circular-progress.mdx +++ b/docs/xplat/src/content/jp/components/inputs/circular-progress.mdx @@ -320,9 +320,9 @@ igc-circular-progress::part(track) { - - - +
+
+
## Additional Resources diff --git a/docs/xplat/src/content/jp/components/inputs/color-editor.mdx b/docs/xplat/src/content/jp/components/inputs/color-editor.mdx index 74c2986c3f..f0ad08cf50 100644 --- a/docs/xplat/src/content/jp/components/inputs/color-editor.mdx +++ b/docs/xplat/src/content/jp/components/inputs/color-editor.mdx @@ -218,7 +218,7 @@ public onValueChanged(calendar: IgrColorEditor, e: IgrColorEditorPanelSelectedVa ## API リファレンス - +
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/inputs/combo/features.mdx b/docs/xplat/src/content/jp/components/inputs/combo/features.mdx index d6ebde0cdb..affdce0f96 100644 --- a/docs/xplat/src/content/jp/components/inputs/combo/features.mdx +++ b/docs/xplat/src/content/jp/components/inputs/combo/features.mdx @@ -523,7 +523,7 @@ required プロパティを設定することで、コンボボックスを必 ## API リファレンス - +
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/inputs/combo/overview.mdx b/docs/xplat/src/content/jp/components/inputs/combo/overview.mdx index dd77f4a305..4ad0c54d1b 100644 --- a/docs/xplat/src/content/jp/components/inputs/combo/overview.mdx +++ b/docs/xplat/src/content/jp/components/inputs/combo/overview.mdx @@ -469,7 +469,7 @@ igc-combo::part(toggle-icon) { ## API リファレンス - +
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/inputs/combo/single-selection.mdx b/docs/xplat/src/content/jp/components/inputs/combo/single-selection.mdx index b21eef5ab3..18978ab0f3 100644 --- a/docs/xplat/src/content/jp/components/inputs/combo/single-selection.mdx +++ b/docs/xplat/src/content/jp/components/inputs/combo/single-selection.mdx @@ -162,7 +162,7 @@ comboRef.current.deselect('BG01'); ## API リファレンス - +
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/inputs/combo/templates.mdx b/docs/xplat/src/content/jp/components/inputs/combo/templates.mdx index 68a9ded3ee..87c9fe97bc 100644 --- a/docs/xplat/src/content/jp/components/inputs/combo/templates.mdx +++ b/docs/xplat/src/content/jp/components/inputs/combo/templates.mdx @@ -349,7 +349,7 @@ const renderGroupHeaderTemplate = (args: ComboTemplateProps) => { ## API リファレンス - +
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/inputs/date-time-input.mdx b/docs/xplat/src/content/jp/components/inputs/date-time-input.mdx index 83d28b37af..accafc456d 100644 --- a/docs/xplat/src/content/jp/components/inputs/date-time-input.mdx +++ b/docs/xplat/src/content/jp/components/inputs/date-time-input.mdx @@ -398,10 +398,10 @@ igc-date-time-input { ## API リファレンス - - - - +
+
+
+
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/inputs/dropdown.mdx b/docs/xplat/src/content/jp/components/inputs/dropdown.mdx index 32de50d78b..25cae33b8a 100644 --- a/docs/xplat/src/content/jp/components/inputs/dropdown.mdx +++ b/docs/xplat/src/content/jp/components/inputs/dropdown.mdx @@ -207,10 +207,10 @@ igc-dropdown-group::part(label) { ## API リファレンス - - - - +
+
+
+
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/inputs/file-input.mdx b/docs/xplat/src/content/jp/components/inputs/file-input.mdx index fb22e8944f..a239f012d8 100644 --- a/docs/xplat/src/content/jp/components/inputs/file-input.mdx +++ b/docs/xplat/src/content/jp/components/inputs/file-input.mdx @@ -180,10 +180,10 @@ igc-file-input::part(label) { ## API リファレンス - - - - +
+
+
+
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/inputs/icon-button.mdx b/docs/xplat/src/content/jp/components/inputs/icon-button.mdx index a9aa62564e..df7377877b 100644 --- a/docs/xplat/src/content/jp/components/inputs/icon-button.mdx +++ b/docs/xplat/src/content/jp/components/inputs/icon-button.mdx @@ -277,10 +277,9 @@ igc-icon-button::part(icon) { - - - - +
+
+
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/inputs/input.mdx b/docs/xplat/src/content/jp/components/inputs/input.mdx index cc2816ddfb..e03f9df44c 100644 --- a/docs/xplat/src/content/jp/components/inputs/input.mdx +++ b/docs/xplat/src/content/jp/components/inputs/input.mdx @@ -213,9 +213,9 @@ igc-input::part(suffix) { ## API リファレンス - - - +
+
+
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/inputs/linear-progress.mdx b/docs/xplat/src/content/jp/components/inputs/linear-progress.mdx index d5e6bdbfa2..30478f732d 100644 --- a/docs/xplat/src/content/jp/components/inputs/linear-progress.mdx +++ b/docs/xplat/src/content/jp/components/inputs/linear-progress.mdx @@ -259,8 +259,8 @@ igc-linear-progress::part(label){ ## API リファレンス - - +
+
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/inputs/mask-input.mdx b/docs/xplat/src/content/jp/components/inputs/mask-input.mdx index 31616425ef..642bcd2e5c 100644 --- a/docs/xplat/src/content/jp/components/inputs/mask-input.mdx +++ b/docs/xplat/src/content/jp/components/inputs/mask-input.mdx @@ -274,11 +274,11 @@ igc-mask-input::part(input)::placeholder { ## API リファレンス - - - - - +
+
+
+
+
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/inputs/radio.mdx b/docs/xplat/src/content/jp/components/inputs/radio.mdx index 3570012392..fe5e7660fa 100644 --- a/docs/xplat/src/content/jp/components/inputs/radio.mdx +++ b/docs/xplat/src/content/jp/components/inputs/radio.mdx @@ -487,8 +487,8 @@ igc-radio::part(label) { ## API リファレンス - - +
+
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/inputs/rating.mdx b/docs/xplat/src/content/jp/components/inputs/rating.mdx index fa4e348c2f..4e7382c07e 100644 --- a/docs/xplat/src/content/jp/components/inputs/rating.mdx +++ b/docs/xplat/src/content/jp/components/inputs/rating.mdx @@ -520,8 +520,8 @@ igc-rating::part(empty) { ## API リファレンス - - +
+
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/inputs/ripple.mdx b/docs/xplat/src/content/jp/components/inputs/ripple.mdx index ddf20ca2d9..8488492b75 100644 --- a/docs/xplat/src/content/jp/components/inputs/ripple.mdx +++ b/docs/xplat/src/content/jp/components/inputs/ripple.mdx @@ -147,8 +147,8 @@ igc-ripple { ## API リファレンス - - +
+
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/inputs/select.mdx b/docs/xplat/src/content/jp/components/inputs/select.mdx index 50bb662190..015b5c75e9 100644 --- a/docs/xplat/src/content/jp/components/inputs/select.mdx +++ b/docs/xplat/src/content/jp/components/inputs/select.mdx @@ -430,10 +430,10 @@ igc-select::part(suffix) { - - - - +
+
+
+
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/inputs/slider.mdx b/docs/xplat/src/content/jp/components/inputs/slider.mdx index 4070d80e74..b0df67fd49 100644 --- a/docs/xplat/src/content/jp/components/inputs/slider.mdx +++ b/docs/xplat/src/content/jp/components/inputs/slider.mdx @@ -228,9 +228,9 @@ builder.Services.AddIgniteUIBlazor( ## API リファレンス - - - +
+
+
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/inputs/switch.mdx b/docs/xplat/src/content/jp/components/inputs/switch.mdx index 2e099a51e5..8204e369c6 100644 --- a/docs/xplat/src/content/jp/components/inputs/switch.mdx +++ b/docs/xplat/src/content/jp/components/inputs/switch.mdx @@ -390,7 +390,7 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbSwitchModule)); ## API リファレンス - +
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/inputs/text-area.mdx b/docs/xplat/src/content/jp/components/inputs/text-area.mdx index e797f8c1b7..3a8af0bcf4 100644 --- a/docs/xplat/src/content/jp/components/inputs/text-area.mdx +++ b/docs/xplat/src/content/jp/components/inputs/text-area.mdx @@ -185,9 +185,9 @@ igc-textarea::part(suffix) { ## API リファレンス - - - +
+
+
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/inputs/tooltip.mdx b/docs/xplat/src/content/jp/components/inputs/tooltip.mdx index 4e937ca34c..17cdf4c91b 100644 --- a/docs/xplat/src/content/jp/components/inputs/tooltip.mdx +++ b/docs/xplat/src/content/jp/components/inputs/tooltip.mdx @@ -369,7 +369,7 @@ Tooltip API メソッド ( ### 配置 - は、ターゲット要素を基準にして簡単に配置することもできます。必要なのは、 プロパティと のいずれかの配置オプションとともに使用するだけです。 + は、ターゲット要素を基準にして簡単に配置することもできます。必要なのは、 プロパティと PopoverPlacement のいずれかの配置オプションとともに使用するだけです。 プロパティが設定されていない場合、デフォルト値は `Bottom` となり、 はターゲット要素の下に配置されます。 @@ -488,15 +488,15 @@ igc-tooltip::part(bottom) { ## API リファレンス - - - - - - - - - +
+
+
+
+
+
+
+
+
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/layouts/accordion.mdx b/docs/xplat/src/content/jp/components/layouts/accordion.mdx index a689f8b0b8..aa54ef797e 100644 --- a/docs/xplat/src/content/jp/components/layouts/accordion.mdx +++ b/docs/xplat/src/content/jp/components/layouts/accordion.mdx @@ -256,8 +256,8 @@ constructor() { ## API リファレンス - - +
+
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/layouts/avatar.mdx b/docs/xplat/src/content/jp/components/layouts/avatar.mdx index 43159afaf0..f20c342c6e 100644 --- a/docs/xplat/src/content/jp/components/layouts/avatar.mdx +++ b/docs/xplat/src/content/jp/components/layouts/avatar.mdx @@ -270,7 +270,7 @@ igc-avatar::part(base) { ## API リファレンス - +
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/layouts/card.mdx b/docs/xplat/src/content/jp/components/layouts/card.mdx index 3583d3961d..86b253ca62 100644 --- a/docs/xplat/src/content/jp/components/layouts/card.mdx +++ b/docs/xplat/src/content/jp/components/layouts/card.mdx @@ -617,15 +617,15 @@ igc-icon-button::part(base) { ## API リファレンス - - - - - - - - - +
+
+
+
+
+
+
+
+
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/layouts/carousel.mdx b/docs/xplat/src/content/jp/components/layouts/carousel.mdx index 4155f125f9..1d00403808 100644 --- a/docs/xplat/src/content/jp/components/layouts/carousel.mdx +++ b/docs/xplat/src/content/jp/components/layouts/carousel.mdx @@ -903,12 +903,12 @@ const images = [ ## API リファレンス - - - - - - +
+
+
+
+
+
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/layouts/divider.mdx b/docs/xplat/src/content/jp/components/layouts/divider.mdx index a8a1143416..94c43f2cbe 100644 --- a/docs/xplat/src/content/jp/components/layouts/divider.mdx +++ b/docs/xplat/src/content/jp/components/layouts/divider.mdx @@ -300,7 +300,7 @@ defineComponents(IgcDividerComponent); ## API リファレンス - +
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/layouts/dock-manager-customization.mdx b/docs/xplat/src/content/jp/components/layouts/dock-manager-customization.mdx index a17cb8785c..e67ece5bda 100644 --- a/docs/xplat/src/content/jp/components/layouts/dock-manager-customization.mdx +++ b/docs/xplat/src/content/jp/components/layouts/dock-manager-customization.mdx @@ -203,5 +203,5 @@ const splitPaneFixedSize: IgcSplitPane = { ## API リファレンス - - +
+
diff --git a/docs/xplat/src/content/jp/components/layouts/dock-manager-electron.mdx b/docs/xplat/src/content/jp/components/layouts/dock-manager-electron.mdx index bab4970c04..5347746c9b 100644 --- a/docs/xplat/src/content/jp/components/layouts/dock-manager-electron.mdx +++ b/docs/xplat/src/content/jp/components/layouts/dock-manager-electron.mdx @@ -39,7 +39,7 @@ import dockmanagerElectronApp from '@xplat-images/dockmanager-electron-app.gif'; ### ドラッグ アンド ドロップ -ブラウザー/アプリケーション ウィンドウの外側でのペインのドラッグをサポートするために、ブラウザー内のフローティング ペインを作成する組み込みのドラッグアンドドロップを、[HTML ドラッグアンドドロップ API](https://developer.mozilla.org/ja/docs/Web/API/HTML_Drag_and_Drop_API) に基づくカスタム実装に置き換えました。ヘッダー要素が DOM に接続されたときに発生する イベントと イベントにサブスクライブしました。ヘッダー要素が接続されると、組み込みの `DragService` をリセットし、`DragStart` および `DragEnd` イベント リスナーをアタッチします。 +ブラウザー/アプリケーション ウィンドウの外側でのペインのドラッグをサポートするために、ブラウザー内のフローティング ペインを作成する組み込みのドラッグアンドドロップを、[HTML ドラッグアンドドロップ API](https://developer.mozilla.org/ja/docs/Web/API/HTML_Drag_and_Drop_API) に基づくカスタム実装に置き換えました。ヘッダー要素が DOM に接続されたときに発生する イベントと イベントにサブスクライブしました。ヘッダー要素が接続されると、組み込みの `DragService` をリセットし、`DragStart` および `DragEnd` イベント リスナーをアタッチします。 @@ -62,7 +62,7 @@ dockManager.addEventListener('paneHeaderConnected', paneHeaderConnected); -`PaneHeaderDragStart` 関数で、ドック マネージャー コンポーネントの プロパティを設定し、ドラッグ操作が開始されたことを通知します。 +`PaneHeaderDragStart` 関数で、ドック マネージャー コンポーネントの プロパティを設定し、ドラッグ操作が開始されたことを通知します。 @@ -76,7 +76,7 @@ const paneHeaderDragStart = async (pane: IgcContentPane, event: DragEvent) => { -`document` 要素の `DragOver` と `drop` イベントにサブスクライブしました。`DragOver` リスナーでは、) プロパティを設定することにより、マウスがその上にドラッグされたことをドック マネージャーに通知します。これにより、ドック マネージャーはドッキング インジケーターを表示します。 +`document` 要素の `DragOver` と `drop` イベントにサブスクライブしました。`DragOver` リスナーでは、) プロパティを設定することにより、マウスがその上にドラッグされたことをドック マネージャーに通知します。これにより、ドック マネージャーはドッキング インジケーターを表示します。 ```ts const handleDocumentDragOver = (event: DragEvent) => { @@ -107,7 +107,7 @@ const paneHeaderDragEnd = async (event: DragEvent) => { } ``` -ペイン ヘッダーがドキュメント内にドロップされると、 メソッドが呼び出され、ドラッグされたペインがドロップされたことをドック マネージャーに通知します。ペインがドッキング インジケーターにドロップされた場合、メソッドは **true** を返します。ペインがドラッグ元と同じウィンドウにドロップされた場合、ペインは自動的に新しい位置にドッキングされます。ただし、別のウィンドウにドロップされた場合は、`droppedInAnotherWindow` 関数を呼び出します。この関数は、最初にソースのドック マネージャーからペインを削除してから、新しいペインに追加します。 +ペイン ヘッダーがドキュメント内にドロップされると、 メソッドが呼び出され、ドラッグされたペインがドロップされたことをドック マネージャーに通知します。ペインがドッキング インジケーターにドロップされた場合、メソッドは **true** を返します。ペインがドラッグ元と同じウィンドウにドロップされた場合、ペインは自動的に新しい位置にドッキングされます。ただし、別のウィンドウにドロップされた場合は、`droppedInAnotherWindow` 関数を呼び出します。この関数は、最初にソースのドック マネージャーからペインを削除してから、新しいペインに追加します。 @@ -130,7 +130,7 @@ const handleDocumentDrop = async (event: DragEvent) => { -ペインが現在のウィンドウから削除されたら、 をドック マネージャー コンポーネントから削除し、レイアウトを更新する必要があります。 +ペインが現在のウィンドウから削除されたら、 をドック マネージャー コンポーネントから削除し、レイアウトを更新する必要があります。 @@ -176,7 +176,7 @@ mainWindow = new BrowserWindow({ ## API リファレンス - - - - +
+
+
+
diff --git a/docs/xplat/src/content/jp/components/layouts/dock-manager-embedding-frames.mdx b/docs/xplat/src/content/jp/components/layouts/dock-manager-embedding-frames.mdx index 2c610e9278..da641c2a8d 100644 --- a/docs/xplat/src/content/jp/components/layouts/dock-manager-embedding-frames.mdx +++ b/docs/xplat/src/content/jp/components/layouts/dock-manager-embedding-frames.mdx @@ -74,4 +74,4 @@ this.dockManager.layout = { ## API リファレンス - +
diff --git a/docs/xplat/src/content/jp/components/layouts/dock-manager-updating-panes.mdx b/docs/xplat/src/content/jp/components/layouts/dock-manager-updating-panes.mdx index 58bb4ed305..779e776a74 100644 --- a/docs/xplat/src/content/jp/components/layouts/dock-manager-updating-panes.mdx +++ b/docs/xplat/src/content/jp/components/layouts/dock-manager-updating-panes.mdx @@ -73,4 +73,4 @@ this.dockManager.layout = { ## API リファレンス - +
diff --git a/docs/xplat/src/content/jp/components/layouts/dock-manager.mdx b/docs/xplat/src/content/jp/components/layouts/dock-manager.mdx index 857b0679b4..373d7115fe 100644 --- a/docs/xplat/src/content/jp/components/layouts/dock-manager.mdx +++ b/docs/xplat/src/content/jp/components/layouts/dock-manager.mdx @@ -24,7 +24,7 @@ Infragistics {Platform} Dock Manager は、ペインでアプリケーション ## {Platform} ドック マネージャーの例 -この例は、アプリケーションで使用できる のほとんどの機能とドッキング オプションを示しています。 +この例は、アプリケーションで使用できる のほとんどの機能とドッキング オプションを示しています。 @@ -79,7 +79,7 @@ defineComponents(IgcDockManagerComponent); ドック マネージャー コンポーネントは ShadowDOM とスロットを使用するため、Internet Explorer 11 および Edge 18 以前 (Chromium 以外のバージョン) などの古いブラウザーではサポートされません。 -ドック マネージャーにはペインのレイアウトを説明する プロパティがあります。レイアウトの定義するには、 プロパティを設定し、子ペインを追加します。以下は、単一のコンテンツ ペインでレイアウトを定義する方法です。 +ドック マネージャーにはペインのレイアウトを説明する プロパティがあります。レイアウトの定義するには、 プロパティを設定し、子ペインを追加します。以下は、単一のコンテンツ ペインでレイアウトを定義する方法です。 ```ts @@ -146,10 +146,10 @@ this.dockManager.layout = { ドック マネージャーは複数の pane types を定義します。 -- -- -- -- +- +- +- +- 各タイプのペインには `Size` プロパティがあります。親の方向に応じて、サイズはペインの幅または高さに影響します。ペインのサイズはその兄弟ペインのサイズに相対し、デフォルトは 100 です。2 つの兄弟ペインがあり、最初のペインのサイズが 200 に設定され、2 番目のペインのサイズが 100 に設定されている場合、最初のペインは 2 番目のペインの 2 倍のサイズになり、これら 2 つのペインが使用可能なスペースをすべて埋めてしまいます。親の絶対サイズが 900px の場合、それぞれ 600px と 300px にサイズ設定されます。特定のペインのサイズをピクセル単位で指定する場合は、使用可能なすべてのスペースの相対的な配分に依存するのではなく、親の分割ペインの `useFixedSize` を設定する必要があります。 @@ -170,7 +170,7 @@ this.dockManager.layout = { ### コンテンツ ペイン - ヘッダーとコンテンツを含むペインを表します。スプリットされたペインまたはタブ グループ ペイン内でホストできます。以下はコンテンツ ペインの定義方法です。 + ヘッダーとコンテンツを含むペインを表します。スプリットされたペインまたはタブ グループ ペイン内でホストできます。以下はコンテンツ ペインの定義方法です。 ```ts @@ -234,7 +234,7 @@ const contentPane: IgrContentPane = { ``` -ペインのピン固定が解除されると、ドック マネージャーのいずれかの端にタブ ヘッダーとして表示されます。エンドユーザーに選択されると、そのコンテンツはドッキングされたピン固定ペインの上に表示されます。コンテンツ ペインのピン固定を解除するには、 プロパティを **false** に設定します。 +ペインのピン固定が解除されると、ドック マネージャーのいずれかの端にタブ ヘッダーとして表示されます。エンドユーザーに選択されると、そのコンテンツはドッキングされたピン固定ペインの上に表示されます。コンテンツ ペインのピン固定を解除するには、 プロパティを **false** に設定します。 ```ts @@ -260,7 +260,7 @@ const contentPane = { `IsPinned` プロパティはドキュメント ホストの外部にドッキングされているコンテンツ ペインのみに影響します。また、フローティング ペインでホストされているコンテンツ ペインのピン固定を解除することはできません。 -デフォルトでは、コンテンツ ペインのピン固定解除先は、ドキュメント ホストに対するペインの相対的な位置に基づいて自動的に計算されます。複数のドキュメント ホストが定義されている場合、ピン固定されていないコンテンツ ペインの親階層で最も近いホストが使用されます。ドキュメント ホストが定義されていない場合、デフォルトの場所 `Left` が使用されます。 プロパティを使用してピン固定が解除されたペインの行き先を設定することも可能です。 +デフォルトでは、コンテンツ ペインのピン固定解除先は、ドキュメント ホストに対するペインの相対的な位置に基づいて自動的に計算されます。複数のドキュメント ホストが定義されている場合、ピン固定されていないコンテンツ ペインの親階層で最も近いホストが使用されます。ドキュメント ホストが定義されていない場合、デフォルトの場所 `Left` が使用されます。 プロパティを使用してピン固定が解除されたペインの行き先を設定することも可能です。 `AllowClose`、`AllowPinning`、`AllowDocking` および `AllowFloating` プロパティを使用して、コンテンツ ペインで許可されるエンドユーザー操作を設定できます。 @@ -268,7 +268,7 @@ const contentPane = { コンテンツ ペインとそのコンテンツに対するユーザーの操作を制限するには、`Disabled` プロパティを true に設定します。これにより、単一のフローティング ペインでない限り、すべてのユーザーがペインを操作できなくなります。後者は移動、最大化、または閉じることができるため (最大化および閉じるためのペインの設定に従って)、ユーザーはその下の要素を見ることができますが、そのコンテンツを操作することはできません。 -デフォルトでは、ペインを閉じると、 オブジェクトから削除されます。ただし、場合によってはペインを一時的に非表示にして後で表示することもできます。 オブジェクトを変更せずにそれを行うには、コンテンツペインの プロパティを使用できます。プロパティを **true** に設定すると UI から非表示になりますが、 オブジェクトに残ります。デフォルトの閉じる動作をオーバーライドするには、このように `PaneClose` イベントにサブスクライブできます。 +デフォルトでは、ペインを閉じると、 オブジェクトから削除されます。ただし、場合によってはペインを一時的に非表示にして後で表示することもできます。 オブジェクトを変更せずにそれを行うには、コンテンツペインの プロパティを使用できます。プロパティを **true** に設定すると UI から非表示になりますが、 オブジェクトに残ります。デフォルトの閉じる動作をオーバーライドするには、このように `PaneClose` イベントにサブスクライブできます。 ```ts @@ -294,7 +294,7 @@ this.dockManager.addEventListener('paneClose', ev => { ### 分割ペイン - は、 プロパティに基づいてすべての子 `Panes` を水平または垂直に積み重ねるコンテナー ペインです。以下は、2 つの子コンテンツ ペインを持つ水平の分割ペインの定義方法です。 + は、 プロパティに基づいてすべての子 `Panes` を水平または垂直に積み重ねるコンテナー ペインです。以下は、2 つの子コンテンツ ペインを持つ水平の分割ペインの定義方法です。 ```ts @@ -344,7 +344,7 @@ const splitPane: IgrSplitPane = { ### タブ グループ ペイン - は、その子コンテンツ `Panes` をタブ コンポーネントのタブとして表示します。以下は、2 つのタブそれぞれにコンテンツ ペインを持つタブ グループ ペインの定義方法です。 + は、その子コンテンツ `Panes` をタブ コンポーネントのタブとして表示します。以下は、2 つのタブそれぞれにコンテンツ ペインを持つタブ グループ ペインの定義方法です。 ```ts @@ -394,7 +394,7 @@ const tabGroupPane: IgrTabGroupPane = { ### ドキュメント ホスト - コード編集やデザイン ビュー用の Visual Studio のタブと同様のドキュメント タブ領域です。以下は、2 つのドキュメント タブを持つドキュメント ホストを定義する方法です。 + コード編集やデザイン ビュー用の Visual Studio のタブと同様のドキュメント タブ領域です。以下は、2 つのドキュメント タブを持つドキュメント ホストを定義する方法です。 ```ts @@ -456,7 +456,7 @@ const docHost: IgrDocumentHost = { ### フローティング ペイン -フローティング ペインは、フローティング ウィンドウで他のペインの上に描画される分割ペインです。フローティング ペインの定義は、 の プロパティに保存されます。以下は、単一のコンテンツ ペインを含むフローティング ペインを追加する方法です。 +フローティング ペインは、フローティング ウィンドウで他のペインの上に描画される分割ペインです。フローティング ペインの定義は、 の プロパティに保存されます。以下は、単一のコンテンツ ペインを含むフローティング ペインを追加する方法です。 ```ts @@ -518,7 +518,7 @@ const layout: IgrDockManagerLayout = { ### アクティブ ペイン -ドック マネージャー コンポーネントは、フォーカスを含むコンテンツ ペインをハイライト表示し、 プロパティで公開します。プロパティを設定することによってアクティブ ペインをプログラムで変更できます。`ActivePaneChanged` イベントにサブスクライブして、 プロパティの変更をリッスンすることもできます。 +ドック マネージャー コンポーネントは、フォーカスを含むコンテンツ ペインをハイライト表示し、 プロパティで公開します。プロパティを設定することによってアクティブ ペインをプログラムで変更できます。`ActivePaneChanged` イベントにサブスクライブして、 プロパティの変更をリッスンすることもできます。 ```ts @@ -544,7 +544,7 @@ this.dockManager.addEventListener('activePaneChanged', ev => { #### ルート ドッキング -このタイプのドッキングでは、ペインをドラッグしているときに、ドックマネージャーの四隅付近に 4 つの矢印ドッキングインジケーターが表示されます。ペインをドロップすると、Dock Manager の の直接の子要素になります。視覚的には、新しくドッキングされたペインはそれぞれの端にスナップされ、ドック マネージャーの幅または高さの最大半分を占め、他のすべてのコンテンツは残りの半分に移動します。 +このタイプのドッキングでは、ペインをドラッグしているときに、ドックマネージャーの四隅付近に 4 つの矢印ドッキングインジケーターが表示されます。ペインをドロップすると、Dock Manager の の直接の子要素になります。視覚的には、新しくドッキングされたペインはそれぞれの端にスナップされ、ドック マネージャーの幅または高さの最大半分を占め、他のすべてのコンテンツは残りの半分に移動します。 dockmanager-root-docking @@ -619,7 +619,7 @@ this.dockManager.layout = { ...this.dockManager.layout }; ### レイアウトの保存／読み込み -レイアウトを復元または永続化するには、 プロパティの値を取得または設定します。以下は、文字列化された JSON としてレイアウトを保存する方法です。 +レイアウトを復元または永続化するには、 プロパティの値を取得または設定します。以下は、文字列化された JSON としてレイアウトを保存する方法です。 ```ts @@ -652,7 +652,7 @@ private loadLayout() { ### Adding Panes At Runtime -Contents and panes can be added to the at runtime. In the example below, you can see how you can add content, document and floating panes. +Contents and panes can be added to the at runtime. In the example below, you can see how you can add content, document and floating panes. @@ -786,16 +786,16 @@ Below you can find a list containing the slot names for all of the buttons as we | Slot name | Description | | ----------|------------ | -| | The close buttons. | -| | The close buttons of the pane headers. | -| | The close buttons of the tab headers. | -| | The more tabs buttons. | -| | The more options buttons. | -| | The maximize buttons. | -| | The minimize buttons. | -| | The pin buttons. | -| | The unpin buttons. | -| | The splitter handle. | +| | The close buttons. | +| | The close buttons of the pane headers. | +| | The close buttons of the tab headers. | +| | The more tabs buttons. | +| | The more options buttons. | +| | The maximize buttons. | +| | The minimize buttons. | +| | The pin buttons. | +| | The unpin buttons. | +| | The splitter handle. | You can find each slot's corresponding part in the **CSS Parts** under **Styling** section of this page. @@ -996,11 +996,11 @@ addResourceStrings('fr', dockManagerStringsFr); The Dock Manager exposes `ResourceStrings` property which allows you to modify the strings. If you set the `ResourceStrings` property, the Dock Manager will use your strings no matter what [lang](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) attribute is set. -## ローカライズ +## API リファレンス - - - - - - +
+
+
+
+
+
diff --git a/docs/xplat/src/content/jp/components/layouts/expansion-panel.mdx b/docs/xplat/src/content/jp/components/layouts/expansion-panel.mdx index e4b423cd45..addc73816b 100644 --- a/docs/xplat/src/content/jp/components/layouts/expansion-panel.mdx +++ b/docs/xplat/src/content/jp/components/layouts/expansion-panel.mdx @@ -250,7 +250,7 @@ igc-expansion-panel::part(subtitle) { ## API リファレンス - +
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/layouts/icon.mdx b/docs/xplat/src/content/jp/components/layouts/icon.mdx index e92e351466..0365ff2f25 100644 --- a/docs/xplat/src/content/jp/components/layouts/icon.mdx +++ b/docs/xplat/src/content/jp/components/layouts/icon.mdx @@ -354,7 +354,7 @@ igc-icon { ## API リファレンス - +
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/layouts/stepper.mdx b/docs/xplat/src/content/jp/components/layouts/stepper.mdx index 962de3dcd8..2cd142313b 100644 --- a/docs/xplat/src/content/jp/components/layouts/stepper.mdx +++ b/docs/xplat/src/content/jp/components/layouts/stepper.mdx @@ -530,10 +530,10 @@ igc-step::part(indicator) { ## API リファレンス - - - - +
+
+
+
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/layouts/tabs.mdx b/docs/xplat/src/content/jp/components/layouts/tabs.mdx index 515bfd2ebd..0726d89c61 100644 --- a/docs/xplat/src/content/jp/components/layouts/tabs.mdx +++ b/docs/xplat/src/content/jp/components/layouts/tabs.mdx @@ -369,11 +369,11 @@ igc-tab::part(tab-header)::before { ## API リファレンス - - - - - +
+
+
+
+
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/layouts/tile-manager.mdx b/docs/xplat/src/content/jp/components/layouts/tile-manager.mdx index 8a70a58310..5738d802fa 100644 --- a/docs/xplat/src/content/jp/components/layouts/tile-manager.mdx +++ b/docs/xplat/src/content/jp/components/layouts/tile-manager.mdx @@ -829,8 +829,8 @@ igc-tile:nth-child(n+2)::part(trigger) { ## その他のリソース - - +
+
- [{ProductName} **フォーラム (英語)**]({ForumsLink}) - [{ProductName} **GitHub (英語)**]({GithubLink}) diff --git a/docs/xplat/src/content/jp/components/linear-gauge.mdx b/docs/xplat/src/content/jp/components/linear-gauge.mdx index 3ba506f9a6..6e13dfff55 100644 --- a/docs/xplat/src/content/jp/components/linear-gauge.mdx +++ b/docs/xplat/src/content/jp/components/linear-gauge.mdx @@ -1189,8 +1189,8 @@ ModuleManager.register( ## API リファレンス - - +
+
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/menus/navbar.mdx b/docs/xplat/src/content/jp/components/menus/navbar.mdx index 2fa2b73f2d..44772caff7 100644 --- a/docs/xplat/src/content/jp/components/menus/navbar.mdx +++ b/docs/xplat/src/content/jp/components/menus/navbar.mdx @@ -219,8 +219,8 @@ igc-navbar::part(middle) { ## API リファレンス - - +
+
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/menus/navigation-drawer.mdx b/docs/xplat/src/content/jp/components/menus/navigation-drawer.mdx index b63a0e135e..ed95a6bd90 100644 --- a/docs/xplat/src/content/jp/components/menus/navigation-drawer.mdx +++ b/docs/xplat/src/content/jp/components/menus/navigation-drawer.mdx @@ -568,14 +568,14 @@ igc-nav-drawer-header-item { ## API リファレンス - - - - - - - - +
+
+
+
+
+
+
+
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/menus/toolbar.mdx b/docs/xplat/src/content/jp/components/menus/toolbar.mdx index f3e484cdb6..fbdef518e8 100644 --- a/docs/xplat/src/content/jp/components/menus/toolbar.mdx +++ b/docs/xplat/src/content/jp/components/menus/toolbar.mdx @@ -603,8 +603,8 @@ The icon component can be styled by using it's `BaseTheme` property directly to ## API References - - +
+
## Additional Resources diff --git a/docs/xplat/src/content/jp/components/notifications/banner.mdx b/docs/xplat/src/content/jp/components/notifications/banner.mdx index d25f729f72..7a74c3ab61 100644 --- a/docs/xplat/src/content/jp/components/notifications/banner.mdx +++ b/docs/xplat/src/content/jp/components/notifications/banner.mdx @@ -667,12 +667,12 @@ igc-banner::part(content) { ## API リファレンス - - - - - - +
+
+
+
+
+
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/notifications/dialog.mdx b/docs/xplat/src/content/jp/components/notifications/dialog.mdx index bb723861a4..2d594eb3fd 100644 --- a/docs/xplat/src/content/jp/components/notifications/dialog.mdx +++ b/docs/xplat/src/content/jp/components/notifications/dialog.mdx @@ -226,7 +226,7 @@ igc-dialog::part(footer) { ## API リファレンス - +
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/notifications/snackbar.mdx b/docs/xplat/src/content/jp/components/notifications/snackbar.mdx index a52f0677e3..35e845a1ac 100644 --- a/docs/xplat/src/content/jp/components/notifications/snackbar.mdx +++ b/docs/xplat/src/content/jp/components/notifications/snackbar.mdx @@ -194,7 +194,7 @@ igc-snackbar::part(base) { ## API リファレンス - +
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/notifications/toast.mdx b/docs/xplat/src/content/jp/components/notifications/toast.mdx index cffa91404e..e1be81f54f 100644 --- a/docs/xplat/src/content/jp/components/notifications/toast.mdx +++ b/docs/xplat/src/content/jp/components/notifications/toast.mdx @@ -292,7 +292,7 @@ igc-toast { ## API リファレンス - +
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/radial-gauge.mdx b/docs/xplat/src/content/jp/components/radial-gauge.mdx index 4d9117f6a6..6acd8e67dd 100644 --- a/docs/xplat/src/content/jp/components/radial-gauge.mdx +++ b/docs/xplat/src/content/jp/components/radial-gauge.mdx @@ -1243,8 +1243,8 @@ IgrRadialGaugeModule.register(); ## API リファレンス - - +
+
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/scheduling/calendar.mdx b/docs/xplat/src/content/jp/components/scheduling/calendar.mdx index 5a07ae37df..f065b5ba3d 100644 --- a/docs/xplat/src/content/jp/components/scheduling/calendar.mdx +++ b/docs/xplat/src/content/jp/components/scheduling/calendar.mdx @@ -326,7 +326,7 @@ public onRadioChange(e: any) { ### 日付の無効化 -場合によっては、エンド ユーザーが選択できない Calendar の日付を無効にしたいことがあります。この機能は、`DisabledDates` プロパティを使用して実現されます。`DisabledDates` プロパティは、 オブジェクトの配列です。各記述子には `Type` があり、オプションで `Date` オブジェクトの配列である `DateRange` があります。 +場合によっては、エンド ユーザーが選択できない Calendar の日付を無効にしたいことがあります。この機能は、`DisabledDates` プロパティを使用して実現されます。`DisabledDates` プロパティは、`DateRangeDescriptor` オブジェクトの配列です。各記述子には `Type` があり、オプションで `Date` オブジェクトの配列である `DateRange` があります。 `Type` プロパティで使用できるオプションは次のとおりです: @@ -714,10 +714,10 @@ igc-calendar::part(navigation-button):focus { ## API リファレンス - - - - +
+
+
+`DateRangeDescriptor` ## その他のリソース diff --git a/docs/xplat/src/content/jp/components/scheduling/date-picker.mdx b/docs/xplat/src/content/jp/components/scheduling/date-picker.mdx index 218a53016e..029d3dfe63 100644 --- a/docs/xplat/src/content/jp/components/scheduling/date-picker.mdx +++ b/docs/xplat/src/content/jp/components/scheduling/date-picker.mdx @@ -530,9 +530,9 @@ igc-date-picker::part(year-inner selected) { ## API リファレンス - - - +
+
+
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/scheduling/date-range-picker.mdx b/docs/xplat/src/content/jp/components/scheduling/date-range-picker.mdx index b95b9b8cb1..c09c5c0455 100644 --- a/docs/xplat/src/content/jp/components/scheduling/date-range-picker.mdx +++ b/docs/xplat/src/content/jp/components/scheduling/date-range-picker.mdx @@ -989,11 +989,11 @@ igc-date-range-picker::part(clear-icon-end) { ## API リファレンス - - - - - +
+
+
+
+
## その他のリソース diff --git a/docs/xplat/src/content/jp/components/spreadsheet-activation.mdx b/docs/xplat/src/content/jp/components/spreadsheet-activation.mdx index 58630a8fa4..06bd999b8e 100644 --- a/docs/xplat/src/content/jp/components/spreadsheet-activation.mdx +++ b/docs/xplat/src/content/jp/components/spreadsheet-activation.mdx @@ -31,11 +31,11 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; ## アクティベーションの概要 -{Platform} コントロールのアクティブ化は、スプレッドシートの現在の のセル、ペイン、およびワークシート間で分割されます。3 つの アクティブなプロパティは以下のとおりです。 +{Platform} コントロールのアクティブ化は、スプレッドシートの現在の のセル、ペイン、およびワークシート間で分割されます。3 つの アクティブなプロパティは以下のとおりです。 -- : スプレッドシートのアクティブ セルを設定します。設定するには、 の新しいインスタンスを作成し、そのセルに関する列と行、またはセルの文字列アドレスなどの情報を渡す必要があります。 +- : スプレッドシートのアクティブ セルを設定します。設定するには、 の新しいインスタンスを作成し、そのセルに関する列と行、またはセルの文字列アドレスなどの情報を渡す必要があります。 - : スプレッドシート コントロールの現在アクティブなワークシートのアクティブ ペインを返します。 -- : スプレッドシート コントロールの 内のアクティブ ワークシートを返すか、設定します。これは、スプレッドシートに添付されている 内の既存のワークシートに設定することで設定できます。 +- : スプレッドシート コントロールの 内のアクティブ ワークシートを返すか、設定します。これは、スプレッドシートに添付されている 内の既存のワークシートに設定することで設定できます。 ## コード スニペット @@ -50,6 +50,6 @@ this.spreadsheet.activeCell = new SpreadsheetCell("C5"); ## API リファレンス - - - +
+
+
diff --git a/docs/xplat/src/content/jp/components/spreadsheet-chart-adapter.mdx b/docs/xplat/src/content/jp/components/spreadsheet-chart-adapter.mdx index 246d5e53da..661acf597d 100644 --- a/docs/xplat/src/content/jp/components/spreadsheet-chart-adapter.mdx +++ b/docs/xplat/src/content/jp/components/spreadsheet-chart-adapter.mdx @@ -221,6 +221,6 @@ ExcelUtility.loadFromUrl(process.env.PUBLIC_URL + "/ExcelFiles/ChartData.xlsx"). ## API リファレンス - - - +
+
+
diff --git a/docs/xplat/src/content/jp/components/spreadsheet-clipboard.mdx b/docs/xplat/src/content/jp/components/spreadsheet-clipboard.mdx index ebe3866ef7..1dd9543a49 100644 --- a/docs/xplat/src/content/jp/components/spreadsheet-clipboard.mdx +++ b/docs/xplat/src/content/jp/components/spreadsheet-clipboard.mdx @@ -27,7 +27,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; ## 依存関係 -クリップボードを利用する前に、 列挙型をインポートします。 +クリップボードを利用する前に、 列挙型をインポートします。 @@ -80,5 +80,5 @@ public paste(): void { ## API リファレンス - - +
+
diff --git a/docs/xplat/src/content/jp/components/spreadsheet-commands.mdx b/docs/xplat/src/content/jp/components/spreadsheet-commands.mdx index da57669f36..67939a58fc 100644 --- a/docs/xplat/src/content/jp/components/spreadsheet-commands.mdx +++ b/docs/xplat/src/content/jp/components/spreadsheet-commands.mdx @@ -27,7 +27,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; ## 依存関係 -コマンドボードを利用する前に、 をインポートします。 +コマンドボードを利用する前に、 をインポートします。 @@ -121,4 +121,4 @@ function zoomOut(): void { ## API リファレンス - +
diff --git a/docs/xplat/src/content/jp/components/spreadsheet-conditional-formatting.mdx b/docs/xplat/src/content/jp/components/spreadsheet-conditional-formatting.mdx index fb29c648f2..d12ffbb959 100644 --- a/docs/xplat/src/content/jp/components/spreadsheet-conditional-formatting.mdx +++ b/docs/xplat/src/content/jp/components/spreadsheet-conditional-formatting.mdx @@ -27,33 +27,33 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; ## 条件付き書式設定の概要 -特定のワークシートの条件付き書式を構成するには、ワークシートの コレクションに公開される `Add` メソッドを使用できます。この `Add` メソッドの最初のパラメーターは条件付き書式に適用するワークシートの string 領域です。 +特定のワークシートの条件付き書式を構成するには、ワークシートの `ConditionalFormats` コレクションに公開される `Add` メソッドを使用できます。この `Add` メソッドの最初のパラメーターは条件付き書式に適用するワークシートの string 領域です。 ワークシートに追加できる条件付き書式の多くには、その条件付き書式の条件が満たされたときにセルを表示する方法を決定する `CellFormat` プロパティがあります。たとえば、`Fill` および `Font` などのこの `CellFormat` プロパティにアタッチされるプロパティを使用してセルの背景およびフォント設定を決定できます。 条件付き書式が作成され、`CellFormat` が適用される場合、ワークシートのセルにサポートされるプロパティのサブセットがあります。現在サポートされる `CellFormat` プロパティは `Fill`、`Border` プロパティ、`FormatString`、および strikethrough、underline、italic、bold、color などの `Font` プロパティです。以下のコード スニペットに複数のプロパティが設定されます。 -ワーク セルの可視化の動作が異なるため、`CellFormat` プロパティがない条件付き書式もあります。この条件付き書式は 、、 です。 +ワーク セルの可視化の動作が異なるため、`CellFormat` プロパティがない条件付き書式もあります。この条件付き書式は `DataBarConditionalFormat`、`ColorScaleConditionalFormat`、`IconSetConditionalFormat` です。 既存の Workbook を Excel から読み込む際に、ワークブックが読み込まれた場合も書式設定は保持されます。ワークブックを Excel ファイルに保存する場合も保持されます。 以下は、{Platform} コントロールでサポートされている条件付き書式の一覧です。 -- : `AddAverageCondition` メソッドを使用して追加されたこの条件付きフォーマットは、セルの値が関連する範囲の平均または標準偏差より上か下かに基づいて、ワークシートセルの視覚属性を制御するプロパティを公開します。 -- : `AddBlanksCondition` メソッドを使用して追加されたこの条件付き書式では、セルの値が設定されていないかどうかに基づいてワークシートセルの表示属性を制御するプロパティを公開します。 -- : `AddColorScaleCondition` メソッドを使用して追加された条件付き書式は、最小値、中央値、最大値に対するセルの値に基づいてワークシート セルの色を制御するプロパティを公開します。 -- : `AddDataBarCondition` メソッドを使用して追加されたこの条件付き書式は、関連付けられた値の範囲に対するセルの値に基づいてワークシートのセルにデータバーを表示するプロパティを公開します。 -- : `AddDateTimeCondition` メソッドを使用して追加されたこの条件付き書式は、セルの日付値が指定された時間範囲内にあるかどうかに基づいてワークシートセルの表示属性を制御するプロパティを公開します。 -- : `AddDuplicateCondition` メソッドを使用して追加されたこの条件付き書式は、セルの値が一意であるか、関連付けられた範囲全体で複製されるかに基づいてワークシートセルの表示属性を制御するプロパティを公開します。 -- : `AddErrorsCondition` メソッドを使用して追加されたこの条件付き書式では、セルの値が設定されていないかどうかに基づいてワークシートセルの表示属性を制御するプロパティを公開します。 -- : `AddFormulaCondition` メソッドを使用して追加されたこの条件付き書式は、セルの値が式で定義された基準を満たすかどうかに基づいてワークシート セルの表示属性を制御するプロパティを公開します。 -- : `AddIconSetCondition` メソッドを使用して追加されたこの条件付き書式は、しきい値に対するセルの値に基づいてワークシートのセルにアイコンを表示するプロパティを公開します。 -- : `AddNoBlanksCondition` メソッドを使用して追加されたこの条件付き書式では、セルの値が設定されていないかどうかに基づいてワークシートセルの表示属性を制御するプロパティを公開します。 -- : `AddNoErrorsCondition` メソッドを使用して追加されたこの条件付き書式では、セルの値が設定されていないかどうかに基づいてワークシートセルの表示属性を制御するプロパティを公開します。 -- : `AddOperatorCondition` メソッドを使用して追加されたこの条件付き書式は、セルの値が論理演算子で定義された基準を満たすかどうかに基づいてワークシートセルの視覚属性を制御するプロパティを公開します。 -- : `AddRankCondition` メソッドを使用して追加されたこの条件付き書式は、セルの値が関連する範囲全体の値の最下位ランクの上部にあるかどうかに基づいてワークシート セルの表示属性を制御するプロパティを公開します。 -- : `AddRankCondition` メソッドを使用して追加されたこの条件付き書式は、セルのテキスト値が `AddTextCondition` メソッドのパラメーターの文字列および 値にで定義された基準を満たすかどうかに基づいてワークシート セルのビジュアル属性を制御するプロパティを公開します。 -- : `AddUniqueCondition` メソッドを使用して追加されたこの条件付き書式は、セルの値が関連付けられた範囲全体で一意であるかどうかに基づいてワークシートセルの表示属性を制御するプロパティを公開します。 +- `AverageConditionalFormat`: `AddAverageCondition` メソッドを使用して追加されたこの条件付きフォーマットは、セルの値が関連する範囲の平均または標準偏差より上か下かに基づいて、ワークシートセルの視覚属性を制御するプロパティを公開します。 +- `BlanksConditionalFormat`: `AddBlanksCondition` メソッドを使用して追加されたこの条件付き書式では、セルの値が設定されていないかどうかに基づいてワークシートセルの表示属性を制御するプロパティを公開します。 +- `ColorScaleConditionalFormat`: `AddColorScaleCondition` メソッドを使用して追加された条件付き書式は、最小値、中央値、最大値に対するセルの値に基づいてワークシート セルの色を制御するプロパティを公開します。 +- `DataBarConditionalFormat`: `AddDataBarCondition` メソッドを使用して追加されたこの条件付き書式は、関連付けられた値の範囲に対するセルの値に基づいてワークシートのセルにデータバーを表示するプロパティを公開します。 +- `DateTimeConditionalFormat`: `AddDateTimeCondition` メソッドを使用して追加されたこの条件付き書式は、セルの日付値が指定された時間範囲内にあるかどうかに基づいてワークシートセルの表示属性を制御するプロパティを公開します。 +- `DuplicateConditionalFormat`: `AddDuplicateCondition` メソッドを使用して追加されたこの条件付き書式は、セルの値が一意であるか、関連付けられた範囲全体で複製されるかに基づいてワークシートセルの表示属性を制御するプロパティを公開します。 +- `ErrorsConditionalFormat`: `AddErrorsCondition` メソッドを使用して追加されたこの条件付き書式では、セルの値が設定されていないかどうかに基づいてワークシートセルの表示属性を制御するプロパティを公開します。 +- `FormulaConditionalFormat`: `AddFormulaCondition` メソッドを使用して追加されたこの条件付き書式は、セルの値が式で定義された基準を満たすかどうかに基づいてワークシート セルの表示属性を制御するプロパティを公開します。 +- `IconSetConditionalFormat`: `AddIconSetCondition` メソッドを使用して追加されたこの条件付き書式は、しきい値に対するセルの値に基づいてワークシートのセルにアイコンを表示するプロパティを公開します。 +- `NoBlanksConditionalFormat`: `AddNoBlanksCondition` メソッドを使用して追加されたこの条件付き書式では、セルの値が設定されていないかどうかに基づいてワークシートセルの表示属性を制御するプロパティを公開します。 +- `NoErrorsConditionalFormat`: `AddNoErrorsCondition` メソッドを使用して追加されたこの条件付き書式では、セルの値が設定されていないかどうかに基づいてワークシートセルの表示属性を制御するプロパティを公開します。 +- `OperatorConditionalFormat`: `AddOperatorCondition` メソッドを使用して追加されたこの条件付き書式は、セルの値が論理演算子で定義された基準を満たすかどうかに基づいてワークシートセルの視覚属性を制御するプロパティを公開します。 +- `RankConditionalFormat`: `AddRankCondition` メソッドを使用して追加されたこの条件付き書式は、セルの値が関連する範囲全体の値の最下位ランクの上部にあるかどうかに基づいてワークシート セルの表示属性を制御するプロパティを公開します。 +- `TextOperatorConditionalFormat`: `AddRankCondition` メソッドを使用して追加されたこの条件付き書式は、セルのテキスト値が `AddTextCondition` メソッドのパラメーターの文字列および `FormatConditionTextOperator` 値にで定義された基準を満たすかどうかに基づいてワークシート セルのビジュアル属性を制御するプロパティを公開します。 +- `UniqueConditionalFormat`: `AddUniqueCondition` メソッドを使用して追加されたこの条件付き書式は、セルの値が関連付けられた範囲全体で一意であるかどうかに基づいてワークシートセルの表示属性を制御するプロパティを公開します。 ## 依存関係 @@ -176,23 +176,23 @@ uniqueFormat.cellFormat.font.colorInfo = new WorkbookColorInfo(blue); ## API リファレンス - - - - - - - - - - - - - - - - - +`AverageConditionalFormat`
+`BlanksConditionalFormat`
+`ColorScaleConditionalFormat`
+`DataBarConditionalFormat`
+`DateTimeConditionalFormat`
+`DuplicateConditionalFormat`
+`ErrorsConditionalFormat`
+`FormulaConditionalFormat`
+`IconSetConditionalFormat`
+`NoBlanksConditionalFormat`
+`NoErrorsConditionalFormat`
+`OperatorConditionalFormat`
+`RankConditionalFormat`
+`TextOperatorConditionalFormat`
+`UniqueConditionalFormat`
+`FormatConditionTextOperator`
+
 diff --git a/docs/xplat/src/content/jp/components/spreadsheet-configuring.mdx b/docs/xplat/src/content/jp/components/spreadsheet-configuring.mdx index 9ae3594aac..e1282f83e8 100644 --- a/docs/xplat/src/content/jp/components/spreadsheet-configuring.mdx +++ b/docs/xplat/src/content/jp/components/spreadsheet-configuring.mdx @@ -354,7 +354,7 @@ this.spreadsheet.zoomLevel = 200; ## API リファレンス - - - - +
+
+
+
diff --git a/docs/xplat/src/content/jp/components/spreadsheet-data-validation.mdx b/docs/xplat/src/content/jp/components/spreadsheet-data-validation.mdx index 8c1fbcc442..bbbe30930a 100644 --- a/docs/xplat/src/content/jp/components/spreadsheet-data-validation.mdx +++ b/docs/xplat/src/content/jp/components/spreadsheet-data-validation.mdx @@ -152,7 +152,7 @@ this.spreadsheet.workbook.worksheets(0).rows(7).cells(0).value = "Check Out Date ## API References - +
 diff --git a/docs/xplat/src/content/jp/components/spreadsheet-hyperlinks.mdx b/docs/xplat/src/content/jp/components/spreadsheet-hyperlinks.mdx index 853877e615..e85f496670 100644 --- a/docs/xplat/src/content/jp/components/spreadsheet-hyperlinks.mdx +++ b/docs/xplat/src/content/jp/components/spreadsheet-hyperlinks.mdx @@ -65,8 +65,8 @@ this.spreadsheet.activeWorksheet.hyperlinks().add(new WorksheetHyperlink("A1", " ## API リファレンス - - +
+
 diff --git a/docs/xplat/src/content/jp/components/spreadsheet-overview.mdx b/docs/xplat/src/content/jp/components/spreadsheet-overview.mdx index 4f6485b8d9..3c128f908a 100644 --- a/docs/xplat/src/content/jp/components/spreadsheet-overview.mdx +++ b/docs/xplat/src/content/jp/components/spreadsheet-overview.mdx @@ -229,5 +229,5 @@ ExcelUtility.loadFromUrl(excelFile).then((w: Workbook) => { ## API リファレンス - - +
+
diff --git a/docs/xplat/src/content/jp/components/themes/configuration.mdx b/docs/xplat/src/content/jp/components/themes/configuration.mdx index c87d734ff4..3059a39605 100644 --- a/docs/xplat/src/content/jp/components/themes/configuration.mdx +++ b/docs/xplat/src/content/jp/components/themes/configuration.mdx @@ -103,4 +103,4 @@ igc-dropdown { ## API リファレンス - +
diff --git a/docs/xplat/src/content/jp/components/themes/elevations.mdx b/docs/xplat/src/content/jp/components/themes/elevations.mdx index e9ba4e0cca..49cece04fd 100644 --- a/docs/xplat/src/content/jp/components/themes/elevations.mdx +++ b/docs/xplat/src/content/jp/components/themes/elevations.mdx @@ -90,4 +90,4 @@ igc-toast { ## API リファレンス - +`Elevations` diff --git a/docs/xplat/src/content/jp/components/themes/overview.mdx b/docs/xplat/src/content/jp/components/themes/overview.mdx index 96d07d8d30..2bdfab1345 100644 --- a/docs/xplat/src/content/jp/components/themes/overview.mdx +++ b/docs/xplat/src/content/jp/components/themes/overview.mdx @@ -82,4 +82,4 @@ configureTheme("material"); ## API リファレンス - +
 diff --git a/docs/xplat/src/content/jp/components/themes/palettes.mdx b/docs/xplat/src/content/jp/components/themes/palettes.mdx index 880f916f99..bf7e2584c6 100644 --- a/docs/xplat/src/content/jp/components/themes/palettes.mdx +++ b/docs/xplat/src/content/jp/components/themes/palettes.mdx @@ -183,4 +183,4 @@ class 属性の値を `blue-theme` から `red-theme` に変更することで ## API リファレンス - +`Palettes` diff --git a/docs/xplat/src/content/jp/components/themes/styles.mdx b/docs/xplat/src/content/jp/components/themes/styles.mdx index 06566f8a5e..71c6c0f2fa 100644 --- a/docs/xplat/src/content/jp/components/themes/styles.mdx +++ b/docs/xplat/src/content/jp/components/themes/styles.mdx @@ -57,4 +57,4 @@ CSS パーツと CSS 変数について学び、ドキュメントに記載さ ## API リファレンス - +
diff --git a/docs/xplat/src/content/jp/components/themes/typography.mdx b/docs/xplat/src/content/jp/components/themes/typography.mdx index 95a7e7c0c2..1729c70127 100644 --- a/docs/xplat/src/content/jp/components/themes/typography.mdx +++ b/docs/xplat/src/content/jp/components/themes/typography.mdx @@ -68,4 +68,4 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; ## API リファレンス - +`Typography` diff --git a/docs/xplat/src/content/jp/components/zoomslider-overview.mdx b/docs/xplat/src/content/jp/components/zoomslider-overview.mdx index 3b0a243131..3c00201502 100644 --- a/docs/xplat/src/content/jp/components/zoomslider-overview.mdx +++ b/docs/xplat/src/content/jp/components/zoomslider-overview.mdx @@ -157,5 +157,5 @@ IgcZoomSliderModule.register(); ## API リファレンス - - +
+
diff --git a/docs/xplat/src/content/jp/toc.json b/docs/xplat/src/content/jp/toc.json index 4f8a31cfc4..8c67fb1d96 100644 --- a/docs/xplat/src/content/jp/toc.json +++ b/docs/xplat/src/content/jp/toc.json @@ -2667,302 +2667,5 @@ "name": "カスタム Tailwind クラス", "href": "themes/tailwind.md", "new": true - }, - { - "exclude": [ - "Angular" - ], - "name": "非推奨のコンポーネント", - "header": true - }, - { - "exclude": [ - "Angular" - ], - "name": "テーブル / グリッド", - "href": "grids/data-grid/overview.md", - "items": [ - { - "exclude": [ - "Angular" - ], - "name": "アクセシビリティの遵守", - "href": "grids/data-grid/accessibility.md", - "premium": true - }, - { - "exclude": [ - "Angular" - ], - "name": "ライブ データのバインディング", - "href": "grids/data-grid/live-data.md", - "premium": true - }, - { - "exclude": [ - "Angular" - ], - "name": "ローカル データ ソースのバインディング", - "href": "grids/data-grid/local-data.md", - "premium": true - }, - { - "exclude": [ - "Angular" - ], - "name": "ローカリゼーション", - "href": "grids/data-grid/localization.md", - "premium": true - }, - { - "exclude": [ - "Angular", - "Blazor" - ], - "name": "比較データのバインディング", - "href": "grids/data-grid/type-comparison-table.md", - "premium": true - }, - { - "exclude": [ - "Angular", - "React", - "Blazor" - ], - "name": "ヒートマップ データのバインディング", - "href": "grids/data-grid/type-heatmap-table.md", - "premium": true - }, - { - "exclude": [ - "Angular", - "React", - "Blazor" - ], - "name": "マトリックス データのバインディング", - "href": "grids/data-grid/type-matrix-table.md", - "premium": true - }, - { - "exclude": [ - "Angular", - "React", - "Blazor" - ], - "name": "周期表のバインディング", - "href": "grids/data-grid/type-periodic-table.md", - "premium": true - }, - { - "exclude": [ - "Angular", - "React", - "Blazor" - ], - "name": "仮想データのバインディン", - "href": "grids/data-grid/remote-data.md", - "premium": true - }, - { - "exclude": [ - "Angular" - ], - "name": "セルのアクティブ化", - "href": "grids/data-grid/cell-activation.md", - "premium": true - }, - { - "exclude": [ - "Angular" - ], - "name": "グリッドの編集", - "href": "grids/data-grid/cell-editing.md", - "premium": true - }, - { - "exclude": [ - "Angular" - ], - "name": "セルの結合", - "href": "grids/data-grid/cell-merging.md", - "premium": true - }, - { - "exclude": [ - "Angular" - ], - "name": "セルの選択", - "href": "grids/data-grid/cell-selection.md", - "premium": true - }, - { - "exclude": [ - "Angular" - ], - "name": "列のアニメーション", - "href": "grids/data-grid/column-animation.md", - "premium": true - }, - { - "exclude": [ - "Angular" - ], - "name": "列のフィルタリング", - "href": "grids/data-grid/column-filtering.md", - "premium": true - }, - { - "exclude": [ - "Angular" - ], - "name": "列の移動", - "href": "grids/data-grid/column-moving.md", - "premium": true - }, - { - "exclude": [ - "Angular" - ], - "name": "列の選択", - "href": "grids/data-grid/column-chooser.md", - "premium": true - }, - { - "exclude": [ - "Angular" - ], - "name": "列のオプション", - "href": "grids/data-grid/column-options.md", - "premium": true - }, - { - "exclude": [ - "Angular" - ], - "name": "列のピン固定", - "href": "grids/data-grid/column-pinning.md", - "premium": true - }, - { - "exclude": [ - "Angular" - ], - "name": "列のサイズ変更", - "href": "grids/data-grid/column-resizing.md", - "premium": true - }, - { - "exclude": [ - "Angular" - ], - "name": "列のソート", - "href": "grids/data-grid/column-sorting.md", - "premium": true - }, - { - "exclude": [ - "Angular" - ], - "name": "列のスパークライン", - "href": "grids/data-grid/type-sparkline-table.md", - "premium": true - }, - { - "exclude": [ - "Angular" - ], - "name": "列の集計", - "href": "grids/data-grid/column-summaries.md", - "premium": true - }, - { - "exclude": [ - "Angular" - ], - "name": "列のタイプ", - "href": "grids/data-grid/column-types.md", - "premium": true - }, - { - "exclude": [ - "Angular" - ], - "name": "高パフォーマンス", - "href": "grids/data-grid/performance.md", - "premium": true - }, - { - "exclude": [ - "Angular" - ], - "name": "水平方向のスクロール", - "href": "grids/data-grid/horizontal-scrolling.md", - "premium": true - }, - { - "exclude": [ - "Angular" - ], - "name": "グリッド レイアウトの読み込みと保存", - "href": "grids/data-grid/load-save-layout.md", - "premium": true - }, - { - "exclude": [ - "Angular" - ], - "name": "行のグループ化", - "href": "grids/data-grid/row-grouping.md", - "premium": true - }, - { - "exclude": [ - "Angular" - ], - "name": "行のハイライト表示", - "href": "grids/data-grid/row-highlighting.md", - "premium": true - }, - { - "exclude": [ - "Angular" - ], - "name": "行のページング", - "href": "grids/data-grid/row-paging.md", - "premium": true - }, - { - "exclude": [ - "Angular" - ], - "name": "行のピン固定", - "href": "grids/data-grid/row-pinning.md", - "premium": true - }, - { - "exclude": [ - "Angular" - ], - "name": "テーマ設定", - "href": "grids/theming.md", - "premium": true - } - ] - }, - { - "exclude": [ - "Angular" - ], - "name": "複数列コンボ ボックス", - "href": "editors/multi-column-combobox.md", - "premium": true - }, - { - "exclude": [ - "Angular" - ], - "name": "XDate ピッカー", - "href": "editors/xdate-picker.md", - "premium": true } ] \ No newline at end of file diff --git a/package.json b/package.json index 6dfcad5256..7fba7dde55 100644 --- a/package.json +++ b/package.json @@ -95,7 +95,17 @@ "xplat:build-production:angular:jp": "npm run build-production:angular:jp --prefix docs/xplat", "xplat:build-production:react:jp": "npm run build-production:react:jp --prefix docs/xplat", "xplat:build-production:webcomponents:jp": "npm run build-production:webcomponents:jp --prefix docs/xplat", - "xplat:build-production:blazor:jp": "npm run build-production:blazor:jp --prefix docs/xplat" + "xplat:build-production:blazor:jp": "npm run build-production:blazor:jp --prefix docs/xplat", + "check-api-links": "node scripts/check-api-links.mjs", + "check-api-links:angular": "node scripts/check-api-links.mjs --platform=angular", + "check-api-links:react": "node scripts/check-api-links.mjs --platform=react", + "check-api-links:wc": "node scripts/check-api-links.mjs --platform=wc", + "check-api-links:blazor": "node scripts/check-api-links.mjs --platform=blazor", + "check-api-links:report": "node scripts/check-api-links.mjs --md=api-link-report.md", + "check-api-links:report:angular": "node scripts/check-api-links.mjs --platform=angular --md=api-link-report-angular.md", + "check-api-links:report:react": "node scripts/check-api-links.mjs --platform=react --md=api-link-report-react.md", + "check-api-links:report:wc": "node scripts/check-api-links.mjs --platform=wc --md=api-link-report-wc.md", + "check-api-links:report:blazor": "node scripts/check-api-links.mjs --platform=blazor --md=api-link-report-blazor.md" }, "dependencies": { "@astrojs/check": "^0.9.8", diff --git a/scripts/check-api-links.mjs b/scripts/check-api-links.mjs new file mode 100644 index 0000000000..1106ef7c5d --- /dev/null +++ b/scripts/check-api-links.mjs @@ -0,0 +1,460 @@ +#!/usr/bin/env node +/** + * Crawls all HTML files in the dist/ build output and checks every link that + * targets staging.infragistics.com/api. + * + * Built docs always embed /latest/ in API URLs. The staging server does not + * serve /latest/ — it only has versioned paths (21.2.0, 21.0.0, …) that differ + * per package. Before checking links we probe each unique package root to + * discover its real version via redirect, then rewrite /latest/ accordingly. + * + * Broken link detection: the API server returns HTTP 200 for missing types/members + * and renders a "Page not found" page inside .igd-main-content. We detect this + * by reading the response body and looking for a known marker string. + * + * Usage: + * node scripts/check-api-links.mjs + * node scripts/check-api-links.mjs --dist=dist + * node scripts/check-api-links.mjs --platform=angular + * node scripts/check-api-links.mjs --concurrency=20 + * node scripts/check-api-links.mjs --timeout=15000 + * node scripts/check-api-links.mjs --output=api-link-report.json + * node scripts/check-api-links.mjs --md=api-link-report.md + * + * Exit code: 0 = all OK, 1 = broken links found. + */ + +import { readFileSync, readdirSync, writeFileSync } from 'node:fs'; +import { join, relative } from 'node:path'; + +// CLI args + +const args = Object.fromEntries( + process.argv.slice(2) + .filter(a => a.startsWith('--')) + .map(a => { + const [k, ...rest] = a.slice(2).split('='); + return [k, rest.length ? rest.join('=') : true]; + }) +); + +const DIST_DIR = String(args.dist ?? 'dist'); +const PLATFORM = args.platform ? String(args.platform) : null; +const CONCURRENCY = parseInt(String(args.concurrency ?? '20'), 10); +const TIMEOUT_MS = parseInt(String(args.timeout ?? '15000'), 10); +const OUTPUT = args.output ? String(args.output) : null; +const MD_OUTPUT = args.md ? String(args.md) : null; + +// Constants + +const HREF_RE = /href="(https:\/\/staging\.infragistics\.com\/api[^"#]+(?:#[^"]+)?)"/g; + +// Extracts the package root from a /latest/ URL. +// e.g. https://staging.infragistics.com/api/angular/igniteui-angular/latest/... +// → https://staging.infragistics.com/api/angular/igniteui-angular/ +const PKG_ROOT_RE = /^(https:\/\/staging\.infragistics\.com\/api\/[^/]+\/[^/]+\/)latest\//; + +const FOLDER_LABELS = { + angular: 'Angular (EN)', + 'angular-jp': 'Angular (JP)', + react: 'React (EN)', + 'react-jp': 'React (JP)', + wc: 'WebComponents (EN)', + 'wc-jp': 'WebComponents (JP)', + blazor: 'Blazor (EN)', + 'blazor-jp': 'Blazor (JP)', +}; + +/** Subfolders to skip inside each platform build - no API links there. */ +const SKIP_DIRS = new Set(['_astro', 'pagefind', 'images']); + +// The staging API server returns HTTP 200 for every URL - even for missing +// types/members. The only reliable signal is the breadcrumb inside +// .igd-main-content: on a 404 page it contains title="Page not found", while +// on a real API page it shows the actual class/interface/type name. +// Using the breadcrumb attribute is far more specific than checking for a +// generic string like "

Page not found.

" which can appear in page content. +const NOT_FOUND_MARKER = 'class="docs-breadcrumb-crumb" title="Page not found"'; + +// File walking +function walkHtml(dir) { + const results = []; + for (const entry of readdirSync(dir, { withFileTypes: true })) { + const full = join(dir, entry.name); + if (entry.isDirectory()) { + if (!SKIP_DIRS.has(entry.name)) results.push(...walkHtml(full)); + } else if (entry.isFile() && entry.name.endsWith('.html')) { + results.push(full); + } + } + return results; +} + +/** Returns a Set of staging API href values found in the given HTML file. */ +function extractLinks(filePath) { + const html = readFileSync(filePath, 'utf-8'); + const links = new Set(); + for (const m of html.matchAll(HREF_RE)) links.add(m[1]); + return links; +} + +// Version discovery + +/** + * Discovers the real version for each package that uses /latest/ URLs. + * + * Strategy: + * 1. Pick one sample URL per package root. + * 2. Fetch + * 3. Check res.url first: if the server redirected to a versioned path, done. + * 4. Otherwise the response body for version-like links that match the + * same package root (e.g. href="…/igniteui-angular/21.2.0/…"). The + * NOT_FOUND page includes a full site navigation that references real + * versioned URLs, which we can extract. + * + * Returns a Map. + */ +async function discoverVersions(urls) { + // Collect unique package roots from /latest/ URLs + const roots = new Set(); + for (const url of urls) { + const m = url.match(PKG_ROOT_RE); + if (m) roots.add(m[1]); + } + if (roots.size === 0) return new Map(); + + const versionMap = new Map(); + + // Every /latest/ page embeds a `latestVersions` JS variable mapping + // package name → current version. One fetch resolves all packages at once. + const sampleUrl = [...urls].find(u => PKG_ROOT_RE.test(u))?.split('#')[0]; + if (!sampleUrl) return versionMap; + + const controller = new AbortController(); + const timer = setTimeout(() => controller.abort(), TIMEOUT_MS); + try { + const res = await fetch(sampleUrl, { + method: 'GET', + signal: controller.signal, + headers: { 'User-Agent': 'docs-api-link-checker/1.0' }, + redirect: 'follow', + }); + clearTimeout(timer); + + // Strategy 1: redirect happened — res.url has the versioned path + const finalUrl = res.url ?? ''; + const redirectMatch = finalUrl.match(/\/(\d+\.\d+\.\d+)\//); + if (redirectMatch) { + for (const root of roots) versionMap.set(root, redirectMatch[1]); + return versionMap; + } + + // Strategy 2: parse the embedded `latestVersions` JSON object. + // The page scripts contain: + // const latestVersions = "{\"igniteui-angular\":\"21.2.0\",..."}" + const body = await res.text(); + const lvMatch = body.match(/const latestVersions\s*=\s*"((?:[^"\\]|\\.)*)"/); + if (lvMatch) { + const latestVersions = JSON.parse(lvMatch[1].replace(/\\"/g, '"')); + for (const root of roots) { + // Package name is the last path segment of the root URL + const pkgName = root.replace(/\/$/, '').split('/').pop(); + if (pkgName && latestVersions[pkgName]) { + versionMap.set(root, latestVersions[pkgName]); + } + } + } + } catch { + clearTimeout(timer); + } + + return versionMap; +} + +/** Rewrites /latest/ to the discovered version for the given URL, if known. */ +function resolveLatest(url, versionMap) { + const m = url.match(PKG_ROOT_RE); + if (!m) return url; + const version = versionMap.get(m[1]); + return version ? url.replace('/latest/', `/${version}/`) : url; +} + +// HTTP checking + +async function checkUrl(url, versionMap) { + const fetchUrl = resolveLatest(url, versionMap); + const controller = new AbortController(); + const timer = setTimeout(() => controller.abort(), TIMEOUT_MS); + try { + const res = await fetch(fetchUrl, { + method: 'GET', + signal: controller.signal, + headers: { 'User-Agent': 'docs-api-link-checker/1.0' }, + redirect: 'follow', + }); + clearTimeout(timer); + + if (!res.ok) { + await res.body?.cancel(); + return { url, fetchUrl, status: res.status, ok: false }; + } + + // HTTP 200 - must read body to detect the not-found page. + const body = await res.text(); + if (body.includes(NOT_FOUND_MARKER)) { + return { url, fetchUrl, status: 'NOT_FOUND', ok: false }; + } + + return { url, fetchUrl, status: res.status, ok: true }; + } catch (err) { + clearTimeout(timer); + return { + url, + fetchUrl, + status: null, + ok: false, + error: err.name === 'AbortError' ? 'TIMEOUT' : String(err.message), + }; + } +} + +/** Runs `checkUrl` over `urls` with at most `concurrency` in-flight at a time. */ +async function checkAll(urls, versionMap, concurrency, onProgress) { + const results = []; + let idx = 0; + async function worker() { + while (idx < urls.length) { + const url = urls[idx++]; + const result = await checkUrl(url, versionMap); + results.push(result); + onProgress(result, results.length, urls.length); + } + } + await Promise.all(Array.from({ length: Math.min(concurrency, urls.length) }, worker)); + return results; +} + +// Main + +// 1. Discover platform folders +let platformFolders; +try { + platformFolders = readdirSync(DIST_DIR, { withFileTypes: true }) + .filter(e => e.isDirectory()) + .map(e => e.name) + .filter(name => { + if (!PLATFORM) return Object.hasOwn(FOLDER_LABELS, name); + return name === PLATFORM || name === `${PLATFORM}-jp`; + }); +} catch { + console.error(`Cannot read dist directory: "${DIST_DIR}"`); + console.error('Run a staging build first, or pass --dist=.'); + process.exit(1); +} + +if (platformFolders.length === 0) { + console.error(`No matching platform folders found in "${DIST_DIR}".`); + if (PLATFORM) console.error(` Tried: "${PLATFORM}" and "${PLATFORM}-jp"`); + process.exit(1); +} + +// 2. Scan HTML files and build URL → { pages, platforms } index +console.log(`\nScanning "${DIST_DIR}" — platforms: ${platformFolders.join(', ')}\n`); + +const urlIndex = new Map(); // url → { pages: Set, platforms: Set -- For displaying a couple of chips that toggle the and the properties. We have replaced the checkboxes with two stylish chips. Whenever a chip is clicked, we invoke its respective handler. +- For displaying a couple of chips that toggle the and the properties. We have replaced the checkboxes with two stylish chips. Whenever a chip is clicked, we invoke its respective handler. ```html