How do I implement radio buttons in a grid view? I used asp:radiob button but the problem is that it selects all the radio buttons in the list. How do I select only one radio button at a time?
You can add the radio buttons in GridView using TemplateField.
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:RadioButton ID="rdoYes" runat="server" Text="Yes" Checked="true" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
You can select individual radio button if you added in GridView like above.
Make all the radio buttons part of a group by defing a GroupName for them.
Here is an example:
<html>
<body>
<form runat="server">
Select your favorite color:
<br />
<asp:RadioButton id="red" Text="Red" Checked="True"
GroupName="colors" runat="server"/>
<br />
<asp:RadioButton id="green" Text="Green"
GroupName="colors" runat="server"/>
<br />
<asp:RadioButton id="blue" Text="Blue"
GroupName="colors" runat="server"/>
<br />
<asp:Button text="Submit" OnClick="submit" runat="server"/>
<p><asp:Label id="Label1" runat="server"/></p>
</form>
</body>
</html>
If your going to use a grid view and u want to put a radio button on a TemplateField to act as a pointer to your selection just use this code on the rbSelector_CheckedChanged()...
protected void rbSelector_CheckedChanged(object sender, System.EventArgs e)
{
//Clear the existing selected row
foreach (GridViewRow oldrow in GridView1.Rows)
{
((RadioButton)oldrow.FindControl("rbSelector")).Checked = false;
}
//Set the new selected row
RadioButton rb = (RadioButton)sender;
GridViewRow row = (GridViewRow)rb.NamingContainer;
((RadioButton)row.FindControl("rbSelector")).Checked = true;
}
If theres any problem just let me know, ok? hope this code can help newbies out there like me.
Amit Patel
Use a TemplateField with a standard HTML control then on the codebehind use Request.Form.
ASPX:
<asp:TemplateField>
<ItemTemplate>
<input type="radio" name="group1" value='<%# Eval("YourValue") %>' />
</ItemTemplate>
</asp:TemplateField>
Codebehind:
string radioValue = Request.Form["group1"].ToString();
Related
I have the following ListView that contains Input radio buttons:
<asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource_BGlist">
<ItemTemplate>
<input id="Radio1" name="BG_name" type="radio" value="<%# Eval("BG_fileName") % >"/>
<asp:Label ID="BG_fileNameLabel" runat="server" Text='<%# Eval("BG_fileName") %>' />
</ItemTemplate>
</asp:ListView>
<asp:SqlDataSource ID="SqlDataSource_BGlist" runat="server" ConnectionString="Data Source=tcp:cg26trmnla.database.windows.net,1433;Initial Catalog=cookniche;Integrated Security=False;User ID=PublicSQLcookniche#cg26trmnla;Password=Abounakhle80+;Connect Timeout=30;Encrypt=True" ProviderName="System.Data.SqlClient" SelectCommand="SELECT [BG_fileName] FROM [BackgroundImages]"></asp:SqlDataSource>
I want to check which radio button is checked from code behind. I'm using the following code but it's obviously not correct.
foreach (ListViewItem itemRow in this.ListView1.Items)
{
RadioButton radioBtn = new RadioButton();
radioBtn = (RadioButton)itemRow.FindControl("Radio1");
if (radioBtn.Checked)
{
//do stuff
}
}
You are doing almost right. Only few minor things needs to be changed in your code.
Add runat="Server" in your radio button. Because if it will not runat="server" then you will not find radiobutton at code behind. have a look at below HTML code:
<asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource_BGlist">
<ItemTemplate>
<input id="Radio1" runat="server" name="BG_name" type="radio" value="<%# Eval("BG_fileName") %>"/>
<asp:Label ID="BG_fileNameLabel" runat="server" Text='<%# Eval("BG_fileName") %>' />
</ItemTemplate>
</asp:ListView>
And in your code behind you are casting to RadioButton this RadioButton indicates server side control of radio button. Instead of that you should use HtmlInputRadioButton as shown below:
foreach (ListViewItem itemRow in this.ListView1.Items)
{
var radioBtn = (HtmlInputRadioButton)itemRow.FindControl("Radio1");
if (radioBtn.Checked)
{
// Do Stuff
}
}
To Apply Grouping with RadioButton
<asp:ListView ID="ListView1" runat="server">
<ItemTemplate>
<input runat="server" name="BG_name" type="radio" ID="radio1" value='<%# Eval("Id") %>' ClientIDMode="Static" class="radioBGName" />
<asp:Label ID="BG_fileNameLabel" runat="server" Text='<%# Eval("Title") %>' />
</ItemTemplate>
</asp:ListView>
<script type="text/javascript">
$('.radioBGName').click(function () {
var controlId = $(this).attr('name');
$('.radioBGName').each(function () {
if (controlId != $(this).attr('name')) {
$(this).removeAttr('checked');
}
});
});
</script>
protected void ListView1_ItemDataBound(object sender, ListViewItemEventArgs e)
{
if (e.Item.ItemType == ListViewItemType.DataItem)
{
RadioButton c1 = (RadioButton)e.Item.FindControl("Radio1");
if (radioBtn.Checked)
{
//do stuff
}
}
}
UPDATE
in Page_Load you need to know the row index and retrieve the control like this
RadioButton radio= this.ListView1.Items[<row_index>].FindControl("Radio1") as RadioButton
I need to show an AjaxControlToolkit ModalPopupExtender control, when user checks/unchecks a CheckBox control that is inside a GridView as a TemplateField.
-- Updated on 24/05/2013
See final solution here...
We finally solved the problem. So I decided to post here the complete solution and the final code.
The GridView
<asp:GridView ID="gvDocs" runat="server" CssClass="grid" AutoGenerateColumns="false" AllowPaging="true" AllowSorting="true"
OnPageIndexChanging="gvDocs_PageIndexChanging"
OnSorting="gvDocs_Sorting"
OnRowDataBound="gvDocs_RowDataBound">
<AlternatingRowStyle CssClass="grid_row_alternate"/>
<HeaderStyle CssClass="grid_header" />
<RowStyle CssClass="grid_row" />
<SelectedRowStyle CssClass="grid_row_selected" />
<Columns>
<asp:BoundField DataField="ID"/>
<asp:BoundField DataField="COLUMN_A" SortExpression="COLUMN_A" HeaderText="COLUMN_A" />
<asp:BoundField DataField="COLUMN_B" SortExpression="COLUMN_B" HeaderText="COLUMN_B" />
<!-- TemplateField with the CheckBox and the ModalPopupExtender controls -->
<asp:TemplateField HeaderText="Check" SortExpression="CHECK_COLUMN">
<ItemStyle HorizontalAlign="Center"/>
<ItemTemplate>
<asp:CheckBox ID="CheckBox1" runat="server"/>
<!-- Modal Popup block -->
<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" BackgroundCssClass="modalBackground" DropShadow="True" TargetControlID="CheckBox1" PopupControlID="panModalPopup" CancelControlID="CancelButton"/>
<asp:Panel ID="panModalPopup" runat="server" style="display:none; text-align:left; width:400px; background-color:White; border-width:2px; border-color:#40A040; border-style:solid; padding:10px;">
Are you sure?
<br /><br />
<div style="text-align:right;">
<asp:Button ID="ConfirmButton" runat="server" Text="Confirm" OnClick="ConfirmButton_Click" CommandArgument='<%# DataBinder.Eval(Container.DataItem, "ID") %>'/>
<asp:Button ID="CancelButton" runat="server" Text="Cancel"/>
</div>
</asp:Panel>
</ItemTemplate>
</asp:TemplateField>
</Columns>
The code behind
protected void gvDocs_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType.Equals(DataControlRowType.DataRow))
{
// Setting the CheckBox check reading the state from DB
CheckBox CheckBox1 = (CheckBox)e.Row.FindControl("CheckBox1");
CheckBox1.Checked = DataBinder.Eval(e.Row.DataItem, "CHECK_COLUMN").ToString() == "Y"; // Or any other value that works like true/false
}
}
protected void ConfirmButton_Click(object sender, EventArgs e)
{
string id = ((Button)sender).CommandArgument; // Get the ID column value
// Update the CHECK_COLUMN value on the DB or do whatever you want with the ID...
BindData(); // Method that do the GridView DataBind after the changes applied to the DB
}
Some things to know
1) The ModalPopupExtender1 control is inside the GridView TemplateField because it needs to have access to the CheckBox1 and its click event. It's probably not the best solution ever, but it works and so it would not affect to much on performance if your GridView is not too complicated and if it is paged.
2) In order to catch the ConfirmButton Click event, you have to remove the OKControlID property from the ModalPopupExtender control settings.
-- END
-- Updated on 22/05/2013
Then I need the ID of the corresponding row to make an UPDATE on the DB.
-- END
This is the GridView
<asp:GridView ID="gvDocs" runat="server" CssClass="grid" AutoGenerateColumns="false" AllowPaging="true" AllowSorting="true"
OnPageIndexChanging="gvDocs_PageIndexChanging"
OnSorting="gvDocs_Sorting"
OnRowDataBound="gvDocs_RowDataBound">
<AlternatingRowStyle CssClass="grid_row_alternate"/>
<HeaderStyle CssClass="grid_header" />
<RowStyle CssClass="grid_row" />
<SelectedRowStyle CssClass="grid_row_selected" />
<Columns>
<asp:BoundField DataField="ID_DOCUMENTO" Visible="False"/>
<asp:BoundField DataField="NUM_PROT" SortExpression="NUM_PROT" HeaderText="N. Prot." />
<asp:BoundField DataField="DATE_PROT" SortExpression="DATE_PROT" HeaderText="Data Prot." />
... some other BoundFields ...
<asp:TemplateField HeaderText="Da archiviare" SortExpression="DA_ARCHIVIARE">
<ItemStyle HorizontalAlign="Center"/>
<ItemTemplate>
<asp:CheckBox ID="chkArchiviare" runat="server" AutoPostBack="True" OnCheckedChanged="chkArchiviare_CheckedChanged"/>
</ItemTemplate>
</asp:TemplateField>
</Columns>
And this is the ModalPopup block
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" DropShadow="True" TargetControlID="panModalPopup" PopupControlID="panModalPopup" OkControlID="btnConferma" CancelControlID="btnAnnulla" />
<asp:Panel ID="panModalPopup" runat="server" style="display:none; width:400px; background-color:White; border-width:2px; border-color:Black; border-style:solid; padding:20px;">
Are you sure?
<br /><br />
<div style="text-align:right;">
<asp:Button ID="btnConferma" runat="server" Text="Conferma" OnClick="btnConferma_Click"/>
<asp:Button ID="btnAnnulla" runat="server" Text="Annulla" OnClick="btnAnnulla_Click" />
</div>
</asp:Panel>
Now, I want to show the ModalPopup each time a checkbox is checked/unchecked and that popup have to show a confirmation message with 2 buttons: Confirm and Cancel.
Confirm have to do an update on the DB and then postback.
Cancel have only to hide the popup without postback.
I know that ModalPopupExtender listens to OnClick events. So, do I necessary need a Button, LinkButton, ImageButton, etc. or can I do what I want?
You are right, it listens to onclick events, but client-side ones, so, the target control of the extender can be anything you can click on, even a div or a label.
try to show/hide ModalPopupExtender1 from chkArchiviare_CheckedChanged event like this.
ModalPopupExtender1.show();
and
ModalPopupExtender1.hide();
take one Hidden button and make it as TargetControlID like this.
<asp:HiddenField ID="btnHiddenDtl1" runat="Server" />
<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" DropShadow="True" TargetControlID="btnHiddenDtl1" PopupControlID="panModalPopup" OkControlID="btnConferma" CancelControlID="btnAnnulla" />
you need not to call cancel button click event to hide ModalPopupExtender1.
You no need to include ModalPopup Extender inside your GridView. You can bind check box control in template field in GridView and use OnCheckedChanged property in it...So template would be like below
<asp:TemplateField HeaderText="Da archiviare" SortExpression="DA_ARCHIVIARE">
<ItemStyle HorizontalAlign="Center"/>
<ItemTemplate>
<asp:CheckBox ID="chkArchiviare" runat="server"
OnCheckedChanged="chkArchiviare_CheckedChanged"/>
</ItemTemplate>
</asp:TemplateField>
After this you have to call show function on chkArchiviare_CheckedChanged event...like this
ModalPopupExtender1.Show();
Here ModalPopupExtender1 is ID of you ModalPopupExtender control.
One more thing you have to remember use one button on .aspx page. And pass this button ID into ModalPopupExtender TargetControlID... Like this
<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" DropShadow="True"
TargetControlID="btnShowModalPopup" PopupControlID="panModalPopup"
OkControlID="btnConferma" CancelControlID="btnAnnulla" />
<asp:Panel ID="panModalPopup" runat="server" style="display:none; width:400px;
background-color:White; border-width:2px; border-color:Black; border-
style:solid; padding:20px;"> Are you sure?<br /><br />
<div style="text-align:right;">
<asp:Button ID="btnConferma" runat="server" Text="Conferma"
OnClick="btnConferma_Click"/>
<asp:Button ID="btnAnnulla" runat="server" Text="Annulla"
OnClick="btnAnnulla_Click" />
</div>
</asp:Panel>
Here Why Iam using this button?....There is no use of this button because we are using show() in codebehind...but if we are not pass button Id to ModapPopupExtender TargetControlId property. It will give you an error.
So using ModalPopupExtender in this way...you can use it with LinkButton, Label, Button. For more details with example, you can check the below link....
How to Use ModalPopup Extender into GridView
I hope this article will clear your all doubts....Enjoy and share this with others...Thanks!
I've created two radio buttons with the following code:
<telerik:RadButton ID="rbOption1" runat="server" Text="option 1" ToggleType="Radio"
GroupName="group1" ButtonType="ToggleButton" />
<br />
<telerik:RadButton ID="rbOption2" runat="server" ToggleType="Radio"
GroupName="group1" ButtonType="ToggleButton">
<ContentTemplate>
<asp:Label ID="lblChoose" runat="server" Text="choose" />
<asp:DropDownList ID="ddlChoose" runat="server" />
</ContentTemplate>
</telerik:RadButton>
I want the second radbutton to be rendered with a radio button just the the first radbutton. But instead the entire contents of the content template is being rendered as an html anchor and no radio button is being shown for the second radbutton. Is there a way to use the telerik radbutton to look like this mockup?
When the content of a RadButton is specified through the ContentTemplate inner property, the button control is automatically configured in a LinkButton mode.
The desired functionality can be achieved via two RadButtons, configured as radio buttons (ToggleType="Radio" ButtonType="ToggleButton"), and a DropDownList control that can be enabled only when one of the radio buttons is checked:
Page
<telerik:RadButton ID="rbOption1" runat="server" Text="option 1" ToggleType="Radio"
GroupName="group1" ButtonType="ToggleButton" />
<br />
<telerik:RadButton ID="rbOption2" runat="server" Text="choose" ToggleType="Radio"
GroupName="group1" ButtonType="ToggleButton" />
<asp:DropDownList ID="ddlChoose" runat="server" Enabled="false">
<asp:ListItem Text="Text" Value="Value"></asp:ListItem>
<asp:ListItem Text="Text" Value="Value"></asp:ListItem>
</asp:DropDownList>
<br />
Code-behind
protected void Page_Load(object sender, EventArgs e)
{
ddlChoose.Enabled = rbOption2.Checked;
}
I have an <asp:ComboBox> filled with <asp:CheckBoxes>. The Combobox is 200px wide. The Checkboxes are also 200px wide.
I can check the checkbox only if I click on 'box' or the checkbox text label. I want to be able to check the item even when I click anywhere on the row.
Is there any way to extend this area to the whole row?
update:
On the green area, everything is fine.
But on the red area when i click, checkbox is not checked and drop downlist goes up.
<telerik:RadComboBox runat="server" EnableTextSelection="false"
ID="rcb_Something"
Width="200px"
HighlightTemplatedItems="true"
AllowCustomText="true"
Text="Select Something"
MaxHeight="250px">
<ItemTemplate>
<telerik:RadBinaryImage ID="RadBinaryImage1" runat="server"
Width="24px"
Height="24px"
DataValue='<%# Eval("Something") %>'
ResizeMode="Fit" />
<asp:CheckBox ID="CheckBox1"
runat="server"
Text='<%# Eval("Something") %>'
ToolTip='<%# Eval("SomethingId") %>'
/>
</ItemTemplate>
Do as books say - add to every input field in HTML, a label tag with label.
<label for="male">Male</label> <input type="radio" name="sex" id="male" />
Clicking anywhere on label, will activate this input, same goes for input type=text
Ok, I find solution. I just disabled combobox background with following code.
JavaScript
function StopPropagation(e) {
//cancel bubbling
e.cancelBubble = true;
if (e.stopPropagation) {
e.stopPropagation();
}
}
aspx
<div onclick="StopPropagation(event)">
<asp:CheckBox ID="CheckBox1"
runat="server"
Text='<%# Eval("something") %>'
ToolTip='<%# Eval("somethingId") %>'
/>
</div>
If i have 55 checkboxes with different text 1,2,3,4 and so on ....and a textbox where it display how many no. of checkboxes checked ..... i want to multiply the multiple selected checkbox text with how many checkboxes are checked in other textbox .....
i want to do this using vb.net, asp.net
Like cdhowie i'm a little confused with your question, but if I understand well it's seems pretty simple.
You must put (eventually dynamically generated, it's the same) all you checkboxes in a container like a placeholder, and in your code behind to loop through them and test which of them or checked. If one is, you take the associated text, convert it in int, and add it to your total.
Here is a very little sample in c# :
<form id="form1" runat="server">
<div>
<asp:PlaceHolder ID="ph" runat="server">
<asp:CheckBox ID="cb" runat="server" Text="3"/> <asp:CheckBox ID="CheckBox1" runat="server" Text="3"/> <asp:CheckBox ID="CheckBox2" runat="server" Text="3"/> <asp:CheckBox ID="CheckBox3" runat="server" Text="3"/> <asp:CheckBox ID="CheckBox4" runat="server" Text="3"/> <asp:CheckBox ID="CheckBox5" runat="server" Text="3"/>
</asp:PlaceHolder>
<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
</div>
</form>
protected void Button1_Click(object sender, EventArgs e)
{
int n = 0;
foreach (Control ctl in ph.Controls)
{
CheckBox cb = ctl as CheckBox;
if (cb != null && cb.Checked)
{
n += Convert.ToInt32(cb.Text);
}
}
Response.Write(n);
}
Of course, there is many other ways to do that, but this is one is easy to understand like you seem to be a beginner.