Link to home
Start Free TrialLog in
Avatar of druplash
druplashFlag for Austria

asked on

How to set a checkbox to true when a datefield is filled with data?

Hello,

i have a form and a datagrid. In the form i have a datefield and in the datagrid, in one column, i have a checkbox itemrenderer.

Please can somebody show me, how the checkbox can be set to true, when i fill the datefield with a date? And back when i set the checkbox to false that the datefield is empty?

Thank´s for helping!

Regards,
druplash
Avatar of vinodch
vinodch
Flag of India image

We have to write a javscript to set checkbox to true when datefield is entered and viceversa
Avatar of druplash

ASKER

Hi vinodch,

thank´s for your reply.
Please can you show me how? i´m not familar with javascript.
I have tried with actionscript like this, but i does not work.
private function activeCheckbox():void{
if(sponsorenDg.selectedItem.infoerhalten_date !== ""){			sponsorenDg.selectedItem.infoerhalten = true;
}
}

Open in new window

Sorry, forget the last post.
private function activeCheckbox():void{
				if(sponsorenDg.selectedItem.infoerhalten_date !== ""){
					
					sponsorenDg.selectedItem.infoerhalten = true;
					
				}
			}

Open in new window

below is the code which helps you

<head runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript" language="javascript">
    function ChecktheDate(textboxid)
    {
        var checkboxid = textboxid.replace("txtDate","chkSelectAll");
        if(document.getElementById(textboxid) != null)
        {
            var DateValue = document.getElementById(textboxid).value;
           
            if(DateValue == "")
            {
                document.getElementById(checkboxid).checked = false;
            }
            else
            {
                document.getElementById(checkboxid).checked = true;
            }
         }
    }
   
    function MaketextEmpty(checkboxid)
    {
       
        var textboxid = checkboxid.replace("chkSelectAll","txtDate");
        if(document.getElementById(checkboxid) != null)
        {
       
            if(document.getElementById(checkboxid).checked == false)
            {
                document.getElementById(textboxid).value = "";
            }
           
         }
    }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:GridView runat="server" ID="gvDate" AutoGenerateColumns="false">
    <Columns>
    <asp:TemplateField>
    <ItemTemplate>
    <asp:CheckBox id="chkSelectAll" onclick="MaketextEmpty(this.id);" runat="server" Text="Select" />
    </ItemTemplate>
   
    </asp:TemplateField>
    <asp:TemplateField>
    <ItemTemplate>
   <asp:TextBox ID="txtDate" runat="server" onchange="ChecktheDate(this.id);"></asp:TextBox>
    </ItemTemplate>
    </asp:TemplateField>
    </Columns>
    </asp:GridView>
    </div>
    </form>
</body>
Avatar of Michel Plungjan
Why so complicated?
Pass the object itself
And how can the object that calls the code ever be null?
And please use the CODE field


<head runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript" language="javascript">
    function ChecktheDate(textbox) {
        var checkboxid = textbox.id.replace("txtDate","chkSelectAll");
        var DateValue = document.getElementById(textboxid).value; // or use textbox.form.elementname here
        document.getElementById(checkboxid).checked = (DateValue != "")
    }
   
    function MaketextEmpty(checkbox) {
        var textboxid = checkbox.id.replace("chkSelectAll","txtDate");
        if (!document.getElementById(checkboxid).checked) {
          document.getElementById(textboxid).value = "";
        }
    }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:GridView runat="server" ID="gvDate" AutoGenerateColumns="false">
    <Columns>
    <asp:TemplateField>
    <ItemTemplate>
    <asp:CheckBox id="chkSelectAll" onclick="MaketextEmpty(this);" runat="server" Text="Select" />
    </ItemTemplate>
   
    </asp:TemplateField>
    <asp:TemplateField>
    <ItemTemplate>
   <asp:TextBox ID="txtDate" runat="server" onchange="ChecktheDate(this);"></asp:TextBox>
    </ItemTemplate>
    </asp:TemplateField>
    </Columns>
    </asp:GridView>
    </div>
    </form>
</body>

Open in new window

Thank you guys! But this is not a Flex mxml code.

Regards,
druplash
You would want to update the itemRenderer's "selected" property whenever the dateField value changes.

So, in the creation handler, something like

