eo:Date Picker +asp.net V.2.0 + ajax.net v.1.0 +enabled/disabled

Welcome Guest

Search | Active Topics | Sign In | Register

Essential Objects Product Support Forum » All Products » Support » eo:Date Picker +asp.net V.2.0 + ajax.net v.1.0 +enabled/disabled

Options

Previous Topic · Next Topic

Felix Weinraub

Posted: Monday, January 5, 2009 7:27:32 AM

Rank: Member
Groups: Member

Joined: 1/5/2009
Posts: 27

I am currently testing your control "eo: DatePicker". The taxes of controls via aspx-Server-Code and checkbox (OnCheckedChanged="PWCheckBox8_CheckedChanged") is uncomplaining,
but takes too long. I would therefore steer the control by javascript. This does not seem to work. Is there a solution?

*.aspx.cs

public partial class Startformular : PowerWork.PWWebForms.PWFormPage
{
protected void Page_Load(object sender, System.EventArgs e)
{
//JavaScript
PWCheckBox8.Attributes.Add("OnClick", "CheckBoxChanged(this);");

if (Page.IsPostBack == false)
{
DatePicker3.Enabled = false;
}
}

protected void PWCheckBox8_CheckedChanged(object sender, EventArgs e)
{
if (PWCheckBox8.Checked == true) {
DatePicker3.Enabled = true;
}
else {
DatePicker3.Enabled = false;
}
}

}

*.aspx

<%@ Page Inherits="Startformular" Language="c#" CodeFile="Startformular.aspx.cs" AutoEventWireup="true" %>
<%@ Register TagPrefix="eo" Assembly="EO.Web" Namespace="EO.Web" %>
<%@ Register TagPrefix="AjaxControl" Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<head id="Head1" runat="server">
<title></title>

<script type="text/javascript" language="javascript"></script>

</head>

<body>

<form id="Formular" runat="server">
...

<div id="Div72" style="position:absolute;left:60px;top:243px;text-align:right;z-index:2">
<pwcontrol:PWCheckBox ID="PWCheckBox8" runat="server" ...

</div>

<div id="Div73" style="position:absolute;left:200px;top:240px;z-index:2" align="left">
<eo:DatePicker id="DatePicker3" runat="server"
...
</div>
...

</form>
</body>
</html>

eo_support

Posted: Monday, January 5, 2009 9:08:23 AM

Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194

Hi,

You should use document.getElementById instead of document.Formular. So the following code is correct:

Code: JavaScript

Copy

document.getElementById(
    '_eo_' + '<%# DatePicker3.ClientID %>' +'_picker');

You will also need to disable both "_picker" and "_popupimg". For example, to disable "DatePicker1", you will need to do:

Code: JavaScript

Copy

document.getElementById("_eo_DatePicker1_picker").disabled = true;
document.getElementById("_eo_DatePicker1_popupimg").disabled = true;

That should disable the DatePicker for you.

Thanks!

Felix Weinraub

Posted: Tuesday, January 6, 2009 9:37:09 AM

Rank: Member
Groups: Member

Joined: 1/5/2009
Posts: 27

Hi,

The checkbox 'id=PWCheckBox8' after render by asp.net has get the attribute
'name=TabContainer1$TabPanel2$PWCheckBox8'
This attribute can now be used in javascript and works fine.



<div id="Div72" style="position:absolute;left:60px;top:243px;text-align:right;z-index:2">
<pwcontrol:PWCheckBox ID="PWCheckBox8" Height="18px" Width="135px" Text="Test" ValueID="" ValueIDIndex="0"
Font-Names="Tahoma,Verdana,Arial,Geneva,Helvetica,sans-serif" Font-Size="Small" TextAlign="Left" runat="server" />
</div>



<DIV id=Div72
style="Z-INDEX: 2; LEFT: 60px; POSITION: absolute; TOP: 243px; TEXT-ALIGN: right"><SPAN
style="DISPLAY: inline-block; FONT-SIZE: small; WIDTH: 135px; FONT-FAMILY: Tahoma,Verdana,Arial,Geneva,Helvetica,sans-serif; HEIGHT: 18px"><LABEL
for=TabContainer1_TabPanel2_PWCheckBox8>Test</LABEL><INPUT
id=TabContainer1_TabPanel2_PWCheckBox8 onclick=CheckBoxChanged(this);
type=checkbox name=TabContainer1$TabPanel2$PWCheckBox8></SPAN></DIV>

