Thursday, February 19, 2009

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

7 comments:

Anonymous said...

Its giving error called ";" expected.

Anonymous said...

ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg

Anonymous said...

NOT WORKING AS IT IS EXPLAINED.PLEASE TEST IT FIRST AND THEN POST.

Shawpnendu said...

Ohh i have checked the code. Basically due to missing someline in this post created the problem. Now the code is perfect.

STANLY said...

your code is working fine. but one error is there when i was select the second column radio button firstly and then click first column click radio button it will be deactivate the second column. First we select first column button and select second column button means no problem. Please check it

Shawpnendu said...

Sorry Stanly i checked this code and found ok. There is no reason for active or inactive, nothing in my code. Most probably you are trying with other javascript wrapper objects with CSS.

I run the page. Then click on second column radio button. After that i click on first column radio button & found everything ok.

Anonymous said...

Thank you very much. This has shaved a good number of hours off my work time. I would have preferred some means to do this without iteration for really long lists, but this is likely the best there is in simplicity. Thanks again.

Want to say something?
I WOULD BE DELIGHTED TO HEAR FROM YOU

Want To Search More?
Google Search on Internet
Subscribe RSS Subscribe RSS
Article Categories
  • Asp.net
  • Gridview
  • Javascript
  • AJAX
  • Sql server
  • XML
  • CSS
  • Free Web Site Templates
  • Free Desktop Wallpapers
  • TopOfBlogs
     
    Free ASP.NET articles,C#.NET,VB.NET tutorials and Examples,Ajax,SQL Server,Javascript,Jquery,XML,GridView Articles and code examples -- by Shawpnendu Bikash