dateField.addEventListener("change", dateChanged);

and then

private function dateChanged(event:Event):void{
    itemRenderer.properties = {"selected": dateField.selectedDate != null}
}
Thank´s petiex for your reply.
I get an error:

1119: Access of possibly undefined property properties through a reference with static type Class

RgerCheckBox = name of the itemRenderer
rgerhalten_date = name of the dateField
private function dateChanged(event:Event):void{
				RgerCheckBox.properties = {"selected": rgerhalten_date.selectedDate != null}
			}

Open in new window

OOps - did not see the flex part. Still valid comments if you were using JS;)
Anyway thank´s a lot for your help mplungjan! ;)
The code what I have written is Javascript you can use it
@Vinodch: It is not FLEX
Sorry, I assumed that you were using an instance of an itemRender class that implements IFactory, but that's not really necessary.

Can you post the code for your itemRenderer, and how you are implementing it in the datagridcolumn?
No problem, thank´s for the answer.

Here´s the code of the itemRenderer and how i use it in the datagrid:

// itemRenderer

<?xml version="1.0" encoding="utf-8"?>
<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
						  xmlns:s="library://ns.adobe.com/flex/spark" 
						  xmlns:mx="library://ns.adobe.com/flex/mx" 
						  focusEnabled="true">
	
	<fx:Script>
		<![CDATA[
			
			
			import mx.events.ListEvent;
			public static const UPDATE_ITEM_RGER: String = "updateItemRger";
			
			
			override public function set data( value:Object ) : void {
				super.data = value;
				if(data.rgerhalten == "true"){
					theBoxRger.selected = true;
				}else{
					theBoxRger.selected = false;
				}				
			}

			protected function theBoxRger_changeHandler(e:Event):void
			{
				data.rgerhalten = String(theBoxRger.selected);
				
				var event:ListEvent = new ListEvent( UPDATE_ITEM_RGER );
				event.itemRenderer = this;
				owner.dispatchEvent(event);  
			}

		]]>
	</fx:Script>   
	
	<s:CheckBox id="theBoxRger" horizontalCenter="0"  change="theBoxRger_changeHandler(event)"/>
</s:MXDataGridItemRenderer>


// use in dg

<mx:DataGridColumn headerText="Rg. erh." dataField="rgerhalten" itemRenderer="RgerCheckBox" width="50"/>

// the datefield

<mx:FormItem label="Rg. erhalten am">
				<mx:DateField id="rgerhalten_date" formatString="DD/MM/YYYY" yearNavigationEnabled="true"  width="120"/>
			</mx:FormItem>

Open in new window

That is a very specific itemRenderer.

This should work if the DataGrid has an id of datagrid and you add change="dateChange(event)" to the DateField:
        private function dateChange(event:Event):void{
           for each (var obj:Object in datagrid.dataProvider){
               obj.rgerhalten = (event.target.selectedDate == null)?"false":"true";
           }
        }

Open in new window

Thank´s petiex, now the checkbos is set to true if i define a date in the datefield.
Please i need the back way too. If i set the checkbox to false, the datefield has to be deleted.
Add creationComplete="creationHandler(event)" to the top element of your mxml (e.g. the s:Application element), and then add this code:
        private function creationHandler(event:Event):void{
            datagrid.addEventListener(RgerCheckBox.UPDATE_ITEM_RGER, updateDateField);
        }
        private function updateDateField(event:ListEvent):void{
            if(!(event.itemRenderer as RgerCheckBox).theBoxRger.selected){
                rgerhalten_date.selectedDate = null;
            }
        }

Open in new window

Thank´s for your reply.
When i want to set a checkbox from true to false i get the following error:

In this line (56):
rgerhalten_date.selectedDate = null;

