Solved

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

Posted on 2010-11-08
32
846 Views
Last Modified: 2012-05-10
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
0
Comment
Question by:druplash
  • 16
  • 8
  • 3
  • +2
32 Comments
 
LVL 4

Expert Comment

by:vinodch
Comment Utility
We have to write a javscript to set checkbox to true when datefield is entered and viceversa
0
 

Author Comment

by:druplash
Comment Utility
Hi vinodch,

thank´s for your reply.
Please can you show me how? i´m not familar with javascript.
0
 

Author Comment

by:druplash
Comment Utility
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
 

Author Comment

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

Open in new window

0
 
LVL 4

Expert Comment

by:vinodch
Comment Utility
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
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
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
 

Author Comment

by:druplash
Comment Utility
Thank you guys! But this is not a Flex mxml code.

Regards,
druplash
0
 
LVL 11

Expert Comment

by:petiex
Comment Utility
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
 

Author Comment

by:druplash
Comment Utility
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
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
OOps - did not see the flex part. Still valid comments if you were using JS;)
0
 

Author Comment

by:druplash
Comment Utility
Anyway thank´s a lot for your help mplungjan! ;)
0
 
LVL 4

Expert Comment

by:vinodch
Comment Utility
The code what I have written is Javascript you can use it
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
@Vinodch: It is not FLEX
0
 
LVL 11

Expert Comment

by:petiex
Comment Utility
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
 

Author Comment

by:druplash
Comment Utility
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
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
LVL 11

Expert Comment

by:petiex
Comment Utility
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
 

Author Comment

by:druplash
Comment Utility
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
 
LVL 11

Expert Comment

by:petiex
Comment Utility
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
 

Author Comment

by:druplash
Comment Utility
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
 
LVL 11

Expert Comment

by:petiex
Comment Utility
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
 

Author Comment

by:druplash
Comment Utility
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
 

Author Comment

by:druplash
Comment Utility
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
 

Author Comment

by:druplash
Comment Utility
Will it help you if i post the whole code?
0
 
LVL 11

Expert Comment

by:petiex
Comment Utility
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
 

Author Comment

by:druplash
Comment Utility
OK, here it is.

Thank´s
code.txt
0
 
LVL 11

Expert Comment

by:petiex
Comment Utility
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
 

Author Comment

by:druplash
Comment Utility
i am currently not at my pc. will give you later a feedback.
thank's
0
 

Author Comment

by:druplash
Comment Utility
Hi petiex,

thank´s for your reply. The issue is still the same. The datefield will not get cleared.
0
 
LVL 11

Expert Comment

by:petiex
Comment Utility
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
 

Accepted Solution

by:
druplash earned 0 total points
Comment Utility
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
 
LVL 37

Expert Comment

by:CyanBlue
Comment Utility
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

Featured Post

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Recently I have been answering a lot of questions like this in IT forums that I frequent. The question posed is usually something along the lines of "We have software X installed and need to uninstall it for reason Y" or some other variant of the sa…
In my long career of working as an actionscript developer, I had spent sleepless night often working hard to solve some small problems which actually took a lot of my development time; later found out the solutions to be a line or two. Here are s…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
In this fourth video of the Xpdf series, we discuss and demonstrate the PDFinfo utility, which retrieves the contents of a PDF's Info Dictionary, as well as some other information, including the page count. We show how to isolate the page count in a…

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now