This procedure guides you through the process of adding an igDialog control to a web page. The igDialog is configured so that all of the header buttons are enabled – such as buttons for minimize, maximize, pin and close.
You have the option of instantiating the control in several ways. This topic demonstrates the typical jQuery UI method, the jQuery method (by using attributes) and instantiating the control using the Ignite UI for MVC Dialog.
The following screenshot is a preview of the final result:
The following steps demonstrate how to add the igDialog control to a web page:
You can add the required files in two ways, one is by using individual scripts and the other is by using the Infragistics loader component.
The recommended approach to instantiating the igDialog control is to use the loader. The following code listings will demonstrate how to work with the loader manually as well as interfacing with the loader component.
Reference using individual files
In HTML:
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/modules/infragistics.ui.dialog.js"></script>
Reference using the Infragistics loader
In HTML:
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/infragistics.loader.js"></script>
In JavaScript:
<script type="text/javascript">
$.ig.loader({
scriptPath: "../js/",
cssPath: "../css/",
resources: "igDialog",
});
</script>
Note: If you are using Ignite UI for MVC Dialog, remember to reference the Infragistics.Web.Mvc dll into your project.
The following code demonstrates how to initialize igDialog control, with full control, in the header. As you will notice, the only properties that are defined are those that need to override their default values. Properties like showCloseButton are true by default, that’s why you don’t need to configure it.
Instantiate in JavaScript
Define DIV HTML placeholder
In HTML:
<div id="igDialog1">
igDialog Content
</div>
JavaScript initialization code
If you are using the Infragistics loader component then you can put code from the following inside the loader’s callback function:
In JavaScript:
$.ig.loader(function () {
/* Initialization code here */
});
If you are referencing individual files then you can bind to jQuery ready event as demonstrated by the following code listing:
In JavaScript:
$(function () {
$("#igDialog1").igDialog({
showMinimizeButton: true,
showMaximizeButton: true,
showPinButton: true,
width: "400px",
height: "500px"
});
});
If you want to use the igDialog with TypeScript, you can instantiate it using the code above. You just need to include the reference paths to the Ignite UI and jQuery type definitions for TypeScript:
**In TypeScript:**
```typescript
/// <reference path="jqueryui.d.ts" />
/// <reference path="jquery.d.ts" />
/// <reference path="igniteui.d.ts" />
```
Note: This is needed for TypeScript versions prior to 1.5 so the compiler could include the dependencies in the program during compilation. In 1.5 and newer versions they can be defined in a separate tsconfig.json file. For more information see the tsconfig.json wiki page
More information on how to use the Ignite UI for jQuery definitions for TypeScript can be found in "Using Ignite UI for jQuery with TypeScript" topic.
Razor Initialization
It’s important to know that the Ignite UI for MVC Dialog is not like the other controls where it is expected that it will render the HTML, along with the JavaScript code that initializes the control. Because the igDialog content can be any HTML markup, you need to define the markup first, and then the Ignite UI for MVC will define all the configurations of the control.
Define DIV HTML placeholder
In HTML:
<div id="igDialog1">
igDialog Content
</div>
Ignite UI for MVC code:
In C#:
@(Html
.Infragistics()
.Dialog()
.ContentID("igDialog1")
.ShowMinimizeButton(true)
.ShowMaximizeButton(true)
.ShowPinButton(true)
.Width("400px")
.Height("500px")
.Render()
)
Note: When you want to set identifier of the Ignite UI for MVC Dialog, you have three different options. For more information see the Property Reference topic. If the defined HTML placeholder has the same ID as in the sample above –
igDialog1, then you can use one of the following:
Dialog.ContentJquerySelector("#igDialog1")– defines the selector – the same as it is supposed to be in the jQuery.
Dialog.ContentID("igDialog1")– defines the selector without the #, which will be rendered automatically by the Ignite UI for MVC.
Dialog.ID(“igDialog1”)– the same as theContentID(“igDialog1”)Note: If you want to define the HTML DIV Placeholder code using the Ignite UI for MVC, then the Dialog Helper suggests the following method. Assume that you want to achieve the same effect as defining an DIV HTML placeholder, then use:
Dialog.ContentHTML("<div id="igDialog1"> igDialog Content </div>")
The following example demonstrates how to declare a Dialog Window with an AngularJS directive:
More information on how to use the Ignite UI for jQuery directives for AngularJS can be found in "Using Ignite UI for jQuery with AngularJS" topic.
When the igDialog is added into the browser DOM tree, then the target igDialog HTML element is removed from its original parent and is inserted into the dynamically created one. This allows absolute positioning of the igDialog. If you want to remove the control from your page dynamically, the most painless way is to use the destroy method. This will ensure that the element is removed from the DOM tree, as well as will ensure that the target igDialog element is moved back to its original parent.
The usage of the destroy method can be appropriate when you want to recreate a widget. An example of this would be if you want to dynamically change the value of a property which doesn’t allow any alternate removal operation. For example temporaryURL is one of the properties that cannot be changed dynamically.
The following JavaScript snippet demonstrates how to invoke igDialog destroy method:
In JavaScript:
$('#igDialog).igDialog("destroy");
The following topics provide additional information related to this topic:
igDialog control’s main featuresigDialog features and their configuration and usageigDialog API categories. Within the topic you can find all the references to the control properties, methods, events and CSS classes, as well as some specific cases when the API is used.The following sample provide additional information related to this topic:
igDialog icons.View on GitHub