Wednesday, 20 June 2007

ASP.NET and infragistics WebDateChooser component

I needed to implement couple of javascript things into ASP.NET application. I had problem with infragistics component for dates (WebDateChooser). I needed two peaces of this component to have disabled after page load in some cases. On the page should be several radio buttons and some other components which need to be enabled only if the appropriate radio button is selected. But there were following problems with the component:
1) when the component was disabled in codebehind, I could not easily enable it in javascript if needed.
2) when I wanted to disable the component after page loaded, the component was not initialized so I could not work with it.

The solution in both cases was found, maybe it can help somebody who works with the infragistics components which sometimes do not work as you need.

1) component was disabled in codebehind in PageLoad method.

this.CurrentDateChooser.Enabled = false;

In javascript which handles click on radiobutton you need to get the following:

var currentChooser = igdrp_getComboById(currentChooserName);
currentChooser.setEnabled(true);
currentChooser.elemCal.disabled = false;

Let me explain the javascript. Method igdrp_getComboById retrieves the date chooser component by id. On the second row we need to enable the component but unfortunatelly this is not enough. Component is enabled but at least in IE 6.0 the calendar is still not enabled and you can not choose the date. This is solved by the last row. In FF 2.0 it works even without the last row of code. Maybe it is problem of the old IE.

2) The solution is quite easy. It says run the script after the page is loaded and all other initialization scripts are finished. I had to place the code at the end of master page like in the following code:

<script language="javascript">
if (typeof(checkState) != "undefined") checkState();
</script>

And now we have to define the checkState() method. This method will call the same code as the method which handles selection of radio buttons. So I added in the aspx page the following code, which calls the same method.

<script language="javascript">
function checkState() {
OnRadioClick(<%= this.SelectedRadioButton %>,
'<%= this.IntervalDropDownList.ClientID %>',
'<%= this.CurrentDateChooser.ClientID %>',
'<%= this.PreviousDateChooser.ClientID %>')
}
</script>


I prefer the solution number 1 because it is much clearer for me.

No comments: