Disabling of checkBoxes inside gridview on Page_Load

Question

I want to

disable the gridview checkboxes which is inside gridview.

I tried like below:-

public static void DisableFormControls(ControlCollection ChildCtrls)
{
    foreach (Control Ctrl in ChildCtrls)
    {
        if (Ctrl is Obout.Grid.Grid)
            ((Obout.Grid.Grid)Ctrl).Enabled = false;
        if (Ctrl is HtmlGenericControl)
            ((HtmlGenericControl)Ctrl).Disabled = true;
    }
}

and on Page_load

protected void Page_Load(object sender, EventArgs e)
{ 
    if (Request.QueryString["userid"] != null && Request.QueryString["userid"] != "")
    {
        Hid_userid.Value = Request.QueryString["userid"];
        Hid_HR.Value = "Y";
        FundiableEnable();

        DisableFormControls(Form.Controls);
    }
}

But it is not working for me. Any idea what's wrong with the code

Here is my html of GridView:

<cc1:Grid ID="GrdWorkingCompany" runat="server"  EnableTypeValidation="true" CallbackMode="true"
    ShowFooter="false" AutoGenerateColumns="false" AllowAddingRecords="true" AllowSorting="false"
    Width="100%" FolderStyle="~/Styles/Grid/style_12" PageSize="18">
    <Columns>
        <cc1:Column ID="Sr_No" ReadOnly="true" DataField="SrNo" HeaderText="Sr.No." Width="50px">
        </cc1:Column>
        <cc1:Column ID="Points" ReadOnly="true" DataField="Points" HeaderText="Points" runat="server" Width="300px">
        </cc1:Column>
        <cc1:Column ID="chkPoor" ReadOnly="true" DataField="Rating1" HeaderText="Poor" Width="110px" TemplateId="tpltPoor">
        </cc1:Column> 
        <cc1:Column ID="chkSatisfactory" DataField="Rating2" HeaderText="Satisfactory" ReadOnly="true"
            Width="110px" TemplateId="tpltSatisfactory">
        </cc1:Column>
        <cc1:Column ID="chkGood" ReadOnly="true" HeaderText="Good" DataField="Rating3" Width="110px" TemplateId="tpltGood">
        </cc1:Column>
        <cc1:Column ID="chkExcellent" HeaderText="Excellent" DataField="Rating4" Width="110px" ReadOnly="true"
            TemplateId="tpltEx1">
        </cc1:Column>
    </Columns>
    <TemplateSettings GroupHeaderTemplateId="GroupTemplate" />
    <Templates>
        <cc1:GridTemplate runat="server" ID="GridTemplate2">
            <Template>
                <%# Container.Column.HeaderText %>
                : <i>
                    <%# Container.Value %></i> (<%# Container.Group.PageRecordsCount %><%# Container.Group.PageRecordsCount > 1 ? "records" : "record" %>)
            </Template>
        </cc1:GridTemplate>
    </Templates>
    <Templates>
        <cc1:GridTemplate ID="tpltPoor">
            <Template>
                <input type="checkbox" id="chkA1<%# (Container.RecordIndex)%>" name="chkAC1" style="width: 17px; 
                    height: 17px;" value="<%# (Container.RecordIndex)%>" onclick="AppoveCheckA(this)" /></Template>
        </cc1:GridTemplate>
        <cc1:GridTemplate ID="tpltSatisfactory">
            <Template>
                <input type="checkbox" id="chkA2<%# (Container.RecordIndex) %>" name="chkAC2" style="width: 17px;
                    height: 17px;" value="<%# (Container.RecordIndex)%>" onclick="AppoveCheckA(this)" /></Template>
        </cc1:GridTemplate>
        <cc1:GridTemplate ID="tpltGood">
            <Template>
                <input type="checkbox" id="chkA3<%# (Container.RecordIndex) %>" name="chkAC3" style="width: 17px;
                    height: 17px;" value="<%# (Container.RecordIndex)%>" onclick="AppoveCheckA(this)" /></Template>
        </cc1:GridTemplate>
        <cc1:GridTemplate ID="tpltEx1">
            <Template>
                <input type="checkbox" id="chkA4<%# (Container.RecordIndex) %>" name="chkAC4" style="width: 17px;
                    height: 17px;" value="<%# (Container.RecordIndex)%>" onclick="AppoveCheckA(this)" /></Template>
        </cc1:GridTemplate>
    </Templates>
