Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > ASP .Net > ASP .Net Building Controls > Custom Checkboxlist control

Reply
Thread Tools

Custom Checkboxlist control

 
 
Burak
Guest
Posts: n/a
 
      09-25-2003
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
 
Reply With Quote
 
 
 
 
John Saunders
Guest
Posts: n/a
 
      09-25-2003
"Burak" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed) om...
> 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.


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">
<aspataList 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>
</aspataList></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__ctl 0_chkOneCountry"
type="checkbox"
name="_ctl0:_ctl10:lstCountryGroupCountryMatrix:_c tl0:chkOneCountry" /></TD>
<TD>
<Label
id="_ctl0__ctl10_lstCountryGroupCountryMatrix__ctl 0_lblOneCountry"
for="_ctl0__ctl10_lstCountryGroupCountryMatrix__ct l0_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.

--
John Saunders
Internet Engineer
http://www.velocityreviews.com/forums/(E-Mail Removed)


 
Reply With Quote
 
 
 
 
Dave Rothgery
Guest
Posts: n/a
 
      09-25-2003

"John Saunders" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> "Burak" <(E-Mail Removed)> wrote in message
> news:(E-Mail Removed) om...
> > 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.

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


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.


--
Dave Rothgery
(E-Mail Removed)


 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Checkboxlist inside Repeater - doesn't fire click event for Checkboxlist JD ASP .Net 5 08-08-2007 11:28 AM
How to get Selected item in a Databinded CheckBoxList when CheckBoxlist is in a DataList? Patrick.O.Ige ASP .Net 5 06-19-2005 06:11 AM
Custom Validator for a checkboxlist control Strange behavior. Itai ASP .Net Web Controls 3 07-22-2004 11:32 AM
Custom Validator for a checkboxlist control Strange behavior. Itai Javascript 0 07-18-2004 02:32 PM
ControlDesigner not invoked on custom control when control is rendered within another custom control Matt Sokol ASP .Net Building Controls 2 08-07-2003 07:13 AM



Advertisments