On client side button click event, I want to get control id that are place in Item template of Grid View. I tried this code but it doesn't work. Thanks
function buttonClicked(sender, args) {
var gv = $find('<%= GridView1.ClientID %>');
var textbox = $GridView1.findControl(gv.get_element().parentNode, "Textbox");
}
Here is the Gridview
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1"runat="server">
</asp:ScriptManager>
<div>
<asp:UpdatePanel ID="upTest" runat="server">
<ContentTemplate>
<asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False" DataSourceID="KurzDS" DataKeyNames="Id" OnRowCommand="GridView1_RowCommand">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:TextBox ID="Textbox" runat="server" Text="Textbox"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:TextBox ID="Textbox1" runat="server" Text="Textbox1"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:Button ID="btn" Text='btn' CommandArgument='<%# Eval("Id")%>' CommandName="btn" runat="server" CausesValidation="false" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
Thanks for including the GridView example. Now that I can see what you are attempting, I have a much better answer for you.
First, make a slight change to the button template, change out CommandArgument for OnClientClickand since you are using this button client side instead of posting back to the server, you can simplify it like this:
<asp:Button ID="btn" Text='btn' OnClientClick='<%# Eval("ID", "YourJavascriptFunction({0} - 1); return false;") %>' runat="server" CausesValidation="false" />
I have the click event call your JavaScript function and it sends in a parameter of the server side resolved id. Notice I subtract 1 first though. This is because the server side ASP.Net Eval function give the ID starting at 1. But, each of the ids that get generated for your text input elements start with a zero base.
Now look at the JavaScript function below.
// Clicking the first button sends in a 0, second sends in a 1, etc.
function YourJavascriptFunction(id) {
// each of the TextBox1 elements has an ASP.Net server side
// generated id that ends with GridView2_Textbox1_0,
// GridView2_Textbox1_1, etc.
let selectId = "input[id$='GridView2_Textbox1_" + id + "']";
// The text we use in the querySelector function states
// find the DOM element with a tag of "input" where the id
// ends with . . . The $ in id$= is the part that says the
// value must "end with"
let textBox1 = document.querySelector(selectId);
// Now that we have TextBox1 from the same row as the button,
// getting the value is easy.
alert(textBox1.value);
}
I left off a jQuery example as this querySelector command works in almost every browser including IE8 and above, so you shouldn't need jQuery for something this simple.
Let me know if I can help further.
Related
I need to pass an argument (which comes from my database) from a radgrid view column to my javascript (which opens a dialog box window). However, I can't put the "bind("Id")" as a parameter from where I call the javascript as href.
In simpler words, I am looking for a way to pass <% Bind("Id")%> to the javascript, OpenMyWindow, call instead of the hardcoded, 111, right now.
<telerik:GridTemplateColumn UniqueName="Meet" DataField="Subject" HeaderText="Meet">
<ItemTemplate>
<div style="text-align: center">
<asp:LinkButton ID="LinkButton1" runat="server" Text='<%# Bind("Subject") %>' href="javascript: OpenMyWindow(111);" Width="30%">
</asp:LinkButton>
</div>
</ItemTemplate>
</telerik:GridTemplateColumn>
When I try "OnClick" instead of "href", my popup dialog box closes instantly and doesn't stay opened.
Try using "OnClientClick" and return false from your javascript method to prevent post back.
Alternatively. You could use a method passing in the DataIten. Then output an anchor tag created anyway you like:
<%# formatOpener(Container.DataItem) %>
With code behind of:
protected string formatOpener(object item)
{
ObjectType myObj = (ObjectType)item;
return String.Format("<a href=\"javascript:OpenMyWindow({0});\" width=\"30%\"/>{1}</a>", myObj.ID, myObj.subject);
}
I think you don't need a LinkButton, you could achieve it with an asp:HyperLink (which renders as a a tag):
<asp:HyperLink ID="HyperLink1" runat="server" Text='<%# Eval("Subject") %>' NavigateUrl='<%# "javascript: OpenMyWindow(" + Eval("ID").ToString() + ");" %>'></asp:HyperLink>
Also, don't use Bind if you don't need it, for displaying purposes always use Eval.
User HyperLink control instead and try setting the NavigateUrl property of the HyperLink this way:
<asp:HyperLink ID="hlLink" runat="server" Text='<%# Bind("Subject") %>' NavigateUrl='<%#Eval("Id", "javascript: OpenMyWindow({0});")%>'>
hope it helps./.
I finally figured out and solved this issue. Actually, somebody told me on the other post that, CommandArgument is completely a server-side property and doesn't render any html attribute. So I can't change any button's attribute and fire click on it. I finally made "Id" come through the code behind and made it work.
aspx code
<telerik:GridButtonColumn UniqueName="Subject" DataTextField="Subject" HeaderText="Meeting">
<HeaderStyle Width="30%" />
<ItemStyle HorizontalAlign="Center" />
</telerik:GridButtonColumn>
Code Behind
var subjectLink = meetingRow["Subject"].Controls[0] as LinkButton;
subjectLink.Attributes.Add("onClick", "javascript: return OpenMyWindow('" + meetingId + "')");
I'm using GridView and inside that I have DropDownList
<asp:GridView ID="GridView1" runat="server" OnRowDataBound="GridView1_RowDataBound">
<Columns>
<asp:TemplateField HeaderText="Product">
<ItemTemplate>
<asp:DropDownList ID="drop_prod" runat="server" OnSelectedIndexChanged="drop_prod_SelectedIndexChanged"></asp:DropDownList>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Email">
<ItemTemplate>
<asp:DropDownList ID="drop_mail" runat="server" OnSelectedIndexChanged="drop_mail_SelectedIndexChanged"></asp:DropDownList>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Dropdownlist is already populated by values(dynamically) and if user will select some other value from dropdownlist I would like to get that value without postback action.
I hope you will help me.
Thanks
"I would like to get that value without postback action."
If you dont want postback at all , you can catch dropdown change event in jquery.
<asp:DropDownList class="dropdown" ID="drop_prod" runat="server" OnSelectedIndexChanged="drop_prod_SelectedIndexChanged"></asp:DropDownList>
Note class 'dropdown' above.
$(document).ready(function(){
$(".dropdown").change(function(){
var selectedValue= $(this).val();
$(".ddl-value").val(selectedValue);
});
});
EDIT:
You can put one hidden variable in page like
<input type="hidden" id="selectedvalue" runat="server" class="ddl-value"/>
on server side access it like :
selectedvalue.Value
Add a hidden field with each dropdownlist and set the hidden field value to dropdownlist value using javascript. On submit loop through hidden field and get the value.
I am using the below code to handle the gridview dropdownlist on change event in clientside. In the mean time i want to pass the row id for my further process. But it's not working. But it's working while i call javascript without id.How can i pass the id to javascript.
<asp:TemplateField ItemStyle-Width="10px" HeaderText="Status">
<ItemTemplate>
<asp:DropDownList ID="ddl_status" runat="server" onchange='chng_status("<%#Bind("FLD_ID") %>")' >
<asp:ListItem></asp:ListItem>
<asp:ListItem>Realised</asp:ListItem>
<asp:ListItem>Non-Realised</asp:ListItem>
</asp:DropDownList>
</ItemTemplate>
</asp:TemplateField>
function chng_status(value) {
alert('enter');
alert(value);
}
You can do that like this:
<asp:DropDownList ID="ddl_status" runat="server"
onchange='<%# Eval("FLD_ID","chng_status(\"{0}\");") %>' >
I am using string formatting to pass the value to a javascript function.
Note that i don't fully understand what you are trying to achieve
I am a new coder trying to experiment with jquery for my first time. I'm trying to setup a simple datalist that might be used to display comments for an item. I want a clickable link (per datalist row) to drop down a panel (per datalist row) that has comment text. so the user looks at row 1, clicks it's link to read comments, and the comments panel drops down. they scroll down and do the same for the next item.
so far i have the below code as a small test page, but it's not working. nothing happens basically. I'm hoping someone can help me out because i'm very new and just teaching myself this stuff from what I see in tutorial videos and such. I tried the clientID thing because it seems i need that to deal with the auto-generated ID's .NET will assign panels as it's rendered, but i'm not sure if i'm doing it right.
greatly appreciate your time and effort.
head section
<script src="jquery-1.4.4.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('Panel1text').hide();
});
$("#<%=HyperLink1.ClientID%>").click(function() {
$("<%=Panel1text.ClientID%>").show();
});
</script>
body section
<asp:DataList ID="DataList1" runat="server" DataKeyField="cid"
DataSourceID="SqlDataSource1" Width="645px">
<ItemTemplate>
cid:
<asp:Label ID="cidLabel" runat="server" Text='<%# Eval("cid") %>' />
<br />
cuser:
<asp:Label ID="cuserLabel" runat="server" Text='<%# Eval("cuser") %>' />
<br />
blogid:
<asp:Label ID="blogidLabel" runat="server" Text='<%# Eval("blogid") %>' />
<br />
<br />
<asp:HyperLink ID="HyperLink1" runat="server">show text</asp:HyperLink>
<br />
<asp:Panel ID="Panel1text" runat="server">
<asp:Label ID="textLabel" runat="server" Text='<%# Eval("text") %>' />
</asp:Panel>
<br />
</ItemTemplate>
</asp:DataList>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
SelectCommand="SELECT * FROM [ocomments]"></asp:SqlDataSource>
It looks to me like you are going to have multiple elements with the id of 'HyperLink1' and 'Panel1text'. I would recommend using classes instead. Add a "class='link'" to the link element and a "class='panel'" to the panel element. Use the following CSS to initially hide the panels:
.panel { display: none; }
Then use the following jQuery to show the element:
$(document).ready(function(){
$(".link").click(function(evt){
evt.preventDefault(); // prevents the click from leaving the page
$(this).next().show(); // show the panel
});
});
You may need to fiddle with the '.next().show()' selector a bit. Not certain how ASP.NET is going to render out the elements.
Bob
I need to access a label control in a listview when I've clicked a button (that is on the same row)...
Does anyone know how to do this please? :(
See below for more of an insight...
ASPX Page:
<asp:ListView ID="ListView1" runat="server" DataSourceID="DataSource">
<LayoutTemplate>//Etc </LayoutTemplate>
<ItemTemplate>
<asp:Label ID="lblDone" runat="server" Visible="false">Your vote has been counted</asp:Label>
<asp:Button ID="voteButton" runat="server" Text="Vote" CommandArgument='<%#Eval("id") %>' OnClick="voteOnThis" />
</ItemTemplate>
Code Behind:
protected void voteOnThis(object sender, EventArgs e)
{
Button myButton = (Button)sender;
Voting.vote(int.Parse(myButton.CommandArgument));
// Here i would like to access the 'label' lblDone and make this Visible
}
In this simple case, I should consider using Javascript (JQuery)
<asp:ListView ID="ListView1" runat="server" DataSourceID="DataSource">
<LayoutTemplate>//Etc </LayoutTemplate>
<ItemTemplate>
<asp:Label ID="lblDone" runat="server" style="visibility:hidden">Your vote has been counted</asp:Label>
<asp:Button OnClientClick="showLblDone()" ID="voteButton" runat="server" Text="Vote" CommandArgument='<%#Eval("id") %>' OnClick="voteOnThis" />
</ItemTemplate>
now, define inside a script tag the showLblDone function:
<script>
function showLblDone (){
$(this).siblings('span').show();}
</script>
You can also call this function with a parameter if you want to show/hide on every click, or you can use .toggle() instead of .show().
In this case you must add a div (or a Panel) inside the ItemTemplate.
You need to hook into the listview row bind and add the information you want to have when clicked. Using this, you can add an attribute to the button that you read back on click, for example...
If you posted some actual code, I could probably help some more.