Problem to group radio button across gridview rows

Why?
In general no one can easily group or make a single selection from radio button list inside gridview rows. There are a lot of way to make a single or unique selection from list. Here i want to share how i can address this problem in the most easiest way. Googling the problem most of the cases i saw the grouping in horizontal way. Thats why i tried to group the radio buttons in vertical manner. Let i have a requirement like below:

Now try to resolve this issue:
At first i need to add a gridview in my page ok? So add a gridview in the page. For bind columns i need to add two bind columns & for single choice i need to add 3 template columns. Within template columns i need to add radio button. My grid view backend code looks like:

<asp:GridView runat="server" ID="gvEdit" DataKeyNames="ID" AutoGenerateColumns="false" > <columns>
<asp:boundfield datafield="Code" headertext="Supplier code" horizontalalign="Left" backcolor="graytext">
<asp:boundfield datafield="Name" headertext="Supplier name" horizontalalign="Left" backcolor="graytext">
<asp:templatefield headertext="High">
<itemtemplate>
<asp:radiobutton runat="server" id="chkHigh" onclick="javascript:GridSelectAllColumn(this, 'chkHigh');">
<itemstyle backcolor="#DCE8FA" horizontalalign="Center"> <headerstyle horizontalalign="Center">
<asp:templatefield headertext="Medium"> <itemtemplate>

</itemtemplate>
<itemstyle backcolor="#EDF2F9" horizontalalign="Center">
<headerstyle horizontalalign="Center">
<asp:templatefield headertext="Low">
<itemtemplate>
<asp:radiobutton runat="server" id="chkLow" onclick="javascript:GridSelectAllColumn(this, 'chkLow');">
<itemstyle backcolor="#DCE8FA" horizontalalign="Center"> <headerstyle horizontalalign="Center">
</columns>
</asp:GridView>

Now i think how i can provide single selection within vertical column without post back the page to the page to the server. So i have an option javascript. Lets try to write the javascript function:

<script type="text/javascript">
function GridSelectAllColumn(objType, chkName)
{
var oItem = objType.children;
var theBox= (objType.type=="radio") ?
objType : objType.children.item[0];
xState=theBox.checked;
elm=theBox.form.elements;
if(xState)
{
for(i=0;i -1)
{elm[i].checked=!xState;
}
}
}
}
</script>

Ok now our javascript function is ready for action. So whats next. I need to bind data from database to my gridview. For simplicity here i am using a datatable to bind the data. I wrote below code in my Page_Load method:

if (!IsPostBack)
{
DataTable dtSupplier = new DataTable("Supplier");
dtSupplier.Columns.Add(new DataColumn("ID",System.Type.GetType("System.UInt64")));
dtSupplier.Columns.Add(new DataColumn("Code"));
dtSupplier.Columns.Add(new DataColumn("Name"));
dtSupplier.Rows.Add(1, "st0001", "S.R. Steel");
dtSupplier.Rows.Add(1, "ir0039", "Shadesh builders");
dtSupplier.Rows.Add(1, "cr0042", "Orchard confec.");
dtSupplier.Rows.Add(1, "er0078", "Windblow");
dtSupplier.Rows.Add(1, "bd0301", "Rahimkarim");
gvEdit.DataSource = dtSupplier;
gvEdit.DataBind();
}

Now i run the page & i got exactly what i want "The single & unique selection or choice". If anyone closely observe my javascript method then you may find a tricks regarding radio object id. Isn't it??

Don't worry use unique radio button id, will resolve this problem :)

Posted in: .Net,Sample Code,traning