Options

In jQuery UI and hence in Ignite UI all of the option parameters are passed as a single associative array.

For example to specify that the currency symbol is "#" and the input box should be 200 wide you would use:

{
 width: 200,
 currencySymbol:"#"
}

as the options parameter, i.e.

$('#currencyEditor').igCurrencyEditor({
 width: 200,
 currencySymbol:"#"
});

If a control has a method, i.e. a function that does something then the standard way to call this is to use:

$('#currencyEditor').igCurrencyEditor(
                'method name', 'parameter');

where method name is the name of the function and the parameters that are passed to it are given as a comma separated list. 

For example all controls have an "option" method which solves the following problem -

What if you want to change a parameter after the control has been initialized?

The answer is you can make use of the option method which you call in the following way:

$('#currencyEditor').igCurrencyEditor(
    'option',
    'currencySymbol',
    "#");

This sets the named property to the value using the call:

option('currencySymbol',"#");

You can call other methods in the same way.

ASP.NET

What if you want to use the control from ASP.NET?

The simple solution is to make use of the MVC helper classes to generate the client side JavaScript that does the job. How you make use of these depends on whether or not you use the razor syntax or not - but the calls are the same.

For example in ASPX you would write

<%= Html.Infragistics().CurrencyEditor()
  .ID("currencyEditor")
  .Width(200)
  .Value(12345678.56723456)
  .Render()%>

and in Razor you would write:

@(Html.Infragistics().CurrencyEditor()
   .ID("currencyEditor")
   .Width(200)
   .Value(12345678.56723456)
   .Render())

The code is the same only the manner of marking it out as code changes.

You can also see the general idea behind the helper objects. In each case there is a method "setter" for each of the option parameters.

Notice that the helper objects simply generate the same client side JavaScript as we manually created earlier.

A Date picker

Now that you have the basic idea of how it all works let's take a look at a slightly more advanced example - one where style sheets matter.

The date picker is built on top of the basic jQuery data picker.  Add a new web page called Date to the project and add the same script tags to it - see later for the complete listing. The HTML control to augment might was well be another input box:

<input id="datePicker" type="text" />

We will also use the jQuery ready event to run the script as before

<script type="text/javascript">
 $(document).ready(function () {

The next step is to call the function that does the augmentation complete with some initial options:

$('#datePicker').igDatePicker({
   width: 230,
   dateInputFormat: 'dateTime',
   regional: 'en-US',
   datepickerOptions: { showAnim: 'slide',
                        hideAnim: 'slide',
                        duration: 1000 }
  });

And of course we need to close the "ready" function:

});

</script>

If you launch this web page you will find that it sort of works but it isn't impressive. It is just an input box that when you click on it shows a data entry template:

This is nice but we were promised so much more - where is the animated calendar?

The answer is that we haven't loaded the correct style sheet. It comes as a surprise to some JavaScript programmers that lack of a style sheet can have such dramatic and behaviour based effects - but it can. 

In this case we need two style sheets. The second is needed for most NetAdvantage jQuery controls:

<link href="/css/themes/infragistics/
                infragistics.theme.css"
             rel="stylesheet" type="text/css" />
<link href="/css/structure/infragistics.css"
             rel="stylesheet" type="text/css" />

With these two added the change is amazing. Now you have a drop down button at the right and if you click it the calendar slides in from the left and out again when you have selected a date.

The complete listing for the page is:


<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type"
    content="text/html; charset=UTF-8">


<link href="/css/themes/infragistics/
                       infragistics.theme.css"
             rel="stylesheet" type="text/css" />
<link href="/css/structure/infragistics.css"
     rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/
                libs/jquery/1.7.1/jquery.min.js"
               type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/
        libs/jqueryui/1.8.21/jquery-ui.min.js"
               type="text/javascript"></script>
<script src="/js/infragistics.js"></script><script type="text/javascript">
 $(document).ready(function({
   $('#datePicker').igDatePicker({
        width: 230,
        dateInputFormat: 'dateTime',
        regional: 'en-US',
        datepickerOptions: {showAnim: 'slide',
                            hideAnim: 'slide',
                            duration: 1000}
     })
;});
</script>
</head>


<body>
 <input id="datePicker" type="text" />
</body>
</html>