</cc1:Grid>

score 1 · Accepted Answer · edited May 23 '17 at 12:15

Well, you didn't say a word that you are using OBOUT ASP.NET Grid and not a default grid control. In this case it's important. However I manually recreated your example and this is how I made it work.

Firstly I changed your Grid code to use server controls for checkboxes:

<cc1:Grid ID="GrdWorkingCompany" runat="server" EnableTypeValidation="true" CallbackMode="true" Serialize="true"
    ShowFooter="false" AutoGenerateColumns="false" AllowAddingRecords="true" AllowSorting="false"
    Width="100%" FolderStyle="~/Styles/Grid/style_12" PageSize="18">
    <Columns>
        <cc1:Column ID="Sr_No" ReadOnly="true" DataField="SrNo" HeaderText="Sr.No." Width="50px">
        </cc1:Column>
        <cc1:Column ID="Points" ReadOnly="true" DataField="Points" HeaderText="Points" runat="server" Width="300px">
        </cc1:Column>
        <cc1:Column ID="chkPoor" ReadOnly="true" DataField="Rating1" HeaderText="Poor" Width="110px" TemplateId="tpltPoor">
        </cc1:Column>
        <cc1:Column ID="chkSatisfactory" DataField="Rating2" HeaderText="Satisfactory" ReadOnly="true"
            Width="110px" TemplateId="tpltSatisfactory">
        </cc1:Column>
        <cc1:Column ID="chkGood" ReadOnly="true" HeaderText="Good" DataField="Rating3" Width="110px" TemplateId="tpltGood">
        </cc1:Column>
        <cc1:Column ID="chkExcellent" HeaderText="Excellent" DataField="Rating4" Width="110px" ReadOnly="true"
            TemplateId="tpltEx1">
        </cc1:Column>
    </Columns>
    <TemplateSettings GroupHeaderTemplateId="GroupTemplate" />
    <Templates>
        <cc1:GridTemplate runat="server" ID="GridTemplate2">
            <Template>
                <%# Container.Column.HeaderText %>
            : <i>
                <%# Container.Value %></i> (<%# Container.Group.PageRecordsCount %><%# Container.Group.PageRecordsCount > 1 ? "records" : "record" %>)
            </Template>
        </cc1:GridTemplate>
    </Templates>
    <Templates>
        <cc1:GridTemplate ID="tpltPoor">
            <Template>
                <input type="checkbox" id="chkA1" name="chkAC1" style="width: 17px; height: 17px;"
                    value="<%# (Container.RecordIndex)%>" onclick="AppoveCheckA(this)" runat="server"/>
            </Template>
        </cc1:GridTemplate>
        <cc1:GridTemplate ID="tpltSatisfactory">
            <Template>
                <input type="checkbox" id="chkA2" name="chkAC2" style="width: 17px; height: 17px;"
                    value="<%# (Container.RecordIndex)%>" onclick="AppoveCheckA(this)" runat="server"/>
            </Template>
        </cc1:GridTemplate>
        <cc1:GridTemplate ID="tpltGood">
            <Template>
                <input type="checkbox" id="chkA3" name="chkAC3" style="width: 17px; height: 17px;"
                    value="<%# (Container.RecordIndex)%>" onclick="AppoveCheckA(this)" runat="server"/>
            </Template>
        </cc1:GridTemplate>
        <cc1:GridTemplate ID="tpltEx1">
            <Template>
                <input type="checkbox" id="chkA4" name="chkAC4" style="width: 17px; height: 17px;"
                    value="<%# (Container.RecordIndex)%>" onclick="AppoveCheckA(this)" runat="server"/>
            </Template>
        </cc1:GridTemplate>
    </Templates>
