Home | Contact Us | FAQ | Search & Site Map | Link to Us
Sign In | Join | Other 45 Sites in Network
HomeAnnouncementsFree MagazinesWhite PapersSubmit Content
Discussion GroupsASP.NETWindows FormsLanguages.NET FrameworkVisual Studio.NET
Articles.NET FrameworkASP.NETToolsWindows Forms
.NET DirectoryOpen Source ProjectsUser GroupsWeb Resources
Related Topics
Visual Basic 6SQL ServerMS AccessOther DB ProductsMS Server ProductsMore Topics ...

.NET Forum / ASP.NET / Building Controls / September 2003

Tip: Looking for answers? Try searching our database.

Custom Checkboxlist control

Thread view: 
Enable EMail Alerts  Start New Thread
Thread rating: 
Burak - 25 Sep 2003 15:01 GMT
Hello,

I have a checkbox list control, "check1" , on my
page.
After I do the databind, here is what the view source
looks like.

<table id="check1" border="0">
<tr><td>
<input id="check1_0" type="checkbox" name="check1:0"
/><label for="check1_0">Child Care</label></td>
</tr><tr><td>
<input id="check1_1" type="checkbox" name="check1:1"
/><label for="check1_1">Clothing / Uniform
Allowance</label></td></tr>
</table>

Is there a way to capture/modify this html before it
gets sent to the client and change "<td>" into
"<td align='right' valign='top'>" ???

Barring that, is there a custom control that lets me do the
above? I do not know much about custom controls and would like
to create one if I have to, but would prefer to use an existing
microsoft/custom control. :)

Thank you,

Burak
John Saunders - 25 Sep 2003 19:31 GMT
> Hello,
>
[quoted text clipped - 21 lines]
> to create one if I have to, but would prefer to use an existing
> microsoft/custom control. :)

I think the best you'll be able to do with a CheckBoxList is to derive from
it and override the Render method. If you render the Items yourself, you can
generate whatever HTML you need.

I have come very close to creating my own CheckBoxList, but I stopped short.
I was going to derive it from ListControl so that it would have the same
interface as a CheckBoxList, but I was going to implement it by using a
helper class derived from DataList. By deriving my helper class from
DataList, I'd get to programmatically supply my own ItemTemplate.

Instead, I punted and just used a DataList directly:

   <DIV style="BORDER-RIGHT: silver 2px inset; BORDER-TOP: silver 2px
inset; MARGIN-BOTTOM: 20px; OVERFLOW: auto; BORDER-LEFT: silver 2px inset;
BORDER-BOTTOM: silver 2px inset; HEIGHT: 300px">
       <asp:DataList id="lstCountryGroupCountryMatrix" Runat="server"
GridLines="Both" RepeatDirection="Vertical" RepeatLayout="Table"
RepeatColumns="3" BorderColor="White">
           <AlternatingItemStyle
BackColor="Gainsboro"></AlternatingItemStyle>
           <ItemStyle Wrap="False"></ItemStyle>
           <ItemTemplate>
               <TABLE>
                   <TR>
                       <TD valign="top">
                           <asp:CheckBox id="chkOneCountry" Runat="server"
Checked='<%# DataBinder.Eval(Container.DataItem, "Value") %>'>
                           </asp:CheckBox></TD>
                       <TD>
                           <Label id="lblOneCountry" Runat="server"
for="chkOneCountry" accesskey="x">
                               <%# DataBinder.Eval(Container,
"DataItem.Text") %>
                           </Label>
                       </TD>
                   </TR>
               </TABLE>
           </ItemTemplate>
       </asp:DataList></DIV>

I handled the ItemDataBound event for special effects:

   Private Sub lstCountryGroupCountryMatrix_ItemDataBound(ByVal sender As
Object, ByVal e As System.Web.UI.WebControls.DataListItemEventArgs) Handles
lstCountryGroupCountryMatrix.ItemDataBound
       Select Case e.Item.ItemType
           Case ListItemType.AlternatingItem, ListItemType.Item
               Dim lblOneCountry As HtmlGenericControl =
DirectCast(e.Item.FindControl("lblOneCountry"), HtmlGenericControl)
               Dim chkOneCountry As CheckBox =
DirectCast(e.Item.FindControl("chkOneCountry"), CheckBox)
               lblOneCountry.Attributes("for") = chkOneCountry.ClientID
               lblOneCountry.Attributes("accesskey") =
DirectCast(e.Item.DataItem, ListItem).Text.Chars(0)
       End Select
   End Sub

This generated:

   <DIV style="BORDER-RIGHT: silver 2px inset; BORDER-TOP: silver 2px
inset; MARGIN-BOTTOM: 20px; OVERFLOW: auto; BORDER-LEFT: silver 2px inset;
BORDER-BOTTOM: silver 2px inset; HEIGHT: 300px">
       <table id="_ctl0__ctl10_lstCountryGroupCountryMatrix"
cellspacing="0" rules="all" bordercolor="White" border="1"
style="border-color:White;border-collapse:collapse;">
   <tr>
    <td nowrap="nowrap">
               <TABLE>
                   <TR>
                       <TD valign="top">
                           <input
id="_ctl0__ctl10_lstCountryGroupCountryMatrix__ctl0_chkOneCountry"
type="checkbox"
name="_ctl0:_ctl10:lstCountryGroupCountryMatrix:_ctl0:chkOneCountry" /></TD>
                       <TD>
                           <Label
id="_ctl0__ctl10_lstCountryGroupCountryMatrix__ctl0_lblOneCountry"
for="_ctl0__ctl10_lstCountryGroupCountryMatrix__ctl0_chkOneCountry"
accesskey="A">
                               Afghanistan
                           </Label>
                       </TD>
                       ...
                   </TR>
               </TABLE>
           </td>
       </tr>
   </table>
</div>

It was pretty cool being able to type Alt-Z and get to Zanzibar...

Note the nasty hack: I kept the original CheckBoxList, and all the
operations on it, and when I was done, instead of displaying it, I used
CheckBoxList.Items as the DataSource for the DataList!

On the other hand, I'll never do that a second time. Next time I'm tempted,
I'll break down and write a control.

Signature

John Saunders
Internet Engineer
john.saunders@surfcontrol.com

Dave Rothgery - 25 Sep 2003 21:33 GMT
> > Hello,
> >
[quoted text clipped - 25 lines]
> derive from it and override the Render method. If you render the
> Items yourself, you can generate whatever HTML you need.

Alternatively, you can use a bit of CSS trickery to get the same effect.

Set the cssClass property on your CheckBoxList to myClass , then define
.myClass TD {
   text-align: right;
   vertical-align: top;
}

either in <STYLE> tags or in your linked style sheet.

Signature

Dave Rothgery
drothgery@alum.wpi.edu


Free Magazines

Get these publications absolutely FREE for up to 12 months. There are no hidden fees and no obligation. Simply choose a title, complete the application form and submit it. Read more ...

Oracle MagazineNetwork ComputingComputer WorldBio-IT WorldeWeekInformation WeekInfosecurity
 
Sign In
Join
My Latest Posts
My Monitored Threads
My Blog
My Photo Gallery
My Profile
My Homepage

Start New Thread
Enable EMail Alerts
Rate this Thread



©2009 Advenet LLC   Privacy Policy - Terms of Use
This website includes both content owned or controlled by Advenet as well as content owned or controlled by third parties.