the datepicker after render by asp.net has get the attribute
'name=_eo_TabContainer1_TabPanel2_DatePicker3_picker'
the attribut 'name=_eo_TabContainer1_TabPanel2_DatePicker3_popupimg' is missing.
Using this attribute in javascript has no effect. No error occured.




<div id="Div73" style="position:absolute;left:200px;top:240px;z-index:2" align="left">
<eo:DatePicker id="DatePicker3" runat="server" ControlSkinID="None" DayCellHeight="16"
DayCellWidth="20" DayHeaderFormat="FirstLetter" DisabledDates="" OtherMonthDayVisible="True"
PickerFormat="dd.MM.yyyy" SelectedDates="" TitleLeftArrowImageUrl="DefaultSubMenuIconRTL"
TitleRightArrowImageUrl="DefaultSubMenuIcon" VisibleDate="2008-08-01" >
...
</eo:DatePicker>
</div>




<DIV id=Div73
style="Z-INDEX: 2; LEFT: 200px; POSITION: absolute; TOP: 240px"
align=left>
<SCRIPT type=text/javascript>
//<![CDATA[
var _eo_debug=true;
var _eo_aspnet11=0;

....

<TABLE id=TabContainer1_TabPanel2_DatePicker3 disabled cellSpacing=0
cellPadding=0 border=0>
<TBODY>
<TR>
<TD><INPUT id=_eo_TabContainer1_TabPanel2_DatePicker3_picker
style="PADDING-RIGHT: 5px; PADDING-LEFT: 5px; FONT-SIZE: small; WIDTH: 65px; FONT-FAMILY: tahoma"
size=11 value=06.01.2009
name=_eo_TabContainer1_TabPanel2_DatePicker3_picker></TD>
<TD><IMG id=_eo_TabContainer1_TabPanel2_DatePicker3_popupimg
title="" alt=" " src="Startformular-Dateien/eo_web.gif"
onload="eo_ObjLoaded('_eo_TabContainer1_TabPanel2_DatePicker3_popupimg');"></TD></TR></TBODY></TABLE><INPUT
...

function CheckBoxChanged(element) {

var picker1 = document.getElementById("_eo_TabContainer1_TabPanel2_DatePicker3_picker");
//var picker2 = document.getElementById("_eo_TabContainer1_TabPanel2_DatePicker3_popupimg");
var objtextbox = document.getElementById("TabContainer1$TabPanel2$PWTextBox3");

if (element.checked) {
// Code works
objtextbox.value='checked';
// This Code has no effect
picker1.disabled=false;
//picker2.disabled=false;
} else {
// Code works
objtextbox.value='not checked';
// This Code has no effect
picker1.disabled=false;
//picker2.disabled=false;
}
}

eo_support

Posted: Tuesday, January 6, 2009 9:42:06 AM

Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194

Hi,

You should rely on element ID. not the name attribute.

Thanks

Felix Weinraub

Posted: Wednesday, January 7, 2009 3:15:27 AM

Rank: Member
Groups: Member

Joined: 1/5/2009
Posts: 27

Hi,

I think this id can not be used because asp creates a new id after rendering the page.
With id="_eo_DatePicker3_picker" The page runs after clicking the checkbox on the error 'document.getElementById(...)' is null or no object ...



<eo:DatePicker id="DatePicker3" ....



><INPUT id="_eo_TabContainer1_TabPanel2_DatePicker3_picker" ...

<%@ Page Inherits="Startformular" Language="c#" CodeFile="Startformular.aspx.cs" AutoEventWireup="true" %>
<%@ Register TagPrefix="eo" Assembly="EO.Web" Namespace="EO.Web" %>
<%@ Register TagPrefix="AjaxControl" Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>

<script type="text/javascript" language="javascript"></script>
</head>
<body>

