I am currently having an issue with radio buttons and grouping. I have an asp radio button within a repeater control. I have the group name attribute set to "Customer". When the page loads, the radio buttons are not grouped. Instead of the id fields being set to the group name, it is setting the value fields of the radio buttons. I know that I have tried setting radio buttons up outside of a repeater control and have had the same issue. What is going on here?
aspx
<asp:Repeater ID="repCustomers" runat="server">
<HeaderTemplate>
<table class="tableDefault" cellpadding="0" cellspacing="0" border="0" style="width: 383px; border: 0px !important">
<tr>
<th> </th>
<th>Cust. No.</th>
<th>Cust. Name</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<asp:RadioButton ID="radCustomer" GroupName="Customer" runat="server" ValidationGroup="Customer" ToolTip='<%#Eval("CustomerNumber") %>' />
</td>
<td><%#Eval("CustomerNumber")%></td>
<td><%#Eval("Name") %></td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
output html
<table class="tableDefault" cellpadding="0" cellspacing="0" border="0" style="width: 383px; border: 0px !important">
<tr>
<th> </th>
<th>Cust. No.</th>
<th>Cust. Name</th>
</tr>
<tr>
<td>
<span title="111111"><input id="ctl00_PrimaryContent_repCustomers_ctl01_radCustomer" type="radio" name="ctl00$PrimaryContent$repCustomers$ctl01$Customer" value="radCustomer" /></span>
</td>
<td>111111</td>
<td>Jeremy's Test</td>
</tr>
<tr>
<td>
<span title="222222"><input id="ctl00_PrimaryContent_repCustomers_ctl02_radCustomer" type="radio" name="ctl00$PrimaryContent$repCustomers$ctl02$Customer" value="radCustomer" /></span>
</td>
<td>222222</td>
<td>My Test</td>
</tr>
<tr>
<td>
<span title="333333"><input id="ctl00_PrimaryContent_repCustomers_ctl03_radCustomer" type="radio" name="ctl00$PrimaryContent$repCustomers$ctl03$Customer" value="radCustomer" /></span>
</td>
<td>333333</td>
<td>Jim Bob's BBQ</td>
</tr>
<tr>
<td>
<span title="444444"><input id="ctl00_PrimaryContent_repCustomers_ctl04_radCustomer" type="radio" name="ctl00$PrimaryContent$repCustomers$ctl04$Customer" value="radCustomer" /></span>
</td>
<td>444444</td>
<td>New Hope Hamburgers</td>
</tr>
<tr>
<td>
<span title="555555"><input id="ctl00_PrimaryContent_repCustomers_ctl05_radCustomer" type="radio" name="ctl00$PrimaryContent$repCustomers$ctl05$Customer" value="radCustomer" /></span>
</td>
<td>555555</td>
<td>Pied Piper Pizza</td>
</tr>
<tr>
<td>
<span title="666666"><input id="ctl00_PrimaryContent_repCustomers_ctl06_radCustomer" type="radio" name="ctl00$PrimaryContent$repCustomers$ctl06$Customer" value="radCustomer" /></span>
</td>
<td>666666</td>
<td>Sandy's Subs</td>
</tr>
<tr>
<td>
<span title="777777"><input id="ctl00_PrimaryContent_repCustomers_ctl07_radCustomer" type="radio" name="ctl00$PrimaryContent$repCustomers$ctl07$Customer" value="radCustomer" /></span>
</td>
<td>777777</td>
<td>Leonard's Lambchops</td>
</tr>
<tr>
<td>
<span title="888888"><input id="ctl00_PrimaryContent_repCustomers_ctl08_radCustomer" type="radio" name="ctl00$PrimaryContent$repCustomers$ctl08$Customer" value="radCustomer" /></span>
</td>
<td>888888</td>
<td>Dave's Diamond Deli</td>
</tr>
<tr>
<td>
<span title="999999"><input id="ctl00_PrimaryContent_repCustomers_ctl09_radCustomer" type="radio" name="ctl00$PrimaryContent$repCustomers$ctl09$Customer" value="radCustomer" /></span>
</td>
<td>999999</td>
<td>Ernie's Eatery</td>
</tr>
</table>
I finally got around this by creating a plain radio button and setting the value using an server-side eval.
<input type="radio" name="radCustomer" value='<%#Eval("CustomerNumber") %>' />
Now when the application performs a postback, I check for the value of Request.Form["radCustomer"]. This works flawlessly.
Unfortunately, this is a well known issue with radio buttons within a repeater. One of your only options would be to create a custom server control derived from the RadioButton class and override how it renders.
EDIT: Here's a sample of what the derived class may look like:
public class MyRadioButton : RadioButton
{
protected override void Render(HtmlTextWriter writer)
{
writer.Write("<input id=\"" + base.ClientID + "\" ");
writer.Write("type=\"radio\" ");
writer.Write("name=\"" + base.ID + "\" ");
writer.Write("value=\"" + base.ID + "\" />");
writer.Write("<label for=\"" + base.ClientID + "\">");
writer.Write(base.Text);
writer.Write("</label>");
}
}
I fixed it in javascript:
$(function () {
$("#divWithGridViewOrRepeater input:radio").attr("name", "yourGroupName");
});
I had the same issues. I am using Literal as placeholder to render radio button onItemCreated event.
ASP.Net
<asp:Repeater ID="rpt" runat="server" OnItemCreated="rpt_OnItemCreated">
<ItemTemplate>
<asp:Literal ID="lit" runat="server"></asp:Literal>
</ItemTemplate>
</asp:Repeater>
C#
protected void rpt_OnItemCreated(object sender, RepeaterItemEventArgs e) {
Literal lit = (Literal)e.Item.FindControl("lit");
lit.Text = "<input type=\"radio\" name=\"myGroup\">";
}
I had to modify slightly the answer posted above by r3dsky.
Here's what worked for me:
$(document).ready(function () {
$(".divWithGridViewOrRepeater input:radio").attr("name", "yourGroupName");
});
I would start by adding a value on my radiobutton Value='<%#Eval("CustomerNumber") %>'.
I made my radiobutton have autopostback set to true, and then in the event handler set all the other radio buttons to BE unselected.
Not ideal, but I need lots control over the visibility and enabled attributes of the radiobutton, and it seemed easier to let ASP.NET control that rather than resorting to client side script.
This is a well known bug with the ASP.NET Repeater using RadioButtons:
here best solution in my opinion
I did this:
$("input:radio").attr("name", $("input:radio").first().attr("name"));
Why? because if you replace the name property for any string you want, you will get an 'not found error'. So, you need to get the name of the first radiobutton, and rename all of them with that name. It works like a sharm ;)
My solution, similar to others:
<input id="ctlRadio" runat="server" type="radio" data-fixgroupbug="1" >
// Fixes this ASP.NET bug: if radio input is inside repeater you can't set its name.
// Every input gets set different name by ASP.NET.
// They don't behave as a group. You can select multiple radios.
function fixRadiogroupBug()
{
$('[type="radio"][data-fixgroupbug]').click(function () {
$(this).siblings('[type="radio"]').prop('checked', false);
});
}
$(document).ready(function () {
fixRadiogroupBug();
});
Related
I have a textbox and a GridView. I have made a column in gridview as a linkbutton. I want that when I click a linkbutton I get that link button text value in my textbox.
My gridview is shown below-
I want When I click test5 my textbox1.text = test5 and so on..
How can I do this ?
Please add commandname in gridview link column as below
<asp:LinkButton runat="server" id="lnklink" CommandName="displayLink" />
And add the "RowCommand" event on gridview like below
<asp:GridView ID="gvDemo" runat="server
onrowcommand="gvDemo_RowCommand" />
protected void gvDemo_RowCommand(object sender, GridViewCommandEventArgs e)
{
if (e.CommandName == "displayLink")
{
textbox1.text=((LinkButton)e.CommandSource).Text;
}
}
You can do this both in asp as well as using client side technologies like JQUERY javascript etc, I will suggest you to use jquery since keeping such things in client side will help you improve the performance
Now when u create a grid /repeater etc ultimately .net renders it into simple html controls, and jquery or client side technologies just work over this html , here is a small example with simple html
> HTML
My data : <input type="Text" id="TxtBox"/> //in .net id u have to take care by using .clientid property
<table>
<tr>
<td width="50">
<input type="checkbox"/>
</td>
<td width="50">
SOmething
</td>
<td width="50">
<a href="#" class="someName" >LINK1</a>
</td>
</tr>
<tr>
<td width="50">
<input type="checkbox"/>
</td>
<td width="50">
SOmething2
</td>
<td width="50">
<a href="#" class="someName" >LINK2</a> //class name is important since thats what we are going deal with
</td>
</tr>
<tr>
<td width="50">
<input type="checkbox"/>
</td>
<td width="50">
SOmething3
</td>
<td width="50">
LINK3
</td>
</tr>
</table>
JQUERY
$(".someName").on("click","",function(){
$("#TxtBox").val($(this).text());
});
FIDDLE
http://jsfiddle.net/AmarnathRShenoy/Hw4UG/
create RowCommand event for grid and then do the following code
protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
{
if (e.CommandName.ToLower() == "test")
{
textbox1.Text = e.CommandArgument.ToString();
}
}
and for aspx page do the following in your linkbutton
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton ID="linkbtn" runat="server" Text="test5" CommandArgument="test5" CommandName="test" />
</ItemTemplate>
</asp:TemplateField>
or if you are binding your database table column to your linkbutton then do the following
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton ID="linkbtn" runat="server" Text='<% yourcolumname %>' CommandArgument='<% yourcolumname %>' CommandName="test" />
</ItemTemplate>
</asp:TemplateField>
In my masterpage I have links for users also the authorization is different like admin and regular user.
links under each other and I can hide the hyperlinks depending on authorization status but the problem is i.e when I have 3 links the second link for the admin the link will hide when the user is regular and the link place empty like 123 1 3.
So I have an idea using table each link in one tr but I can`t hide td or tr because Visible is not in properties.
any help?
thank you
According to how to hide a having asp.net control:
you can give ID either to the TD or TR to which you want to hide/show
with the runat="server" and also you can take that tr/td inside the
div tag and give id to that div tag and also runat=server attribute
and after that you can pro grammatically hide/show that div.
like
<pre>
<tr id="trhide" runat="server"> </tr>
</pre>
in code behind write
trhide.visible=true/false
In the master page VB code behind add a public procedure: Then call the public set from your aspx page.
'======================================================================================================
'Set Tab No invisible
'======================================================================================================
Public Sub setTabNumberLabel(visible As Int16)
If visible = 0 Then
td_page.Visible = False
Else
td_page.Visible = True
End If
End Sub
The master aspx would be:
<table style="width:100%">
<!--<tr style="background-color:#565656;">-->
<tr>
<td style="width:15%;text-align:left;vertical-align:bottom;padding-left:20px;">Stategic Energy Assessment ( <asp:Label ID="lbl_year_ended" runat="server" /> )</td>
<td style="text-align:center;vertical-align:bottom;"><asp:Label ID="lbl_utility_name_and_id" runat="server" /></td>
<td id="td_page" runat="server" style="width:15%;text-align:right;vertical-align:bottom;padding-right:20px;">Tab No: <asp:Label ID="lbl_page" runat="server" /></td>
</tr>
<tr><td colspan="3" style="vertical-align:central"><hr /></td></tr>
<tr>
<td style="width:15%;text-align:left;vertical-align:central">
<asp:Label ID="lbl_print_version" runat="server" Text="View Printable Vision" Visible="false" />
</td>
<td style="font-size:larger; font-weight:bold; text-align:center; text-transform:capitalize;vertical-align:central">
<asp:Label ID="lbl_schedule_name" runat="server" />
</td>
<td style="width:15%;text-align:right;vertical-align:central;padding-right:20px;">
<asp:LinkButton ID="btn_footnotes" runat="server" Visible="false">Footnotes</asp:LinkButton>
</td>
</tr>
<%--<tr><td colspan="3" style="vertical-align:central" class="auto-style1"></td></tr>--%>
<tr><td colspan="3" style="vertical-align:central; padding-right:20%;padding-left:20%; ">
<i><asp:Label ID="lbl_headnotes" runat="server" Text="" /></i></td></tr>
<tr><td colspan="3" style="vertical-align:central"><hr /></td></tr>
</table>
The other answer is correct and works fine. Just adding complete piece of code.
It's quite amusing that you don't need to add runat=server for a table but you can still hide tr for that table using runat attribute.
<table>
<tr>
<td>aa</td><td>bb</td>
</tr>
<tr id="trHide1" runat="server">
<td>aa</td><td>bb</td>
</tr>
<tr id="trHide2" runat="server">
<td>aa</td><td>bb</td>
</tr>
<tr>
<td>aa</td><td>bb</td>
</tr>
</table>
Now just set properties in codebehind (hiding the tr)
trHide1.Visible = false;
trHide2.Visible = false;
I need to put a table in the div which contains textboxs and labels when someone click on a button.
Structure of table is as below...
<table>
<tr>
<td>
<label id="l1" text="adfa"></label>
</td>
<td>
<input type="text" id="t1">
</td>
</tr>
<table>
The no of rows can vary but the structure of a row will be same as here in the above table.
I am trying to use Placeholder but confused how to put all the stuff their...
Are you performing this operation client-side or server-side (for the latter, are you posting back to the server to update the response)? If the latter, using a ListView control would work perfectly, as you can define it as:
<asp:ListVIew .. ItemPlaceholderID="Items">
<LayoutTemplate>
<table>
<tr runat="server" id="Items" />
</table>
</LayoutTemplate>
<ItemTemplate>
<tr>
<td>
<label id="l1" text="afda"></label>
</td>
<td>
<input type="text" id="t1">
</td>
</tr>
</ItemTemplate>
</asp:ListView>
Then you can do:
ListView1.DataSource = //some data source
ListView1.DataBind()
The data can be empty rows just to populate the list initially, or some valid data. Some further references:
http://weblogs.asp.net/scottgu/archive/2007/08/10/the-asp-listview-control-part-1-building-a-product-listing-page-with-clean-css-ui.aspx
http://msdn.microsoft.com/en-us/library/bb398790(v=vs.100).aspx
for (int i = 0; i < noofsubject; i++)
{
table.Width = 760;
TableRow tRow1 = new TableRow();
TableCell tCell11 = new TableCell();
tCell11.Text = "Subject " + i;
tRow1.Cells.Add(tCell11);
table.Rows.Add(tRow1);
}
PlaceHolder1.Controls.Add(table);
I was looking for this..
I have a repeater. And i want to hide and display a particular column for a particular condition. I have three types of subjects and their ids are 0,1,2 respectively. Now i want to show that particular column when the subject will be 2 only..
My code is :-
<table id="table1" class="yui" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>
EmpID #
</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<asp:Repeater ID="Repaddressorbbl" runat="server" OnItemCommand="Repaddressorbbl_ItemCommand">
<ItemTemplate>
<tr id="gh" style="cursor: pointer" onclick="Select(this);">
<td style="text-align: center;">
<%#Eval("empid")%>
</td>
<td>
<asp:LinkButton ID="lknumber" runat="server" Text="Edit" CommandName="subjectid" />
</td>
</tr>
</ItemTemplate>
</asp:Repeater>
</tbody>
<tfoot>
</tfoot>
</table>
You could catch the OnItemDataBound event of the repeater and hide the column there if the (subject) item id is 2.
In order you can get a reference to the column, make it a server control:
<td style="text-align: center;" id="COL_TO_HIDE" runat="server"><%#Eval("empid")%></td>
Then in the repeater event you can simply look for the control and hide it:
protected void YourRepeater_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
var subject = (Subject)e.Item.DataItem;
if (subject.Id == 2)
{
var col = e.Item.FindControl("COL_TO_HIDE");
col.Visible = false;
}
}
}
Please note, this is just a simplified example which should you get started.
I think you should start by using <HeaderTemplate></HeaderTemplate> and <FooterTemplate></FooterTemplate> to define the start and end of your table just to tidy it up.
You can get the table to run on the server by adding a runat="server" and give the column <td> an id and a runat="server" attribute so you can program server code against it. I'd then eval bind the visible attribute of the cell based on your field value or use attributes.add("display:none") or just use a grid view as suggested in the link.
<asp:Repeater ID="Repaddressorbbl" runat="server"
OnItemCommand="Repaddressorbbl_ItemCommand">
<ItemTemplate>
<tr id="gh" style="cursor: pointer" onclick="Select(this);">
<td style="text-align: center;">
<%#Eval("empid")%>
</td>
<% if (false){ %>
<td>
<asp:LinkButton ID="lknumber" runat="server"
Text="Edit" CommandName="subjectid" />
</td>
<% } %>
</tr>
</ItemTemplate>
</asp:Repeater>
I define some controls inside repeater itemtemplate, the problem is with the Id that are generated automatically.
This is my page:
<asp:Repeater ID="rptThreads" runat="server"
onitemcreated="rptThreads_ItemCreated">
<HeaderTemplate>
<table cellpadding="0px" cellspacing="0">
</HeaderTemplate>
<ItemTemplate>
<tr style="height:50px">
<td>
<asp:PlaceHolder ID="plcItemTitle" runat="server">
<asp:Panel id="titleContainer" runat="server" style="position:absolute;">
<asp:HyperLink ID="lnkTitle" runat="server" style="float:left;padding-right:10px;" Text='<%# Container.DataItem%>'/>
<asp:Panel id="pnlEditButtons" runat="server" Visible="false" style="vertical-align:middle;z-index:100;display:none;float:left;" >
<asp:ImageButton ID="imgbtn1" runat="server" ImageUrl="~/Images/misc/edit.png" />
<asp:ImageButton ID="imgbtn2" runat="server" ImageUrl="~/Images/misc/Rename.png" />
</asp:Panel>
</asp:Panel>
</asp:PlaceHolder>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
Now I will try to describe the problem:
code-behind:
protected void Page_Load(object sender, EventArgs e)
{
int [] array = {1,2,3,4,5};
rptThreads.DataSource = array;
rptThreads.DataBind();
}
protected void rptThreads_ItemCreated(object sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item ||
e.Item.ItemType == ListItemType.AlternatingItem)
{
Panel editButtonsPanel = e.Item.FindControl("pnlEditButtons") as Panel;
editButtonsPanel.Visible = true;
Panel containerPanel = e.Item.FindControl("titleContainer") as Panel;
//Point of Interest!!!!
containerPanel.Attributes.Add("onmouseover", "ShowEditButtons('" + editButtonsPanel.ClientID + "');");
}
}
If I run the page as is, the generated html will be the following (I show only the first 2 items):
<table cellpadding="0px" cellspacing="0">
<tr style="height:50px">
<td>
<div id="titleContainer" onmouseover="ShowEditButtons('pnlEditButtons');" style="position:absolute;">
<a id="lnkTitle" style="float:left;padding-right:10px;">1</a>
<div id="pnlEditButtons" style="vertical-align:middle;z-index:100;display:none;float:left;">
<input type="image" name="imgbtn1" id="imgbtn1" src="Images/misc/edit.png" style="border-width:0px;" />
<input type="image" name="imgbtn2" id="imgbtn2" src="Images/misc/Rename.png" style="border-width:0px;" />
</div>
</div>
</td>
</tr>
<tr style="height:50px">
<td>
<div id="titleContainer" onmouseover="ShowEditButtons('pnlEditButtons');" style="position:absolute;">
<a id="lnkTitle" style="float:left;padding-right:10px;">2</a>
<div id="pnlEditButtons" style="vertical-align:middle;z-index:100;display:none;float:left;">
<input type="image" name="imgbtn1" id="imgbtn1" src="Images/misc/edit.png" style="border-width:0px;" />
<input type="image" name="imgbtn2" id="imgbtn2" src="Images/misc/Rename.png" style="border-width:0px;" />
</div>
</div>
</td>
</tr>
As you can see all divs get the SAME ID, THIS I DONT WANT!!!
But If I omit this line form the ItemCreated event:
containerPanel.Attributes.Add("onmouseover", "ShowEditButtons('" + editButtonsPanel.ClientID + "');");
The generated HTML will be the following:
<table cellpadding="0px" cellspacing="0">
<tr style="height:50px">
<td>
<div id="rptThreads_ctl01_titleContainer" style="position:absolute;">
<a id="rptThreads_ctl01_lnkTitle" style="float:left;padding-right:10px;">1</a>
<div id="rptThreads_ctl01_pnlEditButtons" style="vertical-align:middle;z-index:100;display:none;float:left;">
<input type="image" name="rptThreads$ctl01$imgbtn1" id="rptThreads_ctl01_imgbtn1" src="Images/misc/edit.png" style="border-width:0px;" />
<input type="image" name="rptThreads$ctl01$imgbtn2" id="rptThreads_ctl01_imgbtn2" src="Images/misc/Rename.png" style="border-width:0px;" />
</div>
</div>
</td>
</tr>
<tr style="height:50px">
<td>
<div id="rptThreads_ctl02_titleContainer" style="position:absolute;">
<a id="rptThreads_ctl02_lnkTitle" style="float:left;padding-right:10px;">2</a>
<div id="rptThreads_ctl02_pnlEditButtons" style="vertical-align:middle;z-index:100;display:none;float:left;">
<input type="image" name="rptThreads$ctl02$imgbtn1" id="rptThreads_ctl02_imgbtn1" src="Images/misc/edit.png" style="border-width:0px;" />
<input type="image" name="rptThreads$ctl02$imgbtn2" id="rptThreads_ctl02_imgbtn2" src="Images/misc/Rename.png" style="border-width:0px;" />
</div>
</div>
</td>
</tr>
All divs get unique IDs, and this I do want
My questions are:
1)why it happens? why this line of code messup the ids?
2)how can have the unique ID's and assign javascript in codebehind?
I can add this on aspx (it will wotk and I will get unique ids):
onmouseover='<%# "javascript:ShowEditButtons(\""+ Container.FindControl("pnlEditButtons").ClientID+ "\");" %>'
But I must do it in codebehind because I need to set the javascript only if server validate some things.
Well as to why this is happening I'm not real sure. I suspect it may know that you used the ClientID so it didn't change it according to the naming container when the HTML was rendered.
As to what you can do to fix the problem, don't pass the ID to the javascript function. When an event fires in javascript the event object will be passed to the function for Firefox, IE has an explicit windows.event object. The event object will have a reference to the object that fired the event which you can then use to access the ID, but my guess is you were going to use the ID to get a reference to the element anyway.
An odd problem, can't say why this is happening, BUT... try moving this code to ItemDataBound instead of ItemCreated, I think you'll have more luck. I've written code exactly like this, but using OnItemDataBound and not had a problem.
Theoretically, any control inside a NamingContainer should get a unique ID, so there is definitely something fishy going on here.