|
Page 2 of 3
Options
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 parameter, i.e.
$('#currencyEditor').igCurrencyEditor({
width: 200,
currencySymbol:"#"
});
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. 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 do 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 many 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 first is needed for most NetAdvantage jQuery controls:
<link href="/themes/base/ig.ui.min.css"
rel="stylesheet" type="text/css" />
and the second is needed by many jQuery basic controls:
<link href="/themes/min/ig/
jquery.ui.custom.min.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 lang="en">
<head>
<meta charset="utf-8" />
<link href="/themes/base/ig.ui.min.css"
rel="stylesheet" type="text/css" />
<link href="/themes/min/ig/jquery.
ui.custom.min.css"
rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/
ajax/libs/jquery/1.4.4/jquery.min.js"
type="text/javascript"></script>
<script src="https://ajax.googleapis.com/
ajax/libs/jqueryui/1.8.13/
jquery-ui.min.js"
type="text/javascript"></script>
<script src="/Scripts/ig.ui.min.js"
type="text/javascript"></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>
<title></title>
</head>
<body>
<input id="datePicker" type="text" />
</body>
</html>
|
