Custom Checkboxlist control

Discussion in 'ASP .Net Building Controls' started by Burak, Sep 25, 2003.

  1. Burak

    Burak Guest

    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
    Burak, Sep 25, 2003
    #1
    1. Advertising

  2. "Burak" <> wrote in message
    news:...
    > 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">
    <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.

    --
    John Saunders
    Internet Engineer
    John Saunders, Sep 25, 2003
    #2
    1. Advertising

  3. "John Saunders" <> wrote in message
    news:...
    > "Burak" <> wrote in message
    > news:...
    > > 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
    Dave Rothgery, Sep 25, 2003
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. JD
    Replies:
    5
    Views:
    11,628
    NetArchitect
    Aug 8, 2007
  2. Patrick.O.Ige
    Replies:
    5
    Views:
    19,086
    Patrick.O.Ige
    Jun 19, 2005
  3. Matt Sokol
    Replies:
    2
    Views:
    368
    Theo Tillotson
    Aug 7, 2003
  4. Itai
    Replies:
    3
    Views:
    160
    Itai Itai
    Jul 22, 2004
  5. Itai
    Replies:
    0
    Views:
    91
Loading...

Share This Page