?
Solved

checkboxes in datalist

Posted on 2009-04-23
7
Medium Priority
?
448 Views
Last Modified: 2012-05-06
Hi experts,

i am writing an email notification control. The User should be able to choose from several check boxes. (send email : immediatly, daily or never)
This is displayed in a datalist since there several subjects that the user can choose from... each itemtemplate has the 3 checkboxes

I want to be able to have the user select (immediatly and daily) if he checks (never) the other two checkboxes should get automatically unchecked (java)... and viceversa

Thanks for your help

<asp:DataList id="dlstManufacturers" HorizontalAlign="Center" runat="server" BorderWidth="0" CellPadding="0" ShowFooter="True" ShowHeader="True" DataKeyField="RecordId" GridLines="None" BorderStyle="Solid" Width="100%">
    <HeaderTemplate>
            <table width="100%" cellpadding="5" cellspacing="0" border="0">
            <tr>
                <td>
                    <asp:Label CssClass="NormalBold" ID="Label1" runat="server" Text="Manufacturer"></asp:Label>
                </td>
                <td>
                    <asp:Label CssClass="NormalBold" ID="Label2" runat="server" Text="Send Immediately"></asp:Label>
                </td>
                <td>
                    <asp:Label CssClass="NormalBold" ID="Label3" runat="server" Text="Send Twice Daily"></asp:Label>
                </td>
                <td>
                    <asp:Label CssClass="NormalBold" ID="Label4" runat="server" Text="Never Send"></asp:Label>
                </td>
            </tr>
    </HeaderTemplate>
    <ITEMTEMPLATE>
            <tr>
                <td>
                    <asp:Label id="lblManufacturerId" Text='<%# DataBinder.Eval(Container.DataItem, "RecordId")%>' Runat="server" Visible="false"></asp:Label>
                    <asp:Label CssClass="Normal" id="lblManufacturerName" Text='<%# DataBinder.Eval(Container.DataItem, "ManufacturerName")%>' runat="server"></asp:Label>
                </td>
                <td>
                    <asp:CheckBox ID="chbImmediately" runat="server"  />
                </td>
                <td>
                    <asp:CheckBox ID="chbDaily" runat="server" />
                </td>
                <td>
                    <asp:CheckBox ID="chbNever" runat="server" />
                </td>
            </tr>
    </ITEMTEMPLATE>
    <FooterTemplate>
        </table>
    </FooterTemplate>
</asp:DataList>

Open in new window

0
Comment
Question by:mcselasvegas
  • 4
  • 3
7 Comments
 
LVL 3

Expert Comment

by:GregTSmith
ID: 24216718
This JavaScript (which is not the same thing as Java) should do the trick as long as the HTML structure generated by the DataList remains the same.

Alternatively, you might consider switching to a RadioButtonList that has: Never, Immediately, Twice Daily, Both

A RadioButtonList would make the HTML work in more scenarios, and wouldn't require any JavaScript.
function adjustCheckboxes(event) {
	var e = eventElement(event);
	if (e.id.indexOf('chbNever') >= 0) {
		var r = e.parentNode.parentNode,
			c1 = r.childNodes[1].childNodes[0],
			c2 = r.childNodes[2].childNodes[0];
		c1.checked = false;
		c2.checked = false;
	}
}
function eventElement(event) {
	var e = event || window.event, 
		o = e.target || e.srcElement;
	if (o.nodeType === 3) { // defeat Safari bug
		o = o.parentNode;
	}
	return o;
}
document.onclick = adjustCheckboxes;

Open in new window

0
 
LVL 3

Accepted Solution

