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
druplashAsked:
Who is Participating?
 
druplashConnect With a Mentor Author Commented:
Thank´s for your reply. I´m really sorry but it will not work. The same result, the datefield data is still there, if i set the checkbox from true to false.
0
 
vinodchCommented:
We have to write a javscript to set checkbox to true when datefield is entered and viceversa
0
 
druplashAuthor Commented:
Hi vinodch,

thank´s for your reply.
Please can you show me how? i´m not familar with javascript.
0
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

 
druplashAuthor Commented:
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

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

Open in new window

0
 
vinodchCommented:
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>
0
 
Michel PlungjanIT ExpertCommented:
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

0
 
druplashAuthor Commented:
Thank you guys! But this is not a Flex mxml code.

Regards,
druplash
0
 
petiexCommented:
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}
}
0
 
druplashAuthor Commented:
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

0
 
Michel PlungjanIT ExpertCommented:
OOps - did not see the flex part. Still valid comments if you were using JS;)
0
 
druplashAuthor Commented:
Anyway thank´s a lot for your help mplungjan! ;)
0
 
vinodchCommented:
The code what I have written is Javascript you can use it
0
 
Michel PlungjanIT ExpertCommented:
@Vinodch: It is not FLEX
0
 
petiexCommented:
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?
0
 
druplashAuthor Commented:
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

0
 
petiexCommented:
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

0
 
druplashAuthor Commented:
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.
0
 
petiexCommented:
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

0
 
druplashAuthor Commented:
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]


0
 
petiexCommented:
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.
0
 
druplashAuthor Commented:
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>
0
 
druplashAuthor Commented:
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!
0
 
druplashAuthor Commented:
Will it help you if i post the whole code?
0
 
petiexCommented:
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.
0
 
druplashAuthor Commented:
OK, here it is.

Thank´s
code.txt
0
 
petiexCommented:
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

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

thank´s for your reply. The issue is still the same. The datefield will not get cleared.
0
 
petiexCommented:
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

0
 
CyanBlueCommented:
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.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.