</cc1:Grid>

You don't need to worry about duplicate Id because ASP.NET will generate appropriate Ids on client side. It's necessary to user server controls for checkboxes because if you use generic html tags it will create DataBoundLiteralCOntrol for each checkbox and its inconvenient to change their code in code behind (they are treated as static text). If we use server control we can access their attributes in code behind - in that case HtmlInputCheckBox will be created for each checkbox.

Then I iterate each row and look for checkbox control:

private void GrdWorkingCompany_RowDataBound(object sender, Obout.Grid.GridRowEventArgs e)
    {
        foreach (Obout.Grid.Column column in GrdWorkingCompany.Columns)
        {
            if (!string.IsNullOrEmpty(column.TemplateId))
            {
                var cell = e.Row.Cells[column.Index] as Obout.Grid.GridDataControlFieldCell;
                var checkBoxControls = cell.FindControlsByType(typeof(HtmlInputCheckBox));
                if (checkBoxControls.Count > 0)
                {
                    var checkbox = checkBoxControls[0] as HtmlInputCheckBox;
                    checkbox.ClientIDMode = ClientIDMode.Static;
                    checkbox.ID = checkbox.ID + e.Row.RowIndex;
                    checkbox.Attributes.Add("disabled", "true");
                }
            }
        }
    }

I only check for cells in column that have TemplateId defined because FindControlsByType will throw error if it not find any control. So I assume that every template column have at least one checkbox. If you need more flexible approach you could define your own function similar to FindControlsByType - there are examples on StackOverflow for that kind of functions (e.g. Get all controls of a specific type or Find all child controls of specific type using Enumerable.OfType<T>() or LINQ). After you find the right control you can add custom attributes.

The last step is to hoop up to the event called when row gets bounded. To do that I used Page_Load event:

protected void Page_Load(object sender, EventArgs e)
{
    GrdWorkingCompany.RowDataBound += GrdWorkingCompany_RowDataBound;

    if (!IsPostBack)
    {
        GrdWorkingCompany.DataSource = new List<Test>() { new Test(), new Test() };
        GrdWorkingCompany.DataBind();
    }

}

My test class:

public class Test
{
    public string SrNo { get; set; }
    public string Points { get; set; }
    public string Rating1 { get; set; }
    public string Rating2 { get; set; }
    public string Rating3 { get; set; }
    public string Rating4 { get; set; }
}

Update: After a conversation with the @coder he told me that ids of the checkboxes need to be exacly as before my change to server controls. In order to do this I below added code to GrdWorkingCompany_RowDataBound method:

checkbox.ClientIDMode = ClientIDMode.Static;
checkbox.ID = checkbox.ID + e.Row.RowIndex;

With this in place ids of the checkboxes will remain the same as if the control was client side.

Thanks lesmian for the answer, but it is not working. But ur answer seems to be almost near to get resolved. One thing while debugging i got `cell` as `""` — Nad, Mar 08 '16 at 11:50
@coder Be sure that you attach GrdWorkingCompany.RowDataBound += GrdWorkingCompany_RowDataBound; before you databind to grid control. You say that you get null asa cell value in this row: var cell = e.Row.Cells[column.Index]? — Lesmian, Mar 08 '16 at 12:27
yes it comes as null. but i get the `TemplateId` in the loop — Nad, Mar 08 '16 at 12:28
i tried from this link too, https://www.obout.com/grid/KnowledgeBase.aspx?id=1008 but it didnt worked. any help on this ?. — Nad, Mar 08 '16 at 12:30
@coder look at my updated Page_Load event. In order to make it work I attach RowDataBound before GrdWorkingCompany.DataBind(); Are you doing it in the same order? — Lesmian, Mar 08 '16 at 12:32
@coder Test is just my test class containing data for the grid. You can use your own class. — Lesmian, Mar 08 '16 at 12:35
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/105688/discussion-between-lesmian-and-coder). — Lesmian, Mar 08 '16 at 12:36
hi @coder. Yes, I got the id to work as you want. Just add checkbox.ClientIDMode = ClientIDMode.Static; checkbox.ID = checkbox.ID + e.Row.RowIndex; as in my updated answer. — Lesmian, Mar 11 '16 at 10:04