by:
GregTSmith earned 2000 total points
ID: 24216772
Wouldn't you know I didn't test thoroughly.  :(

Use this JavaScript instead.
function adjustCheckboxes(event) {
	var e = eventElement(event);
	if (e.type === 'checkbox') {
		var r = e.parentNode.parentNode,
			c1 = r.childNodes[1].childNodes[0],
			c2 = r.childNodes[2].childNodes[0],
			c3 = r.childNodes[3].childNodes[0],
			never = (e.id.indexOf('chbNever') >= 0);
		if (never) {
			c1.checked = false;
			c2.checked = false;
		}
		else {
			c3.checked = false;
		}
	}
}
function eventElement(event) {
	var e = event || window.event, 
		o = e.target || e.srcElement;
	if (o.nodeType === 3) { // defeat Safari bug
		o = o.parentNode;
	}
	return o;
}
document.onclick = adjustCheckboxes;

Open in new window

0
 

Author Closing Comment

by:mcselasvegas
ID: 31573776
Hi Greg,
You hit the nail on the head... Thank you so much...
Oliver
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 

Author Comment

by:mcselasvegas
ID: 24219101
Hi Greg,

May I ask you one more question...
what would I use If I wanted a button to select all send daily checkboxes at once?
and to continue that thought one button for select all immediatly and one for select all never checkboxes?

Thank you,
Oliver

0
 
LVL 3

Expert Comment

by:GregTSmith
ID: 24219778
I've attached a sample that should help to get you there...  

Note: toggling checked = true / false is based on the current value of the top checkbox in the column.
Test.htm.txt
0
 

Author Comment

by:mcselasvegas
ID: 24220969
Hi greg,

this works great in plain html... but the datalist control add thes pesty <span> tags that srew up the java script...

here is the control code I use

<asp:DataList id="dlstManufacturers" HorizontalAlign="Center" runat="server" CellPadding="0" ShowFooter="True" ShowHeader="True" DataKeyField="RecordId" OnItemDataBound="ItemDataBound" OnItemCommand="ItemCommand" RepeatLayout="Flow" RepeatDirection="Horizontal">
    <HeaderTemplate>
   

       
        <table id="myTable" cellpadding="5" cellspacing="0" border="0">
            <tr>
                <td width="150">
                    <asp:Label CssClass="NormalBold" ID="Label1" runat="server" Text="Manufacturer"></asp:Label>
                </td>
                <td width="150">
                    <asp:Label CssClass="NormalBold" ID="Label2" runat="server" Text="Send Immediately"></asp:Label>
                </td>
                <td width="150">
                    <asp:Label CssClass="NormalBold" ID="Label3" runat="server" Text="Send Twice Daily"></asp:Label>
                </td>
                <td width="150">
                    <asp:Label CssClass="NormalBold" ID="Label4" runat="server" Text="Never Send"></asp:Label>
                </td>
            </tr>
       
    </HeaderTemplate>
    <ITEMTEMPLATE>
       
                        <tr>
                            <td width="150">
                                <asp:Label id="lblManufacturerId" Text='<%# DataBinder.Eval(Container.DataItem, "RecordId")%>' Runat="server" Visible="false"></asp:Label>
                                <asp:Label CssClass="Normal" id="lblManufacturerName" Text='<%# DataBinder.Eval(Container.DataItem, "ManufacturerName")%>' runat="server"></asp:Label>
                            </td>
                            <td width="150">
                                <asp:CheckBox ID="chbImmediately" runat="server" onclick="SingleSelect('chk',this);" />
                            </td>
                            <td width="150">
                                <asp:CheckBox ID="chbDaily" runat="server" />
                            </td>
                            <td width="150">
                                <asp:CheckBox ID="chbNever" runat="server" />
                            </td>
                        </tr>
                   
               
    </ITEMTEMPLATE>
    <FooterTemplate>
    </table>
       
    </FooterTemplate>
</asp:DataList>

this creates this html code...

<span id="dnn_ctr783_EmailNotificationSettings_dlstManufacturers"><span>
 
       
        <table id="myTable" cellpadding="5" cellspacing="0" border="0">
            <tr>
                <td width="150">
                    <span id="dnn_ctr783_EmailNotificationSettings_dlstManufacturers_ctl00_Label1" class="NormalBold">Manufacturer</span>
                </td>
                <td width="150">
                    <span id="dnn_ctr783_EmailNotificationSettings_dlstManufacturers_ctl00_Label2" class="NormalBold">Send Immediately</span>
                </td>
                <td width="150">
                    <span id="dnn_ctr783_EmailNotificationSettings_dlstManufacturers_ctl00_Label3" class="NormalBold">Send Twice Daily</span>
                </td>
                <td width="150">
                    <span id="dnn_ctr783_EmailNotificationSettings_dlstManufacturers_ctl00_Label4" class="NormalBold">Never Send</span>
                </td>
            </tr>
       
    </span><span>
       
                        <tr>
                            <td width="150">
                               
                                <span id="dnn_ctr783_EmailNotificationSettings_dlstManufacturers_ctl01_lblManufacturerName" class="Normal">Acura</span>
                            </td>
                            <td width="150">
                                <input id="dnn_ctr783_EmailNotificationSettings_dlstManufacturers_ctl01_chbImmediately" type="checkbox" name="dnn$ctr783$EmailNotificationSettings$dlstManufacturers$ctl01$chbImmediately" onclick="SingleSelect('chk',this);" />
                            </td>
                            <td width="150">
                                <input id="dnn_ctr783_EmailNotificationSettings_dlstManufacturers_ctl01_chbDaily" type="checkbox" name="dnn$ctr783$EmailNotificationSettings$dlstManufacturers$ctl01$chbDaily" />
                            </td>
                            <td width="150">
                                <input id="dnn_ctr783_EmailNotificationSettings_dlstManufacturers_ctl01_chbNever" type="checkbox" name="dnn$ctr783$EmailNotificationSettings$dlstManufacturers$ctl01$chbNever" />
                            </td>
                        </tr>
                   
               
    </span><span>...

any ideas how I could work around that?

I really appreciate your help..
0
 

Author Comment

by:mcselasvegas
ID: 24224449
Hi Greg,

Just disregard the last question... I switched to repeater and it works fine now...

Thanx fo all your help... ;o)
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

In an ASP.NET application, I faced some technical problems. In this article, I list them out and show the solutions that I found.  I hope it will be useful. Problem: After closing a pop-up window, the parent page should be refreshed automaticall…
Problem Hi all,    While many today have fast Internet connection, there are many still who do not, or are connecting through devices with a slower connect, so light web pages and fast load times are still popular.    If your ASP.NET page …
Whether it be Exchange Server Crash Issues, Dirty Shutdown Errors or Failed to mount error, Stellar Phoenix Mailbox Exchange Recovery has always got your back. With the help of its easy to understand user interface and 3 simple steps recovery proced…
How can you see what you are working on when you want to see it while you to save a copy? Add a "Save As" icon to the Quick Access Toolbar, or QAT. That way, when you save a copy of a query, form, report, or other object you are modifying, you…
Suggested Courses

621 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