<form id="Formular" runat="server">
<asp:ScriptManager ID="ScriptManager1" EnablePartialRendering="true" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<AjaxControl:TabContainer ID="TabContainer1" style="height:645px; width:870px"
ActiveTabIndex="1" Tabindex="1" CssClass="FormTab_xpie7" runat="server">
<AjaxControl:TabPanel ID="TabPanel2" Tabindex="1" runat="server">
<HeaderTemplate>
</HeaderTemplate>
<ContentTemplate>
...
<div id="Div73" style="position:absolute;left:200px;top:240px;z-index:2" align="left">
<eo:DatePicker id="DatePicker3" runat="server" ControlSkinID="None" DayCellHeight="16"
...
</div>
</ContentTemplate>
</AjaxControl:TabPanel>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>

Thanks

eo_support

Posted: Wednesday, January 7, 2009 4:30:12 AM

Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194

Hi,

That's why you should use:

Code: JavaScript

Copy

document.getElementById(
    '_eo_' + '<%= DatePicker3.ClientID %>' +'_picker');

Note you should use <%= %>, not <%# %>. The first one is rendering syntax, the second one is data binding syntax.

And should not use:

Code: JavaScript

Copy

document.getElementById(("_eo_DatePicker3_picker");

This issue is now closed.

Thanks

Felix Weinraub

Posted: Wednesday, January 7, 2009 5:39:06 AM

Rank: Member
Groups: Member

Joined: 1/5/2009
Posts: 27

Without AJAX-Scriptmanager, AJAX-TabContainer and AJAX-TabPanel this javascript-code works:

var picker1 = document.getElementById("DatePicker3");
picker1.disabled=false;

Now the "DatePicker" of the control is enabled but not the "Calendar".

The problem is, how do I get the proper id for DatePicker and Calendar after rendering the page with asp.net/ajax.net

"document.getElementById('_eo_' + '<%= DatePicker3.ClientID %>' +'_picker')" generates the error
"The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>)" ...

eo_support

Posted: Wednesday, January 7, 2009 6:14:58 AM

Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194

Hi,

First of all, you need to read our rely more carefully. We have NEVER said you can use:

document.getElementById("DatePicker3");

It should always be "_eo_" + clientId + "_picker". If you continue to ignore our reply, we will not be able to help you.

Felix Weinraub wrote:

"document.getElementById('_eo_' + '<%= DatePicker3.ClientID %>' +'_picker')" generates the error
"The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>)"

This is normal. You will need to change your code so that you no longer modify the control's collection. For example, the following code will cause this error:

Code: HTML/ASPX

Copy

<asp:Panel runat="server" id="Panel1">
    <script>
    var panel = document.getElementById("<%=Panel1.ClientID%>");
    </script>
</asp:Panel>

Code: C#

Copy

Label label = new Label();
Panel1.Controls.Add(label);

To fix this error, you can change your code to:

Code: HTML/ASPX

Copy

<asp:Panel runat="server" id="Panel1">
    <script>
    var panel = document.getElementById("<%=Panel1.ClientID%>");
    </script>
    <asp:Panel runat="server" id="Panel2">
    </asp:Panel>
</asp:Panel>

Code: C#

Copy

Label label = new Label();
Panel2.Controls.Add(label);

Note the correct code does not try to add new controls to Panel1, instead it tries to add the new controls to Panel2. Panel2 does not include any of <%= %> block.

Note we are providing the above solution only as a courtesy. The question at here is actually "How to get a server control's client ID to use with JavaScript?". We consider this as a generic ASP.NET programming question that is outside of the scope of our support. So if you continue to have any questions on this regard, you should try to consult other resource.

Once you got the correct client ID, you will need to use getElementById to get both the "_picker" element and the "_popupimg" element as explained above. Those should solve your problem.

Hope this helps.

Thanks

Felix Weinraub

Posted: Thursday, January 8, 2009 3:32:50 AM

Rank: Member
Groups: Member

Joined: 1/5/2009
Posts: 27

Dear mr,
you can believe me, i have carefully read the instructions!
The problems have a simple reason: I mistakenly placed the javacsript-code on the page between <head> and </head>. Ups!.
After placing the code between <body> and </body> everything uncomplainingly works!
I hope I can continue to claim support regarding your controls.
Thank you ..

eo_support

Posted: Thursday, January 8, 2009 5:56:42 AM

Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194

Glad that everything is working now!

You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.

Message