AboutPricingCommunityTeamsStart Free TrialLog in
Avatar of druplash
druplash
Flag 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
Apache FlexAdobe FlashScripting Languages
Avatar of undefined
Last Comment
CyanBlue
8/22/2022 - Mon
vinodch
We have to write a javscript to set checkbox to true when datefield is entered and viceversa
druplash
ASKER
Hi vinodch,

thank´s for your reply.
Please can you show me how? i´m not familar with javascript.
druplash
ASKER
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

All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck
druplash
ASKER
Sorry, forget the last post.
private function activeCheckbox():void{
				if(sponsorenDg.selectedItem.infoerhalten_date !== ""){
					
					sponsorenDg.selectedItem.infoerhalten = true;
					
				}
			}

Open in new window

vinodch
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>
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

⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
druplash
ASKER
Thank you guys! But this is not a Flex mxml code.

Regards,
druplash
petiex
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}
}
druplash
ASKER
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

I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck
Michel Plungjan
OOps - did not see the flex part. Still valid comments if you were using JS;)
druplash
ASKER
Anyway thank´s a lot for your help mplungjan! ;)
vinodch
The code what I have written is Javascript you can use it
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
Michel Plungjan
@Vinodch: It is not FLEX
petiex
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?
druplash
ASKER
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

Your help has saved me hundreds of hours of internet surfing.
fblack61
petiex
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

druplash
ASKER
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.
petiex
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

⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
druplash
ASKER
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]


petiex
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.
druplash
ASKER
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>
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
druplash
ASKER
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!
druplash
ASKER
Will it help you if i post the whole code?
petiex
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.
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
druplash
ASKER
OK, here it is.

Thank´s
code.txt
petiex
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

druplash
ASKER
i am currently not at my pc. will give you later a feedback.
thank's
This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23
druplash
ASKER
Hi petiex,

thank´s for your reply. The issue is still the same. The datefield will not get cleared.
petiex
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
druplash
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
CyanBlue
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.
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
Plans and Pricing
Resources
Product
Podcasts
Careers
Contact Us
Teams
Certified Expert Program
Credly Partnership
Udemy Partnership
Privacy Policy
Terms of Use

© 1996-2023 Experts Exchange, LLC. All rights reserved. Covered by US Patent