HTML controls in GridView Item templates

In my web page I have a gridview control with 2 template column. In each of this template columns I have 2 radio buttons. When the user selects Yes from the first columns radio button, I want the radio buttons in the second column to be disabled.

I tried to do this with server side and was not successfull. Now I am trying to do this with HTML radion controls. I have declared the radio button control the following way inside the Itemtemplae :

Template1
<input id="rdoQ1_Yes" type="radio" name="rdoQ1"/>Yes
<input id="rdoQ1_No" type="radio" name="rdoQ1" onclick="DisableControls()" />No

Template 2
<input id="rdoQ2" type="radio" name="rdoQ2"/>Yes
<input id="rdoQ2" type="radio" name="rdoQ2" />No

My vbscript code :

Sub DisableControls()
    document.getElementById("rdoQ2_6Month").checked = false
    document.getElementById("rdoQ2_6Month").disabled = true
End Sub

I have couple of problems with the html cpontrols.

1. If my code loads more than one row, the name attribute of the radio buttons remain the same throughout the grid.
Once I select an option from the first row, and click an option in the second row, the selection is first row is gone.

2. My vbscript always disables the first rows control in template2

Could any one suggest a way to fix this?
Any help is greatly appreciated.


 

 

0
coolvaas1
5/4/2009 5:47:23 PM
asp.net.client-side 24353 articles. 1 followers. Follow

3 Replies
807 Views

Similar Articles

[PageSpeed] 2

IMO using server controls would be more appropriate.

If you use server controls, you will get diffrent client ID for each radio button based on which row it belongs to. You can register these client IDs from server-side similar to:

this.Page.ClientScript.RegisterStartupScript(this.GetType(), "rdoQ1YesCID", string.Format("var rdoQ1YesCID = '{0}';", rdoQ1Yes.ClientID), true);

This can be done in RowDataBound event and !IsPostBack condition.

Then on required radio button click you can write a javascript function. If you pass this to that function you will receive which radio button triggered it. Based on row number identification in that controls ID you can then find other radio buttons at the same level (row) and manipulate them.

0
mthakershi
5/4/2009 6:08:28 PM

Do it this way....

In the TemplateField, use two RadioButtons like this....

           <asp:TemplateField>
                    <ItemTemplate>
                        <asp:RadioButton ID="RadioButton1" runat="server" Text="Yes" GroupName="One" />
                        <asp:RadioButton ID="RadioButton2" runat="server" Text="No" GroupName="One" />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:RadioButton ID="rd2_second" runat="server" Text="Test1" GroupName="Two" />
                        <asp:RadioButton ID="rd3_second" runat="server" Text="Test2" GroupName="Two" />
                    </ItemTemplate>
                </asp:TemplateField>

In the RowDataBound event, write like this....

        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            RadioButton rd1 = (RadioButton)e.Row.FindControl("RadioButton1");
            rd1.Attributes.Add("onclick", "DisableControls(this, '" + e.Row.RowIndex + "', true);");

            RadioButton rd2 = (RadioButton)e.Row.FindControl("RadioButton2");
            rd2.Attributes.Add("onclick", "DisableControls(this, '" + e.Row.RowIndex + "', false);");
        }

 And then, here's your javascript function.....

 function DisableControls(obj, index, check)
    {
        var inputs = document.getElementById('<%= GridView1.ClientID %>').rows[(+index)+1].getElementsByTagName("input");        
        for(var i=0; i<inputs.length; i++)
        {
            if(inputs[i].type == 'radio' && obj.checked && obj.name != inputs[i].name && check)
            {
                inputs[i].disabled = true;
            }
            else
            {
                inputs[i].disabled = false;   
            }
        }
    }

 

Hope it helps. Mark as Answer if it does.


KAMMIE
Don't forget to Mark as Answer on the post that helped you. It encourages them to share their knowledge, and it helps others to easily identify the solution.
0
kammie
5/4/2009 6:29:35 PM

Do it this way....

In the TemplateField, use two RadioButtons like this....

           <asp:TemplateField>
                    <ItemTemplate>
                        <asp:RadioButton ID="RadioButton1" runat="server" Text="Yes" GroupName="One" />
                        <asp:RadioButton ID="RadioButton2" runat="server" Text="No" GroupName="One" />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:RadioButton ID="rd2_second" runat="server" Text="Test1" GroupName="Two" />
                        <asp:RadioButton ID="rd3_second" runat="server" Text="Test2" GroupName="Two" />
                    </ItemTemplate>
                </asp:TemplateField>

In the RowDataBound event, write like this....

        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            RadioButton rd1 = (RadioButton)e.Row.FindControl("RadioButton1");
            rd1.Attributes.Add("onclick", "DisableControls(this, '" + e.Row.RowIndex + "', true);");

            RadioButton rd2 = (RadioButton)e.Row.FindControl("RadioButton2");
            rd2.Attributes.Add("onclick", "DisableControls(this, '" + e.Row.RowIndex + "', false);");
        }

 And then, here's your javascript function.....

 function DisableControls(obj, index, check)
    {
        var inputs = document.getElementById('<%= GridView1.ClientID %>').rows[(+index)+1].getElementsByTagName("input");        
        for(var i=0; i<inputs.length; i++)
        {
            if(inputs[i].type == 'radio' && obj.checked && obj.name != inputs[i].name && check)
            {
                inputs[i].disabled = true;
            }
            else
            {
                inputs[i].disabled = false;   
            }
        }
    }

 

Hope it helps. Mark as Answer if it does.


KAMMIE
Don't forget to Mark as Answer on the post that helped you. It encourages them to share their knowledge, and it helps others to easily identify the solution.
0
kammie
5/4/2009 6:29:52 PM
Reply:

Web resources about - HTML controls in GridView Item templates - asp.net.client-side

Template - Wikipedia, the free encyclopedia
Text is available under the Creative Commons Attribution-ShareAlike License ;additional terms may apply. By using this site, you agree to the ...

Facebook page template & tips for 2014
As Facebook page admins get started with 2014, the social marketing experts at ShortStack created a detailed template , including image sizes, ...

Frame Artist Pro - Best Photo Collage Editor, Stitch Your Photos with Pic Frame Templates & Filter Effect ...
Get Frame Artist Pro - Best Photo Collage Editor, Stitch Your Photos with Pic Frame Templates & Filter Effect & Frames on the App Store. See ...

Paper wireframe templates - Flickr - Photo Sharing!
jasonrobb.com/v2/i/Wireframe-templates-JasonRobb.zip jasonrobb.com

United Airlines accidentally sends letter template to unhappy passenger
A US air passenger may have received what is quite possibly the world’s least sincere apology letter.

TV Templates - Transcripts
Lorem ipsum dolor sit amet, aihiad adaph dpas, osaf das. Oi asdfpo ijafj ai.

Mockup Apple Watch apps and compare screen sizes with these official bezel templates
... for developers, readers interested in Apple Watch can also use the images to compare the overall physical size of the two sizes. The templates ...

Paper by FiftyThree makes starting new projects easier with templates
... FiftyThree has just received an update that significantly improves various aspects of its interface and functionality. Get started with templates ...

Windows 10 patch messing with your Office 2016 templates? Here's how you can get them back
... 10 patch has had some Word 2016 users cringing in despair. The patch, titled Cumulative Update KB3124200 , is causing the Word 2016 template ...

Templates, Insights and Dictation in Google Docs
Google's standalone web apps for Docs , Sheets and Slides now show a list of templates you can choose to quickly create a document, spreadsheet ...

Resources last updated: 1/15/2016 5:42:41 AM