jomsk1e · Answer 2 · 2016-03-07T10:16:34.757

Code not tested but hopefully helps you.

You can change your checkboxes and make these asp:CheckBox so that you can disable it in your code behind, something like this:

Handle OnRowDataBound Event to your GridView

<cc1:Grid ID="GrdWorkingCompany" runat="server"  EnableTypeValidation="true" CallbackMode="true"
    ShowFooter="false" AutoGenerateColumns="false" AllowAddingRecords="true" AllowSorting="false"
    Width="100%" FolderStyle="~/Styles/Grid/style_12" PageSize="18" OnRowDataBound="GrdWorkingCompany_RowDataBound">

<Template>
    <asp:CheckBox ID="cbTest" runat="server" />
</Template>

In your code behind, you should enable or disable your checkbox like this:

protected void GrdWorkingCompany_RowDataBound(object sender, GridViewRowEventArgs e)
{
    CheckBox chkbox = (CheckBox)e.Row.FindControl("cbTest");
    chekbox.Enable = false; 
}

Method 2, you can create a jquery function that will be call in your code behind, something like this:

<script type="text/javascript" src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
    function DisableAllCheckBox() {
        $('#<%=GrdWorkingCompany.ClientID %>').find("input:checkbox").each(function () {
            $(this).attr("disabled", true);
        });
    }
</script>

And call the function in your code behind:

protected void Page_Load(object sender, EventArgs e)
{ 
    if (Request.QueryString["userid"] != null && Request.QueryString["userid"] != "")
    {
        Hid_userid.Value = Request.QueryString["userid"];
        Hid_HR.Value = "Y";
        FundiableEnable();

        //DisableFormControls(Form.Controls);
        Page.ClientScript.RegisterStartupScript(this.GetType(),"TEST", "DisableAllCheckBox()",true);
    }
}

i tried the second one, but it is also not working. getting `this.attr("disabled", true);` as undefined — Nad, Mar 07 '16 at 08:44
are you sure your jquery is referenced correctly? Please see my edit for the jquery src. — jomsk1e, Mar 07 '16 at 10:17
yes, the jquery is referenced properly. but it still not taking it — Nad, Mar 07 '16 at 10:27

score -1 · Answer 3 · answered Mar 07 '16 at 13:50

-1

100% working Simple just bind your gride view method after page load event like this

protected void Page_LoadComplete(object sender, EventArgs e)
{
     DisableFormControls(Form.Controls);
}

remove this method from page load and use above event

answered Mar 07 '16 at 13:50

Pragnesh

77
2

score -1 · Answer 4 · answered Mar 08 '16 at 10:37

Sorry if there are any syntax errors.

function DisableControls() {
        //Get target base & child control.
        var TargetBaseControl =
        document.getElementById('<%= this.grid.ClientID %>');
        var TargetChildControl = "chkA";

        //Get all the control of the type INPUT in the base control.
        var Inputs = TargetBaseControl.getElementsByTagName("input");

        //disable or enable all the checkBoxes in side the Grid.
        for (var n = 0; n < Inputs.length; ++n)
            if (Inputs[n].type == 'checkbox' && Inputs[n].id.indexOf(TargetChildControl, 0) >= 0)
                Inputs[n].disabled= false; //i am not sure if this is the correct syntax for disabling
    }

I cant see the point in getting an upvote, then a downvote. This is a working code which I have in one my projects. The only difference is instead of disabling the checkboxes, I set checked = true. A reason for the downvote would be fair. :/ — Shanid, Mar 11 '16 at 10:27

Disabling of checkBoxes inside gridview on Page_Load

4 Answers4

Linked