Problem to group radio button across gridview rows

Please visit my new Web Site https://coderstechzone.com

Why?
In general no one can easily group or make a single selection from radio button list inside gridview rows horizontally or grouping radio button within a Gridview row. 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 found wrong javascript. Thats why i have decided to share with you my work around. Also i have showed another way of grouping vertically Radio buttons in a Gridview. To read Vertical grouping CLICK HERE. Here in this post i will try to group the radio buttons in Horizontal way using core javascript. It will also work in master page. Let say 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">
        <ItemStyle HorizontalAlign="Center" />
        <ItemTemplate>
            <asp:RadioButton runat="server" id="chkBar" onclick="javascript:GridSelectAllColumn(this, 'chkHigh');"/>
        </itemtemplate>
    </asp:TemplateField>

    <asp:templatefield headertext="Medium">
    <ItemStyle HorizontalAlign="Center" /> 
        <itemtemplate>
            <asp:radiobutton runat="server" id="chkLine" onclick="javascript:GridSelectAllColumn(this, 'chkMid');"/>
        </itemtemplate>
    </asp:templatefield>
    
    <asp:templatefield headertext="Low">
    <ItemStyle HorizontalAlign="Center" />
        <itemtemplate>
        <asp:radiobutton runat="server" id="chkStacked" onclick="javascript:GridSelectAllColumn(this, 'chkLow');"/>
        </itemtemplate>
    </asp:templatefield>
</columns>
</asp:GridView>

Now i think how i can provide single selection within horizontal 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:

function GridSelectAllColumn(objType, chkName)
{
    var oItem = objType.children;
    var theBox=(objType.type=="radio")?objType:objType.children.item[0];
    var strPart=theBox.id.split("_");
    xState=theBox.checked;
    elm=theBox.form.elements;
    for(i=0;i<elm.length;i++)
        if(elm[i].type=="radio" && elm[i].id!=theBox.id && elm[i].id.indexOf(strPart[3])>-1)
            elm[i].checked=!xState;
}

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 :)