Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

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

Posted on 2010-11-08
32
Medium Priority
?
856 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 16
  • 8
  • 3
  • +2
32 Comments
 
LVL 4

Expert Comment

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

Author Comment

by:druplash
ID: 34085089
Hi vinodch,

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

Author Comment

by:druplash
ID: 34085104
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
Setting up LaraDock for Laravel

Learn how to set up LaraDock in a Laravel project - LaraDock gives us an easy way to run a Laravel application using Docker in a single command.

 

Author Comment

by:druplash
ID: 34085112
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
ID: 34085406
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
ID: 34085607
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
ID: 34085784
Thank you guys! But this is not a Flex mxml code.

Regards,
druplash
0
 
LVL 11

Expert Comment

by:petiex
ID: 34086630
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
ID: 34086753
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
ID: 34086880
OOps - did not see the flex part. Still valid comments if you were using JS;)
0
 

Author Comment

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

Expert Comment

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

Expert Comment

by:Michel Plungjan
ID: 34087095
@Vinodch: It is not FLEX
0
 
LVL 11

Expert Comment

by:petiex
ID: 34087655
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
ID: 34088626
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
 
LVL 11

Expert Comment

by:petiex
ID: 34093404
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
ID: 34093522
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
ID: 34093732
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
ID: 34093856
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
ID: 34093998
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
ID: 34094014
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
ID: 34094067
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
ID: 34094166
Will it help you if i post the whole code?
0
 
LVL 11

Expert Comment

by:petiex
ID: 34094227
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
ID: 34094292
OK, here it is.

Thank´s
code.txt
0
 
LVL 11

Expert Comment

by:petiex
ID: 34094506
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
ID: 34094572
i am currently not at my pc. will give you later a feedback.
thank's
0
 

Author Comment

by:druplash
ID: 34099342
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
ID: 34101924
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
ID: 34102471
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
ID: 34819947
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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In this tutorial I will show you how to make a simple HTML bar chart with the usage of WhizBase, If you want more information about WhizBase please read my previous articles at http://www.experts-exchange.com/ARTH_5123186.html (http://www.experts-ex…
I have found that much of my time doing support ends up being a constant repetition of the same steps to different people.  Early on I stated using web pages with Frequently Asked Questions (FAQs) to alleviate most of the burden.  Sometimes this jus…
The goal of the tutorial is to teach the user how to live broadcast using Flash Media Live Encoder and connecting it to YouTube to broadcast. Log into your Youtube account, choose live stream settings, start live stream from Flash Media Live Enc…
The goal of the tutorial is to teach the user how to how to load their YouTube profile onto Flash Media Live Encoder.

722 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