TypeError: Error #1009: Cannot access a property or method of a null object reference.
      at SponsorenManager/updateDateField()[/Users/marioboro/Documents/Adobe Flash Builder 4/SponsorenManager/src/SponsorenManager.mxml:56]
      at flash.events::EventDispatcher/dispatchEventFunction()
      at flash.events::EventDispatcher/dispatchEvent()
      at mx.core::UIComponent/dispatchEvent()[E:\dev\4.x\frameworks\projects\framework\src\mx\core\UIComponent.as:12528]
      at RgerCheckBox/theBoxRger_changeHandler()[/Users/marioboro/Documents/Adobe Flash Builder 4/SponsorenManager/src/RgerCheckBox.mxml:30]
      at RgerCheckBox/__theBoxRger_change()[/Users/marioboro/Documents/Adobe Flash Builder 4/SponsorenManager/src/RgerCheckBox.mxml:36]
      at flash.events::EventDispatcher/dispatchEventFunction()
      at flash.events::EventDispatcher/dispatchEvent()
      at mx.core::UIComponent/dispatchEvent()[E:\dev\4.x\frameworks\projects\framework\src\mx\core\UIComponent.as:12528]
      at spark.components.supportClasses::ToggleButtonBase/buttonReleased()[E:\dev\4.x\frameworks\projects\spark\src\spark\components\supportClasses\ToggleButtonBase.as:221]
      at spark.components.supportClasses::ButtonBase/mouseEventHandler()[E:\dev\4.x\frameworks\projects\spark\src\spark\components\supportClasses\ButtonBase.as:1054]


Is the DateField with the id of rgerhalten_date not in the SponsorenManager.mxml file? If it is in a different class, then you will want a variable to reference it from SponsorenManager.
Yes, it is in the same mxml file.

<mx:FormItem label="Rg. erhalten am">
                        <mx:DateField id="rgerhalten_date" formatString="DD/MM/YYYY" yearNavigationEnabled="true" change="dateChange(event)" width="120"/>
                  </mx:FormItem>
Now the error is not showing anymore, i think it was a caching issue or something like that.
But when i set a checkbox from true to false, the date in the datefield is not deleted.

Thank´s!
Will it help you if i post the whole code?
Sure. It couldn't hurt. The code does what it is supposed to do in the test application I compiled, so maybe there are some variables I haven't taken into account.
OK, here it is.

Thank´s
code.txt
Your dataGrid double-click handler is setting the text field, which doesn't get cleared by setting the selectedDate field to null, so you just want to additionally set the text field to "" in that checkbox click handler function:
        private function updateDateField(event:ListEvent):void{
            if(!(event.itemRenderer as RgerCheckBox).theBoxRger.selected){
                rgerhalten_date.selectedDate = null;
                rgerhalten_date.text = "";
            }
        }

Open in new window

i am currently not at my pc. will give you later a feedback.
thank's
Hi petiex,

thank´s for your reply. The issue is still the same. The datefield will not get cleared.
Since there are two event listeners attached to the sponsorenDg DataGrid's RgerCheckBox.UPDATE_ITEM_RGER, I'm guessing that the first one, onUpdateItem, triggers a chain of events that ultimately overwrite the action of the second one, updateDateField.

So I would try commenting out the line where you assign the first UPDATE_ITEM_RGER listener and change the second listener, updateDateField, so that it calls onUpdateItem after it finishes what it has to do. Like this:
protected function sponsoren_creationCompleteHandler(event:FlexEvent):void
{
    // event listener für die checkbox im itemrenderer
    sponsorenDg.addEventListener( CheckBoxIR.UPDATE_ITEM, onUpdateItem);
    sponsorenDg.addEventListener( LogoCheckBox.UPDATE_ITEM_LOGO, onUpdateItem);
    //sponsorenDg.addEventListener( RgerCheckBox.UPDATE_ITEM_RGER, onUpdateItem);
    sponsorenDg.addEventListener( RgbeCheckBox.UPDATE_ITEM_RGBE, onUpdateItem);
    sponsorenDg.addEventListener( InfoCheckBox.UPDATE_ITEM_INFO, onUpdateItem);

    sponsorenDg.addEventListener(RgerCheckBox.UPDATE_ITEM_RGER, updateDateField);

    // initiales laden der gäste
    sponsorenServices.getSponsoren();
    sponsorenDg.dataProvider = dgProvider;
    dgProvider = new ArrayCollection;

}

private function updateDateField(event:ListEvent):void{
    if(!(event.itemRenderer as RgerCheckBox).theBoxRger.selected){
        rgerhalten_date.selectedDate = null;
        rgerhalten_date.text = "";
    }
    onUpdateItem(event);
}

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of druplash
druplash
Flag of Austria image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
This question has been classified as abandoned and is being closed as part of the Cleanup Program. See my comment at the end of the question for more details.