Custom Checkboxlist control

[Burak]

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]

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

 

[Dave Rothgery]

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.