### Initial Form Setup
Source: https://github.com/igniteui/ignite-ui/blob/master/demos/editors/credit.html
Performs initial setup when the page loads. It hides the PIN input and the results container until they are relevant.
```javascript
(function doOnLoad() {
$("#pin").hide();
$("#valuesContainer").hide();
}());
```
--------------------------------
### Option Examples
Source: https://github.com/igniteui/ignite-ui/wiki/API-Documentation-Guidelines
Examples of how options are documented, including @Ignored and @Deprecated flags.
```APIDOC
## Options
### property1
- **type**: string
- **description**: Sets/gets options supported by the igValidator widget. Note: Validation rules of igValidator, such as min and max value/length are applied separately triggering errors, while similar options of the editor work to prevent wrong values from being entered.
- **flags**: @Ignored
### property2
- **type**: string
- **description**: Sets/gets options supported by the igValidator widget. Note: Validation rules of igValidator, such as min and max value/length are applied separately triggering errors, while similar options of the editor work to prevent wrong values from being entered.
### property3
- **type**: string
- **description**: Sets/gets options supported by the igValidator widget. Note: Validation rules of igValidator, such as min and max value/length are applied separately triggering errors, while similar options of the editor work to prevent wrong values from being entered.
- **flags**: @Deprecated
### property4
- **type**: off|biState|triState
- **description**: Gets the type of checkboxes rendered before the tree nodes. Can be set only at initialization.
- **off**: type="string" Checkboxes are turned off and not rendered for the tree.
- **biState**: type="string" Checkboxes are rendered and support two states (checked and unchecked). Checkboxes do not cascade down or up in this mode. @Deprecated
- **triState**: type="string" Checkboxes are rendered and support three states (checked, partial and unchecked). Checkboxes cascade up and down in this mode. @Ignored
### property5
- **type**: string|number|null
- **description**: Gets/sets how the height of the control can be set.
- **string**: The height width can be set in pixels (px) and percentage (%).
- **number**: The height width can be set as a number in pixels.
- **null**: will fit the tree inside its parent container, if no other widths are defined.
- **flags**: @Deprecated
### property6
- **type**: stranen|nenujen
- **description**: Gets/sets how the height of the control can be set.
- **stranen**: The height width can be set in pixels (px) and percentage (%).
- **flags**: @Deprecated
### settings.paging
- **description**: Settings related to built-in paging functionality
- **flags**: @Deprecated
- **enabled**: type="bool" Paging is not enabled by default
- **type**: type="remote|local"
- **local**: type="string" Data is paged client-side.
- **remote**: type="string" A remote request is done and URL params encoded. @Ignored
```
--------------------------------
### Install Dependencies and Verify Code
Source: https://github.com/igniteui/ignite-ui/wiki/Contributing-to-Ignite-UI
Run these commands to install project dependencies and verify your local code before committing changes. Ensure all checks pass to facilitate merging.
```bash
npm install
grun t verify
```
--------------------------------
### Install Project Dependencies
Source: https://github.com/igniteui/ignite-ui/blob/master/README.md
Install all build dependencies and bower packages required for running demos locally. This command should be run in the root directory of the repository.
```bash
npm install
```
--------------------------------
### Event Examples
Source: https://github.com/igniteui/ignite-ui/wiki/API-Documentation-Guidelines
Examples of how events are documented, including @Ignored and @Deprecated flags.
```APIDOC
## Events
### dataBinding
- **cancel**: "false"
- **description**: Fired before databinding is performed. Function takes arguments evt and ui. Use ui.owner to get a reference to the tree performing databinding.
- **flags**: @Deprecated
### dataBound
- **description**: Fired after databinding is finished. Function takes arguments evt and ui. Use ui.owner to get a reference to the tree performing databinding. Use ui.dataView to get a reference to the data the tree has been databound to.
- **flags**: @Ignored
```
--------------------------------
### Splitter Instantiation
Source: https://github.com/igniteui/ignite-ui/blob/master/demos/splitter/api-events-splitter.html
Example of how to instantiate the Splitter control with basic options.
```APIDOC
## Splitter Instantiation
### Initialize Splitter
Initializes the Splitter control with a specified height and collapsible panels.
- **Code:**
```javascript
$("#splitter").igSplitter({
height: 300,
panels: [
{ collapsible: true },
{ collapsible: true }
]
});
```
```
--------------------------------
### Build Project with Grunt
Source: https://context7.com/igniteui/ignite-ui/llms.txt
Use Grunt for building combined/lite script and CSS bundles into the `dist/` directory. Install dependencies with `npm install`.
```bash
# Install dependencies
npm install
# Build dist/ (merged locales, combined scripts, structural CSS)
grunt build
# Run lint and unit tests (Karma + QUnit)
npm run cover
```
--------------------------------
### property1 Option Example
Source: https://github.com/igniteui/ignite-ui/wiki/API-Documentation-Guidelines
Gets or sets how the height of the control can be set.
```APIDOC
## property1
### Description
Gets sets how the height of the control can be set.
```javascript
$("#data").igEditor({
property1: 20
})
```
### Parameters
#### Path Parameters
- **property1** (string|number|null) - Description: The height width can be set in pixels (px) and percentage (%).
- **property1** (number) - Description: The height width can be set as a number in pixels.
- **property1** (object) - Description: Will fit the tree inside its parent container, if no other widths are defined.
```
--------------------------------
### Start Upload Timer
Source: https://github.com/igniteui/ignite-ui/blob/master/demos/file-upload/progress-information.html
Starts a timer that increments the 'time elapsed' counter every second. This is used to track the duration of the upload process.
```javascript
var timeOutID;
function startTimer() {
var currCount = parseInt($('#timeElapsed').html(), 10);
$('#timeElapsed').html(currCount + 1);
timeOutID = setTimeout('startTimer()', 1000);
}
```
--------------------------------
### Install Ignite UI for jQuery via npm
Source: https://github.com/igniteui/ignite-ui/blob/master/README.md
Install the Ignite UI for jQuery package using npm for your project.
```shell
npm install ignite-ui
```
--------------------------------
### igGrid Initialization and API Usage
Source: https://context7.com/igniteui/ignite-ui/llms.txt
Demonstrates how to initialize the igGrid with various features like Paging, Sorting, Filtering, Selection, and Updating. It also shows how to use the programmatic API to get pending transactions and commit changes, as well as navigate pages.
```APIDOC
## igGrid
### Description
Displays tabular data with optional feature modules such as Paging, Sorting, Filtering, Selection, Updating, ColumnFixing, GroupBy, Summaries, Tooltips, and Responsive Web Design (RWD).
### Initialization Example
```html
```
### Programmatic API Usage
```javascript
// Get pending transactions
var tx = $("#grid").igGrid("pendingTransactions");
console.log("Pending transactions:", tx);
// Commit all pending changes
$("#grid").igGrid("commit");
// Go to page 2 (index 1)
$("#grid").igGridPaging("pageIndex", 1);
```
```
--------------------------------
### Install Ignite UI for jQuery CLI
Source: https://github.com/igniteui/ignite-ui/blob/master/README.md
Install the Ignite UI CLI globally to manage your Ignite UI for jQuery projects. Use this to create new projects and add components.
```bash
npm i -g igniteui-cli
ig new --framework=jquery
cd
ig add combo
ig start
```
--------------------------------
### Event Documentation with Flags
Source: https://github.com/igniteui/ignite-ui/wiki/API-Documentation-Guidelines
Examples of event documentation including `@Deprecated@` and `@Ignored@` flags, along with function signatures and argument descriptions.
```javascript
events: {
/* cancel="false" fired before @Deprecated@ databinding is performed
Function takes arguments evt and ui.
Use ui.owner to get a reference to the tree performing databinding.
*/
dataBinding: "dataBinding",
/* fired after databinding @Ignored@ is finished
Function takes arguments evt and ui.
Use ui.owner to get a reference to the tree performing databinding.
Use ui.dataView to get a reference to the data the tree has been databound to.
*/
dataBound: "dataBound"
}
```
--------------------------------
### dataBinding Event Example
Source: https://github.com/igniteui/ignite-ui/wiki/API-Documentation-Guidelines
Fired before databinding is performed.
```APIDOC
## dataBinding
### Description
Fired before databinding is performed.
```javascript
$(document).delegate(".selector", "igtexteditorblur", function (evt) {
//return browser event
ev.originalEvent;
});
//Initialize
$(".selector").igTextEditor({
blur: function (evt) {
}
});
```
### Parameters
#### Path Parameters
- **evt** (event) - The browser event.
- **ui** (object) - Use ui.owner to get a reference to the tree performing databinding.
```
--------------------------------
### Configure Video Player with Related Videos
Source: https://github.com/igniteui/ignite-ui/blob/master/demos/video-player/related-videos.html
Initializes the igVideoPlayer control with various options, including sources, dimensions, and a list of related videos. This setup allows related videos to be displayed and played within the same player instance.
```javascript
$(function () {
$("#player1").igVideoPlayer({
sources: [
"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_1.h264.mp4",
"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_1.webmvp8.webm",
"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_1.theora.ogv"
],
width: 720,
height: 560,
posterUrl: "../../images/samples/video-player/quince-intro-1.png",
fullscreen: false,
browserControls: false,
autohide: true,
autoplay: false,
showSeekTime: true,
title: "Quince Presentation Part 1",
relatedVideos: [
{
imageUrl: "../../images/samples/video-player/quince-intro-2.png",
title: "Quince Presentation Part 1",
css: "relatedVideosBanner",
sources: [
"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.h264.mp4",
"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.webmvp8.webm",
"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/QuinceIntro_Part3_1.theora.ogv"
]
}
]
});
});
```
--------------------------------
### Configure Time Picker with 24-Hour Format and Value Limits
Source: https://github.com/igniteui/ignite-ui/blob/master/demos/editors/time-picker.html
Configure a time picker for 24-hour format with specified minimum and maximum allowable times. This example also sets a fixed interval for time selection.
```javascript
function () {
$("#lunchBreak").igTimePicker({
timeInputFormat: "HH:mm",
timeDisplayFormat: "HH:mm",
minValue: "11:00",
maxValue: "14:00",
itemsDelta: {
hours: 1,
minutes: 0
},
value: "12:00"
});
}
```
--------------------------------
### igDialog API Examples
Source: https://github.com/igniteui/ignite-ui/blob/master/demos/dialog-window/api-and-events.html
Control dialog states like closing, maximizing, pinning, and unpinning using the igDialog API. Ensure the igButton widget is initialized for control elements.
```javascript
$("#closeDialog").on({
click: function () {
// Close the igDialog
$("#dialog").igDialog("close");
$("#maximizeDialog").igButton({ disabled: false });
}
});
$("#maximizeDialog").on({
click: function () {
// Maximize the igDialog
$("#dialog").igDialog("maximize");
$("#maximizeDialog").igButton({ disabled: true });
}
});
$("#pinDialog").on({
click: function () {
// Pin the igDialog
$("#dialog").igDialog("pin");
$("#pinDialog").igButton({ disabled: true });
$("#unpinDialog").igButton({ disabled: false });
}
});
$("#unpinDialog").on({
click: function () {
// Unpin the igDialog
$("#dialog").igDialog("unpin");
$("#pinDialog").igButton({ disabled: false });
$("#unpinDialog").igButton({ disabled: true });
}
});
```
--------------------------------
### Initialize igUpload Control
Source: https://github.com/igniteui/ignite-ui/blob/master/demos/file-upload/basic-usage.html
Instantiate the igUpload control in JavaScript. Configure it for single file uploads, automatic upload start, and provide a progress URL and server-side control ID. An error handler is also included to display any upload errors.
```javascript
$(function () { $("#igUpload1").igUpload({ mode: 'single', autostartupload: true, progressUrl: "../../IGUploadStatusHandler.ashx", controlId: "serverID1", onError: function (e, args) { showAlert(args); } }); }); function showAlert(args) { $("#error-message").html(args.errorMessage).stop(true, true).fadeIn(500).delay(3000).fadeOut(500); }
```
--------------------------------
### Initialize Splitter and Handle API Events
Source: https://github.com/igniteui/ignite-ui/blob/master/demos/splitter/api-events-splitter.html
Initializes the Splitter control and sets up event handlers for various actions like resize start, resizing, resize end, collapse, and expand. It also includes API calls to control panel states and content.
```javascript
$(function () {
// Used to show output in the API Viewer at runtime,
// defined in external script 'apiviewer.js'
var apiViewer = new $.ig.apiViewer();
/*----------------- Method & Option Examples -------------------------
*/
// process events of buttons
$('#igButtonSplitterFirstPanelCollapse').on({
click: function () {
$("#splitter").igSplitter("collapseAt", 0);
}
});
$('#igButtonSplitterSecondPanelCollapse').on({
click: function () {
$("#splitter").igSplitter("collapseAt", 1);
}
});
$('#igButtonSplitterFirstPanelExpand').on({
click: function () {
$("#splitter").igSplitter("expandAt", 0);
}
});
$('#igButtonSplitterSecondPanelExpand').on({
click: function () {
$("#splitter").igSplitter("expandAt", 1);
}
});
$('#igButtonSplitBarButtons').on({
click: function () {
$("#splitter").igSplitter("splitBar").children("div").remove();
}
});
$('#igButtonSplitterFirstPanel').on({
click: function () {
$("#splitter").igSplitter("firstPanel").text($("#firstPanelText").val());
}
});
$('#igButtonSplitterSecondPanel').on({
click: function () {
$("#splitter").igSplitter("secondPanel").text($("#secondPanelText").val());
}
});
$('#igButtonSplitterFirstPanelSize').on({
click: function () {
$("#splitter").igSplitter("setFirstPanelSize", $("#firstPanelSize").val());
}
});
$('#igButtonSplitterSecondPanelSize').on({
click: function () {
$("#splitter").igSplitter("setSecondPanelSize", $("#secondPanelSize").val());
}
});
/*----------------- Event Examples -------------------------
*/
$("#splitter").on("igsplitterresizestarted", function (evt, ui) {
var message = "igsplitterresizestarted";
apiViewer.log(message);
});
$("#splitter").on("igsplitterresizing", function (evt, ui) {
var message = "igsplitterresizing";
apiViewer.log(message);
});
$("#splitter").on("igsplitterresizeended", function (evt, ui) {
var message = "igsplitterresizeended";
apiViewer.log(message);
});
$("#splitter").on("igsplittercollapsed", function (evt, ui) {
var message = "igsplittercollapsed panel: " + ui.index;
apiViewer.log(message);
if (ui.index === 0) {
$("#igButtonSplitterFirstPanelExpand").attr("disabled", false);
$("#igButtonSplitterFirstPanelCollapse").attr("disabled", true);
$("#igButtonSplitterSecondPanelCollapse").attr("disabled", true);
} else {
$("#igButtonSplitterSecondPanelExpand").attr("disabled", false);
$("#igButtonSplitterFirstPanelCollapse").attr("disabled", true);
$("#igButtonSplitterSecondPanelCollapse").attr("disabled", true);
}
});
$("#splitter").on("igsplitterexpanded", function (evt, ui) {
var message = "igsplitterexpanded panel: " + ui.index;
apiViewer.log(message);
if (ui.index === 0) {
$("#igButtonSplitterFirstPanelExpand").attr("disabled", true);
$("#igButtonSplitterFirstPanelCollapse").attr("disabled", false);
$("#igButtonSplitterSecondPanelCollapse").attr("disabled", false);
} else {
$("#igButtonSplitterSecondPanelExpand").attr("disabled", true);
$("#igButtonSplitterFirstPanelCollapse").attr("disabled", false);
$("#igButtonSplitterSecondPanelCollapse").attr("disabled", false);
}
});
/*----------------- Instantiation -------------------------
*/
$("#splitter").igSplitter({
height: 300,
panels: [{
collapsible: true
}, {
collapsible: true
}]
});
$("#igButtonSplitterFirstPanelExpand").attr("disabled", true);
$("#igButtonSplitterSecondPanelExpand").attr("disabled", true);
});
```
--------------------------------
### Configure Editor Property API
Source: https://github.com/igniteui/ignite-ui/wiki/API-Documentation-Guidelines
Set or get the height of the control using the `property1` option. For enum properties, insert code snippets before member definitions. The example shows initializing an `igEditor` with a property.
```javascript
/* type="string|number|null" Gets sets how the height of the control can be set.
```
$("#data").igEditor({
property1: 20
})
```
string The height width can be set in pixels (px) and percentage (%).
number The height width can be set as a number in pixels.
null type="object" Will fit the tree inside its parent container, if no other widths are defined.
*/
```
--------------------------------
### Build the Product
Source: https://github.com/igniteui/ignite-ui/blob/master/README.md
Build the Ignite UI product, which generates source files under the `dist/` folder. This includes merged locales, combined scripts, and structure CSS.
```bash
grunt build
```
--------------------------------
### Initialize Video Player with Sources and Options
Source: https://github.com/igniteui/ignite-ui/blob/master/demos/video-player/common-features.html
Initializes the igVideoPlayer with various sources, poster image, and configuration options like autoplay, title, and bookmarks. Use this to set up the video player with custom content and behavior.
```javascript
$(function () {
var playing = false;
$("#videoPlayer1").igVideoPlayer({
sources: [
"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/big_buck_bunny.mp4",
"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/big_buck_bunny.webm",
"http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/big_buck_bunny.ogv"
],
width: 380,
posterUrl: "../../images/samples/video-player/big-buck-bunny.png",
fullscreen: false,
browserControls: false,
autoplay: false,
title: 'Big Buck Bunny',
muted: false,
autohide: false,
bookmarks: [
{ title: 'River', description: 'River', time: 13 },
{ title: 'Big Buck Bunny Appears', description: 'Big Buck Bunny Appears', time: 33 }
]
});
// ... rest of the code
});
```
--------------------------------
### Initialize Tile Manager with Responsive Options
Source: https://github.com/igniteui/ignite-ui/blob/master/demos/tile-manager/leading-tile.html
Initializes the Tile Manager with responsive options based on window width. Use this for setting up the layout for desktop or mobile views.
```javascript
var activated = [false, false, false, false],
optionsWide = {
columnWidth: 210,
columnHeight: 210,
marginLeft: 10,
marginTop: 10,
items: [
{ rowIndex: 0, colIndex: 0, rowSpan: 2, colSpan: 2 },
{ rowIndex: 0, colIndex: 2, rowSpan: 1, colSpan: 1 },
{ rowIndex: 1, colIndex: 2, rowSpan: 1, colSpan: 1 },
{ rowIndex: 2, colIndex: 0, rowSpan: 1, colSpan: 1 },
{ rowIndex: 2, colIndex: 1, rowSpan: 1, colSpan: 1 },
{ rowIndex: 2, colIndex: 2, rowSpan: 1, colSpan: 1 }
],
maximizedTileIndex: 0,
minimizedState: ':not(ul)'
},
optionsPhone = {
columnWidth: 125,
columnHeight: 160,
marginLeft: 5,
marginTop: 5,
items: [
{ rowIndex: 0, colIndex: 0, rowSpan: 2, colSpan: 2 },
{ rowIndex: 0, colIndex: 2, rowSpan: 1, colSpan: 1 },
{ rowIndex: 1, colIndex: 2, rowSpan: 1, colSpan: 1 },
{ rowIndex: 2, colIndex: 0, rowSpan: 1, colSpan: 1 },
{ rowIndex: 2, colIndex: 1, rowSpan: 1, colSpan: 1 },
{ rowIndex: 2, colIndex: 2, rowSpan: 1, colSpan: 1 }
],
maximizedTileIndex: 0,
minimizedState: ':not(ul)'
},
options;
$(function () {
$('#car-tabs').tabs({
activate: function (event, ui) {
var index = ui.newTab.index();
if (!activated[index]) {
ui.newPanel.igTileManager(options);
activated[index] = true;
} else {
ui.newPanel.igTileManager('reflow');
}
}
});
if ($(window).width() > 430) {
options = optionsWide;
} else {
options = optionsPhone;
}
$('#magarcedes').igTileManager(options);
activated[0] = true;
});
```
--------------------------------
### Initialize Loader and Button Click Handler
Source: https://github.com/igniteui/ignite-ui/blob/master/demos/loader/dynamic-download.html
Initializes the Infragistics loader with script and CSS paths, and sets up a button click handler to trigger the creation of the tree. The loader fetches 'igShared' resources initially.
```javascript
$.ig.loader({ scriptPath: "../../dist/js/", cssPath: "../../dist/css/", resources: "igShared", ready: function () {
//This button click triggers the tree to be created
$('#transform').on("click", function() {
CreateTree();
$(this)[0].disabled = true;
});
}
});
```
--------------------------------
### Handle File Uploading Event
Source: https://github.com/igniteui/ignite-ui/blob/master/demos/file-upload/progress-information.html
Attaches an event handler for the 'igUploadFileUploading' event. It starts the timer if it hasn't started yet and refreshes the progress information.
```javascript
$("#igUpload1").on({
iguploadfileuploading: function (e, args) {
if ($("#hdnStartTimer").val() === 'false') {
$("#hdnStartTimer").val('true');
startTimer();
}
refreshProgressInformation();
}
});
```
--------------------------------
### igEditors Initialization and API Usage
Source: https://context7.com/igniteui/ignite-ui/llms.txt
Shows how to initialize various igEditors components like TextEditor, CurrencyEditor, NumericEditor, MaskEditor, and DatePicker. It also demonstrates reading and writing values programmatically.
```APIDOC
## igEditors
### Description
Provides a suite of input editors including igTextEditor, igNumericEditor, igCurrencyEditor, igDateEditor, igDatePicker, igMaskEditor, igPercentEditor, igCheckboxEditor, and igTimePicker, offering consistent APIs, list support, regional formatting, and KnockoutJS extensions.
### Initialization Examples
```html
```
### Programmatic API Usage
```javascript
// Read currency editor value
var val = $("#currencyEditor").igCurrencyEditor("value");
// Set numeric editor value
$("#numericEditor").igNumericEditor("value", 75);
```
```
--------------------------------
### Enable Virtualization in igCombo
Source: https://github.com/igniteui/ignite-ui/blob/master/demos/combo/virtualization.html
Use the `virtualization: true` option to enable UI virtualization for the igCombo control. This is beneficial for large datasets. Configure filtering, data keys, templates, and data source as needed.
```javascript
$(function () { $("#comboIG").igCombo({ virtualization: true, filteringType: "remote", renderMatchItems: "contains", responseDataKey: "d.results", valueKey: "OrderID", textKey: "ShipName", itemTemplate: "${ShipName} (ID: ${OrderID})", width: "370px", dataSourceUrl: 'http://igniteui.com/api/orders?&$top=1500&callback=?', responseDataType: "json" }); });
```
--------------------------------
### igtreedragstart Event
Source: https://github.com/igniteui/ignite-ui/blob/master/demos/tree/api-and-events.html
Handles the event that is triggered when a drag operation starts on a tree node.
```APIDOC
## igtreedragstart Event
### Description
This event is fired when a drag operation begins on a node in the tree. It provides data about the node being dragged.
### Handler
```javascript
$("#tree").on("igtreedragstart", function (evt, ui) {
apiViewer.log("igtreedragstart: [ " + "Node Drag Start: " + ui.data.Text + " ]");
focusOnMobile();
});
```
### Event Arguments
- **evt** (Event) - The event object.
- **ui** (object) - Contains information about the event:
- **data** (object) - The data of the node that is being dragged.
```
--------------------------------
### Initialize Percentage Editor
Source: https://github.com/igniteui/ignite-ui/blob/master/demos/editors/basic-usage.html
Initializes igPercentEditor for discount. Use for percentage input with a default value and minimum constraint.
```javascript
$('#discount').igPercentEditor({ value: 0.08, minValue: 0 });
```
--------------------------------
### Ignored and Deprecated Flag Usage
Source: https://github.com/igniteui/ignite-ui/wiki/API-Documentation-Guidelines
Examples demonstrating the use of `@Ignored@` and `@Deprecated@` flags in API documentation comments for options.
```javascript
property1: "property1",
```
```javascript
property2: "property2",
```
```javascript
property3: "property3",
```
```javascript
property4: "property4",
```
```javascript
property5: null,
```
```javascript
property6: null
```
--------------------------------
### DataSource Initialization
Source: https://github.com/igniteui/ignite-ui/wiki/API-Documentation-Guidelines
Shows how to initialize non-visual components like DataSource and its variants (e.g., igXMLDatasource) with data. This pattern is used for data-bound components.
```javascript
$.%%WidgetName%%({
data: [
{
id: 1,
name: John
},
{
id: 2,
name: Michael
}
]
});
```
```javascript
$.ig.DataSource({
data: [
{
id: 1,
name: John
},
{
id: 2,
name: Michael
}
]
});
```
```javascript
$.ig.XmlDataSource({
data: [
{
id: 1,
name: John
},
{
id: 2,
name: Michael
}
]
});
```
--------------------------------
### addNode Method Example
Source: https://github.com/igniteui/ignite-ui/wiki/API-Documentation-Guidelines
Adds a new array of nodes to the tree. New nodes are skipped to the root or to a specified parent node.
```APIDOC
## addNode
### Description
Adds a new array of nodes to the tree. New nodes are Skipped to the root or to a specified parent node.
```javascript
$(".selector").igTree("addNode", {Text: "New Node"}, parentNode);
```
### Parameters
#### Path Parameters
- **node** (object) - Required - Specifies the data used to create the new node.
- **parent** (object) - Optional - Specifies the jQuery object of the parent node the nodes are to be appended to.
- **nodeIndex** (number) - Optional - Specifies the index at which the node to be inserted.
```
--------------------------------
### Initialize Currency and Numeric Editors
Source: https://github.com/igniteui/ignite-ui/blob/master/demos/editors/basic-usage.html
Initializes igCurrencyEditor for price per unit and igNumericEditor for the amount. Includes blur event handlers to trigger total price calculation.
```javascript
$('#price').igCurrencyEditor({ value: "79", minValue : 0, currencySymbol: "€" });
$('#amount').igNumericEditor({ dataMode: "int", value: 10, minValue: 1, blur: function (evt) { calculateTotalPrice(); } });
$(document).delegate("#price", "igcurrencyeditorblur", function (evt) { calculateTotalPrice(); });
$(document).delegate("#discount", "igpercenteditorblur", function (evt) { calculateTotalPrice(); });
calculateTotalPrice();
```
--------------------------------
### Install Ignite UI for jQuery with Bower
Source: https://github.com/igniteui/ignite-ui/blob/master/build/packages/README.md
Use this command to add the Ignite UI for jQuery package to your project via Bower.
```shell
bower install ignite-ui
```
--------------------------------
### Dialog Window Initialization and Event Handling
Source: https://github.com/igniteui/ignite-ui/blob/master/demos/dialog-window/api-and-events.html
This snippet shows how to initialize the igDialog control, configure its options, and handle state-changing events. It also demonstrates how to enable/disable buttons based on the dialog's state.
```APIDOC
## Initialize igDialog
### Description
Initializes the igDialog control with various configuration options and event handlers.
### Method
JavaScript
### Code
```javascript
$("#dialog").igDialog({
stateChanging: function (evt, ui) {
// Event handling logic based on ui.action
if (ui.action === "close") {
$("#openDialog").igButton({ disabled: false });
$("#closeDialog").igButton({ disabled: true });
}
// ... other state checks ...
},
closeButtonTitle: "Close Dialog Window",
minimizeButtonTitle: "Minimize Dialog Window",
maximizeButtonTitle: "Maximize Dialog Window",
pinButtonTitle: "Pin Dialog Window",
unpinButtonTitle: "Unpin Dialog Window",
restoreButtonTitle: "Restore Dialog Window",
showMinimizeButton: true,
showMaximizeButton: true,
showPinButton: true,
height: 400,
minHeight: 240,
maxHeight: 600,
width: 280,
minWidth: 200,
maxWidth: 600,
headerText: "This is my header text.",
showFooter: true,
footerText: "This is my footer text.",
openAnimation: "fade",
closeAnimation: "fade"
});
```
```
--------------------------------
### igCombo Programmatic API Usage
Source: https://context7.com/igniteui/ignite-ui/llms.txt
Demonstrates common programmatic interactions with an igCombo instance, including getting and setting values, and clearing the input.
```javascript
// Programmatic API
var vals = $("#combo").igCombo("value"); // get selected value(s)
$("#combo").igCombo("value", 2); // set selected value
$("#combo").igCombo("clearInput"); // clear selection
```
--------------------------------
### Configure igEditors Input Suite
Source: https://context7.com/igniteui/ignite-ui/llms.txt
Initialize various input editors including Text, Currency, Numeric, Mask, and Date pickers. Editors can be configured with list items, value constraints, masks, and event handlers. Programmatic value retrieval and setting are also demonstrated.
```html
```
```javascript
$(function () {
// Text editor with predefined list
$("#textEditor").igTextEditor({
listItems: ["Male", "Female"],
inputName: "gender"
});
// Currency editor with spin button and value-change event
var listValues = [600, 900, 1200, 1500];
$("#currencyEditor").igCurrencyEditor({
listItems: listValues,
value: 600,
buttonType: "spin",
spinDelta: 100,
minValue: 0,
maxValue: 5000,
maxDecimals: 2,
positivePattern: "$(n)",
valueChanged: function (evt, ui) {
console.log("New currency value:", ui.newValue);
}
});
// Numeric editor
$("#numericEditor").igNumericEditor({
value: 42,
minValue: 0,
maxValue: 100,
buttonType: "spin"
});
// Mask editor for phone numbers
$("#maskEditor").igMaskEditor({
inputMask: "(\0\01) 000-0000" // (001) 555-1234
});
// Date picker
$("#dateEditor").igDatePicker({
datepickerOptions: {
minDate: new Date(2000, 0, 1),
maxDate: new Date(2030, 11, 31)
}
});
// Read / write values programmatically
var val = $("#currencyEditor").igCurrencyEditor("value");
$("#numericEditor").igNumericEditor("value", 75);
});
```
--------------------------------
### Initialize Tile Manager with Layout Options
Source: https://github.com/igniteui/ignite-ui/blob/master/demos/tile-manager/item-configurations.html
Initializes the Tile Manager widget with specific column width, margins, and splitter options. Use this to set up the basic layout and behavior of the tile grid.
```javascript
$(function () {
$('#dashboard').igTileManager({
columnWidth: '25%',
marginLeft: 10,
marginTop: 10,
splitterOptions: {
enabled: true,
collapsible: true
},
items: [
{ rowIndex: 0, colIndex: 0, rowSpan: 2, colSpan: 1 },
{ rowIndex: 0, colIndex: 1, rowSpan: 1, colSpan: 2 },
{ rowIndex: 0, colIndex: 3, rowSpan: 1, colSpan: 1 },
{ rowIndex: 1, colIndex: 1, rowSpan: 1, colSpan: 1 },
{ rowIndex: 1, colIndex: 2, rowSpan: 1, colSpan: 2 },
{ rowIndex: 2, colIndex: 0, rowSpan: 1, colSpan: 2 },
{ rowIndex: 2, colIndex: 2, rowSpan: 2, colSpan: 2 },
{ rowIndex: 3, colIndex: 0, rowSpan: 1, colSpan: 1 },
{ rowIndex: 3, colIndex: 1, rowSpan: 2, colSpan: 1 },
{ rowIndex: 4, colIndex: 2, rowSpan: 1, colSpan: 1 },
{ rowIndex: 4, colIndex: 3, rowSpan: 1, colSpan: 1 },
{ rowIndex: 4, colIndex: 0, rowSpan: 1, colSpan: 1 }
]
});
});
```
--------------------------------
### Handle Cancel All Clicked Event
Source: https://github.com/igniteui/ignite-ui/blob/master/demos/file-upload/progress-information.html
Attaches an event handler for the 'igUploadCancelAllClicked' event. It refreshes progress information, stops the timer, and resets the timer start flag.
```javascript
$("#igUpload1").on({
iguploadcancelallclicked: function (e, args) {
refreshProgressInformation();
clearTimeout(timeOutID);
$("#hdnStartTimer").val('false');
}
});
```
--------------------------------
### Handle Upload Aborted Event
Source: https://github.com/igniteui/ignite-ui/blob/master/demos/file-upload/progress-information.html
Attaches an event handler for the 'igUploadFileUploadingAborted' event. It refreshes progress information, stops the timer, and resets the timer start flag.
```javascript
$("#igUpload1").on({
iguploadfileuploadaborted: function (e, args) {
refreshProgressInformation();
clearTimeout(timeOutID);
$("#hdnStartTimer").val('false');
}
});
```
--------------------------------
### Configure Video Player with Banner Ads (jQuery)
Source: https://github.com/igniteui/ignite-ui/blob/master/demos/video-player/banner-advertisements.html
Initializes the igVideoPlayer with banner advertisement configuration, including image URL, link, display times, and event handlers for visibility and clicks. Use this to set up banners that appear at specific points in the video.
```javascript
var alternate = true;
$(function () {
$("#player1").igVideoPlayer({
sources: [
'http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/Infragistics_Presentation_lowRes_1.h264.mp4',
'http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/Infragistics_Presentation_lowRes_1.webmvp8.webm',
'http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/Infragistics_Presentation_lowRes_1.theora.ogv'
],
width: "100%",
posterUrl: '../../images/samples/video-player/ig-pres.png',
fullscreen: false,
browserControls: false,
autohide: true,
autoplay: false,
autohideDelay: 2000,
title: 'Infragistics Presentation',
banners: [{
imageUrl: '../../images/samples/video-player/banner.png',
link: 'http://www.infragistics.com/',
times: [5, 20, 60],
visible: false,
closeBanner: true,
animate: true,
autohide: true,
hidedelay: 10000,
width: "270px",
height: "67px"
}],
bannerVisible: function (sender, eventArgs) {
if (alternate === true) {
eventArgs.bannerElement.css('top', 130);
} else {
eventArgs.bannerElement.css('top', 0);
}
alternate = !alternate;
},
bannerClick: function (sender, eventArgs) {
$("#player1").igVideoPlayer('pause');
}
});
});
```
--------------------------------
### Chart.js Configuration for Zoombar
Source: https://github.com/igniteui/ignite-ui/blob/master/demos/zoombar/zoombar-chartjs.html
Defines the configuration for a Chart.js line chart, including time scale setup and dataset properties. This configuration is used as the base for the zoombar provider.
```javascript
var timeFormat = "MM/DD/YYYY HH:mm";
function randomScalingFactor() {
return Math.round(Math.random() * 100 * (Math.random() > 0.5 ? -1 : 1));
}
function randomColorFactor() {
return Math.round(Math.random() * 255);
}
function randomColor(opacity) {
return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity || '.3') + ')';
}
function newDate(days) {
return moment().add(days, 'd').toDate();
}
function newDateString(days) {
return moment().add(days, 'd').format(timeFormat);
}
function newTimestamp(days) {
return moment().add(days, 'd').unix();
}
var config = {
type: "line",
data: {
labels: [
newDate(0),
newDate(1),
newDate(2),
newDate(3),
newDate(4),
newDate(5),
newDate(6)
],
datasets: [
{
label: "My First dataset",
data: [
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor()
],
fill: false,
borderDash: [5, 5],
},
{
label: "My Second dataset",
data: [
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor()
],
},
{
label: "Dataset with point data",
data: [
{ x: newDateString(0), y: randomScalingFactor() },
{ x: newDateString(5), y: randomScalingFactor() },
{ x: newDateString(7), y: randomScalingFactor() },
{ x: newDateString(15), y: randomScalingFactor() }
],
fill: false
}
]
},
options: {
maintainAspectRatio: false,
responsive: true,
title: {
display: true,
text: "Chart.js Time Scale"
},
legend: {
display: true,
},
scales: {
xAxes: [
{
type: "time",
time: {
format: timeFormat,
tooltipFormat: "ll HH:mm"
},
scaleLabel: {
display: true,
labelString: "Date" //
},
ticks: {
maxRotation: 0
}
},
],
yAxes: [
{
display: false,
scaleLabel: {
display: true,
labelString: "value"
}
}
]
}
}
};
config.data.datasets.forEach(function (dataset) {
dataset.borderColor = randomColor(0.4);
dataset.backgroundColor = randomColor(0.5);
dataset.pointBorderColor = randomColor(0.7);
dataset.pointBackgroundColor = randomColor(0.5);
dataset.pointBorderWidth = 1;
});
```
--------------------------------
### Basic igTemplating with Data Binding
Source: https://context7.com/igniteui/ignite-ui/llms.txt
Demonstrates basic property substitution, unescaped HTML output, and conditional rendering using $.ig.tmpl with an array of employee data.
```javascript
var employees = [
{ Name: "Alice", Role: "Engineer", Active: true, Bio: "Senior" },
{ Name: "Charlie", Role: "Manager", Active: false, Bio: "Lead" }
];
// Basic property substitution
var rowTmpl = "
${Name}
${Role}
";
$("#output").append("
" + $.ig.tmpl(rowTmpl, employees) + "
");
// Unescaped HTML output
var bioTmpl = "
${Name}: {{html Bio}}
";
$("#output").append($.ig.tmpl(bioTmpl, employees));
// Conditional template
var statusTmpl = "