Template/Checkbox issues

Question

User-195907812 posted

Hi,

My website theme (css) requires I create my checkboxes (inside a datatable) exactly as follows:

<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
<input type="checkbox" class="checkboxes select-checkbox" value="test" />
<span></span>
</label>

My datatable can have hundreds of rows, each row having a checkbox.

I'm having trouble getting this working correctly, and seem to hit problems with every approach. 

I am creating the datatable via C# code-behind (webforms). If I use asp.net controls, I'm unable to create the initial <label> as an ASP.NET label renders as a span. If I use a literal, I can't add further controls. If I use HTML controls, I can't later read if each checkbox is checked/unchecked because I "Cannot get inner content of because the contents are not literal."

I believe this is the closest code I have to a working solution:

Creating the checkboxes

var myLabel = new HtmlGenericControl("label");
myLabel.Attributes["class"] = "mt-checkbox mt-checkbox-single mt-checkbox-outline";

HtmlInputCheckBox myCheckbox = new HtmlInputCheckBox();
myCheckbox.Attributes["class"] = "checkboxes select-checkbox";
myLabel.Controls.Add(myCheckbox);

var innerSpan = new HtmlGenericControl("span");
myLabel.Controls.Add(innerSpan);

Reading the checkboxes

var temp = (HtmlGenericControl)trRow.Cells[0].Controls[0];

But from here, I'm not sure how I can read the HtmlCheckbox because this line gives the "Cannot get inner content of because the contents are not literal." error.

Any ideas?

Answer 1

User475983607 posted

My website theme (css) requires I create my checkboxes (inside a datatable) exactly as follows:

<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
<input type="checkbox" class="checkboxes select-checkbox" value="test" />
<span></span>
</label>

The checkbox input is missing an name attribute.  The browser does not have a name to go with the value and therefore will not submit the checkbox.

Answer 2

User-195907812 posted

Thanks for your response as always Mgebhard.

Unfortunately, adding the name attribute made no difference - so maybe I wasn't clear on the issue.

Anyway, after playing around - I'm now able to retrieve the checkbox values using:

var labelControl = (HtmlGenericControl)trRow.Cells[0].Controls[0];
var innerControls = labelControl.Controls.OfType<Control>();

int index = 0;
foreach (Control ctrl in innerControls)
{
    if (index == 0) {

        if (((HtmlInputCheckBox)ctrl).Checked == true) {
            string myid = ((HtmlInputCheckBox)ctrl).ID;}
        }

    index++;
}

I'm sure there must be an easier way of getting the control by index (0)?

Answer 3

User-893317190 posted

Hi RageRiot,

If you don't mind the name and id attribute of your checkbox,you could try the code below.

 <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">

            <Columns>
                <asp:TemplateField HeaderText="checkbox">
                    <ItemTemplate>
                        <label  class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
                            <input id="Checkbox1" type="checkbox" runat="server" class="checkboxes select-checkbox" value="test" />
                        <span></span>
                    </label>
                    </ItemTemplate>
                    

                </asp:TemplateField>
            </Columns>
        </asp:GridView>
        <asp:Button ID="Button1" runat="server" Text="getAllTheCheckbox" OnClick="Button1_Click" />

Code behind.

 public partial class getCheckBox : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                GridView1.DataSource = new int[] { 1, 2, 4, 5, 6 };
                GridView1.DataBind();
            }
        }

        protected void Button1_Click(object sender, EventArgs e)
        {
            foreach (GridViewRow item in GridView1.Rows)
            {
                if (item.RowType == DataControlRowType.DataRow)
                {
                    HtmlInputCheckBox box = item.Cells[0].FindControl("Checkbox1") as HtmlInputCheckBox;
                    Response.Write(box.Checked + "<br/>");
                }
            }
        }

The result.

Best regards,

Ackerly Xu

Answer 4

User-195907812 posted

Great, many thanks.