Sometime ago I wrote an article in which I discussed how to get the selected value of a radio button control which resides inside the GridView control. You can read the article here. In this article I will demonstrate how to maintain the state of the selected HTML radio button across postbacks.

Introduction:

 

Sometime ago I wrote an article in which I discussed how to get the selected value of a radio button control which resides inside the GridView control. You can read the article here. In this article I will demonstrate how to maintain the state of the selected HTML radio button across postbacks.

 

Populating the GridView Control:

 

The first task is to populate the GridView control. Take a look at the code below:

 

private void BindData()

    {

        string connectionString = "Server=localhost;Database=Northwind;Trusted_Connection=true";

        SqlConnection myConnection = new SqlConnection(connectionString);

        SqlDataAdapter ad = new SqlDataAdapter("SELECT CategoryID, CategoryName FROM Categories", myConnection);

 

        DataSet ds = new DataSet();

        ad.Fill(ds);

 

        gvCategories.DataSource = ds;

        gvCategories.DataBind();      

 

    } 

 

The HTML source of the GridView control is given below:

 

<asp:GridView ID="gvCategories" runat="server" >

   

    <Columns>

   

    <asp:TemplateField>

    <ItemTemplate>

    <asp:Literal ID="litCategoryID" runat="server" />

    </ItemTemplate>

    </asp:TemplateField>

   

       

    <asp:TemplateField>

    <ItemTemplate>

    <asp:Literal ID="litCategoryName" runat="server" />

    </ItemTemplate>

    </asp:TemplateField>

   

    <asp:TemplateField>

    <ItemTemplate>

    <%# CreateRadioButton() %>

    </ItemTemplate>

    </asp:TemplateField>

   

    </Columns>

   

   

    </asp:GridView>  

 

You might notice that there are no radio buttons in the GridView control. This is because the radio buttons are dynamically injected when the GridView row is bind to the page. Let’s check out the CreateRadioButton method.

 

Maintaining Radio Button State Across Postbacks:

 

The CreateRadioButton method is responsible for dynamically injecting the radio buttons. Let's check out the method below: 

 

protected int index = 0;

protected string selectedValue = String.Empty;

 

protected string CreateRadioButton()

    {

        selectedValue = Request.Form["myRadioButton"] as String;

        string radioButton = String.Empty;

 

        if (!String.IsNullOrEmpty(selectedValue))

        {

            if (Int32.Parse(selectedValue) == index)

            {

                radioButton = "<input type='radio'  name='myRadioButton' id='myRadioButton' checked='checked' value='" + index + "'/>";

                index++;

                return radioButton;

            }

        }

               

        radioButton = "<input type='radio'  name='myRadioButton' id='myRadioButton' value='" + index + "'/>";                   

       

        index++;

        return radioButton;

    }

 

CreateRadioButton is fired the first time when the GridView is loaded. At that point none of the radio buttons are checked hence we return a simple HTML radio button. The only thing that distinguishes one radio button from the other is the value. I am generating sequential values for the radio buttons but you are free to use any values you want.

 

Now, let’s suppose that postback happens. The GridView is bind to the page and the CreateRadioButton method is called for each row. This time we have a value for the selected radio button which is captured in the Request.Form collection. We check that if the selected value belongs to any radio button value. Once, we find the radio button value that matches with the selected value we inject a radio button into the GridView row with its checked attribute set to “checked”. This action will cause the HTML radio button to be marked as checked and hence maintaining its state across postbacks.

 

I hope you liked this article, happy coding!