locked
Template/Checkbox issues RRS feed

  • 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?

    Tuesday, November 20, 2018 10:38 AM

Answers

  • 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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, November 21, 2018 6:57 AM

All replies

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

    Tuesday, November 20, 2018 11:32 AM
  • 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)?

    Tuesday, November 20, 2018 11:51 AM
  • 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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, November 21, 2018 6:57 AM
  • User-195907812 posted

    Great, many thanks.

    Wednesday, November 21, 2018 10:04 AM