- [{environment:SamplesEmbedUrl}/grid/angular]({environment:SamplesEmbedUrl}/grid/angular)
-
+
- [{environment:SamplesEmbedUrl}/editors/angular]({environment:SamplesEmbedUrl}/editors/angular)
-
+
- [{environment:SamplesEmbedUrl}/tile-manager/angular]({environment:SamplesEmbedUrl}/tile-manager/angular)
-
+
- [{environment:SamplesEmbedUrl}/dialog-window/angular]({environment:SamplesEmbedUrl}/dialog-window/angular)
-
+
- [{environment:SamplesEmbedUrl}/tree-control/angular]({environment:SamplesEmbedUrl}/tree-control/angular)
-
+
- [{environment:SamplesEmbedUrl}/map/angular]({environment:SamplesEmbedUrl}/map/angular)
-
+
- [{environment:SamplesEmbedUrl}/layout-manager/angular]({environment:SamplesEmbedUrl}/layout-manager/angular)
-
+
- [{environment:SamplesEmbedUrl}/data-chart/angular]({environment:SamplesEmbedUrl}/data-chart/angular)
-
+
- [{environment:SamplesEmbedUrl}/bullet-graph/tooltip-settings]({environment:SamplesEmbedUrl}/bullet-graph/tooltip-settings)
-
+
- [{environment:SamplesEmbedUrl}/combo/json-binding]({environment:SamplesEmbedUrl}/combo/json-binding)
-
+
- [{environment:SamplesEmbedUrl}/combo/html-binding]({environment:SamplesEmbedUrl}/combo/html-binding)
-
+
- [{environment:SamplesEmbedUrl}/combo/xml-binding]({environment:SamplesEmbedUrl}/combo/xml-binding)
-
+
- [{environment:SamplesEmbedUrl}/combo/angular]({environment:SamplesEmbedUrl}/combo/angular)
-
+
- [{environment:SamplesEmbedUrl}/combo/bind-combo-with-ko]({environment:SamplesEmbedUrl}/combo/bind-combo-with-ko)
-
+
- [Motion Framework]({environment:SamplesEmbedUrl}/data-chart/motion-framework)
-
+
- [Transition Animation (Financial)]({environment:SamplesEmbedUrl}/data-chart/transition-animation-financial)
-
+
- [{environment:SamplesEmbedUrl}/data-chart/edit-chart-items-with-knockout]({environment:SamplesEmbedUrl}/data-chart/edit-chart-items-with-knockout)
-
+
- [Chart Navigation]({environment:SamplesEmbedUrl}/data-chart/chart-navigation)
-
+
- [Series Highlighting (Financial)]({environment:SamplesEmbedUrl}/data-chart/series-highlighting-financial)
-
+
- [{environment:SamplesEmbedUrl}/data-chart/json-binding]({environment:SamplesEmbedUrl}/data-chart/json-binding)
-
+
- [{environment:SamplesEmbedUrl}/data-chart/xml-binding]({environment:SamplesEmbedUrl}/data-chart/xml-binding)
-
+
- [Series Tooltips]({environment:SamplesEmbedUrl}/data-chart/series-tooltips)
-
+
- [Chart Fill Gradients]({environment:SamplesEmbedUrl}/data-chart/chart-fill-gradients)
-
+
##Styling the Chart Series by Applying Drop-Shadow Effect
diff --git a/docs/jquery/src/content/en/topics/controls/igdialog/adding-igdialog.mdx b/docs/jquery/src/content/en/topics/controls/igdialog/adding-igdialog.mdx
index 70abdff652..49c2201d66 100644
--- a/docs/jquery/src/content/en/topics/controls/igdialog/adding-igdialog.mdx
+++ b/docs/jquery/src/content/en/topics/controls/igdialog/adding-igdialog.mdx
@@ -4,6 +4,8 @@ slug: adding-igdialog
---
import ApiLink from 'docs-template/components/mdx/ApiLink.astro';
+import Sample from 'docs-template/components/mdx/Sample.astro';
+
# Adding igDialog
## Introduction
@@ -166,9 +168,7 @@ If you want to use the `igDialog` with TypeScript, you can instantiate it using
The following example demonstrates how to declare a Dialog Window with an AngularJS directive:
-
- [{environment:SamplesEmbedUrl}/dialog-window/angular]({environment:SamplesEmbedUrl}/dialog-window/angular)
-
+
> More information on how to use the {environment:ProductName} directives for AngularJS can be found in ["Using {environment:ProductName} with AngularJS" topic](../../10_AngularJS Directives/00_Using_Ignite_UI_with_AngularJS.mdx).
diff --git a/docs/jquery/src/content/en/topics/controls/igdialog/api-reference/event-reference.mdx b/docs/jquery/src/content/en/topics/controls/igdialog/api-reference/event-reference.mdx
index f8d17358c1..cb6a18c116 100644
--- a/docs/jquery/src/content/en/topics/controls/igdialog/api-reference/event-reference.mdx
+++ b/docs/jquery/src/content/en/topics/controls/igdialog/api-reference/event-reference.mdx
@@ -4,6 +4,8 @@ slug: igdialog-event-reference
---
import ApiLink from 'docs-template/components/mdx/ApiLink.astro';
+import Sample from 'docs-template/components/mdx/Sample.astro';
+
# Event Reference (igDialog)
## Topic Overview
@@ -55,9 +57,7 @@ $("#igDialog1").igDialog({
The following example shows how this is done and it also demonstrates the use of the jQuery's [`on`](http://api.jquery.com/on/) method to attach an event handler to a selected element:
-
- [{environment:SamplesEmbedUrl}/dialog-window/api-and-events]({environment:SamplesEmbedUrl}/dialog-window/api-and-events)
-
+
### Attaching Event Handlers in MVC
diff --git a/docs/jquery/src/content/en/topics/controls/igeditors/config/configuring-knockout-support-editors.mdx b/docs/jquery/src/content/en/topics/controls/igeditors/config/configuring-knockout-support-editors.mdx
index 5eeb93044f..cdf54734db 100644
--- a/docs/jquery/src/content/en/topics/controls/igeditors/config/configuring-knockout-support-editors.mdx
+++ b/docs/jquery/src/content/en/topics/controls/igeditors/config/configuring-knockout-support-editors.mdx
@@ -3,6 +3,8 @@ title: "Configuring Knockout Support"
slug: configuring-knockout-support-(editors)
---
+import Sample from 'docs-template/components/mdx/Sample.astro';
+
# Configuring Knockout Support
@@ -180,9 +182,7 @@ The code snippet below instantiates an `igPercentEditor` control. The control is
This sample demonstrates binding {environment:ProductName} Editor controls to data managed by Knockout data bindings:
-
- [{environment:SamplesEmbedUrl}/editors/bind-editors-with-ko]({environment:SamplesEmbedUrl}/editors/bind-editors-with-ko)
-
+
##Code Example: Configuring Immediate Update Mode (`igTextEditor`)
diff --git a/docs/jquery/src/content/en/topics/controls/igeditors/config/localizing-igeditors.mdx b/docs/jquery/src/content/en/topics/controls/igeditors/config/localizing-igeditors.mdx
index ce6d2c169c..f401959609 100644
--- a/docs/jquery/src/content/en/topics/controls/igeditors/config/localizing-igeditors.mdx
+++ b/docs/jquery/src/content/en/topics/controls/igeditors/config/localizing-igeditors.mdx
@@ -3,6 +3,8 @@ title: "How to localize the Editors"
slug: localizing-igeditors
---
+import Sample from 'docs-template/components/mdx/Sample.astro';
+
# How to localize the Editors
There are two types of localization. First is for the localization resources in the controls. Second is for the regional settings in the controls.
@@ -95,9 +97,7 @@ Option | Description
In this sample we show how a culture can be set to the editors' `regional` option to change the default formatting of dates, numbers and currencies. Three regions are configured here (United States, Japan and Tamil, India) and there are many more to choose from in the infragistics.ui.regional-i18n.js file.
-
- [{environment:SamplesEmbedUrl}/editors/localizing-editors]({environment:SamplesEmbedUrl}/editors/localizing-editors)
-
+
## Related Topics
diff --git a/docs/jquery/src/content/en/topics/controls/igeditors/igdateeditor/overview.mdx b/docs/jquery/src/content/en/topics/controls/igeditors/igdateeditor/overview.mdx
index 7ef84bda0f..131003a898 100644
--- a/docs/jquery/src/content/en/topics/controls/igeditors/igdateeditor/overview.mdx
+++ b/docs/jquery/src/content/en/topics/controls/igeditors/igdateeditor/overview.mdx
@@ -4,6 +4,8 @@ slug: igdateeditor-overview
---
import ApiLink from 'docs-template/components/mdx/ApiLink.astro';
+import Sample from 'docs-template/components/mdx/Sample.astro';
+
# igDateEditor Overview
@@ -120,9 +122,7 @@ Supported formats follow the general patterns for [Formatting Dates](///general-
This sample shows different configurations for formatting dates and times in the date editor:
-
-[{environment:SamplesEmbedUrl}/editors/date-and-time-formats]({environment:SamplesEmbedUrl}/editors/date-and-time-formats)
-
+
## Related Links
diff --git a/docs/jquery/src/content/en/topics/controls/igeditors/igdatepicker/overview.mdx b/docs/jquery/src/content/en/topics/controls/igeditors/igdatepicker/overview.mdx
index 8af1368879..c07144cc5d 100644
--- a/docs/jquery/src/content/en/topics/controls/igeditors/igdatepicker/overview.mdx
+++ b/docs/jquery/src/content/en/topics/controls/igeditors/igdatepicker/overview.mdx
@@ -4,6 +4,8 @@ slug: igdatepicker-overview
---
import ApiLink from 'docs-template/components/mdx/ApiLink.astro';
+import Sample from 'docs-template/components/mdx/Sample.astro';
+
# igDatePicker Overview
@@ -128,9 +130,7 @@ When you use a string value for the `minValue`, `maxValue` and the `value` optio
### Configuration examples:
The sample below shows to configure `igDatePicker` with different settings and the expected submitted values.
-
- [{environment:SamplesEmbedUrl}/editors/date-picker]({environment:SamplesEmbedUrl}/editors/date-picker)
-
+
## Related Links
diff --git a/docs/jquery/src/content/en/topics/controls/igfunnelchart/binding-to-data.mdx b/docs/jquery/src/content/en/topics/controls/igfunnelchart/binding-to-data.mdx
index d86fbf64b0..9b18ccb74c 100644
--- a/docs/jquery/src/content/en/topics/controls/igfunnelchart/binding-to-data.mdx
+++ b/docs/jquery/src/content/en/topics/controls/igfunnelchart/binding-to-data.mdx
@@ -3,6 +3,8 @@ title: "Binding igFunnelChart to Data"
slug: igfunnelchart-binding-to-data
---
+import Sample from 'docs-template/components/mdx/Sample.astro';
+
# Binding igFunnelChart to Data
## Topic Overview
@@ -189,9 +191,7 @@ $("#chartNormal").igFunnelChart({
This sample shows how to bind an `igFunnelChart` to data available in XML structure. For that purpose the XML data is passed to an `igDataSource` which provides the data to the funnel chart.
-
- [{environment:SamplesEmbedUrl}/funnel-chart/xml-binding]({environment:SamplesEmbedUrl}/funnel-chart/xml-binding)
-
+
## Code Example: Binding *igFunnelChart* in a Strongly Typed MVC View
diff --git a/docs/jquery/src/content/en/topics/controls/iggrid/binding/client-side/to-html-table-data.mdx b/docs/jquery/src/content/en/topics/controls/iggrid/binding/client-side/to-html-table-data.mdx
index e9348472ae..fe423575fa 100644
--- a/docs/jquery/src/content/en/topics/controls/iggrid/binding/client-side/to-html-table-data.mdx
+++ b/docs/jquery/src/content/en/topics/controls/iggrid/binding/client-side/to-html-table-data.mdx
@@ -3,6 +3,8 @@ title: "Binding igGrid to HTML Table Data"
slug: iggrid-binding-to-html-table-data
---
+import Sample from 'docs-template/components/mdx/Sample.astro';
+
# Binding igGrid to HTML Table Data
## Overview
@@ -117,9 +119,7 @@ $("#t2").igGrid({
```
**Running Sample**
-
- [{environment:SamplesEmbedUrl}/grid/html-binding]({environment:SamplesEmbedUrl}/grid/html-binding)
-
+
## Known Issues and Limitations
The `igGrid` has [known limitations](//iggrid-known-issues.mdx) that should be taken into account.
## Related topics
diff --git a/docs/jquery/src/content/en/topics/controls/iggrid/binding/client-side/to-javascript-array-and-json-array.mdx b/docs/jquery/src/content/en/topics/controls/iggrid/binding/client-side/to-javascript-array-and-json-array.mdx
index d144ca843b..708632d509 100644
--- a/docs/jquery/src/content/en/topics/controls/iggrid/binding/client-side/to-javascript-array-and-json-array.mdx
+++ b/docs/jquery/src/content/en/topics/controls/iggrid/binding/client-side/to-javascript-array-and-json-array.mdx
@@ -3,6 +3,8 @@ title: "Binding igGrid to a JavaScript array and JSON array (igGrid)"
slug: iggrid-binding-to-javascript-array-and-json-array
---
+import Sample from 'docs-template/components/mdx/Sample.astro';
+
# Binding igGrid to a JavaScript array and JSON array (igGrid)
@@ -101,9 +103,7 @@ The following steps demonstrate how to bind the `igGrid` control to client-side
});
```
**Running sample demonstrating igGrid JSON binding**
-
- [igGrid JSON Binding]({environment:SamplesEmbedUrl}/grid/json-binding)
-
+
- JavaScript array:
diff --git a/docs/jquery/src/content/en/topics/controls/iggrid/binding/iggrid-to-xml.mdx b/docs/jquery/src/content/en/topics/controls/iggrid/binding/iggrid-to-xml.mdx
index 5034ccfef1..65368e6d40 100644
--- a/docs/jquery/src/content/en/topics/controls/iggrid/binding/iggrid-to-xml.mdx
+++ b/docs/jquery/src/content/en/topics/controls/iggrid/binding/iggrid-to-xml.mdx
@@ -3,6 +3,8 @@ title: "Binding igGrid to XML"
slug: iggrid-binding-iggrid-to-xml
---
+import Sample from 'docs-template/components/mdx/Sample.astro';
+
# Binding igGrid to XML
## Overview
@@ -107,9 +109,7 @@ Figure 1 shows the data source state after it is data-bound.
-
- [XML Binding]({environment:SamplesEmbedUrl}/grid/xml-binding)
-
+
## Related Topics
diff --git a/docs/jquery/src/content/en/topics/controls/iggrid/features/append-rows-on-demand-overview.mdx b/docs/jquery/src/content/en/topics/controls/iggrid/features/append-rows-on-demand-overview.mdx
index 14891d23e3..31ef38795f 100644
--- a/docs/jquery/src/content/en/topics/controls/iggrid/features/append-rows-on-demand-overview.mdx
+++ b/docs/jquery/src/content/en/topics/controls/iggrid/features/append-rows-on-demand-overview.mdx
@@ -4,6 +4,8 @@ slug: append-rows-on-demand-overview
---
import ApiLink from 'docs-template/components/mdx/ApiLink.astro';
+import Sample from 'docs-template/components/mdx/Sample.astro';
+
#Append Rows On Demand Overview
## Topic Overview
@@ -129,6 +131,4 @@ The following topics provide additional information related to this topic.
The igGrid Append Rows On Demand feature adds functionality to append data to the grid. It works in two modes: Automatic and Button. Use the upper grid to experience the Automatic mode. Scroll to the bottom of the grid to see that the new data will be appended to the grid. Use the bottom grid to experience the Button mode. Scroll to the bottom of the grid and then press the "Load more data" button to append new data.
-
- [Append Rows on Demand]({environment:SamplesEmbedUrl}/grid/append-rows-on-demand)
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/docs/jquery/src/content/en/topics/controls/iggrid/features/cell-merging/advanced.mdx b/docs/jquery/src/content/en/topics/controls/iggrid/features/cell-merging/advanced.mdx
index 56248bdf1e..0cb6428933 100644
--- a/docs/jquery/src/content/en/topics/controls/iggrid/features/cell-merging/advanced.mdx
+++ b/docs/jquery/src/content/en/topics/controls/iggrid/features/cell-merging/advanced.mdx
@@ -4,6 +4,8 @@ slug: iggrid-cellmerging-advanced
---
import ApiLink from 'docs-template/components/mdx/ApiLink.astro';
+import Sample from 'docs-template/components/mdx/Sample.astro';
+
# Cell Merging Advanced Customization (igGrid)
## Topic Overview
@@ -292,9 +294,11 @@ The following sample implements the custom strategy that was demonstrated in the
**In JavaScript:**
-
- [Cell Merging]({environment:SamplesEmbedUrl}/grid/cell-merging-custom)
-
+- дс
+
+{/* */}
+
+
## Related Content
diff --git a/docs/jquery/src/content/en/topics/controls/iggrid/features/cell-merging/overview.mdx b/docs/jquery/src/content/en/topics/controls/iggrid/features/cell-merging/overview.mdx
index a2d39a5a6a..c134a8f570 100644
--- a/docs/jquery/src/content/en/topics/controls/iggrid/features/cell-merging/overview.mdx
+++ b/docs/jquery/src/content/en/topics/controls/iggrid/features/cell-merging/overview.mdx
@@ -4,6 +4,8 @@ slug: iggrid-cellmerging-overview
---
import ApiLink from 'docs-template/components/mdx/ApiLink.astro';
+import Sample from 'docs-template/components/mdx/Sample.astro';
+
# Cell Merging Overview (igGrid)
## Topic Overview
@@ -74,9 +76,7 @@ The following code creates an `igGrid` instance bound to the Products table data
**In JavaScript:**
-
- [Cell Merging]({environment:SamplesEmbedUrl}/grid/cell-merging)
-
+
### Enabling Cell Merging in ASP.NET MVC
diff --git a/docs/jquery/src/content/en/topics/controls/iggrid/features/columns-and-layout.mdx b/docs/jquery/src/content/en/topics/controls/iggrid/features/columns-and-layout.mdx
index 3f031eb7d0..7ebeac6a27 100644
--- a/docs/jquery/src/content/en/topics/controls/iggrid/features/columns-and-layout.mdx
+++ b/docs/jquery/src/content/en/topics/controls/iggrid/features/columns-and-layout.mdx
@@ -4,6 +4,8 @@ slug: iggrid-columns-and-layout
---
import ApiLink from 'docs-template/components/mdx/ApiLink.astro';
+import Sample from 'docs-template/components/mdx/Sample.astro';
+
# Columns and Layout (igGrid)
@@ -60,9 +62,7 @@ The sample below demonstrates how to set up different layout properties of the `
- `width` (columns) – the width that is applied to the column.
- `width` - the width of the grid. If a column’s width exceeds the grid’s width then a horizontal scroll bar appears.
-
- [Grid Layout]({environment:SamplesEmbedUrl}/grid/grid-layout)
-
+
## Defining Columns
@@ -161,9 +161,7 @@ Column formatting (rendering) is affected by several `igGrid` options. These are
```
This sample below shows how to format column values before displaying them in the grid. The "Make Flag" boolean column has a `formatter` function which transforms the true/false values into Yes/No values.
-
- [Column Format Function]({environment:SamplesEmbedUrl}/grid/column-format-function)
-
+
- - is a string identifying a format patterns. Internally option uses the `$.ig.formatter(rawValue, dataType, formatPattern)` function. When set, overrides the setting of the option and also the default regional settings.
@@ -176,9 +174,7 @@ This sample below shows how to format column values before displaying them in th
The sample below demonstrates the grid column formatting capabilities. The Sell Start Date and Modified Date columns use different date formatting. The List Price number column uses the currency format.
-
- [igGrid Column Formats]({environment:SamplesEmbedUrl}/grid/column-formats)
-
+
- - is a templated string (templating engine used is defined in the `templatingEngine` option). See [Templating Engine Overview](../../../06_Infragistics-Templating-Engine/01_igTemplating Overview.mdx) topic for details on template syntax.
@@ -234,9 +230,7 @@ By default the cell text in igGrid is left aligned. To customize the cell text a
The sample below demonstrates how to customize the grid cell text alignment. The grid's "Product ID" and "Reorder Point" numeric columns text is aligned to the right. This is done by applying a custom CSS class to the column cells. The CSS class is configured in the grid column's `columnCssClass` property.
-
- [igGrid Configure Text Alignment]({environment:SamplesEmbedUrl}/grid/configure-text-alignment)
-
+
## Defining Mapper function for column
@@ -293,9 +287,7 @@ Listing 2: Defining mapper function for a column in igGrid
The below sample demonstrates how to handle complex data objects via the column's mapper function. In it Sorting and Filtering will be executed based on the values returned by the mapper function and Updating via the combo editor provider will allow updating the whole complex object with the selected combo item's record data.
-
- [Handling Complex Objects]({environment:SamplesEmbedUrl}/grid/handling-complex-objects)
-
+
## AutoGenerateColumns
@@ -315,9 +307,7 @@ You can also specify widths for every individual column separately. If you have
> **Note:** Updating feature requires `dataType` property to be set when `autoGenerateColumns` is set to false. That's because Updating feature uses primary key to synchronize records between the grid and the underlying data source and the primary key is compared by value and type.
The sample below shows the auto-generate columns functionality of igGrid. When columns are auto-generated their header captions are taken from the data source field names. The `autoGenerateColumns` option is used in combination with `defaultColumnWidth` option.
-
- [igGrid Auto-Generate Columns]({environment:SamplesEmbedUrl}/grid/auto-generate-columns)
-
+
## Styling
@@ -431,9 +421,7 @@ $("#grid1").igGrid({
});
```
The sample below demonstrates how to enable checkboxes in a boolean column instead of the true/false values.
-
- [igGrid Checkbox Column]({environment:SamplesEmbedUrl}/grid/checkbox-column)
-
+
**In ASPX:**
diff --git a/docs/jquery/src/content/en/topics/controls/iggrid/features/columns/filtering.mdx b/docs/jquery/src/content/en/topics/controls/iggrid/features/columns/filtering.mdx
index 6dcf010b27..b09d632c84 100644
--- a/docs/jquery/src/content/en/topics/controls/iggrid/features/columns/filtering.mdx
+++ b/docs/jquery/src/content/en/topics/controls/iggrid/features/columns/filtering.mdx
@@ -4,6 +4,8 @@ slug: iggrid-filtering
---
import ApiLink from 'docs-template/components/mdx/ApiLink.astro';
+import Sample from 'docs-template/components/mdx/Sample.astro';
+
# Filtering (igGrid)
## Overview
@@ -46,9 +48,7 @@ Filtering persistence is implemented for `igHierarchicalGrid` too.
The following sample demonstrates the persistance capabilities of the Filtering feature.
-
- [Feature Persistence]({environment:SamplesEmbedUrl}/grid/feature-persistence)
-
+
If you would like to retain the previous behavior of filtering being cleared after user re-binds the *igGrid*, you can do this by disabling the feature through the option as shown in the code snippet below:
@@ -193,9 +193,7 @@ Listing 5: HTML element required to instantiate the grid
```
**Running sample with advanced filtering**
-
- [igGrid Advanced Filtering]({environment:SamplesEmbedUrl}/grid/advanced-filtering)
-
+
Listing 6: Razor or CSHTML markup to use with {environment:ProductNameMVC}
@@ -542,9 +540,7 @@ $("#grid1").igGrid({
});
```
**Demo:**
-
- [igGrid Filtering Custom Conditions]({environment:SamplesEmbedUrl}/grid/custom-conditions-filtering)
-
+
## Filtering CSS Classes
diff --git a/docs/jquery/src/content/en/topics/controls/iggrid/features/columns/grouping/groupby-overview.mdx b/docs/jquery/src/content/en/topics/controls/iggrid/features/columns/grouping/groupby-overview.mdx
index d3186652cd..0ad86b6221 100644
--- a/docs/jquery/src/content/en/topics/controls/iggrid/features/columns/grouping/groupby-overview.mdx
+++ b/docs/jquery/src/content/en/topics/controls/iggrid/features/columns/grouping/groupby-overview.mdx
@@ -4,6 +4,8 @@ slug: iggrid-groupby-overview
---
import ApiLink from 'docs-template/components/mdx/ApiLink.astro';
+import Sample from 'docs-template/components/mdx/Sample.astro';
+
# Column Grouping Overview (igGrid)
## Topic Overview
@@ -48,9 +50,7 @@ GroupBy persistence is implemented for `igHierarchicalGrid` too.
The following sample demonstrates the persistance capabilities of the GroupBy feature.
-
- [Feature Persistence]({environment:SamplesEmbedUrl}/grid/feature-persistence)
-
+
If you would like to retain the previous behavior of group by being cleared after user re-binds the `igGrid`, you can do this by disabling the feature through the option as shown in the code snippet below:
@@ -89,9 +89,7 @@ The following sample demonstrates how to use the **Note:**
You can also customize grouping of the `time` column using the `compareFunc`. See the example code for more details.
-
- [Grouping Customization]({environment:SamplesEmbedUrl}/grid/grouping-customization)
-
+
## API Usage
@@ -141,9 +139,7 @@ $('#grid1').igGridGroupBy("expand", id);
The following sample provides additional information related to the API usage:
-
- [Grouping API]({environment:SamplesEmbedUrl}/grid/grouping-api)
-
+
## Keyboard Interactions
diff --git a/docs/jquery/src/content/en/topics/controls/iggrid/features/columns/multi-headers/multicolumnheaders-multicolumnheaders.mdx b/docs/jquery/src/content/en/topics/controls/iggrid/features/columns/multi-headers/multicolumnheaders-multicolumnheaders.mdx
index 1f19370aed..5785cbd827 100644
--- a/docs/jquery/src/content/en/topics/controls/iggrid/features/columns/multi-headers/multicolumnheaders-multicolumnheaders.mdx
+++ b/docs/jquery/src/content/en/topics/controls/iggrid/features/columns/multi-headers/multicolumnheaders-multicolumnheaders.mdx
@@ -4,6 +4,8 @@ slug: iggrid-multicolumnheaders-multicolumnheaders
---
import ApiLink from 'docs-template/components/mdx/ApiLink.astro';
+import Sample from 'docs-template/components/mdx/Sample.astro';
+
# Multi-Column Headers Overview (igGrid)
## Topic Overview
@@ -60,9 +62,7 @@ In the following screenshot, you can see a multi-column header configured for th
The following sample demonstrates how to configure Multi-Column Headers:
-
- [Multi-Column Headers]({environment:SamplesEmbedUrl}/grid/multi-column-headers)
-
+
## Collapsible column groups
diff --git a/docs/jquery/src/content/en/topics/controls/iggrid/features/columns/sorting/overview.mdx b/docs/jquery/src/content/en/topics/controls/iggrid/features/columns/sorting/overview.mdx
index c4824afc76..2d8a293244 100644
--- a/docs/jquery/src/content/en/topics/controls/iggrid/features/columns/sorting/overview.mdx
+++ b/docs/jquery/src/content/en/topics/controls/iggrid/features/columns/sorting/overview.mdx
@@ -4,6 +4,8 @@ slug: iggrid-sorting-overview
---
import ApiLink from 'docs-template/components/mdx/ApiLink.astro';
+import Sample from 'docs-template/components/mdx/Sample.astro';
+
# Sorting Overview (igGrid)
## Overview
@@ -38,9 +40,7 @@ Sorting persistence is implemented for `igHierarchicalGrid` too.
The following sample demonstrates the persistance capabilities of the Sorting feature.
-
- [Feature Persistence]({environment:SamplesEmbedUrl}/grid/feature-persistence)
-
+
If you would like to retain the previous behavior of sorting being cleared after user re-binds the `igGrid`, you can do this by disabling the feature through the option as shown in the code snippet below:
@@ -77,9 +77,7 @@ Figure 1: The igGrid control sorting UI
The sample below demonstrates how to enable the Sorting feature:
-
- [Sorting]({environment:SamplesEmbedUrl}/grid/sorting-local)
-
+
The following code snippet shows how to enable Sorting in ASPX (MVC)
diff --git a/docs/jquery/src/content/en/topics/controls/iggrid/features/columns/summaries/configuring-column-summaries.mdx b/docs/jquery/src/content/en/topics/controls/iggrid/features/columns/summaries/configuring-column-summaries.mdx
index bf2a109518..c063aac05b 100644
--- a/docs/jquery/src/content/en/topics/controls/iggrid/features/columns/summaries/configuring-column-summaries.mdx
+++ b/docs/jquery/src/content/en/topics/controls/iggrid/features/columns/summaries/configuring-column-summaries.mdx
@@ -4,6 +4,8 @@ slug: iggrid-configuring-column-summaries
---
import ApiLink from 'docs-template/components/mdx/ApiLink.astro';
+import Sample from 'docs-template/components/mdx/Sample.astro';
+
# Configuring Column Summaries (igGrid)
## Topic Overview
@@ -482,9 +484,7 @@ Following is a conceptual overview of the process:
## Custom Summaries
By defining a custom summaryOperands object (`summaryOperands` with type *custom*) you point the Summaries feature to a custom function to calculate the row summary. When the `compactRenderingMode` option is set to false, the results from both the predefined and the custom methods are positioned in summary rows according to their sort order. The sample below has two custom summary functions (*countTrueValues*, *countFalseValues*) each calculating the number of *true* or *false* values in a boolean column. Those summary functions are then used for the "Make Flag" column.
### Running sample
-
- [igGrid Custom Summaries]({environment:SamplesEmbedUrl}/grid/summaries-custom)
-
+
## Related Topics
diff --git a/docs/jquery/src/content/en/topics/controls/iggrid/features/columns/summaries/enabling-column-summaries.mdx b/docs/jquery/src/content/en/topics/controls/iggrid/features/columns/summaries/enabling-column-summaries.mdx
index dc9817211a..ed2509347b 100644
--- a/docs/jquery/src/content/en/topics/controls/iggrid/features/columns/summaries/enabling-column-summaries.mdx
+++ b/docs/jquery/src/content/en/topics/controls/iggrid/features/columns/summaries/enabling-column-summaries.mdx
@@ -3,6 +3,8 @@ title: "Enabling Column Summaries (igGrid)"
slug: iggrid-enabling--column-summaries
---
+import Sample from 'docs-template/components/mdx/Sample.astro';
+
# Enabling Column Summaries (igGrid)
## Topic Overview
@@ -130,9 +132,7 @@ For the purpose of this example only:
To verify the result, open the file. The result should look as shown in the Preview above.
5. Running sample
-
- [igGrid Summaries]({environment:SamplesEmbedUrl}/grid/summaries)
-
+
## Enabling Column Summaries in MVC
diff --git a/docs/jquery/src/content/en/topics/controls/iggrid/features/columns/template/creating-a-basic-column-template-in-the-iggrid.mdx b/docs/jquery/src/content/en/topics/controls/iggrid/features/columns/template/creating-a-basic-column-template-in-the-iggrid.mdx
index b117a78419..34a441a601 100644
--- a/docs/jquery/src/content/en/topics/controls/iggrid/features/columns/template/creating-a-basic-column-template-in-the-iggrid.mdx
+++ b/docs/jquery/src/content/en/topics/controls/iggrid/features/columns/template/creating-a-basic-column-template-in-the-iggrid.mdx
@@ -3,6 +3,8 @@ title: "Creating a Basic Column Template (igGrid)"
slug: creating-a-basic-column-template-in-the-iggrid
---
+import Sample from 'docs-template/components/mdx/Sample.astro';
+
# Creating a Basic Column Template (igGrid)
## Topic Overview
@@ -124,9 +126,7 @@ The following steps demonstrate how to create a basic column template in the `ig
Look at the sample below to preview the result.
-
- [Column Template]({environment:SamplesEmbedUrl}/grid/column-template)
-
+
## Related Content
diff --git a/docs/jquery/src/content/en/topics/controls/iggrid/features/columns/unbound/unboundcolumns-overview.mdx b/docs/jquery/src/content/en/topics/controls/iggrid/features/columns/unbound/unboundcolumns-overview.mdx
index cbea393598..e789140e8f 100644
--- a/docs/jquery/src/content/en/topics/controls/iggrid/features/columns/unbound/unboundcolumns-overview.mdx
+++ b/docs/jquery/src/content/en/topics/controls/iggrid/features/columns/unbound/unboundcolumns-overview.mdx
@@ -4,6 +4,8 @@ slug: iggrid-unboundcolumns-overview
---
import ApiLink from 'docs-template/components/mdx/ApiLink.astro';
+import Sample from 'docs-template/components/mdx/Sample.astro';
+
# Unbound Columns Overview (igGrid)
## Topic Overview
@@ -52,9 +54,7 @@ You can populate unbound column values in several ways. If column values are pre
The sample bellow demonstrates configuring unbound columns in the `igGrid` control.
-
- [Unbound Column]({environment:SamplesEmbedUrl}/grid/unbound-column)
-
+
## Configuring Unbound Columns
diff --git a/docs/jquery/src/content/en/topics/controls/iggrid/features/configuring-knockout-support.mdx b/docs/jquery/src/content/en/topics/controls/iggrid/features/configuring-knockout-support.mdx
index b26e2fe795..595460a4b2 100644
--- a/docs/jquery/src/content/en/topics/controls/iggrid/features/configuring-knockout-support.mdx
+++ b/docs/jquery/src/content/en/topics/controls/iggrid/features/configuring-knockout-support.mdx
@@ -4,6 +4,8 @@ slug: iggrid-configuring-knockout-support
---
import ApiLink from 'docs-template/components/mdx/ApiLink.astro';
+import Sample from 'docs-template/components/mdx/Sample.astro';
+
# Configuring Knockout Support (igGrid)
## Topic Overview
@@ -203,9 +205,7 @@ Following are the general conceptual steps for binding `igGrid` to a Knockout ob
```
4. **Result**
-
- [KnockoutJS Configuration]({environment:SamplesEmbedUrl}/grid/bind-grid-with-ko)
-
+
## Related Content
diff --git a/docs/jquery/src/content/en/topics/controls/iggrid/features/feature-chooser.mdx b/docs/jquery/src/content/en/topics/controls/iggrid/features/feature-chooser.mdx
index 32b2b9b8b1..66a7c4512f 100644
--- a/docs/jquery/src/content/en/topics/controls/iggrid/features/feature-chooser.mdx
+++ b/docs/jquery/src/content/en/topics/controls/iggrid/features/feature-chooser.mdx
@@ -4,6 +4,8 @@ slug: iggrid-feature-chooser
---
import ApiLink from 'docs-template/components/mdx/ApiLink.astro';
+import Sample from 'docs-template/components/mdx/Sample.astro';
+
# Feature Chooser (igGrid)
## Introduction
@@ -11,9 +13,7 @@ The Feature Chooser makes it easy for users to interact with the grid's features
The following sample demonstrates Feature Chooser.
-
- [Feature Chooser]({environment:SamplesEmbedUrl}/grid/feature-chooser)
-
+
## Touch vs. Non-Touch Oriented Contexts
The igGrid uses Modernizer ([`Modernizr.touch`](http://modernizr.com/docs/#touch)) to detect if the grid is running in a touch-oriented context. Touch contexts are generally found on mobile devices and modern desktop browsers running on a touch screen monitor. Non-touch contexts are generally found in desktop browsers without touch screen monitors or running in old web browsers.
diff --git a/docs/jquery/src/content/en/topics/controls/iggrid/features/jsrender-integration.mdx b/docs/jquery/src/content/en/topics/controls/iggrid/features/jsrender-integration.mdx
index 65595b14a4..64979d4e1c 100644
--- a/docs/jquery/src/content/en/topics/controls/iggrid/features/jsrender-integration.mdx
+++ b/docs/jquery/src/content/en/topics/controls/iggrid/features/jsrender-integration.mdx
@@ -4,6 +4,8 @@ slug: iggrid-jsrender-integration
---
import ApiLink from 'docs-template/components/mdx/ApiLink.astro';
+import Sample from 'docs-template/components/mdx/Sample.astro';
+
# jsRender Integration (igGrid)
## Topic Overview
@@ -210,9 +212,7 @@ Following are the general conceptual steps for Binding `igGrid` to DataTable wit
```
5. **Working sample**
-
- [igGrid JsRender Integration]({environment:SamplesEmbedUrl}/grid/jsrender-integration)
-
+
## Integration with Row Edit Template and advanced filtering
diff --git a/docs/jquery/src/content/en/topics/controls/iggrid/features/multirowlayout.mdx b/docs/jquery/src/content/en/topics/controls/iggrid/features/multirowlayout.mdx
index a12a92e1b4..57c22b99ab 100644
--- a/docs/jquery/src/content/en/topics/controls/iggrid/features/multirowlayout.mdx
+++ b/docs/jquery/src/content/en/topics/controls/iggrid/features/multirowlayout.mdx
@@ -4,6 +4,8 @@ slug: iggrid-multirowlayout
---
import ApiLink from 'docs-template/components/mdx/ApiLink.astro';
+import Sample from 'docs-template/components/mdx/Sample.astro';
+
# Grid Multi-Row Layout
## In this topic
@@ -53,9 +55,7 @@ columns: [
> **Note:** For cells that span one column the `colSpan` property is omitted and for those that span one row the `rowSpan` property is omitted. Widths are defined for two columns only.
The sample below demonstrates how to setup an igGrid with a Multi-Row Layout.
-
- [igGrid Multi-Row Layout sample]({environment:SamplesEmbedUrl}/grid/multi-row-layout)
-
+
## API in a Multi-Row Layout Grid
Since Multi-Row Layout changes how cells are rendered and therefore breaks the corelation between the cell's index in a row and its overall position in the layout and because of the fact one record no longer corresponds to a single `TR` element, a number of changes and considerations were made on how API functions and events works in the context of such grids.
diff --git a/docs/jquery/src/content/en/topics/controls/iggrid/features/paging.mdx b/docs/jquery/src/content/en/topics/controls/iggrid/features/paging.mdx
index 2ae8d9c650..5b309b5198 100644
--- a/docs/jquery/src/content/en/topics/controls/iggrid/features/paging.mdx
+++ b/docs/jquery/src/content/en/topics/controls/iggrid/features/paging.mdx
@@ -3,6 +3,8 @@ title: "Paging (igGrid)"
slug: iggrid-paging
---
+import Sample from 'docs-template/components/mdx/Sample.astro';
+
# Paging (igGrid)
## In this topic
@@ -143,9 +145,7 @@ In order to enable Paging, you first need to include the necessary JavaScript an
## **Running sample**
-
- [igGrid Paging]({environment:SamplesEmbedUrl}/grid/paging)
-
+
## ASP.NET MVC Code
diff --git a/docs/jquery/src/content/en/topics/controls/iggrid/features/responsive/configure/web-design-mode-configuring-bootstrap-support.mdx b/docs/jquery/src/content/en/topics/controls/iggrid/features/responsive/configure/web-design-mode-configuring-bootstrap-support.mdx
index 5ae2502344..6a3e787b18 100644
--- a/docs/jquery/src/content/en/topics/controls/iggrid/features/responsive/configure/web-design-mode-configuring-bootstrap-support.mdx
+++ b/docs/jquery/src/content/en/topics/controls/iggrid/features/responsive/configure/web-design-mode-configuring-bootstrap-support.mdx
@@ -4,6 +4,8 @@ slug: iggrid-responsive-web-design-mode-configuring-bootstrap-support
---
import ApiLink from 'docs-template/components/mdx/ApiLink.astro';
+import Sample from 'docs-template/components/mdx/Sample.astro';
+
# Configuring Bootstrap Support (igGrid, RWD Mode)
## Topic Overview
@@ -87,6 +89,4 @@ Class | Phone (up to 767 px) | Tablet (768 ÷ 979 px) | Desktop (980 px or more)
The below sample demonstrates how to configure Responsive Web Design Mode feature to use Twitter Bootstrap Framework utility class for profile activation.
-
- [Twitter Bootstrap]({environment:SamplesEmbedUrl}/grid/twitter-bootstrap)
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/docs/jquery/src/content/en/topics/controls/iggrid/features/responsive/configure/web-design-mode-configuring-single-column-template.mdx b/docs/jquery/src/content/en/topics/controls/iggrid/features/responsive/configure/web-design-mode-configuring-single-column-template.mdx
index 48630f3207..5b4ce4495a 100644
--- a/docs/jquery/src/content/en/topics/controls/iggrid/features/responsive/configure/web-design-mode-configuring-single-column-template.mdx
+++ b/docs/jquery/src/content/en/topics/controls/iggrid/features/responsive/configure/web-design-mode-configuring-single-column-template.mdx
@@ -4,6 +4,8 @@ slug: iggrid-responsive-web-design-mode-configuring-single-column-template
---
import ApiLink from 'docs-template/components/mdx/ApiLink.astro';
+import Sample from 'docs-template/components/mdx/Sample.astro';
+
# Configuring Single Column Template (igGrid, RWD Mode)
## Topic Overview
@@ -47,9 +49,7 @@ Different templates can be specified based on the current layout mode (tablet or
The below sample shows how this configuration affects the rendering of the data depending on the device size.
In order to see the different modes take effect please open this sample on a mobile device or resize the browser's window.
-
- [Responsive Single Column Template]({environment:SamplesEmbedUrl}/grid/responsive-single-column-template)
-
+
## Related Content
diff --git a/docs/jquery/src/content/en/topics/controls/iggrid/features/responsive/configure/web-design-mode-configuring-vertical-column-rendering.mdx b/docs/jquery/src/content/en/topics/controls/iggrid/features/responsive/configure/web-design-mode-configuring-vertical-column-rendering.mdx
index c242b9e4ac..2c06bc0fc0 100644
--- a/docs/jquery/src/content/en/topics/controls/iggrid/features/responsive/configure/web-design-mode-configuring-vertical-column-rendering.mdx
+++ b/docs/jquery/src/content/en/topics/controls/iggrid/features/responsive/configure/web-design-mode-configuring-vertical-column-rendering.mdx
@@ -4,6 +4,8 @@ slug: iggrid-responsive-web-design-mode-configuring-vertical-column-rendering
---
import ApiLink from 'docs-template/components/mdx/ApiLink.astro';
+import Sample from 'docs-template/components/mdx/Sample.astro';
+
# Configuring Vertical Column Rendering (igGrid, RWD Mode)
## Topic Overview
@@ -67,9 +69,7 @@ You can control the width of the headers and values columns with the `properties
The sample below demonstrates the `igGrid`’s Responsive Web Design feature in vertical mode. Responsive vertical rendering mode renders the grid data in two columns. The left column holds the columns captions and the right column holds the data.
-
- [Responsive Vertical Rendering]({environment:SamplesEmbedUrl}/grid/responsive-vertical-rendering)
-
+
### Configuring vertical column rendering summary
diff --git a/docs/jquery/src/content/en/topics/controls/iggrid/features/responsive/configure/web-design-mode-creating-custom-profile.mdx b/docs/jquery/src/content/en/topics/controls/iggrid/features/responsive/configure/web-design-mode-creating-custom-profile.mdx
index e376afa4c6..40f54fc2dc 100644
--- a/docs/jquery/src/content/en/topics/controls/iggrid/features/responsive/configure/web-design-mode-creating-custom-profile.mdx
+++ b/docs/jquery/src/content/en/topics/controls/iggrid/features/responsive/configure/web-design-mode-creating-custom-profile.mdx
@@ -4,6 +4,8 @@ slug: iggrid-responsive-web-design-mode-creating-custom-profile
---
import ApiLink from 'docs-template/components/mdx/ApiLink.astro';
+import Sample from 'docs-template/components/mdx/Sample.astro';
+
# Creating Custom Responsive Web Design (RWD) Profiles (igGrid)
## Topic Overview
@@ -110,9 +112,7 @@ With these settings, the Name column is configured as hidden in `customPhone` mo
**In JavaScript:**
-
- [Responsive Web Design Mode]({environment:SamplesEmbedUrl}/grid/responsive-web-design-mode)
-
+
**In C#:**
diff --git a/docs/jquery/src/content/en/topics/controls/iggrid/features/row-selectors/configuring-row-selectors.mdx b/docs/jquery/src/content/en/topics/controls/iggrid/features/row-selectors/configuring-row-selectors.mdx
index 38aff350e2..7830b7638f 100644
--- a/docs/jquery/src/content/en/topics/controls/iggrid/features/row-selectors/configuring-row-selectors.mdx
+++ b/docs/jquery/src/content/en/topics/controls/iggrid/features/row-selectors/configuring-row-selectors.mdx
@@ -4,6 +4,8 @@ slug: iggrid-configuring-row-selectors
---
import ApiLink from 'docs-template/components/mdx/ApiLink.astro';
+import Sample from 'docs-template/components/mdx/Sample.astro';
+
# Configuring Row Selectors (igGrid)
@@ -369,9 +371,7 @@ Following are some other topics you may find useful.
This sample shows how to configure a Row Selectors in the `igGrid`.
-
- [Configuring Row Selectors]({environment:SamplesEmbedUrl}/grid/row-selectors)
-
+
diff --git a/docs/jquery/src/content/en/topics/controls/iggrid/features/selection/overview.mdx b/docs/jquery/src/content/en/topics/controls/iggrid/features/selection/overview.mdx
index 9847e0a4de..270da1ae9b 100644
--- a/docs/jquery/src/content/en/topics/controls/iggrid/features/selection/overview.mdx
+++ b/docs/jquery/src/content/en/topics/controls/iggrid/features/selection/overview.mdx
@@ -4,6 +4,8 @@ slug: iggrid-selection-overview
---
import ApiLink from 'docs-template/components/mdx/ApiLink.astro';
+import Sample from 'docs-template/components/mdx/Sample.astro';
+
# Selection Overview (igGrid)
## Topic Overview
@@ -76,9 +78,7 @@ Selection persistence is implemented for `igHierarchicalGrid` too.
The following sample demonstrates the persistance capabilities of the Selection feature.
-
- [Feature Persistence]({environment:SamplesEmbedUrl}/grid/feature-persistence)
-
+
Persisting depends on the feature’s ability to unambiguously distinguish rows and columns from one another.
diff --git a/docs/jquery/src/content/en/topics/controls/iggrid/features/tooltips/using-tooltips.mdx b/docs/jquery/src/content/en/topics/controls/iggrid/features/tooltips/using-tooltips.mdx
index 2088194718..802ce3b7a9 100644
--- a/docs/jquery/src/content/en/topics/controls/iggrid/features/tooltips/using-tooltips.mdx
+++ b/docs/jquery/src/content/en/topics/controls/iggrid/features/tooltips/using-tooltips.mdx
@@ -4,6 +4,8 @@ slug: iggrid-using-tooltips
---
import ApiLink from 'docs-template/components/mdx/ApiLink.astro';
+import Sample from 'docs-template/components/mdx/Sample.astro';
+
# Configuring Tooltips (igGrid)
## Topic Overview
@@ -167,9 +169,7 @@ $("#grid1").igGrid({
> **Note:** For information on how to do the same with MVC, see the [Enable Tooltips for an igGrid](/iggrid-enabling-tooltips.mdx) topic.
## Running sample
-
- [igGrid Tooltips]({environment:SamplesEmbedUrl}/grid/tooltips)
-
+
## Related Topics
Following are some other topics you may find useful.
diff --git a/docs/jquery/src/content/en/topics/controls/iggrid/features/updating/implementing-paste-from-excel.mdx b/docs/jquery/src/content/en/topics/controls/iggrid/features/updating/implementing-paste-from-excel.mdx
index 1699975b4c..e336f2e440 100644
--- a/docs/jquery/src/content/en/topics/controls/iggrid/features/updating/implementing-paste-from-excel.mdx
+++ b/docs/jquery/src/content/en/topics/controls/iggrid/features/updating/implementing-paste-from-excel.mdx
@@ -3,6 +3,8 @@ title: "Implementing Paste from Excel in igGrid"
slug: implementing-paste-from-excel
---
+import Sample from 'docs-template/components/mdx/Sample.astro';
+
# Implementing Paste from Excel in igGrid
## Purpose
@@ -132,9 +134,7 @@ Paste starting from active cell - when this mode is selected the pasted records
In order to test it open up any Excel spreadsheet ([or this one here](http://www.igniteui.com/data-files/sample-data.xlsx)), copy some rows, and paste it into the grid using the keyboard.
-
- [Paste from Excel]({environment:SamplesEmbedUrl}/grid/paste-from-excel)
-
+
## Related Content
diff --git a/docs/jquery/src/content/en/topics/controls/iggrid/features/updating/row-template/roweditdialog.mdx b/docs/jquery/src/content/en/topics/controls/iggrid/features/updating/row-template/roweditdialog.mdx
index dd8da1eb24..c361039fc1 100644
--- a/docs/jquery/src/content/en/topics/controls/iggrid/features/updating/row-template/roweditdialog.mdx
+++ b/docs/jquery/src/content/en/topics/controls/iggrid/features/updating/row-template/roweditdialog.mdx
@@ -4,6 +4,8 @@ slug: iggrid-updating-roweditdialog
---
import ApiLink from 'docs-template/components/mdx/ApiLink.astro';
+import Sample from 'docs-template/components/mdx/Sample.astro';
+
# Row Edit Dialog Overview (igGrid)
## Topic Overview
@@ -397,6 +399,4 @@ The following topics provide additional information related to this topic.
The following samples provide additional information related to this topic.
-
- [Row Edit Dialog]({environment:SamplesEmbedUrl}/grid/row-edit-dialog)
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/docs/jquery/src/content/en/topics/controls/iggrid/features/updating/updating.mdx b/docs/jquery/src/content/en/topics/controls/iggrid/features/updating/updating.mdx
index e8a27e991c..6b96b8ea7d 100644
--- a/docs/jquery/src/content/en/topics/controls/iggrid/features/updating/updating.mdx
+++ b/docs/jquery/src/content/en/topics/controls/iggrid/features/updating/updating.mdx
@@ -4,6 +4,8 @@ slug: iggrid-updating
---
import ApiLink from 'docs-template/components/mdx/ApiLink.astro';
+import Sample from 'docs-template/components/mdx/Sample.astro';
+
# Updating Overview (igGrid)
## Topic Overview
@@ -626,9 +628,7 @@ $('#grid1').igGridUpdating('deleteRow', 1, $('#grid1').igGrid("rowAt", 0));
$('#grid1').igGridUpdating('updateRow', 1, { 'FirstName': 'Alex' });
```
The sample below demonstrates the Updating API and events.
-
- [igGrid Editing API and Events]({environment:SamplesEmbedUrl}/grid/editing-api-events)
-
+
## Client-Side Events
diff --git a/docs/jquery/src/content/en/topics/controls/iggrid/features/virtualization/enabling-and-configuring-virtualization.mdx b/docs/jquery/src/content/en/topics/controls/iggrid/features/virtualization/enabling-and-configuring-virtualization.mdx
index 7f16373dec..aff1438aff 100644
--- a/docs/jquery/src/content/en/topics/controls/iggrid/features/virtualization/enabling-and-configuring-virtualization.mdx
+++ b/docs/jquery/src/content/en/topics/controls/iggrid/features/virtualization/enabling-and-configuring-virtualization.mdx
@@ -4,6 +4,8 @@ slug: iggrid-enabling-and-configuring-virtualization
---
import ApiLink from 'docs-template/components/mdx/ApiLink.astro';
+import Sample from 'docs-template/components/mdx/Sample.astro';
+
# Enabling and Configuring Virtualization (igGrid)
## Topic Overview
@@ -116,9 +118,7 @@ $("#grid1").igGrid({
The sample below demonstrates how the fixed virtualization works:
-
- [Virtualization (Fixed)]({environment:SamplesEmbedUrl}/grid/virtualization-fixed)
-
+
## Enabling and Configuring Column Virtualization
@@ -264,9 +264,7 @@ $("#grid1").igGrid({
The sample below demonstrates how the continuous virtualization works:
-
- [Virtualization (Continuous)]({environment:SamplesEmbedUrl}/grid/virtualization-continuous)
-
+
## Related Content
diff --git a/docs/jquery/src/content/en/topics/controls/iggrid/iggridexcelexporter-configuring.mdx b/docs/jquery/src/content/en/topics/controls/iggrid/iggridexcelexporter-configuring.mdx
index 37f0ee4933..2887e87ec9 100644
--- a/docs/jquery/src/content/en/topics/controls/iggrid/iggridexcelexporter-configuring.mdx
+++ b/docs/jquery/src/content/en/topics/controls/iggrid/iggridexcelexporter-configuring.mdx
@@ -4,6 +4,8 @@ slug: iggridexcelexporter-configuring
---
import ApiLink from 'docs-template/components/mdx/ApiLink.astro';
+import Sample from 'docs-template/components/mdx/Sample.astro';
+
# Configuring igGridExcelExporter
## Topic Overview
@@ -183,6 +185,4 @@ ig start
### Preview
The following is a preview of the final result.
-
- [{environment:SamplesEmbedUrl}/grid/export-client-events]({environment:SamplesEmbedUrl}/grid/export-client-events)
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/docs/jquery/src/content/en/topics/controls/iggrid/iggridexcelexporter-overview.mdx b/docs/jquery/src/content/en/topics/controls/iggrid/iggridexcelexporter-overview.mdx
index b2599a00fa..12d912e6b2 100644
--- a/docs/jquery/src/content/en/topics/controls/iggrid/iggridexcelexporter-overview.mdx
+++ b/docs/jquery/src/content/en/topics/controls/iggrid/iggridexcelexporter-overview.mdx
@@ -4,6 +4,8 @@ slug: iggridexcelexporter-overview
---
import ApiLink from 'docs-template/components/mdx/ApiLink.astro';
+import Sample from 'docs-template/components/mdx/Sample.astro';
+
# Grid Excel Exporter Overview
The `igGridExcelExporter` component allows you to export data from the `igGrid` into a Microsoft Excel document. The export can support themes and workbook customization while reflecting data manipulated in the grid through features Sorting, Filtering, Paging, etc. The following screenshot demonstrates what an exported `igGrid` looks like in Excel.
@@ -107,9 +109,7 @@ For more information on all the available properties of the exporter you can exp
### Preview
The following is a preview of the final result.
-
- [{environment:SamplesEmbedUrl}/grid/export-basic-grid]({environment:SamplesEmbedUrl}/grid/export-basic-grid)
-
+
## Related Content
diff --git a/docs/jquery/src/content/en/topics/controls/iggrid/overview.mdx b/docs/jquery/src/content/en/topics/controls/iggrid/overview.mdx
index 579d0c03de..45a81dd03c 100644
--- a/docs/jquery/src/content/en/topics/controls/iggrid/overview.mdx
+++ b/docs/jquery/src/content/en/topics/controls/iggrid/overview.mdx
@@ -4,6 +4,8 @@ slug: iggrid-overview
---
import ApiLink from 'docs-template/components/mdx/ApiLink.astro';
+import Sample from 'docs-template/components/mdx/Sample.astro';
+
# igGrid Overview
## About igGrid
@@ -163,9 +165,7 @@ To get started, include the required and localized resources for your applicatio
6. Working sample
-
- [igGrid Grid API and Events]({environment:SamplesEmbedUrl}/grid/grid-api-events)
-
+
## Related Content
diff --git a/docs/jquery/src/content/en/topics/controls/ighierarchicalgrid/bind/binding-to-local-data.mdx b/docs/jquery/src/content/en/topics/controls/ighierarchicalgrid/bind/binding-to-local-data.mdx
index b2dc8e1fa5..0fa81988be 100644
--- a/docs/jquery/src/content/en/topics/controls/ighierarchicalgrid/bind/binding-to-local-data.mdx
+++ b/docs/jquery/src/content/en/topics/controls/ighierarchicalgrid/bind/binding-to-local-data.mdx
@@ -4,6 +4,8 @@ slug: ighierarchicalgrid-binding-to-local-data
---
import ApiLink from 'docs-template/components/mdx/ApiLink.astro';
+import Sample from 'docs-template/components/mdx/Sample.astro';
+
# igHierarchicalGrid Binding to Local Data
## Topic Overview
@@ -64,9 +66,7 @@ Instead of defining the `columnLayouts` you could set the `autoGenerateLayouts`
You can refer to the below sample that demonstrates the end result.
-
- [Hierarchical Grid JSON Binding]({environment:SamplesEmbedUrl}/hierarchical-grid/json-binding)
-
+
## Binding to XML data
@@ -141,9 +141,7 @@ You can then assign this data source to the dataSource of the igHierarchicalGrid
You can refer to the below sample that demonstrates the result of this configuration.
-
- [Hierarchical Grid XML Binding]({environment:SamplesEmbedUrl}/hierarchical-grid/xml-binding)
-
+
### Related Content
diff --git a/docs/jquery/src/content/en/topics/controls/ighierarchicalgrid/configuring-knockout-support.mdx b/docs/jquery/src/content/en/topics/controls/ighierarchicalgrid/configuring-knockout-support.mdx
index 5a52a934a0..0f310f0a0d 100644
--- a/docs/jquery/src/content/en/topics/controls/ighierarchicalgrid/configuring-knockout-support.mdx
+++ b/docs/jquery/src/content/en/topics/controls/ighierarchicalgrid/configuring-knockout-support.mdx
@@ -4,6 +4,8 @@ slug: ighierarchicalgrid-configuring-knockout-support
---
import ApiLink from 'docs-template/components/mdx/ApiLink.astro';
+import Sample from 'docs-template/components/mdx/Sample.astro';
+
# Configuring Knockout Support (igHierarchicalGrid)
## Topic Overview
@@ -55,9 +57,7 @@ Specifying the column layouts | Yes | The columnLayouts option should be specifi
The following example demonstrates the basic configuration of an `igHierarchicalGrid` control bound to a Knockout observable View-Model object.
In this implementation, the first row of the hierarchical grid parent/child layout is bound using a standard two-way binding.
-
- [Hierarchical Grid KnockoutJS Configuration]({environment:SamplesEmbedUrl}/hierarchical-grid/bind-hgrid-with-ko)
-
+
## Related Topics
Following are some other topics you may find useful.
diff --git a/docs/jquery/src/content/en/topics/controls/ighierarchicalgrid/initializing.mdx b/docs/jquery/src/content/en/topics/controls/ighierarchicalgrid/initializing.mdx
index d216fd9e25..8d6e85288a 100644
--- a/docs/jquery/src/content/en/topics/controls/ighierarchicalgrid/initializing.mdx
+++ b/docs/jquery/src/content/en/topics/controls/ighierarchicalgrid/initializing.mdx
@@ -4,6 +4,8 @@ slug: ighierarchicalgrid-initializing
---
import ApiLink from 'docs-template/components/mdx/ApiLink.astro';
+import Sample from 'docs-template/components/mdx/Sample.astro';
+
# Initializing igHierarchicalGrid
@@ -87,9 +89,7 @@ For the purpose of this example only:
The sample below demonstrates how to bind igHierarchicalGrid to JSON data source.
-
- [igHierarchicalGrid JSON Binding]({environment:SamplesEmbedUrl}/hierarchical-grid/json-binding)
-
+
## Initializing an MVC igHierarchicalGrid
1. Create the LINQ to SQL model. 
diff --git a/docs/jquery/src/content/en/topics/controls/ightmleditor/working/angularjs-support.mdx b/docs/jquery/src/content/en/topics/controls/ightmleditor/working/angularjs-support.mdx
index 3e1ef98c77..3daf549bc5 100644
--- a/docs/jquery/src/content/en/topics/controls/ightmleditor/working/angularjs-support.mdx
+++ b/docs/jquery/src/content/en/topics/controls/ightmleditor/working/angularjs-support.mdx
@@ -3,6 +3,8 @@ title: "AngularJS Support (igHtmlEditor)"
slug: ightmleditor-angularjs-support
---
+import Sample from 'docs-template/components/mdx/Sample.astro';
+
# AngularJS Support (igHtmlEditor)
## Topic Overview
@@ -20,9 +22,7 @@ This topic contains the following sections:
### Preview
The following is a preview of the final result.
-
- [{environment:SamplesEmbedUrl}/html-editor/angular]({environment:SamplesEmbedUrl}/html-editor/angular)
-
+
### Requirements
In order to run this sample, you need to have:
diff --git a/docs/jquery/src/content/en/topics/controls/ightmleditor/working/modifying-contents-programmatically.mdx b/docs/jquery/src/content/en/topics/controls/ightmleditor/working/modifying-contents-programmatically.mdx
index 321c9624fe..6f471671bf 100644
--- a/docs/jquery/src/content/en/topics/controls/ightmleditor/working/modifying-contents-programmatically.mdx
+++ b/docs/jquery/src/content/en/topics/controls/ightmleditor/working/modifying-contents-programmatically.mdx
@@ -3,6 +3,8 @@ title: "Modifying Contents Programmatically"
slug: ightmleditor-modifying-contents-programmatically
---
+import Sample from 'docs-template/components/mdx/Sample.astro';
+
# Modifying Contents Programmatically
@@ -291,9 +293,7 @@ The following steps demonstrate how to print the `igHtmlEditor` contents.
##API and Events Demo
The following sample demonstrates how to handle events and use the API of the `igHtmlEditor` control:
-
- [{environment:SamplesEmbedUrl}/html-editor/api-and-events]({environment:SamplesEmbedUrl}/html-editor/api-and-events)
-
+
##Related Content
diff --git a/docs/jquery/src/content/en/topics/controls/iglayoutmanager/adding.mdx b/docs/jquery/src/content/en/topics/controls/iglayoutmanager/adding.mdx
index 919cb566f3..7be8431160 100644
--- a/docs/jquery/src/content/en/topics/controls/iglayoutmanager/adding.mdx
+++ b/docs/jquery/src/content/en/topics/controls/iglayoutmanager/adding.mdx
@@ -4,6 +4,8 @@ slug: iglayoutmanager-adding
---
import ApiLink from 'docs-template/components/mdx/ApiLink.astro';
+import Sample from 'docs-template/components/mdx/Sample.astro';
+
# Adding igLayoutManager
@@ -293,9 +295,7 @@ The following steps demonstrate how to add a basic `igLayoutManager` control wit
The following sample demonstrates initializing the Layout Manager control's Border layout from JavaScript, by handling events and assigning content to the created regions.
-
- [{environment:SamplesEmbedUrl}/layout-manager/border-layout]({environment:SamplesEmbedUrl}/layout-manager/border-layout)
-
+
##Adding igLayoutManager in the ASP.NET MVC – Procedure
diff --git a/docs/jquery/src/content/en/topics/controls/igmap/configuring/features/visual-features.mdx b/docs/jquery/src/content/en/topics/controls/igmap/configuring/features/visual-features.mdx
index 94a0aa36c3..9eb99570b3 100644
--- a/docs/jquery/src/content/en/topics/controls/igmap/configuring/features/visual-features.mdx
+++ b/docs/jquery/src/content/en/topics/controls/igmap/configuring/features/visual-features.mdx
@@ -4,6 +4,8 @@ slug: igmap-configuring-visual-features
---
import ApiLink from 'docs-template/components/mdx/ApiLink.astro';
+import Sample from 'docs-template/components/mdx/Sample.astro';
+
# Configuring the Visual Features (igMap)
##Topic Overview
@@ -214,9 +216,7 @@ $("#map").igMap({
###Sample
This sample demonstrates how to set map tooltips in the igMap control and bind a view model to the control. The locations of a set of cities around the world are provided by the server in a list of objects which is bound to a geographic symbol series in the map control. The tooltip template that displays city and country name, and geographic coordinates is assigned to the series and displayed when the mouse pointer hovers over the city marker on the map. Zoom in to reveal more detail using both the mouse scroll wheel and, on touch devices, the pinch gesture.
-
- [{environment:SamplesEmbedUrl}/map/map-tooltips]({environment:SamplesEmbedUrl}/map/map-tooltips)
-
+
##Code Example: Configuring the Marker Template in JavaScript
diff --git a/docs/jquery/src/content/en/topics/controls/igmap/data-binding-igmap.mdx b/docs/jquery/src/content/en/topics/controls/igmap/data-binding-igmap.mdx
index 7c48542102..6adac824c9 100644
--- a/docs/jquery/src/content/en/topics/controls/igmap/data-binding-igmap.mdx
+++ b/docs/jquery/src/content/en/topics/controls/igmap/data-binding-igmap.mdx
@@ -3,6 +3,8 @@ title: "Binding igMap to Data"
slug: data-binding-igmap
---
+import Sample from 'docs-template/components/mdx/Sample.astro';
+
# Binding igMap to Data
@@ -307,9 +309,7 @@ This sample demonstrates how to bind JSON data with locations of cities in the w
### Example
-
- [{environment:SamplesEmbedUrl}/map/json-binding]({environment:SamplesEmbedUrl}/map/json-binding)
-
+
##Code Example: Binding Geographic Symbol Series to a JSON Database from a Remote Service
diff --git a/docs/jquery/src/content/en/topics/controls/igpiechart/databinding.mdx b/docs/jquery/src/content/en/topics/controls/igpiechart/databinding.mdx
index 7a0c1c4d2b..d58c4ade50 100644
--- a/docs/jquery/src/content/en/topics/controls/igpiechart/databinding.mdx
+++ b/docs/jquery/src/content/en/topics/controls/igpiechart/databinding.mdx
@@ -4,6 +4,8 @@ slug: igpiechart-databinding
---
import ApiLink from 'docs-template/components/mdx/ApiLink.astro';
+import Sample from 'docs-template/components/mdx/Sample.astro';
+
# Data Binding (igPieChart)
### Purpose
@@ -283,9 +285,7 @@ The following steps demonstrate how to bind an XML string to an `igPieChart` con
```
The following sample implements the above steps.
-
- [{environment:SamplesEmbedUrl}/pie-chart/xml-binding]({environment:SamplesEmbedUrl}/pie-chart/xml-binding)
-
+
##Bind to an IQueryable<T> in ASP.NET MVC
diff --git a/docs/jquery/src/content/en/topics/controls/igpivotgrid/configuration.mdx b/docs/jquery/src/content/en/topics/controls/igpivotgrid/configuration.mdx
index 0099baff86..709705b051 100644
--- a/docs/jquery/src/content/en/topics/controls/igpivotgrid/configuration.mdx
+++ b/docs/jquery/src/content/en/topics/controls/igpivotgrid/configuration.mdx
@@ -4,6 +4,8 @@ slug: igpivotgrid-configuration
---
import ApiLink from 'docs-template/components/mdx/ApiLink.astro';
+import Sample from 'docs-template/components/mdx/Sample.astro';
+
# Configuring igPivotGrid
@@ -77,9 +79,7 @@ The igPivotGrid allows specifying a
- [Custom Move Validation]({environment:SamplesEmbedUrl}/pivot-grid/custom-drag-drop-validation)
-
+
### Drag and Drop custom elements
@@ -104,18 +104,14 @@ The following steps will guide you through the process of implementing dragging
You can refer to the below sample with a similar configuration.
-
- [Drag Drop Custom Elements]({environment:SamplesEmbedUrl}/pivot-grid/drag-drop-custom-elements)
-
+
### Expand Members
In order to programatically expand members in the Pivot Grid the method can be used.
The below sample demonstrates how to use the method when the grid's data source is initialized on the event handler.
-
- [Expand Members]({environment:SamplesEmbedUrl}/pivot-grid/expand-members)
-
+
## Related Content
diff --git a/docs/jquery/src/content/en/topics/controls/igpivotgrid/overview.mdx b/docs/jquery/src/content/en/topics/controls/igpivotgrid/overview.mdx
index 650f204fa4..23e86aafb9 100644
--- a/docs/jquery/src/content/en/topics/controls/igpivotgrid/overview.mdx
+++ b/docs/jquery/src/content/en/topics/controls/igpivotgrid/overview.mdx
@@ -4,6 +4,8 @@ slug: igpivotgrid-overview
---
import ApiLink from 'docs-template/components/mdx/ApiLink.astro';
+import Sample from 'docs-template/components/mdx/Sample.astro';
+
# igPivotGrid Overview
@@ -161,9 +163,7 @@ The following features of the igGrid can be enabled via the gridOptions.
- [All Grid Features]({environment:SamplesEmbedUrl}/pivot-grid/all-grid-features)
-
+
## User Interactions and Usability
diff --git a/docs/jquery/src/content/en/topics/controls/igradialgauge/configuring/labels.mdx b/docs/jquery/src/content/en/topics/controls/igradialgauge/configuring/labels.mdx
index d38b6008b5..60d394bf40 100644
--- a/docs/jquery/src/content/en/topics/controls/igradialgauge/configuring/labels.mdx
+++ b/docs/jquery/src/content/en/topics/controls/igradialgauge/configuring/labels.mdx
@@ -3,6 +3,8 @@ title: "Configuring Labels (igRadialGauge)"
slug: igradialgauge-configuring-labels
---
+import Sample from 'docs-template/components/mdx/Sample.astro';
+
# Configuring Labels (igRadialGauge)
@@ -94,9 +96,7 @@ $("#gauge").igRadialGauge({
The following example demonstrates how to configure the Radial Gauge control's Label settings. Use the slider to see how the labelExtent and labelInterval properties affect the Label.
-
- [{environment:SamplesEmbedUrl}/radial-gauge/label-settings]({environment:SamplesEmbedUrl}/radial-gauge/label-settings)
-
+
## Related Content
### Topics
diff --git a/docs/jquery/src/content/en/topics/controls/igsparkline/binding-to-data.mdx b/docs/jquery/src/content/en/topics/controls/igsparkline/binding-to-data.mdx
index 736bda3928..468b5eb300 100644
--- a/docs/jquery/src/content/en/topics/controls/igsparkline/binding-to-data.mdx
+++ b/docs/jquery/src/content/en/topics/controls/igsparkline/binding-to-data.mdx
@@ -3,6 +3,8 @@ title: "Binding igSparkline to Data"
slug: igsparkline-binding-to-data
---
+import Sample from 'docs-template/components/mdx/Sample.astro';
+
# Binding igSparkline to Data
## Topic Overview
@@ -62,9 +64,7 @@ Data binding to an IEnumerable<T>|**Related Topic**
[Adding igSparklin
Data binding to remote Data|**Refer to the sample below**
#### Bind to Remote Data
-
- [{environment:SamplesEmbedUrl}/sparkline/bind-to-remote-data]({environment:SamplesEmbedUrl}/sparkline/bind-to-remote-data)
-
+
## Related Content
### Topics
diff --git a/docs/jquery/src/content/en/topics/controls/igsplitter/handling-events.mdx b/docs/jquery/src/content/en/topics/controls/igsplitter/handling-events.mdx
index df19447424..a394b2aa6f 100644
--- a/docs/jquery/src/content/en/topics/controls/igsplitter/handling-events.mdx
+++ b/docs/jquery/src/content/en/topics/controls/igsplitter/handling-events.mdx
@@ -3,6 +3,8 @@ title: "Handling Events"
slug: igsplitter-handling-events
---
+import Sample from 'docs-template/components/mdx/Sample.astro';
+
# Handling Events
@@ -122,9 +124,7 @@ $(document).delegate(".selector", "igsplitterresizestarted", function(evt, ui) {
## Splitter API and Events Demo
#### Sample below demonstrates how to handle events in the Splitter control and API usage.
-
- [{environment:SamplesEmbedUrl}/splitter/api-events-splitter]({environment:SamplesEmbedUrl}/splitter/api-events-splitter)
-
+
## Related Content
### Samples
diff --git a/docs/jquery/src/content/en/topics/controls/igtree/event-reference.mdx b/docs/jquery/src/content/en/topics/controls/igtree/event-reference.mdx
index 634f0f2ef4..4a670b6d52 100644
--- a/docs/jquery/src/content/en/topics/controls/igtree/event-reference.mdx
+++ b/docs/jquery/src/content/en/topics/controls/igtree/event-reference.mdx
@@ -4,6 +4,8 @@ slug: igtree-event-reference
---
import ApiLink from 'docs-template/components/mdx/ApiLink.astro';
+import Sample from 'docs-template/components/mdx/Sample.astro';
+
# Event Reference (igTree)
## Topic Overview
@@ -71,9 +73,7 @@ $("#igTree1").igTree({
The following example shows how this is done and it also demonstrates the use of the jQuery's [`on`](http://api.jquery.com/on/) method to attach an event handler to a selected element:
-
- [{environment:SamplesEmbedUrl}/tree-control/api-and-events]({environment:SamplesEmbedUrl}/tree-control/api-and-events)
-
+
### Attaching Event Handlers in MVC
diff --git a/docs/jquery/src/content/en/topics/controls/igtreegrid/overview.mdx b/docs/jquery/src/content/en/topics/controls/igtreegrid/overview.mdx
index 1a98f554cb..7efa1b736f 100644
--- a/docs/jquery/src/content/en/topics/controls/igtreegrid/overview.mdx
+++ b/docs/jquery/src/content/en/topics/controls/igtreegrid/overview.mdx
@@ -4,6 +4,8 @@ slug: igtreegrid-overview
---
import ApiLink from 'docs-template/components/mdx/ApiLink.astro';
+import Sample from 'docs-template/components/mdx/Sample.astro';
+
# Overview (igTreeGrid)
The `igTreeGrid`™ presents hierarchical data by combining the principles of a tree and tabular data into a single control. Inside the `igTreeGrid` hierarchical data is rendered using the same columns for each row while providing a way for users to expand and collapse child data.
@@ -88,9 +90,7 @@ $('#treegrid').igTreeGrid({
The tree grid below is bound to a flat data source:
-
- [JSON Binding]({environment:SamplesEmbedUrl}/tree-grid/json-binding)
-
+
### Hierarchical Data Source
@@ -131,9 +131,7 @@ $('#treegrid').igTreeGrid({
The tree grid below is bound to a hierarchical data source:
-
- [File Explorer]({environment:SamplesEmbedUrl}/tree-grid/file-explorer)
-
+
## Feature differences from igGrid
diff --git a/docs/jquery/src/content/en/topics/controls/igupload/working-with-igupload/using-client-side-events.mdx b/docs/jquery/src/content/en/topics/controls/igupload/working-with-igupload/using-client-side-events.mdx
index 019ac936c6..9d2e2401fa 100644
--- a/docs/jquery/src/content/en/topics/controls/igupload/working-with-igupload/using-client-side-events.mdx
+++ b/docs/jquery/src/content/en/topics/controls/igupload/working-with-igupload/using-client-side-events.mdx
@@ -3,6 +3,8 @@ title: "Using Client-Side Events (igUpload)"
slug: igupload-using-client-side-events
---
+import Sample from 'docs-template/components/mdx/Sample.astro';
+
# Using Client-Side Events (igUpload)
The `igUpload` control exposes a rich client-side API featuring a number of events. There are seven different client-side events, which are fired either while the user is interacting with the control or during the upload process.
@@ -59,9 +61,7 @@ By default the {environment:ProductNameMVC} don’t support defining t
This sample demonstrates how to utilize the igUpload's events and methods:
-
- [API and Events]({environment:SamplesEmbedUrl}/file-upload/api-events)
-
+
## Client Events
diff --git a/docs/jquery/src/content/en/topics/general-and-getting-started/getting-started.mdx b/docs/jquery/src/content/en/topics/general-and-getting-started/getting-started.mdx
index d6e37b45c6..eaa2f21f2c 100644
--- a/docs/jquery/src/content/en/topics/general-and-getting-started/getting-started.mdx
+++ b/docs/jquery/src/content/en/topics/general-and-getting-started/getting-started.mdx
@@ -3,6 +3,8 @@ title: "Getting Started with {environment:ProductName}"
slug: getting-started
---
+import Sample from 'docs-template/components/mdx/Sample.astro';
+
# Getting Started with {environment:ProductName}
## In this topic
@@ -144,9 +146,7 @@ There are two options available: Directly or with Page Designer
### Add an igGrid Directly
-
- [igGrid Paging]({environment:SamplesEmbedUrl}/grid/paging)
-
+
### Add an igGrid using Page Designer
diff --git a/docs/jquery/src/content/en/topics/general-and-getting-started/historyjs-integration-with-igniteui-controls.mdx b/docs/jquery/src/content/en/topics/general-and-getting-started/historyjs-integration-with-igniteui-controls.mdx
index 33e6bb4ba3..f3e3683900 100644
--- a/docs/jquery/src/content/en/topics/general-and-getting-started/historyjs-integration-with-igniteui-controls.mdx
+++ b/docs/jquery/src/content/en/topics/general-and-getting-started/historyjs-integration-with-igniteui-controls.mdx
@@ -3,6 +3,8 @@ title: "History.js Integration with {environment:ProductName} controls
slug: historyjs-integration-with-igniteui-controls
---
+import Sample from 'docs-template/components/mdx/Sample.astro';
+
# History.js Integration with {environment:ProductName} controls
## Topic Overview
@@ -201,9 +203,7 @@ This sample demonstrates how the igGrid control can be integrated with history.j
In addition, the sample have some code that apply a sorting, when the grid is initially rendered. It also shows how the saving, replacing and restoring happens for the other grid features and how to form an URL for the different grid feature states.
-
- [HistoryJS]({environment:SamplesEmbedUrl}/grid/history)
-
+
## Related Content
diff --git a/scripts/migrate-embed-samples.mjs b/scripts/migrate-embed-samples.mjs
new file mode 100644
index 0000000000..cb7b96017f
--- /dev/null
+++ b/scripts/migrate-embed-samples.mjs
@@ -0,0 +1,243 @@
+#!/usr/bin/env node
+/**
+ * migrate-embed-samples.mjs
+ *
+ * Converts legacy DocFX embed-sample blocks to the new MDX component.
+ *
+ * Input pattern (any of these forms):
+ *
+ *
+ * [Label Text]({environment:SamplesEmbedUrl}/grid/cell-merging-custom)
+ *
+ *
+ *
+ * [{environment:SamplesEmbedUrl}/grid/angular]({environment:SamplesEmbedUrl}/grid/angular)
+ *
+ *
+ * Output:
+ *
+ *
+ *
+ * Rules:
+ * - The sample path is extracted from the URL (the part after {environment:SamplesEmbedUrl}).
+ * - `/index.html` is appended to the path if it doesn't already end with a file extension.
+ * - The label is used as `alt`. If the label is the same as the URL (URL-only form), `alt`
+ * is derived from the last path segment, title-cased.
+ * - If the import for Sample.astro is not already present, it is added after the frontmatter.
+ * - Already-commented-out embed-sample blocks (JSX comments) are left untouched.
+ *
+ * Usage:
+ * node scripts/migrate-embed-samples.mjs # dry-run (shows what would change)
+ * node scripts/migrate-embed-samples.mjs --apply # write changes to disk
+ * node scripts/migrate-embed-samples.mjs --topics=docs/other/src/content/en/topics
+ * node scripts/migrate-embed-samples.mjs --height=500 # override default height (default: 428)
+ */
+
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const ROOT = path.resolve(__dirname, '..');
+
+const topicsArg = process.argv.find(a => a.startsWith('--topics='));
+const heightArg = process.argv.find(a => a.startsWith('--height='));
+const TOPICS_DIR = topicsArg
+ ? path.resolve(ROOT, topicsArg.slice('--topics='.length))
+ : path.join(ROOT, 'docs/jquery/src/content/en/topics');
+const DEFAULT_HEIGHT = heightArg ? parseInt(heightArg.slice('--height='.length), 10) : 428;
+const APPLY = process.argv.includes('--apply');
+
+const SAMPLE_IMPORT = "import Sample from 'docs-template/components/mdx/Sample.astro';";
+
+console.log(`\n=== migrate-embed-samples [${APPLY ? 'APPLY' : 'DRY-RUN'}] ===`);
+console.log(` topics: ${TOPICS_DIR}`);
+console.log(` height: ${DEFAULT_HEIGHT}`);
+console.log();
+
+// ─── Helpers ─────────────────────────────────────────────────────────────────
+
+function walkMdx(dir) {
+ const results = [];
+ for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+ const full = path.join(dir, entry.name);
+ if (entry.isDirectory()) {
+ results.push(...walkMdx(full));
+ } else if (entry.name.endsWith('.mdx') || entry.name.endsWith('.md')) {
+ results.push(full);
+ }
+ }
+ return results;
+}
+
+/**
+ * Derives a display label from a URL sample path.
+ * Uses the last two meaningful segments to give better context.
+ * e.g. "/grid/cell-merging-custom/index.html" → "Grid Cell Merging Custom"
+ * "/data-chart/json-binding/index.html" → "Data Chart Json Binding"
+ */
+function labelFromPath(samplePath) {
+ const segments = samplePath.split('/').filter(s => s && s !== 'index.html');
+ // Use all segments (omitting 'index.html') joined as a title.
+ return segments
+ .join(' ')
+ .replace(/[-_]/g, ' ')
+ .replace(/\b\w/g, c => c.toUpperCase());
+}
+
+/**
+ * Decodes HTML entities used in MDX to escape JSX curly braces.
+ * { → { } → }
+ */
+function decodeEntities(str) {
+ return str.replace(/{/g, '{').replace(/}/g, '}');
+}
+
+/**
+ * Given a URL like "{environment:SamplesEmbedUrl}/grid/cell-merging-custom",
+ * extracts the sample path ("/grid/cell-merging-custom") and returns
+ * the src value with "/index.html" appended when there's no file extension.
+ */
+function urlToSrc(rawUrl) {
+ // Strip the {environment:SamplesEmbedUrl} token (with or without HTML entities).
+ const decoded = decodeEntities(rawUrl);
+ const withoutToken = decoded
+ .replace(/\{environment:SamplesEmbedUrl\}/gi, '')
+ .replace(/\{environment:NewSamplesUrl\}/gi, '')
+ .replace(/\{environment:SamplesUrl\}/gi, '');
+
+ let src = withoutToken.trim();
+ if (!src.startsWith('/')) src = '/' + src;
+
+ // Append /index.html if no file extension at the end.
+ if (!/\.[a-z]+$/i.test(src)) {
+ src = src.replace(/\/$/, '') + '/index.html';
+ }
+
+ return src;
+}
+
+/**
+ * Determines whether a label string is just a URL (URL-only form).
+ * In that case we derive the alt from the path instead.
+ */
+function isUrlLabel(label) {
+ const decoded = decodeEntities(label);
+ return /\{environment:Samples/.test(decoded) || /^https?:\/\//.test(decoded.trim());
+}
+
+// ─── The embed-sample block regex ─────────────────────────────────────────────
+//
+// Matches:
+//
+// [label](url)
+//
+//
+// Does NOT match blocks that are already inside a {/* */} comment.
+// We look for the block in raw text and handle surrounding JSX comment detection
+// by checking the context before each match.
+
+const EMBED_BLOCK_RE =
+ /\s*\[([^\]]*)\]\(([^)]*)\)\s*<\/div>/g;
+
+// ─── Per-file transformation ──────────────────────────────────────────────────
+
+function migrateFile(filePath) {
+ const original = fs.readFileSync(filePath, 'utf-8');
+ let updated = original;
+
+ // Track whether we made any replacement.
+ let changed = false;
+
+ // We iterate with a manual loop so we can check if the match is already
+ // inside a {/* ... */} JSX comment and skip it.
+ let match;
+ const replacements = [];
+
+ EMBED_BLOCK_RE.lastIndex = 0;
+ while ((match = EMBED_BLOCK_RE.exec(original)) !== null) {
+ const fullMatch = match[0];
+ const rawLabel = match[1];
+ const rawUrl = match[2];
+ const matchStart = match.index;
+
+ // Skip if inside a {/* ... */} JSX comment.
+ // We check for an unclosed {/* before this match position.
+ const before = original.slice(0, matchStart);
+ const openComments = (before.match(/\{\/\*/g) ?? []).length;
+ const closeComments = (before.match(/\*\/\}/g) ?? []).length;
+ if (openComments > closeComments) continue;
+
+ const src = urlToSrc(rawUrl);
+ const alt = isUrlLabel(rawLabel) ? labelFromPath(src) : rawLabel.trim();
+
+ const component = ``;
+
+ replacements.push({ fullMatch, component });
+ }
+
+ if (replacements.length === 0) return;
+
+ // Apply replacements in reverse order so indices stay valid.
+ // Since we're doing string replacement (not index-based), just replace all.
+ for (const { fullMatch, component } of replacements) {
+ updated = updated.replace(fullMatch, component);
+ changed = true;
+ }
+
+ // Inject the Sample import if not already present.
+ if (changed && !updated.includes(SAMPLE_IMPORT)) {
+ // Insert after the closing --- of the frontmatter, or at the top.
+ const fmEnd = updated.indexOf('---', 3);
+ if (fmEnd !== -1) {
+ const insertAt = fmEnd + 3;
+ // Strip leading whitespace/newlines after frontmatter, then
+ // add exactly: blank line, import, blank line, content.
+ // This ensures there is always an empty line before the first heading.
+ const rest = updated.slice(insertAt).replace(/^\s*\n+/, '');
+ updated = updated.slice(0, insertAt) + '\n\n' + SAMPLE_IMPORT + '\n\n' + rest;
+ } else {
+ updated = SAMPLE_IMPORT + '\n\n' + updated;
+ }
+ }
+
+ if (updated === original) return;
+
+ const rel = path.relative(ROOT, filePath);
+ console.log(` ${APPLY ? 'updated' : 'would update'}: ${rel} (${replacements.length} replacement${replacements.length > 1 ? 's' : ''})`);
+ replacements.forEach(({ fullMatch, component }) => {
+ const preview = fullMatch.replace(/\s+/g, ' ').slice(0, 80);
+ console.log(` - "${preview}" → ${component}`);
+ });
+
+ if (APPLY) {
+ fs.writeFileSync(filePath, updated, 'utf-8');
+ }
+}
+
+// ─── Main ─────────────────────────────────────────────────────────────────────
+
+const files = walkMdx(TOPICS_DIR);
+let totalFiles = 0;
+let totalReplacements = 0;
+
+for (const file of files) {
+ const before = fs.readFileSync(file, 'utf-8');
+ EMBED_BLOCK_RE.lastIndex = 0;
+ const count = (before.match(EMBED_BLOCK_RE) ?? []).length;
+ if (count > 0) {
+ totalFiles++;
+ totalReplacements += count;
+ migrateFile(file);
+ }
+}
+
+console.log();
+console.log(`=== Summary ===`);
+console.log(` Files with embed-sample blocks: ${totalFiles}`);
+console.log(` Total blocks to replace: ${totalReplacements}`);
+if (!APPLY) {
+ console.log();
+ console.log(' Run with --apply to write changes.');
+}
+console.log();
diff --git a/src/lib/platform-context.ts b/src/lib/platform-context.ts
index ce15a15578..de09642e61 100644
--- a/src/lib/platform-context.ts
+++ b/src/lib/platform-context.ts
@@ -232,7 +232,8 @@ let _env: Record | null = null;
/**
* Returns the platform context for the current build.
- * Resolution order: PLATFORM env var → .platform.json → 'React' default.
+ * Resolution order: PLATFORM env var → DOCS_PLATFORM env var (lowercase key)
+ * → .platform.json → 'React' default.
*
* Result is cached for the build lifetime.
*/
@@ -245,15 +246,25 @@ export function getPlatformContext(): PlatformContext {
if (envPlatform && PLATFORMS[envPlatform]) {
name = envPlatform;
} else {
- try {
- const cfgPath = path.resolve(process.cwd(), '.platform.json');
- if (fs.existsSync(cfgPath)) {
- const cfg = JSON.parse(fs.readFileSync(cfgPath, 'utf-8'));
- if (cfg.platform && PLATFORMS[cfg.platform as PlatformName]) {
- name = cfg.platform as PlatformName;
+ // DOCS_PLATFORM is the lowercase key set by createDocsSite() (e.g. 'jquery').
+ // Resolve it by matching against each platform's `lower` field.
+ const docsPlatform = process.env.DOCS_PLATFORM;
+ const found = docsPlatform
+ ? (Object.values(PLATFORMS) as PlatformContext[]).find(p => p.lower === docsPlatform)
+ : undefined;
+ if (found) {
+ name = found.name;
+ } else {
+ try {
+ const cfgPath = path.resolve(process.cwd(), '.platform.json');
+ if (fs.existsSync(cfgPath)) {
+ const cfg = JSON.parse(fs.readFileSync(cfgPath, 'utf-8'));
+ if (cfg.platform && PLATFORMS[cfg.platform as PlatformName]) {
+ name = cfg.platform as PlatformName;
+ }
}
- }
- } catch { /* use default */ }
+ } catch { /* use default */ }
+ }
}
const mode = process.env.DOCS_ENV ?? process.env.NODE_ENV ?? 'development';
diff --git a/src/scripts/sample-widget.ts b/src/scripts/sample-widget.ts
index 9b6f572a28..8ad6f8bdad 100644
--- a/src/scripts/sample-widget.ts
+++ b/src/scripts/sample-widget.ts
@@ -202,6 +202,7 @@ function addFooter(
explicitEditor: string | null,
onStackblitz: (() => void) | null,
onCodeSandbox: (() => void) | null,
+ onJsFiddle: (() => void) | null = null
): void {
const footer = document.createElement('div');
footer.className = 'editing-buttons-container';
@@ -229,6 +230,15 @@ function addFooter(
footer.appendChild(btn);
}
+ if ((!explicitEditor || explicitEditor === 'jsfiddle') && onJsFiddle) {
+ const btn = document.createElement('button');
+ btn.className = 'jsfiddle-btn';
+ btn.textContent = 'JSFiddle';
+ btn.style.fontWeight = '500';
+ btn.addEventListener('click', onJsFiddle);
+ footer.appendChild(btn);
+ }
+
widget.appendChild(footer);
}
@@ -407,6 +417,148 @@ class XplatCodeService {
}
}
+// ─── jQuery Code Service ──────────────────────────────────────────────────────
+
+/**
+ * jQuery sample structure (hosted on GitHub Pages at igniteui.github.io/help-samples):
+ * //index.html — live demo
+ * //.gh-embed.json — metadata with code-viewer file list
+ * //fiddle/demo.js|demo.html|demo.css — source files
+ *
+ * .gh-embed.json has:
+ * { srcUrlPattern, embed: [{ label, path }, { label, path }, { type: "htmlpage", ... }] }
+ */
+
+interface GhEmbedEntry {
+ label: string;
+ path: string;
+ type?: string;
+ url?: string;
+}
+
+interface GhEmbedJson {
+ srcUrlPattern: string;
+ embed: GhEmbedEntry[];
+}
+
+class JQueryCodeService {
+ async init(ctx: WidgetContext): Promise {
+ const { widget, iframeSrc, demosBaseUrl, widgetIndex, navbar, container, activateTab } = ctx;
+ let samplePath = getSamplePath(iframeSrc, demosBaseUrl);
+ // Strip trailing filename (e.g. index.html) to get the directory path.
+ samplePath = samplePath.replace(/\/[^/]+\.[^/]+$/, '');
+
+ // GitHub Pages uses Jekyll which ignores dotfiles (.gh-embed.json → 404).
+ // Use raw.githubusercontent.com instead — it serves all files and sets
+ // Access-Control-Allow-Origin: *, so CORS is not an issue from localhost.
+ //
+ // demosBaseUrl example: https://igniteui.github.io/help-samples/25.1/EN/
+ // We need the version/lang prefix from the Pages path, e.g. "25.1/EN".
+ const pagesPath = new URL(demosBaseUrl).pathname; // /help-samples/25.1/EN/
+ const repoName = pagesPath.split('/').filter(Boolean)[0]; // "help-samples"
+ const subPath = pagesPath.split('/').filter(Boolean).slice(1).join('/').replace(/\/$/, ''); // "25.1/EN"
+ const rawBase = `https://raw.githubusercontent.com/IgniteUI/${repoName}/master`;
+
+ try {
+ // Fetch the embed metadata from raw.githubusercontent.com.
+ const metaUrl = `${rawBase}/${subPath}/${samplePath}/.gh-embed.json`;
+ const metaRes = await fetch(metaUrl, { credentials: 'omit' });
+ if (!metaRes.ok) throw new Error(`.gh-embed.json ${metaRes.status}`);
+ const meta: GhEmbedJson = await metaRes.json();
+
+ // Filter out the "htmlpage" result entry — only keep code files.
+ const codeEntries = meta.embed.filter(e => e.type !== 'htmlpage' && e.path);
+
+ // Fetch all code files in parallel from raw.githubusercontent.com.
+ const fileContents = await Promise.all(
+ codeEntries.map(async (entry) => {
+ // entry.path is relative to the repo root, e.g.
+ // "25.1/EN/grid/cell-merging-custom/fiddle/demo.js"
+ const url = `${rawBase}/${entry.path}`;
+ try {
+ const res = await fetch(url, { credentials: 'omit' });
+ if (!res.ok) return null;
+ const content = await res.text();
+ return {
+ label: entry.label,
+ ext: entry.path.split('.').pop() || 'text',
+ content,
+ };
+ } catch {
+ return null;
+ }
+ })
+ );
+
+ const files = fileContents.filter(Boolean) as { label: string; ext: string; content: string }[];
+
+ // Add code tabs for each file.
+ files.forEach((file, i) => {
+ addCodeTab(navbar, container, activateTab, widgetIndex, {
+ fileExtension: file.ext,
+ fileHeader: file.label,
+ content: file.content,
+ isMain: true,
+ }, i);
+ });
+
+ // Build the "View on GitHub" source URL from srcUrlPattern.
+ // srcUrlPattern example: "/${owner}/${repo}-src/blob/25.1/HTMLSamples/grid/cell-merging-custom.html"
+ const sourceUrl = meta.srcUrlPattern
+ ? `https://github.com${meta.srcUrlPattern
+ .replace('${owner}', 'IgniteUI')
+ .replace('${repo}', 'help-samples')}`
+ : null;
+
+ // jsFiddle: post the fiddle files.
+ const jsFile = files.find(f => f.ext === 'js');
+ const htmlFile = files.find(f => f.ext === 'html');
+ const cssFile = files.find(f => f.ext === 'css');
+
+ const onJsFiddle = (jsFile || htmlFile)
+ ? () => this._openJsFiddle(
+ htmlFile?.content ?? '',
+ jsFile?.content ?? '',
+ cssFile?.content ?? '',
+ )
+ : null;
+
+ addFooter(widget, 'jsfiddle', null, null, onJsFiddle);
+
+ } catch (err: any) {
+ console.warn('[sample-widget] Could not fetch jQuery sample files:', err.message);
+ }
+ }
+
+ /**
+ * Opens jsFiddle with the sample code via a POST form submission.
+ * See https://docs.jsfiddle.net/api/display-a-fiddle-from-post
+ */
+ private _openJsFiddle(html: string, js: string, css: string): void {
+ const form = document.createElement('form');
+ form.method = 'POST';
+ form.action = 'https://jsfiddle.net/api/post/library/pure/';
+ form.target = '_blank';
+
+ const addField = (name: string, value: string) => {
+ const input = document.createElement('input');
+ input.type = 'hidden';
+ input.name = name;
+ input.value = value;
+ form.appendChild(input);
+ };
+
+ addField('html', html);
+ addField('js', js);
+ addField('css', css);
+ addField('wrap', '1'); // Wrap JS in onLoad
+
+ document.body.appendChild(form);
+ form.submit();
+ document.body.removeChild(form);
+ }
+}
+
// ─── Entry Point ──────────────────────────────────────────────────────────────
/**
@@ -492,9 +644,11 @@ export function initSampleWidgets(): void {
if (!demosBaseUrl) return;
- const service = isXplatPlatform(platform)
- ? new XplatCodeService(platform)
- : new AngularCodeService();
+ const service = platform === 'jquery'
+ ? new JQueryCodeService()
+ : isXplatPlatform(platform)
+ ? new XplatCodeService(platform)
+ : new AngularCodeService();
const ctx: WidgetContext = {
widget, iframeSrc, demosBaseUrl, widgetIndex: index, navbar, container, activateTab, githubSrc,